@khanacademy/wonder-blocks-modal 4.0.18 → 4.0.20

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

@@ -1,67 +0,0 @@
-/**
- * Flowtype definitions for data
- * 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 extends 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.Node;
-}

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

@@ -1,61 +0,0 @@
-/**
- * Flowtype definitions for data
- * 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 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: SyntheticEvent<>) => void;
-  handleMouseUp: (e: SyntheticEvent<>) => void;
-  render(): React.Node;
-}

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

@@ -1,36 +0,0 @@
-/**
- * Flowtype definitions for data
- * 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 extends React.Component<Props> {
-  static isClassOf(instance: any): boolean;
-  static defaultProps: DefaultProps;
-  static __IS_MODAL_CONTENT__: boolean;
-  render(): React.Node;
-}

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

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

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

@@ -1,72 +0,0 @@
-/**
- * Flowtype definitions for data
- * 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,
-
-  /**
-   * The ID of the content describing this dialog, if applicable.
-   */
-  "aria-describedby"?: string,
-|};
-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 extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  render(): React.Node;
-}

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

@@ -1,32 +0,0 @@
-/**
- * Flowtype definitions for data
- * 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 extends React.Component<Props> {
-  static isClassOf(instance: any): boolean;
-  static __IS_MODAL_FOOTER__: boolean;
-  render(): React.Node;
-}

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

@@ -1,105 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import { Breadcrumbs } from "@khanacademy/wonder-blocks-breadcrumbs";
-declare type Common = {|
-  /**
-   * The main title rendered in larger bold text.
-   */
-  title: string,
-
-  /**
-   * Whether to display the "light" version of this component instead, for
-   * use when the item is used on a dark background.
-   */
-  light: boolean,
-
-  /**
-   * An id to provide a selector for the title element.
-   */
-  titleId: string,
-
-  /**
-   * 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-header`
-   */
-  testId?: string,
-|};
-declare type WithSubtitle = {|
-  ...Common,
-  ...{|
-    /**
-     * The dialog subtitle.
-     */
-    subtitle: string,
-  |},
-|};
-declare type WithBreadcrumbs = {|
-  ...Common,
-  ...{|
-    /**
-     * Adds a breadcrumb-trail, appearing in the ModalHeader, above the title.
-     */
-    breadcrumbs: React.Element<typeof Breadcrumbs>,
-  |},
-|};
-declare type Props = Common | WithSubtitle | WithBreadcrumbs;
-declare type DefaultProps = {|
-  light: $PropertyType<Props, "light">,
-|};
-/**
- * This is a helper component that is never rendered by itself. It is always
- * pinned to the top of the dialog, is responsive using the same behavior as its
- * parent dialog, and has the following properties:
- * - title
- * - breadcrumb OR subtitle, but not both.
- *
- * **Accessibility notes:**
- *
- * - By default (e.g. using [OnePaneDialog](/#onepanedialog)), `titleId` is
- *   populated automatically by the parent container.
- * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the
- *   ModalHeader doesn’t have to have the `titleId` prop however this is
- *   recommended. It should match the `aria-labelledby` prop of the
- *   [ModalDialog](/#modaldialog) component. If you want to see an example of
- *   how to generate this ID, check [IDProvider](/#idprovider).
- *
- * **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
- *   `header` prop.
- * - Add a title (required).
- * - Optionally add a subtitle or breadcrumbs.
- * - We encourage you to add `titleId` (see Accessibility notes).
- * - If the `ModalPanel` has a dark background, make sure to set `light` to
- *   `false`.
- * - If you need to create e2e tests, make sure to pass a `testId` prop and
- *   add a sufix to scope the testId to this component: e.g.
- *   `some-random-id-ModalHeader`. This scope will also be passed to the title
- *   and subtitle elements: e.g. `some-random-id-ModalHeader-title`.
- *
- * Example:
- *
- * ```js
- * <ModalHeader
- *      title="Sidebar using ModalHeader"
- *      subtitle="subtitle"
- *      titleId="uniqueTitleId"
- *      light={false}
- *  />
- * ```
- */
-declare export default class ModalHeader extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  render(): React.Node;
-}

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

