@khanacademy/wonder-blocks-dropdown 8.0.2 → 9.1.0

package/dist/es/index.js

@@ -6,7 +6,7 @@ import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
 import { spacing, color, mix, fade, semanticColor, border, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { View, addStyle, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
+import { View, addStyle, keys, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
@@ -25,13 +25,6 @@ import { TextField } from '@khanacademy/wonder-blocks-form';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import Pill from '@khanacademy/wonder-blocks-pill';
 
-const keys = {
-  escape: "Escape",
-  tab: "Tab",
-  space: " ",
-  up: "ArrowUp",
-  down: "ArrowDown"
-};
 const selectDropdownStyle = {
   marginTop: spacing.xSmall_8,
   marginBottom: spacing.xSmall_8
@@ -103,10 +96,10 @@ class ActionItem extends React.Component {
     const labelComponent = typeof label === "string" ? React.createElement(LabelMedium, {
       lang: lang,
       style: styles$c.label
-    }, label) : React.cloneElement(label, _extends({
+    }, label) : (React.cloneElement(label, _extends({
       lang,
       style: styles$c.label
-    }, label.props));
+    }, label.props)));
     return React.createElement(CompactCell, {
       disabled: disabled,
       horizontalRule: horizontalRule,
@@ -239,7 +232,7 @@ const styles$a = StyleSheet.create({
 });
 
 const _excluded$5 = ["disabled", "label", "selected", "testId", "leftAccessory", "horizontalRule", "parentComponent", "rightAccessory", "style", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant", "role"];
-const StyledListItem = addStyle("li");
+const StyledLi = addStyle("li");
 class OptionItem extends React.Component {
   constructor(...args) {
     super(...args);
@@ -327,7 +320,7 @@ class OptionItem extends React.Component {
       selected
     } = this.props;
     if (parentComponent === "listbox") {
-      return React.createElement(StyledListItem, {
+      return React.createElement(StyledLi, {
         onMouseDown: e => {
           e.preventDefault();
         },
@@ -347,7 +340,7 @@ OptionItem.defaultProps = {
   disabled: false,
   focused: false,
   horizontalRule: "none",
-  onToggle: () => void 0,
+  onToggle: () => undefined,
   role: "option",
   selected: false
 };
@@ -462,10 +455,11 @@ class SeparatorItem extends React.Component {
     return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
   }
   render() {
-    return React.createElement(View, {
-      style: [styles$8.separator, this.props.style],
-      "aria-hidden": "true"
-    });
+    return (React.createElement(View, {
+        style: [styles$8.separator, this.props.style],
+        "aria-hidden": "true"
+      })
+    );
   }
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
@@ -487,6 +481,7 @@ class DropdownOpener extends React.Component {
     };
   }
   renderAnchorChildren(eventState, clickableChildrenProps) {
+    var _childrenProps$ariaL;
     const {
       disabled,
       testId,
@@ -496,6 +491,7 @@ class DropdownOpener extends React.Component {
       "aria-haspopup": ariaHasPopUp,
       "aria-required": ariaRequired,
       id,
+      role,
       onBlur
     } = this.props;
     const renderedChildren = this.props.children(_extends({}, eventState, {
@@ -504,10 +500,13 @@ class DropdownOpener extends React.Component {
     }));
     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.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,
@@ -612,7 +611,7 @@ class DropdownCoreVirtualized extends React.Component {
   }
   setWidth() {
     const rootNode = ReactDOM.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({
@@ -829,10 +828,10 @@ class DropdownCore extends React.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;
@@ -1511,7 +1510,7 @@ const _excluded$3 = ["text", "opened"];
 class ActionMenu extends React.Component {
   constructor(...args) {
     super(...args);
-    this.openerElement = void 0;
+    this.openerElement = undefined;
     this.state = {
       opened: false
     };
@@ -1618,7 +1617,8 @@ class ActionMenu extends React.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
@@ -1676,7 +1676,7 @@ const styles$5 = 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 = addStyle("button");
 class SelectOpener extends React.Component {
   constructor(props) {
@@ -1688,8 +1688,8 @@ class SelectOpener extends React.Component {
       this.props.onOpenChanged(!open);
     };
     this.handleKeyDown = e => {
-      const keyCode = e.key;
-      if (keyCode === "Enter" || keyCode === " ") {
+      const keyName = e.key;
+      if (keyName === keys.enter || keyName === keys.space) {
         this.setState({
           pressed: true
         });
@@ -1697,8 +1697,8 @@ class SelectOpener extends React.Component {
       }
     };
     this.handleKeyUp = e => {
-      const keyCode = e.key;
-      if (keyCode === "Enter" || keyCode === " ") {
+      const keyName = e.key;
+      if (keyName === keys.enter || keyName === keys.space) {
         this.setState({
           pressed: false
         });
@@ -1719,6 +1719,7 @@ class SelectOpener extends React.Component {
         isPlaceholder,
         open,
         testId,
+        "aria-label": ariaLabel,
         "aria-required": ariaRequired,
         onBlur
       } = _this$props,
@@ -1730,19 +1731,23 @@ class SelectOpener extends React.Component {
       "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.createElement(LabelMedium, {
       style: styles$4.text
-    }, children || "\u00A0"), React.createElement(PhosphorIcon, {
+    }, children || React.createElement("span", {
+      "aria-hidden": "true"
+    }, "\xA0")), React.createElement(PhosphorIcon, {
       icon: caretDownIcon,
       color: iconColor,
       size: "small",
@@ -1927,7 +1932,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.useRef(0);
   const {
@@ -1954,6 +1959,7 @@ const SingleSelect = props => {
       opened,
       style,
       className,
+      "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled = false,
@@ -2065,16 +2071,19 @@ const SingleSelect = props => {
     }, uniqueOpenerId => {
       return opener ? React.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.createElement(SelectOpener, _extends({}, sharedProps, {
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         disabled: isDisabled,
         id: uniqueOpenerId,
@@ -2121,7 +2130,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,
@@ -2139,6 +2148,7 @@ const MultiSelect = props => {
       shortcuts = false,
       style,
       className,
+      "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled = false,
@@ -2213,7 +2223,7 @@ const MultiSelect = props => {
     onChange([]);
     onSelectedValuesChangeValidation();
   };
-  const getMenuText = children => {
+  const getMenuTextOrNode = children => {
     const {
       noneSelected,
       someSelected,
@@ -2227,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 ? void 0 : selectedItem.props);
+          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? undefined : selectedItem.props);
           if (selectedLabel) {
             return selectedLabel;
           } else {
@@ -2339,33 +2349,36 @@ const MultiSelect = props => {
     const {
       noneSelected
     } = labels;
-    const menuText = getMenuText(allChildren);
+    const menuContent = getMenuTextOrNode(allChildren);
     const dropdownOpener = React.createElement(Id, {
       id: id
     }, uniqueOpenerId => {
       return opener ? React.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.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;
   };
@@ -2532,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 ? 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.cloneElement(component, {
         key: index,
@@ -2579,19 +2592,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);
       }
@@ -2599,7 +2612,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);
     }
@@ -2640,11 +2653,11 @@ function ComboboxLiveRegion({
   const lastSelectedValue = React.useRef(null);
   const [message, setMessage] = React.useState("");
   React.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);
@@ -2798,7 +2811,7 @@ function StandaloneListbox(props) {
   });
   React.useEffect(() => {
     if (selected && selected !== value) {
-      onChange == null ? void 0 : onChange(selected);
+      onChange == null || onChange(selected);
     }
   }, [onChange, selected, value]);
   return React.createElement(View, {
@@ -2870,7 +2883,7 @@ function Combobox({
   testId,
   value = ""
 }) {
-  var _renderList$find, _renderList$focusedIn, _renderList$focusedIn2;
+  var _renderList$find, _renderList$focusedIn;
   const generatedUniqueId = useId();
   const uniqueId = id != null ? id : generatedUniqueId;
   const comboboxRef = React.useRef(null);
@@ -2901,7 +2914,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.useState(initialValue);
@@ -2929,16 +2942,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.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)) {
@@ -2992,20 +3005,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.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.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];
@@ -3026,7 +3039,7 @@ function Combobox({
   };
   const pillIdPrefix = `${uniqueId}-pill-`;
   const textFieldId = 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.createElement(React.Fragment, null, React.createElement(View, {
     onClick: () => {
@@ -3105,13 +3118,13 @@ function Combobox({
     "aria-label": labels.comboboxButton
   })), openState && React.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.createElement(React.Fragment, null, renderList.length === 0 ? React.createElement(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.createElement(Listbox, {
@@ -3119,7 +3132,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/dist/index.d.ts

@@ -6,7 +6,7 @@ import SingleSelect from "./components/single-select";
 import MultiSelect from "./components/multi-select";
 import Combobox from "./components/combobox";
 import Listbox from "./components/listbox";
-import type { Labels } from "./components/multi-select";
-import type { SingleSelectLabels } from "./components/single-select";
+import type { LabelsValues } from "./components/multi-select";
+import type { SingleSelectLabelsValues } from "./components/single-select";
 export { ActionItem, OptionItem, SeparatorItem, ActionMenu, SingleSelect, MultiSelect, Combobox, Listbox, };
-export type { Labels, SingleSelectLabels };
+export type { LabelsValues, SingleSelectLabelsValues };