@khanacademy/wonder-blocks-modal 5.1.11 → 5.1.13

package/src/components/focus-trap.tsx

@@ -1,148 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-const FOCUSABLE_ELEMENTS =
-    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-
-/**
- * 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 = (node) => {
-        if (!node) {
-            // The component is being umounted
-            return;
-        }
-
-        const modalRoot = ReactDOM.findDOMNode(node);
-        if (!modalRoot) {
-            throw new Error(
-                "Assertion error: modal root should exist after mount",
-            );
-        }
-        this.modalRoot = modalRoot;
-    };
-
-    /**
-     * Try to focus the given node. Return true if successful.
-     */
-    tryToFocus(node: Node): boolean | null | undefined {
-        if (node instanceof HTMLElement) {
-            try {
-                node.focus();
-            } catch (e: any) {
-                // ignore error
-            }
-
-            return document.activeElement === node;
-        }
-    }
-
-    /**
-     * 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) {
-        const modalRootAsHtmlEl = this.modalRoot as HTMLElement;
-        // Get the list of available focusable elements within the modal.
-        const focusableNodes = Array.from(
-            modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS),
-        );
-
-        const nodeIndex = !isLast ? focusableNodes.length - 1 : 0;
-
-        const focusableNode = focusableNodes[nodeIndex];
-        this.tryToFocus(focusableNode);
-    }
-
-    /**
-     * 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 = () => {
-        this.focusElementIn(false);
-    };
-
-    /**
-     * 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 = () => {
-        this.focusElementIn(true);
-    };
-
-    render(): React.ReactNode {
-        const {style} = this.props;
-
-        return (
-            <React.Fragment>
-                {/* When you press Tab on the last focusable node of the
-                 * document, some browsers will move your tab focus outside of
-                 * the document. But we want to capture that as a focus event,
-                 * and move focus back into the modal! So, we add focusable
-                 * sentinel nodes. That way, tabbing out of the modal should
-                 * take you to a sentinel node, rather than taking you out of
-                 * the document. These sentinels aren't critical to focus
-                 * wrapping, though; we're resilient to any kind of focus
-                 * shift, whether it's to the sentinels or somewhere else!
-                 * We set the sentinels to be position: fixed to make sure
-                 * they're always in view, this prevents page scrolling when
-                 * tabbing. */}
-                <div
-                    tabIndex={0}
-                    className="modal-focus-trap-first"
-                    onFocus={this.handleFocusMoveToLast}
-                    style={{position: "fixed"}}
-                />
-                <View style={style} ref={this.getModalRoot}>
-                    {this.props.children}
-                </View>
-                <div
-                    tabIndex={0}
-                    className="modal-focus-trap-last"
-                    onFocus={this.handleFocusMoveToFirst}
-                    style={{position: "fixed"}}
-                />
-            </React.Fragment>
-        );
-    }
-}

package/src/components/modal-backdrop.tsx

