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/PULL_REQUEST_TEMPLATE.md

@@ -22,5 +22,7 @@
 <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
 
 - [ ] My code follows the code style of this project.
+- [ ] I have added new tests for the bug I fixed/the new feature I added.
+- [ ] I have modified existing tests for the bug I fixed/the new feature I added.
 - [ ] My change requires a change to the documentation.
 - [ ] I have updated the documentation accordingly.

.github/actions-scripts/puppeteer.js

@@ -31,6 +31,7 @@ async function test() {
       waitUntil: 'networkidle2',
     });
     await page.setViewport({ width: 640, height: 1000 });
+    await page.waitForTimeout(500); // Wait for resize to complete
     await page.click('label[for="choices-single-custom-templates"]');
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('ArrowDown');

.github/workflows/browsers.yml

@@ -36,15 +36,15 @@ jobs:
           GITHUB_CONTEXT: ${{ toJson(github) }}
         run: echo "$GITHUB_CONTEXT"
 
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: 18.x
 
       - name: Cache node modules
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-build-${{ matrix.browser }}
@@ -93,7 +93,7 @@ jobs:
           PORT: 0
           NODE_ENV: production # prevent watching
 
-      - uses: actions/upload-artifact@master
+      - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshot-${{ matrix.browser }}-${{ matrix.os }}
@@ -102,11 +102,11 @@ jobs:
   puppeteer:
     runs-on: macos-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
       - name: Cache node modules
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-build-puppeteer
@@ -124,7 +124,7 @@ jobs:
           PORT: 0
           NODE_ENV: production # prevent watching
 
-      - uses: actions/upload-artifact@master
+      - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshot-puppeteer-darwin

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

@@ -9,12 +9,12 @@ jobs:
   build-and-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
-      - uses: actions/setup-node@v1
+      - 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

@@ -12,13 +12,13 @@ jobs:
   measure:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies and build
         run: |

.github/workflows/deploy-pages.yml

@@ -0,0 +1,32 @@
+name: Deploy Pages
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch: 
+    
+jobs:
+  deploy-gh-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+      - name: Build
+        run: |
+          npm ci
+          npm run build
+          rm -rf public/test
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+          HUSKY_SKIP_INSTALL: true
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PUBLISH_BRANCH: gh-pages
+          PUBLISH_DIR: ./public

.github/workflows/deployment.yml

@@ -1,4 +1,4 @@
-name: Publish and deploy
+name: Publish to npm
 
 on:
   release:
@@ -8,12 +8,12 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - run: npm ci
         env:
@@ -22,29 +22,3 @@ jobs:
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-
-  deploy-gh-pages:
-    needs: publish-npm
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-        with:
-          fetch-depth: 1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-          registry-url: https://registry.npmjs.org/
-      - name: Build
-        run: |
-          npm ci
-          npm run build
-          rm -rf public/test
-        env:
-          CYPRESS_INSTALL_BINARY: 0
-          HUSKY_SKIP_INSTALL: true
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v2.5.0
-        env:
-          ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
-          PUBLISH_BRANCH: gh-pages
-          PUBLISH_DIR: ./public

.github/workflows/e2e-tests.yml

@@ -20,16 +20,16 @@ jobs:
       TERM: xterm-256color
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 18.x
 
       - name: Cache node modules
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
@@ -46,7 +46,7 @@ jobs:
         env:
           CYPRESS_INSTALL_BINARY: 0
       - name: Cache Cypress cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: ${{ steps.cypress-info.outputs.cache }}
           key: ${{ runner.OS }}-cypress-${{ steps.cypress-info.outputs.version }}
@@ -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

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - 'src/scripts/**'
+      - 'src/styles/**'
       - package-lock.json
       - '.browserslistrc'
 
@@ -11,13 +12,13 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies
         run: npm ci

.github/workflows/polyfills-sync.yml

@@ -11,13 +11,13 @@ jobs:
   sync:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
 
-      - uses: actions/setup-node@v1
+      - 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

@@ -11,13 +11,13 @@ jobs:
   test-unit:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 1
 
-      - uses: actions/setup-node@v1
+      - 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

@@ -1,7 +1,5 @@
 # Choices.js [![Actions Status](https://github.com/jshjohnson/Choices/workflows/Build%20and%20test/badge.svg)](https://github.com/jshjohnson/Choices/actions) [![Actions Status](https://github.com/jshjohnson/Choices/workflows/Bundle%20size%20checks/badge.svg)](https://github.com/jshjohnson/Choices/actions) [![npm](https://img.shields.io/npm/v/choices.js.svg)](https://www.npmjs.com/package/choices.js)
 
----
-
 A vanilla, lightweight (~19kb gzipped 🎉), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
 
 [Demo](https://choices-js.github.io/Choices/)
@@ -21,8 +19,28 @@ A vanilla, lightweight (~19kb gzipped 🎉), configurable select box/text input
 
 ### Interested in writing your own ES6 JavaScript plugins? Check out [ES6.io](https://ES6.io/friend/JOHNSON) for great tutorials! 💪🏼
 
+### Sponsored by:
+<p align="center">
+  <a href="https://wanderermaps.com/" target="_blank" rel="noopener noreferrer">
+    <img src="https://cdn.shopify.com/s/files/1/0614/3357/7715/files/Logo_BlackWithBackground_200x.png?v=1644802773" alt="Wanderer Maps logo">
+  </a>
+</p>
+
 ---
 
+## Table of Contents
+
+- [Installation](#installation)
+- [Setup](#setup)
+- [Terminology](#terminology)
+- [Input Types](#input-types)
+- [Configuration Options](#configuration-options)
+- [Callbacks](#callbacks)
+- [Events](#events)
+- [Methods](#methods)
+- [Development](#development)
+- [License](#license)
+
 ## Installation
 
 With [NPM](https://www.npmjs.com/package/choices.js):
@@ -109,6 +127,7 @@ Or include Choices directly:
     removeItems: true,
     removeItemButton: false,
     editItems: false,
+    allowHTML: true,
     duplicateItemsAllowed: true,
     delimiter: ',',
     paste: true,
@@ -132,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>`;
     },
@@ -170,10 +191,11 @@ Or include Choices directly:
       noChoices: 'has-no-choices'
     },
     // Choices uses the great Fuse library for searching. You
-    // can find more options here: https://github.com/krisk/Fuse#options
+    // can find more options here: https://fusejs.io/api/options.html
     fuseOptions: {
-      include: 'score'
+      includeScore: true
     },
+    labelId: '',
     callbackOnInit: null,
     callbackOnCreateTemplates: null
   });
@@ -194,16 +216,16 @@ Choices works with the following input types, referenced in the documentation as
 | HTML Element                                                                                           | Documentation "Input Type" |
 | -------------------------------------------------------------------------------------------------------| -------------------------- |
 | [`<input type="text">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)               | `text`                     |
-| [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)                         | `select-single`            |
+| [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)                         | `select-one`               |
 | [`<select multiple>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple)  | `select-multiple`          |
 
-## Configuration options
+## Configuration Options
 
 ### silent
 
 **Type:** `Boolean` **Default:** `false`
 
-**Input types affected:** `text`, `select-single`, `select-multiple`
+**Input types affected:** `text`, `select-one`, `select-multiple`
 
 **Usage:** Optionally suppress console errors and warnings.
 
@@ -314,6 +336,16 @@ Pass an array of objects:
 
 **Usage:** Whether a user can edit items. An item's value can be edited by pressing the backspace.
 
+### allowHTML
+
+**Type:** `Boolean` **Default:** `true`
+
+**Input types affected:** `text`, `select-one`, `select-multiple`
+
+**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.
+
 ### duplicateItemsAllowed
 
 **Type:** `Boolean` **Default:** `true`
@@ -579,6 +611,14 @@ const example = new Choices(element, {
 };
 ```
 
+### labelId
+
+**Type:** `String` **Default:** ``
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** The labelId improves accessibility. If set, it will add aria-labelledby to the choices element.
+
 ### classNames
 
 **Type:** `Object` **Default:**
@@ -637,6 +677,8 @@ classNames: {
 If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
 original template function.
 
+Templates receive the full Choices config as the first argument to any template, which allows you to conditionally display things based on the options specified.
+
 **Example:**
 
 ```js
@@ -656,7 +698,7 @@ or more complex:
 const example = new Choices(element, {
   callbackOnCreateTemplates: function(template) {
     return {
-      item: (classNames, data) => {
+      item: ({ classNames }, data) => {
         return template(`
           <div class="${classNames.item} ${
           data.highlighted
@@ -671,7 +713,7 @@ const example = new Choices(element, {
           </div>
         `);
       },
-      choice: (classNames, data) => {
+      choice: ({ classNames }, data) => {
         return template(`
           <div class="${classNames.item} ${classNames.itemChoice} ${
           data.disabled ? classNames.itemDisabled : classNames.itemSelectable

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

@@ -1,6 +1,10 @@
 describe('Choices - select multiple', () => {
   beforeEach(() => {
-    cy.visit('/select-multiple');
+    cy.visit('/select-multiple', {
+      onBeforeLoad(win) {
+        cy.stub(win.console, 'warn').as('consoleWarn');
+      },
+    });
   });
 
   describe('scenarios', () => {
@@ -30,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}');
           });
 
@@ -742,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();
@@ -865,5 +934,78 @@ describe('Choices - select multiple', () => {
           });
       });
     });
+
+    describe('allow html', () => {
+      describe('is undefined', () => {
+        it('logs a deprecation warning', () => {
+          cy.get('@consoleWarn').should(
+            'be.calledOnceWithExactly',
+            'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
+          );
+        });
+
+        it('does not show as text when selected', () => {
+          cy.get('[data-test-hook=allowhtml-undefined]')
+            .find('.choices__list--multiple .choices__item')
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 1');
+            });
+        });
+
+        it('does not show html as text in dropdown', () => {
+          cy.get('[data-test-hook=allowhtml-undefined]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 2');
+            });
+        });
+      });
+
+      describe('set to true', () => {
+        it('does not show as text when selected', () => {
+          cy.get('[data-test-hook=allowhtml-true]')
+            .find('.choices__list--multiple .choices__item')
+
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 1');
+            });
+        });
+
+        it('does not show html as text in dropdown', () => {
+          cy.get('[data-test-hook=allowhtml-true]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 2');
+            });
+        });
+      });
+
+      describe('set to false', () => {
+        it('shows html as text when selected', () => {
+          cy.get('[data-test-hook=allowhtml-false]')
+            .find('.choices__list--multiple .choices__item')
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('<b>Choice 1</b>');
+            });
+        });
+
+        it('shows html as text', () => {
+          cy.get('[data-test-hook=allowhtml-false]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('<b>Choice 2</b>');
+            });
+        });
+      });
+    });
   });
 });

cypress/e2e/select-one.spec.ts

