@khanacademy/wonder-blocks-dropdown 9.0.0 → 9.1.0

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var aphrodite = require('aphrodite');
@@ -28,10 +26,7 @@ var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -44,21 +39,12 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
-var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var SearchField__default = /*#__PURE__*/_interopDefaultLegacy(SearchField);
-var caretDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDownIcon);
-var caretDownIcon__default$1 = /*#__PURE__*/_interopDefaultLegacy(caretDownIcon$1);
-var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
-var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
-var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
 const selectDropdownStyle = {
   marginTop: wonderBlocksTokens.spacing.xSmall_8,
@@ -131,10 +117,10 @@ class ActionItem extends React__namespace.Component {
     const labelComponent = typeof label === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       lang: lang,
       style: styles$c.label
-    }, label) : React__namespace.cloneElement(label, _extends__default["default"]({
+    }, label) : (React__namespace.cloneElement(label, _extends({
       lang,
       style: styles$c.label
-    }, label.props));
+    }, label.props)));
     return React__namespace.createElement(wonderBlocksCell.CompactCell, {
       disabled: disabled,
       horizontalRule: horizontalRule,
@@ -200,7 +186,7 @@ const Check = function Check(props) {
     selected
   } = props;
   return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    icon: checkIcon__default["default"],
+    icon: checkIcon,
     size: "small",
     style: [styles$b.bounds, !selected && styles$b.hide]
   });
@@ -231,7 +217,7 @@ const Checkbox = function Checkbox(props) {
     className: "checkbox",
     style: [styles$a.checkbox, selected && !disabled && styles$a.noBorder, disabled && styles$a.disabledCheckbox]
   }, selected && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    icon: checkIcon__default["default"],
