@khanacademy/wonder-blocks-dropdown 5.5.1 → 5.5.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.5.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-search-field@2.2.27
+
+## 5.5.2
+
+### Patch Changes
+
+-   1e097c20: Change useListbox logic to allow passing a handler for when the selected value changes (instead of relying on useEffect in the caller)
+
 ## 5.5.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -2398,6 +2398,7 @@ function useListbox({
   disabled,
   disableSpaceSelection,
   id,
+  onChange,
   selectionType = "single",
   value
 }) {
@@ -2415,7 +2416,7 @@ function useListbox({
     setFocusedIndex(index);
   };
   const focusPreviousItem = React.useCallback(() => {
-    if (focusedIndex === 0) {
+    if (focusedIndex <= 0) {
       focusItem(options.length - 1);
     } else {
       focusItem(focusedIndex - 1);
@@ -2435,13 +2436,19 @@ function useListbox({
     }
     if (selectionType === "single") {
       setSelected(optionItem.props.value);
+      if (onChange) {
+        onChange(optionItem.props.value);
+      }
     } else {
       setSelected(prevSelected => {
         const newSelectedValue = updateMultipleSelection(prevSelected, optionItem.props.value);
+        if (onChange) {
+          onChange(newSelectedValue);
+        }
         return newSelectedValue;
       });
     }
-  }, [options, selectionType]);
+  }, [onChange, options, selectionType]);
   const handleKeyDown = React.useCallback(event => {
     const {
       key
@@ -2860,6 +2867,7 @@ function Combobox({
     children: currentOptions,
     disabled,
     id: uniqueId,
+    onChange: value => handleChange(value),
     value: valueState,
     disableSpaceSelection: true,
     selectionType
@@ -2868,7 +2876,15 @@ function Combobox({
   const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
   const initialValue = typeof value === "string" ? labelFromSelected : "";
   const [inputValue, setInputValue] = React.useState(initialValue);
-  const updateOpenState = React.useCallback(newState => {
+  const {
+    focusedMultiSelectIndex,
+    handleKeyDown: handleMultipleSelectionKeyDown
+  } = useMultipleSelection({
+    inputValue,
+    selected,
+    setSelected
+  });
+  const updateOpenState = React.useCallback((newState, selectedLabel = labelFromSelected) => {
     if (disabled || newState === openState) {
       return;
     }
@@ -2877,53 +2893,39 @@ function Combobox({
     }
     if (!newState) {
       setFocusedIndex(-1);
-      const isSingleSelection = selectionType === "single" && typeof selected === "string";
-      if (selectionType === "multiple" || isSingleSelection && (selected == null ? void 0 : selected.length) === 0) {
+      if (selectionType === "multiple") {
         setInputValue("");
-      }
-      if (isSingleSelection && (selected == null ? void 0 : selected.length) > 0) {
-        setInputValue(labelFromSelected);
+      } else {
+        setInputValue(selectedLabel != null ? selectedLabel : "");
       }
       setCurrentOptions(children);
     }
     onToggle == null ? void 0 : onToggle(newState);
-  }, [children, disabled, isControlled, labelFromSelected, onToggle, openState, selected, selectionType, setFocusedIndex]);
-  React.useEffect(() => {
-    if (openState) {
-      var _comboboxRef$current;
-      (_comboboxRef$current = comboboxRef.current) == null ? void 0 : _comboboxRef$current.focus();
+  }, [children, disabled, isControlled, labelFromSelected, onToggle, openState, selectionType, setFocusedIndex]);
+  const handleChange = React.useCallback(value => {
+    if (value !== valueState) {
+      setSelectedValue(value);
+      onChange == null ? void 0 : onChange(value);
     }
-    if (selected === valueState) {
-      return;
-    }
-    if (selectionType === "single" && typeof selected === "string") {
+    if (selectionType === "single" && typeof value === "string") {
       var _renderList$find2;
-      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === selected)) == null ? void 0 : _renderList$find2.props;
+      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? void 0 : _renderList$find2.props;
       const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
-      setInputValue(labelFromSelected);
-      setSelectedValue(selected);
-      onChange == null ? void 0 : onChange(selected);
-      updateOpenState(false);
-    } else if (Array.isArray(selected)) {
+      updateOpenState(false, labelFromSelected);
+    } else if (Array.isArray(value)) {
       setInputValue("");
-      setSelectedValue(selected);
-      onChange == null ? void 0 : onChange(selected);
       setCurrentOptions(children);
     }
-  }, [renderList, onChange, openState, selected, selectionType, updateOpenState, value, valueState, children]);
-  const {
-    focusedMultiSelectIndex,
-    handleKeyDown: handleMultipleSelectionKeyDown
-  } = useMultipleSelection({
-    inputValue,
-    selected,
-    setSelected
-  });
+  }, [children, onChange, renderList, selectionType, updateOpenState, valueState]);
   const focusOnFilteredItem = React.useCallback((filtered, value) => {
     const lowercasedSearchText = value.normalize("NFC").toLowerCase();
     const itemIndex = filtered.findIndex(item => getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));
     setFocusedIndex(itemIndex);
   }, [setFocusedIndex]);
+  const filterItems = React.useCallback(value => {
+    const lowercasedSearchText = value.normalize("NFC").toLowerCase();
+    return children.filter(item => getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText) > -1);
+  }, [children]);
   const onKeyDown = event => {
     const {
       key
@@ -2942,24 +2944,29 @@ function Combobox({
     }
     handleKeyDown(event);
   };
-  const selectedLabels = React.useMemo(() => {
-    return children.filter(item => selected == null ? void 0 : selected.includes(item.props.value)).map(item => getLabel(item.props));
-  }, [children, selected]);
   const handleOnRemove = React.useCallback(value => {
     const selectedValues = selected;
     const newValues = selectedValues.filter(selectedValue => selectedValue !== value);
     setSelected(newValues);
   }, [selected, setSelected]);
+  React.useEffect(() => {
+    if (openState) {
+      var _comboboxRef$current;
+      (_comboboxRef$current = comboboxRef.current) == null ? void 0 : _comboboxRef$current.focus();
+    }
+  }, [openState]);
+  const selectedLabels = React.useMemo(() => {
+    if (Array.isArray(selected)) {
+      return selected.map(value => {
+        const item = children.find(item => item.props.value === value);
+        return item ? getLabel(item == null ? void 0 : item.props) : "";
+      });
+    }
+    return [labelFromSelected];
+  }, [children, labelFromSelected, selected]);
   const pillIdPrefix = id ? `${id}-pill-` : ids.get("pill");
   const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null ? void 0 : (_renderList$focusedIn2 = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn2.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
-  const filterItems = React.useCallback(value => {
-    return children.filter(item => {
-      const lowerCasedLabel = getLabel(item.props).normalize("NFC").trim().toLowerCase();
-      const lowercasedSearchText = value.normalize("NFC").toLowerCase();
-      return lowerCasedLabel.indexOf(lowercasedSearchText) > -1;
-    });
-  }, [children]);
   return React.createElement(React.Fragment, null, React.createElement(View, {
     onClick: () => {
       updateOpenState(true);

package/dist/hooks/use-listbox.d.ts

@@ -28,6 +28,10 @@ type Props = {
      * The type of selection that the listbox supports.
      */
     selectionType: "single" | "multiple";
+    /**
+     * Callback that is called when the value of the listbox changes.
+     */
+    onChange?: (value: MaybeValueOrValues) => void;
 };
 /**
  * Hook for managing the state of a listbox.
@@ -38,7 +42,7 @@ type Props = {
  * - Keyboard navigation.
  * - Selection management.
  */
-export declare function useListbox({ children: options, disabled, disableSpaceSelection, id, selectionType, value, }: Props): {
+export declare function useListbox({ children: options, disabled, disableSpaceSelection, id, onChange, selectionType, value, }: Props): {
     isListboxFocused: boolean;
     focusedIndex: number;
     setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;

package/dist/index.js

@@ -2434,6 +2434,7 @@ function useListbox({
   disabled,
   disableSpaceSelection,
   id,
+  onChange,
   selectionType = "single",
   value
 }) {
@@ -2451,7 +2452,7 @@ function useListbox({
     setFocusedIndex(index);
   };
   const focusPreviousItem = React__namespace.useCallback(() => {
-    if (focusedIndex === 0) {
+    if (focusedIndex <= 0) {
       focusItem(options.length - 1);
     } else {
       focusItem(focusedIndex - 1);
@@ -2471,13 +2472,19 @@ function useListbox({
     }
     if (selectionType === "single") {
       setSelected(optionItem.props.value);
+      if (onChange) {
+        onChange(optionItem.props.value);
+      }
     } else {
       setSelected(prevSelected => {
         const newSelectedValue = updateMultipleSelection(prevSelected, optionItem.props.value);
+        if (onChange) {
+          onChange(newSelectedValue);
+        }
         return newSelectedValue;
       });
     }
-  }, [options, selectionType]);
+  }, [onChange, options, selectionType]);
   const handleKeyDown = React__namespace.useCallback(event => {
     const {
       key
@@ -2896,6 +2903,7 @@ function Combobox({
     children: currentOptions,
     disabled,
     id: uniqueId,
+    onChange: value => handleChange(value),
     value: valueState,
     disableSpaceSelection: true,
     selectionType
@@ -2904,7 +2912,15 @@ function Combobox({
   const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
   const initialValue = typeof value === "string" ? labelFromSelected : "";
   const [inputValue, setInputValue] = React__namespace.useState(initialValue);
-  const updateOpenState = React__namespace.useCallback(newState => {
+  const {
+    focusedMultiSelectIndex,
+    handleKeyDown: handleMultipleSelectionKeyDown
+  } = useMultipleSelection({
+    inputValue,
+    selected,
+    setSelected
+  });
+  const updateOpenState = React__namespace.useCallback((newState, selectedLabel = labelFromSelected) => {
     if (disabled || newState === openState) {
       return;
     }
@@ -2913,53 +2929,39 @@ function Combobox({
     }
     if (!newState) {
       setFocusedIndex(-1);
-      const isSingleSelection = selectionType === "single" && typeof selected === "string";
-      if (selectionType === "multiple" || isSingleSelection && (selected == null ? void 0 : selected.length) === 0) {
+      if (selectionType === "multiple") {
         setInputValue("");
-      }
-      if (isSingleSelection && (selected == null ? void 0 : selected.length) > 0) {
-        setInputValue(labelFromSelected);
+      } else {
+        setInputValue(selectedLabel != null ? selectedLabel : "");
       }
       setCurrentOptions(children);
     }
     onToggle == null ? void 0 : onToggle(newState);
-  }, [children, disabled, isControlled, labelFromSelected, onToggle, openState, selected, selectionType, setFocusedIndex]);
-  React__namespace.useEffect(() => {
-    if (openState) {
-      var _comboboxRef$current;
-      (_comboboxRef$current = comboboxRef.current) == null ? void 0 : _comboboxRef$current.focus();
+  }, [children, disabled, isControlled, labelFromSelected, onToggle, openState, selectionType, setFocusedIndex]);
+  const handleChange = React__namespace.useCallback(value => {
+    if (value !== valueState) {
+      setSelectedValue(value);
+      onChange == null ? void 0 : onChange(value);
     }
-    if (selected === valueState) {
-      return;
-    }
-    if (selectionType === "single" && typeof selected === "string") {
+    if (selectionType === "single" && typeof value === "string") {
       var _renderList$find2;
-      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === selected)) == null ? void 0 : _renderList$find2.props;
+      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? void 0 : _renderList$find2.props;
       const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
-      setInputValue(labelFromSelected);
-      setSelectedValue(selected);
-      onChange == null ? void 0 : onChange(selected);
-      updateOpenState(false);
-    } else if (Array.isArray(selected)) {
+      updateOpenState(false, labelFromSelected);
+    } else if (Array.isArray(value)) {
       setInputValue("");
-      setSelectedValue(selected);
-      onChange == null ? void 0 : onChange(selected);
       setCurrentOptions(children);
     }
-  }, [renderList, onChange, openState, selected, selectionType, updateOpenState, value, valueState, children]);
-  const {
-    focusedMultiSelectIndex,
-    handleKeyDown: handleMultipleSelectionKeyDown
-  } = useMultipleSelection({
-    inputValue,
-    selected,
-    setSelected
-  });
+  }, [children, onChange, renderList, selectionType, updateOpenState, valueState]);
   const focusOnFilteredItem = React__namespace.useCallback((filtered, value) => {
     const lowercasedSearchText = value.normalize("NFC").toLowerCase();
     const itemIndex = filtered.findIndex(item => getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));
     setFocusedIndex(itemIndex);
   }, [setFocusedIndex]);
+  const filterItems = React__namespace.useCallback(value => {
+    const lowercasedSearchText = value.normalize("NFC").toLowerCase();
+    return children.filter(item => getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText) > -1);
+  }, [children]);
   const onKeyDown = event => {
     const {
       key
@@ -2978,24 +2980,29 @@ function Combobox({
     }
     handleKeyDown(event);
   };
-  const selectedLabels = React__namespace.useMemo(() => {
-    return children.filter(item => selected == null ? void 0 : selected.includes(item.props.value)).map(item => getLabel(item.props));
-  }, [children, selected]);
   const handleOnRemove = React__namespace.useCallback(value => {
     const selectedValues = selected;
     const newValues = selectedValues.filter(selectedValue => selectedValue !== value);
     setSelected(newValues);
   }, [selected, setSelected]);
+  React__namespace.useEffect(() => {
+    if (openState) {
+      var _comboboxRef$current;
+      (_comboboxRef$current = comboboxRef.current) == null ? void 0 : _comboboxRef$current.focus();
+    }
+  }, [openState]);
+  const selectedLabels = React__namespace.useMemo(() => {
+    if (Array.isArray(selected)) {
+      return selected.map(value => {
+        const item = children.find(item => item.props.value === value);
+        return item ? getLabel(item == null ? void 0 : item.props) : "";
+      });
+    }
+    return [labelFromSelected];
+  }, [children, labelFromSelected, selected]);
   const pillIdPrefix = id ? `${id}-pill-` : ids.get("pill");
   const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null ? void 0 : (_renderList$focusedIn2 = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn2.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
-  const filterItems = React__namespace.useCallback(value => {
-    return children.filter(item => {
-      const lowerCasedLabel = getLabel(item.props).normalize("NFC").trim().toLowerCase();
-      const lowercasedSearchText = value.normalize("NFC").toLowerCase();
-      return lowerCasedLabel.indexOf(lowercasedSearchText) > -1;
-    });
-  }, [children]);
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
     onClick: () => {
       updateOpenState(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@khanacademy/wonder-blocks-layout": "^2.2.1",
     "@khanacademy/wonder-blocks-modal": "^5.1.12",
     "@khanacademy/wonder-blocks-pill": "^2.5.1",
-    "@khanacademy/wonder-blocks-search-field": "^2.2.26",
+    "@khanacademy/wonder-blocks-search-field": "^2.2.27",
     "@khanacademy/wonder-blocks-timing": "^5.0.2",
     "@khanacademy/wonder-blocks-tokens": "^2.0.1",
     "@khanacademy/wonder-blocks-typography": "^2.1.16"