@khanacademy/wonder-blocks-dropdown 3.0.11 → 3.0.13

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 3.0.13
+
+### Patch Changes
+
+-   df9a10aa: Update state and props to be readonly in components using getDerivedStateFromProps()
+-   Updated dependencies [5a1ea891]
+-   Updated dependencies [df9a10aa]
+    -   @khanacademy/wonder-blocks-layout@2.0.11
+    -   @khanacademy/wonder-blocks-modal@4.0.12
+    -   @khanacademy/wonder-blocks-core@5.2.1
+    -   @khanacademy/wonder-blocks-clickable@3.0.11
+    -   @khanacademy/wonder-blocks-timing@4.0.1
+    -   @khanacademy/wonder-blocks-icon@2.0.11
+    -   @khanacademy/wonder-blocks-search-field@2.0.13
+    -   @khanacademy/wonder-blocks-typography@2.0.11
+
+## 3.0.12
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-search-field@2.0.12
+
 ## 3.0.11
 
 ### Patch Changes

package/dist/components/action-menu.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import type { Item, DropdownItem, OpenerProps } from "../util/types";
-type Props = AriaProps & {
+type Props = AriaProps & Readonly<{
     /**
      * The items in this dropdown.
      */
@@ -63,17 +63,17 @@ type Props = AriaProps & {
      * element to access pointer event state.
      */
     opener?: (openerProps: OpenerProps) => React.ReactElement<any>;
-};
-type State = {
+}>;
+type State = Readonly<{
     /**
      * Whether or not the dropdown is open.
      */
     opened: boolean;
-};
-type DefaultProps = {
+}>;
+type DefaultProps = Readonly<{
     alignment: Props["alignment"];
     disabled: Props["disabled"];
-};
+}>;
 /**
  * A menu that consists of various types of items.
  *

package/dist/components/action-menu.js.flow

@@ -10,7 +10,7 @@ import DropdownOpener from "./dropdown-opener";
 import type { Item, DropdownItem, OpenerProps } from "../util/types";
 declare type Props = {|
   ...AriaProps,
-  ...{|
+  ...$ReadOnly<{|
     /**
      * The items in this dropdown.
      */
@@ -83,18 +83,18 @@ declare type Props = {|
      * element to access pointer event state.
      */
     opener?: (openerProps: OpenerProps) => React.Element<any>,
-  |},
+  |}>,
 |};
-declare type State = {|
+declare type State = $ReadOnly<{|
   /**
    * Whether or not the dropdown is open.
    */
   opened: boolean,
-|};
-declare type DefaultProps = {|
+|}>;
+declare type DefaultProps = $ReadOnly<{|
   alignment: $PropertyType<Props, "alignment">,
   disabled: $PropertyType<Props, "disabled">,
-|};
+|}>;
 /**
  * A menu that consists of various types of items.
  *

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

@@ -21,11 +21,11 @@ type Labels = {
     someResults: (numOptions: number) => string;
 };
 type DropdownAriaRole = "listbox" | "menu";
-type ExportProps = {
+declare const _default: React.ComponentType<Readonly<{
     /**
      * Items for the menu.
      */
-    items: Array<DropdownItem>;
+    items: DropdownItem[];
     /**
      * Callback for when the menu is opened or closed. Parameter is whether
      * the dropdown menu should be open.
@@ -38,11 +38,11 @@ type ExportProps = {
     /**
      * The component that opens the menu.
      */
-    opener: React.ReactElement<any>;
+    opener: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     /**
      * Ref to the opener element.
      */
-    openerElement?: HTMLElement;
+    openerElement?: HTMLElement | undefined;
     /**
      * The aria "role" applied to the dropdown container.
      */