+    icon: checkIcon,
     size: "small",
     className: "check",
     style: [{
@@ -267,7 +253,7 @@ const styles$a = aphrodite.StyleSheet.create({
 });
 
 const _excluded$5 = ["disabled", "label", "selected", "testId", "leftAccessory", "horizontalRule", "parentComponent", "rightAccessory", "style", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant", "role"];
-const StyledListItem = wonderBlocksCore.addStyle("li");
+const StyledLi = wonderBlocksCore.addStyle("li");
 class OptionItem extends React__namespace.Component {
   constructor(...args) {
     super(...args);
@@ -309,10 +295,10 @@ class OptionItem extends React__namespace.Component {
         subtitle2,
         role
       } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$5);
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
     const CheckComponent = this.getCheckComponent();
     const defaultStyle = [styles$9.item, style];
-    return React__namespace.createElement(wonderBlocksCell.DetailCell, _extends__default["default"]({
+    return React__namespace.createElement(wonderBlocksCell.DetailCell, _extends({
       disabled: disabled,
       horizontalRule: horizontalRule,
       rootStyle: parentComponent === "listbox" ? styles$9.listboxItem : defaultStyle,
@@ -355,7 +341,7 @@ class OptionItem extends React__namespace.Component {
       selected
     } = this.props;
     if (parentComponent === "listbox") {
-      return React__namespace.createElement(StyledListItem, {
+      return React__namespace.createElement(StyledLi, {
         onMouseDown: e => {
           e.preventDefault();
         },
@@ -375,7 +361,7 @@ OptionItem.defaultProps = {
   disabled: false,
   focused: false,
   horizontalRule: "none",
-  onToggle: () => void 0,
+  onToggle: () => undefined,
   role: "option",
   selected: false
 };
@@ -490,10 +476,11 @@ class SeparatorItem extends React__namespace.Component {
     return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
   }
   render() {
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$8.separator, this.props.style],
-      "aria-hidden": "true"
-    });
+    return (React__namespace.createElement(wonderBlocksCore.View, {
+        style: [styles$8.separator, this.props.style],
+        "aria-hidden": "true"
+      })
+    );
   }
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
@@ -528,14 +515,14 @@ class DropdownOpener extends React__namespace.Component {
       role,
       onBlur
     } = this.props;
-    const renderedChildren = this.props.children(_extends__default["default"]({}, eventState, {
+    const renderedChildren = this.props.children(_extends({}, eventState, {
       text,
       opened
     }));
     const childrenProps = renderedChildren.props;
     const childrenTestId = this.getTestIdFromProps(childrenProps);
     const renderedAriaLabel = (_childrenProps$ariaL = childrenProps["aria-label"]) != null ? _childrenProps$ariaL : this.props["aria-label"];
-    return React__namespace.cloneElement(renderedChildren, _extends__default["default"]({}, clickableChildrenProps, {
+    return React__namespace.cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
       "aria-label": renderedAriaLabel != null ? renderedAriaLabel : undefined,
       "aria-invalid": this.props.error,
       disabled,
@@ -585,7 +572,7 @@ class DropdownVirtualizedItem extends React__namespace.Component {
         role,
         ref
       } = item;
-      return React__namespace.cloneElement(component, _extends__default["default"]({
+      return React__namespace.cloneElement(component, _extends({
         style
       }, populatedProps, {
         key: index,
@@ -645,7 +632,7 @@ class DropdownCoreVirtualized extends React__namespace.Component {
   }
   setWidth() {
     const rootNode = ReactDOM__namespace.findDOMNode(this);
-    const parentNode = rootNode == null ? void 0 : rootNode.parentElement;
+    const parentNode = rootNode == null ? undefined : rootNode.parentElement;
     if (parentNode) {
       const width = parentNode.getBoundingClientRect().width;
       this.setState({
@@ -725,7 +712,7 @@ function modifyMaxHeight({
   const [basePlacement] = state.placement.split("-");
   const heightProp = basePlacement === "top" ? "top" : "bottom";
   const maxHeight = height - overflow[heightProp] - y;
-  state.styles.popper = _extends__default["default"]({}, state.styles.popper, {
+  state.styles.popper = _extends({}, state.styles.popper, {
     maxHeight: `${maxHeight}px`,
     ["--popper-max-height"]: `${maxHeight}px`
   });
@@ -862,10 +849,10 @@ class DropdownCore extends React__namespace.Component {
   }
   constructor(props) {
     super(props);
-    this.popperElement = void 0;
-    this.virtualizedListRef = void 0;
-    this.handleKeyDownDebounced = void 0;
-    this.textSuggestion = void 0;
+    this.popperElement = undefined;
+    this.virtualizedListRef = undefined;
+    this.handleKeyDownDebounced = undefined;
+    this.textSuggestion = undefined;
     this.focusedIndex = -1;
     this.focusedOriginalIndex = -1;
     this.itemsClicked = false;
@@ -1010,7 +997,7 @@ class DropdownCore extends React__namespace.Component {
       prevItems: this.props.items,
       itemRefs: [],
       sameItemsFocusable: false,
-      labels: _extends__default["default"]({
+      labels: _extends({
         noResults: defaultLabels.noResults,
         someResults: defaultLabels.someSelected
       }, props.labels)
@@ -1050,7 +1037,7 @@ class DropdownCore extends React__namespace.Component {
       }
       if (this.props.labels !== prevProps.labels) {
         this.setState({
-          labels: _extends__default["default"]({}, this.state.labels, this.props.labels)
+          labels: _extends({}, this.state.labels, this.props.labels)
         });
       }
     }
@@ -1232,7 +1219,7 @@ class DropdownCore extends React__namespace.Component {
       }
       const focusIndex = focusCounter - 1;
       const currentRef = this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null;
-      return React__namespace.cloneElement(component, _extends__default["default"]({}, populatedProps, {
+      return React__namespace.cloneElement(component, _extends({}, populatedProps, {
         key: index,
         onClick: () => {
           this.handleItemClick(focusIndex, item);
@@ -1253,7 +1240,7 @@ class DropdownCore extends React__namespace.Component {
         focusCounter += 1;
       }
       const focusIndex = focusCounter - 1;
-      return _extends__default["default"]({}, item, {
+      return _extends({}, item, {
         role: populatedProps.role || itemRole,
         ref: item.focusable && this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
         onClick: () => {
@@ -1276,7 +1263,7 @@ class DropdownCore extends React__namespace.Component {
     const {
       labels
     } = this.state;
-    return React__namespace.createElement(SearchField__default["default"], {
+    return React__namespace.createElement(SearchField, {
       clearAriaLabel: labels.clearSearch,
       onChange: this.handleSearchTextChanged,
       placeholder: labels.filter,
@@ -1429,7 +1416,7 @@ class ActionMenuOpenerCore extends React__namespace.Component {
         opened,
         "aria-label": ariaLabel
       } = _this$props,
-      restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$4);
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
     const buttonColor = wonderBlocksTokens.color.blue;
     const buttonStyles = _generateStyles$1(buttonColor);
     const disabled = disabledProp;
@@ -1437,7 +1424,7 @@ class ActionMenuOpenerCore extends React__namespace.Component {
     const label = React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
       style: sharedStyles.text
     }, children);
-    return React__namespace.createElement(StyledButton$1, _extends__default["default"]({
+    return React__namespace.createElement(StyledButton$1, _extends({
       "aria-expanded": opened ? "true" : "false",
       "aria-haspopup": "menu",
       "aria-label": ariaLabel,
@@ -1453,7 +1440,7 @@ class ActionMenuOpenerCore extends React__namespace.Component {
     }), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
       size: "small",
       color: "currentColor",
-      icon: caretDownIcon__default["default"],
+      icon: caretDownIcon,
       "aria-hidden": "true"
     }));
   }
@@ -1544,7 +1531,7 @@ const _excluded$3 = ["text", "opened"];
 class ActionMenu extends React__namespace.Component {
   constructor(...args) {
     super(...args);
-    this.openerElement = void 0;
+    this.openerElement = undefined;
     this.state = {
       opened: false
     };
@@ -1609,7 +1596,7 @@ class ActionMenu extends React__namespace.Component {
         populatedProps: {}
       };
       if (ActionItem.isClassOf(item)) {
-        return _extends__default["default"]({}, itemObject, {
+        return _extends({}, itemObject, {
           populatedProps: {
             indent: isOptionItemIncluded,
             onClick: this.handleItemSelected
@@ -1617,7 +1604,7 @@ class ActionMenu extends React__namespace.Component {
         });
       } else if (OptionItem.isClassOf(item)) {
         const selected = selectedValues ? selectedValues.includes(value) : false;
-        return _extends__default["default"]({}, itemObject, {
+        return _extends({}, itemObject, {
           populatedProps: {
             onToggle: this.handleOptionSelected,
             selected,
@@ -1657,8 +1644,8 @@ class ActionMenu extends React__namespace.Component {
       const {
           opened
         } = openerProps,
-        eventState = _objectWithoutPropertiesLoose__default["default"](openerProps, _excluded$3);
-      return React__namespace.createElement(ActionMenuOpenerCore, _extends__default["default"]({}, eventState, {
+        eventState = _objectWithoutPropertiesLoose(openerProps, _excluded$3);
+      return React__namespace.createElement(ActionMenuOpenerCore, _extends({}, eventState, {
         disabled: disabled,
         opened: !!opened,
         testId: testId
@@ -1757,11 +1744,11 @@ class SelectOpener extends React__namespace.Component {
         "aria-required": ariaRequired,
         onBlur
       } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     const stateStyles = _generateStyles(isPlaceholder, error);
     const iconColor = disabled ? wonderBlocksTokens.semanticColor.action.disabled.default : wonderBlocksTokens.semanticColor.icon.primary;
     const style = [styles$4.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.press];
-    return React__namespace.createElement(StyledButton, _extends__default["default"]({}, sharedProps, {
+    return React__namespace.createElement(StyledButton, _extends({}, sharedProps, {
       "aria-disabled": disabled,
       "aria-expanded": open ? "true" : "false",
       "aria-invalid": error,
@@ -1771,6 +1758,7 @@ class SelectOpener extends React__namespace.Component {
       "data-testid": testId,
       id: id,
       role: "combobox",
+      type: "button",
       style: style,
       onClick: !disabled ? this.handleClick : undefined,
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
@@ -1781,7 +1769,7 @@ class SelectOpener extends React__namespace.Component {
     }, children || React__namespace.createElement("span", {
       "aria-hidden": "true"
     }, "\xA0")), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      icon: caretDownIcon__default["default"],
+      icon: caretDownIcon,
       color: iconColor,
       size: "small",
       style: styles$4.caret,
@@ -1854,10 +1842,10 @@ const _generateStyles = (placeholder, error) => {
     outlineStyle: "solid",
     outlineWidth: wonderBlocksTokens.border.width.thin
   };
-  const focusHoverStyling = _extends__default["default"]({
+  const focusHoverStyling = _extends({
     outlineColor: action.hover.border
   }, sharedOutlineStyling);
-  const pressStyling = _extends__default["default"]({
+  const pressStyling = _extends({
     background: action.press.background,
     color: placeholder ? error ? wonderBlocksTokens.semanticColor.text.secondary : wonderBlocksTokens.semanticColor.action.outlined.progressive.press.foreground : wonderBlocksTokens.semanticColor.text.primary,
     outlineColor: action.press.border
@@ -1886,7 +1874,7 @@ const _generateStyles = (placeholder, error) => {
       borderColor: states.disabled.border,
       color: states.disabled.foreground,
       cursor: "not-allowed",
-      ":focus-visible": _extends__default["default"]({
+      ":focus-visible": _extends({
         outlineColor: wonderBlocksTokens.semanticColor.action.disabled.default
       }, sharedOutlineStyling)
     },
@@ -2002,7 +1990,7 @@ const SingleSelect = props => {
       required,
       showOpenerLabelAsText = true
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   const [open, setOpen] = React__namespace.useState(false);
   const [searchText, setSearchText] = React__namespace.useState("");
   const [openerElement, setOpenerElement] = React__namespace.useState();
@@ -2115,7 +2103,7 @@ const SingleSelect = props => {
         opened: open,
         error: hasError,
         onBlur: onOpenerBlurValidation
-      }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
+      }, opener) : React__namespace.createElement(SelectOpener, _extends({}, sharedProps, {
         "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         disabled: isDisabled,
@@ -2193,8 +2181,8 @@ const MultiSelect = props => {
       onValidate,
       required
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const labels = _extends__default["default"]({}, defaultLabels, propLabels);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const labels = _extends({}, defaultLabels, propLabels);
   const [open, setOpen] = React__namespace.useState(false);
   const [searchText, setSearchText] = React__namespace.useState("");
   const [lastSelectedValues, setLastSelectedValues] = React__namespace.useState([]);
@@ -2270,7 +2258,7 @@ const MultiSelect = props => {
       case 1:
         const selectedItem = children.find(option => option.props.value === selectedValues[0]);
         if (selectedItem) {
-          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? void 0 : selectedItem.props);
+          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? undefined : selectedItem.props);
           if (selectedLabel) {
             return selectedLabel;
           } else {
@@ -2399,7 +2387,7 @@ const MultiSelect = props => {
         role: "combobox",
         text: menuContent,
         opened: open
-      }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
+      }, opener) : React__namespace.createElement(SelectOpener, _extends({}, sharedProps, {
         error: hasError,
         disabled: isDisabled,
         id: uniqueOpenerId,
@@ -2578,7 +2566,7 @@ function useListbox({
   const renderList = React__namespace.useMemo(() => {
     return options.map((component, index) => {
       const isSingleSelection = selectionType === "single" && typeof selected === "string";
-      const isSelected = (isSingleSelection ? selected === component.props.value : selected == null ? void 0 : selected.includes(component.props.value)) || false;
+      const isSelected = (isSingleSelection ? selected === component.props.value : selected == null ? undefined : selected.includes(component.props.value)) || false;
       const optionId = id ? `${id}-option-${index}` : `option-${index}`;
       return React__namespace.cloneElement(component, {
         key: index,
@@ -2625,19 +2613,19 @@ function useMultipleSelection({
     if (key === "ArrowLeft") {
       setFocusedMultiSelectIndex(prev => {
         const newIndex = prev - 1;
-        return newIndex < 0 ? (selected == null ? void 0 : selected.length) - 1 : newIndex;
+        return newIndex < 0 ? (selected == null ? undefined : selected.length) - 1 : newIndex;
       });
     }
     if (key === "ArrowRight") {
       setFocusedMultiSelectIndex(prev => {
         const newIndex = prev + 1;
-        return newIndex >= (selected == null ? void 0 : selected.length) ? 0 : newIndex;
+        return newIndex >= (selected == null ? undefined : selected.length) ? 0 : newIndex;
       });
     }
     if (inputValue === "" && key === "Backspace") {
       let newSelected = [];
       if (focusedMultiSelectIndex < 0) {
-        newSelected = selected == null ? void 0 : selected.slice(0, -1);
+        newSelected = selected == null ? undefined : selected.slice(0, -1);
       } else {
         newSelected = selected.filter((_, index) => index !== focusedMultiSelectIndex);
       }
@@ -2645,7 +2633,7 @@ function useMultipleSelection({
       setFocusedMultiSelectIndex(-1);
     }
     if (focusedMultiSelectIndex >= 0 && key === "Enter") {
-      const newSelected = selected == null ? void 0 : selected.filter((_, index) => index !== focusedMultiSelectIndex);
+      const newSelected = selected == null ? undefined : selected.filter((_, index) => index !== focusedMultiSelectIndex);
       setSelected(newSelected);
       setFocusedMultiSelectIndex(-1);
     }
@@ -2686,11 +2674,11 @@ function ComboboxLiveRegion({
   const lastSelectedValue = React__namespace.useRef(null);
   const [message, setMessage] = React__namespace.useState("");
   React__namespace.useEffect(() => {
-    if (selected && selected !== (lastSelectedValue == null ? void 0 : lastSelectedValue.current)) {
+    if (selected && selected !== (lastSelectedValue == null ? undefined : lastSelectedValue.current)) {
       var _lastSelectedValue$cu, _lastSelectedValue$cu2, _selected$length;
       let newMessage = "";
-      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null ? void 0 : (_lastSelectedValue$cu2 = lastSelectedValue.current) == null ? void 0 : _lastSelectedValue$cu2.length) != null ? _lastSelectedValue$cu : 0;
-      const selectedLength = (_selected$length = selected == null ? void 0 : selected.length) != null ? _selected$length : 0;
+      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null || (_lastSelectedValue$cu2 = lastSelectedValue.current) == null ? undefined : _lastSelectedValue$cu2.length) != null ? _lastSelectedValue$cu : 0;
+      const selectedLength = (_selected$length = selected == null ? undefined : selected.length) != null ? _selected$length : 0;
       if (Array.isArray(selected) && selected.length > 0) {
         const currentLabels = selectedLabels.join(", ");
         const selectedState = selectedLength > lastSelectedLength ? labels.selected(currentLabels) : labels.unselected(currentLabels);
@@ -2776,7 +2764,7 @@ const MultipleSelection = React__namespace.memo(function SelectedPills({
     const label = labels[index];
     const focused = index === focusedMultiSelectIndex;
     const uniqueId = id + index;
-    return React__namespace.createElement(Pill__default["default"], {
+    return React__namespace.createElement(Pill, {
       id: uniqueId,
       key: uniqueId,
       testId: testId ? `${testId}-pill-${index}` : undefined,
@@ -2787,7 +2775,7 @@ const MultipleSelection = React__namespace.memo(function SelectedPills({
       tabIndex: -1,
       onClick: () => onRemove(value)
     }, React__namespace.createElement(React__namespace.Fragment, null, label, !disabled && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      icon: xIcon__default["default"],
+      icon: xIcon,
       size: "small"
     })));
   }));
@@ -2844,7 +2832,7 @@ function StandaloneListbox(props) {
   });
   React__namespace.useEffect(() => {
     if (selected && selected !== value) {
-      onChange == null ? void 0 : onChange(selected);
+      onChange == null || onChange(selected);
     }
   }, [onChange, selected, value]);
   return React__namespace.createElement(wonderBlocksCore.View, {
@@ -2916,7 +2904,7 @@ function Combobox({
   testId,
   value = ""
 }) {
-  var _renderList$find, _renderList$focusedIn, _renderList$focusedIn2;
+  var _renderList$find, _renderList$focusedIn;
   const generatedUniqueId = React.useId();
   const uniqueId = id != null ? id : generatedUniqueId;
   const comboboxRef = React__namespace.useRef(null);
@@ -2947,7 +2935,7 @@ function Combobox({
     disableSpaceSelection: true,
     selectionType
   });
-  const itemFromSelected = (_renderList$find = renderList.find(item => item.props.value === selected)) == null ? void 0 : _renderList$find.props;
+  const itemFromSelected = (_renderList$find = renderList.find(item => item.props.value === selected)) == null ? undefined : _renderList$find.props;
   const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
   const initialValue = typeof value === "string" ? labelFromSelected : "";
   const [inputValue, setInputValue] = React__namespace.useState(initialValue);
@@ -2975,16 +2963,16 @@ function Combobox({
       }
       setCurrentOptions(children);
     }
-    onToggle == null ? void 0 : onToggle(newState);
+    onToggle == null || onToggle(newState);
   }, [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);
+      onChange == null || onChange(value);
     }
     if (selectionType === "single" && typeof value === "string") {
       var _renderList$find2;
-      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? void 0 : _renderList$find2.props;
+      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? undefined : _renderList$find2.props;
       const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
       updateOpenState(false, labelFromSelected);
     } else if (Array.isArray(value)) {
@@ -3038,20 +3026,20 @@ function Combobox({
     e.stopPropagation();
     setInputValue("");
     setSelected("");
-    onChange == null ? void 0 : onChange("");
-    (_comboboxRef$current = comboboxRef.current) == null ? void 0 : _comboboxRef$current.focus();
+    onChange == null || onChange("");
+    (_comboboxRef$current = comboboxRef.current) == null || _comboboxRef$current.focus();
   }, [onChange, setSelected]);
   React__namespace.useEffect(() => {
     if (openState) {
       var _comboboxRef$current2;
-      (_comboboxRef$current2 = comboboxRef.current) == null ? void 0 : _comboboxRef$current2.focus();
+      (_comboboxRef$current2 = comboboxRef.current) == null || _comboboxRef$current2.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 item ? getLabel(item == null ? undefined : item.props) : "";
       });
     }
     return [labelFromSelected];
@@ -3061,7 +3049,7 @@ function Combobox({
     if (!startIcon) {
       return null;
     }
-    const startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
+    const startIconElement = React__namespace.cloneElement(startIcon, _extends({
       size: "small"
     }, startIcon.props, {
       color: disabled ? wonderBlocksTokens.color.offBlack32 : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : wonderBlocksTokens.semanticColor.icon.primary
@@ -3072,7 +3060,7 @@ function Combobox({
   };
   const pillIdPrefix = `${uniqueId}-pill-`;
   const textFieldId = React.useId();
-  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 currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null || (_renderList$focusedIn = _renderList$focusedIn.props) == null ? undefined : _renderList$focusedIn.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
     onClick: () => {
@@ -3124,17 +3112,17 @@ function Combobox({
     ref: comboboxRef,
     autoComplete: "off",
     role: "combobox"
-  }), inputValue && !disabled && React__namespace.createElement(IconButton__default["default"], {
-    icon: xIcon__default["default"],
+  }), inputValue && !disabled && React__namespace.createElement(IconButton, {
+    icon: xIcon,
     onClick: handleClearClick,
     kind: "tertiary",
     size: "small",
     style: [styles.button, styles.clearButton],
     "aria-label": labels.clearSelection,
     testId: testId ? `${testId}-clear` : undefined
-  }), React__namespace.createElement(IconButton__default["default"], {
+  }), React__namespace.createElement(IconButton, {
     disabled: disabled,
-    icon: caretDownIcon__default$1["default"],
+    icon: caretDownIcon$1,
     onClick: e => {
       e.stopPropagation();
       updateOpenState(!openState);
@@ -3151,13 +3139,13 @@ function Combobox({
     "aria-label": labels.comboboxButton
   })), openState && React__namespace.createElement(DropdownPopper, {
     alignment: "left",
-    referenceElement: rootNodeRef == null ? void 0 : rootNodeRef.current
+    referenceElement: rootNodeRef == null ? undefined : rootNodeRef.current
   }, isReferenceHidden => {
     var _rootNodeRef$current, _rootNodeRef$current2;
     return React__namespace.createElement(React__namespace.Fragment, null, renderList.length === 0 ? React__namespace.createElement(wonderBlocksCell.DetailCell, {
       title: labels.noItems,
       style: [styles.listbox, {
-        minWidth: rootNodeRef == null ? void 0 : (_rootNodeRef$current = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current = rootNodeRef.current) == null ? undefined : _rootNodeRef$current.offsetWidth
       }],
       horizontalRule: "none"
     }) : React__namespace.createElement(Listbox, {
@@ -3165,7 +3153,7 @@ function Combobox({
       tabIndex: -1,
       selectionType: selectionType,
       style: [styles.listbox, isReferenceHidden && styles.hidden, {
-        minWidth: rootNodeRef == null ? void 0 : (_rootNodeRef$current2 = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current2.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current2 = rootNodeRef.current) == null ? undefined : _rootNodeRef$current2.offsetWidth
       }],
       testId: testId ? `${testId}-listbox` : undefined,
       "aria-label": labels.listbox,

package/package.json

@@ -1,33 +1,29 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
-  },
   "author": "",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^4.0.8",
-    "@khanacademy/wonder-blocks-clickable": "^6.0.0",
-    "@khanacademy/wonder-blocks-core": "^12.0.0",
-    "@khanacademy/wonder-blocks-icon": "^5.0.6",
-    "@khanacademy/wonder-blocks-layout": "^3.0.8",
-    "@khanacademy/wonder-blocks-modal": "^7.0.7",
-    "@khanacademy/wonder-blocks-pill": "^3.0.8",
-    "@khanacademy/wonder-blocks-search-field": "^5.0.3",
-    "@khanacademy/wonder-blocks-timing": "^6.0.1",
-    "@khanacademy/wonder-blocks-tokens": "^4.1.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.6"
+    "@babel/runtime": "^7.24.5",
+    "@khanacademy/wonder-blocks-cell": "4.1.0",
+    "@khanacademy/wonder-blocks-clickable": "6.1.0",
+    "@khanacademy/wonder-blocks-core": "12.1.0",
+    "@khanacademy/wonder-blocks-icon": "5.1.0",
+    "@khanacademy/wonder-blocks-layout": "3.1.0",
+    "@khanacademy/wonder-blocks-modal": "7.1.0",
+    "@khanacademy/wonder-blocks-pill": "3.1.0",
+    "@khanacademy/wonder-blocks-search-field": "5.1.0",
+    "@khanacademy/wonder-blocks-timing": "7.0.0",
+    "@khanacademy/wonder-blocks-tokens": "4.2.0",
+    "@khanacademy/wonder-blocks-typography": "3.1.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -38,10 +34,12 @@
     "react-popper": "^2.0.0",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
-    "react-window": "^1.8.10"
+    "react-window": "^1.8.11"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^7.0.8",
-    "@khanacademy/wb-dev-build-settings": "^2.0.0"
+    "@khanacademy/wb-dev-build-settings": "2.1.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }