Merge pull request #12 from adidas/feature/update-choicejs

Update choices.js library to v9.0.1

CHANGELOG.md

@@ -1,3 +1,39 @@
+# 1.5.0
+
+- Update `choices.js` to version `9.0.1`. Changes:
+  - `hiddenState` className is removed.
+  - `itemOption` className is replaced by `itemChoice` className.
+  - New `selectedState` className is added.
+  - `fusejs.io` updates from `2.7.4` to version `3.4.6`. Changes:
+    - New options added to `FuseOptions`:
+      - `includeMateches`,
+      - `includeScore`,
+      - `findAllMatches`,
+      - `sortFn`,
+      - and `getFn`.
+  - Changes on `IchoicesProps`:
+    - `addItemFilterFn` renamed to `addItemFilter`. It also allows `string` and `RegExp` types.
+    - `sortFn` renamed to `sorter`.
+    - Added `uniqueItemText`.
+    - Added `customAddItemText`.
+    - Added `valueComparer`.
+  - Removed `ajax` on `IChoicesMethods`.
+- Update `@stencil/core` to version `1.12.7`.
+  - See: https://github.com/ionic-team/stencil/blob/master/CHANGELOG.md
+- Update other dev dependencies:
+  - `@babel/plugin-syntax-dynamic-import` to version `7.8.3`.
+  - `@stencil/sass` to version `1.3.1`.
+  - `@types/jest` to version `25.2.1`.
+  - `choices.js` to version `9.0.1`.
+  - `jest` to version `25.5.2`.
+  - `jest-dot-reporter` to version `1.0.14`.
+  - `rimraf` to version `3.0.2`.
+  - `tslint` to version `6.1.2`.
+  - `typedoc` to version `0.17.6`.
+  - `workbox-build` to version `5.1.3`.
+  - `fsevents` to version `2.1.3`. 
+- Rename `utils.tsx` to `utils.ts`
+
 # 1.4.0
 
 - Updated `@stencil/core` to version `1.5.4`.

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   transform: {
-    '^.+\\.(ts|tsx)$': '<rootDir>/node_modules/@stencil/core/testing/jest.preprocessor.js'
+    '^.+\\.(ts|tsx)$': '<rootDir>/node_modules/@stencil/core/testing/jest-preprocessor.js'
   },
   testRegex: '(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$',
   moduleFileExtensions: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choicesjs-stencil",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Select Web Component which wraps ChoicesJS library using StencilJS",
   "repository": {
     "type": "git",
@@ -32,27 +32,27 @@
     "test:coverage:unit": "npm run test:unit -- --coverage"
   },
   "peerDependencies": {
-    "choices.js": "^7.0"
+    "choices.js": "^9.0"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-dynamic-import": "7.2.0",
-    "@stencil/core": "1.5.4",
-    "@stencil/sass": "1.0.1",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@stencil/core": "1.12.7",
+    "@stencil/sass": "1.3.1",
     "@stencil/utils": "0.0.5",
-    "@types/jest": "21.1.8",
-    "choices.js": "7.0.0",
+    "@types/jest": "25.2.1",
+    "choices.js": "9.0.1",
     "copy": "0.3.2",
-    "jest": "21.2.1",
-    "jest-dot-reporter": "1.0.7",
-    "rimraf": "2.6.3",
-    "tslint": "5.15.0",
+    "jest": "25.5.2",
+    "jest-dot-reporter": "1.0.14",
+    "rimraf": "3.0.2",
+    "tslint": "6.1.2",
     "tslint-config-adidas": "1.0.1",
     "tslint-eslint-rules": "5.4.0",
-    "typedoc": "0.15.0",
-    "workbox-build": "4.3.1"
+    "typedoc": "0.17.6",
+    "workbox-build": "5.1.3"
   },
   "optionalDependencies": {
-    "fsevents": "1.2.7"
+    "fsevents": "2.1.3 "
   },
   "keywords": [
     "choicesjs",

src/components/choicesjs-stencil/choicesjs-stencil.tsx

@@ -14,7 +14,9 @@ import {
   SortFn,
   OnInit,
   OnCreateTemplates,
-  UniqueItemText
+  UniqueItemText,
+  ValueCompareFunction,
+  CustomAddItemText
 } from './interfaces';
 import { getValues, filterObject, isDefined } from './utils';
 
@@ -46,10 +48,9 @@ export class ChoicesJSStencil implements IChoicesProps, IChoicesMethods {
   @Prop() public searchResultLimit: number;
   @Prop() public position: 'auto' | 'top' | 'bottom';
   @Prop() public resetScrollPosition: boolean;
-  @Prop() public addItemFilterFn: ItemFilterFn;
   @Prop() public shouldSort: boolean;
   @Prop() public shouldSortItems: boolean;
-  @Prop() public sortFn: SortFn;
+  @Prop() public sorter: SortFn;
   @Prop() public placeholder: boolean | string;
   @Prop() public placeholderValue: string;
   @Prop() public searchPlaceholderValue: string;
@@ -65,8 +66,11 @@ export class ChoicesJSStencil implements IChoicesProps, IChoicesMethods {
   @Prop() public uniqueItemText: UniqueItemText;
   @Prop() public classNames: ClassNames;
   @Prop() public fuseOptions: FuseOptions;
+  @Prop() public addItemFilter: string | RegExp | ItemFilterFn;
+  @Prop() public customAddItemText: CustomAddItemText;
   @Prop() public callbackOnInit: OnInit;
   @Prop() public callbackOnCreateTemplates: OnCreateTemplates;
+  @Prop() public valueComparer: ValueCompareFunction;
 
   @Element() private readonly root: HTMLElement;
 
@@ -270,10 +274,9 @@ export class ChoicesJSStencil implements IChoicesProps, IChoicesMethods {
       searchResultLimit: this.searchResultLimit,
       position: this.position,
       resetScrollPosition: this.resetScrollPosition,
-      addItemFilterFn: this.addItemFilterFn,
       shouldSort: this.shouldSort,
       shouldSortItems: this.shouldSortItems,
-      sortFn: this.sortFn,
+      sorter: this.sorter,
       placeholder: true,
       placeholderValue: this.placeholderValue || (typeof this.placeholder === 'string' && this.placeholder) || ' ',
       searchPlaceholderValue: this.searchPlaceholderValue,
@@ -290,7 +293,10 @@ export class ChoicesJSStencil implements IChoicesProps, IChoicesMethods {
       classNames: this.classNames,
       fuseOptions: this.fuseOptions,
       callbackOnInit: this.callbackOnInit,
-      callbackOnCreateTemplates: this.callbackOnCreateTemplates
+      callbackOnCreateTemplates: this.callbackOnCreateTemplates,
+      valueComparer: this.valueComparer,
+      addItemFilter: this.addItemFilter,
+      customAddItemText: this.customAddItemText
     };
     const settings = filterObject(props, isDefined);
 

src/components/choicesjs-stencil/interfaces.tsx

@@ -13,17 +13,17 @@ export type ClassNames = {
   item?: string;
   itemSelectable?: string;
   itemDisabled?: string;
-  itemOption?: string;
+  itemChoice?: string;
+  placeholder?: string;
   group?: string;
   groupHeading?: string;
-  placeholder?: string;
   button?: string;
   activeState?: string;
   focusState?: string;
   openState?: string;
   disabledState?: string;
   highlightedState?: string;
-  hiddenState?: string;
+  selectedState: string;
   flippedState?: string;
   loadingState?: string;
   noResults?: string;
@@ -39,27 +39,32 @@ export type WeightedField = {
 };
 
 /**
- * @link https://github.com/krisk/Fuse/tree/v2.7.4#options
+ * @version 3.4.6
+ * @link https://fusejs.io/api/options.html#basic-options
  */
 export type FuseOptions = {
+  id?: string;
   caseSensitive?: boolean;
-  minMatchCharLength?: number;
+  includeMatches?: boolean;
+  includeScore?: boolean;
   shouldSort?: boolean;
+  keys?: Array<string> | Array<object> | Array<WeightedField>;
+  verbose?: boolean;
   tokenize?: boolean;
   tokenSeparator?: RegExp;
   matchAllTokens?: boolean;
-  findAllMatches?: boolean;
-  verbose?: boolean;
-  id?: string;
-  keys?: Array<string> | Array<object> | Array<WeightedField>;
   location?: number;
-  threshold?: number;
   distance?: number;
+  threshold?: number;
   maxPatternLength?: number;
+  minMatchCharLength?: number;
+  findAllMatches?: boolean;
+  sortFn?(a: { score: number }, b: { score: number }): number;
+  getFn?(obj: any, path: string): any;
 };
 
 /**
- * @link https://github.com/jshjohnson/Choices#additemfilterfn
+ * @link https://github.com/jshjohnson/Choices#addItemFilter
  */
 export type ItemFilterFn = (value: string) => boolean;
 
@@ -89,7 +94,7 @@ export type MaxItemTextFn = (maxItemCount: number) => string;
 export type SortFn = (el1: any, el2: any) => number;
 
 export type UniqueItemText = ((value: string) => string) | string;
-
+export type CustomAddItemText = ((value: string) => string) | string;
 /**
  * @link https://github.com/jshjohnson/Choices#callbackoninit
  */
@@ -100,17 +105,23 @@ export type OnInit = () => void;
  */
 export type OnCreateTemplates = (template) => any;
 
+/**
+ * @link https://github.com/jshjohnson/Choices#valuecomparer
+ */
+export type ValueCompareFunction = (value1: string, value2: string) => boolean;
+
 /**
  * @link https://github.com/jshjohnson/Choices#configuration-options
  */
 export interface IChoicesProps {
   silent?: boolean;
   items?: Array<any>;
   choices?: Array<any>;
-  classNames?: ClassNames;
   renderChoiceLimit?: number;
   maxItemCount?: number;
   addItems?: boolean;
+  addItemFilter?: string | RegExp | ItemFilterFn | null;
+  addItemText?: string | AddItemTextFn;
   removeItems?: boolean;
   removeItemButton?: boolean;
   editItems?: boolean;
@@ -119,28 +130,30 @@ export interface IChoicesProps {
   paste?: boolean;
   searchEnabled?: boolean;
   searchChoices?: boolean;
-  searchFields?: Array<any> | string;
   searchFloor?: number;
   searchResultLimit?: number;
-  fuseOptions?: FuseOptions;
+  searchFields?: Array<any> | string;
   position?: 'auto' | 'top' | 'bottom';
   resetScrollPosition?: boolean;
-  addItemFilterFn?: ItemFilterFn;
   shouldSort?: boolean;
   shouldSortItems?: boolean;
+  sorter: SortFn;
   placeholder?: boolean | string;
-  placeholderValue?: string;
-  searchPlaceholderValue?: string;
-  prependValue?: string;
-  appendValue?: string;
+  placeholderValue?: string | null;
+  searchPlaceholderValue?: string | null;
+  prependValue?: string | null;
+  appendValue?: string | null;
   renderSelectedChoices?: 'always' | 'auto';
   loadingText?: string;
   noResultsText?: string | NoResultsTextFn;
   noChoicesText?: string | NoChoicesTextFn;
   itemSelectText?: string;
-  addItemText?: string | AddItemTextFn;
   maxItemText?: string | MaxItemTextFn;
-  sortFn?: SortFn;
+  uniqueItemText: UniqueItemText;
+  customAddItemText?: CustomAddItemText;
+  valueComparer?: ValueCompareFunction;
+  classNames?: ClassNames;
+  fuseOptions?: FuseOptions;
   callbackOnInit?: OnInit;
   callbackOnCreateTemplates?: OnCreateTemplates;
 }
@@ -163,14 +176,13 @@ export interface IChoicesMethods {
   removeHighlightedItems();
   showDropdown();
   hideDropdown();
+  setChoices(choices, value, label, replaceChoices);
+  clearChoices();
   getValue(valueOnly);
   setValue(args);
   setChoiceByValue(value: string | Array<string>);
-  setChoices(choices, value, label, replaceChoices);
-  clearChoices();
   clearStore();
   clearInput();
-  enable();
   disable();
-  ajax(fn: AjaxFn);
+  enable();
 }

src/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>ChoicesJS Web Component (dev)</title>
-    <script src="https://rawgit.com/jshjohnson/Choices/v7.0.0/public/assets/scripts/choices.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.js"></script>
     <script type="module" src="/build/choicesjsstencil.esm.js"></script>
     <script nomodule src="/build/choicesjsstencil.js"></script>
     <style>