@khanacademy/wonder-blocks-dropdown 5.8.1 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 6.1.0
+
+### Minor Changes
+
+-   71e70869: # SingleSelect
+
+    -   Add `required`, `validate`, and `onValidate` props to support validation.
+    -   DropdownOpener and SelectOpener:
+        -   Add `onBlur` prop
+        -   Set `aria-invalid` if it is in an error state.
+
+-   bc4da9ec: # MultiSelect
+
+    -   Add `required`, `validate`, and `onValidate` props to support validation.
+    -   Set `aria-invalid` on the opener if it is in an error state
+    -   Share validation logic with SingleSelect
+
+### Patch Changes
+
+-   c7178e13: Update SingleSelect and MultiSelect to functional components
+-   71e70869: Update `DropdownCore` to check for key presses using `event.key` instead of `event.which` or `event.keyCode` (which are both deprecated now)
+-   Updated dependencies [e9a119a8]
+-   Updated dependencies [257b6bc3]
+    -   @khanacademy/wonder-blocks-search-field@3.1.0
+
+## 6.0.0
+
+### Major Changes
+
+-   e6abdd17: Upgrade to React 18
+
+### Patch Changes
+
+-   Updated dependencies [e6abdd17]
+    -   @khanacademy/wonder-blocks-timing@6.0.0
+    -   @khanacademy/wonder-blocks-core@8.0.0
+    -   @khanacademy/wonder-blocks-cell@4.0.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.0
+    -   @khanacademy/wonder-blocks-icon@5.0.0
+    -   @khanacademy/wonder-blocks-layout@3.0.0
+    -   @khanacademy/wonder-blocks-modal@6.0.0
+    -   @khanacademy/wonder-blocks-pill@3.0.0
+    -   @khanacademy/wonder-blocks-search-field@3.0.0
+    -   @khanacademy/wonder-blocks-tokens@3.0.0
+    -   @khanacademy/wonder-blocks-typography@3.0.0
+
 ## 5.8.1
 
 ### Patch Changes

package/dist/components/combobox-live-region.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ComboboxLabels, MaybeValueOrValues, OptionItemComponent } from "../util/types";
 type Props = {
     /**
@@ -48,5 +48,5 @@ type Props = {
  *
  * @see https://bugs.webkit.org/show_bug.cgi?id=167671
  */
-export declare function ComboboxLiveRegion({ focusedIndex, focusedMultiSelectIndex, labels, selectedLabels, opened, options, selected, selectionType, testId, }: Props): JSX.Element;
+export declare function ComboboxLiveRegion({ focusedIndex, focusedMultiSelectIndex, labels, selectedLabels, opened, options, selected, selectionType, testId, }: Props): React.JSX.Element;
 export {};

package/dist/components/combobox.d.ts

@@ -107,5 +107,5 @@ type Props = {
  *   Open button (🔽) is pressed.
  * - It is displayed when the combobox receives focus.
  */
-export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, }: Props): JSX.Element;
+export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, }: Props): React.JSX.Element;
 export {};

package/dist/components/dropdown-core-virtualized.d.ts

@@ -6,7 +6,7 @@ declare const _default: {
         data: DropdownItem[];
         width?: number | null | undefined;
         listRef?: React.RefObject<List<any>> | undefined;
-    }): JSX.Element;
+    }): React.JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/components/dropdown-opener.d.ts

@@ -19,6 +19,10 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      * Callback for when the opener is pressed.
      */
     onClick: (e: React.SyntheticEvent) => unknown;
+    /**
+     * Callback for when the opener is blurred.
+     */
+    onBlur?: (e: React.SyntheticEvent) => unknown;
     /**
      * Test ID used for e2e testing.
      */
@@ -35,6 +39,10 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      * The unique identifier for the opener.
      */
     id?: string;
