@khanacademy/wonder-blocks-dropdown 8.0.2 → 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,29 +39,13 @@ 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 keys = {
-  escape: "Escape",
-  tab: "Tab",
-  space: " ",
-  up: "ArrowUp",
-  down: "ArrowDown"
-};
 const selectDropdownStyle = {
   marginTop: wonderBlocksTokens.spacing.xSmall_8,
   marginBottom: wonderBlocksTokens.spacing.xSmall_8
@@ -138,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,
@@ -207,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]
   });
@@ -238,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: [{
@@ -274,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);
@@ -316,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,
@@ -362,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();
         },
@@ -382,7 +361,7 @@ OptionItem.defaultProps = {
   disabled: false,
   focused: false,
   horizontalRule: "none",
-  onToggle: () => void 0,
+  onToggle: () => undefined,
   role: "option",
   selected: false
 };
@@ -497,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;
@@ -522,6 +502,7 @@ class DropdownOpener extends React__namespace.Component {
     };
   }
   renderAnchorChildren(eventState, clickableChildrenProps) {
+    var _childrenProps$ariaL;
     const {
       disabled,
       testId,
@@ -531,18 +512,22 @@ class DropdownOpener extends React__namespace.Component {
       "aria-haspopup": ariaHasPopUp,
       "aria-required": ariaRequired,
       id,
+      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);
-    return React__namespace.cloneElement(renderedChildren, _extends__default["default"]({}, clickableChildrenProps, {
+    const renderedAriaLabel = (_childrenProps$ariaL = childrenProps["aria-label"]) != null ? _childrenProps$ariaL : this.props["aria-label"];
+    return React__namespace.cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
+      "aria-label": renderedAriaLabel != null ? renderedAriaLabel : undefined,
       "aria-invalid": this.props.error,
       disabled,
       "aria-controls": ariaControls,
+      role,
       id,
       "aria-expanded": opened ? "true" : "false",
       "aria-haspopup": ariaHasPopUp,
@@ -587,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,
@@ -647,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({
@@ -727,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`
   });
@@ -864,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;
@@ -897,7 +882,7 @@ class DropdownCore extends React__namespace.Component {
         this.handleKeyDownDebounced(this.textSuggestion);
       }
       if (!open) {
-        if (key === keys.down) {
+        if (key === wonderBlocksCore.keys.down) {
           event.preventDefault();
           onOpenChanged(true);
           return;
@@ -905,24 +890,24 @@ class DropdownCore extends React__namespace.Component {
         return;
       }
       switch (key) {
-        case keys.tab:
+        case wonderBlocksCore.keys.tab:
           if (this.isSearchFieldFocused() && searchText) {
             return;
           }
           this.restoreTabOrder();
           onOpenChanged(false);
           return;
-        case keys.space:
+        case wonderBlocksCore.keys.space:
           if (this.isSearchFieldFocused()) {
             return;
           }
           event.preventDefault();
           return;
-        case keys.up:
+        case wonderBlocksCore.keys.up:
           event.preventDefault();
           this.focusPreviousItem();
           return;
-        case keys.down:
+        case wonderBlocksCore.keys.down:
           event.preventDefault();
           this.focusNextItem();
           return;
@@ -935,13 +920,13 @@ class DropdownCore extends React__namespace.Component {
       } = this.props;
       const key = event.key;
       switch (key) {
-        case keys.space:
+        case wonderBlocksCore.keys.space:
           if (this.isSearchFieldFocused()) {
             return;
           }
           event.preventDefault();
           return;
-        case keys.escape:
+        case wonderBlocksCore.keys.escape:
           if (open) {
             event.stopPropagation();
             this.restoreTabOrder();
@@ -1012,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)
@@ -1052,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)
         });
       }
     }
@@ -1234,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);
@@ -1255,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: () => {
@@ -1278,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,
@@ -1431,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;
@@ -1439,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,
@@ -1455,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"
     }));
   }
@@ -1546,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
     };
@@ -1611,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
@@ -1619,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,
@@ -1653,13 +1638,14 @@ class ActionMenu extends React__namespace.Component {
       text: menuText,
       ref: this.handleOpenerRef,
       testId: opener ? undefined : testId,
-      opened: this.state.opened
+      opened: this.state.opened,
+      role: "button"
     }, opener ? opener : openerProps => {
       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
@@ -1711,7 +1697,7 @@ const styles$5 = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-required", "onBlur", "onOpenChanged"];
+const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-label", "aria-required", "onBlur", "onOpenChanged"];
 const StyledButton = wonderBlocksCore.addStyle("button");
 class SelectOpener extends React__namespace.Component {
   constructor(props) {
@@ -1723,8 +1709,8 @@ class SelectOpener extends React__namespace.Component {
       this.props.onOpenChanged(!open);
     };
     this.handleKeyDown = e => {
-      const keyCode = e.key;
-      if (keyCode === "Enter" || keyCode === " ") {
+      const keyName = e.key;
+      if (keyName === wonderBlocksCore.keys.enter || keyName === wonderBlocksCore.keys.space) {
         this.setState({
           pressed: true
         });
@@ -1732,8 +1718,8 @@ class SelectOpener extends React__namespace.Component {
       }
     };
     this.handleKeyUp = e => {
-      const keyCode = e.key;
-      if (keyCode === "Enter" || keyCode === " ") {
+      const keyName = e.key;
+      if (keyName === wonderBlocksCore.keys.enter || keyName === wonderBlocksCore.keys.space) {
         this.setState({
           pressed: false
         });
@@ -1754,31 +1740,36 @@ class SelectOpener extends React__namespace.Component {
         isPlaceholder,
         open,
         testId,
+        "aria-label": ariaLabel,
         "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,
+      "aria-label": ariaLabel != null ? ariaLabel : undefined,
       "aria-required": ariaRequired,
       "aria-haspopup": "listbox",
       "data-testid": testId,
       id: id,
-      style: style,
+      role: "combobox",
       type: "button",
+      style: style,
       onClick: !disabled ? this.handleClick : undefined,
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
       onKeyUp: !disabled ? this.handleKeyUp : undefined,
       onBlur: onBlur
     }), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       style: styles$4.text
-    }, children || "\u00A0"), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      icon: caretDownIcon__default["default"],
+    }, children || React__namespace.createElement("span", {
+      "aria-hidden": "true"
+    }, "\xA0")), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+      icon: caretDownIcon,
       color: iconColor,
       size: "small",
       style: styles$4.caret,
@@ -1851,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
@@ -1883,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)
     },
@@ -1962,7 +1953,7 @@ function useSelectValidation({
   };
 }
 
-const _excluded$1 = ["children", "error", "id", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
+const _excluded$1 = ["children", "error", "id", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-label", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
 const SingleSelect = props => {
   const selectedIndex = React__namespace.useRef(0);
   const {
@@ -1989,6 +1980,7 @@ const SingleSelect = props => {
       opened,
       style,
       className,
+      "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled = false,
@@ -1998,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();
@@ -2100,16 +2092,19 @@ const SingleSelect = props => {
     }, uniqueOpenerId => {
       return opener ? React__namespace.createElement(DropdownOpener, {
         id: uniqueOpenerId,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         "aria-haspopup": "listbox",
         onClick: handleClick,
         disabled: isDisabled,
         ref: handleOpenerRef,
+        role: "combobox",
         text: menuText,
         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,
         id: uniqueOpenerId,
@@ -2156,7 +2151,7 @@ const SingleSelect = props => {
   }));
 };
 
-const _excluded = ["id", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
+const _excluded = ["id", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-label", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
 const MultiSelect = props => {
   const {
       id,
@@ -2174,6 +2169,7 @@ const MultiSelect = props => {
       shortcuts = false,
       style,
       className,
+      "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled = false,
@@ -2185,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([]);
@@ -2248,7 +2244,7 @@ const MultiSelect = props => {
     onChange([]);
     onSelectedValuesChangeValidation();
   };
-  const getMenuText = children => {
+  const getMenuTextOrNode = children => {
     const {
       noneSelected,
       someSelected,
@@ -2262,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 {
@@ -2374,33 +2370,36 @@ const MultiSelect = props => {
     const {
       noneSelected
     } = labels;
-    const menuText = getMenuText(allChildren);
+    const menuContent = getMenuTextOrNode(allChildren);
     const dropdownOpener = React__namespace.createElement(wonderBlocksCore.Id, {
       id: id
     }, uniqueOpenerId => {
       return opener ? React__namespace.createElement(DropdownOpener, {
         id: uniqueOpenerId,
         error: hasError,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         "aria-haspopup": "listbox",
         onClick: handleClick,
         onBlur: onOpenerBlurValidation,
         disabled: isDisabled,
         ref: handleOpenerRef,
-        text: menuText,
+        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,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
-        isPlaceholder: menuText === noneSelected,
+        isPlaceholder: menuContent === noneSelected,
         onOpenChanged: handleOpenChanged,
         onBlur: onOpenerBlurValidation,
         open: open,
         ref: handleOpenerRef,
         testId: testId
-      }), menuText);
+      }), menuContent);
     });
     return dropdownOpener;
   };
@@ -2567,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,
@@ -2614,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);
       }
@@ -2634,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);
     }
@@ -2675,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);
@@ -2765,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,
@@ -2776,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"
     })));
   }));
@@ -2833,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, {
@@ -2905,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);
@@ -2936,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);
@@ -2964,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)) {
@@ -3027,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];
@@ -3050,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
@@ -3061,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: () => {
@@ -3113,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);
@@ -3140,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, {
@@ -3154,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,