@khanacademy/wonder-blocks-modal 3.0.7 → 3.0.8

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @khanacademy/wonder-blocks-modal
 
+## 3.0.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-breadcrumbs@1.0.39
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-icon@1.2.38
+    -   @khanacademy/wonder-blocks-icon-button@3.4.22
+    -   @khanacademy/wonder-blocks-layout@1.4.17
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+    -   @khanacademy/wonder-blocks-timing@2.1.2
+    -   @khanacademy/wonder-blocks-typography@1.1.39
+
 ## 3.0.7
 
 ### Patch Changes

package/dist/components/close-button.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    /**
+     * Whether the button is on a dark/colored background.
+     *
+     * Sets primary button background color to white, and secondary and
+     * tertiary button title to color.
+     */
+    light?: boolean;
+    /** Optional click handler */
+    onClick?: () => unknown;
+    /** Optional custom styles. */
+    style?: StyleType;
+    /**
+     * Test ID used for e2e testing.
+     *
+     * In this case, this component is internal, so `testId` is composed with
+     * the `testId` passed down from the Dialog variant + a suffix to scope it
+     * to this component.
+     *
+     * @example
+     * For testId="some-random-id"
+     * The result will be: `some-random-id-modal-panel`
+     */
+    testId?: string;
+};
+export default class CloseButton extends React.Component<Props> {
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/close-button.js.flow

@@ -0,0 +1,43 @@
+/**
+ * Flowtype definitions for close-button
+ * 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 Props = {
+  /**
+   * Whether the button is on a dark/colored background.
+   *
+   * Sets primary button background color to white, and secondary and
+   * tertiary button title to color.
+   */
+  light?: boolean,
+
+  /**
+   * Optional click handler
+   */
+  onClick?: () => mixed,
+
+  /**
+   * Optional custom styles.
+   */
+  style?: StyleType,
+
+  /**
+   * Test ID used for e2e testing.
+   *
+   * In this case, this component is internal, so `testId` is composed with
+   * the `testId` passed down from the Dialog variant + a suffix to scope it
+   * to this component.
+   * @example For testId="some-random-id"
+   * The result will be: `some-random-id-modal-panel`
+   */
+  testId?: string,
+  ...
+};
+declare export default class CloseButton mixins React.Component<Props> {
+  render(): React.Element<>;
+}

