@khanacademy/wonder-blocks-dropdown 2.10.7 → 2.10.9

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.10.9
+
+### Patch Changes
+
+-   Updated dependencies [779b031d]
+    -   @khanacademy/wonder-blocks-core@4.9.0
+    -   @khanacademy/wonder-blocks-clickable@2.4.7
+    -   @khanacademy/wonder-blocks-icon@1.2.39
+    -   @khanacademy/wonder-blocks-layout@1.4.18
+    -   @khanacademy/wonder-blocks-modal@3.0.9
+    -   @khanacademy/wonder-blocks-search-field@1.0.21
+    -   @khanacademy/wonder-blocks-typography@1.1.40
+
+## 2.10.8
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [3813715d]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-clickable@2.4.6
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-icon@1.2.38
+    -   @khanacademy/wonder-blocks-layout@1.4.17
+    -   @khanacademy/wonder-blocks-modal@3.0.8
+    -   @khanacademy/wonder-blocks-search-field@1.0.20
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+    -   @khanacademy/wonder-blocks-timing@2.1.2
+    -   @khanacademy/wonder-blocks-typography@1.1.39
+
 ## 2.10.7
 
 ### Patch Changes

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { VariableSizeList as List } from "react-window";
+import type { DropdownItem } from "../../util/types";
+type Props = {
+    data: Array<DropdownItem>;
+    listRef?: React.RefObject<List>;
+};
+/**
+ * A minimal mocked version of the Virtualized implementation
+ */
+declare class DropdownCoreVirtualizedMock extends React.Component<Props> {
+    render(): React.ReactElement;
+}
+export default DropdownCoreVirtualizedMock;

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

@@ -0,0 +1,22 @@
+/**
+ * Flowtype definitions for dropdown-core-virtualized
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import { VariableSizeList as List } from "react-window";
+import type { DropdownItem } from "../../util/types";
+declare type Props = {
+  data: Array<DropdownItem>,
+  listRef?: React.RefObject<List>,
+  ...
+};
+/**
+ * A minimal mocked version of the Virtualized implementation
+ */
+declare class DropdownCoreVirtualizedMock extends React.Component<Props> {
+  render(): React.Element<>;
+}
+declare export default typeof DropdownCoreVirtualizedMock;

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

