npm - @khanacademy/wonder-blocks-modal - Versions diffs - 3.0.6 → 3.0.8 - Mend

@khanacademy/wonder-blocks-modal 3.0.6 → 3.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/CHANGELOG.md +50 -0
package/dist/components/close-button.d.ts +31 -0
package/dist/components/close-button.js.flow +43 -0
package/dist/components/focus-trap.d.ts +57 -0
package/dist/components/focus-trap.js.flow +69 -0
package/dist/components/modal-backdrop.d.ts +50 -0
package/dist/components/modal-backdrop.js.flow +63 -0
package/dist/components/modal-content.d.ts +23 -0
package/dist/components/modal-content.js.flow +39 -0
package/dist/components/modal-context.d.ts +6 -0
package/dist/components/modal-context.js.flow +14 -0
package/dist/components/modal-dialog.d.ts +60 -0
package/dist/components/modal-dialog.js.flow +75 -0
package/dist/components/modal-footer.d.ts +27 -0
package/dist/components/modal-footer.js.flow +34 -0
package/dist/components/modal-header.d.ts +93 -0
package/dist/components/modal-header.js.flow +110 -0
package/dist/components/modal-launcher.d.ts +17 -0
package/dist/components/modal-launcher.js.flow +34 -0
package/dist/components/modal-panel.d.ts +84 -0
package/dist/components/modal-panel.js.flow +102 -0
package/dist/components/one-pane-dialog.d.ts +124 -0
package/dist/components/one-pane-dialog.js.flow +153 -0
package/dist/components/scroll-disabler.d.ts +24 -0
package/dist/components/scroll-disabler.js.flow +21 -0
package/dist/es/index.js +222 -210
package/dist/index.d.ts +8 -0
package/dist/index.js +237 -226
package/dist/index.js.flow +23 -2
package/dist/util/constants.d.ts +5 -0
package/dist/util/constants.js.flow +12 -0
package/dist/util/find-focusable-nodes.d.ts +1 -0
package/dist/util/find-focusable-nodes.js.flow +10 -0
package/dist/util/maybe-get-portal-mounted-modal-host-element.d.ts +9 -0
package/dist/util/maybe-get-portal-mounted-modal-host-element.js.flow +18 -0
package/dist/util/types.d.ts +12 -0
package/dist/util/types.js.flow +20 -0
package/package.json +13 -13
package/src/components/__tests__/{close-button.test.js → close-button.test.tsx} +3 -4
package/src/components/__tests__/{focus-trap.test.js → focus-trap.test.tsx} +1 -2
package/src/components/__tests__/{modal-backdrop.test.js → modal-backdrop.test.tsx} +2 -3
package/src/components/__tests__/{modal-header.test.js → modal-header.test.tsx} +4 -3
package/src/components/__tests__/{modal-launcher.test.js → modal-launcher.test.tsx} +13 -17
package/src/components/__tests__/{modal-panel.test.js → modal-panel.test.tsx} +3 -4
package/src/components/__tests__/{one-pane-dialog.test.js → one-pane-dialog.test.tsx} +1 -2
package/src/components/{close-button.js → close-button.tsx} +8 -12
package/src/components/{focus-trap.js → focus-trap.tsx} +12 -12
package/src/components/{modal-backdrop.js → modal-backdrop.tsx} +23 -21
package/src/components/{modal-content.js → modal-content.tsx} +11 -12
package/src/components/modal-context.ts +13 -0
package/src/components/{modal-dialog.js → modal-dialog.tsx} +15 -23
package/src/components/{modal-footer.js → modal-footer.tsx} +5 -6
package/src/components/{modal-header.js → modal-header.tsx} +20 -26
package/src/components/{modal-launcher.js → modal-launcher.tsx} +43 -70
package/src/components/{modal-panel.js → modal-panel.tsx} +31 -32
package/src/components/{one-pane-dialog.js → one-pane-dialog.tsx} +40 -48
package/src/components/{scroll-disabler.js → scroll-disabler.ts} +3 -4
package/src/index.ts +17 -0
package/src/util/{constants.js → constants.ts} +0 -2
package/src/util/{find-focusable-nodes.js → find-focusable-nodes.ts} +0 -2
package/src/util/{maybe-get-portal-mounted-modal-host-element.test.js → maybe-get-portal-mounted-modal-host-element.test.tsx} +8 -9
package/src/util/{maybe-get-portal-mounted-modal-host-element.js → maybe-get-portal-mounted-modal-host-element.ts} +6 -5
package/src/util/{types.js → types.ts} +3 -2
package/tsconfig.json +20 -0
package/tsconfig.tsbuildinfo +1 -0
package/src/components/__docs__/modal-dialog.stories.js +0 -308
package/src/components/__docs__/modal-footer.stories.js +0 -337
package/src/components/__docs__/modal-header.argtypes.js +0 -76
package/src/components/__docs__/modal-header.stories.js +0 -294
package/src/components/__docs__/modal-launcher.argtypes.js +0 -78
package/src/components/__docs__/modal-launcher.stories.js +0 -513
package/src/components/__docs__/modal-panel.stories.js +0 -414
package/src/components/__docs__/one-pane-dialog.argtypes.js +0 -108
package/src/components/__docs__/one-pane-dialog.stories.js +0 -582
package/src/components/modal-context.js +0 -14
package/src/index.js +0 -18

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

@@ -0,0 +1,153 @@
+/**
+ * Flowtype definitions for one-pane-dialog
+ * 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 | void,
+  ...
+};
+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<React.ComponentProps<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 mixins React.Component<Props> {
+  static defaultProps: DefaultProps;
+  renderHeader(
+    uniqueId: string
+  ): React.Element<React.ComponentProps<typeof ModalHeader>>;
+  render(): React.Element<>;
+}

package/dist/components/scroll-disabler.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+/**
+ * A UI-less component that lets `ModalLauncher` disable page scroll.
+ *
+ * The positioning of the modal requires some global page state changed
+ * unfortunately, and this handles that in an encapsulated way.
+ *
+ * NOTE(mdr): This component was copied from webapp. Be wary of sync issues. It
+ *     also doesn't have unit tests, and we haven't added any, since it's a
+ *     relatively stable component that has now been stress-tested lots in prod.
+ */
+import * as React from "react";
+type Props = Record<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.ReactElement | null;
+}
+export default ScrollDisabler;

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

@@ -0,0 +1,21 @@
+/**
+ * Flowtype definitions for scroll-disabler
+ * 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 mixins 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<> | null;
+}
+declare export default typeof ScrollDisabler;