Update polyfill list (#765)

* Update polyfill list

* Update eslintrc.json

* Add keydown methods to types

* Resolve type issue

.eslintrc.json

@@ -86,10 +86,12 @@
       "Array.prototype.includes",
       "Symbol",
       "Symbol.iterator",
+      "DOMTokenList",
       "Object.assign",
       "CustomEvent",
       "Element.prototype.classList",
-      "Element.prototype.closest"
+      "Element.prototype.closest",
+      "Element.prototype.dataset"
     ]
   }
 }

README.md

@@ -1044,7 +1044,7 @@ I suggest including a polyfill from the very good [polyfill.io](https://polyfill
 **Polyfill example used for the demo:**
 
 ```html
-<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest"></script>
+<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes"></script>
 ```
 
 **Features used in Choices:**
@@ -1055,10 +1055,12 @@ Array.prototype.find
 Array.prototype.includes
 Symbol
 Symbol.iterator
+DOMTokenList
 Object.assign
 CustomEvent
 Element.prototype.classList
 Element.prototype.closest
+Element.prototype.dataset
 ```
 
 ## Development

public/index.html

@@ -47,7 +47,7 @@
     <!-- End ignore these -->
 
     <!-- Optional includes -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2CArray.prototype.includes%2Cfetch%2CCustomEvent%2CElement.prototype.closest"></script>
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes"></script>
     <!-- End optional includes -->
 
     <!-- Choices includes -->

src/scripts/choices.js

@@ -1321,7 +1321,7 @@ class Choices {
    * @param {KeyboardEvent} event
    */
   _onKeyDown(event) {
-    const { target, keyCode, ctrlKey, metaKey } = event;
+    const { keyCode } = event;
     const { activeItems } = this._store;
     const hasFocusedInput = this.input.isFocussed;
     const hasActiveDropdown = this.dropdown.isActive;
@@ -1339,7 +1339,6 @@ class Choices {
       PAGE_UP_KEY,
       PAGE_DOWN_KEY,
     } = KEY_CODES;
-    const hasCtrlDownKeyPressed = ctrlKey || metaKey;
 
     // If a user is typing and the dropdown is not active
     if (!this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
@@ -1363,14 +1362,10 @@ class Choices {
     if (keyDownActions[keyCode]) {
       keyDownActions[keyCode]({
         event,
-        target,
-        keyCode,
-        metaKey,
         activeItems,
         hasFocusedInput,
         hasActiveDropdown,
         hasItems,
-        hasCtrlDownKeyPressed,
       });
     }
   }
@@ -1409,7 +1404,9 @@ class Choices {
     this._canSearch = this.config.searchEnabled;
   }
 
-  _onAKey({ hasItems, hasCtrlDownKeyPressed }) {
+  _onAKey({ event, hasItems }) {
+    const { ctrlKey, metaKey } = event;
+    const hasCtrlDownKeyPressed = ctrlKey || metaKey;
     // If CTRL + A or CMD + A have been pressed and there are items to select
     if (hasCtrlDownKeyPressed && hasItems) {
       this._canSearch = false;
@@ -1425,7 +1422,8 @@ class Choices {
     }
   }
 
-  _onEnterKey({ event, target, activeItems, hasActiveDropdown }) {
+  _onEnterKey({ event, activeItems, hasActiveDropdown }) {
+    const { target } = event;
     const { ENTER_KEY: enterKey } = KEY_CODES;
     const targetWasButton = target.hasAttribute('data-button');
 
@@ -1473,7 +1471,8 @@ class Choices {
     }
   }
 
-  _onDirectionKey({ event, hasActiveDropdown, keyCode, metaKey }) {
+  _onDirectionKey({ event, hasActiveDropdown }) {
+    const { keyCode, metaKey } = event;
     const {
       DOWN_KEY: downKey,
       PAGE_UP_KEY: pageUpKey,
@@ -1536,7 +1535,8 @@ class Choices {
     }
   }
 
-  _onDeleteKey({ event, target, hasFocusedInput, activeItems }) {
+  _onDeleteKey({ event, hasFocusedInput, activeItems }) {
+    const { target } = event;
     // If backspace or delete key is pressed and the input has no value
     if (hasFocusedInput && !target.value && !this._isSelectOneElement) {
       this._handleBackspace(activeItems);

types/index.d.ts

@@ -780,6 +780,14 @@ declare namespace Choices {
       | ((template: Choices.Types.strToEl) => Partial<Choices.Templates>)
       | null;
   }
+
+  interface KeyDownAction {
+    event: KeyboardEvent;
+    activeItems: Item[];
+    hasFocusedInput: boolean;
+    hasActiveDropdown: boolean;
+    hasItems: boolean;
+  }
 }
 
 // Exporting default class
@@ -1024,4 +1032,10 @@ export default class Choices {
    * **Input types affected:** text, select-one, select-multiple
    */
   disable(): this;
+
+  _onEnterKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
+  _onAKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
+  _onEscapeKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
+  _onDirectionKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
+  _onDeleteKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
 }