@@ -52,7 +52,7 @@ type ExportProps = {
      * the searchText exist, SearchField will be displayed at the top of the
      * dropdown body.
      */
-    onSearchTextChanged?: (searchText: string) => unknown | null | undefined;
+    onSearchTextChanged?: ((searchText: string) => unknown) | undefined;
     /**
      * An optional string that the user entered to search the items. When this
      * and the onSearchTextChanged exist, SearchField will be displayed at the
@@ -71,21 +71,21 @@ type ExportProps = {
     /**
      * Optional CSS classes for the entire dropdown component.
      */
-    className?: string;
+    className?: string | undefined;
     /**
      * When this is true, the dropdown body shows a search text input at the
      * top. The items will be filtered by the input.
      */
-    isFilterable?: boolean;
+    isFilterable?: boolean | undefined;
     /**
      * Whether this menu should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.
      */
-    alignment?: "left" | "right";
+    alignment?: "left" | "right" | undefined;
     /**
      * Whether to auto focus an option. Defaults to true.
      */
-    autoFocus?: boolean;
+    autoFocus?: boolean | undefined;
     /**
      * Whether to enable the type-ahead suggestions feature. Defaults to true.
      *
@@ -99,25 +99,24 @@ type ExportProps = {
      * some cases where it's not desirable (for example when using a `TextField`
      * as the opener element).
      */
-    enableTypeAhead?: boolean;
+    enableTypeAhead?: boolean | undefined;
     /**
      * An index that represents the index of the focused element when the menu
      * is opened.
      */
-    initialFocusedIndex?: number;
+    initialFocusedIndex?: number | undefined;
     /**
      * The object containing the custom labels used inside this component.
      */
-    labels?: Labels;
+    labels?: Labels | undefined;
     /**
      * Whether to display the "light" version of this component instead, for
      * use when the item is used on a dark background.
      */
-    light?: boolean;
+    light?: boolean | undefined;
     /**
      * Used to determine if we can automatically select an item using the keyboard.
      */
-    selectionType?: "single" | "multi";
-};
-declare const _default: React.ComponentType<ExportProps>;
+    selectionType?: "single" | "multi" | undefined;
+}>>;
 export default _default;

package/dist/components/dropdown-core.js.flow

@@ -30,121 +30,122 @@ declare type Labels = {|
   someResults: (numOptions: number) => string,
 |};
 declare type DropdownAriaRole = "listbox" | "menu";
