@khanacademy/wonder-blocks-dropdown 5.2.1 → 5.3.1

package/dist/es/index.js

@@ -4,7 +4,7 @@ import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
 import * as tokens from '@khanacademy/wonder-blocks-tokens';
 import { spacing, color, mix, fade } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
-import { View, addStyle } from '@khanacademy/wonder-blocks-core';
+import { View, addStyle, useUniqueIdWithMock } 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';
@@ -88,13 +88,13 @@ class ActionItem extends React.Component {
       style,
       testId
     } = this.props;
-    const defaultStyle = [styles$8.wrapper, style];
+    const defaultStyle = [styles$9.wrapper, style];
     const labelComponent = typeof label === "string" ? React.createElement(LabelMedium, {
       lang: lang,
-      style: styles$8.label
+      style: styles$9.label
     }, label) : React.cloneElement(label, _extends({
       lang,
-      style: styles$8.label
+      style: styles$9.label
     }, label.props));
     return React.createElement(CompactCell, {
       disabled: disabled,
@@ -102,7 +102,7 @@ class ActionItem extends React.Component {
       rootStyle: defaultStyle,
       leftAccessory: leftAccessory,
       rightAccessory: rightAccessory,
-      style: [styles$8.shared, indent && styles$8.indent],
+      style: [styles$9.shared, indent && styles$9.indent],
       role: role,
       testId: testId,
       title: labelComponent,
@@ -119,7 +119,7 @@ ActionItem.defaultProps = {
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
-const styles$8 = StyleSheet.create({
+const styles$9 = StyleSheet.create({
   wrapper: {
     minHeight: DROPDOWN_ITEM_HEIGHT,
     touchAction: "manipulation",
@@ -176,10 +176,10 @@ const Check = function Check(props) {
   return React.createElement(PhosphorIcon, {
     icon: checkIcon,
     size: "small",
-    style: [styles$7.bounds, !selected && styles$7.hide]
+    style: [styles$8.bounds, !selected && styles$8.hide]
   });
 };
-const styles$7 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   bounds: {
     alignSelf: "center",
     height: spacing.medium_16,
@@ -203,7 +203,7 @@ const Checkbox = function Checkbox(props) {
   } = props;
   return React.createElement(View, {
     className: "checkbox",
-    style: [styles$6.checkbox, selected && !disabled && styles$6.noBorder, disabled && styles$6.disabledCheckbox]
+    style: [styles$7.checkbox, selected && !disabled && styles$7.noBorder, disabled && styles$7.disabledCheckbox]
   }, selected && React.createElement(PhosphorIcon, {
     icon: checkIcon,
     size: "small",
@@ -212,10 +212,10 @@ const Checkbox = function Checkbox(props) {
       width: spacing.small_12,
       height: spacing.small_12,
       margin: spacing.xxxxSmall_2
-    }, disabled && selected && styles$6.disabledCheckFormatting]
+    }, disabled && selected && styles$7.disabledCheckFormatting]
   }));
 };
-const styles$6 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   checkbox: {
     alignSelf: "center",
     minHeight: spacing.medium_16,
@@ -240,7 +240,8 @@ const styles$6 = StyleSheet.create({
   }
 });
 
-const _excluded$5 = ["disabled", "label", "role", "selected", "testId", "style", "leftAccessory", "horizontalRule", "rightAccessory", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant"];
+const _excluded$5 = ["disabled", "label", "selected", "testId", "leftAccessory", "horizontalRule", "parentComponent", "rightAccessory", "style", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant", "role"];
+const StyledListItem = addStyle("li");
 class OptionItem extends React.Component {
   constructor(...args) {
     super(...args);
@@ -266,31 +267,32 @@ class OptionItem extends React.Component {
       return Checkbox;
     }
   }
-  render() {
+  renderCell() {
     const _this$props = this.props,
       {
         disabled,
         label,
-        role,
         selected,
         testId,
-        style,
         leftAccessory,
         horizontalRule,
+        parentComponent,
         rightAccessory,
+        style,
         subtitle1,
-        subtitle2
+        subtitle2,
+        role
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
     const CheckComponent = this.getCheckComponent();
-    const defaultStyle = [styles$5.item, style];
+    const defaultStyle = [styles$6.item, style];
     return React.createElement(DetailCell, _extends({
       disabled: disabled,
       horizontalRule: horizontalRule,
-      rootStyle: defaultStyle,
-      style: styles$5.itemContainer,
-      "aria-selected": selected ? "true" : "false",
-      role: role,
+      rootStyle: parentComponent === "listbox" ? styles$6.listboxItem : defaultStyle,
+      style: styles$6.itemContainer,
+      "aria-selected": parentComponent !== "listbox" && selected ? "true" : "false",
+      role: parentComponent !== "listbox" ? role : undefined,
       testId: testId,
       leftAccessory: React.createElement(React.Fragment, null, leftAccessory ? React.createElement(View, {
         style: {
@@ -310,17 +312,42 @@ class OptionItem extends React.Component {
         className: "subtitle"
       }, subtitle1) : undefined,
       title: React.createElement(LabelMedium, {
-        style: styles$5.label
+        style: styles$6.label
       }, label),
       subtitle2: subtitle2 ? React.createElement(LabelSmall, {
         className: "subtitle"
       }, subtitle2) : undefined,
-      onClick: this.handleClick
+      onClick: parentComponent !== "listbox" ? this.handleClick : undefined
     }, sharedProps));
   }
+  render() {
+    const {
+      disabled,
+      focused,
+      parentComponent,
+      role,
+      selected
+    } = this.props;
+    if (parentComponent === "listbox") {
+      return React.createElement(StyledListItem, {
+        onMouseDown: e => {
+          e.preventDefault();
+        },
+        onClick: this.handleClick,
+        style: [styles$6.reset, styles$6.item, focused && styles$6.itemFocused, disabled && styles$6.itemDisabled],
+        role: role,
+        "aria-selected": selected ? "true" : "false",
+        "aria-disabled": disabled ? "true" : "false",
+        id: this.props.id,
+        tabIndex: -1
+      }, this.renderCell());
+    }
+    return this.renderCell();
+  }
 }
 OptionItem.defaultProps = {
   disabled: false,
+  focused: false,
   horizontalRule: "none",
   onToggle: () => void 0,
   role: "option",
@@ -332,14 +359,33 @@ const {
   white,
   offBlack
 } = color;
-const styles$5 = StyleSheet.create({
+const focusedStyle = {
+  borderRadius: spacing.xxxSmall_4,
+  outline: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
+  outlineOffset: -spacing.xxxxSmall_2
+};
+const styles$6 = StyleSheet.create({
+  reset: {
+    margin: 0,
+    padding: 0,
+    border: 0,
+    background: "none",
+    outline: "none",
+    fontSize: "100%",
+    verticalAlign: "baseline",
+    textAlign: "left",
+    textDecoration: "none",
+    listStyle: "none",
+    cursor: "pointer"
+  },
+  listboxItem: {
+    backgroundColor: "transparent",
+    color: "inherit"
+  },
   item: {
+    backgroundColor: color.white,
     minHeight: "unset",
-    ":focus": {
-      borderRadius: spacing.xxxSmall_4,
-      outline: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
-      outlineOffset: -spacing.xxxxSmall_2
-    },
+    ":focus": focusedStyle,
     ":focus-visible": {
       overflow: "visible"
     },
@@ -347,6 +393,16 @@ const styles$5 = StyleSheet.create({
       color: white,
       background: blue
     },
+    [":active[aria-selected=false]"]: {},
+    [":hover[aria-disabled=true]"]: {
+      cursor: "not-allowed"
+    },
+    [":is([aria-disabled=true])"]: {
+      color: color.offBlack32,
+      ":focus-visible": {
+        outline: "none"
+      }
+    },
     ["@media not (hover: hover)"]: {
       [":hover[aria-disabled=false]"]: {
         color: white,
@@ -382,6 +438,10 @@ const styles$5 = StyleSheet.create({
       color: mix(color.fadedBlue16, white)
     }
   },
+  itemFocused: focusedStyle,
+  itemDisabled: {
+    outlineColor: color.offBlack32
+  },
   itemContainer: {
     minHeight: "unset",
     padding: `${spacing.xSmall_8 + spacing.xxxxSmall_2}px ${spacing.xSmall_8}px`,
@@ -405,13 +465,13 @@ class SeparatorItem extends React.Component {
   }
   render() {
     return React.createElement(View, {
-      style: [styles$4.separator, this.props.style],
+      style: [styles$5.separator, this.props.style],
       "aria-hidden": "true"
     });
   }
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const styles$4 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   separator: {
     boxShadow: `0 -1px ${color.offBlack16}`,
     height: 1,
@@ -1077,7 +1137,7 @@ class DropdownCore extends React.Component {
     const numResults = items.length;
     if (numResults === 0) {
       return React.createElement(LabelMedium, {
-        style: styles$3.noResult,
+        style: styles$4.noResult,
         testId: "dropdown-core-no-results"
       }, noResults);
     }
@@ -1149,7 +1209,7 @@ class DropdownCore extends React.Component {
       onChange: this.handleSearchTextChanged,
       placeholder: labels.filter,
       ref: this.searchFieldRef,
-      style: styles$3.searchInputStyle,
+      style: styles$4.searchInputStyle,
       value: searchText || ""
     });
   }
@@ -1167,11 +1227,11 @@ class DropdownCore extends React.Component {
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
     return React.createElement(View, {
       onMouseUp: this.handleDropdownMouseUp,
-      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, dropdownStyle],
+      style: [styles$4.dropdown, light && styles$4.light, isReferenceHidden && styles$4.hidden, dropdownStyle],
       testId: "dropdown-core-container"
     }, isFilterable && this.renderSearchField(), React.createElement(View, {
       role: role,
-      style: [styles$3.listboxOrMenu, {
+      style: [styles$4.listboxOrMenu, {
         minWidth: minDropdownWidth
       }],
       "aria-invalid": role === "listbox" ? ariaInvalid : undefined,
@@ -1205,7 +1265,7 @@ class DropdownCore extends React.Component {
       "aria-live": "polite",
       "aria-atomic": "true",
       "aria-relevant": "additions text",
-      style: styles$3.srOnly,
+      style: styles$4.srOnly,
       "data-testid": "dropdown-live-region"
     }, open && labels.someResults(totalItems));
   }
@@ -1219,7 +1279,7 @@ class DropdownCore extends React.Component {
     return React.createElement(View, {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
-      style: [styles$3.menuWrapper, style],
+      style: [styles$4.menuWrapper, style],
       className: className
     }, this.renderLiveRegion(), opener, open && this.renderDropdown());
   }
@@ -1237,7 +1297,7 @@ DropdownCore.defaultProps = {
   light: false,
   selectionType: "single"
 };
-const styles$3 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   menuWrapper: {
     width: "fit-content"
   },
@@ -1370,11 +1430,11 @@ const sharedStyles = StyleSheet.create({
     position: "absolute"
   }
 });
-const styles$2 = {};
+const styles$3 = {};
 const _generateStyles$1 = localColor => {
   const buttonType = localColor;
-  if (styles$2[buttonType]) {
-    return styles$2[buttonType];
+  if (styles$3[buttonType]) {
+    return styles$3[buttonType];
   }
   const {
     offBlack32
@@ -1406,8 +1466,8 @@ const _generateStyles$1 = localColor => {
       cursor: "default"
     }
   };
-  styles$2[buttonType] = StyleSheet.create(newStyles);
-  return styles$2[buttonType];
+  styles$3[buttonType] = StyleSheet.create(newStyles);
+  return styles$3[buttonType];
 };
 
 const _excluded$3 = ["text", "opened"];
@@ -1543,7 +1603,7 @@ class ActionMenu extends React.Component {
       items: items,
       openerElement: this.openerElement,
       onOpenChanged: this.handleOpenChanged,
-      dropdownStyle: [styles$1.menuTopSpace, dropdownStyle]
+      dropdownStyle: [styles$2.menuTopSpace, dropdownStyle]
     });
   }
 }
@@ -1551,7 +1611,7 @@ ActionMenu.defaultProps = {
   alignment: "left",
   disabled: false
 };
-const styles$1 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   caret: {
     marginLeft: 4
   },
@@ -1603,7 +1663,7 @@ class SelectOpener extends React.Component {
         pressed
       } = state;
       const iconColor = light ? disabled || pressed ? "currentColor" : tokens.color.white : disabled ? tokens.color.offBlack32 : tokens.color.offBlack64;
-      const style = [styles.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
+      const style = [styles$1.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
       return React.createElement(StyledButton, _extends({}, sharedProps, {
         "aria-expanded": open ? "true" : "false",
         "aria-haspopup": "listbox",
@@ -1613,12 +1673,12 @@ class SelectOpener extends React.Component {
         style: style,
         type: "button"
       }, childrenProps), React.createElement(LabelMedium, {
-        style: styles.text
+        style: styles$1.text
       }, children || "\u00A0"), React.createElement(PhosphorIcon, {
         icon: caretDownIcon,
         color: iconColor,
         size: "small",
-        style: styles.caret,
+        style: styles$1.caret,
         "aria-hidden": "true"
       }));
     });
@@ -1633,7 +1693,7 @@ SelectOpener.defaultProps = {
   light: false,
   isPlaceholder: false
 };
-const styles = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   shared: {
     position: "relative",
     display: "inline-flex",
@@ -2230,4 +2290,207 @@ MultiSelect.defaultProps = {
   selectedValues: []
 };
 
-export { ActionItem, ActionMenu, MultiSelect, OptionItem, SeparatorItem, SingleSelect };
+function updateMultipleSelection(previousSelection, value = "") {
+  if (!previousSelection) {
+    return [value];
+  }
+  return previousSelection.includes(value) ? previousSelection.filter(item => item !== value) : [...previousSelection, value];
+}
+
+function useListbox({
+  children: options,
+  disabled,
+  id,
+  selectionType = "single",
+  value
+}) {
+  const selectedValueIndex = React.useMemo(() => {
+    const firstValue = Array.isArray(value) ? value[0] : value;
+    if (!firstValue || firstValue === "") {
+      return 0;
+    }
+    return options.findIndex(item => item.props.value === firstValue);
+  }, [options, value]);
+  const [focusedIndex, setFocusedIndex] = React.useState(selectedValueIndex);
+  const [isListboxFocused, setIsListboxFocused] = React.useState(false);
+  const [selected, setSelected] = React.useState(value);
+  const focusItem = index => {
+    setFocusedIndex(index);
+  };
+  const focusPreviousItem = React.useCallback(() => {
+    if (focusedIndex === 0) {
+      focusItem(options.length - 1);
+    } else {
+      focusItem(focusedIndex - 1);
+    }
+  }, [options, focusedIndex]);
+  const focusNextItem = React.useCallback(() => {
+    if (focusedIndex === options.length - 1) {
+      focusItem(0);
+    } else {
+      focusItem(focusedIndex + 1);
+    }
+  }, [options, focusedIndex]);
+  const selectOption = React.useCallback(index => {
+    const optionItem = options[index];
+    if (optionItem.props.disabled) {
+      return;
+    }
+    if (selectionType === "single") {
+      setSelected(optionItem.props.value);
+    } else {
+      setSelected(prevSelected => {
+        const newSelectedValue = updateMultipleSelection(prevSelected, optionItem.props.value);
+        return newSelectedValue;
+      });
+    }
+  }, [options, selectionType]);
+  const handleKeyDown = React.useCallback(event => {
+    const {
+      key
+    } = event;
+    switch (key) {
+      case "ArrowUp":
+        event.preventDefault();
+        focusPreviousItem();
+        return;
+      case "ArrowDown":
+        event.preventDefault();
+        focusNextItem();
+        return;
+      case "Home":
+        event.preventDefault();
+        focusItem(0);
+        return;
+      case "End":
+        event.preventDefault();
+        focusItem(options.length - 1);
+        return;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        selectOption(focusedIndex);
+        return;
+    }
+  }, [focusNextItem, focusPreviousItem, focusedIndex, options, selectOption]);
+  const handleKeyUp = React.useCallback(event => {
+    switch (event.key) {
+      case " ":
+        event.preventDefault();
+        return;
+    }
+  }, []);
+  const handleFocus = React.useCallback(() => {
+    if (!disabled) {
+      setIsListboxFocused(true);
+    }
+  }, [disabled]);
+  const handleBlur = React.useCallback(() => {
+    if (!disabled) {
+      setIsListboxFocused(false);
+    }
+  }, [disabled]);
+  const handleClick = React.useCallback(value => {
+    const index = options.findIndex(item => item.props.value === value);
+    const isOptionDisabled = options[index].props.disabled;
+    if (disabled || isOptionDisabled) {
+      return;
+    }
+    focusItem(index);
+    selectOption(index);
+  }, [disabled, options, selectOption]);
+  const renderList = React.useMemo(() => {
+    return options.map((component, index) => {
+      const isSelected = (selected == null ? void 0 : selected.includes(component.props.value)) || false;
+      const optionId = id ? `${id}-option-${index}` : `option-${index}`;
+      return React.cloneElement(component, {
+        key: index,
+        focused: isListboxFocused && index === focusedIndex,
+        disabled: component.props.disabled || disabled || false,
+        selected: isSelected,
+        variant: selectionType === "single" ? "check" : "checkbox",
+        parentComponent: "listbox",
+        id: optionId,
+        onToggle: () => {
+          handleClick(component.props.value);
+        },
+        role: "option"
+      });
+    });
+  }, [options, selected, id, isListboxFocused, focusedIndex, disabled, selectionType, handleClick]);
+  return {
+    isListboxFocused,
+    focusedIndex,
+    renderList,
+    selected,
+    handleKeyDown,
+    handleKeyUp,
+    handleFocus,
+    handleBlur
+  };
+}
+
+function Listbox(props) {
+  const {
+    children,
+    disabled,
+    id,
+    onChange,
+    selectionType = "single",
+    style,
+    tabIndex = 0,
+    testId,
+    value,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  } = props;
+  const ids = useUniqueIdWithMock("listbox");
+  const uniqueId = id != null ? id : ids.get("id");
+  const {
+    focusedIndex,
+    isListboxFocused,
+    renderList,
+    selected,
+    handleKeyDown,
+    handleKeyUp,
+    handleFocus,
+    handleBlur
+  } = useListbox({
+    children,
+    disabled,
+    id: uniqueId,
+    selectionType,
+    value
+  });
+  React.useEffect(() => {
+    if (selected && selected !== value) {
+      onChange == null ? void 0 : onChange(selected);
+    }
+  }, [onChange, selected, value]);
+  return React.createElement(View, {
+    role: "listbox",
+    "aria-disabled": disabled,
+    id: uniqueId,
+    style: [styles.listbox, style, disabled && styles.disabled],
+    tabIndex: tabIndex,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    testId: testId,
+    "aria-activedescendant": isListboxFocused ? renderList[focusedIndex].props.id : undefined,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-multiselectable": selectionType === "multiple"
+  }, renderList);
+}
+const styles = StyleSheet.create({
+  listbox: {
+    outline: "none"
+  },
+  disabled: {
+    color: color.offBlack64
+  }
+});
+
+export { ActionItem, ActionMenu, Listbox, MultiSelect, OptionItem, SeparatorItem, SingleSelect };

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

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { MaybeValueOrValues, OptionItemComponent } from "../util/types";
+type Props = {
+    /**
+     * The list of items to display in the listbox.
+     */
+    children: Array<OptionItemComponent>;
+    /**
+     * Whether the listbox is disabled.
+     */
+    disabled: boolean | undefined;
+    /**
+     * The unique identifier of the listbox element.
+     */
+    id: string;
+    /**
+     * The value of the currently selected items.
+     */
+    value?: MaybeValueOrValues;
+    /**
+     * The type of selection that the listbox supports.
+     */
+    selectionType: "single" | "multiple";
+};
+/**
+ * Hook for managing the state of a listbox.
+ *
+ * It manages how the options are rendered and how the listbox behaves.
+ *
+ * This includes:
+ * - Keyboard navigation.
+ * - Selection management.
+ */
+export declare function useListbox({ children: options, disabled, id, selectionType, value, }: Props): {
+    isListboxFocused: boolean;
+    focusedIndex: number;
+    renderList: React.ReactElement<Pick<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
+        role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+    }> & {
+        label: import("../util/types").OptionLabel;
+        labelAsText?: string | undefined;
+        value: string;
+        disabled: boolean;
+        onClick?: (() => unknown) | undefined;
+        onToggle: (value: string) => unknown;
+        selected: boolean;
+        focused: boolean;
+        role: "menuitem" | "option";
+        testId?: string | undefined;
+        variant?: "checkbox" | "check" | undefined;
+        style?: import("@khanacademy/wonder-blocks-core").StyleType;
+        parentComponent?: "listbox" | "dropdown" | undefined;
+        id?: string | undefined;
+        horizontalRule: import("../../../wonder-blocks-cell/src/util/types").HorizontalRuleVariant | undefined;
+        leftAccessory?: React.ReactNode;
+        rightAccessory?: React.ReactNode;
+        subtitle1?: import("../../../wonder-blocks-cell/src/util/types").TypographyText | undefined;
+        subtitle2?: import("../../../wonder-blocks-cell/src/util/types").TypographyText | undefined;
+    }, "style" | "label" | "id" | "value" | "onClick" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "testId" | "leftAccessory" | "rightAccessory" | "labelAsText" | "variant" | "parentComponent" | "subtitle1" | "subtitle2"> & {
+        disabled?: boolean | undefined;
+        role?: "menuitem" | "option" | undefined;
+        selected?: boolean | undefined;
+        onToggle?: ((value: string) => unknown) | undefined;
+        focused?: boolean | undefined;
+        horizontalRule?: import("../../../wonder-blocks-cell/src/util/types").HorizontalRuleVariant | undefined;
+    } & {}, string | React.JSXElementConstructor<any>>[];
+    selected: string | import("../util/types").MaybeString[] | null | undefined;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleKeyUp: (event: React.KeyboardEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+};
+export {};

package/dist/index.d.ts

@@ -4,7 +4,8 @@ import SeparatorItem from "./components/separator-item";
 import ActionMenu from "./components/action-menu";
 import SingleSelect from "./components/single-select";
 import MultiSelect from "./components/multi-select";
+import Listbox from "./components/listbox";
 import type { Labels } from "./components/multi-select";
 import type { SingleSelectLabels } from "./components/single-select";
-export { ActionItem, OptionItem, SeparatorItem, ActionMenu, SingleSelect, MultiSelect, };
+export { ActionItem, OptionItem, SeparatorItem, ActionMenu, SingleSelect, MultiSelect, Listbox, };
 export type { Labels, SingleSelectLabels };