@@ -0,0 +1,94 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type ActionProps = {
+    /**
+     * Display text of the action item.
+     */
+    label: string;
+    /**
+     * Whether this action item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * URL to navigate to.
+     *
+     * Note: Either href or onClick must be defined
+     */
+    href?: string;
+    /**
+     * Optional attribute to indicate to the Screen Reader which language the
+     * item text is in.
+     */
+    lang?: string;
+    /**
+     * A target destination window for a link to open in.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank";
+    /**
+     * Whether to avoid using client-side navigation.
+     *
+     * If the URL passed to href is local to the client-side, e.g.
+     * /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
+     * component which handles the client-side navigation. You can set
+     * `skipClientNav` to true avoid using client-side nav entirely.
+     *
+     * NOTE: All URLs containing a protocol are considered external, e.g.
+     * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
+     * page reload.
+     */
+    skipClientNav?: boolean;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+    /**
+     * Function to call when button is clicked.
+     *
+     * This callback should be used for things like marking BigBingo
+     * conversions. It should NOT be used to redirect to a different URL or to
+     * prevent navigation via e.preventDefault(). The event passed to this
+     * handler will have its preventDefault() and stopPropagation() methods
+     * stubbed out.
+     *
+     * Note: onClick is optional if href is present, but must be defined if
+     * href is not
+     */
+    onClick?: () => unknown;
+    /**
+     * Whether this item should be indented to have menu items left-align in
+     * text when an ActionItem is used in the same menu as items that have
+     * checks or checkboxes. Auto-populated by menu.
+     * @ignore
+     */
+    indent: boolean;
+    /**
+     * Aria role to use, defaults to "menuitem".
+     */
+    role: "menuitem" | "option";
+    /**
+     * In case we use react-window, this needs to be added in order to inject
+     * styles to calculate the position
+     * @ignore
+     */
+    style?: StyleType;
+};
+type DefaultProps = {
+    disabled: ActionProps["disabled"];
+    indent: ActionProps["indent"];
+    role: ActionProps["role"];
+};
+/**
+ * The action item trigger actions, such as navigating to a different page or
+ * opening a modal. Supply the href and/or onClick props. Used as a child of
+ * ActionMenu.
+ */
+export default class ActionItem extends React.Component<ActionProps> {
+    static isClassOf(instance: React.ReactElement<any>): boolean;
+    static defaultProps: DefaultProps;
+    static __IS_ACTION_ITEM__: boolean;
+    renderClickableBehavior(router: any): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,112 @@
+/**
+ * Flowtype definitions for action-item
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare type ActionProps = {
+  /**
+   * Display text of the action item.
+   */
+  label: string,
+
+  /**
+   * Whether this action item is disabled.
+   */
+  disabled: boolean,
+
+  /**
+   * URL to navigate to.
+   *
+   * Note: Either href or onClick must be defined
+   */
+  href?: string,
+
+  /**
+   * Optional attribute to indicate to the Screen Reader which language the
+   * item text is in.
+   */
+  lang?: string,
+
+  /**
+   * A target destination window for a link to open in.
+   *
+   * TODO(WB-1262): only allow this prop when `href` is also set.t
+   */
+  target?: "_blank",
+
+  /**
+   * Whether to avoid using client-side navigation.
+   *
+   * If the URL passed to href is local to the client-side, e.g.
+   * /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
+   * component which handles the client-side navigation. You can set
+   * `skipClientNav` to true avoid using client-side nav entirely.
+   *
+   * NOTE: All URLs containing a protocol are considered external, e.g.
+   * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
+   * page reload.
+   */
+  skipClientNav?: boolean,
+
+  /**
+   * Test ID used for e2e testing.
+   */
+  testId?: string,
+
+  /**
+   * Function to call when button is clicked.
+   *
+   * This callback should be used for things like marking BigBingo
+   * conversions. It should NOT be used to redirect to a different URL or to
+   * prevent navigation via e.preventDefault(). The event passed to this
+   * handler will have its preventDefault() and stopPropagation() methods
+   * stubbed out.
+   *
+   * Note: onClick is optional if href is present, but must be defined if
+   * href is not
+   */
+  onClick?: () => mixed,
+
+  /**
+   * Whether this item should be indented to have menu items left-align in
+   * text when an ActionItem is used in the same menu as items that have
+   * checks or checkboxes. Auto-populated by menu.
+   * @ignore
+   */
+  indent: boolean,
+
+  /**
+   * Aria role to use, defaults to "menuitem".
+   */
+  role: "menuitem" | "option",
+
+  /**
+   * In case we use react-window, this needs to be added in order to inject
+   * styles to calculate the position
+   * @ignore
+   */
+  style?: StyleType,
+  ...
+};
+declare type DefaultProps = {
+  disabled: $PropertyType<ActionProps, "disabled">,
+  indent: $PropertyType<ActionProps, "indent">,
+  role: $PropertyType<ActionProps, "role">,
+  ...
+};
+/**
+ * The action item trigger actions, such as navigating to a different page or
+ * opening a modal. Supply the href and/or onClick props. Used as a child of
+ * ActionMenu.
+ */
+declare export default class ActionItem extends React.Component<ActionProps> {
+  static isClassOf(instance: React.Element<any>): boolean;
+  static defaultProps: DefaultProps;
+  static __IS_ACTION_ITEM__: boolean;
+  renderClickableBehavior(router: any): React.Node;
+  render(): React.Element<>;
+}

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { AriaProps } from "@khanacademy/wonder-blocks-core";
+import type { ClickableState } from "@khanacademy/wonder-blocks-clickable";
+type Props = Partial<Omit<AriaProps, "aria-disabled">> & ClickableState & {
+    /**
+     * Display text for the opener.
+     */
+    children: string;
+    /**
+     * Whether the opener is disabled. If disabled, disallows interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+    /**
+     * Whether the dropdown is open.
+     */
+    opened: boolean;
+};
+/**
+ * Although this component shares a lot with ButtonCore there are a couple
+ * of differences:
+ * - the down caret icon appears on the right instead of the left
+ * - the down caret icon is smaller that the one that would be used by ButtonCore
+ */
+export default class ActionMenuOpenerCore extends React.Component<Props> {
+    render(): React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,47 @@
+/**
+ * Flowtype definitions for action-menu-opener-core
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { AriaProps } from "@khanacademy/wonder-blocks-core";
+import type { ClickableState } from "@khanacademy/wonder-blocks-clickable";
+declare type Props = {
+  ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, { ... }>,
+  ...ClickableState,
+  ...{
+    /**
+     * Display text for the opener.
+     */
+    children: string,
+
+    /**
+     * Whether the opener is disabled. If disabled, disallows interaction.
+     */
+    disabled?: boolean,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+
+    /**
+     * Whether the dropdown is open.
+     */
+    opened: boolean,
+    ...
+  },
+};
+/**
+ * Although this component shares a lot with ButtonCore there are a couple
+ * of differences:
+ * - the down caret icon appears on the right instead of the left
+ * - the down caret icon is smaller that the one that would be used by ButtonCore
+ */
+declare export default class ActionMenuOpenerCore
+  extends React.Component<Props>
+{
+  render(): React.Element<>;
+}

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