@@ -1,172 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import {StyleSheet} from "aphrodite";
-
-import {color} from "@khanacademy/wonder-blocks-tokens";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {ModalLauncherPortalAttributeName} from "../util/constants";
-
-import {findFocusableNodes} from "../util/find-focusable-nodes";
-
-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() {
-        const node: HTMLElement = ReactDOM.findDOMNode(this) as any;
-        if (!node) {
-            return;
-        }
-
-        const firstFocusableElement =
-            // 1. try to get element specified by the user
-            this._getInitialFocusElement(node) ||
-            // 2. get first occurence from list of focusable elements
-            this._getFirstFocusableElement(node) ||
-            // 3. get the dialog itself
-            this._getDialogElement(node);
-
-        // wait for styles to applied
-        setTimeout(() => {
-            firstFocusableElement.focus();
-        }, 0);
-    }
-
-    _mousePressedOutside = false;
-
-    /**
-     * Returns an element specified by the user
-     */
-    _getInitialFocusElement(node: HTMLElement): HTMLElement | null {
-        const {initialFocusId} = this.props;
-
-        if (!initialFocusId) {
-            return null;
-        }
-
-        return ReactDOM.findDOMNode(
-            node.querySelector(`#${initialFocusId}`),
-        ) as any;
-    }
-
-    /**
-     * Returns the first focusable element found inside the Dialog
-     */
-    _getFirstFocusableElement(node: HTMLElement): HTMLElement | null {
-        // get a collection of elements that can be focused
-        const focusableElements = findFocusableNodes(node);
-
-        if (!focusableElements) {
-            return null;
-        }
-
-        // if found, return the first focusable element
-        return focusableElements[0];
-    }
-
-    /**
-     * Returns the dialog element
-     */
-    _getDialogElement(node: HTMLElement): HTMLElement {
-        // If no focusable elements are found,
-        // the dialog content element itself will receive focus.
-        const dialogElement: HTMLElement = ReactDOM.findDOMNode(
-            node.querySelector('[role="dialog"]'),
-        ) as any;
-        // add tabIndex to make the Dialog focusable
-        dialogElement.tabIndex = -1;
-
-        return dialogElement;
-    }
-
-    /**
-     * 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 = (
-        e: React.SyntheticEvent,
-    ) => {
-        // Confirm that it is the backdrop that is being clicked, not the child
-        this._mousePressedOutside = e.target === e.currentTarget;
-    };
-
-    handleMouseUp: (e: React.SyntheticEvent) => void = (
-        e: React.SyntheticEvent,
-    ) => {
-        // Confirm that it is the backdrop that is being clicked, not the child
-        // and that the mouse was pressed in the backdrop first.
-        if (e.target === e.currentTarget && this._mousePressedOutside) {
-            this.props.onCloseModal();
-        }
-        this._mousePressedOutside = false;
-    };
-
-    render(): React.ReactNode {
-        const {children, testId} = this.props;
-        const backdropProps = {
-            [ModalLauncherPortalAttributeName]: true,
-        } as const;
-
-        return (
-            <View
-                style={styles.modalPositioner}
-                onMouseDown={this.handleMouseDown}
-                onMouseUp={this.handleMouseUp}
-                testId={testId}
-                {...backdropProps}
-            >
-                {children}
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    modalPositioner: {
-        position: "fixed",
-        left: 0,
-        top: 0,
-
-        width: "100%",
-        height: "100%",
-
-        alignItems: "center",
-        justifyContent: "center",
-
-        // If the modal ends up being too big for the viewport (e.g., the min
-        // height is triggered), add another scrollbar specifically for
-        // scrolling modal content.
-        //
-        // TODO(mdr): The specified behavior is that the modal should scroll
-        //     with the rest of the page, rather than separately, if overflow
-        //     turns out to be necessary. That sounds hard to do; punting for
-        //     now!
-        overflow: "auto",
-
-        background: color.offBlack64,
-    },
-});

package/src/components/modal-content.tsx

@@ -1,81 +0,0 @@
-import * as React from "react";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {spacing} from "@khanacademy/wonder-blocks-tokens";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import {
-    ThemedStylesFn,
-    useScopedTheme,
-    useStyles,
-} from "@khanacademy/wonder-blocks-theming";
-import {
-    ModalDialogThemeContext,
-    ModalDialogThemeContract,
-} from "../themes/themed-modal-dialog";
-
-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;
-};
-
-/**
- * The Modal content included after the header
- */
-function ModalContent(props: Props) {
-    const {scrollOverflow, style, children} = props;
-    const {theme} = useScopedTheme(ModalDialogThemeContext);
-    const styles = useStyles(themedStylesFn, theme);
-
-    return (
-        <View style={[styles.wrapper, scrollOverflow && styles.scrollOverflow]}>
-            <View style={[styles.content, style]}>{children}</View>
-        </View>
-    );
-}
-
-ModalContent.__IS_MODAL_CONTENT__ = true;
-
-ModalContent.isComponentOf = (instance: any): boolean => {
-    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-};
-
-/**
- * Media query for small screens.
- * TODO(WB-1655): Change this to use the theme instead (inside themedStylesFn).
- * e.g. `[theme.breakpoints.small]: {...}`
- */
-const small = "@media (max-width: 767px)";
-
-const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
-    wrapper: {
-        flex: 1,
-
-        // This helps to ensure that the paddingBottom is preserved when
-        // the contents start to overflow, this goes away on display: flex
-        display: "block",
-    },
-
-    scrollOverflow: {
-        overflow: "auto",
-    },
-
-    content: {
-        flex: 1,
-        minHeight: "100%",
-        padding: spacing.xLarge_32,
-        boxSizing: "border-box",
-        [small]: {
-            padding: `${spacing.xLarge_32}px ${spacing.medium_16}px`,
-        },
-    },
-});
-
-ModalContent.defaultProps = {
-    scrollOverflow: true,
-};
-
-export default ModalContent;

