@khanacademy/wonder-blocks-dropdown 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.3.0
+
+### Minor Changes
+
+-   7030948a: Add `Listbox` component with Single and Multiple selection support
+
+### Patch Changes
+
+-   Updated dependencies [f72f7dd4]
+    -   @khanacademy/wonder-blocks-timing@5.0.0
+    -   @khanacademy/wonder-blocks-modal@5.1.2
+
+## 5.2.1
+
+### Patch Changes
+
+-   Updated dependencies [9bfeead9]
+    -   @khanacademy/wonder-blocks-tokens@1.3.0
+    -   @khanacademy/wonder-blocks-cell@3.3.5
+    -   @khanacademy/wonder-blocks-clickable@4.2.1
+    -   @khanacademy/wonder-blocks-layout@2.0.32
+    -   @khanacademy/wonder-blocks-modal@5.1.1
+    -   @khanacademy/wonder-blocks-search-field@2.2.10
+
 ## 5.2.0
 
 ### Minor Changes

package/dist/components/listbox.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import { MaybeValueOrValues, OptionItemComponent } from "../util/types";
+type Props = {
+    /**
+     * The list of items to display in the listbox.
+     */
+    children: Array<OptionItemComponent>;
+    /**
+     * Whether the use can select more than one option item. Defaults to
+     * `single`.
+     *
+     * If `multiple` is selected, `aria-multiselectable={true}` is set
+     * internally in the listbox element.
+     */
+    selectionType: "single" | "multiple";
+    /**
+     * The value of the currently selected items.
+     */
+    value?: MaybeValueOrValues;
+    /**
+     * Callback for when the selection changes. The value passed as an argument
+     * is an updated array of the selected value(s).
+     */
+    onChange?: (value: MaybeValueOrValues) => void;
+    /**
+     * Provides a label for the listbox.
+     */
+    "aria-label"?: string;
+    /**
+     * A reference to the element that describes the listbox.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Whether the listbox is disabled.
+     *
+     * A disabled combobox does not support interaction, but it supports focus
+     * for a11y reasons. It internally maps to`aria-disabled`. Defaults to
+     * false.
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier of the listbox element.
+     */
+    id?: string;
+    /**
+     * TODO(WB-1678): Add async support to the listbox.
+     *
+     * Whether to display the loading state to let the user know that the
+     * results are being loaded asynchronously. Defaults to false.
+     */
+    loading?: boolean;
+    /**
+     * Optional custom styles applied to the listbox container.
+     */
+    style?: StyleType;
+    /**
+     * Includes the listbox in the page tab sequence.
+     */
+    tabIndex?: number;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+};
+/**
+ * A `Listbox` component presents a list of options and allows a user to select
+ * one or more of them. A listbox that allows a single option to be chosen is a
+ * single-select listbox; one that allows multiple options to be selected is a
+ * multi-select listbox.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import {Listbox} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * <Listbox>
+ *  <OptionItem label="Apple" value="apple" />
+ *  <OptionItem disabled label="Strawberry" value="strawberry" />
+ *  <OptionItem label="Pear" value="pear" />
+ * </Listbox>
+ * ```
+ */
+export default function Listbox(props: Props): JSX.Element;
+export {};

package/dist/components/multi-select.d.ts

@@ -3,7 +3,7 @@ import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import SelectOpener from "./select-opener";
 import OptionItem from "./option-item";
-import type { DropdownItem, OpenerProps, OptionItemComponentArray } from "../util/types";
+import type { DropdownItem, OpenerProps, OptionItemComponent, OptionItemComponentArray } from "../util/types";
 export type Labels = {
     /**
      * Label for describing the dismiss icon on the search filter.
@@ -192,7 +192,7 @@ export default class MultiSelect extends React.Component<Props, State> {
     getMenuText(children: OptionItemComponentArray): string;
     getShortcuts(numOptions: number): DropdownItem[];
     getMenuItems(children: OptionItemComponentArray): DropdownItem[];
-    mapOptionItemToDropdownItem: (option: React.ReactElement<React.ComponentProps<typeof OptionItem>>) => DropdownItem;
+    mapOptionItemToDropdownItem: (option: OptionItemComponent) => DropdownItem;
     handleOpenerRef: (node?: any) => void;
     handleSearchTextChanged: (searchText: string) => void;
     handleClick: (e: React.SyntheticEvent) => void;

package/dist/components/option-item.d.ts

@@ -39,6 +39,12 @@ type OptionProps = AriaProps & {
      * @ignore
      */
     selected: boolean;
+    /**
+     * Whether this item is focused. Auto-populated by listbox in combination of
+     * aria-activedescendant.
+     * @ignore
+     */
+    focused: boolean;
     /**
      * Aria role to use, defaults to "option".
      */
@@ -59,6 +65,20 @@ type OptionProps = AriaProps & {
      * @ignore
      */
     style?: StyleType;
+    /**
+     * Injected by the parent component to determine how we are going to handle
+     * the component states (hovered, focused, selected, etc.)
+     * Defaults to "dropdown".
+     * @ignore
+     */
+    parentComponent?: "dropdown" | "listbox";
+    /**
+     * The unique identifier of the option item.
+     *
+     * This is used to identify the option item in the listbox so that it can be
+     * focused programmatically (e.g. when the user presses the arrow keys).
+     */
+    id?: string;
     /**
      * Inherited from WB Cell.
      */
@@ -86,6 +106,7 @@ type OptionProps = AriaProps & {
 };
 type DefaultProps = {
     disabled: OptionProps["disabled"];
+    focused: OptionProps["focused"];
     horizontalRule: OptionProps["horizontalRule"];
     onToggle: OptionProps["onToggle"];
     role: OptionProps["role"];
@@ -102,6 +123,7 @@ export default class OptionItem extends React.Component<OptionProps> {
     static __IS_OPTION_ITEM__: boolean;
     getCheckComponent(): typeof Check | typeof Checkbox;
     handleClick: () => void;
+    renderCell(): React.ReactNode;
     render(): React.ReactNode;
 }
 export {};