@@ -0,0 +1,109 @@
+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 & {
+    /**
+     * The items in this dropdown.
+     */
+    children?: Array<Item> | Item;
+    /**
+     * Text for the opener of this menu.
+     */
+    menuText: string;
+    /**
+     * Can be used to override the state of the ActionMenu by parent elements
+     */
+    opened?: boolean;
+    /**
+     * In controlled mode, use this prop in case the parent needs to be notified
+     * when the menu opens/closes.
+     */
+    onToggle?: (opened: boolean) => unknown;
+    /**
+     * A callback that returns items that are newly selected. Use only if this
+     * menu contains select items (and make sure selectedValues is defined).
+     */
+    onChange?: (selectedItems: Array<string>) => unknown;
+    /**
+     * The values of the items that are currently selected. Use only if this
+     * menu contains select items (and make sure onChange is defined).
+     */
+    selectedValues?: Array<string>;
+    /**
+     * Whether this menu should be left-aligned or right-aligned with the
+     * opener component. Defaults to left-aligned.
+     */
+    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;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+    /**
+     * 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;
+    /**
+     * The child function that returns the anchor the ActionMenu will be
+     * activated by. This function takes eventState, which allows the opener
+     * element to access pointer event state.
+     */
+    opener?: (openerProps: OpenerProps) => React.ReactElement<any>;
+};
+type State = {
+    /**
+     * Whether or not the dropdown is open.
+     */
+    opened: boolean;
+};
+type DefaultProps = {
+    alignment: Props["alignment"];
+    disabled: Props["disabled"];
+};
+/**
+ * A menu that consists of various types of items.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * <ActionMenu menuText="Menu">
+ *  <ActionItem href="/profile" label="Profile" />
+ *  <ActionItem label="Settings" onClick={() => {}} />
+ * </ActionMenu>
+ * ```
+ */
+export default class ActionMenu extends React.Component<Props, State> {
+    openerElement: HTMLElement | null | undefined;
+    static defaultProps: DefaultProps;
+    state: State;
+    /**
+     * Used to sync the `opened` state when this component acts as a controlled
+     * component
+     */
+    static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
+    handleItemSelected: () => void;
+    handleOpenChanged: (opened: boolean) => void;
+    handleOptionSelected: (selectedValue: string) => void;
+    getMenuItems(): Array<DropdownItem>;
+    handleOpenerRef: (node?: any) => void;
+    handleClick: (e: React.SyntheticEvent) => void;
+    renderOpener(numItems: number): React.ReactElement<React.ComponentProps<typeof DropdownOpener>>;
+    render(): React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,139 @@
+/**
+ * Flowtype definitions for action-menu
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+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";
+declare type Props = {
+  ...AriaProps,
+  ...{
+    /**
+     * The items in this dropdown.
+     */
+    children?: Array<Item> | Item,
+
+    /**
+     * Text for the opener of this menu.
+     */
+    menuText: string,
+
+    /**
+     * Can be used to override the state of the ActionMenu by parent elements
+     */
+    opened?: boolean,
+
+    /**
+     * In controlled mode, use this prop in case the parent needs to be notified
+     * when the menu opens/closes.
+     */
+    onToggle?: (opened: boolean) => mixed,
+
+    /**
+     * A callback that returns items that are newly selected. Use only if this
+     * menu contains select items (and make sure selectedValues is defined).
+     */
+    onChange?: (selectedItems: Array<string>) => mixed,
+
+    /**
+     * The values of the items that are currently selected. Use only if this
+     * menu contains select items (and make sure onChange is defined).
+     */
+    selectedValues?: Array<string>,
+
+    /**
+     * Whether this menu should be left-aligned or right-aligned with the
+     * opener component. Defaults to left-aligned.
+     */
+    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,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+
+    /**
+     * 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,
+
+    /**
+     * The child function that returns the anchor the ActionMenu will be
+     * activated by. This function takes eventState, which allows the opener
+     * element to access pointer event state.
+     */
+    opener?: (openerProps: OpenerProps) => React.Element<any>,
+    ...
+  },
+};
+declare type State = {
+  /**
+   * Whether or not the dropdown is open.
+   */
+  opened: boolean,
+  ...
+};
+declare type DefaultProps = {
+  alignment: $PropertyType<Props, "alignment">,
+  disabled: $PropertyType<Props, "disabled">,
+  ...
+};
+/**
+ * A menu that consists of various types of items.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * <ActionMenu menuText="Menu">
+ *  <ActionItem href="/profile" label="Profile" />
+ *  <ActionItem label="Settings" onClick={() => {}} />
+ * </ActionMenu>
+ * ```
+ */
+declare export default class ActionMenu extends React.Component<Props, State> {
+  openerElement: HTMLElement | null | void;
+  static defaultProps: DefaultProps;
+  state: State;
+
+  /**
+   * Used to sync the `opened` state when this component acts as a controlled
+   * component
+   */
+  static getDerivedStateFromProps(
+    props: Props,
+    state: State
+  ): $Rest<State, { ... }> | null;
+  handleItemSelected: () => void;
+  handleOpenChanged: (opened: boolean) => void;
+  handleOptionSelected: (selectedValue: string) => void;
+  getMenuItems(): Array<DropdownItem>;
+  handleOpenerRef: (node?: any) => void;
+  handleClick: (e: React.SyntheticEvent<>) => void;
+  renderOpener(
+    numItems: number
+  ): React.Element<React.ComponentProps<typeof DropdownOpener>>;
+  render(): React.Element<>;
+}

