downshift 7.3.2 → 7.3.4

package/preact/dist/downshift.umd.js

@@ -1836,14 +1836,19 @@
     });
     return elementIdsRef.current;
   }
-  function getItemIndex(index, item, items) {
-    if (index !== undefined) {
-      return index;
-    }
-    if (items.length === 0) {
-      return -1;
+  function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
+    var item, index;
+    if (itemProp === undefined) {
+      if (indexProp === undefined) {
+        throw new Error(errorMessage);
+      }
+      item = items[indexProp];
+      index = indexProp;
+    } else {
+      index = indexProp === undefined ? items.indexOf(itemProp) : indexProp;
+      item = itemProp;
     }
-    return items.indexOf(item);
+    return [item, index];
   }
   function itemToString(item) {
     return item ? String(item) : '';
@@ -2172,6 +2177,32 @@
     };
   }
 
+  /**
+   * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+   * In that case, selects the item and resets to defaults for open state and highlighted idex.
+   * @param {Object} props The useCombobox props.
+   * @param {number} highlightedIndex The index from the state.
+   * @param {boolean} inputValue Also return the input value for state.
+   * @returns The changes for the state.
+   */
+  function getChangesOnSelection(props, highlightedIndex, inputValue) {
+    var _props$items;
+    if (inputValue === void 0) {
+      inputValue = true;
+    }
+    var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
+    return _extends({
+      isOpen: false,
+      highlightedIndex: -1
+    }, shouldSelect && _extends({
+      selectedItem: props.items[highlightedIndex],
+      isOpen: getDefaultValue$1(props, 'isOpen'),
+      highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
+    }, inputValue && {
+      inputValue: props.itemToString(props.items[highlightedIndex])
+    }));
+  }
+
   function downshiftCommonReducer(state, action, stateChangeTypes) {
     var type = action.type,
       props = action.props;
@@ -2389,6 +2420,7 @@
 
   /* eslint-disable complexity */
   function downshiftSelectReducer(state, action) {
+    var _props$items;
     var type = action.type,
       props = action.props,
       altKey = action.altKey;
@@ -2431,12 +2463,7 @@
         break;
       case ToggleButtonKeyDownArrowUp:
         if (state.isOpen && altKey) {
-          changes = _extends({
-            isOpen: getDefaultValue$1(props, 'isOpen'),
-            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-          }, state.highlightedIndex >= 0 && {
-            selectedItem: props.items[state.highlightedIndex]
-          });
+          changes = getChangesOnSelection(props, state.highlightedIndex, false);
         } else {
           var _highlightedIndex2 = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
           changes = {
@@ -2448,12 +2475,7 @@
       // only triggered when menu is open.
       case ToggleButtonKeyDownEnter:
       case ToggleButtonKeyDownSpaceButton:
-        changes = _extends({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+        changes = getChangesOnSelection(props, state.highlightedIndex, false);
         break;
       case ToggleButtonKeyDownHome:
         changes = {
@@ -2487,7 +2509,7 @@
         changes = _extends({
           isOpen: false,
           highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && {
+        }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
           selectedItem: props.items[state.highlightedIndex]
         });
         break;
@@ -2859,8 +2881,9 @@
       var _latest$current = latest.current,
         latestState = _latest$current.state,
         latestProps = _latest$current.props;
-      var item = itemProp != null ? itemProp : items[indexProp];
-      var index = getItemIndex(indexProp, item, latestProps.items);
+      var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+        item = _getItemAndIndex[0],
+        index = _getItemAndIndex[1];
       var itemHandleMouseMove = function itemHandleMouseMove() {
         if (index === latestState.highlightedIndex) {
           return;
@@ -2878,18 +2901,14 @@
           index: index
         });
       };
-      var itemIndex = getItemIndex(index, item, latestProps.items);
-      if (itemIndex < 0) {
-        throw new Error('Pass either item or item index in getItemProps!');
-      }
       var itemProps = _extends((_extends4 = {
         disabled: disabled,
         role: 'option',
         'aria-selected': "" + (item === selectedItem),
-        id: elementIds.getItemId(itemIndex)
+        id: elementIds.getItemId(index)
       }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
         if (itemNode) {
-          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+          itemRefs.current[elementIds.getItemId(index)] = itemNode;
         }
       }), _extends4), rest);
       if (!disabled) {
@@ -2900,7 +2919,7 @@
       }
       itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
       return itemProps;
-    }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
+    }, [latest, selectedItem, elementIds, shouldScrollRef, dispatch]);
     return {
       // prop getters.
       getToggleButtonProps: getToggleButtonProps,
@@ -3072,6 +3091,7 @@
 
   /* eslint-disable complexity */
   function downshiftUseComboboxReducer(state, action) {
+    var _props$items;
     var type = action.type,
       props = action.props,
       altKey = action.altKey;
@@ -3100,13 +3120,7 @@
       case InputKeyDownArrowUp:
         if (state.isOpen) {
           if (altKey) {
-            changes = _extends({
-              isOpen: getDefaultValue$1(props, 'isOpen'),
-              highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-            }, state.highlightedIndex >= 0 && {
-              selectedItem: props.items[state.highlightedIndex],
-              inputValue: props.itemToString(props.items[state.highlightedIndex])
-            });
+            changes = getChangesOnSelection(props, state.highlightedIndex);
           } else {
             changes = {
               highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
@@ -3120,13 +3134,7 @@
         }
         break;
       case InputKeyDownEnter:
-        changes = _extends({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex],
-          inputValue: props.itemToString(props.items[state.highlightedIndex])
-        });
+        changes = getChangesOnSelection(props, state.highlightedIndex);
         break;
       case InputKeyDownEscape:
         changes = _extends({
@@ -3161,7 +3169,7 @@
         changes = _extends({
           isOpen: false,
           highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && action.selectItem && {
+        }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
           selectedItem: props.items[state.highlightedIndex],
           inputValue: props.itemToString(props.items[state.highlightedIndex])
         });
@@ -3429,8 +3437,8 @@
     var getItemProps = preact.useCallback(function (_temp3) {
       var _extends3, _ref4;
       var _ref3 = _temp3 === void 0 ? {} : _temp3,
-        item = _ref3.item,
-        index = _ref3.index,
+        itemProp = _ref3.item,
+        indexProp = _ref3.index,
         _ref3$refKey = _ref3.refKey,
         refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
         ref = _ref3.ref,
@@ -3443,10 +3451,8 @@
       var _latest$current = latest.current,
         latestProps = _latest$current.props,
         latestState = _latest$current.state;
-      var itemIndex = getItemIndex(index, item, latestProps.items);
-      if (itemIndex < 0) {
-        throw new Error('Pass either item or item index in getItemProps!');
-      }
+      var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+        index = _getItemAndIndex[1];
       var onSelectKey = 'onClick';
       var customClickHandler = onClick;
       var itemHandleMouseMove = function itemHandleMouseMove() {
@@ -3471,9 +3477,9 @@
       };
       return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
         if (itemNode) {
-          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+          itemRefs.current[elementIds.getItemId(index)] = itemNode;
         }
-      }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+      }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
         onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
       }, rest);
@@ -4013,14 +4019,13 @@
         ref = _ref3.ref,
         onClick = _ref3.onClick,
         onKeyDown = _ref3.onKeyDown,
-        selectedItem = _ref3.selectedItem,
-        index = _ref3.index,
+        selectedItemProp = _ref3.selectedItem,
+        indexProp = _ref3.index,
         rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
       var latestState = latest.current.state;
-      var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-      if (itemIndex < 0) {
-        throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
-      }
+      var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
+        index = _getItemAndIndex[1];
+      var isFocusable = index > -1 && index === latestState.activeIndex;
       var selectedItemHandleClick = function selectedItemHandleClick() {
         dispatch({
           type: SelectedItemClick,
@@ -4037,7 +4042,7 @@
         if (selectedItemNode) {
           selectedItemRefs.current.push(selectedItemNode);
         }
-      }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
+      }), _extends2.tabIndex = isFocusable ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
     }, [dispatch, latest, selectedItemKeyDownHandlers]);
     var getDropdownProps = preact.useCallback(function (_temp2, _temp3) {
       var _extends3;