package/src/components/modal-context.ts

@@ -1,16 +0,0 @@
-import * as React from "react";
-
-type ContextType = {
-    closeModal?: () => unknown;
-};
-
-const defaultContext: ContextType = {
-    closeModal: undefined,
-};
-
-const ModalContext = React.createContext<ContextType>(
-    defaultContext,
-) as React.Context<ContextType>;
-ModalContext.displayName = "ModalContext";
-
-export default ModalContext;

package/src/components/modal-dialog.tsx

@@ -1,164 +0,0 @@
-import * as React from "react";
-import {View} from "@khanacademy/wonder-blocks-core";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-import {
-    ThemedStylesFn,
-    useScopedTheme,
-    useStyles,
-} from "@khanacademy/wonder-blocks-theming";
-import ThemeModalDialog, {
-    ModalDialogThemeContext,
-    ModalDialogThemeContract,
-} from "../themes/themed-modal-dialog";
-
-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 title labelling this dialog. Required.
-     * See WCAG 2.1: 4.1.2 Name, Role, Value
-     */
-    "aria-labelledby": string;
-    /**
-     * The ID of the content describing this dialog, if applicable.
-     */
-    "aria-describedby"?: string;
-};
-
-/**
- * `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.
- */
-const ModalDialogCore = React.forwardRef(function ModalDialogCore(
-    props: Props,
-    ref: React.ForwardedRef<HTMLDivElement>,
-) {
-    const {
-        above,
-        below,
-        role = "dialog",
-        style,
-        children,
-        testId,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": ariaDescribedBy,
-    } = props;
-
-    const {theme} = useScopedTheme(ModalDialogThemeContext);
-    const styles = useStyles(themedStylesFn, theme);
-
-    return (
-        <View style={[styles.wrapper, style]}>
-            {below && <View style={styles.below}>{below}</View>}
-            <View
-                role={role}
-                aria-modal="true"
-                aria-labelledby={ariaLabelledBy}
-                aria-describedby={ariaDescribedBy}
-                ref={ref}
-                style={styles.dialog}
-                testId={testId}
-            >
-                {children}
-            </View>
-            {above && <View style={styles.above}>{above}</View>}
-        </View>
-    );
-});
-
-const ModalDialog = React.forwardRef(function ModalDialog(
-    props: Props,
-    ref: React.ForwardedRef<HTMLDivElement>,
-) {
-    return (
-        <ThemeModalDialog>
-            <ModalDialogCore {...props} ref={ref} />
-        </ThemeModalDialog>
-    );
-});
-
-const small = "@media (max-width: 767px)";
-
-const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
-    wrapper: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "stretch",
-        width: "100%",
-        height: "100%",
-        position: "relative",
-        [small]: {
-            padding: theme.spacing.dialog.small,
-            flexDirection: "column",
-        },
-    },
-
-    /**
-     * Ensures the dialog container uses the container size
-     */
-    dialog: {
-        width: "100%",
-        height: "100%",
-        borderRadius: theme.border.radius,
-        overflow: "hidden",
-    },
-
-    above: {
-        pointerEvents: "none",
-        position: "absolute",
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        zIndex: 1,
-    },
-
-    below: {
-        pointerEvents: "none",
-        position: "absolute",
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        zIndex: -1,
-    },
-});
-
-ModalDialog.displayName = "ModalDialog";
-
-export default ModalDialog;

package/src/components/modal-footer.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-
-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 function ModalFooter({children}: Props) {
-    return <View style={styles.footer}>{children}</View>;
-}
-
-ModalFooter.__IS_MODAL_FOOTER__ = true;
-
-ModalFooter.isComponentOf = (instance: any): boolean => {
-    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-};
-
-const styles = StyleSheet.create({
-    footer: {
-        flex: "0 0 auto",
-        boxSizing: "border-box",
-        minHeight: spacing.xxxLarge_64,
-        paddingLeft: spacing.medium_16,
-        paddingRight: spacing.medium_16,
-        paddingTop: spacing.xSmall_8,
-        paddingBottom: spacing.xSmall_8,
-
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "flex-end",
-
-        boxShadow: `0px -1px 0px ${color.offBlack16}`,
-    },
-});