@@ -1,27 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { ModalElement } from "../util/types";
-declare var _default: (props: {|
-  +children?:
-    | ((arg1: {|
-        openModal: () => mixed,
-      |}) => React.Node)
-    | void,
-  +onClose?: (() => mixed) | void,
-  +testId?: string | void,
-  +initialFocusId?: string | void,
-  +backdropDismissEnabled?: boolean | void,
-  +modal:
-    | ModalElement
-    | ((props: {|
-        closeModal: () => void,
-      |}) => ModalElement),
-  +closedFocusId?: string | void,
-  +opened?: boolean | void,
-|}) => React$Node;
-declare export default typeof _default;

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

@@ -1,97 +0,0 @@
-/**
- * Flowtype definitions for data
- * 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";
-import ModalContent from "./modal-content";
-import ModalHeader from "./modal-header";
-import ModalFooter from "./modal-footer";
-declare type Props = {|
-  /**
-   * The main contents of the ModalPanel. All other parts of the panel
-   * are positioned around it.
-   */
-  content: React.Element<typeof ModalContent> | React.Node,
-
-  /**
-   * The modal header to show at the top of the panel.
-   */
-  header?: React.Element<typeof ModalHeader> | React.Node,
-
-  /**
-   * A footer to show beneath the contents.
-   */
-  footer?: React.Element<typeof ModalFooter> | React.Node,
-
-  /**
-   * When true, the close button is shown; otherwise, the close button is not shown.
-   */
-  closeButtonVisible: boolean,
-
-  /**
-   * Should the contents of the panel become scrollable should they
-   * become too tall?
-   */
-  scrollOverflow: boolean,
-
-  /**
-   * Whether to display the "light" version of this component instead, for
-   * use when the item is used on a dark background.
-   */
-  light: boolean,
-
-  /**
-   * Any optional styling to apply to the panel.
-   */
-  style?: StyleType,
-
-  /**
-   * Called when the close button is clicked.
-   *
-   * If you're using `ModalLauncher`, you should not use this prop!
-   * Instead, to listen for when the modal closes, add an `onClose` handler
-   * to the `ModalLauncher`.  Doing so will throw an error.
-   */
-  onClose?: () => mixed,
-
-  /**
-   * Test ID used for e2e testing.
-   *
-   * In this case, this `testId` comes from the `testId` prop defined in the
-   * Dialog variant (e.g. OnePaneDialog).
-   */
-  testId?: string,
-|};
-declare type DefaultProps = {|
-  closeButtonVisible: $PropertyType<Props, "closeButtonVisible">,
-  scrollOverflow: $PropertyType<Props, "scrollOverflow">,
-  light: $PropertyType<Props, "light">,
-|};
-/**
- * ModalPanel is  the content container.
- *
- * **Implementation notes:**
- *
- * If you are creating a custom Dialog, make sure to follow these guidelines:
- * - Make sure to add this component inside the [ModalDialog](/#modaldialog).
- * - If needed, you can also add a [ModalHeader](/#modalheader) using the
- *   `header` prop. Same goes for [ModalFooter](/#modalfooter).
- * - If you need to create e2e tests, make sure to pass a `testId` prop. This
- *   will be passed down to this component using a sufix: e.g.
- *   `some-random-id-ModalPanel`. This scope will be propagated to the
- *   CloseButton element as well: e.g. `some-random-id-CloseButton`.
- *
- * ```js
- * <ModalDialog>
- *      <ModalPanel content={"custom content goes here"} />
- * </ModalDialog>
- * ```
- */
-declare export default class ModalPanel extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  renderMainContent(): React.Node;
-  render(): React.Node;
-}

package/dist/components/one-pane-dialog.js.flow