package/dist/components/focus-trap.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+/**
+ * This component ensures that focus stays within itself. If the user uses Tab
+ * at the end of the modal, or Shift-Tab at the start of the modal, then this
+ * component wraps focus to the start/end respectively.
+ *
+ * We use this in `ModalBackdrop` to ensure that focus stays within the launched
+ * modal.
+ *
+ * Adapted from the WAI-ARIA dialog behavior example.
+ * https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html
+ *
+ * NOTE(mdr): This component frequently references the "modal" and the "modal
+ *     root", to aid readability in this package. But this component isn't
+ *     actually coupled to the modal, and these could be renamed "children"
+ *     instead if we were to generalize!
+ */
+type Props = {
+    children: React.ReactNode;
+    /**
+     * Style applied to the View containing children.
+     * TODO(kevinb): only allow z-index to be specified.  We'll be able to remove
+     * this prop once we remove all uses of z-indexes from webapp.
+     */
+    style?: StyleType;
+};
+export default class FocusTrap extends React.Component<Props> {
+    /**
+     * Tabbing is restricted to descendents of this element.
+     */
+    modalRoot: Node | null | undefined;
+    getModalRoot: (node?: any) => void;
+    /**
+     * Try to focus the given node. Return true if successful.
+     */
+    tryToFocus(node: Node): boolean | null | undefined;
+    /**
+     * Focus the next available focusable element within the modal root.
+     *
+     * @param {boolean} isLast Used to determine the next available item. true =
+     * First element within the modal, false = Last element within the modal.
+     */
+    focusElementIn(isLast: boolean): void;
+    /**
+     * Triggered when the focus is set to the first sentinel. This way, the
+     * focus will be redirected to the last element inside the modal dialog.
+     */
+    handleFocusMoveToLast: () => void;
+    /**
+     * Triggered when the focus is set to the last sentinel. This way, the focus
+     * will be redirected to the first element inside the modal dialog.
+     */
+    handleFocusMoveToFirst: () => void;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/focus-trap.js.flow

@@ -0,0 +1,69 @@
+/**
+ * Flowtype definitions for focus-trap
+ * 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";
+
+/**
+ * This component ensures that focus stays within itself. If the user uses Tab
+ * at the end of the modal, or Shift-Tab at the start of the modal, then this
+ * component wraps focus to the start/end respectively.
+ *
+ * We use this in `ModalBackdrop` to ensure that focus stays within the launched
+ * modal.
+ *
+ * Adapted from the WAI-ARIA dialog behavior example.
+ * https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html
+ *
+ * NOTE(mdr): This component frequently references the "modal" and the "modal
+ *     root", to aid readability in this package. But this component isn't
+ *     actually coupled to the modal, and these could be renamed "children"
+ *     instead if we were to generalize!
+ */
+declare type Props = {
+  children: React.Node,
+
+  /**
+   * Style applied to the View containing children.
+   * TODO(kevinb): only allow z-index to be specified.  We'll be able to remove
+   * this prop once we remove all uses of z-indexes from webapp.
+   */
+  style?: StyleType,
+  ...
+};
+declare export default class FocusTrap mixins React.Component<Props> {
+  /**
+   * Tabbing is restricted to descendents of this element.
+   */
+  modalRoot: Node | null | void;
+  getModalRoot: (node?: any) => void;
+
+  /**
+   * Try to focus the given node. Return true if successful.
+   */
+  tryToFocus(node: Node): boolean | null | void;
+
+  /**
+   * Focus the next available focusable element within the modal root.
+   * @param {boolean} isLast Used to determine the next available item. true =
+   * First element within the modal, false = Last element within the modal.
+   */
+  focusElementIn(isLast: boolean): void;
+
+  /**
+   * Triggered when the focus is set to the first sentinel. This way, the
+   * focus will be redirected to the last element inside the modal dialog.
+   */
+  handleFocusMoveToLast: () => void;
+
+  /**
+   * Triggered when the focus is set to the last sentinel. This way, the focus
+   * will be redirected to the first element inside the modal dialog.
+   */
+  handleFocusMoveToFirst: () => void;
+  render(): React.Element<>;
+}

package/dist/components/modal-backdrop.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import type { ModalElement } from "../util/types";
+type Props = {
+    children: ModalElement;
+    onCloseModal: () => unknown;
+    /**
+     * The selector for the element that will be focused when the dialog shows.
+     * When not set, the first tabbable element within the dialog will be used.
+     */
+    initialFocusId?: string;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+};
+/**
+ * A private component used by ModalLauncher. This is the fixed-position
+ * container element that gets mounted outside the DOM. It overlays the modal
+ * content (provided as `children`) over the content, with a gray backdrop
+ * behind it.
+ *
+ * This component is also responsible for cloning the provided modal `children`,
+ * and adding an `onClose` prop that will call `onCloseModal`. If an
+ * `onClose` prop is already provided, the two are merged.
+ */
+export default class ModalBackdrop extends React.Component<Props> {
+    componentDidMount(): void;
+    _mousePressedOutside: boolean;
+    /**
+     * Returns an element specified by the user
+     */
+    _getInitialFocusElement(node: HTMLElement): HTMLElement | null;
+    /**
+     * Returns the first focusable element found inside the Dialog
+     */
+    _getFirstFocusableElement(node: HTMLElement): HTMLElement | null;
+    /**
+     * Returns the dialog element
+     */
+    _getDialogElement(node: HTMLElement): HTMLElement;
+    /**
+     * When the user clicks on the gray backdrop area (i.e., the click came
+     * _directly_ from the positioner, not bubbled up from its children), close
+     * the modal.
+     */
+    handleMouseDown: (e: React.SyntheticEvent) => void;
+    handleMouseUp: (e: React.SyntheticEvent) => void;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/modal-backdrop.js.flow

@@ -0,0 +1,63 @@
+/**
+ * Flowtype definitions for modal-backdrop
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { ModalElement } from "../util/types";
+declare type Props = {
+  children: ModalElement,
+  onCloseModal: () => mixed,
+
+  /**
+   * The selector for the element that will be focused when the dialog shows.
+   * When not set, the first tabbable element within the dialog will be used.
+   */
+  initialFocusId?: string,
+
+  /**
+   * Test ID used for e2e testing.
+   */
+  testId?: string,
+  ...
+};
+/**
+ * A private component used by ModalLauncher. This is the fixed-position
+ * container element that gets mounted outside the DOM. It overlays the modal
+ * content (provided as `children`) over the content, with a gray backdrop
+ * behind it.
+ *
+ * This component is also responsible for cloning the provided modal `children`,
+ * and adding an `onClose` prop that will call `onCloseModal`. If an
+ * `onClose` prop is already provided, the two are merged.
+ */
+declare export default class ModalBackdrop mixins React.Component<Props> {
+  componentDidMount(): void;
+  _mousePressedOutside: boolean;
+
+  /**
+   * Returns an element specified by the user
+   */
+  _getInitialFocusElement(node: HTMLElement): HTMLElement | null;
+
+  /**
+   * Returns the first focusable element found inside the Dialog
+   */
+  _getFirstFocusableElement(node: HTMLElement): HTMLElement | null;
+
+  /**
+   * Returns the dialog element
+   */
+  _getDialogElement(node: HTMLElement): HTMLElement;
+
+  /**
+   * When the user clicks on the gray backdrop area (i.e., the click came
+   * _directly_ from the positioner, not bubbled up from its children), close
+   * the modal.
+   */
+  handleMouseDown: (e: React.SyntheticEvent<>) => void;
+  handleMouseUp: (e: React.SyntheticEvent<>) => void;
+  render(): React.Element<>;
+}

package/dist/components/modal-content.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    /** Should the content scroll on overflow, or just expand. */
+    scrollOverflow: boolean;
+    /** The contents of the ModalContent */
+    children: React.ReactNode;
+    /** Optional styling to apply to the contents. */
+    style?: StyleType;
+};
+type DefaultProps = {
+    scrollOverflow: Props["scrollOverflow"];
+};
+/**
+ * The Modal content included after the header
+ */
+export default class ModalContent extends React.Component<Props> {
+    static isClassOf(instance: any): boolean;
+    static defaultProps: DefaultProps;
+    static __IS_MODAL_CONTENT__: boolean;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/modal-content.js.flow

@@ -0,0 +1,39 @@
+/**
+ * Flowtype definitions for modal-content
+ * 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 Props = {
+  /**
+   * Should the content scroll on overflow, or just expand.
+   */
+  scrollOverflow: boolean,
+
+  /**
+   * The contents of the ModalContent
+   */
+  children: React.Node,
+
+  /**
+   * Optional styling to apply to the contents.
+   */
+  style?: StyleType,
+  ...
+};
+declare type DefaultProps = {
+  scrollOverflow: $PropertyType<Props, "scrollOverflow">,
+  ...
+};
+/**
+ * The Modal content included after the header
+ */
+declare export default class ModalContent mixins React.Component<Props> {
+  static isClassOf(instance: any): boolean;
+  static defaultProps: DefaultProps;
+  static __IS_MODAL_CONTENT__: boolean;
+  render(): React.Element<>;
+}

