choices.js - npm Package Compare versions

Comparing version 7.0.0 to 7.0.1

package.json

 {
   "name": "choices.js",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "A vanilla JS customisable text input/select box plugin",
@@ -5,0 +5,0 @@ "main": "./public/assets/scripts/choices.min.js",

README.md

@@ -33,3 +33,3 @@ # Choices.js ![Build Status](https://travis-ci.org/jshjohnson/Choices.svg?branch=master) [![](https://data.jsdelivr.com/v1/package/npm/choices.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/choices.js) [![npm](https://img.shields.io/npm/v/choices.js.svg)](https://www.npmjs.com/package/choices.js) [![codebeat badge](https://codebeat.co/badges/55120150-5866-42d8-8010-6aaaff5d3fa1)](https://codebeat.co/projects/github-com-jshjohnson-choices-master)
 
-**Note:** There is sometimes a delay before the latest version of Choices in reflected on the CDN.
+**Note:** There is sometimes a delay before the latest version of Choices is reflected on the CDN.
 
@@ -159,5 +159,5 @@ ```html
 | ------ | ---------- |
-| Choice | A choice is a value a user can select. A choice would be equivelant to the `<option></option>` element within a select input.  |
+| Choice | A choice is a value a user can select. A choice would be equivalent to the `<option></option>` element within a select input.  |
 | Group  | A group is a collection of choices. A group should be seen as equivalent to a `<optgroup></optgroup>` element within a select input.|
-| Item   | An item is an inputted value (text input) or a selected choice (select element). In the context of a select element, an item is equivelent to a selected option element: `<option value="Hello" selected></option>` whereas in the context of a text input an item is equivelant to `<input type="text" value="Hello">`|
+| Item   | An item is an inputted value (text input) or a selected choice (select element). In the context of a select element, an item is equivalent to a selected option element: `<option value="Hello" selected></option>` whereas in the context of a text input an item is equivalent to `<input type="text" value="Hello">`|
 
@@ -164,0 +164,0 @@

src/scripts/choices.js

 import Fuse from 'fuse.js';
 import merge from 'deepmerge';
 
+import './lib/delegate-events';
 import Store from './store/store';
@@ -1075,9 +1076,9 @@ import {
   _addEventListeners() {
-    document.addEventListener('keyup', this._onKeyUp);
-    document.addEventListener('keydown', this._onKeyDown);
-    document.addEventListener('click', this._onClick);
-    document.addEventListener('touchmove', this._onTouchMove);
-    document.addEventListener('touchend', this._onTouchEnd);
-    document.addEventListener('mousedown', this._onMouseDown);
-    document.addEventListener('mouseover', this._onMouseOver);
+    window.delegateEvent.add('keyup', this._onKeyUp);
+    window.delegateEvent.add('keydown', this._onKeyDown);
+    window.delegateEvent.add('click', this._onClick);
+    window.delegateEvent.add('touchmove', this._onTouchMove);
+    window.delegateEvent.add('touchend', this._onTouchEnd);
+    window.delegateEvent.add('mousedown', this._onMouseDown);
+    window.delegateEvent.add('mouseover', this._onMouseOver);
 
@@ -1100,9 +1101,9 @@ if (this._isSelectOneElement) {
   _removeEventListeners() {
-    document.removeEventListener('keyup', this._onKeyUp);
-    document.removeEventListener('keydown', this._onKeyDown);
-    document.removeEventListener('click', this._onClick);
-    document.removeEventListener('touchmove', this._onTouchMove);
-    document.removeEventListener('touchend', this._onTouchEnd);
-    document.removeEventListener('mousedown', this._onMouseDown);
-    document.removeEventListener('mouseover', this._onMouseOver);
+    window.delegateEvent.remove('keyup', this._onKeyUp);
+    window.delegateEvent.remove('keydown', this._onKeyDown);
+    window.delegateEvent.remove('click', this._onClick);
+    window.delegateEvent.remove('touchmove', this._onTouchMove);
+    window.delegateEvent.remove('touchend', this._onTouchEnd);
+    window.delegateEvent.remove('mousedown', this._onMouseDown);
+    window.delegateEvent.remove('mouseover', this._onMouseOver);
 
@@ -1456,3 +1457,3 @@ if (this._isSelectOneElement) {
     } else {
-      const hasHighlightedItems = this._store.highlightedActiveItems;
+      const hasHighlightedItems = this._store.highlightedActiveItems.length > 0;
 
@@ -1817,3 +1818,3 @@ if (hasHighlightedItems) {
     this.input = new Input({
-      element: this._getTemplate('input'),
+      element: this._getTemplate('input', this._placeholderValue),
       classNames: this.config.classNames,
@@ -1820,0 +1821,0 @@ type: this.passedElement.element.type,

src/scripts/lib/utils.js

@@ -143,3 +143,4 @@ export const getRandomNumber = (min, max) =>
         testEl.style.textTransform = inputStyle.textTransform;
-        testEl.style.padding = inputStyle.padding;
+        testEl.style.paddingLeft = inputStyle.paddingLeft;
+        testEl.style.paddingRight = inputStyle.paddingRight;
       }
@@ -146,0 +147,0 @@ }

src/scripts/templates.js

@@ -177,3 +177,3 @@ import classNames from 'classnames';
   },
-  input(globalClasses) {
+  input(globalClasses, placeholderValue) {
     const localClasses = classNames(
@@ -193,2 +193,3 @@ globalClasses.input,
         aria-autocomplete="list"
+        aria-label="${placeholderValue}"
         >
@@ -195,0 +196,0 @@ `);

