Prep for 10.2.0 (#1077)

* solve 1068

* resolve problems

* resolve npm problem

* Merge master and rebuild, fix lint error

* Create fresh package-lock.json

Co-authored-by: محمدرضا ضربی زاده <mohammad.zarbizadeh@samim.net>
Co-authored-by: Matt Triff <matt.triff@gmail.com>

.github/workflows/browsers.yml

@@ -41,7 +41,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: 18.x
 
       - name: Cache node modules
         uses: actions/cache@v2

.github/workflows/build-and-test.yml

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
       - name: Build and run all tests
         run: |
           npm ci

.github/workflows/bundlesize.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies and build
         run: |

.github/workflows/deploy-pages.yml

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - name: Build
         run: |

.github/workflows/deployment.yml

@@ -13,7 +13,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - run: npm ci
         env:

.github/workflows/e2e-tests.yml

@@ -26,7 +26,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 18.x
 
       - name: Cache node modules
         uses: actions/cache@v2
@@ -60,7 +60,7 @@ jobs:
 
       - name: run Cypress (with or without recording)
         # if we have ran out of free Cypress recordings, run Cypress with recording switched off
-        run: npx run-p --race start cypress:ci || npx run-p --race start cypress:run
+        run: npm exec -- run-p --race start cypress:ci || npm exec -- run-p --race start cypress:run
         env:
           NODE_ENV: production # prevent watching
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.github/workflows/lint.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies
         run: npm ci

.github/workflows/polyfills-sync.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Check Polyfills documentation and settings sync
         run: node .github/actions-scripts/polyfills-sync.js

.github/workflows/unit-tests.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies
         run: npm install --no-optional --no-audit --ignore-scripts

README.md

@@ -151,6 +151,8 @@ Or include Choices directly:
     noResultsText: 'No results found',
     noChoicesText: 'No choices to choose from',
     itemSelectText: 'Press to select',
+    uniqueItemText: 'Only unique values can be added',
+    customAddItemText: 'Only values matching specific conditions can be added',
     addItemText: (value) => {
       return `Press Enter to add <b>"${value}"</b>`;
     },
@@ -342,7 +344,7 @@ Pass an array of objects:
 
 **Usage:** Whether HTML should be rendered in all Choices elements. If `false`, all elements (placeholder, items, etc.) will be treated as plain text. If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
 
-**Deprecation Warning:** This will default to `false` in a future release. 
+**Deprecation Warning:** This will default to `false` in a future release.
 
 ### duplicateItemsAllowed
 
@@ -615,7 +617,7 @@ const example = new Choices(element, {
 
 **Input types affected:** `select-one`, `select-multiple`
 
-**Usage:** The labelId improves accessibility. If set, it will add aria-labeledby to the choices element.
+**Usage:** The labelId improves accessibility. If set, it will add aria-labelledby to the choices element.
 
 ### classNames
 

cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  projectId: 'n7g5qp',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:3001/test',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

cypress.json

@@ -1,5 +0,0 @@
-{
-  "baseUrl": "http://localhost:3001/test",
-  "video": false,
-  "projectId": "n7g5qp"
-}

cypress/e2e/select-multiple.spec.ts

@@ -34,6 +34,7 @@ describe('Choices - select multiple', () => {
           beforeEach(() => {
             cy.get('[data-test-hook=basic]')
               .find('.choices__input--cloned')
+              .wait(200) // Otherwise these tests are flaky
               .type('{esc}');
           });
 
@@ -746,6 +747,70 @@ describe('Choices - select multiple', () => {
       });
     });
 
+    describe('custom properties via HTML', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=custom-properties-html]')
+          .find('.choices')
+          .click();
+      });
+
+      describe('on input', () => {
+        it('filters choices based on a string custom property', () => {
+          const data = [
+            {
+              searchText: 'fantastic',
+              label: 'Label Three',
+            },
+          ];
+
+          data.forEach(({ searchText, label }) => {
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type(searchText);
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .should(($choice) => {
+                expect($choice.text().trim()).to.equal(label);
+              });
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type('{selectall}{del}');
+          });
+        });
+
+        it('filters choices based on a JSON custom property', () => {
+          const data = [
+            {
+              searchText: 'foo',
+              label: 'Label Four',
+            },
+          ];
+
+          data.forEach(({ searchText, label }) => {
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type(searchText);
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .should(($choice) => {
+                expect($choice.text().trim()).to.equal(label);
+              });
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type('{selectall}{del}');
+          });
+        });
+      });
+    });
+
     describe('non-string values', () => {
       beforeEach(() => {
         cy.get('[data-test-hook=non-string-values]').find('.choices').click();

cypress/e2e/select-one.spec.ts

@@ -841,6 +841,70 @@ describe('Choices - select one', () => {
       });
     });
 
+    describe('custom properties via HTML', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=custom-properties-html]')
+          .find('.choices')
+          .click();
+      });
+
+      describe('on input', () => {
+        it('filters choices based on a string custom property', () => {
+          const data = [
+            {
+              searchText: 'fantastic',
+              label: 'Label Three',
+            },
+          ];
+
+          data.forEach(({ searchText, label }) => {
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type(searchText);
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .should(($choice) => {
+                expect($choice.text().trim()).to.equal(label);
+              });
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type('{selectall}{del}');
+          });
+        });
+
+        it('filters choices based on a JSON custom property', () => {
+          const data = [
+            {
+              searchText: 'foo',
+              label: 'Label Four',
+            },
+          ];
+
+          data.forEach(({ searchText, label }) => {
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type(searchText);
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .should(($choice) => {
+                expect($choice.text().trim()).to.equal(label);
+              });
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type('{selectall}{del}');
+          });
+        });
+      });
+    });
+
     describe('non-string values', () => {
       beforeEach(() => {
         cy.get('[data-test-hook=non-string-values]').find('.choices').click();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.js",
   "types": "./public/types/src/index.d.ts",
@@ -56,61 +56,61 @@
     "js"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.2",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/register": "^7.17.0",
-    "@types/chai": "^4.3.0",
-    "@types/mocha": "^9.1.0",
-    "@types/sinon": "^10.0.11",
-    "@types/sinon-chai": "^3.2.8",
-    "@typescript-eslint/eslint-plugin": "^5.11.0",
-    "@typescript-eslint/parser": "^5.11.0",
-    "autoprefixer": "^10.4.2",
-    "babel-loader": "^8.2.3",
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/register": "^7.18.9",
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1",
+    "@types/sinon": "^10.0.13",
+    "@types/sinon-chai": "^3.2.9",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^9.1.0",
     "bundlesize": "^0.18.1",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
     "cross-env": "^7.0.3",
-    "csso-cli": "^3.0.0",
-    "cypress": "9.4.1",
-    "eslint": "^8.9.0",
+    "csso-cli": "^4.0.1",
+    "cypress": "11.2.0",
+    "eslint": "^8.28.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-sort-class-members": "^1.14.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "express": "^4.17.2",
-    "husky": "^7.0.4",
-    "jsdom": "^19.0.0",
-    "lint-staged": "^12.3.4",
-    "mocha": "^9.2.0",
-    "nodemon": "^2.0.15",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-sort-class-members": "^1.15.2",
+    "eslint-webpack-plugin": "^3.2.0",
+    "express": "^4.18.2",
+    "husky": "^8.0.2",
+    "jsdom": "^20.0.3",
+    "lint-staged": "^13.0.4",
+    "mocha": "^10.1.0",
+    "nodemon": "^2.0.20",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "postcss": "^8.4.6",
-    "postcss-cli": "^9.1.0",
-    "prettier": "^2.5.1",
-    "sass": "^1.49.7",
-    "sinon": "^13.0.1",
+    "postcss": "^8.4.19",
+    "postcss-cli": "^10.0.0",
+    "prettier": "^2.8.0",
+    "sass": "^1.56.1",
+    "sinon": "^15.0.0",
     "sinon-chai": "^3.7.0",
-    "stylelint": "^14.5.0",
-    "stylelint-config-standard": "^25.0.0",
-    "stylelint-config-standard-scss": "^3.0.0",
-    "ts-loader": "^9.2.6",
-    "ts-node": "^10.5.0",
-    "typescript": "^4.5.5",
-    "webpack": "^5.68.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-middleware": "^5.3.1",
-    "webpack-hot-middleware": "^2.25.1"
+    "stylelint": "^14.15.0",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "ts-loader": "^9.4.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.3",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-middleware": "^6.0.1",
+    "webpack-hot-middleware": "^2.25.3"
   },
   "dependencies": {
     "deepmerge": "^4.2.2",
-    "fuse.js": "^6.5.3",
-    "redux": "^4.1.2"
+    "fuse.js": "^6.6.2",
+    "redux": "^4.2.0"
   },
   "npmName": "choices.js",
   "npmFileMap": [

public/assets/scripts/choices.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */

public/index.html

@@ -52,7 +52,7 @@
 
     <!-- Choices includes -->
     <link rel="stylesheet" href="assets/styles/choices.min.css" />
-    <script src="assets/scripts/choices.min.js"></script>
+    <script src="assets/scripts/choices.js"></script>
     <!-- End Choices includes -->
 
     <!--[if lt IE 9]>
@@ -440,6 +440,11 @@
             data-custom-properties="This option is fantastic"
             >Label Three</option
           >
+          <option
+            value="Dropdown item 4"
+            data-custom-properties="{ 'description': 'foo' }"
+            >Label Four</option
+          >
         </select>
 
         <label

public/test/select-multiple/index.html

@@ -294,6 +294,28 @@
           ></select>
         </div>
 
+        <div data-test-hook="custom-properties-html">
+          <label for="choices-custom-properties-html">Custom properties</label>
+          <select
+            class="form-control"
+            name="choices-custom-properties-html"
+            id="choices-custom-properties-html"
+          >
+            <option value="Dropdown item 1">Label One</option>
+            <option value="Dropdown item 2">Label Two</option>
+            <option
+              value="Dropdown item 3"
+              data-custom-properties="This option is fantastic"
+              >Label Three</option
+            >
+            <option
+              value="Dropdown item 4"
+              data-custom-properties="{ 'description': 'foo' }"
+              >Label Four</option
+            >
+          </select>
+        </div>
+
         <div data-test-hook="non-string-values">
           <label for="choices-non-string-values">Non-string values</label>
           <select
@@ -490,6 +512,11 @@
           ],
         });
 
+        new Choices('#choices-custom-properties-html', {
+          allowHTML: true,
+          searchFields: ['label', 'value', 'customProperties'],
+        });
+
         new Choices('#choices-non-string-values', {
           allowHTML: true,
           choices: [

public/test/select-one/index.html

@@ -305,6 +305,28 @@
           ></select>
         </div>
 
+        <div data-test-hook="custom-properties-html">
+          <label for="choices-custom-properties-html">Custom properties</label>
+          <select
+            class="form-control"
+            name="choices-custom-properties-html"
+            id="choices-custom-properties-html"
+          >
+            <option value="Dropdown item 1">Label One</option>
+            <option value="Dropdown item 2">Label Two</option>
+            <option
+              value="Dropdown item 3"
+              data-custom-properties="This option is fantastic"
+              >Label Three</option
+            >
+            <option
+              value="Dropdown item 4"
+              data-custom-properties="{ 'description': 'foo' }"
+              >Label Four</option
+            >
+          </select>
+        </div>
+
         <div data-test-hook="non-string-values">
           <label for="choices-non-string-values">Non-string values</label>
           <select
@@ -550,6 +572,11 @@
           ],
         });
 
+        new Choices('#choices-custom-properties-html', {
+          allowHTML: true,
+          searchFields: ['label', 'value', 'customProperties'],
+        });
+
         new Choices('#choices-non-string-values', {
           allowHTML: true,
           choices: [

public/types/cypress/e2e/select-multiple.spec.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=select-multiple.spec.d.ts.map

public/types/cypress/e2e/select-multiple.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-multiple.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/e2e/select-multiple.spec.ts"],"names":[],"mappings":""}

public/types/cypress/e2e/select-one.spec.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=select-one.spec.d.ts.map

public/types/cypress/e2e/select-one.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-one.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/e2e/select-one.spec.ts"],"names":[],"mappings":""}

public/types/cypress/e2e/text.spec.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=text.spec.d.ts.map

public/types/cypress/e2e/text.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/e2e/text.spec.ts"],"names":[],"mappings":""}

public/types/cypress/plugins/index.d.ts

@@ -0,0 +1,3 @@
+declare function _exports(on: any, config: any): void;
+export = _exports;
+//# sourceMappingURL=index.d.ts.map

public/types/cypress/plugins/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../cypress/plugins/index.js"],"names":[],"mappings":"AAaiB,sDAGhB"}

public/types/cypress/support/commands.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=commands.d.ts.map

public/types/cypress/support/commands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../../../../cypress/support/commands.js"],"names":[],"mappings":""}

public/types/cypress/support/e2e.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=e2e.d.ts.map

public/types/cypress/support/e2e.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"e2e.d.ts","sourceRoot":"","sources":["../../../../cypress/support/e2e.js"],"names":[],"mappings":""}

public/types/cypress/support/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

public/types/cypress/support/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../cypress/support/index.js"],"names":[],"mappings":""}

public/types/src/scripts/choices.d.ts

@@ -66,7 +66,7 @@ declare class Choices implements Choices {
     hideDropdown(preventInputBlur?: boolean): this;
     getValue(valueOnly?: boolean): string[] | Item[] | Item | string;
     setValue(items: string[] | Item[]): this;
-    setChoiceByValue(value: string): this;
+    setChoiceByValue(value: string | string[]): this;
     /**
      * Set choices of select input via an array of objects (or function that returns array of object or promise of it),
      * a value field name and a label field name.

public/types/src/scripts/interfaces/action-type.d.ts

@@ -1,2 +1,2 @@
-export declare type ActionType = 'ADD_CHOICE' | 'FILTER_CHOICES' | 'ACTIVATE_CHOICES' | 'CLEAR_CHOICES' | 'ADD_GROUP' | 'ADD_ITEM' | 'REMOVE_ITEM' | 'HIGHLIGHT_ITEM' | 'CLEAR_ALL' | 'RESET_TO' | 'SET_IS_LOADING';
+export type ActionType = 'ADD_CHOICE' | 'FILTER_CHOICES' | 'ACTIVATE_CHOICES' | 'CLEAR_CHOICES' | 'ADD_GROUP' | 'ADD_ITEM' | 'REMOVE_ITEM' | 'HIGHLIGHT_ITEM' | 'CLEAR_ALL' | 'RESET_TO' | 'SET_IS_LOADING';
 //# sourceMappingURL=action-type.d.ts.map

public/types/src/scripts/interfaces/action-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-type.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/action-type.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU,GAClB,YAAY,GACZ,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GACf,WAAW,GACX,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,WAAW,GACX,UAAU,GACV,gBAAgB,CAAC"}
+{"version":3,"file":"action-type.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/action-type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,YAAY,GACZ,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GACf,WAAW,GACX,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,WAAW,GACX,UAAU,GACV,gBAAgB,CAAC"}

public/types/src/scripts/interfaces/event-type.d.ts

@@ -1,2 +1,2 @@
-export declare type EventType = 'addItem' | 'removeItem' | 'highlightItem' | 'unhighlightItem' | 'choice' | 'change' | 'search' | 'showDropdown' | 'hideDropdown' | 'highlightChoice';
+export type EventType = 'addItem' | 'removeItem' | 'highlightItem' | 'unhighlightItem' | 'choice' | 'change' | 'search' | 'showDropdown' | 'hideDropdown' | 'highlightChoice';
 //# sourceMappingURL=event-type.d.ts.map

public/types/src/scripts/interfaces/event-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"event-type.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/event-type.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS,GACjB,SAAS,GACT,YAAY,GACZ,eAAe,GACf,iBAAiB,GACjB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,cAAc,GACd,iBAAiB,CAAC"}
+{"version":3,"file":"event-type.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/event-type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,YAAY,GACZ,eAAe,GACf,iBAAiB,GACjB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,cAAc,GACd,iBAAiB,CAAC"}

public/types/src/scripts/interfaces/options.d.ts

@@ -412,7 +412,7 @@ export interface Options {
      */
     fuseOptions: Fuse.IFuseOptions<Choices>;
     /**
-     * ID of the connected label to improve a11y. If set, aria-labeledby will be added.
+     * ID of the connected label to improve a11y. If set, aria-labelledby will be added.
      */
     labelId: string;
     /**

public/types/src/scripts/interfaces/passed-element-type.d.ts

@@ -1,2 +1,2 @@
-export declare type PassedElementType = 'text' | 'select-one' | 'select-multiple';
+export type PassedElementType = 'text' | 'select-one' | 'select-multiple';
 //# sourceMappingURL=passed-element-type.d.ts.map

public/types/src/scripts/interfaces/passed-element-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"passed-element-type.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/passed-element-type.ts"],"names":[],"mappings":"AAAA,oBAAY,iBAAiB,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"passed-element-type.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/passed-element-type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC"}

public/types/src/scripts/interfaces/position-options-type.d.ts

@@ -1,2 +1,2 @@
-export declare type PositionOptionsType = 'auto' | 'top' | 'bottom';
+export type PositionOptionsType = 'auto' | 'top' | 'bottom';
 //# sourceMappingURL=position-options-type.d.ts.map

public/types/src/scripts/interfaces/position-options-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position-options-type.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/position-options-type.ts"],"names":[],"mappings":"AAAA,oBAAY,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"position-options-type.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/position-options-type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC"}

public/types/src/scripts/lib/utils.d.ts

@@ -23,5 +23,6 @@ export declare const cloneObject: (obj: object) => object;
  * Returns an array of keys present on the first but missing on the second object
  */
 export declare const diff: (a: Record<string, any>, b: Record<string, any>) => string[];
+export declare const parseCustomProperties: (customProperties: any) => any;
 export {};
 //# sourceMappingURL=utils.d.ts.map

public/types/src/scripts/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/lib/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MACZ,CAAC;AAEhD,eAAO,MAAM,aAAa,WAAY,MAAM,KAAG,MAC6B,CAAC;AAE7E,eAAO,MAAM,UAAU,YACZ,gBAAgB,GAAG,iBAAiB,UACrC,MAAM,KACb,MASF,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,GAAG,KAAG,MACe,CAAC;AAEnD,eAAO,MAAM,MAAM,SAAU,MAAM,OAAO,GAAG,KAAG,OACY,CAAC;AAE7D,eAAO,MAAM,IAAI,YACN,WAAW,YACX,WAAW,KACnB,WAUF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,OAAO,YACN,MAAM,yBAEf,OAYF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YACpB,WAAW,UACZ,WAAW,yBAElB,OAkBF,CAAC;AAEF,eAAO,MAAM,QAAQ,sCAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,QAAe,MAAM,KAAK,OAc1C,CAAC;AAEL,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,eAAO,MAAM,WAAW,qBACI,eAAe,oCACE,eAAe,KACzD,MAKC,CAAC;AAEL,eAAO,MAAM,WAAW,MACnB,KAAK,MAAM,EAAE,OAAO,CAAC,KACrB,KAAK,MAAM,EAAE,OAAO,CAAC,KACvB,MAKF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,WAAW,QACd,SAAS,eACH,MAAM,GAAG,IAAI,KACxB,OAQF,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,EAAE,SACL,MAAM,mBAEZ,OAOC,CAAC;AAEL,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MACT,CAAC;AAElC;;GAEG;AACH,eAAO,MAAM,IAAI,MACZ,OAAO,MAAM,EAAE,GAAG,CAAC,KACnB,OAAO,MAAM,EAAE,GAAG,CAAC,KACrB,MAAM,EAKR,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/lib/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MACZ,CAAC;AAEhD,eAAO,MAAM,aAAa,WAAY,MAAM,KAAG,MAC6B,CAAC;AAE7E,eAAO,MAAM,UAAU,YACZ,gBAAgB,GAAG,iBAAiB,UACrC,MAAM,KACb,MASF,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,GAAG,KAAG,MACe,CAAC;AAEnD,eAAO,MAAM,MAAM,SAAU,MAAM,OAAO,GAAG,KAAG,OACY,CAAC;AAE7D,eAAO,MAAM,IAAI,YACN,WAAW,YACX,WAAW,KACnB,WAUF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,OAAO,YACN,MAAM,yBAEf,OAYF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YACpB,WAAW,UACZ,WAAW,yBAElB,OAkBF,CAAC;AAEF,eAAO,MAAM,QAAQ,sCAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,QAAe,MAAM,KAAK,OAc1C,CAAC;AAEL,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,eAAO,MAAM,WAAW,qBACI,eAAe,oCACE,eAAe,KACzD,MAKC,CAAC;AAEL,eAAO,MAAM,WAAW,MACnB,KAAK,MAAM,EAAE,OAAO,CAAC,KACrB,KAAK,MAAM,EAAE,OAAO,CAAC,KACvB,MAKF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,WAAW,QACd,SAAS,eACH,MAAM,GAAG,IAAI,KACxB,OAQF,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,EAAE,SACL,MAAM,mBAEZ,OAOC,CAAC;AAEL,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MACT,CAAC;AAElC;;GAEG;AACH,eAAO,MAAM,IAAI,MACZ,OAAO,MAAM,EAAE,GAAG,CAAC,KACnB,OAAO,MAAM,EAAE,GAAG,CAAC,KACrB,MAAM,EAKR,CAAC;AAEF,eAAO,MAAM,qBAAqB,6BAAuB,GAUxD,CAAC"}

public/types/src/scripts/reducers/choices.d.ts

@@ -2,7 +2,7 @@ import { AddChoiceAction, FilterChoicesAction, ActivateChoicesAction, ClearChoic
 import { AddItemAction, RemoveItemAction } from '../actions/items';
 import { Choice } from '../interfaces/choice';
 export declare const defaultState: never[];
-declare type ActionTypes = AddChoiceAction | FilterChoicesAction | ActivateChoicesAction | ClearChoicesAction | AddItemAction | RemoveItemAction | Record<string, never>;
+type ActionTypes = AddChoiceAction | FilterChoicesAction | ActivateChoicesAction | ClearChoicesAction | AddItemAction | RemoveItemAction | Record<string, never>;
 export default function choices(state?: Choice[], action?: ActionTypes): Choice[];
 export {};
 //# sourceMappingURL=choices.d.ts.map

public/types/src/scripts/reducers/choices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choices.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/reducers/choices.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,eAAO,MAAM,YAAY,SAAK,CAAC;AAE/B,aAAK,WAAW,GACZ,eAAe,GACf,mBAAmB,GACnB,qBAAqB,GACrB,kBAAkB,GAClB,aAAa,GACb,gBAAgB,GAChB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,KAAK,GAAE,MAAM,EAAiB,EAC9B,MAAM,GAAE,WAAgB,GACvB,MAAM,EAAE,CAwGV"}
+{"version":3,"file":"choices.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/reducers/choices.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,eAAO,MAAM,YAAY,SAAK,CAAC;AAE/B,KAAK,WAAW,GACZ,eAAe,GACf,mBAAmB,GACnB,qBAAqB,GACrB,kBAAkB,GAClB,aAAa,GACb,gBAAgB,GAChB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,KAAK,GAAE,MAAM,EAAiB,EAC9B,MAAM,GAAE,WAAgB,GACvB,MAAM,EAAE,CAwGV"}

public/types/src/scripts/reducers/groups.d.ts

@@ -3,7 +3,7 @@ import { ClearChoicesAction } from '../actions/choices';
 import { Group } from '../interfaces/group';
 import { State } from '../interfaces/state';
 export declare const defaultState: never[];
-declare type ActionTypes = AddGroupAction | ClearChoicesAction | Record<string, never>;
+type ActionTypes = AddGroupAction | ClearChoicesAction | Record<string, never>;
 export default function groups(state?: Group[], action?: ActionTypes): State['groups'];
 export {};
 //# sourceMappingURL=groups.d.ts.map

public/types/src/scripts/reducers/groups.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groups.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/reducers/groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,eAAO,MAAM,YAAY,SAAK,CAAC;AAE/B,aAAK,WAAW,GAAG,cAAc,GAAG,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,MAAM,CAC5B,KAAK,GAAE,KAAK,EAAiB,EAC7B,MAAM,GAAE,WAAgB,GACvB,KAAK,CAAC,QAAQ,CAAC,CAwBjB"}
+{"version":3,"file":"groups.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/reducers/groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,eAAO,MAAM,YAAY,SAAK,CAAC;AAE/B,KAAK,WAAW,GAAG,cAAc,GAAG,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,MAAM,CAC5B,KAAK,GAAE,KAAK,EAAiB,EAC7B,MAAM,GAAE,WAAgB,GACvB,KAAK,CAAC,QAAQ,CAAC,CAwBjB"}

public/types/src/scripts/reducers/items.d.ts

@@ -2,7 +2,7 @@ import { AddItemAction, RemoveItemAction, HighlightItemAction } from '../actions
 import { Item } from '../interfaces/item';
 import { State } from '../interfaces/state';
 export declare const defaultState: never[];
-declare type ActionTypes = AddItemAction | RemoveItemAction | HighlightItemAction | Record<string, never>;
+type ActionTypes = AddItemAction | RemoveItemAction | HighlightItemAction | Record<string, never>;
 export default function items(state?: Item[], action?: ActionTypes): State['items'];
 export {};
 //# sourceMappingURL=items.d.ts.map

public/types/src/scripts/reducers/items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/reducers/items.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,eAAO,MAAM,YAAY,SAAK,CAAC;AAE/B,aAAK,WAAW,GACZ,aAAa,GACb,gBAAgB,GAChB,mBAAmB,GACnB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,KAAK,CAC3B,KAAK,GAAE,IAAI,EAAiB,EAC5B,MAAM,GAAE,WAAgB,GACvB,KAAK,CAAC,OAAO,CAAC,CA0DhB"}
+{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/reducers/items.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,eAAO,MAAM,YAAY,SAAK,CAAC;AAE/B,KAAK,WAAW,GACZ,aAAa,GACb,gBAAgB,GAChB,mBAAmB,GACnB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,KAAK,CAC3B,KAAK,GAAE,IAAI,EAAiB,EAC5B,MAAM,GAAE,WAAgB,GACvB,KAAK,CAAC,OAAO,CAAC,CA0DhB"}

public/types/src/scripts/reducers/loading.d.ts

@@ -1,7 +1,7 @@
 import { SetIsLoadingAction } from '../actions/misc';
 import { State } from '../interfaces/state';
 export declare const defaultState = false;
-declare type ActionTypes = SetIsLoadingAction | Record<string, never>;
+type ActionTypes = SetIsLoadingAction | Record<string, never>;
 declare const general: (state?: boolean, action?: ActionTypes) => State['loading'];
 export default general;
 //# sourceMappingURL=loading.d.ts.map

public/types/src/scripts/reducers/loading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/reducers/loading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,eAAO,MAAM,YAAY,QAAQ,CAAC;AAElC,aAAK,WAAW,GAAG,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE9D,QAAA,MAAM,OAAO,6BAEH,WAAW,KAClB,KAAK,CAAC,SAAS,CAUjB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/reducers/loading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,eAAO,MAAM,YAAY,QAAQ,CAAC;AAElC,KAAK,WAAW,GAAG,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE9D,QAAA,MAAM,OAAO,6BAEH,WAAW,KAClB,KAAK,CAAC,SAAS,CAUjB,CAAC;AAEF,eAAe,OAAO,CAAC"}

public/types/src/scripts/templates.d.ts

@@ -6,7 +6,7 @@ import { Choice } from './interfaces/choice';
 import { Group } from './interfaces/group';
 import { Item } from './interfaces/item';
 import { PassedElementType } from './interfaces/passed-element-type';
-declare type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
+type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
 declare const templates: {
     containerOuter({ classNames: { containerOuter } }: TemplateOptions, dir: HTMLElement['dir'], isSelectElement: boolean, isSelectOneElement: boolean, searchEnabled: boolean, passedElementType: PassedElementType, labelId: string): HTMLDivElement;
     containerInner({ classNames: { containerInner }, }: TemplateOptions): HTMLDivElement;

public/types/src/scripts/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../../src/scripts/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,aAAK,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;uDAEyB,eAAe,OAC9C,WAAW,CAAC,KAAK,CAAC,mBACN,OAAO,sBACJ,OAAO,iBACZ,OAAO,qBACH,iBAAiB,WAC3B,MAAM,GACd,cAAc;wDAiCd,eAAe,GAAG,cAAc;8DAOgB,eAAe,sBAC5C,OAAO,GAC1B,cAAc;4DAO6B,eAAe,SACpD,MAAM,GACZ,cAAc;uGAiBZ,eAAe,sGAUf,IAAI,oBACW,OAAO,GACxB,cAAc;yCAmDW,eAAe,sBACrB,OAAO,GAC1B,cAAc;mFAiBZ,eAAe,2BACO,KAAK,GAC7B,cAAc;wHAsCZ,eAAe,qHAUf,MAAM,cACG,MAAM,GACjB,cAAc;kDAqCyB,eAAe,oBACrC,MAAM,GACvB,gBAAgB;sDAmBhB,eAAe,GAAG,cAAc;mFAa9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAqBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../../src/scripts/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,KAAK,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;uDAEyB,eAAe,OAC9C,WAAW,CAAC,KAAK,CAAC,mBACN,OAAO,sBACJ,OAAO,iBACZ,OAAO,qBACH,iBAAiB,WAC3B,MAAM,GACd,cAAc;wDAiCd,eAAe,GAAG,cAAc;8DAOgB,eAAe,sBAC5C,OAAO,GAC1B,cAAc;4DAO6B,eAAe,SACpD,MAAM,GACZ,cAAc;uGAiBZ,eAAe,sGAUf,IAAI,oBACW,OAAO,GACxB,cAAc;yCAmDW,eAAe,sBACrB,OAAO,GAC1B,cAAc;mFAiBZ,eAAe,2BACO,KAAK,GAC7B,cAAc;wHAsCZ,eAAe,qHAUf,MAAM,cACG,MAAM,GACjB,cAAc;kDAqCyB,eAAe,oBACrC,MAAM,GACvB,gBAAgB;sDAmBhB,eAAe,GAAG,cAAc;mFAa9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAqBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}

src/scripts/choices.ts

@@ -46,6 +46,7 @@ import {
   isType,
   sortByScore,
   strToEl,
+  parseCustomProperties,
 } from './lib/utils';
 import { defaultState } from './reducers';
 import Store from './store/store';
@@ -290,7 +291,9 @@ class Choices implements Choices {
           disabled: option.disabled || option.parentNode.disabled,
           placeholder:
             option.value === '' || option.hasAttribute('placeholder'),
-          customProperties: option.dataset['custom-properties'],
+          customProperties: parseCustomProperties(
+            option.dataset.customProperties,
+          ),
         });
       });
     }
@@ -553,7 +556,7 @@ class Choices implements Choices {
     return this;
   }
 
-  setChoiceByValue(value: string): this {
+  setChoiceByValue(value: string | string[]): this {
     if (!this.initialised || this._isTextElement) {
       return this;
     }
@@ -1438,7 +1441,8 @@ class Choices implements Choices {
     const hasActiveDropdown = this.dropdown.isActive;
     const hasItems = this.itemList.hasChildren();
     const keyString = String.fromCharCode(keyCode);
-    const wasAlphaNumericChar = /[a-zA-Z0-9-_ ]/.test(keyString);
+    // eslint-disable-next-line no-control-regex
+    const wasPrintableChar = /[^\x00-\x1F]/.test(keyString);
 
     const {
       BACK_KEY,
@@ -1452,7 +1456,7 @@ class Choices implements Choices {
       PAGE_DOWN_KEY,
     } = KEY_CODES;
 
-    if (!this._isTextElement && !hasActiveDropdown && wasAlphaNumericChar) {
+    if (!this._isTextElement && !hasActiveDropdown && wasPrintableChar) {
       this.showDropdown();
 
       if (!this.input.isFocussed) {
@@ -1461,7 +1465,7 @@ class Choices implements Choices {
           the input was not focussed at the time of key press
           therefore does not have the value of the key.
         */
-        this.input.value += keyString.toLowerCase();
+        this.input.value += event.key.toLowerCase();
       }
     }
 

src/scripts/interfaces/options.ts

@@ -454,7 +454,7 @@ export interface Options {
   fuseOptions: Fuse.IFuseOptions<Choices>;
 
   /**
-   * ID of the connected label to improve a11y. If set, aria-labeledby will be added.
+   * ID of the connected label to improve a11y. If set, aria-labelledby will be added.
    */
   labelId: string;
 

src/scripts/lib/utils.test.ts

@@ -15,6 +15,7 @@ import {
   sanitise,
   sortByAlpha,
   sortByScore,
+  parseCustomProperties,
 } from './utils';
 
 describe('utils', () => {
@@ -256,4 +257,25 @@ describe('utils', () => {
       expect(output).to.deep.equal(['baz']);
     });
   });
+
+  describe('_parseCustomProperties', () => {
+    describe('when custom properties are valid json', () => {
+      it('returns the properties as object', () => {
+        const customProperties = '{"description": "foo", "bar": "foo"}';
+        const result = { description: 'foo', bar: 'foo' };
+
+        const value = parseCustomProperties(customProperties);
+        expect(value).to.eql(result);
+      });
+    });
+    describe('when custom properties are undefined', () => {
+      it('returns an empty object', () => {
+        const customProperties = undefined;
+        const result = {};
+
+        const value = parseCustomProperties(customProperties);
+        expect(value).to.eql(result);
+      });
+    });
+  });
 });

src/scripts/lib/utils.ts

@@ -180,3 +180,15 @@ export const diff = (
 
   return aKeys.filter((i) => bKeys.indexOf(i) < 0);
 };
+
+export const parseCustomProperties = (customProperties): any => {
+  if (typeof customProperties !== 'undefined') {
+    try {
+      return JSON.parse(customProperties);
+    } catch (e) {
+      return customProperties;
+    }
+  }
+
+  return {};
+};

src/scripts/templates.test.ts

@@ -95,7 +95,7 @@ describe('templates', () => {
               tabindex="0"
               aria-haspopup="true"
               aria-expanded="false"
-              aria-labeledby="${labelId}"
+              aria-labelledby="${labelId}"
               dir="${direction}"
               >
             </div>

src/scripts/templates.ts

@@ -45,7 +45,7 @@ const templates = {
     div.setAttribute('aria-haspopup', 'true');
     div.setAttribute('aria-expanded', 'false');
     if (labelId) {
-      div.setAttribute('aria-labeledby', labelId);
+      div.setAttribute('aria-labelledby', labelId);
     }
 
     return div;

src/styles/choices.scss

@@ -23,7 +23,7 @@ $choices-button-dimension: 8px !default;
 $choices-button-offset: 8px !default;
 $choices-icon-cross: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==") !default;
 $choices-icon-cross-inverse: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==") !default;
-$choices-z-index: 1;
+$choices-z-index: 1 !default;
 
 .#{$choices-selector} {
   position: relative;