@@ -1,148 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import { Breadcrumbs } from "@khanacademy/wonder-blocks-breadcrumbs";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
-import ModalHeader from "./modal-header";
-declare type Common = {|
-  /**
-   * The content of the modal, appearing between the titlebar and footer.
-   */
-  content: React.Node,
-
-  /**
-   * The title of the modal, appearing in the titlebar.
-   */
-  title: string,
-
-  /**
-   * The content of the modal's footer. A great place for buttons!
-   *
-   * Content is right-aligned by default. To control alignment yourself,
-   * provide a container element with 100% width.
-   */
-  footer?: React.Node,
-
-  /**
-   * Called when the close button is clicked.
-   *
-   * If you're using `ModalLauncher`, you probably shouldn't use this prop!
-   * Instead, to listen for when the modal closes, add an `onClose` handler
-   * to the `ModalLauncher`.  Doing so will result in a console.warn().
-   */
-  onClose?: () => mixed,
-
-  /**
-   * When true, the close button is shown; otherwise, the close button is not shown.
-   */
-  closeButtonVisible?: boolean,
-
-  /**
-   * 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.
-   *
-   * NOTE: Devs can customize this content by rendering the component assigned to this prop with custom styles,
-   * such as by wrapping it in a View.
-   */
-  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",
-
-  /**
-   * Optional custom styles.
-   */
-  style?: StyleType,
-
-  /**
-   * Test ID used for e2e testing. This ID will be passed down to the Dialog.
-   */
-  testId?: string,
-
-  /**
-   * An optional id parameter for the title. If one is
-   * not provided, a unique id will be generated.
-   */
-  titleId?: string,
-
-  /**
-   * The ID of the content describing this dialog, if applicable.
-   */
-  "aria-describedby"?: string,
-|};
-declare type WithSubtitle = {|
-  ...Common,
-  ...{|
-    /**
-     * The subtitle of the modal, appearing in the titlebar, below the title.
-     */
-    subtitle: string,
-  |},
-|};
-declare type WithBreadcrumbs = {|
-  ...Common,
-  ...{|
-    /**
-     * Adds a breadcrumb-trail, appearing in the ModalHeader, above the title.
-     */
-    breadcrumbs: React.Element<typeof Breadcrumbs>,
-  |},
-|};
-declare type Props = Common | WithSubtitle | WithBreadcrumbs;
-declare type DefaultProps = {|
-  closeButtonVisible: $PropertyType<Props, "closeButtonVisible">,
-|};
-/**
- * This is the standard layout for most straightforward modal experiences.
- *
- * The ModalHeader is required, but the ModalFooter is optional.
- * The content of the dialog itself is fully customizable, but the
- * left/right/top/bottom padding is fixed.
- *
- * ### Usage
- *
- * ```jsx
- * import {OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
- * import {Body} from "@khanacademy/wonder-blocks-typography";
- *
- * <OnePaneDialog
- *     title="Some title"
- *     content={
- *         <Body>
- *             {`Lorem ipsum dolor sit amet, consectetur adipiscing
- *             elit, sed do eiusmod tempor incididunt ut labore et
- *             dolore magna aliqua. Ut enim ad minim veniam,
- *             quis nostrud exercitation ullamco laboris nisi ut
- *             aliquip ex ea commodo consequat. Duis aute irure
- *             dolor in reprehenderit in voluptate velit esse
- *             cillum dolore eu fugiat nulla pariatur. Excepteur
- *             sint occaecat cupidatat non proident, sunt in culpa
- *             qui officia deserunt mollit anim id est.`}
- *         </Body>
- *     }
- * />
- * ```
- */
-declare export default class OnePaneDialog extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  renderHeader(
-    uniqueId: string
-  ): React.Element<typeof ModalHeader>;
-  render(): React.Node;
-}

package/dist/components/scroll-disabler.js.flow

@@ -1,20 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-declare type Props = { [key: any]: any };
-declare class ScrollDisabler extends React.Component<Props> {
-  static oldOverflow: string;
-  static oldPosition: string;
-  static oldScrollY: number;
-  static oldWidth: string;
-  static oldTop: string;
-  componentDidMount(): void;
-  componentWillUnmount(): void;
-  static numModalsOpened: number;
-  render(): React.Element<any> | null;
-}
-declare export default typeof ScrollDisabler;