package/dist/components/check.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/**
+ * Props describing the state of the OptionItem, shared by the checkbox
+ * component,
+ */
+type CheckProps = {
+    /** Whether option item is disabled. */
+    disabled: boolean;
+    /** Whether option item is selected. */
+    selected: boolean;
+    /** Whether option item is pressed. */
+    pressed: boolean;
+    /** Whether option item is hovered. */
+    hovered: boolean;
+    /** Whether option item is focused. */
+    focused: boolean;
+};
+/**
+ * The check component used by OptionItem.
+ */
+declare const Check: React.FC<CheckProps>;
+export default Check;

package/dist/components/check.js.flow

@@ -0,0 +1,45 @@
+/**
+ * Flowtype definitions for check
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+
+/**
+ * Props describing the state of the OptionItem, shared by the checkbox
+ * component,
+ */
+declare type CheckProps = {
+  /**
+   * Whether option item is disabled.
+   */
+  disabled: boolean,
+
+  /**
+   * Whether option item is selected.
+   */
+  selected: boolean,
+
+  /**
+   * Whether option item is pressed.
+   */
+  pressed: boolean,
+
+  /**
+   * Whether option item is hovered.
+   */
+  hovered: boolean,
+
+  /**
+   * Whether option item is focused.
+   */
+  focused: boolean,
+  ...
+};
+/**
+ * The check component used by OptionItem.
+ */
+declare var Check: React.FC<CheckProps>;
+declare export default typeof Check;