-declare type ExportProps = {|
-  /**
-   * Items for the menu.
-   */
-  items: Array<DropdownItem>,
-
-  /**
-   * Callback for when the menu is opened or closed. Parameter is whether
-   * the dropdown menu should be open.
-   */
-  onOpenChanged: (open: boolean) => mixed,
-
-  /**
-   * Whether the menu is open or not.
-   */
-  open: boolean,
-
-  /**
-   * The component that opens the menu.
-   */
-  opener: React.Element<any>,
-
-  /**
-   * Ref to the opener element.
-   */
-  openerElement?: HTMLElement,
-
-  /**
-   * The aria "role" applied to the dropdown container.
-   */
-  role: DropdownAriaRole,
-
-  /**
-   * An optional handler to set the searchText of the parent. When this and
-   * the searchText exist, SearchField will be displayed at the top of the
-   * dropdown body.
-   */
-  onSearchTextChanged?: (searchText: string) => mixed | null | void,
-
-  /**
-   * An optional string that the user entered to search the items. When this
-   * and the onSearchTextChanged exist, SearchField will be displayed at the
-   * top of the dropdown body.
-   */
-  searchText?: string | null | void,
-
-  /**
-   * Styling specific to the dropdown component that isn't part of the opener,
-   * passed by the specific implementation of the dropdown menu,
-   */
-  dropdownStyle?: StyleType,
-
-  /**
-   * Optional styling for the entire dropdown component.
-   */
-  style?: StyleType,
-
-  /**
-   * Optional CSS classes for the entire dropdown component.
-   */
-  className?: string,
-
-  /**
-   * When this is true, the dropdown body shows a search text input at the
-   * top. The items will be filtered by the input.
-   */
-  isFilterable?: boolean,
-
-  /**
-   * Whether this menu should be left-aligned or right-aligned with the
-   * opener component. Defaults to left-aligned.
-   */
-  alignment?: "left" | "right",
-
-  /**
-   * Whether to auto focus an option. Defaults to true.
-   */
-  autoFocus?: boolean,
-
-  /**
-   * Whether to enable the type-ahead suggestions feature. Defaults to true.
-   *
-   * This feature allows to navigate the listbox using the keyboard.
-   * - Type a character: focus moves to the next item with a name that starts
-   *   with the typed character.
-   * - Type multiple characters in rapid succession: focus moves to the next
-   *   item with a name that starts with the string of characters typed.
-   *
-   * **NOTE:** Type-ahead is recommended for all listboxes, but there might be
-   * some cases where it's not desirable (for example when using a `TextField`
-   * as the opener element).
-   */
-  enableTypeAhead?: boolean,
-
-  /**
-   * An index that represents the index of the focused element when the menu
-   * is opened.
-   */
-  initialFocusedIndex?: number,
-
-  /**
-   * The object containing the custom labels used inside this component.
-   */
-  labels?: Labels,
-
-  /**
-   * Whether to display the "light" version of this component instead, for
-   * use when the item is used on a dark background.
-   */
-  light?: boolean,
-
-  /**
-   * Used to determine if we can automatically select an item using the keyboard.
-   */
-  selectionType?: "single" | "multi",
-|};
-declare var _default: React.ComponentType<ExportProps>;
+declare var _default: React.ComponentType<
+  $ReadOnly<{|
+    /**
+     * Items for the menu.
+     */
+    items: DropdownItem[],
+
+    /**
+     * Callback for when the menu is opened or closed. Parameter is whether
+     * the dropdown menu should be open.
+     */
+    onOpenChanged: (open: boolean) => mixed,
+
+    /**
+     * Whether the menu is open or not.
+     */
+    open: boolean,
+
+    /**
+     * The component that opens the menu.
+     */
+    opener: React.Element<any, string | React.JSXElementConstructor<any>>,
+
+    /**
+     * Ref to the opener element.
+     */
+    openerElement?: HTMLElement | void,
+
+    /**
+     * The aria "role" applied to the dropdown container.
+     */
+    role: DropdownAriaRole,
+
+    /**
+     * An optional handler to set the searchText of the parent. When this and
+     * the searchText exist, SearchField will be displayed at the top of the
+     * dropdown body.
+     */
+    onSearchTextChanged?: ((searchText: string) => mixed) | void,
+
+    /**
+     * An optional string that the user entered to search the items. When this
+     * and the onSearchTextChanged exist, SearchField will be displayed at the
+     * top of the dropdown body.
+     */
+    searchText?: string | null | void,
+
+    /**
+     * Styling specific to the dropdown component that isn't part of the opener,
+     * passed by the specific implementation of the dropdown menu,
+     */
+    dropdownStyle?: StyleType,
+
+    /**
+     * Optional styling for the entire dropdown component.
+     */
+    style?: StyleType,
+
+    /**
+     * Optional CSS classes for the entire dropdown component.
+     */
+    className?: string | void,
+
+    /**
+     * When this is true, the dropdown body shows a search text input at the
+     * top. The items will be filtered by the input.
+     */
+    isFilterable?: boolean | void,
+
+    /**
+     * Whether this menu should be left-aligned or right-aligned with the
+     * opener component. Defaults to left-aligned.
+     */
+    alignment?: "left" | "right" | void,
+
+    /**
+     * Whether to auto focus an option. Defaults to true.
+     */
+    autoFocus?: boolean | void,
+
+    /**
+     * Whether to enable the type-ahead suggestions feature. Defaults to true.
+     *
+     * This feature allows to navigate the listbox using the keyboard.
+     * - Type a character: focus moves to the next item with a name that starts
+     *   with the typed character.
+     * - Type multiple characters in rapid succession: focus moves to the next
+     *   item with a name that starts with the string of characters typed.
+     *
+     * **NOTE:** Type-ahead is recommended for all listboxes, but there might be
+     * some cases where it's not desirable (for example when using a `TextField`
+     * as the opener element).
+     */
+    enableTypeAhead?: boolean | void,
+
+    /**
+     * An index that represents the index of the focused element when the menu
+     * is opened.
+     */
+    initialFocusedIndex?: number | void,
+
+    /**
+     * The object containing the custom labels used inside this component.
+     */
+    labels?: Labels | void,
+
+    /**
+     * Whether to display the "light" version of this component instead, for
+     * use when the item is used on a dark background.
+     */
+    light?: boolean | void,
+
+    /**
+     * Used to determine if we can automatically select an item using the keyboard.
+     */
+    selectionType?: "single" | "multi" | void,
+  |}>
+>;
 declare export default typeof _default;

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

@@ -38,7 +38,7 @@ export type Labels = {
      */
     allSelected: string;
 };
