downshift 6.1.9 → 6.1.10

package/dist/downshift.native.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 '';
@@ -244,7 +244,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'];
@@ -314,7 +314,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;
@@ -438,14 +438,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}`);
       }
     });
   };
@@ -554,12 +554,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 = [];
@@ -1615,7 +1615,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.`);
   }
 }
 
@@ -1631,12 +1631,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.`);
   }
 }
 
@@ -1674,7 +1674,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]({
@@ -1708,7 +1708,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.
@@ -1723,7 +1723,7 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window
 
 function useElementIds(_ref) {
   let {
-    id = "downshift-" + generateId(),
+    id = `downshift-${generateId()}`,
     labelId,
     menuId,
     getItemId,
@@ -1731,11 +1731,11 @@ function useElementIds(_ref) {
     inputId
   } = _ref;
   const elementIdsRef = react.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;
 }
@@ -1761,7 +1761,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) {
@@ -1846,7 +1846,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;
@@ -1866,7 +1866,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;
@@ -2020,7 +2020,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;
           }
         }
@@ -2033,7 +2033,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;
@@ -2354,7 +2354,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,
@@ -2425,7 +2425,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,
@@ -2864,7 +2864,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
     };
 
@@ -2918,7 +2918,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) {
@@ -3391,10 +3391,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
         });
@@ -3505,7 +3506,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),
@@ -3806,7 +3807,7 @@ function getA11yRemovalMessage(selectionParameters) {
     removedSelectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return itemToStringLocal(removedSelectedItem) + " has been removed.";
+  return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
 }
 
 const propTypes = {

package/dist/downshift.umd.js

@@ -1440,7 +1440,7 @@
     }
 
     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 '';
@@ -1496,7 +1496,7 @@
 
   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'];
@@ -1566,7 +1566,7 @@
     /* istanbul ignore next (ie) */
 
     if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
-      return "Arrow" + key;
+      return `Arrow${key}`;
     }
 
     return key;
@@ -1690,14 +1690,14 @@
 
   {
     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}`);
         }
       });
     };
@@ -1806,12 +1806,12 @@
 
         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 = [];
@@ -2926,7 +2926,7 @@
 
     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.`);
     }
   }
 
@@ -2942,12 +2942,12 @@
       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.exports.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.`);
     }
   }
 
@@ -2985,7 +2985,7 @@
       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]({
@@ -3019,7 +3019,7 @@
       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.
@@ -3034,7 +3034,7 @@
 
   function useElementIds(_ref) {
     let {
-      id = "downshift-" + generateId(),
+      id = `downshift-${generateId()}`,
       labelId,
       menuId,
       getItemId,
@@ -3042,11 +3042,11 @@
       inputId
     } = _ref;
     const elementIdsRef = react.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;
   }
@@ -3072,7 +3072,7 @@
   }
 
   function capitalizeString(string) {
-    return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
+    return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
   }
 
   function useLatestRef(val) {
@@ -3157,7 +3157,7 @@
       defaultStateValues = dropdownDefaultStateValues;
     }
 
-    const defaultValue = props["default" + capitalizeString(propKey)];
+    const defaultValue = props[`default${capitalizeString(propKey)}`];
 
     if (defaultValue !== undefined) {
       return defaultValue;
@@ -3177,7 +3177,7 @@
       return value;
     }
 
-    const initialValue = props["initial" + capitalizeString(propKey)];
+    const initialValue = props[`initial${capitalizeString(propKey)}`];
 
     if (initialValue !== undefined) {
       return initialValue;
@@ -3331,7 +3331,7 @@
           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;
             }
           }
@@ -3344,7 +3344,7 @@
 
           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;
@@ -3691,7 +3691,7 @@
       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,
@@ -3762,7 +3762,7 @@
       case MenuKeyDownCharacter:
         {
           const lowercasedKey = action.key;
-          const inputValue = "" + state.inputValue + lowercasedKey;
+          const inputValue = `${state.inputValue}${lowercasedKey}`;
           const highlightedIndex = getItemIndexByCharacterKey({
             keysSoFar: inputValue,
             highlightedIndex: state.highlightedIndex,
@@ -4201,7 +4201,7 @@
         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
       };
 
@@ -4255,7 +4255,7 @@
 
       const itemProps = {
         role: 'option',
-        'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+        'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
         id: elementIds.getItemId(itemIndex),
         [refKey]: handleRefs(ref, itemNode => {
           if (itemNode) {
@@ -4728,10 +4728,11 @@
         });
       },
 
-      Escape() {
+      Escape(event) {
         const latestState = latest.current.state;
 
         if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
+          event.preventDefault();
           dispatch({
             type: InputKeyDownEscape
           });
@@ -4840,7 +4841,7 @@
           }
         }),
         role: 'option',
-        'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+        'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
         id: elementIds.getItemId(itemIndex),
         ...(!rest.disabled && {
           onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
@@ -5126,7 +5127,7 @@
       removedSelectedItem,
       itemToString: itemToStringLocal
     } = selectionParameters;
-    return itemToStringLocal(removedSelectedItem) + " has been removed.";
+    return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
   }
 
   const propTypes = {