@khanacademy/wonder-blocks-dropdown 9.1.0 → 9.1.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 9.1.1
+
+### Patch Changes
+
+- ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
+- Updated dependencies [ee8d95a]
+    - @khanacademy/wonder-blocks-cell@4.1.1
+    - @khanacademy/wonder-blocks-clickable@6.1.1
+    - @khanacademy/wonder-blocks-core@12.1.1
+    - @khanacademy/wonder-blocks-icon@5.1.1
+    - @khanacademy/wonder-blocks-layout@3.1.1
+    - @khanacademy/wonder-blocks-modal@7.1.1
+    - @khanacademy/wonder-blocks-pill@3.1.1
+    - @khanacademy/wonder-blocks-search-field@5.1.1
+    - @khanacademy/wonder-blocks-timing@7.0.1
+    - @khanacademy/wonder-blocks-tokens@4.2.1
+    - @khanacademy/wonder-blocks-typography@3.1.1
+
 ## 9.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -340,7 +340,7 @@ OptionItem.defaultProps = {
   disabled: false,
   focused: false,
   horizontalRule: "none",
-  onToggle: () => undefined,
+  onToggle: () => void 0,
   role: "option",
   selected: false
 };
@@ -611,7 +611,7 @@ class DropdownCoreVirtualized extends React.Component {
   }
   setWidth() {
     const rootNode = ReactDOM.findDOMNode(this);
-    const parentNode = rootNode == null ? undefined : rootNode.parentElement;
+    const parentNode = rootNode == null ? void 0 : rootNode.parentElement;
     if (parentNode) {
       const width = parentNode.getBoundingClientRect().width;
       this.setState({
@@ -828,10 +828,10 @@ class DropdownCore extends React.Component {
   }
   constructor(props) {
     super(props);
-    this.popperElement = undefined;
-    this.virtualizedListRef = undefined;
-    this.handleKeyDownDebounced = undefined;
-    this.textSuggestion = undefined;
+    this.popperElement = void 0;
+    this.virtualizedListRef = void 0;
+    this.handleKeyDownDebounced = void 0;
+    this.textSuggestion = void 0;
     this.focusedIndex = -1;
     this.focusedOriginalIndex = -1;
     this.itemsClicked = false;
@@ -1510,7 +1510,7 @@ const _excluded$3 = ["text", "opened"];
 class ActionMenu extends React.Component {
   constructor(...args) {
     super(...args);
-    this.openerElement = undefined;
+    this.openerElement = void 0;
     this.state = {
       opened: false
     };
@@ -2237,7 +2237,7 @@ const MultiSelect = props => {
       case 1:
         const selectedItem = children.find(option => option.props.value === selectedValues[0]);
         if (selectedItem) {
-          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? undefined : selectedItem.props);
+          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? void 0 : selectedItem.props);
           if (selectedLabel) {
             return selectedLabel;
           } else {
@@ -2545,7 +2545,7 @@ function useListbox({
   const renderList = React.useMemo(() => {
     return options.map((component, index) => {
       const isSingleSelection = selectionType === "single" && typeof selected === "string";
-      const isSelected = (isSingleSelection ? selected === component.props.value : selected == null ? undefined : selected.includes(component.props.value)) || false;
+      const isSelected = (isSingleSelection ? selected === component.props.value : selected == null ? void 0 : selected.includes(component.props.value)) || false;
       const optionId = id ? `${id}-option-${index}` : `option-${index}`;
       return React.cloneElement(component, {
         key: index,
@@ -2592,19 +2592,19 @@ function useMultipleSelection({
     if (key === "ArrowLeft") {
       setFocusedMultiSelectIndex(prev => {
         const newIndex = prev - 1;
-        return newIndex < 0 ? (selected == null ? undefined : selected.length) - 1 : newIndex;
+        return newIndex < 0 ? (selected == null ? void 0 : selected.length) - 1 : newIndex;
       });
     }
     if (key === "ArrowRight") {
       setFocusedMultiSelectIndex(prev => {
         const newIndex = prev + 1;
-        return newIndex >= (selected == null ? undefined : selected.length) ? 0 : newIndex;
+        return newIndex >= (selected == null ? void 0 : selected.length) ? 0 : newIndex;
       });
     }
     if (inputValue === "" && key === "Backspace") {
       let newSelected = [];
       if (focusedMultiSelectIndex < 0) {
-        newSelected = selected == null ? undefined : selected.slice(0, -1);
+        newSelected = selected == null ? void 0 : selected.slice(0, -1);
       } else {
         newSelected = selected.filter((_, index) => index !== focusedMultiSelectIndex);
       }
@@ -2612,7 +2612,7 @@ function useMultipleSelection({
       setFocusedMultiSelectIndex(-1);
     }
     if (focusedMultiSelectIndex >= 0 && key === "Enter") {
-      const newSelected = selected == null ? undefined : selected.filter((_, index) => index !== focusedMultiSelectIndex);
+      const newSelected = selected == null ? void 0 : selected.filter((_, index) => index !== focusedMultiSelectIndex);
       setSelected(newSelected);
       setFocusedMultiSelectIndex(-1);
     }
@@ -2653,11 +2653,11 @@ function ComboboxLiveRegion({
   const lastSelectedValue = React.useRef(null);
   const [message, setMessage] = React.useState("");
   React.useEffect(() => {
-    if (selected && selected !== (lastSelectedValue == null ? undefined : lastSelectedValue.current)) {
+    if (selected && selected !== (lastSelectedValue == null ? void 0 : lastSelectedValue.current)) {
       var _lastSelectedValue$cu, _lastSelectedValue$cu2, _selected$length;
       let newMessage = "";
-      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;
+      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null || (_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;
       if (Array.isArray(selected) && selected.length > 0) {
         const currentLabels = selectedLabels.join(", ");
         const selectedState = selectedLength > lastSelectedLength ? labels.selected(currentLabels) : labels.unselected(currentLabels);
@@ -2914,7 +2914,7 @@ function Combobox({
     disableSpaceSelection: true,
     selectionType
   });
-  const itemFromSelected = (_renderList$find = renderList.find(item => item.props.value === selected)) == null ? undefined : _renderList$find.props;
+  const itemFromSelected = (_renderList$find = renderList.find(item => item.props.value === selected)) == null ? void 0 : _renderList$find.props;
   const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
   const initialValue = typeof value === "string" ? labelFromSelected : "";
   const [inputValue, setInputValue] = React.useState(initialValue);
@@ -2951,7 +2951,7 @@ function Combobox({
     }
     if (selectionType === "single" && typeof value === "string") {
       var _renderList$find2;
-      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? undefined : _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) : "";
       updateOpenState(false, labelFromSelected);
     } else if (Array.isArray(value)) {
@@ -3018,7 +3018,7 @@ function Combobox({
     if (Array.isArray(selected)) {
       return selected.map(value => {
         const item = children.find(item => item.props.value === value);
-        return item ? getLabel(item == null ? undefined : item.props) : "";
+        return item ? getLabel(item == null ? void 0 : item.props) : "";
       });
     }
     return [labelFromSelected];
@@ -3039,7 +3039,7 @@ function Combobox({
   };
   const pillIdPrefix = `${uniqueId}-pill-`;
   const textFieldId = useId();
-  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null || (_renderList$focusedIn = _renderList$focusedIn.props) == null ? undefined : _renderList$focusedIn.id : pillIdPrefix + focusedMultiSelectIndex;
+  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null || (_renderList$focusedIn = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
   return React.createElement(React.Fragment, null, React.createElement(View, {
     onClick: () => {
@@ -3118,13 +3118,13 @@ function Combobox({
     "aria-label": labels.comboboxButton
   })), openState && React.createElement(DropdownPopper, {
     alignment: "left",
-    referenceElement: rootNodeRef == null ? undefined : rootNodeRef.current
+    referenceElement: rootNodeRef == null ? void 0 : rootNodeRef.current
   }, isReferenceHidden => {
     var _rootNodeRef$current, _rootNodeRef$current2;
     return React.createElement(React.Fragment, null, renderList.length === 0 ? React.createElement(DetailCell, {
       title: labels.noItems,
       style: [styles.listbox, {
-        minWidth: rootNodeRef == null || (_rootNodeRef$current = rootNodeRef.current) == null ? undefined : _rootNodeRef$current.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current.offsetWidth
       }],
       horizontalRule: "none"
     }) : React.createElement(Listbox, {
@@ -3132,7 +3132,7 @@ function Combobox({
       tabIndex: -1,
       selectionType: selectionType,
       style: [styles.listbox, isReferenceHidden && styles.hidden, {
-        minWidth: rootNodeRef == null || (_rootNodeRef$current2 = rootNodeRef.current) == null ? undefined : _rootNodeRef$current2.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current2 = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current2.offsetWidth
       }],
       testId: testId ? `${testId}-listbox` : undefined,
       "aria-label": labels.listbox,

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var aphrodite = require('aphrodite');
@@ -26,7 +28,10 @@ var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 
-function _interopNamespaceDefault(e) {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -39,12 +44,21 @@ function _interopNamespaceDefault(e) {
             }
         });
     }
-    n.default = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
+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);
 
 const selectDropdownStyle = {
   marginTop: wonderBlocksTokens.spacing.xSmall_8,
@@ -117,7 +131,7 @@ 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({
+    }, label) : (React__namespace.cloneElement(label, _extends__default["default"]({
       lang,
       style: styles$c.label
     }, label.props)));
@@ -186,7 +200,7 @@ const Check = function Check(props) {
     selected
   } = props;
   return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    icon: checkIcon,
+    icon: checkIcon__default["default"],
     size: "small",
     style: [styles$b.bounds, !selected && styles$b.hide]
   });
@@ -217,7 +231,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,
+    icon: checkIcon__default["default"],
     size: "small",
     className: "check",
     style: [{
@@ -295,10 +309,10 @@ class OptionItem extends React__namespace.Component {
         subtitle2,
         role
       } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
+      sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$5);
     const CheckComponent = this.getCheckComponent();
     const defaultStyle = [styles$9.item, style];
-    return React__namespace.createElement(wonderBlocksCell.DetailCell, _extends({
+    return React__namespace.createElement(wonderBlocksCell.DetailCell, _extends__default["default"]({
       disabled: disabled,
       horizontalRule: horizontalRule,
       rootStyle: parentComponent === "listbox" ? styles$9.listboxItem : defaultStyle,
@@ -361,7 +375,7 @@ OptionItem.defaultProps = {
   disabled: false,
   focused: false,
   horizontalRule: "none",
-  onToggle: () => undefined,
+  onToggle: () => void 0,
   role: "option",
   selected: false
 };
@@ -515,14 +529,14 @@ class DropdownOpener extends React__namespace.Component {
       role,
       onBlur
     } = this.props;
-    const renderedChildren = this.props.children(_extends({}, eventState, {
+    const renderedChildren = this.props.children(_extends__default["default"]({}, 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({}, clickableChildrenProps, {
+    return React__namespace.cloneElement(renderedChildren, _extends__default["default"]({}, clickableChildrenProps, {
       "aria-label": renderedAriaLabel != null ? renderedAriaLabel : undefined,
       "aria-invalid": this.props.error,
       disabled,
@@ -572,7 +586,7 @@ class DropdownVirtualizedItem extends React__namespace.Component {
         role,
         ref
       } = item;
-      return React__namespace.cloneElement(component, _extends({
+      return React__namespace.cloneElement(component, _extends__default["default"]({
         style
       }, populatedProps, {
         key: index,
@@ -632,7 +646,7 @@ class DropdownCoreVirtualized extends React__namespace.Component {
   }
   setWidth() {
     const rootNode = ReactDOM__namespace.findDOMNode(this);
-    const parentNode = rootNode == null ? undefined : rootNode.parentElement;
+    const parentNode = rootNode == null ? void 0 : rootNode.parentElement;
     if (parentNode) {
       const width = parentNode.getBoundingClientRect().width;
       this.setState({
@@ -712,7 +726,7 @@ function modifyMaxHeight({
   const [basePlacement] = state.placement.split("-");
   const heightProp = basePlacement === "top" ? "top" : "bottom";
   const maxHeight = height - overflow[heightProp] - y;
-  state.styles.popper = _extends({}, state.styles.popper, {
+  state.styles.popper = _extends__default["default"]({}, state.styles.popper, {
     maxHeight: `${maxHeight}px`,
     ["--popper-max-height"]: `${maxHeight}px`
   });
@@ -849,10 +863,10 @@ class DropdownCore extends React__namespace.Component {
   }
   constructor(props) {
     super(props);
-    this.popperElement = undefined;
-    this.virtualizedListRef = undefined;
-    this.handleKeyDownDebounced = undefined;
-    this.textSuggestion = undefined;
+    this.popperElement = void 0;
+    this.virtualizedListRef = void 0;
+    this.handleKeyDownDebounced = void 0;
+    this.textSuggestion = void 0;
     this.focusedIndex = -1;
     this.focusedOriginalIndex = -1;
     this.itemsClicked = false;
@@ -997,7 +1011,7 @@ class DropdownCore extends React__namespace.Component {
       prevItems: this.props.items,
       itemRefs: [],
       sameItemsFocusable: false,
-      labels: _extends({
+      labels: _extends__default["default"]({
         noResults: defaultLabels.noResults,
         someResults: defaultLabels.someSelected
       }, props.labels)
@@ -1037,7 +1051,7 @@ class DropdownCore extends React__namespace.Component {
       }
       if (this.props.labels !== prevProps.labels) {
         this.setState({
-          labels: _extends({}, this.state.labels, this.props.labels)
+          labels: _extends__default["default"]({}, this.state.labels, this.props.labels)
         });
       }
     }
@@ -1219,7 +1233,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({}, populatedProps, {
+      return React__namespace.cloneElement(component, _extends__default["default"]({}, populatedProps, {
         key: index,
         onClick: () => {
           this.handleItemClick(focusIndex, item);
@@ -1240,7 +1254,7 @@ class DropdownCore extends React__namespace.Component {
         focusCounter += 1;
       }
       const focusIndex = focusCounter - 1;
-      return _extends({}, item, {
+      return _extends__default["default"]({}, item, {
         role: populatedProps.role || itemRole,
         ref: item.focusable && this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
         onClick: () => {
@@ -1263,7 +1277,7 @@ class DropdownCore extends React__namespace.Component {
     const {
       labels
     } = this.state;
-    return React__namespace.createElement(SearchField, {
+    return React__namespace.createElement(SearchField__default["default"], {
       clearAriaLabel: labels.clearSearch,
       onChange: this.handleSearchTextChanged,
       placeholder: labels.filter,
@@ -1416,7 +1430,7 @@ class ActionMenuOpenerCore extends React__namespace.Component {
         opened,
         "aria-label": ariaLabel
       } = _this$props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+      restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$4);
     const buttonColor = wonderBlocksTokens.color.blue;
     const buttonStyles = _generateStyles$1(buttonColor);
     const disabled = disabledProp;
@@ -1424,7 +1438,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({
+    return React__namespace.createElement(StyledButton$1, _extends__default["default"]({
       "aria-expanded": opened ? "true" : "false",
       "aria-haspopup": "menu",
       "aria-label": ariaLabel,
@@ -1440,7 +1454,7 @@ class ActionMenuOpenerCore extends React__namespace.Component {
     }), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
       size: "small",
       color: "currentColor",
-      icon: caretDownIcon,
+      icon: caretDownIcon__default["default"],
       "aria-hidden": "true"
     }));
   }
@@ -1531,7 +1545,7 @@ const _excluded$3 = ["text", "opened"];
 class ActionMenu extends React__namespace.Component {
   constructor(...args) {
     super(...args);
-    this.openerElement = undefined;
+    this.openerElement = void 0;
     this.state = {
       opened: false
     };
@@ -1596,7 +1610,7 @@ class ActionMenu extends React__namespace.Component {
         populatedProps: {}
       };
       if (ActionItem.isClassOf(item)) {
-        return _extends({}, itemObject, {
+        return _extends__default["default"]({}, itemObject, {
           populatedProps: {
             indent: isOptionItemIncluded,
             onClick: this.handleItemSelected
@@ -1604,7 +1618,7 @@ class ActionMenu extends React__namespace.Component {
         });
       } else if (OptionItem.isClassOf(item)) {
         const selected = selectedValues ? selectedValues.includes(value) : false;
-        return _extends({}, itemObject, {
+        return _extends__default["default"]({}, itemObject, {
           populatedProps: {
             onToggle: this.handleOptionSelected,
             selected,
@@ -1644,8 +1658,8 @@ class ActionMenu extends React__namespace.Component {
       const {
           opened
         } = openerProps,
-        eventState = _objectWithoutPropertiesLoose(openerProps, _excluded$3);
-      return React__namespace.createElement(ActionMenuOpenerCore, _extends({}, eventState, {
+        eventState = _objectWithoutPropertiesLoose__default["default"](openerProps, _excluded$3);
+      return React__namespace.createElement(ActionMenuOpenerCore, _extends__default["default"]({}, eventState, {
         disabled: disabled,
         opened: !!opened,
         testId: testId
@@ -1744,11 +1758,11 @@ class SelectOpener extends React__namespace.Component {
         "aria-required": ariaRequired,
         onBlur
       } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+      sharedProps = _objectWithoutPropertiesLoose__default["default"](_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({}, sharedProps, {
+    return React__namespace.createElement(StyledButton, _extends__default["default"]({}, sharedProps, {
       "aria-disabled": disabled,
       "aria-expanded": open ? "true" : "false",
       "aria-invalid": error,
@@ -1769,7 +1783,7 @@ class SelectOpener extends React__namespace.Component {
     }, children || React__namespace.createElement("span", {
       "aria-hidden": "true"
     }, "\xA0")), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      icon: caretDownIcon,
+      icon: caretDownIcon__default["default"],
       color: iconColor,
       size: "small",
       style: styles$4.caret,
@@ -1842,10 +1856,10 @@ const _generateStyles = (placeholder, error) => {
     outlineStyle: "solid",
     outlineWidth: wonderBlocksTokens.border.width.thin
   };
-  const focusHoverStyling = _extends({
+  const focusHoverStyling = _extends__default["default"]({
     outlineColor: action.hover.border
   }, sharedOutlineStyling);
-  const pressStyling = _extends({
+  const pressStyling = _extends__default["default"]({
     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
@@ -1874,7 +1888,7 @@ const _generateStyles = (placeholder, error) => {
       borderColor: states.disabled.border,
       color: states.disabled.foreground,
       cursor: "not-allowed",
-      ":focus-visible": _extends({
+      ":focus-visible": _extends__default["default"]({
         outlineColor: wonderBlocksTokens.semanticColor.action.disabled.default
       }, sharedOutlineStyling)
     },
@@ -1990,7 +2004,7 @@ const SingleSelect = props => {
       required,
       showOpenerLabelAsText = true
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
   const [open, setOpen] = React__namespace.useState(false);
   const [searchText, setSearchText] = React__namespace.useState("");
   const [openerElement, setOpenerElement] = React__namespace.useState();
@@ -2103,7 +2117,7 @@ const SingleSelect = props => {
         opened: open,
         error: hasError,
         onBlur: onOpenerBlurValidation
-      }, opener) : React__namespace.createElement(SelectOpener, _extends({}, sharedProps, {
+      }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
         "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         disabled: isDisabled,
@@ -2181,8 +2195,8 @@ const MultiSelect = props => {
       onValidate,
       required
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const labels = _extends({}, defaultLabels, propLabels);
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
+  const labels = _extends__default["default"]({}, defaultLabels, propLabels);
   const [open, setOpen] = React__namespace.useState(false);
   const [searchText, setSearchText] = React__namespace.useState("");
   const [lastSelectedValues, setLastSelectedValues] = React__namespace.useState([]);
@@ -2258,7 +2272,7 @@ const MultiSelect = props => {
       case 1:
         const selectedItem = children.find(option => option.props.value === selectedValues[0]);
         if (selectedItem) {
-          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? undefined : selectedItem.props);
+          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? void 0 : selectedItem.props);
           if (selectedLabel) {
             return selectedLabel;
           } else {
@@ -2387,7 +2401,7 @@ const MultiSelect = props => {
         role: "combobox",
         text: menuContent,
         opened: open
-      }, opener) : React__namespace.createElement(SelectOpener, _extends({}, sharedProps, {
+      }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
         error: hasError,
         disabled: isDisabled,
         id: uniqueOpenerId,
@@ -2566,7 +2580,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 ? undefined : selected.includes(component.props.value)) || false;
+      const isSelected = (isSingleSelection ? selected === component.props.value : selected == null ? void 0 : selected.includes(component.props.value)) || false;
       const optionId = id ? `${id}-option-${index}` : `option-${index}`;
       return React__namespace.cloneElement(component, {
         key: index,
@@ -2613,19 +2627,19 @@ function useMultipleSelection({
     if (key === "ArrowLeft") {
       setFocusedMultiSelectIndex(prev => {
         const newIndex = prev - 1;
-        return newIndex < 0 ? (selected == null ? undefined : selected.length) - 1 : newIndex;
+        return newIndex < 0 ? (selected == null ? void 0 : selected.length) - 1 : newIndex;
       });
     }
     if (key === "ArrowRight") {
       setFocusedMultiSelectIndex(prev => {
         const newIndex = prev + 1;
-        return newIndex >= (selected == null ? undefined : selected.length) ? 0 : newIndex;
+        return newIndex >= (selected == null ? void 0 : selected.length) ? 0 : newIndex;
       });
     }
     if (inputValue === "" && key === "Backspace") {
       let newSelected = [];
       if (focusedMultiSelectIndex < 0) {
-        newSelected = selected == null ? undefined : selected.slice(0, -1);
+        newSelected = selected == null ? void 0 : selected.slice(0, -1);
       } else {
         newSelected = selected.filter((_, index) => index !== focusedMultiSelectIndex);
       }
@@ -2633,7 +2647,7 @@ function useMultipleSelection({
       setFocusedMultiSelectIndex(-1);
     }
     if (focusedMultiSelectIndex >= 0 && key === "Enter") {
-      const newSelected = selected == null ? undefined : selected.filter((_, index) => index !== focusedMultiSelectIndex);
+      const newSelected = selected == null ? void 0 : selected.filter((_, index) => index !== focusedMultiSelectIndex);
       setSelected(newSelected);
       setFocusedMultiSelectIndex(-1);
     }
@@ -2674,11 +2688,11 @@ function ComboboxLiveRegion({
   const lastSelectedValue = React__namespace.useRef(null);
   const [message, setMessage] = React__namespace.useState("");
   React__namespace.useEffect(() => {
-    if (selected && selected !== (lastSelectedValue == null ? undefined : lastSelectedValue.current)) {
+    if (selected && selected !== (lastSelectedValue == null ? void 0 : lastSelectedValue.current)) {
       var _lastSelectedValue$cu, _lastSelectedValue$cu2, _selected$length;
       let newMessage = "";
-      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;
+      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null || (_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;
       if (Array.isArray(selected) && selected.length > 0) {
         const currentLabels = selectedLabels.join(", ");
         const selectedState = selectedLength > lastSelectedLength ? labels.selected(currentLabels) : labels.unselected(currentLabels);
@@ -2764,7 +2778,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, {
+    return React__namespace.createElement(Pill__default["default"], {
       id: uniqueId,
       key: uniqueId,
       testId: testId ? `${testId}-pill-${index}` : undefined,
@@ -2775,7 +2789,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,
+      icon: xIcon__default["default"],
       size: "small"
     })));
   }));
@@ -2935,7 +2949,7 @@ function Combobox({
     disableSpaceSelection: true,
     selectionType
   });
-  const itemFromSelected = (_renderList$find = renderList.find(item => item.props.value === selected)) == null ? undefined : _renderList$find.props;
+  const itemFromSelected = (_renderList$find = renderList.find(item => item.props.value === selected)) == null ? void 0 : _renderList$find.props;
   const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
   const initialValue = typeof value === "string" ? labelFromSelected : "";
   const [inputValue, setInputValue] = React__namespace.useState(initialValue);
@@ -2972,7 +2986,7 @@ function Combobox({
     }
     if (selectionType === "single" && typeof value === "string") {
       var _renderList$find2;
-      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? undefined : _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) : "";
       updateOpenState(false, labelFromSelected);
     } else if (Array.isArray(value)) {
@@ -3039,7 +3053,7 @@ function Combobox({
     if (Array.isArray(selected)) {
       return selected.map(value => {
         const item = children.find(item => item.props.value === value);
-        return item ? getLabel(item == null ? undefined : item.props) : "";
+        return item ? getLabel(item == null ? void 0 : item.props) : "";
       });
     }
     return [labelFromSelected];
@@ -3049,7 +3063,7 @@ function Combobox({
     if (!startIcon) {
       return null;
     }
-    const startIconElement = React__namespace.cloneElement(startIcon, _extends({
+    const startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
       size: "small"
     }, startIcon.props, {
       color: disabled ? wonderBlocksTokens.color.offBlack32 : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : wonderBlocksTokens.semanticColor.icon.primary
@@ -3060,7 +3074,7 @@ function Combobox({
   };
   const pillIdPrefix = `${uniqueId}-pill-`;
   const textFieldId = React.useId();
-  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null || (_renderList$focusedIn = _renderList$focusedIn.props) == null ? undefined : _renderList$focusedIn.id : pillIdPrefix + focusedMultiSelectIndex;
+  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null || (_renderList$focusedIn = _renderList$focusedIn.props) == null ? void 0 : _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: () => {
@@ -3112,17 +3126,17 @@ function Combobox({
     ref: comboboxRef,
     autoComplete: "off",
     role: "combobox"
-  }), inputValue && !disabled && React__namespace.createElement(IconButton, {
-    icon: xIcon,
+  }), inputValue && !disabled && React__namespace.createElement(IconButton__default["default"], {
+    icon: xIcon__default["default"],
     onClick: handleClearClick,
     kind: "tertiary",
     size: "small",
     style: [styles.button, styles.clearButton],
     "aria-label": labels.clearSelection,
     testId: testId ? `${testId}-clear` : undefined
-  }), React__namespace.createElement(IconButton, {
+  }), React__namespace.createElement(IconButton__default["default"], {
     disabled: disabled,
-    icon: caretDownIcon$1,
+    icon: caretDownIcon__default$1["default"],
     onClick: e => {
       e.stopPropagation();
       updateOpenState(!openState);
@@ -3139,13 +3153,13 @@ function Combobox({
     "aria-label": labels.comboboxButton
   })), openState && React__namespace.createElement(DropdownPopper, {
     alignment: "left",
-    referenceElement: rootNodeRef == null ? undefined : rootNodeRef.current
+    referenceElement: rootNodeRef == null ? void 0 : 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 || (_rootNodeRef$current = rootNodeRef.current) == null ? undefined : _rootNodeRef$current.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current.offsetWidth
       }],
       horizontalRule: "none"
     }) : React__namespace.createElement(Listbox, {
@@ -3153,7 +3167,7 @@ function Combobox({
       tabIndex: -1,
       selectionType: selectionType,
       style: [styles.listbox, isReferenceHidden && styles.hidden, {
-        minWidth: rootNodeRef == null || (_rootNodeRef$current2 = rootNodeRef.current) == null ? undefined : _rootNodeRef$current2.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current2 = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current2.offsetWidth
       }],
       testId: testId ? `${testId}-listbox` : undefined,
       "aria-label": labels.listbox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,17 +13,17 @@
   },
   "dependencies": {
     "@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"
+    "@khanacademy/wonder-blocks-cell": "4.1.1",
+    "@khanacademy/wonder-blocks-clickable": "6.1.1",
+    "@khanacademy/wonder-blocks-core": "12.1.1",
+    "@khanacademy/wonder-blocks-icon": "5.1.1",
+    "@khanacademy/wonder-blocks-layout": "3.1.1",
+    "@khanacademy/wonder-blocks-modal": "7.1.1",
+    "@khanacademy/wonder-blocks-pill": "3.1.1",
+    "@khanacademy/wonder-blocks-search-field": "5.1.1",
+    "@khanacademy/wonder-blocks-timing": "7.0.1",
+    "@khanacademy/wonder-blocks-tokens": "4.2.1",
+    "@khanacademy/wonder-blocks-typography": "3.1.1"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -37,7 +37,7 @@
     "react-window": "^1.8.11"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.0"
+    "@khanacademy/wb-dev-build-settings": "2.1.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"