src/scripts/templates.test.js

@@ -511,5 +511,6 @@ import { expect } from 'chai';
           aria-autocomplete="list"
+          aria-label="test placeholder"
         >
       `);
-      const actualOutput = templates.input(classes);
+      const actualOutput = templates.input(classes, 'test placeholder');
 
@@ -516,0 +517,0 @@ expect(getType(actualOutput)).to.equal('HTMLInputElement');

types/index.d.ts

@@ -1,6 +0,6 @@
-// Type definitions for Choices.js 3.0.2
+// Type definitions for Choices.js 7.0.0
 // Project: https://github.com/jshjohnson/Choices
 // Definitions by: Arthur vasconcelos <https://github.com/arthurvasconcelos>, Josh Johnson <https://github.com/jshjohnson>, Zack Schuster <https://github.com/zackschuster>
 // Definitions: https://github.com/jshjohnson/Choices
-// TypeScript Version: 2.6.2
+// TypeScript Version: 2.9.2
 
@@ -19,2 +19,15 @@ // Choices Namespace
 
+  interface Choice {
+    customProperties?: { [prop: string]: any };
+    disabled?: boolean;
+    elementId?: string;
+    groupId?: string;
+    id?: string;
+    keyCode?: number;
+    label: string;
+    placeholder?: any;
+    selected?: boolean;
+    value: any;
+  }
+
   /**
@@ -115,14 +128,32 @@ * Events fired by Choices behave the same as standard events. Each event is triggered on the element passed to Choices (accessible via `this.passedElement`. Arguments are accessible within the `event.detail` object.
 
+  interface Group {
+    active?: boolean;
+    disabled?: boolean;
+    id?: string;
+    value: any;
+  }
+
+  interface Item {
+    choiceId?: string;
+    customProperties?: { [prop: string]: any };
+    groupId?: string;
+    id?: string;
+    keyCode?: number;
+    label: string;
+    placeholder?: string;
+    value: any;
+  }
+
   interface Templates {
-    containerOuter?: (direction: string) => HTMLElement;
-    containerInner?: () => HTMLElement;
-    itemList?: () => HTMLElement;
-    placeholder?: (value: string) => HTMLElement;
-    item?: (data: any) => HTMLElement;
-    choiceList?: () => HTMLElement;
-    choiceGroup?: (data: any) => HTMLElement;
-    choice?: (data: any) => HTMLElement;
-    input?: () => HTMLInputElement;
-    dropdown?: () => HTMLElement;
-    notice?: (label: string) => HTMLElement;
+    containerOuter?: (classNames: ClassNames, direction: string) => HTMLElement;
+    containerInner?: (classNames: ClassNames) => HTMLElement;
+    itemList?: (classNames: ClassNames, isSelectOneElement: boolean) => HTMLElement;
+    placeholder?: (classNames: ClassNames, value: string) => HTMLElement;
+    item?: (classNames: ClassNames, data: any, removeItemButton: boolean) => HTMLElement;
+    choiceList?: (classNames: ClassNames, isSelectOneElement: boolean) => HTMLElement;
+    choiceGroup?: (classNames: ClassNames, data: any) => HTMLElement;
+    choice?: (classNames: ClassNames, data: any) => HTMLElement;
+    input?: (classNames: ClassNames) => HTMLInputElement;
+    dropdown?: (classNames: ClassNames) => HTMLElement;
+    notice?: (classNames: ClassNames, label: string) => HTMLElement;
     option?: (data: any) => HTMLOptionElement;
@@ -687,4 +718,4 @@ }
 
-  presetChoices: any[];
-  presetItems: any[];
+  presetChoices: Choices.Choice[];
+  presetItems: Choices.Item[];
 
@@ -855,3 +886,3 @@ readonly baseId: string;
   /** Direct populate choices */
-  setChoices(choices: any[], value: string, label: string, replaceChoices?: boolean): this;
+  setChoices(choices: Choices.Choice[], value: string, label: string, replaceChoices?: boolean): this;
 
@@ -911,9 +942,9 @@ /**
   /** Render group choices into a DOM fragment and append to choice list */
-  private createGroupsFragment(groups: any[], choices: any[], fragment: DocumentFragment): DocumentFragment;
+  private createGroupsFragment(groups: Choices.Group[], choices: Choices.Choice[], fragment: DocumentFragment): DocumentFragment;
 
   /** Render choices into a DOM fragment and append to choice list */
-  private createChoicesFragment(choices: any[], fragment: DocumentFragment, withinGroup?: boolean): DocumentFragment;
+  private createChoicesFragment(choices: Choices.Choice[], fragment: DocumentFragment, withinGroup?: boolean): DocumentFragment;
 
   /** Render items into a DOM fragment and append to items list */
-  private _createItemsFragment(items: any[], fragment?: DocumentFragment): void;
+  private _createItemsFragment(items: Choices.Item[], fragment?: DocumentFragment): void;
 
@@ -920,0 +951,0 @@ /** Render DOM with values */

No alert changes

Improved metrics

Total package byte prevSize

657389

increased by0.37%

Number of package files

60

increased by1.69%

Lines of code

15255

increased by0.45%

No dependency changes