@@ -1,6 +1,10 @@
 describe('Choices - select one', () => {
   beforeEach(() => {
-    cy.visit('/select-one');
+    cy.visit('/select-one', {
+      onBeforeLoad(win) {
+        cy.stub(win.console, 'warn').as('consoleWarn');
+      },
+    });
   });
 
   describe('scenarios', () => {
@@ -51,9 +55,7 @@ describe('Choices - select one', () => {
       describe('selecting choices', () => {
         beforeEach(() => {
           // open dropdown
-          cy.get('[data-test-hook=basic]')
-            .find('.choices')
-            .click();
+          cy.get('[data-test-hook=basic]').find('.choices').click();
         });
 
         const selectedChoiceText = 'Choice 1';
@@ -68,7 +70,7 @@ describe('Choices - select one', () => {
           cy.get('[data-test-hook=basic]')
             .find('.choices__list--single .choices__item')
             .last()
-            .should($item => {
+            .should(($item) => {
               expect($item).to.contain(selectedChoiceText);
             });
         });
@@ -84,7 +86,7 @@ describe('Choices - select one', () => {
             .find('.choices__list--dropdown .choices__list')
             .children()
             .first()
-            .should($item => {
+            .should(($item) => {
               expect($item).to.contain(selectedChoiceText);
             });
         });
@@ -93,9 +95,7 @@ describe('Choices - select one', () => {
       describe('searching choices', () => {
         beforeEach(() => {
           // open dropdown
-          cy.get('[data-test-hook=basic]')
-            .find('.choices')
-            .click();
+          cy.get('[data-test-hook=basic]').find('.choices').click();
         });
 
         describe('on input', () => {
@@ -109,7 +109,7 @@ describe('Choices - select one', () => {
                 .find('.choices__list--dropdown .choices__list')
                 .children()
                 .first()
-                .should($choice => {
+                .should(($choice) => {
                   expect($choice.text().trim()).to.equal('Choice 2');
                 });
             });
@@ -125,7 +125,7 @@ describe('Choices - select one', () => {
                 .find('.choices__list--dropdown .choices__list')
                 .children()
                 .first()
-                .should($choice => {
+                .should(($choice) => {
                   expect($choice.text().trim()).to.equal('Choice 3');
                 });
             });
@@ -140,7 +140,7 @@ describe('Choices - select one', () => {
               cy.get('[data-test-hook=basic]')
                 .find('.choices__list--dropdown')
                 .should('be.visible')
-                .should($dropdown => {
+                .should(($dropdown) => {
                   const dropdownText = $dropdown.text().trim();
                   expect(dropdownText).to.equal('No results found');
                 });
@@ -206,7 +206,7 @@ describe('Choices - select one', () => {
             cy.get('[data-test-hook=remove-button]')
               .find('.choices__list--single .choices__item')
               .last()
-              .then($choice => {
+              .then(($choice) => {
                 removedChoiceText = $choice.text().trim();
               })
               .click();
@@ -229,7 +229,7 @@ describe('Choices - select one', () => {
           it('updates the value of the original input', () => {
             cy.get('[data-test-hook=remove-button]')
               .find('.choices__input[hidden]')
-              .should($select => {
+              .should(($select) => {
                 const val = $select.val() || [];
 
                 expect(val).to.not.contain(removedChoiceText);
@@ -248,7 +248,7 @@ describe('Choices - select one', () => {
 
           cy.get('[data-test-hook=disabled-choice]')
             .find('.choices__list--dropdown .choices__item--disabled')
-            .then($choice => {
+            .then(($choice) => {
               selectedChoiceText = $choice.text().trim();
             })
             .click();
@@ -258,7 +258,7 @@ describe('Choices - select one', () => {
           cy.get('[data-test-hook=prepend-append]')
             .find('.choices__list--single .choices__item')
             .last()
-            .should($choice => {
+            .should(($choice) => {
               expect($choice.text()).to.not.contain(selectedChoiceText);
             });
         });
@@ -305,9 +305,7 @@ describe('Choices - select one', () => {
 
       describe('on click', () => {
         it('does not open choice dropdown', () => {
-          cy.get('[data-test-hook=disabled-via-attr]')
-            .find('.choices')
-            .click();
+          cy.get('[data-test-hook=disabled-via-attr]').find('.choices').click();
 
           cy.get('[data-test-hook=disabled-via-attr]')
             .find('.choices__list--dropdown')
@@ -335,7 +333,7 @@ describe('Choices - select one', () => {
           .find('.choices__list--dropdown .choices__list')
           .children()
           .last()
-          .then($choice => {
+          .then(($choice) => {
             selectedChoiceText = $choice.text().trim();
           })
           .click();
@@ -345,7 +343,7 @@ describe('Choices - select one', () => {
         cy.get('[data-test-hook=prepend-append]')
           .find('.choices__list--single .choices__item')
           .last()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.data('value')).to.equal(
               `before-${selectedChoiceText}-after`,
             );
@@ -356,7 +354,7 @@ describe('Choices - select one', () => {
         cy.get('[data-test-hook=prepend-append]')
           .find('.choices__list--single .choices__item')
           .last()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text()).to.not.contain(
               `before-${selectedChoiceText}-after`,
             );
@@ -389,9 +387,7 @@ describe('Choices - select one', () => {
       const selectedChoiceText = 'Choice 3';
 
       beforeEach(() => {
-        cy.get('[data-test-hook=search-disabled]')
-          .find('.choices')
-          .click();
+        cy.get('[data-test-hook=search-disabled]').find('.choices').click();
       });
 
       it('does not display a search input', () => {
@@ -410,7 +406,7 @@ describe('Choices - select one', () => {
         cy.get('[data-test-hook=search-disabled]')
           .find('.choices__list--single .choices__item')
           .last()
-          .should($item => {
+          .should(($item) => {
             expect($item).to.contain(selectedChoiceText);
           });
       });
@@ -442,7 +438,7 @@ describe('Choices - select one', () => {
               .find('.choices__list--dropdown .choices__list')
               .children()
               .first()
-              .should($choice => {
+              .should(($choice) => {
                 expect($choice.text().trim()).to.not.contain(searchTerm);
               });
           });
@@ -460,7 +456,7 @@ describe('Choices - select one', () => {
               .find('.choices__list--dropdown .choices__list')
               .children()
               .first()
-              .should($choice => {
+              .should(($choice) => {
                 expect($choice.text().trim()).to.contain(searchTerm);
               });
           });
@@ -476,7 +472,7 @@ describe('Choices - select one', () => {
             .children()
             .first()
             .should('have.class', 'choices__placeholder')
-            .and($placeholder => {
+            .and(($placeholder) => {
               expect($placeholder).to.contain('I am a placeholder');
             });
         });
@@ -524,7 +520,7 @@ describe('Choices - select one', () => {
             .children()
             .first()
             .should('have.class', 'choices__placeholder')
-            .and($placeholder => {
+            .and(($placeholder) => {
               expect($placeholder).to.contain('I am a placeholder');
             });
         });
@@ -577,7 +573,7 @@ describe('Choices - select one', () => {
             .should('have.length', 1)
             .first()
             .should('have.class', 'choices__placeholder')
-            .and($placeholder => {
+            .and(($placeholder) => {
               expect($placeholder).to.contain('Loading...');
             });
         });
@@ -620,19 +616,17 @@ describe('Choices - select one', () => {
       beforeEach(() => {
         cy.get('[data-test-hook=scrolling-dropdown]')
           .find('.choices__list--dropdown .choices__list .choices__item')
-          .then($choices => {
+          .then(($choices) => {
             choicesCount = $choices.length;
           });
 
-        cy.get('[data-test-hook=scrolling-dropdown]')
-          .find('.choices')
-          .click();
+        cy.get('[data-test-hook=scrolling-dropdown]').find('.choices').click();
       });
 
       it('highlights first choice on dropdown open', () => {
         cy.get('[data-test-hook=scrolling-dropdown]')
           .find('.choices__list--dropdown .choices__list .is-highlighted')
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text().trim()).to.equal('Choice 1');
           });
       });
@@ -641,7 +635,7 @@ describe('Choices - select one', () => {
         for (let index = 0; index < choicesCount; index++) {
           cy.get('[data-test-hook=scrolling-dropdown]')
             .find('.choices__list--dropdown .choices__list .is-highlighted')
-            .should($choice => {
+            .should(($choice) => {
               expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
             });
 
@@ -665,7 +659,7 @@ describe('Choices - select one', () => {
 
           cy.get('[data-test-hook=scrolling-dropdown]')
             .find('.choices__list--dropdown .choices__list .is-highlighted')
-            .should($choice => {
+            .should(($choice) => {
               expect($choice.text().trim()).to.equal(`Choice ${index}`);
             });
 
@@ -684,7 +678,7 @@ describe('Choices - select one', () => {
         cy.get('[data-test-hook=groups]')
           .find('.choices__list--dropdown .choices__list .choices__group')
           .first()
-          .then($group => {
+          .then(($group) => {
             groupValue = $group.text().trim();
           });
       });
@@ -705,7 +699,7 @@ describe('Choices - select one', () => {
           cy.get('[data-test-hook=groups]')
             .find('.choices__list--dropdown .choices__list .choices__group')
             .first()
-            .should($group => {
+            .should(($group) => {
               expect($group.text().trim()).to.not.equal(groupValue);
             });
         });
@@ -736,7 +730,7 @@ describe('Choices - select one', () => {
           cy.get('[data-test-hook=groups]')
             .find('.choices__list--dropdown .choices__list .choices__group')
             .first()
-            .should($group => {
+            .should(($group) => {
               expect($group.text().trim()).to.equal(groupValue);
             });
         });
@@ -806,9 +800,7 @@ describe('Choices - select one', () => {
 
     describe('custom properties', () => {
       beforeEach(() => {
-        cy.get('[data-test-hook=custom-properties]')
-          .find('.choices')
-          .click();
+        cy.get('[data-test-hook=custom-properties]').find('.choices').click();
       });
 
       describe('on input', () => {
@@ -837,7 +829,7 @@ describe('Choices - select one', () => {
               .find('.choices__list--dropdown .choices__list')
               .children()
               .first()
-              .should($choice => {
+              .should(($choice) => {
                 expect($choice.text().trim()).to.equal(city);
               });
 
@@ -849,13 +841,75 @@ describe('Choices - select one', () => {
       });
     });
 
-    describe('non-string values', () => {
+    describe('custom properties via HTML', () => {
       beforeEach(() => {
-        cy.get('[data-test-hook=non-string-values]')
+        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();
+      });
+
       it('displays expected amount of choices in dropdown', () => {
         cy.get('[data-test-hook=non-string-values]')
           .find('.choices__list--dropdown .choices__list')
@@ -869,7 +923,7 @@ describe('Choices - select one', () => {
           .find('.choices__list--dropdown .choices__list')
           .children()
           .first()
-          .then($choice => {
+          .then(($choice) => {
             $selectedChoice = $choice;
           })
           .click();
@@ -877,7 +931,7 @@ describe('Choices - select one', () => {
         cy.get('[data-test-hook=non-string-values]')
           .find('.choices__list--single .choices__item')
           .last()
-          .should($item => {
+          .should(($item) => {
             expect($item.text().trim()).to.equal($selectedChoice.text().trim());
           });
       });
@@ -887,7 +941,7 @@ describe('Choices - select one', () => {
       describe('selecting choice', () => {
         describe('on enter key', () => {
           it('does not submit form', () => {
-            cy.get('[data-test-hook=within-form] form').then($form => {
+            cy.get('[data-test-hook=within-form] form').then(($form) => {
               $form.submit(() => {
                 // this will fail the test if the form submits
                 throw new Error('Form submitted');
@@ -900,14 +954,12 @@ describe('Choices - select one', () => {
               .find('.choices__input--cloned')
               .type('{enter}');
 
-            cy.get('[data-test-hook=within-form]')
-              .find('.choices')
-              .click();
+            cy.get('[data-test-hook=within-form]').find('.choices').click();
 
             cy.get('[data-test-hook=within-form]')
               .find('.choices__list--single .choices__item')
               .last()
-              .should($item => {
+              .should(($item) => {
                 expect($item).to.contain('Choice 1');
               });
           });
@@ -922,7 +974,7 @@ describe('Choices - select one', () => {
         cy.get('[data-test-hook=set-choice-by-value]')
           .find('.choices__list--single .choices__item')
           .last()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text().trim()).to.equal(
               dynamicallySelectedChoiceValue,
             );
@@ -932,7 +984,7 @@ describe('Choices - select one', () => {
       it('does not remove choice from dropdown list', () => {
         cy.get('[data-test-hook=set-choice-by-value]')
           .find('.choices__list--dropdown .choices__list')
-          .then($choicesList => {
+          .then(($choicesList) => {
             expect($choicesList).to.contain(dynamicallySelectedChoiceValue);
           });
       });
@@ -940,7 +992,7 @@ describe('Choices - select one', () => {
       it('updates the value of the original input', () => {
         cy.get('[data-test-hook=set-choice-by-value]')
           .find('.choices__input[hidden]')
-          .should($select => {
+          .should(($select) => {
             const val = $select.val() || [];
             expect(val).to.contain(dynamicallySelectedChoiceValue);
           });
@@ -949,9 +1001,7 @@ describe('Choices - select one', () => {
 
     describe('searching by label only', () => {
       beforeEach(() => {
-        cy.get('[data-test-hook=search-by-label]')
-          .find('.choices')
-          .click();
+        cy.get('[data-test-hook=search-by-label]').find('.choices').click();
       });
 
       it('gets zero results when searching by value', () => {
@@ -963,7 +1013,7 @@ describe('Choices - select one', () => {
           .find('.choices__list--dropdown .choices__list')
           .children()
           .first()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text().trim()).to.equal('No results found');
           });
       });
@@ -977,7 +1027,7 @@ describe('Choices - select one', () => {
           .find('.choices__list--dropdown .choices__list')
           .children()
           .first()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text().trim()).to.equal('label1');
           });
       });
@@ -998,7 +1048,7 @@ describe('Choices - select one', () => {
           .children()
           .first()
           .should('have.class', 'choices__item--disabled')
-          .then($choice => {
+          .then(($choice) => {
             disabledValue = $choice.val();
           });
       });
@@ -1006,19 +1056,64 @@ describe('Choices - select one', () => {
       it('selects the first enabled choice', () => {
         cy.get('[data-test-hook=disabled-first-choice-via-options]')
           .find('.choices__input[hidden]')
-          .then($option => {
+          .then(($option) => {
             expect($option.text().trim()).to.not.equal(disabledValue);
           });
 
         cy.get('[data-test-hook=disabled-first-choice-via-options]')
           .find('.choices__item.choices__item--selectable')
           .first()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text().trim()).to.not.equal(disabledValue);
           });
       });
     });
 
+    describe('allow html', () => {
+      describe('is undefined', () => {
+        it('logs a deprecation warning', () => {
+          cy.get('@consoleWarn').should(
+            'be.calledOnceWithExactly',
+            'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
+          );
+        });
+
+        it('does not show html as text', () => {
+          cy.get('[data-test-hook=allowhtml-undefined]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 1');
+            });
+        });
+      });
+
+      describe('set to true', () => {
+        it('does not show html as text', () => {
+          cy.get('[data-test-hook=allowhtml-true]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 1');
+            });
+        });
+      });
+
+      describe('set to false', () => {
+        it('shows html as text', () => {
+          cy.get('[data-test-hook=allowhtml-false]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('<b>Choice 1</b>');
+            });
+        });
+      });
+    });
+
     describe('re-initialising a choices instance', () => {
       it('preserves the choices list', () => {
         cy.get('[data-test-hook=new-destroy-init]')
@@ -1029,9 +1124,7 @@ describe('Choices - select one', () => {
         cy.get('[data-test-hook=new-destroy-init]')
           .find('button.destroy')
           .click();
-        cy.get('[data-test-hook=new-destroy-init]')
-          .find('button.init')
-          .click();
+        cy.get('[data-test-hook=new-destroy-init]').find('button.init').click();
 
         cy.get('[data-test-hook=new-destroy-init]')
           .find('.choices__list--dropdown .choices__list')

cypress/e2e/text.spec.ts

@@ -1,6 +1,10 @@
 describe('Choices - text element', () => {
   beforeEach(() => {
-    cy.visit('/text');
+    cy.visit('/text', {
+      onBeforeLoad(win) {
+        cy.stub(win.console, 'warn').as('consoleWarn');
+      },
+    });
   });
 
   describe('scenarios', () => {
@@ -17,7 +21,7 @@ describe('Choices - text element', () => {
           cy.get('[data-test-hook=basic]')
             .find('.choices__list--multiple .choices__item')
             .last()
-            .should($el => {
+            .should(($el) => {
               expect($el).to.contain(textInput);
             });
         });
@@ -42,7 +46,7 @@ describe('Choices - text element', () => {
             cy.get('[data-test-hook=basic]')
               .find('.choices__list--dropdown')
               .should('be.visible')
-              .should($dropdown => {
+              .should(($dropdown) => {
                 const dropdownText = $dropdown.text().trim();
                 expect(dropdownText).to.equal(
                   `Press Enter to add "${textInput}"`,
@@ -74,7 +78,7 @@ describe('Choices - text element', () => {
           cy.get('[data-test-hook=edit-items]')
             .find('.choices__list--multiple .choices__item')
             .last()
-            .should($choice => {
+            .should(($choice) => {
               expect($choice.data('value')).to.equal(`${textInput}-edited`);
             });
         });
@@ -90,7 +94,7 @@ describe('Choices - text element', () => {
         it('highlights all items', () => {
           cy.get('[data-test-hook=edit-items]')
             .find('.choices__list--multiple .choices__item')
-            .each($choice => {
+            .each(($choice) => {
               expect($choice.hasClass('is-highlighted')).to.equal(true);
             });
         });
@@ -124,7 +128,7 @@ describe('Choices - text element', () => {
           cy.get('[data-test-hook=remove-button]')
             .find('.choices__list--multiple')
             .children()
-            .should($items => {
+            .should(($items) => {
               expect($items.length).to.equal(1);
             });
 
@@ -137,7 +141,7 @@ describe('Choices - text element', () => {
 
           cy.get('[data-test-hook=remove-button]')
             .find('.choices__list--multiple .choices__item')
-            .should($items => {
+            .should(($items) => {
               expect($items.length).to.equal(0);
             });
         });
@@ -152,7 +156,7 @@ describe('Choices - text element', () => {
 
           cy.get('[data-test-hook=remove-button]')
             .find('.choices__input[hidden]')
-            .then($input => {
+            .then(($input) => {
               expect($input.val()).to.not.contain(textInput);
             });
         });
@@ -175,7 +179,7 @@ describe('Choices - text element', () => {
             .find('.choices__list--multiple')
             .first()
             .children()
-            .should($items => {
+            .should(($items) => {
               expect($items.length).to.equal(1);
             });
         });
@@ -185,7 +189,7 @@ describe('Choices - text element', () => {
             cy.get('[data-test-hook=unique-values]')
               .find('.choices__list--dropdown')
               .should('be.visible')
-              .should($dropdown => {
+              .should(($dropdown) => {
                 const dropdownText = $dropdown.text().trim();
                 expect(dropdownText).to.equal(
                   'Only unique values can be added',
@@ -212,7 +216,7 @@ describe('Choices - text element', () => {
           .find('.choices__list--multiple')
           .first()
           .children()
-          .should($items => {
+          .should(($items) => {
             expect($items.length).to.equal(inputLimit);
           });
       });
@@ -222,7 +226,7 @@ describe('Choices - text element', () => {
           cy.get('[data-test-hook=input-limit]')
             .find('.choices__list--dropdown')
             .should('be.visible')
-            .should($dropdown => {
+            .should(($dropdown) => {
               const dropdownText = $dropdown.text().trim();
               expect(dropdownText).to.equal(
                 `Only ${inputLimit} values can be added`,
@@ -245,7 +249,7 @@ describe('Choices - text element', () => {
           cy.get('[data-test-hook=add-item-filter]')
             .find('.choices__list--multiple .choices__item')
             .last()
-            .should($choice => {
+            .should(($choice) => {
               expect($choice.text().trim()).to.equal(input);
             });
         });
@@ -261,7 +265,7 @@ describe('Choices - text element', () => {
           cy.get('[data-test-hook=add-item-filter]')
             .find('.choices__list--dropdown')
             .should('be.visible')
-            .should($dropdown => {
+            .should(($dropdown) => {
               const dropdownText = $dropdown.text().trim();
               expect(dropdownText).to.equal(
                 'Only values matching specific conditions can be added',
@@ -283,7 +287,7 @@ describe('Choices - text element', () => {
         cy.get('[data-test-hook=prepend-append]')
           .find('.choices__list--multiple .choices__item')
           .last()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.data('value')).to.equal(`before-${textInput}-after`);
           });
       });
@@ -292,7 +296,7 @@ describe('Choices - text element', () => {
         cy.get('[data-test-hook=prepend-append]')
           .find('.choices__list--multiple .choices__item')
           .last()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text()).to.not.contain(`before-${textInput}-after`);
             expect($choice.text()).to.contain(textInput);
           });
@@ -319,21 +323,21 @@ describe('Choices - text element', () => {
       it('pre-populates choices', () => {
         cy.get('[data-test-hook=prepopulated]')
           .find('.choices__list--multiple .choices__item')
-          .should($choices => {
+          .should(($choices) => {
             expect($choices.length).to.equal(2);
           });
 
         cy.get('[data-test-hook=prepopulated]')
           .find('.choices__list--multiple .choices__item')
           .first()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text().trim()).to.equal('Josh Johnson');
           });
 
         cy.get('[data-test-hook=prepopulated]')
           .find('.choices__list--multiple .choices__item')
           .last()
-          .should($choice => {
+          .should(($choice) => {
             expect($choice.text().trim()).to.equal('Joe Bloggs');
           });
       });
@@ -355,11 +359,53 @@ describe('Choices - text element', () => {
       });
     });
 
+    describe('allow html', () => {
+      describe('is undefined', () => {
+        it('logs a deprecation warning', () => {
+          cy.get('@consoleWarn').should(
+            'be.calledOnceWithExactly',
+            'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
+          );
+        });
+
+        it('does not show html as text', () => {
+          cy.get('[data-test-hook=allowhtml-undefined]')
+            .find('.choices__list--multiple .choices__item')
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Mason Rogers');
+            });
+        });
+      });
+
+      describe('set to true', () => {
+        it('does not show html as text', () => {
+          cy.get('[data-test-hook=allowhtml-true]')
+            .find('.choices__list--multiple .choices__item')
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Mason Rogers');
+            });
+        });
+      });
+
+      describe('set to false', () => {
+        it('shows html as text', () => {
+          cy.get('[data-test-hook=allowhtml-false]')
+            .find('.choices__list--multiple .choices__item')
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('<b>Mason Rogers</b>');
+            });
+        });
+      });
+    });
+
     describe('within form', () => {
       describe('inputting item', () => {
         describe('on enter key', () => {
           it('does not submit form', () => {
-            cy.get('[data-test-hook=within-form] form').then($form => {
+            cy.get('[data-test-hook=within-form] form').then(($form) => {
               $form.submit(() => {
                 // this will fail the test if the form submits
                 throw new Error('Form submitted');
@@ -374,7 +420,7 @@ describe('Choices - text element', () => {
             cy.get('[data-test-hook=within-form]')
               .find('.choices__list--multiple .choices__item')
               .last()
-              .should($el => {
+              .should(($el) => {
                 expect($el).to.contain(textInput);
               });
           });

package.json

@@ -1,9 +1,9 @@
 {
   "name": "choices.js",
-  "version": "9.1.0",
+  "version": "10.2.0",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.js",
-  "types": "./types/index.d.ts",
+  "types": "./public/types/src/index.d.ts",
   "scripts": {
     "start": "run-p js:watch css:watch",
     "build": "run-p js:build css:build",
@@ -38,6 +38,7 @@
   "files": [
     "public/assets/scripts",
     "public/assets/styles",
+    "public/types",
     "src",
     "!src/**/*.test.js",
     "types"
@@ -55,61 +56,61 @@
     "js"
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/register": "^7.16.5",
-    "@types/chai": "^4.3.0",
-    "@types/mocha": "^9.0.0",
-    "@types/sinon": "^10.0.6",
-    "@types/sinon-chai": "^3.2.6",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "autoprefixer": "^10.4.0",
-    "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.4",
+    "chai": "^4.3.7",
     "cross-env": "^7.0.3",
-    "csso-cli": "^3.0.0",
-    "cypress": "9.1.1",
-    "eslint": "^8.5.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-plugin-compat": "4.0.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.3",
-    "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.1.3",
-    "mocha": "^9.1.3",
-    "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.5",
-    "postcss-cli": "^9.1.0",
-    "prettier": "^2.5.1",
-    "sass": "^1.45.0",
-    "sinon": "^12.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.1.0",
-    "stylelint-config-standard": "^24.0.0",
-    "stylelint-config-standard-scss": "^3.0.0",
-    "ts-loader": "^9.2.6",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.5.4",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-middleware": "^5.3.0",
-    "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": "^3.4.6",
-    "redux": "^4.1.2"
+    "fuse.js": "^6.6.2",
+    "redux": "^4.2.0"
   },
   "npmName": "choices.js",
   "npmFileMap": [
@@ -117,6 +118,7 @@
       "files": [
         "public/assets/scripts/*",
         "public/assets/styles/*",
+        "public/types/*",
         "src/icons/*"
       ]
     }
@@ -136,7 +138,7 @@
     },
     {
       "path": "public/assets/styles/choices.min.css",
-      "maxSize": "1.8 kB"
+      "maxSize": "2.5 kB"
     }
   ]
 }

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/assets/styles/choices.css

@@ -14,7 +14,7 @@
   margin-bottom: 0;
 }
 .choices.is-open {
-  overflow: initial;
+  overflow: visible;
 }
 .choices.is-disabled .choices__inner,
 .choices.is-disabled .choices__input {
@@ -149,7 +149,6 @@
   padding-left: 0;
   list-style: none;
 }
-
 .choices__list--single {
   display: inline-block;
   padding: 4px 16px 4px 4px;
@@ -197,7 +196,7 @@
   border: 1px solid #919191;
 }
 
-.choices__list--dropdown {
+.choices__list--dropdown, .choices__list[aria-expanded] {
   visibility: hidden;
   z-index: 1;
   position: absolute;
@@ -212,39 +211,39 @@
   word-break: break-all;
   will-change: visibility;
 }
-.choices__list--dropdown.is-active {
+.is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] {
   visibility: visible;
 }
-.is-open .choices__list--dropdown {
+.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
   border-color: #b7b7b7;
 }
-.is-flipped .choices__list--dropdown {
+.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
   top: auto;
   bottom: 100%;
   margin-top: 0;
   margin-bottom: -1px;
   border-radius: 0.25rem 0.25rem 0 0;
 }
-.choices__list--dropdown .choices__list {
+.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
   position: relative;
   max-height: 300px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
 }
-.choices__list--dropdown .choices__item {
+.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
   position: relative;
   padding: 10px;
   font-size: 14px;
 }
-[dir=rtl] .choices__list--dropdown .choices__item {
+[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
   text-align: right;
 }
 @media (min-width: 640px) {
-  .choices__list--dropdown .choices__item--selectable {
+  .choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable {
     padding-right: 100px;
   }
-  .choices__list--dropdown .choices__item--selectable::after {
+  .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable::after {
     content: attr(data-select-text);
     font-size: 12px;
     opacity: 0;
@@ -253,20 +252,20 @@
     top: 50%;
     transform: translateY(-50%);
   }
-  [dir=rtl] .choices__list--dropdown .choices__item--selectable {
+  [dir=rtl] .choices__list--dropdown .choices__item--selectable, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
     text-align: right;
     padding-left: 100px;
     padding-right: 10px;
   }
-  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
+  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
     right: auto;
     left: 10px;
   }
 }
-.choices__list--dropdown .choices__item--selectable.is-highlighted {
+.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
   background-color: #f2f2f2;
 }
-.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
+.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
   opacity: 0.5;
 }
 
@@ -321,6 +320,14 @@
 .choices__input:focus {
   outline: 0;
 }
+.choices__input::-webkit-search-decoration, .choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration {
+  display: none;
+}
+.choices__input::-ms-clear, .choices__input::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
 [dir=rtl] .choices__input {
   padding-right: 2px;
   padding-left: 0;

public/assets/styles/choices.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AA2BA;EACE;EACA;EACA,eApBkB;EAqBlB,WAxBqB;;AA0BrB;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;AAAA;EAEE,kBAlCsB;EAmCtB;EACA;;AAEF;EACE;;AAIJ;EACE;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBApDyB;EAqDzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAOJ;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA,aA5HoB;EA6HpB;EACA;EACA,kBA9HiB;EA+HjB,iBAjIuB;EAkIvB,OAlIuB;EAmIvB;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;;;AAKN;EACE;EACA;EACA;EACA,kBA1JiB;EA2JjB;EACA;EACA,eA/JsB;EAgKtB,WAnKqB;EAoKrB;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA,eA1MyB;EA2MzB;EACA,WA/MmB;EAgNnB;EACA;EACA;EACA,kBA1MoB;EA2MpB;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA,SAhOgB;EAiOhB;EACA;EACA,kBA7O0B;EA8O1B;EACA;EACA;EACA,2BArPsB;EAsPtB,4BAtPsB;EAuPtB;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,WAvRmB;;AAyRnB;EACE;;AAIF;EADF;IAEI;;EAEA;IACE;IACA,WAlSe;IAmSf;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAKN;EACE;;AAEA;EACE;;;AAMR;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WAhVqB;EAiVrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,kBAnWiB;EAoWjB,WAzWqB;EA0WrB;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AA2BA;EACE;EACA;EACA,eApBkB;EAqBlB,WAxBqB;;AA0BrB;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;AAAA;EAEE,kBAlCsB;EAmCtB;EACA;;AAEF;EACE;;AAIJ;EACE;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBApDyB;EAqDzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAOJ;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA,aA5HoB;EA6HpB;EACA;EACA,kBA9HiB;EA+HjB,iBAjIuB;EAkIvB,OAlIuB;EAmIvB;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;;;AAKN;EACE;EACA;EACA;EACA,kBA1JiB;EA2JjB;EACA;EACA,eA/JsB;EAgKtB,WAnKqB;EAoKrB;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA,eA9MyB;EA+MzB;EACA,WAnNmB;EAoNnB;EACA;EACA;EACA,kBA9MoB;EA+MpB;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA,SApOgB;EAqOhB;EACA;EACA,kBAjP0B;EAkP1B;EACA;EACA;EACA,2BAzPsB;EA0PtB,4BA1PsB;EA2PtB;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,WA3RmB;;AA6RnB;EACE;;AAIF;EADF;IAEI;;EAEA;IACE;IACA,WAtSe;IAuSf;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAKN;EACE;;AAEA;EACE;;;AAUR;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WAxVqB;EAyVrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,kBA3WiB;EA4WjB,WAjXqB;EAkXrB;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}

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]>
@@ -96,6 +96,13 @@
             tutorials! 💪🏼</strong
           >
         </p>
+        <p class="h4 text-center">
+          <strong>Sponsored by:</strong>
+          <br />
+          <a href="https://wanderermaps.com/" target="_blank" rel="noopener noreferrer">
+            <img src="https://cdn.shopify.com/s/files/1/0614/3357/7715/files/Logo_BlackWithBackground_150x.png?v=1644802773" alt="Wanderer Maps logo">
+          </a>
+        </p>
         <hr />
 
         <h2>Text inputs</h2>
@@ -288,7 +295,9 @@
         <hr />
 
         <h2>Single select input</h2>
-        <label for="choices-single-default">Default</label>
+        <label id="choices-single-default-label" for="choices-single-default"
+          >Default</label
+        >
         <select
           class="form-control"
           data-trigger
@@ -431,9 +440,18 @@
             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 for="choices-single-no-sorting">Options without sorting</label>
+        <label
+          id="choices-single-no-sorting-label"
+          for="choices-single-no-sorting"
+          >Options without sorting</label
+        >
         <select
           class="form-control"
           name="choices-single-no-sorting"
@@ -534,6 +552,7 @@
         for (i = 0; i < genericExamples.length; ++i) {
           var element = genericExamples[i];
           new Choices(element, {
+            allowHTML: true,
             placeholderValue: 'This is a placeholder set in the config',
             searchPlaceholderValue: 'This is a search placeholder',
           });
@@ -542,6 +561,7 @@
         var textRemove = new Choices(
           document.getElementById('choices-text-remove-button'),
           {
+            allowHTML: true,
             delimiter: ',',
             editItems: true,
             maxItemCount: 5,
@@ -550,12 +570,14 @@
         );
 
         var textUniqueVals = new Choices('#choices-text-unique-values', {
+          allowHTML: true,
           paste: false,
           duplicateItemsAllowed: false,
           editItems: true,
         });
 
         var texti18n = new Choices('#choices-text-i18n', {
+          allowHTML: true,
           paste: false,
           duplicateItemsAllowed: false,
           editItems: true,
@@ -572,6 +594,7 @@
         });
 
         var textEmailFilter = new Choices('#choices-text-email-filter', {
+          allowHTML: true,
           editItems: true,
           addItemFilter: function(value) {
             if (!value) {
@@ -585,6 +608,7 @@
         }).setValue(['joe@bloggs.com']);
 
         var textDisabled = new Choices('#choices-text-disabled', {
+          allowHTML: true,
           addItems: false,
           removeItems: false,
         }).disable();
@@ -592,12 +616,14 @@
         var textPrependAppendVal = new Choices(
           '#choices-text-prepend-append-value',
           {
+            allowHTML: true,
             prependValue: 'item-',
             appendValue: '-' + Date.now(),
           }
         ).removeActiveItems();
 
         var textPresetVal = new Choices('#choices-text-preset-values', {
+          allowHTML: true,
           items: [
             'Josh Johnson',
             {
@@ -611,10 +637,12 @@
         });
 
         var multipleDefault = new Choices(
-          document.getElementById('choices-multiple-groups')
+          document.getElementById('choices-multiple-groups'),
+          { allowHTML: true }
         );
 
         var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
+          allowHTML: false,
           placeholder: true,
           placeholderValue: 'Pick an Strokes record',
           maxItemCount: 5,
@@ -635,12 +663,14 @@
         var multipleCancelButton = new Choices(
           '#choices-multiple-remove-button',
           {
+            allowHTML: true,
             removeItemButton: true,
           }
         );
 
         /* Use label on event */
         var choicesSelect = new Choices('#choices-multiple-labels', {
+          allowHTML: true,
           removeItemButton: true,
           choices: [
             { value: 'One', label: 'Label One' },
@@ -675,6 +705,7 @@
         );
 
         var singleFetch = new Choices('#choices-single-remote-fetch', {
+          allowHTML: false,
           searchPlaceholderValue: 'Search for an Arctic Monkeys record',
         })
           .setChoices(function() {
@@ -695,6 +726,7 @@
           });
 
         var singleXhrRemove = new Choices('#choices-single-remove-xhr', {
+          allowHTML: true,
           removeItemButton: true,
           searchPlaceholderValue: "Search for a Smiths' record",
         }).setChoices(function(callback) {
@@ -712,6 +744,7 @@
         });
 
         var singleNoSearch = new Choices('#choices-single-no-search', {
+          allowHTML: true,
           searchEnabled: false,
           removeItemButton: true,
           choices: [
@@ -731,6 +764,7 @@
         );
 
         var singlePresetOpts = new Choices('#choices-single-preset-options', {
+          allowHTML: true,
           placeholder: true,
         }).setChoices(
           [
@@ -760,6 +794,7 @@
         );
 
         var singleSelectedOpt = new Choices('#choices-single-selected-option', {
+          allowHTML: true,
           searchFields: ['label', 'value', 'customProperties.description'],
           choices: [
             { value: 'One', label: 'Label One', selected: true },
@@ -777,17 +812,21 @@
         var customChoicesPropertiesViaDataAttributes = new Choices(
           '#choices-with-custom-props-via-html',
           {
+            allowHTML: true,
             searchFields: ['label', 'value', 'customProperties'],
           }
         );
 
         var singleNoSorting = new Choices('#choices-single-no-sorting', {
+          allowHTML: true,
           shouldSort: false,
+          labelId: 'choices-single-no-sorting-label',
         });
 
-        var cities = new Choices(document.getElementById('cities'));
+        var cities = new Choices(document.getElementById('cities'), { allowHTML: true });
         var tubeStations = new Choices(
-          document.getElementById('tube-stations')
+          document.getElementById('tube-stations'),
+          { allowHTML: true }
         ).disable();
 
         cities.passedElement.element.addEventListener('change', function(e) {
@@ -801,11 +840,12 @@
         var customTemplates = new Choices(
           document.getElementById('choices-single-custom-templates'),
           {
+            allowHTML: true,
             callbackOnCreateTemplates: function(strToEl) {
               var classNames = this.config.classNames;
               var itemSelectText = this.config.itemSelectText;
               return {
-                item: function(classNames, data) {
+                item: function({ classNames }, data) {
                   return strToEl(
                     '\
                 <div\
@@ -839,7 +879,7 @@
               '
                   );
                 },
-                choice: function(classNames, data) {
+                choice: function({ classNames }, data) {
                   return strToEl(
                     '\
                 <div\
@@ -889,9 +929,12 @@
           }
         );
 
-        var resetSimple = new Choices(document.getElementById('reset-simple'));
+        var resetSimple = new Choices(document.getElementById('reset-simple'), {
+          allowHTML: true,
+        });
 
         var resetMultiple = new Choices('#reset-multiple', {
+          allowHTML: true,
           removeItemButton: true,
         });
       });

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
@@ -345,11 +367,43 @@
             <option value="value2">label2</option>
           </select>
         </div>
+
+        <div data-test-hook="allowhtml-undefined">
+          <label for="choices-allowhtml-undefined">HTML allowed by default</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-undefined"
+            id="choices-allowhtml-undefined"
+            multiple
+          ></select>
+        </div>
+
+        <div data-test-hook="allowhtml-true">
+          <label for="choices-allowhtml-true">HTML allowed</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-true"
+            id="choices-allowhtml-true"
+            multiple
+          ></select>
+        </div>
+
+        <div data-test-hook="allowhtml-false">
+          <label for="choices-allowhtml-false">HTML disabled</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-false"
+            id="choices-allowhtml-false"
+            multiple
+          ></select>
+        </div>
       </div>
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        const choicesBasic = new Choices('#choices-basic');
+        const choicesBasic = new Choices('#choices-basic', {
+          allowHTML: true,
+        });
 
         document
           .querySelector('button.disable')
@@ -364,39 +418,54 @@
           });
 
         new Choices('#choices-remove-button', {
+          allowHTML: true,
           removeItemButton: true,
         });
 
-        new Choices('#choices-disabled-choice');
+        new Choices('#choices-disabled-choice', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-add-items-disabled', {
+          allowHTML: true,
           addItems: false,
         });
 
-        new Choices('#choices-disabled-via-attr');
+        new Choices('#choices-disabled-via-attr', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-selection-limit', {
+          allowHTML: true,
           maxItemCount: 5,
         });
 
         new Choices('#choices-prepend-append', {
+          allowHTML: true,
           prependValue: 'before-',
           appendValue: '-after',
         });
 
         new Choices('#choices-render-choice-limit', {
+          allowHTML: true,
           renderChoiceLimit: 1,
         });
 
         new Choices('#choices-search-floor', {
+          allowHTML: true,
           searchFloor: 5,
         });
 
-        new Choices('#choices-placeholder-via-option-value');
+        new Choices('#choices-placeholder-via-option-value', {
+          allowHTML: true,
+        });
 
-        new Choices('#choices-placeholder-via-option-attr');
+        new Choices('#choices-placeholder-via-option-attr', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-remote-data', {
+          allowHTML: true,
           shouldSort: false,
         }).setChoices(async () => {
           const data = await fetch('/data');
@@ -404,12 +473,16 @@
         });
 
         new Choices('#choices-scrolling-dropdown', {
+          allowHTML: true,
           shouldSort: false,
         });
 
-        new Choices('#choices-groups');
+        new Choices('#choices-groups', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-custom-properties', {
+          allowHTML: true,
           searchFields: ['label', 'value', 'customProperties.country'],
           choices: [
             {
@@ -439,7 +512,13 @@
           ],
         });
 
+        new Choices('#choices-custom-properties-html', {
+          allowHTML: true,
+          searchFields: ['label', 'value', 'customProperties'],
+        });
+
         new Choices('#choices-non-string-values', {
+          allowHTML: true,
           choices: [
             {
               id: 1,
@@ -466,13 +545,83 @@
           ],
         });
 
-        new Choices('#choices-within-form');
+        new Choices('#choices-within-form', {
+          allowHTML: true,
+        });
 
-        new Choices('#choices-set-choice-by-value').setChoiceByValue(
-          'Choice 2',
-        );
+        new Choices('#choices-set-choice-by-value', {
+          allowHTML: true,
+        }).setChoiceByValue('Choice 2');
 
-        new Choices('#choices-search-by-label', { searchFields: ['label'] });
+        new Choices('#choices-search-by-label', {
+          allowHTML: true,
+          searchFields: ['label']
+        });
+
+        new Choices('#choices-allowhtml-undefined', {
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+              selected: true
+            },
+            {
+              id: 2,
+              label: '<b>Choice 2</b>',
+              value: 'Choice 2',
+            },
+            {
+              id: 3,
+              label: 'Choice 3',
+              value: 'Choice 3',
+            },
+          ],
+        });
+
+        new Choices('#choices-allowhtml-true', {
+          allowHTML: true,
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+              selected: true
+            },
+            {
+              id: 2,
+              label: '<b>Choice 2</b>',
+              value: 'Choice 2',
+            },
+            {
+              id: 3,
+              label: 'Choice 3',
+              value: 'Choice 3',
+            },
+          ],
+        });
+
+        new Choices('#choices-allowhtml-false', {
+          allowHTML: false,
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+              selected: true
+            },
+            {
+              id: 2,
+              label: '<b>Choice 2</b>',
+              value: 'Choice 2',
+            },
+            {
+              id: 3,
+              label: 'Choice 3',
+              value: 'Choice 3',
+            },
+          ],
+        });
       });
     </script>
   </body>

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
@@ -354,6 +376,33 @@
           </select>
         </div>
 
+        <div data-test-hook="allowhtml-undefined">
+          <label for="choices-allowhtml-undefined">HTML allowed by default</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-undefined"
+            id="choices-allowhtml-undefined"
+          ></select>
+        </div>
+
+        <div data-test-hook="allowhtml-true">
+          <label for="choices-allowhtml-true">HTML allowed</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-true"
+            id="choices-allowhtml-true"
+          ></select>
+        </div>
+
+        <div data-test-hook="allowhtml-false">
+          <label for="choices-allowhtml-false">HTML disabled</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-false"
+            id="choices-allowhtml-false"
+          ></select>
+        </div>
+
         <div data-test-hook="new-destroy-init">
           <label for="choices-new-destroy-init">New, Destroy, Init</label>
           <select
@@ -372,7 +421,9 @@
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        const choicesBasic = new Choices('#choices-basic');
+        const choicesBasic = new Choices('#choices-basic', {
+          allowHTML: true,
+        });
 
         document
           .querySelector('button.disable')
@@ -387,14 +438,17 @@
           });
 
         new Choices('#choices-remove-button', {
+          allowHTML: true,
           removeItemButton: true,
         });
 
         new Choices('#choices-disabled-choice', {
+          allowHTML: true,
           removeItemButton: true,
         });
 
         new Choices('#choices-disabled-choice-via-options', {
+          allowHTML: true,
           removeItemButton: true,
           choices: [
             {
@@ -418,33 +472,45 @@
         });
 
         new Choices('#choices-add-items-disabled', {
+          allowHTML: true,
           addItems: false,
         });
 
-        new Choices('#choices-disabled-via-attr');
+        new Choices('#choices-disabled-via-attr', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-prepend-append', {
+          allowHTML: true,
           prependValue: 'before-',
           appendValue: '-after',
         });
 
         new Choices('#choices-render-choice-limit', {
+          allowHTML: true,
           renderChoiceLimit: 1,
         });
 
         new Choices('#choices-search-disabled', {
+          allowHTML: true,
           searchEnabled: false,
         });
 
         new Choices('#choices-search-floor', {
+          allowHTML: true,
           searchFloor: 5,
         });
 
-        new Choices('#choices-placeholder-via-option-value');
+        new Choices('#choices-placeholder-via-option-value', {
+          allowHTML: true,
+        });
 
-        new Choices('#choices-placeholder-via-option-attr');
+        new Choices('#choices-placeholder-via-option-attr', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-remote-data', {
+          allowHTML: true,
           shouldSort: false,
         }).setChoices(async () => {
           const res = await fetch('/data');
@@ -452,13 +518,20 @@
         });
 
         new Choices('#choices-scrolling-dropdown', {
+          allowHTML: true,
           shouldSort: false,
         });
 
-        new Choices('#choices-groups');
+        new Choices('#choices-groups', {
+          allowHTML: true,
+        });
 
-        const parent = new Choices('#choices-parent');
-        const child = new Choices('#choices-child').disable();
+        const parent = new Choices('#choices-parent', {
+          allowHTML: true,
+        });
+        const child = new Choices('#choices-child', {
+          allowHTML: true,
+        }).disable();
 
         parent.passedElement.element.addEventListener('change', event => {
           if (event.detail.value === 'Parent choice 2') {
@@ -469,6 +542,7 @@
         });
 
         new Choices('#choices-custom-properties', {
+          allowHTML: true,
           searchFields: ['label', 'value', 'customProperties.country'],
           choices: [
             {
@@ -498,7 +572,13 @@
           ],
         });
 
+        new Choices('#choices-custom-properties-html', {
+          allowHTML: true,
+          searchFields: ['label', 'value', 'customProperties'],
+        });
+
         new Choices('#choices-non-string-values', {
+          allowHTML: true,
           choices: [
             {
               id: 1,
@@ -525,15 +605,69 @@
           ],
         });
 
-        new Choices('#choices-within-form');
+        new Choices('#choices-within-form', {
+          allowHTML: true,
+        });
 
-        new Choices('#choices-set-choice-by-value').setChoiceByValue(
-          'Choice 2',
-        );
+        new Choices('#choices-set-choice-by-value', {
+          allowHTML: true,
+        }).setChoiceByValue('Choice 2');
 
-        new Choices('#choices-search-by-label', { searchFields: ['label'] });
+        new Choices('#choices-search-by-label', {
+          allowHTML: true,
+          searchFields: ['label']
+        });
 
-        const newDestroyInitChoices = new Choices('#choices-new-destroy-init');
+        new Choices('#choices-allowhtml-undefined', {
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+            },
+            {
+              id: 2,
+              label: 'Choice 2',
+              value: 'Choice 2',
+            },
+          ],
+        });
+
+        new Choices('#choices-allowhtml-true', {
+          allowHTML: true,
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+            },
+            {
+              id: 2,
+              label: 'Choice 2',
+              value: 'Choice 2',
+            },
+          ],
+        });
+
+        new Choices('#choices-allowhtml-false', {
+          allowHTML: false,
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+            },
+            {
+              id: 2,
+              label: 'Choice 2',
+              value: 'Choice 2',
+            },
+          ],
+        });
+
+        const newDestroyInitChoices = new Choices('#choices-new-destroy-init', {
+          allowHTML: true,
+        });
         document
           .querySelector('button.destroy')
           .addEventListener('click', () => {

public/test/text/index.html

@@ -76,6 +76,21 @@
           <input class="form-control" id="choices-unique-values" type="text" />
         </div>
 
+        <div data-test-hook="allowhtml-undefined">
+          <label for="allowhtml-undefined">HTML allowed by default</label>
+          <input class="form-control" id="allowhtml-undefined" type="text" />
+        </div>
+
+        <div data-test-hook="allowhtml-true">
+          <label for="allowhtml-true">HTML allowed</label>
+          <input class="form-control" id="allowhtml-true" type="text" />
+        </div>
+
+        <div data-test-hook="allowhtml-false">
+          <label for="allowhtml-false">HTML disabled</label>
+          <input class="form-control" id="allowhtml-false" type="text" />
+        </div>
+
         <div data-test-hook="input-limit">
           <label for="choices-input-limit">Input limit</label>
           <input class="form-control" id="choices-input-limit" type="text" />
@@ -134,25 +149,52 @@
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        new Choices('#choices-basic');
+        new Choices('#choices-basic', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-edit-items', {
+          allowHTML: true,
           editItems: true,
         });
 
         new Choices('#choices-remove-button', {
+          allowHTML: true,
           removeItemButton: true,
         });
 
         new Choices('#choices-unique-values', {
+          allowHTML: true,
           duplicateItemsAllowed: false,
         });
 
+        new Choices('#allowhtml-undefined', {
+          items: [
+            '<b>Mason Rogers</b>'
+          ],
+        });
+
+        new Choices('#allowhtml-true', {
+          allowHTML: true,
+          items: [
+            '<b>Mason Rogers</b>'
+          ],
+        });
+
+        new Choices('#allowhtml-false', {
+          allowHTML: false,
+          items: [
+            '<b>Mason Rogers</b>'
+          ],
+        });
+
         new Choices('#choices-input-limit', {
+          allowHTML: true,
           maxItemCount: 5,
         });
 
         new Choices('#choices-add-item-filter', {
+          allowHTML: true,
           addItems: true,
           addItemFilter: value => {
             const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -162,17 +204,22 @@
         });
 
         new Choices('#choices-adding-items-disabled', {
+          allowHTML: true,
           addItems: false,
         });
 
-        new Choices('#choices-disabled-via-attr');
+        new Choices('#choices-disabled-via-attr', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-prepend-append', {
+          allowHTML: true,
           prependValue: 'before-',
           appendValue: '-after',
         });
 
         new Choices('#choices-prepopulated', {
+          allowHTML: true,
           items: [
             'Josh Johnson',
             {
@@ -186,11 +233,14 @@
         });
 
         new Choices('#choices-placeholder', {
+          allowHTML: true,
           placeholder: true,
           placeholderValue: 'I am a placeholder',
         });
 
-        new Choices('#choices-within-form');
+        new Choices('#choices-within-form', {
+          allowHTML: true,
+        });
       });
     </script>
   </body>

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/integration/select-multiple.spec.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/integration/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/index.d.ts

@@ -0,0 +1,7 @@
+import Choices from './scripts/choices';
+export * from './scripts/interfaces';
+export * from './scripts/constants';
+export * from './scripts/defaults';
+export { default as templates } from './scripts/templates';
+export default Choices;
+//# sourceMappingURL=index.d.ts.map

public/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,mBAAmB,CAAC;AAExC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE3D,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,44 @@
+import { ACTION_TYPES } from '../constants';
+import { Choice } from '../interfaces/choice';
+export interface AddChoiceAction {
+    type: typeof ACTION_TYPES.ADD_CHOICE;
+    id: number;
+    value: string;
+    label: string;
+    groupId: number;
+    disabled: boolean;
+    elementId: number;
+    customProperties: object;
+    placeholder: boolean;
+    keyCode: number;
+}
+export interface Result<T> {
+    item: T;
+    score: number;
+}
+export interface FilterChoicesAction {
+    type: typeof ACTION_TYPES.FILTER_CHOICES;
+    results: Result<Choice>[];
+}
+export interface ActivateChoicesAction {
+    type: typeof ACTION_TYPES.ACTIVATE_CHOICES;
+    active: boolean;
+}
+export interface ClearChoicesAction {
+    type: typeof ACTION_TYPES.CLEAR_CHOICES;
+}
+export declare const addChoice: ({ value, label, id, groupId, disabled, elementId, customProperties, placeholder, keyCode, }: {
+    value: any;
+    label: any;
+    id: any;
+    groupId: any;
+    disabled: any;
+    elementId: any;
+    customProperties: any;
+    placeholder: any;
+    keyCode: any;
+}) => AddChoiceAction;
+export declare const filterChoices: (results: Result<Choice>[]) => FilterChoicesAction;
+export declare const activateChoices: (active?: boolean) => ActivateChoicesAction;
+export declare const clearChoices: () => ClearChoicesAction;
+//# sourceMappingURL=choices.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"choices.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/choices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,YAAY,CAAC,UAAU,CAAC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,YAAY,CAAC,cAAc,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,YAAY,CAAC,gBAAgB,CAAC;IAC3C,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,YAAY,CAAC,aAAa,CAAC;CACzC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;MAUlB,eAWF,CAAC;AAEH,eAAO,MAAM,aAAa,YACf,OAAO,MAAM,CAAC,EAAE,KACxB,mBAGD,CAAC;AAEH,eAAO,MAAM,eAAe,wBAAoB,qBAG9C,CAAC;AAEH,eAAO,MAAM,YAAY,QAAO,kBAE9B,CAAC"}

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

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

public/types/src/scripts/actions/choices.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choices.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/choices.test.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,15 @@
+import { ACTION_TYPES } from '../constants';
+export interface AddGroupAction {
+    type: typeof ACTION_TYPES.ADD_GROUP;
+    id: number;
+    value: string;
+    active: boolean;
+    disabled: boolean;
+}
+export declare const addGroup: ({ value, id, active, disabled, }: {
+    id: number;
+    value: string;
+    active: boolean;
+    disabled: boolean;
+}) => AddGroupAction;
+//# sourceMappingURL=groups.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"groups.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,YAAY,CAAC,SAAS,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ;QAMf,MAAM;WACH,MAAM;YACL,OAAO;cACL,OAAO;MACf,cAMF,CAAC"}

public/types/src/scripts/actions/groups.test.d.ts

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

public/types/src/scripts/actions/groups.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/groups.test.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,35 @@
+import { ACTION_TYPES } from '../constants';
+export interface AddItemAction {
+    type: typeof ACTION_TYPES.ADD_ITEM;
+    id: number;
+    value: string;
+    label: string;
+    choiceId: number;
+    groupId: number;
+    customProperties: object;
+    placeholder: boolean;
+    keyCode: number;
+}
+export interface RemoveItemAction {
+    type: typeof ACTION_TYPES.REMOVE_ITEM;
+    id: number;
+    choiceId: number;
+}
+export interface HighlightItemAction {
+    type: typeof ACTION_TYPES.HIGHLIGHT_ITEM;
+    id: number;
+    highlighted: boolean;
+}
+export declare const addItem: ({ value, label, id, choiceId, groupId, customProperties, placeholder, keyCode, }: {
+    id: number;
+    value: string;
+    label: string;
+    choiceId: number;
+    groupId: number;
+    customProperties: object;
+    placeholder: boolean;
+    keyCode: number;
+}) => AddItemAction;
+export declare const removeItem: (id: number, choiceId: number) => RemoveItemAction;
+export declare const highlightItem: (id: number, highlighted: boolean) => HighlightItemAction;
+//# sourceMappingURL=items.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/items.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,YAAY,CAAC,QAAQ,CAAC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,YAAY,CAAC,WAAW,CAAC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,YAAY,CAAC,cAAc,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,OAAO;QAUd,MAAM;WACH,MAAM;WACN,MAAM;cACH,MAAM;aACP,MAAM;sBACG,MAAM;iBACX,OAAO;aACX,MAAM;MACb,aAUF,CAAC;AAEH,eAAO,MAAM,UAAU,OAAQ,MAAM,YAAY,MAAM,KAAG,gBAIxD,CAAC;AAEH,eAAO,MAAM,aAAa,OACpB,MAAM,eACG,OAAO,KACnB,mBAID,CAAC"}

public/types/src/scripts/actions/items.test.d.ts

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

public/types/src/scripts/actions/items.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/items.test.ts"],"names":[],"mappings":""}

public/types/src/scripts/actions/misc.d.ts

@@ -0,0 +1,17 @@
+import { ACTION_TYPES } from '../constants';
+import { State } from '../interfaces/state';
+export interface ClearAllAction {
+    type: typeof ACTION_TYPES.CLEAR_ALL;
+}
+export interface ResetToAction {
+    type: typeof ACTION_TYPES.RESET_TO;
+    state: State;
+}
+export interface SetIsLoadingAction {
+    type: typeof ACTION_TYPES.SET_IS_LOADING;
+    isLoading: boolean;
+}
+export declare const clearAll: () => ClearAllAction;
+export declare const resetTo: (state: State) => ResetToAction;
+export declare const setIsLoading: (isLoading: boolean) => SetIsLoadingAction;
+//# sourceMappingURL=misc.d.ts.map

public/types/src/scripts/actions/misc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/misc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,YAAY,CAAC,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,YAAY,CAAC,QAAQ,CAAC;IACnC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,YAAY,CAAC,cAAc,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,QAAO,cAE1B,CAAC;AAEH,eAAO,MAAM,OAAO,UAAW,KAAK,KAAG,aAGrC,CAAC;AAEH,eAAO,MAAM,YAAY,cAAe,OAAO,KAAG,kBAGhD,CAAC"}

public/types/src/scripts/actions/misc.test.d.ts

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

public/types/src/scripts/actions/misc.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"misc.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/misc.test.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,218 @@
+import { Container, Dropdown, Input, List, WrappedInput, WrappedSelect } from './components';
+import { Choice } from './interfaces/choice';
+import { Group } from './interfaces/group';
+import { Item } from './interfaces/item';
+import { Notice } from './interfaces/notice';
+import { Options } from './interfaces/options';
+import { State } from './interfaces/state';
+import Store from './store/store';
+import templates from './templates';
+/**
+ * Choices
+ * @author Josh Johnson<josh@joshuajohnson.co.uk>
+ */
+declare class Choices implements Choices {
+    static get defaults(): {
+        options: Partial<Options>;
+        templates: typeof templates;
+    };
+    initialised: boolean;
+    config: Options;
+    passedElement: WrappedInput | WrappedSelect;
+    containerOuter: Container;
+    containerInner: Container;
+    choiceList: List;
+    itemList: List;
+    input: Input;
+    dropdown: Dropdown;
+    _isTextElement: boolean;
+    _isSelectOneElement: boolean;
+    _isSelectMultipleElement: boolean;
+    _isSelectElement: boolean;
+    _store: Store;
+    _templates: typeof templates;
+    _initialState: State;
+    _currentState: State;
+    _prevState: State;
+    _currentValue: string;
+    _canSearch: boolean;
+    _isScrollingOnIe: boolean;
+    _highlightPosition: number;
+    _wasTap: boolean;
+    _isSearching: boolean;
+    _placeholderValue: string | null;
+    _baseId: string;
+    _direction: HTMLElement['dir'];
+    _idNames: {
+        itemChoice: string;
+    };
+    _presetGroups: Group[] | HTMLOptGroupElement[] | Element[];
+    _presetOptions: Item[] | HTMLOptionElement[];
+    _presetChoices: Partial<Choice>[];
+    _presetItems: Item[] | string[];
+    constructor(element?: string | Element | HTMLInputElement | HTMLSelectElement, userConfig?: Partial<Options>);
+    init(): void;
+    destroy(): void;
+    enable(): this;
+    disable(): this;
+    highlightItem(item: Item, runEvent?: boolean): this;
+    unhighlightItem(item: Item): this;
+    highlightAll(): this;
+    unhighlightAll(): this;
+    removeActiveItemsByValue(value: string): this;
+    removeActiveItems(excludedId: number): this;
+    removeHighlightedItems(runEvent?: boolean): this;
+    showDropdown(preventInputFocus?: boolean): this;
+    hideDropdown(preventInputBlur?: boolean): this;
+    getValue(valueOnly?: boolean): string[] | Item[] | Item | string;
+    setValue(items: string[] | Item[]): 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.
+     * This behaves the same as passing items via the choices option but can be called after initialising Choices.
+     * This can also be used to add groups of choices (see example 2); Optionally pass a true `replaceChoices` value to remove any existing choices.
+     * Optionally pass a `customProperties` object to add additional data to your choices (useful when searching/filtering etc).
+     *
+     * **Input types affected:** select-one, select-multiple
+     *
+     * @example
+     * ```js
+     * const example = new Choices(element);
+     *
+     * example.setChoices([
+     *   {value: 'One', label: 'Label One', disabled: true},
+     *   {value: 'Two', label: 'Label Two', selected: true},
+     *   {value: 'Three', label: 'Label Three'},
+     * ], 'value', 'label', false);
+     * ```
+     *
+     * @example
+     * ```js
+     * const example = new Choices(element);
+     *
+     * example.setChoices(async () => {
+     *   try {
+     *      const items = await fetch('/items');
+     *      return items.json()
+     *   } catch(err) {
+     *      console.error(err)
+     *   }
+     * });
+     * ```
+     *
+     * @example
+     * ```js
+     * const example = new Choices(element);
+     *
+     * example.setChoices([{
+     *   label: 'Group one',
+     *   id: 1,
+     *   disabled: false,
+     *   choices: [
+     *     {value: 'Child One', label: 'Child One', selected: true},
+     *     {value: 'Child Two', label: 'Child Two',  disabled: true},
+     *     {value: 'Child Three', label: 'Child Three'},
+     *   ]
+     * },
+     * {
+     *   label: 'Group two',
+     *   id: 2,
+     *   disabled: false,
+     *   choices: [
+     *     {value: 'Child Four', label: 'Child Four', disabled: true},
+     *     {value: 'Child Five', label: 'Child Five'},
+     *     {value: 'Child Six', label: 'Child Six', customProperties: {
+     *       description: 'Custom description about child six',
+     *       random: 'Another random custom property'
+     *     }},
+     *   ]
+     * }], 'value', 'label', false);
+     * ```
+     */
+    setChoices(choicesArrayOrFetcher?: Choice[] | Group[] | ((instance: Choices) => Choice[] | Promise<Choice[]>), value?: string, label?: string, replaceChoices?: boolean): this | Promise<this>;
+    clearChoices(): this;
+    clearStore(): this;
+    clearInput(): this;
+    _render(): void;
+    _renderChoices(): void;
+    _renderItems(): void;
+    _createGroupsFragment(groups: Group[], choices: Choice[], fragment?: DocumentFragment): DocumentFragment;
+    _createChoicesFragment(choices: Choice[], fragment?: DocumentFragment, withinGroup?: boolean): DocumentFragment;
+    _createItemsFragment(items: Item[], fragment?: DocumentFragment): DocumentFragment;
+    _triggerChange(value: any): void;
+    _selectPlaceholderChoice(placeholderChoice: Choice): void;
+    _handleButtonAction(activeItems?: Item[], element?: HTMLElement): void;
+    _handleItemAction(activeItems?: Item[], element?: HTMLElement, hasShiftKey?: boolean): void;
+    _handleChoiceAction(activeItems?: Item[], element?: HTMLElement): void;
+    _handleBackspace(activeItems?: Item[]): void;
+    _startLoading(): void;
+    _stopLoading(): void;
+    _handleLoadingState(setLoading?: boolean): void;
+    _handleSearch(value: string): void;
+    _canAddItem(activeItems: Item[], value: string): Notice;
+    _searchChoices(value: string): number;
+    _addEventListeners(): void;
+    _removeEventListeners(): void;
+    _onKeyDown(event: KeyboardEvent): void;
+    _onKeyUp({ target, keyCode, }: Pick<KeyboardEvent, 'target' | 'keyCode'>): void;
+    _onSelectKey(event: KeyboardEvent, hasItems: boolean): void;
+    _onEnterKey(event: KeyboardEvent, activeItems: Item[], hasActiveDropdown: boolean): void;
+    _onEscapeKey(hasActiveDropdown: boolean): void;
+    _onDirectionKey(event: KeyboardEvent, hasActiveDropdown: boolean): void;
+    _onDeleteKey(event: KeyboardEvent, activeItems: Item[], hasFocusedInput: boolean): void;
+    _onTouchMove(): void;
+    _onTouchEnd(event: TouchEvent): void;
+    /**
+     * Handles mousedown event in capture mode for containetOuter.element
+     */
+    _onMouseDown(event: MouseEvent): void;
+    /**
+     * Handles mouseover event over this.dropdown
+     * @param {MouseEvent} event
+     */
+    _onMouseOver({ target }: Pick<MouseEvent, 'target'>): void;
+    _onClick({ target }: Pick<MouseEvent, 'target'>): void;
+    _onFocus({ target }: Pick<FocusEvent, 'target'>): void;
+    _onBlur({ target }: Pick<FocusEvent, 'target'>): void;
+    _onFormReset(): void;
+    _highlightChoice(el?: HTMLElement | null): void;
+    _addItem({ value, label, choiceId, groupId, customProperties, placeholder, keyCode, }: {
+        value: string;
+        label?: string | null;
+        choiceId?: number;
+        groupId?: number;
+        customProperties?: object;
+        placeholder?: boolean;
+        keyCode?: number;
+    }): void;
+    _removeItem(item: Item): void;
+    _addChoice({ value, label, isSelected, isDisabled, groupId, customProperties, placeholder, keyCode, }: {
+        value: string;
+        label?: string | null;
+        isSelected?: boolean;
+        isDisabled?: boolean;
+        groupId?: number;
+        customProperties?: Record<string, any>;
+        placeholder?: boolean;
+        keyCode?: number;
+    }): void;
+    _addGroup({ group, id, valueKey, labelKey }: {
+        group: any;
+        id: any;
+        valueKey?: string | undefined;
+        labelKey?: string | undefined;
+    }): void;
+    _getTemplate(template: string, ...args: any): any;
+    _createTemplates(): void;
+    _createElements(): void;
+    _createStructure(): void;
+    _addPredefinedGroups(groups: Group[] | HTMLOptGroupElement[] | Element[]): void;
+    _addPredefinedChoices(choices: Partial<Choice>[]): void;
+    _addPredefinedItems(items: Item[] | string[]): void;
+    _setChoiceOrItem(item: any): void;
+    _findAndSelectChoiceByValue(value: string): void;
+    _generatePlaceholderValue(): string | null;
+}
+export default Choices;
+//# sourceMappingURL=choices.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"choices.test.d.ts","sourceRoot":"","sources":["../../../../src/scripts/choices.test.ts"],"names":[],"mappings":""}

public/types/src/scripts/components/container.d.ts

@@ -0,0 +1,43 @@
+import { ClassNames } from '../interfaces/class-names';
+import { PositionOptionsType } from '../interfaces/position-options-type';
+import { PassedElementType } from '../interfaces/passed-element-type';
+export default class Container {
+    element: HTMLElement;
+    type: PassedElementType;
+    classNames: ClassNames;
+    position: PositionOptionsType;
+    isOpen: boolean;
+    isFlipped: boolean;
+    isFocussed: boolean;
+    isDisabled: boolean;
+    isLoading: boolean;
+    constructor({ element, type, classNames, position, }: {
+        element: HTMLElement;
+        type: PassedElementType;
+        classNames: ClassNames;
+        position: PositionOptionsType;
+    });
+    addEventListeners(): void;
+    removeEventListeners(): void;
+    /**
+     * Determine whether container should be flipped based on passed
+     * dropdown position
+     */
+    shouldFlip(dropdownPos: number): boolean;
+    setActiveDescendant(activeDescendantID: string): void;
+    removeActiveDescendant(): void;
+    open(dropdownPos: number): void;
+    close(): void;
+    focus(): void;
+    addFocusState(): void;
+    removeFocusState(): void;
+    enable(): void;
+    disable(): void;
+    wrap(element: HTMLSelectElement | HTMLInputElement | HTMLElement): void;
+    unwrap(element: HTMLElement): void;
+    addLoadingState(): void;
+    removeLoadingState(): void;
+    _onFocus(): void;
+    _onBlur(): void;
+}
+//# sourceMappingURL=container.d.ts.map

public/types/src/scripts/components/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/container.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,OAAO,EAAE,WAAW,CAAC;IAErB,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,mBAAmB,CAAC;IAE9B,MAAM,EAAE,OAAO,CAAC;IAEhB,SAAS,EAAE,OAAO,CAAC;IAEnB,UAAU,EAAE,OAAO,CAAC;IAEpB,UAAU,EAAE,OAAO,CAAC;IAEpB,SAAS,EAAE,OAAO,CAAC;gBAEP,EACV,OAAO,EACP,IAAI,EACJ,UAAU,EACV,QAAQ,GACT,EAAE;QACD,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;QACvB,QAAQ,EAAE,mBAAmB,CAAC;KAC/B;IAcD,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;OAGG;IACH,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO;IAkBxC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI;IAIrD,sBAAsB,IAAI,IAAI;IAI9B,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAW/B,KAAK,IAAI,IAAI;IAab,KAAK,IAAI,IAAI;IAMb,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;IAIxB,MAAM,IAAI,IAAI;IASd,OAAO,IAAI,IAAI;IASf,IAAI,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAIvE,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IASlC,eAAe,IAAI,IAAI;IAMvB,kBAAkB,IAAI,IAAI;IAM1B,QAAQ,IAAI,IAAI;IAIhB,OAAO,IAAI,IAAI;CAGhB"}

public/types/src/scripts/components/container.test.d.ts

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

public/types/src/scripts/components/container.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/container.test.ts"],"names":[],"mappings":""}

public/types/src/scripts/components/dropdown.d.ts

@@ -0,0 +1,27 @@
+import { ClassNames } from '../interfaces/class-names';
+import { PassedElementType } from '../interfaces/passed-element-type';
+export default class Dropdown {
+    element: HTMLElement;
+    type: PassedElementType;
+    classNames: ClassNames;
+    isActive: boolean;
+    constructor({ element, type, classNames, }: {
+        element: HTMLElement;
+        type: PassedElementType;
+        classNames: ClassNames;
+    });
+    /**
+     * Bottom position of dropdown in viewport coordinates
+     */
+    get distanceFromTopWindow(): number;
+    getChild(selector: string): HTMLElement | null;
+    /**
+     * Show dropdown to user by adding active state class
+     */
+    show(): this;
+    /**
+     * Hide dropdown from user
+     */
+    hide(): this;
+}
+//# sourceMappingURL=dropdown.d.ts.map

public/types/src/scripts/components/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC3B,OAAO,EAAE,WAAW,CAAC;IAErB,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;gBAEN,EACV,OAAO,EACP,IAAI,EACJ,UAAU,GACX,EAAE;QACD,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;KACxB;IAOD;;OAEG;IACH,IAAI,qBAAqB,IAAI,MAAM,CAElC;IAED,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI9C;;OAEG;IACH,IAAI,IAAI,IAAI;IAQZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAOb"}

public/types/src/scripts/components/dropdown.test.d.ts

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

public/types/src/scripts/components/dropdown.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/dropdown.test.ts"],"names":[],"mappings":""}

public/types/src/scripts/components/index.d.ts

@@ -0,0 +1,8 @@
+import Dropdown from './dropdown';
+import Container from './container';
+import Input from './input';
+import List from './list';
+import WrappedInput from './wrapped-input';
+import WrappedSelect from './wrapped-select';
+export { Dropdown, Container, Input, List, WrappedInput, WrappedSelect };
+//# sourceMappingURL=index.d.ts.map

public/types/src/scripts/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}

public/types/src/scripts/components/input.d.ts

@@ -0,0 +1,39 @@
+import { ClassNames } from '../interfaces/class-names';
+import { PassedElementType } from '../interfaces/passed-element-type';
+export default class Input {
+    element: HTMLInputElement;
+    type: PassedElementType;
+    classNames: ClassNames;
+    preventPaste: boolean;
+    isFocussed: boolean;
+    isDisabled: boolean;
+    constructor({ element, type, classNames, preventPaste, }: {
+        element: HTMLInputElement;
+        type: PassedElementType;
+        classNames: ClassNames;
+        preventPaste: boolean;
+    });
+    set placeholder(placeholder: string);
+    get value(): string;
+    set value(value: string);
+    get rawValue(): string;
+    addEventListeners(): void;
+    removeEventListeners(): void;
+    enable(): void;
+    disable(): void;
+    focus(): void;
+    blur(): void;
+    clear(setWidth?: boolean): this;
+    /**
+     * Set the correct input width based on placeholder
+     * value or input value
+     */
+    setWidth(): void;
+    setActiveDescendant(activeDescendantID: string): void;
+    removeActiveDescendant(): void;
+    _onInput(): void;
+    _onPaste(event: ClipboardEvent): void;
+    _onFocus(): void;
+    _onBlur(): void;
+}
+//# sourceMappingURL=input.d.ts.map

public/types/src/scripts/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,KAAK;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAE1B,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,YAAY,EAAE,OAAO,CAAC;IAEtB,UAAU,EAAE,OAAO,CAAC;IAEpB,UAAU,EAAE,OAAO,CAAC;gBAER,EACV,OAAO,EACP,IAAI,EACJ,UAAU,EACV,YAAY,GACb,EAAE;QACD,OAAO,EAAE,gBAAgB,CAAC;QAC1B,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;KACvB;IAcD,IAAI,WAAW,CAAC,WAAW,EAAE,MAAM,EAElC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAO5B,MAAM,IAAI,IAAI;IAKd,OAAO,IAAI,IAAI;IAKf,KAAK,IAAI,IAAI;IAMb,IAAI,IAAI,IAAI;IAMZ,KAAK,CAAC,QAAQ,UAAO,GAAG,IAAI;IAY5B;;;OAGG;IACH,QAAQ,IAAI,IAAI;IAOhB,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI;IAIrD,sBAAsB,IAAI,IAAI;IAI9B,QAAQ,IAAI,IAAI;IAMhB,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMrC,QAAQ,IAAI,IAAI;IAIhB,OAAO,IAAI,IAAI;CAGhB"}

public/types/src/scripts/components/input.test.d.ts

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

public/types/src/scripts/components/input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/input.test.ts"],"names":[],"mappings":""}

public/types/src/scripts/components/list.d.ts

@@ -0,0 +1,18 @@
+export default class List {
+    element: HTMLElement;
+    scrollPos: number;
+    height: number;
+    constructor({ element }: {
+        element: HTMLElement;
+    });
+    clear(): void;
+    append(node: Element | DocumentFragment): void;
+    getChild(selector: string): HTMLElement | null;
+    hasChildren(): boolean;
+    scrollToTop(): void;
+    scrollToChildElement(element: HTMLElement, direction: 1 | -1): void;
+    _scrollDown(scrollPos: number, strength: number, destination: number): void;
+    _scrollUp(scrollPos: number, strength: number, destination: number): void;
+    _animateScroll(destination: number, direction: number): void;
+}
+//# sourceMappingURL=list.d.ts.map

public/types/src/scripts/components/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/list.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,IAAI;IACvB,OAAO,EAAE,WAAW,CAAC;IAErB,SAAS,EAAE,MAAM,CAAC;IAElB,MAAM,EAAE,MAAM,CAAC;gBAEH,EAAE,OAAO,EAAE,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE;IAMjD,KAAK,IAAI,IAAI;IAIb,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,gBAAgB,GAAG,IAAI;IAI9C,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI9C,WAAW,IAAI,OAAO;IAItB,WAAW,IAAI,IAAI;IAInB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAwBnE,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAO3E,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAOzE,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;CAyB7D"}

public/types/src/scripts/components/list.test.d.ts

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

public/types/src/scripts/components/list.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/list.test.ts"],"names":[],"mappings":""}

public/types/src/scripts/components/wrapped-element.d.ts

@@ -0,0 +1,21 @@
+import { ClassNames } from '../interfaces/class-names';
+import { EventType } from '../interfaces/event-type';
+export default class WrappedElement {
+    element: HTMLInputElement | HTMLSelectElement;
+    classNames: ClassNames;
+    isDisabled: boolean;
+    constructor({ element, classNames }: {
+        element: any;
+        classNames: any;
+    });
+    get isActive(): boolean;
+    get dir(): string;
+    get value(): string;
+    set value(value: string);
+    conceal(): void;
+    reveal(): void;
+    enable(): void;
+    disable(): void;
+    triggerEvent(eventType: EventType, data?: object): void;
+}
+//# sourceMappingURL=wrapped-element.d.ts.map

public/types/src/scripts/components/wrapped-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapped-element.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,MAAM,CAAC,OAAO,OAAO,cAAc;IACjC,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAE9C,UAAU,EAAE,UAAU,CAAC;IAEvB,UAAU,EAAE,OAAO,CAAC;gBAER,EAAE,OAAO,EAAE,UAAU,EAAE;;;KAAA;IAcnC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,OAAO,IAAI,IAAI;IAkBf,MAAM,IAAI,IAAI;IAsBd,MAAM,IAAI,IAAI;IAMd,OAAO,IAAI,IAAI;IAMf,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI;CAGxD"}

public/types/src/scripts/components/wrapped-element.test.d.ts

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

public/types/src/scripts/components/wrapped-element.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapped-element.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-element.test.ts"],"names":[],"mappings":""}

public/types/src/scripts/components/wrapped-input.d.ts

@@ -0,0 +1,14 @@
+import { ClassNames } from '../interfaces/class-names';
+import WrappedElement from './wrapped-element';
+export default class WrappedInput extends WrappedElement {
+    element: HTMLInputElement;
+    delimiter: string;
+    constructor({ element, classNames, delimiter, }: {
+        element: HTMLInputElement;
+        classNames: ClassNames;
+        delimiter: string;
+    });
+    get value(): string;
+    set value(value: string);
+}
+//# sourceMappingURL=wrapped-input.d.ts.map

public/types/src/scripts/components/wrapped-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapped-input.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,cAAc;IACtD,OAAO,EAAE,gBAAgB,CAAC;IAE1B,SAAS,EAAE,MAAM,CAAC;gBAEN,EACV,OAAO,EACP,UAAU,EACV,SAAS,GACV,EAAE;QACD,OAAO,EAAE,gBAAgB,CAAC;QAC1B,UAAU,EAAE,UAAU,CAAC;QACvB,SAAS,EAAE,MAAM,CAAC;KACnB;IAKD,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;CACF"}

public/types/src/scripts/components/wrapped-input.test.d.ts

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

public/types/src/scripts/components/wrapped-input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapped-input.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-input.test.ts"],"names":[],"mappings":""}