+    /**
+     * If the dropdown has an error.
+     */
+    error?: boolean;
 };
 type DefaultProps = {
     disabled: Props["disabled"];

package/dist/components/listbox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
 import { MaybeValueOrValues, OptionItemComponent } from "../util/types";
 type Props = {
@@ -81,5 +81,5 @@ type Props = {
  * </Listbox>
  * ```
  */
-export default function Listbox(props: Props): JSX.Element;
+export default function Listbox(props: Props): React.JSX.Element;
 export {};

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

@@ -1,9 +1,7 @@
 import * as React from "react";
 import { type AriaProps, type 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, OptionItemComponent, OptionItemComponentArray } from "../util/types";
+import type { OpenerProps } from "../util/types";
 export type Labels = {
     /**
      * Label for describing the dismiss icon on the search filter.
@@ -43,36 +41,36 @@ type DefaultProps = Readonly<{
      * Whether this dropdown should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.
      */
-    alignment: "left" | "right";
+    alignment?: "left" | "right";
     /**
      * Whether this component is disabled. A disabled dropdown may not be opened
      * and does not support interaction. Defaults to false.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * Whether this component is in an error state. Defaults to false.
      */
-    error: boolean;
+    error?: boolean;
     /**
      * Whether to display the "light" version of this component instead, for
      * use when the component is used on a dark background.
      */
-    light: boolean;
+    light?: boolean;
     /**
      * The values of the items that are currently selected.
      */
-    selectedValues: Array<string>;
+    selectedValues?: Array<string>;
     /**
      * Whether to display shortcuts for Select All and Select None.
      */
-    shortcuts: boolean;
+    shortcuts?: boolean;
     /**
      * When false, the SelectOpener can show a Node as a label. When true, the
      * SelectOpener will use a string as a label. If using custom OptionItems, a
      * plain text label can be provided with the `labelAsText` prop.
      * Defaults to true.
      */
-    showOpenerLabelAsText: boolean;
+    showOpenerLabelAsText?: boolean;
 }>;
 type Props = AriaProps & DefaultProps & Readonly<{
     /**
@@ -143,32 +141,41 @@ type Props = AriaProps & DefaultProps & Readonly<{
      * opener's `aria-controls` attribute for screenreaders.
      */
     dropdownId?: string;
-}>;
-type State = Readonly<{
-    /**
-     * Whether or not the dropdown is open.
-     */
-    open: boolean;
     /**
-     * The text input to filter the items by their label. Defaults to an empty
-     * string.
-     */
-    searchText: string;
-    /**
-     * The selected values that are set when the dropdown is opened. We use
-     * this to move the selected items to the top when the dropdown is
-     * re-opened.
-     */
-    lastSelectedValues: Array<string>;
-    /**
-     * The object containing the custom labels used inside this component.
-     */
-    labels: Labels;
-    /**
-     * The DOM reference to the opener element. This is mainly used to set focus
-     * to this element, and also to pass the reference to Popper.js.
-     */
-    openerElement?: HTMLElement;
+     * Whether this field is required to continue, or the error message to
+     * render if this field is left blank.
+     *
+     * This can be a boolean or a string.
+     *
+     * String:
+     * Please pass in a translated string to use as the error message that will
+     * render if the user leaves this field blank. If this field is required,
+     * and a string is not passed in, a default untranslated string will render
+     * upon error.
+     * Note: The string will not be used if a `validate` prop is passed in.
+     *
+     * Example message: i18n._("A password is required to log in.")
+     *
+     * Boolean:
+     * True/false indicating whether this field is required. Please do not pass
+     * in `true` if possible - pass in the error string instead.
+     * If `true` is passed, and a `validate` prop is not passed, that means
+     * there is no corresponding message and the default untranlsated message
+     * will be used.
+     */
+    required?: boolean | string;
+    /**
+     * Provide a validation for the field value.
+     * Return a string error message or null | void for a valid input.
+     *
+     * Use this for errors that are shown to the user while they are filling out
+     * a form.
+     */
+    validate?: (value: string[]) => string | null | void;
+    /**
+     * Called right after the field is validated.
+     */
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
 }>;
 /**
  * A dropdown that consists of multiple selection items. This select allows
@@ -189,28 +196,5 @@ type State = Readonly<{
  * </MultiSelect>
  * ```
  */
-export default class MultiSelect extends React.Component<Props, State> {
-    labels: Labels;
-    static defaultProps: DefaultProps;
-    constructor(props: Props);
-    /**
-     * Used to sync the `opened` state when this component acts as a controlled
-     * component
-     */
-    static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
-    componentDidUpdate(prevProps: Props): void;
-    handleOpenChanged: (opened: boolean) => void;
-    handleToggle: (selectedValue: string) => void;
-    handleSelectAll: () => void;
-    handleSelectNone: () => void;
-    getMenuText(children: OptionItemComponentArray): string | JSX.Element;
-    getShortcuts(numOptions: number): DropdownItem[];
-    getMenuItems(children: OptionItemComponentArray): DropdownItem[];
-    mapOptionItemToDropdownItem: (option: OptionItemComponent) => DropdownItem;
-    handleOpenerRef: (node?: any) => void;
-    handleSearchTextChanged: (searchText: string) => void;
-    handleClick: (e: React.SyntheticEvent) => void;
-    renderOpener(allChildren: React.ReactElement<React.ComponentProps<typeof OptionItem>>[], isDisabled: boolean, dropdownId: string): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
-    render(): React.ReactNode;
-}
-export {};
+declare const MultiSelect: (props: Props) => React.JSX.Element;
+export default MultiSelect;

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

@@ -42,6 +42,10 @@ type SelectOpenerProps = AriaProps & {
      * Test ID used for e2e testing.
      */
     testId?: string;
+    /**
+     * Called when it is blurred
+     */
+    onBlur?: (e: React.SyntheticEvent) => unknown;
 };
 type DefaultProps = {
     disabled: SelectOpenerProps["disabled"];

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

@@ -1,9 +1,7 @@
 import * as React from "react";
 import { type AriaProps, type 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 { OpenerProps } from "../util/types";
 export type SingleSelectLabels = {
     /**
      * Label for describing the dismiss icon on the search filter.
@@ -27,16 +25,16 @@ type DefaultProps = Readonly<{
      * Whether this dropdown should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.
      */
-    alignment: "left" | "right";
+    alignment?: "left" | "right";
     /**
      * Whether to auto focus an option. Defaults to true.
      */
-    autoFocus: boolean;
+    autoFocus?: boolean;
     /**
      * Whether this component is disabled. A disabled dropdown may not be opened
      * and does not support interaction. Defaults to false.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * Whether to enable the type-ahead suggestions feature. Defaults to true.
      *
@@ -50,27 +48,27 @@ type DefaultProps = Readonly<{
      * some cases where it's not desirable (for example when using a `TextField`
      * as the opener element).
      */
-    enableTypeAhead: boolean;
+    enableTypeAhead?: boolean;
     /**
      * Whether or not the input in is an error state. Defaults to false.
      */
-    error: boolean;
+    error?: boolean;
     /**
      * Whether to display the "light" version of this component instead, for
      * use when the component is used on a dark background.
      */
-    light: boolean;
+    light?: boolean;
     /**
      * The object containing the custom labels used inside this component.
      */
-    labels: SingleSelectLabels;
+    labels?: SingleSelectLabels;
     /**
      * When false, the SelectOpener can show a Node as a label. When true, the
      * SelectOpener will use a string as a label. If using custom OptionItems, a
      * plain text label can be provided with the `labelAsText` prop.
      * Defaults to true.
      */
-    showOpenerLabelAsText: boolean;
+    showOpenerLabelAsText?: boolean;
 }>;
 type Props = AriaProps & DefaultProps & Readonly<{
     /**
@@ -139,22 +137,41 @@ type Props = AriaProps & DefaultProps & Readonly<{
      * opener's `aria-controls` attribute for screenreaders.
      */
     dropdownId?: string;
-}>;
-type State = Readonly<{
     /**
-     * Whether or not the dropdown is open.
+     * Whether this field is required to continue, or the error message to
+     * render if this field is left blank.
+     *
+     * This can be a boolean or a string.
+     *
+     * String:
+     * Please pass in a translated string to use as the error message that will
+     * render if the user leaves this field blank. If this field is required,
+     * and a string is not passed in, a default untranslated string will render
+     * upon error.
+     * Note: The string will not be used if a `validate` prop is passed in.
+     *
+     * Example message: i18n._("A password is required to log in.")
+     *
+     * Boolean:
+     * True/false indicating whether this field is required. Please do not pass
+     * in `true` if possible - pass in the error string instead.
+     * If `true` is passed, and a `validate` prop is not passed, that means
+     * there is no corresponding message and the default untranlsated message
+     * will be used.
      */
-    open: boolean;
+    required?: boolean | string;
     /**
-     * The text input to filter the items by their label. Defaults to an empty
-     * string.
+     * Provide a validation for the field value.
+     * Return a string error message or null | void for a valid input.
+     *
+     * Use this for errors that are shown to the user while they are filling out
+     * a form.
      */
-    searchText: string;
+    validate?: (value?: string | null) => string | null | void;
     /**
-     * The DOM reference to the opener element. This is mainly used to set focus
-     * to this element, and also to pass the reference to Popper.js.
+     * Called right after the field is validated.
      */
-    openerElement?: HTMLElement;
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
 }>;
 /**
  * The single select allows the selection of one item. Clients are responsible
@@ -201,24 +218,5 @@ type State = Readonly<{
  * </SingleSelect>
  * ```
  */
-export default class SingleSelect extends React.Component<Props, State> {
-    selectedIndex: number;
-    static defaultProps: DefaultProps;
-    constructor(props: Props);
-    /**
-     * Used to sync the `opened` state when this component acts as a controlled
-     * component
-     */
-    static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
-    handleOpenChanged: (opened: boolean) => void;
-    handleToggle: (selectedValue: string) => void;
-    mapOptionItemsToDropdownItems: (children: OptionItemComponentArray) => DropdownItem[];
-    filterChildren(children: OptionItemComponentArray): OptionItemComponentArray;
-    getMenuItems(children: OptionItemComponentArray): DropdownItem[];
-    handleSearchTextChanged: (searchText: string) => void;
-    handleOpenerRef: (node?: any) => void;
-    handleClick: (e: React.SyntheticEvent) => void;
-    renderOpener(isDisabled: boolean, dropdownId: string): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
-    render(): React.ReactNode;
-}
-export {};
+declare const SingleSelect: (props: Props) => React.JSX.Element;
+export default SingleSelect;