package/dist/components/modal-context.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type ContextType = {
+    closeModal?: () => unknown;
+};
+declare const _default: React.Context<ContextType>;
+export default _default;

package/dist/components/modal-context.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Flowtype definitions for modal-context
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+declare type ContextType = {
+  closeModal?: () => mixed,
+  ...
+};
+declare var _default: React.Context<ContextType>;
+declare export default typeof _default;

package/dist/components/modal-dialog.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    /**
+     * The dialog content
+     */
+    children: React.ReactNode;
+    /**
+     * When set, provides a component that can render content above the top of the modal;
+     * when not set, no additional content is shown above the modal.
+     * This prop is passed down to the ModalDialog.
+     */
+    above?: React.ReactNode;
+    /**
+     * When set, provides a component that will render content below the bottom of the modal;
+     * when not set, no additional content is shown below the modal.
+     * This prop is passed down to the ModalDialog.
+     */
+    below?: React.ReactNode;
+    /**
+     * When set, overrides the default role value. Default role is "dialog"
+     * Roles other than dialog and alertdialog aren't appropriate for this
+     * component
+     */
+    role?: "dialog" | "alertdialog";
+    /**
+     * Custom styles
+     */
+    style?: StyleType;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+    /**
+     * The ID of the content labelling this dialog, if applicable.
+     */
+    ["aria-labelledby"]?: string;
+    /**
+     * The ID of the content describing this dialog, if applicable.
+     */
+    ["aria-describedby"]?: string;
+};
+type DefaultProps = {
+    role: Props["role"];
+};
+/**
+ * `ModalDialog` is a component that contains these elements:
+ * - The visual dialog element itself (`<div role="dialog"/>`)
+ * - The custom contents below and/or above the Dialog itself (e.g. decorative graphics).
+ *
+ * **Accessibility notes:**
+ * - By default (e.g. using `OnePaneDialog`), `aria-labelledby` is populated automatically using the dialog title `id`.
+ * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
+ * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
+ */
+export default class ModalDialog extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/modal-dialog.js.flow

