downshift 6.1.9 → 6.1.10

package/dist/src/hooks/utils.d.ts

@@ -1,5 +1,5 @@
 export let useControlPropsValidator: typeof noop;
-export function useScrollIntoView({ highlightedIndex, isOpen, itemRefs, getItemNodeFromIndex, menuElement, scrollIntoView: scrollIntoViewProp, }: {
+export function useScrollIntoView({ highlightedIndex, isOpen, itemRefs, getItemNodeFromIndex, menuElement, scrollIntoView, }: {
     highlightedIndex: any;
     isOpen: any;
     itemRefs: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "6.1.9",
+  "version": "6.1.10",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",

package/preact/dist/downshift.cjs.js

@@ -188,7 +188,7 @@ function getA11yStatusMessage$1(_ref2) {
   }
 
   if (resultCount !== previousResultCount) {
-    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
+    return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
   }
 
   return '';
@@ -250,7 +250,7 @@ function getElementProps(element) {
 
 function requiredProp(fnName, propName) {
   // eslint-disable-next-line no-console
-  console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
+  console.error(`The property "${propName}" is required in "${fnName}"`);
 }
 
 const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
@@ -320,7 +320,7 @@ function normalizeArrowKey(event) {
   /* istanbul ignore next (ie) */
 
   if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
-    return "Arrow" + key;
+    return `Arrow${key}`;
   }
 
   return key;
@@ -444,14 +444,14 @@ let validateControlledUnchanged = noop;
 
 if (process.env.NODE_ENV !== 'production') {
   validateControlledUnchanged = (state, prevProps, nextProps) => {
-    const warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
+    const warningDescription = `This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props`;
     Object.keys(state).forEach(propKey => {
       if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
+        console.error(`downshift: A component has changed the controlled prop "${propKey}" to be uncontrolled. ${warningDescription}`);
       } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
+        console.error(`downshift: A component has changed the uncontrolled prop "${propKey}" to be controlled. ${warningDescription}`);
       }
     });
   };
@@ -560,12 +560,12 @@ const Downshift = /*#__PURE__*/(() => {
 
       super(_props);
       _this = this;
-      this.id = this.props.id || "downshift-" + generateId();
-      this.menuId = this.props.menuId || this.id + "-menu";
-      this.labelId = this.props.labelId || this.id + "-label";
-      this.inputId = this.props.inputId || this.id + "-input";
+      this.id = this.props.id || `downshift-${generateId()}`;
+      this.menuId = this.props.menuId || `${this.id}-menu`;
+      this.labelId = this.props.labelId || `${this.id}-label`;
+      this.inputId = this.props.inputId || `${this.id}-input`;
 
-      this.getItemId = this.props.getItemId || (index => this.id + "-item-" + index);
+      this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
 
       this.input = null;
       this.items = [];
@@ -1644,7 +1644,7 @@ function validateGetMenuPropsCalledCorrectly(node, _ref3) {
 
   if (!node) {
     // eslint-disable-next-line no-console
-    console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
+    console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
   }
 }
 
@@ -1660,12 +1660,12 @@ function validateGetRootPropsCalledCorrectly(element, _ref4) {
     console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
   } else if (!isComposite && refKeySpecified) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
+    console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
   }
 
   if (!reactIs.isForwardRef(element) && !getElementProps(element)[refKey]) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
+    console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
   }
 }
 
@@ -1703,7 +1703,7 @@ function invokeOnChangeHandler(key, action, state, newState) {
     props,
     type
   } = action;
-  const handler = "on" + capitalizeString(key) + "Change";
+  const handler = `on${capitalizeString(key)}Change`;
 
   if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
     props[handler]({
@@ -1737,7 +1737,7 @@ function getA11ySelectionMessage(selectionParameters) {
     selectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+  return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
 }
 /**
  * Debounced call for updating the a11y message.
@@ -1752,7 +1752,7 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window
 
 function useElementIds(_ref) {
   let {
-    id = "downshift-" + generateId(),
+    id = `downshift-${generateId()}`,
     labelId,
     menuId,
     getItemId,
@@ -1760,11 +1760,11 @@ function useElementIds(_ref) {
     inputId
   } = _ref;
   const elementIdsRef = preact.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || (index => id + "-item-" + index),
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
+    labelId: labelId || `${id}-label`,
+    menuId: menuId || `${id}-menu`,
+    getItemId: getItemId || (index => `${id}-item-${index}`),
+    toggleButtonId: toggleButtonId || `${id}-toggle-button`,
+    inputId: inputId || `${id}-input`
   });
   return elementIdsRef.current;
 }
@@ -1790,7 +1790,7 @@ function isAcceptedCharacterKey(key) {
 }
 
 function capitalizeString(string) {
-  return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
+  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
 }
 
 function useLatestRef(val) {
@@ -1875,7 +1875,7 @@ function getDefaultValue$1(props, propKey, defaultStateValues) {
     defaultStateValues = dropdownDefaultStateValues;
   }
 
-  const defaultValue = props["default" + capitalizeString(propKey)];
+  const defaultValue = props[`default${capitalizeString(propKey)}`];
 
   if (defaultValue !== undefined) {
     return defaultValue;
@@ -1895,7 +1895,7 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
     return value;
   }
 
-  const initialValue = props["initial" + capitalizeString(propKey)];
+  const initialValue = props[`initial${capitalizeString(propKey)}`];
 
   if (initialValue !== undefined) {
     return initialValue;
@@ -2049,7 +2049,7 @@ if (process.env.NODE_ENV !== 'production') {
         if (isInitialMountRef.current) {
           if (!Object.keys(propCallInfo).length) {
             // eslint-disable-next-line no-console
-            console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
+            console.error(`downshift: You forgot to call the ${propKey} getter function on your component / element.`);
             return;
           }
         }
@@ -2062,7 +2062,7 @@ if (process.env.NODE_ENV !== 'production') {
 
         if ((!elementRef || !elementRef.current) && !suppressRefError) {
           // eslint-disable-next-line no-console
-          console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
+          console.error(`downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`);
         }
       });
       isInitialMountRef.current = false;
@@ -2383,7 +2383,7 @@ function downshiftSelectReducer(state, action) {
     case ToggleButtonKeyDownCharacter:
       {
         const lowercasedKey = action.key;
-        const inputValue = "" + state.inputValue + lowercasedKey;
+        const inputValue = `${state.inputValue}${lowercasedKey}`;
         const itemIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
@@ -2454,7 +2454,7 @@ function downshiftSelectReducer(state, action) {
     case MenuKeyDownCharacter:
       {
         const lowercasedKey = action.key;
-        const inputValue = "" + state.inputValue + lowercasedKey;
+        const inputValue = `${state.inputValue}${lowercasedKey}`;
         const highlightedIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: state.highlightedIndex,
@@ -2893,7 +2893,7 @@ function useSelect(userProps) {
       id: elementIds.toggleButtonId,
       'aria-haspopup': 'listbox',
       'aria-expanded': latest.current.state.isOpen,
-      'aria-labelledby': elementIds.labelId + " " + elementIds.toggleButtonId,
+      'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
       ...rest
     };
 
@@ -2947,7 +2947,7 @@ function useSelect(userProps) {
 
     const itemProps = {
       role: 'option',
-      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
       id: elementIds.getItemId(itemIndex),
       [refKey]: handleRefs(ref, itemNode => {
         if (itemNode) {
@@ -3420,10 +3420,11 @@ function useCombobox(userProps) {
       });
     },
 
-    Escape() {
+    Escape(event) {
       const latestState = latest.current.state;
 
       if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
+        event.preventDefault();
         dispatch({
           type: InputKeyDownEscape
         });
@@ -3532,7 +3533,7 @@ function useCombobox(userProps) {
         }
       }),
       role: 'option',
-      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
       id: elementIds.getItemId(itemIndex),
       ...(!rest.disabled && {
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
@@ -3818,7 +3819,7 @@ function getA11yRemovalMessage(selectionParameters) {
     removedSelectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return itemToStringLocal(removedSelectedItem) + " has been removed.";
+  return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
 }
 
 const propTypes = {

package/preact/dist/downshift.esm.js

@@ -179,7 +179,7 @@ function getA11yStatusMessage$1(_ref2) {
   }
 
   if (resultCount !== previousResultCount) {
-    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
+    return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
   }
 
   return '';
@@ -241,7 +241,7 @@ function getElementProps(element) {
 
 function requiredProp(fnName, propName) {
   // eslint-disable-next-line no-console
-  console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
+  console.error(`The property "${propName}" is required in "${fnName}"`);
 }
 
 const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
@@ -311,7 +311,7 @@ function normalizeArrowKey(event) {
   /* istanbul ignore next (ie) */
 
   if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
-    return "Arrow" + key;
+    return `Arrow${key}`;
   }
 
   return key;
@@ -435,14 +435,14 @@ let validateControlledUnchanged = noop;
 
 if (process.env.NODE_ENV !== 'production') {
   validateControlledUnchanged = (state, prevProps, nextProps) => {
-    const warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
+    const warningDescription = `This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props`;
     Object.keys(state).forEach(propKey => {
       if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
+        console.error(`downshift: A component has changed the controlled prop "${propKey}" to be uncontrolled. ${warningDescription}`);
       } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
+        console.error(`downshift: A component has changed the uncontrolled prop "${propKey}" to be controlled. ${warningDescription}`);
       }
     });
   };
@@ -551,12 +551,12 @@ const Downshift = /*#__PURE__*/(() => {
 
       super(_props);
       _this = this;
-      this.id = this.props.id || "downshift-" + generateId();
-      this.menuId = this.props.menuId || this.id + "-menu";
-      this.labelId = this.props.labelId || this.id + "-label";
-      this.inputId = this.props.inputId || this.id + "-input";
+      this.id = this.props.id || `downshift-${generateId()}`;
+      this.menuId = this.props.menuId || `${this.id}-menu`;
+      this.labelId = this.props.labelId || `${this.id}-label`;
+      this.inputId = this.props.inputId || `${this.id}-input`;
 
-      this.getItemId = this.props.getItemId || (index => this.id + "-item-" + index);
+      this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
 
       this.input = null;
       this.items = [];
@@ -1635,7 +1635,7 @@ function validateGetMenuPropsCalledCorrectly(node, _ref3) {
 
   if (!node) {
     // eslint-disable-next-line no-console
-    console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
+    console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
   }
 }
 
@@ -1651,12 +1651,12 @@ function validateGetRootPropsCalledCorrectly(element, _ref4) {
     console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
   } else if (!isComposite && refKeySpecified) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
+    console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
   }
 
   if (!isForwardRef(element) && !getElementProps(element)[refKey]) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
+    console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
   }
 }
 
@@ -1694,7 +1694,7 @@ function invokeOnChangeHandler(key, action, state, newState) {
     props,
     type
   } = action;
-  const handler = "on" + capitalizeString(key) + "Change";
+  const handler = `on${capitalizeString(key)}Change`;
 
   if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
     props[handler]({
@@ -1728,7 +1728,7 @@ function getA11ySelectionMessage(selectionParameters) {
     selectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+  return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
 }
 /**
  * Debounced call for updating the a11y message.
@@ -1743,7 +1743,7 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window
 
 function useElementIds(_ref) {
   let {
-    id = "downshift-" + generateId(),
+    id = `downshift-${generateId()}`,
     labelId,
     menuId,
     getItemId,
@@ -1751,11 +1751,11 @@ function useElementIds(_ref) {
     inputId
   } = _ref;
   const elementIdsRef = useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || (index => id + "-item-" + index),
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
+    labelId: labelId || `${id}-label`,
+    menuId: menuId || `${id}-menu`,
+    getItemId: getItemId || (index => `${id}-item-${index}`),
+    toggleButtonId: toggleButtonId || `${id}-toggle-button`,
+    inputId: inputId || `${id}-input`
   });
   return elementIdsRef.current;
 }
@@ -1781,7 +1781,7 @@ function isAcceptedCharacterKey(key) {
 }
 
 function capitalizeString(string) {
-  return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
+  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
 }
 
 function useLatestRef(val) {
@@ -1866,7 +1866,7 @@ function getDefaultValue$1(props, propKey, defaultStateValues) {
     defaultStateValues = dropdownDefaultStateValues;
   }
 
-  const defaultValue = props["default" + capitalizeString(propKey)];
+  const defaultValue = props[`default${capitalizeString(propKey)}`];
 
   if (defaultValue !== undefined) {
     return defaultValue;
@@ -1886,7 +1886,7 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
     return value;
   }
 
-  const initialValue = props["initial" + capitalizeString(propKey)];
+  const initialValue = props[`initial${capitalizeString(propKey)}`];
 
   if (initialValue !== undefined) {
     return initialValue;
@@ -2040,7 +2040,7 @@ if (process.env.NODE_ENV !== 'production') {
         if (isInitialMountRef.current) {
           if (!Object.keys(propCallInfo).length) {
             // eslint-disable-next-line no-console
-            console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
+            console.error(`downshift: You forgot to call the ${propKey} getter function on your component / element.`);
             return;
           }
         }
@@ -2053,7 +2053,7 @@ if (process.env.NODE_ENV !== 'production') {
 
         if ((!elementRef || !elementRef.current) && !suppressRefError) {
           // eslint-disable-next-line no-console
-          console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
+          console.error(`downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`);
         }
       });
       isInitialMountRef.current = false;
@@ -2374,7 +2374,7 @@ function downshiftSelectReducer(state, action) {
     case ToggleButtonKeyDownCharacter:
       {
         const lowercasedKey = action.key;
-        const inputValue = "" + state.inputValue + lowercasedKey;
+        const inputValue = `${state.inputValue}${lowercasedKey}`;
         const itemIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
@@ -2445,7 +2445,7 @@ function downshiftSelectReducer(state, action) {
     case MenuKeyDownCharacter:
       {
         const lowercasedKey = action.key;
-        const inputValue = "" + state.inputValue + lowercasedKey;
+        const inputValue = `${state.inputValue}${lowercasedKey}`;
         const highlightedIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: state.highlightedIndex,
@@ -2884,7 +2884,7 @@ function useSelect(userProps) {
       id: elementIds.toggleButtonId,
       'aria-haspopup': 'listbox',
       'aria-expanded': latest.current.state.isOpen,
-      'aria-labelledby': elementIds.labelId + " " + elementIds.toggleButtonId,
+      'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
       ...rest
     };
 
@@ -2938,7 +2938,7 @@ function useSelect(userProps) {
 
     const itemProps = {
       role: 'option',
-      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
       id: elementIds.getItemId(itemIndex),
       [refKey]: handleRefs(ref, itemNode => {
         if (itemNode) {
@@ -3411,10 +3411,11 @@ function useCombobox(userProps) {
       });
     },
 
-    Escape() {
+    Escape(event) {
       const latestState = latest.current.state;
 
       if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
+        event.preventDefault();
         dispatch({
           type: InputKeyDownEscape
         });
@@ -3523,7 +3524,7 @@ function useCombobox(userProps) {
         }
       }),
       role: 'option',
-      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
       id: elementIds.getItemId(itemIndex),
       ...(!rest.disabled && {
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
@@ -3809,7 +3810,7 @@ function getA11yRemovalMessage(selectionParameters) {
     removedSelectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return itemToStringLocal(removedSelectedItem) + " has been removed.";
+  return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
 }
 
 const propTypes = {