-type DefaultProps = {
+type DefaultProps = Readonly<{
     /**
      * Whether this dropdown should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.
@@ -62,8 +62,8 @@ type DefaultProps = {
      * Whether to display shortcuts for Select All and Select None.
      */
     shortcuts: boolean;
-};
-type Props = AriaProps & DefaultProps & {
+}>;
+type Props = AriaProps & DefaultProps & Readonly<{
     /**
      * The items in this select.
      */
@@ -125,8 +125,8 @@ type Props = AriaProps & DefaultProps & {
      * Test ID used for e2e testing.
      */
     testId?: string;
-};
-type State = {
+}>;
+type State = Readonly<{
     /**
      * Whether or not the dropdown is open.
      */
@@ -151,7 +151,7 @@ type State = {
      * to this element, and also to pass the reference to Popper.js.
      */
     openerElement?: HTMLElement;
-};
+}>;
 /**
  * A dropdown that consists of multiple selection items. This select allows
  * multiple options to be selected. Clients are responsible for keeping track

package/dist/components/multi-select.js.flow

@@ -51,7 +51,7 @@ export type Labels = {|
    */
   allSelected: string,
 |};
-declare type DefaultProps = {|
+declare type DefaultProps = $ReadOnly<{|
   /**
    * Whether this dropdown should be left-aligned or right-aligned with the
    * opener component. Defaults to left-aligned.
@@ -79,11 +79,11 @@ declare type DefaultProps = {|
    * Whether to display shortcuts for Select All and Select None.
    */
   shortcuts: boolean,
-|};
+|}>;
 declare type Props = {|
   ...AriaProps,
   ...DefaultProps,
-  ...{|
+  ...$ReadOnly<{|
     /**
      * The items in this select.
      */
@@ -159,9 +159,9 @@ declare type Props = {|
      * Test ID used for e2e testing.
      */
     testId?: string,
-  |},
+  |}>,
 |};
-declare type State = {|
+declare type State = $ReadOnly<{|
   /**
    * Whether or not the dropdown is open.
    */
@@ -190,7 +190,7 @@ declare type State = {|
    * to this element, and also to pass the reference to Popper.js.
    */
   openerElement?: HTMLElement,
-|};
+|}>;
 /**
  * A dropdown that consists of multiple selection items. This select allows
  * multiple options to be selected. Clients are responsible for keeping track

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

@@ -22,7 +22,7 @@ export type SingleSelectLabels = {
      */
     someResults: (numOptions: number) => string;
 };
-type DefaultProps = {
+type DefaultProps = Readonly<{
     /**
      * Whether this dropdown should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.
@@ -60,8 +60,8 @@ type DefaultProps = {
      * The object containing the custom labels used inside this component.
      */
     labels: SingleSelectLabels;
-};
-type Props = AriaProps & DefaultProps & {
+}>;
+type Props = AriaProps & DefaultProps & Readonly<{
     /**
      * The items in this select.
      */
@@ -121,8 +121,8 @@ type Props = AriaProps & DefaultProps & {
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean;
-};
-type State = {
+}>;
+type State = Readonly<{
     /**
      * Whether or not the dropdown is open.
      */
@@ -137,7 +137,7 @@ type State = {
      * to this element, and also to pass the reference to Popper.js.
      */
     openerElement?: HTMLElement;
-};
+}>;
 /**
  * The single select allows the selection of one item. Clients are responsible
  * for keeping track of the selected item in the select.

package/dist/components/single-select.js.flow

@@ -31,7 +31,7 @@ export type SingleSelectLabels = {|
    */
   someResults: (numOptions: number) => string,
 |};
-declare type DefaultProps = {|
+declare type DefaultProps = $ReadOnly<{|
   /**
    * Whether this dropdown should be left-aligned or right-aligned with the
    * opener component. Defaults to left-aligned.
@@ -74,11 +74,11 @@ declare type DefaultProps = {|
    * The object containing the custom labels used inside this component.
    */
   labels: SingleSelectLabels,
-|};
+|}>;
 declare type Props = {|
   ...AriaProps,
   ...DefaultProps,
-  ...{|
+  ...$ReadOnly<{|
     /**
      * The items in this select.
      */
@@ -152,9 +152,9 @@ declare type Props = {|
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean,
-  |},
+  |}>,
 |};
-declare type State = {|
+declare type State = $ReadOnly<{|
   /**
    * Whether or not the dropdown is open.
    */
@@ -171,7 +171,7 @@ declare type State = {|
    * to this element, and also to pass the reference to Popper.js.
    */
   openerElement?: HTMLElement,
-|};
+|}>;
 /**
  * The single select allows the selection of one item. Clients are responsible
  * for keeping track of the selected item in the select.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "3.0.11",
+  "version": "3.0.13",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,16 +16,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.0.10",
+    "@khanacademy/wonder-blocks-clickable": "^3.0.11",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.2.0",
-    "@khanacademy/wonder-blocks-icon": "^2.0.10",
-    "@khanacademy/wonder-blocks-layout": "^2.0.10",
-    "@khanacademy/wonder-blocks-modal": "^4.0.11",
-    "@khanacademy/wonder-blocks-search-field": "^2.0.11",
+    "@khanacademy/wonder-blocks-core": "^5.2.1",
+    "@khanacademy/wonder-blocks-icon": "^2.0.11",
+    "@khanacademy/wonder-blocks-layout": "^2.0.11",
+    "@khanacademy/wonder-blocks-modal": "^4.0.12",
+    "@khanacademy/wonder-blocks-search-field": "^2.0.13",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-timing": "^4.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.0.10"
+    "@khanacademy/wonder-blocks-timing": "^4.0.1",
+    "@khanacademy/wonder-blocks-typography": "^2.0.11"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -38,7 +38,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^4.0.10",
+    "@khanacademy/wonder-blocks-button": "^4.0.11",
     "wb-dev-build-settings": "^0.9.7"
   }
 }