@@ -0,0 +1,75 @@
+/**
+ * Flowtype definitions for modal-dialog
+ * 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 Props = {
+  /**
+   * The dialog content
+   */
+  children: React.Node,
+
+  /**
+   * When set, provides a component that can render content above the top of the modal;
+   * when not set, no additional content is shown above the modal.
+   * This prop is passed down to the ModalDialog.
+   */
+  above?: React.Node,
+
+  /**
+   * When set, provides a component that will render content below the bottom of the modal;
+   * when not set, no additional content is shown below the modal.
+   * This prop is passed down to the ModalDialog.
+   */
+  below?: React.Node,
+
+  /**
+   * When set, overrides the default role value. Default role is "dialog"
+   * Roles other than dialog and alertdialog aren't appropriate for this
+   * component
+   */
+  role?: "dialog" | "alertdialog",
+
+  /**
+   * Custom styles
+   */
+  style?: StyleType,
+
+  /**
+   * Test ID used for e2e testing.
+   */
+  testId?: string,
+
+  /**
+   * The ID of the content labelling this dialog, if applicable.
+   */
+  "aria-labelledby": string | void,
+
+  /**
+   * The ID of the content describing this dialog, if applicable.
+   */
+  "aria-describedby": string | void,
+  ...
+};
+declare type DefaultProps = {
+  role: $PropertyType<Props, "role">,
+  ...
+};
+/**
+ * `ModalDialog` is a component that contains these elements:
+ * - The visual dialog element itself (`<div role="dialog"/>`)
+ * - The custom contents below and/or above the Dialog itself (e.g. decorative graphics).
+ *
+ * **Accessibility notes:**
+ * - By default (e.g. using `OnePaneDialog`), `aria-labelledby` is populated automatically using the dialog title `id`.
+ * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
+ * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
+ */
+declare export default class ModalDialog mixins React.Component<Props> {
+  static defaultProps: DefaultProps;
+  render(): React.Element<>;
+}

package/dist/components/modal-footer.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+type Props = {
+    children: React.ReactNode;
+};
+/**
+ * Modal footer included after the content.
+ *
+ * **Implementation notes**:
+ *
+ * If you are creating a custom Dialog, make sure to follow these guidelines:
+ * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the `footer` prop.
+ * - The footer is completely flexible. Meaning the developer needs to add its own custom layout to match design specs.
+ *
+ * **Usage**
+ *
+ * ```js
+ * <ModalFooter>
+ *     <Button onClick={() => {}}>Submit</Button>
+ * </ModalFooter>
+ * ```
+ */
+export default class ModalFooter extends React.Component<Props> {
+    static isClassOf(instance: any): boolean;
+    static __IS_MODAL_FOOTER__: boolean;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/modal-footer.js.flow

@@ -0,0 +1,34 @@
+/**
+ * Flowtype definitions for modal-footer
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+declare type Props = {
+  children: React.Node,
+  ...
+};
+/**
+ * Modal footer included after the content.
+ *
+ * **Implementation notes**:
+ *
+ * If you are creating a custom Dialog, make sure to follow these guidelines:
+ * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the `footer` prop.
+ * - The footer is completely flexible. Meaning the developer needs to add its own custom layout to match design specs.
+ *
+ * **Usage**
+ *
+ * ```js
+ * <ModalFooter>
+ *     <Button onClick={() => {}}>Submit</Button>
+ * </ModalFooter>
+ * ```
+ */
+declare export default class ModalFooter mixins React.Component<Props> {
+  static isClassOf(instance: any): boolean;
+  static __IS_MODAL_FOOTER__: boolean;
+  render(): React.Element<>;
+}