npm - @khanacademy/wonder-blocks-modal - Versions diffs - 5.1.11 → 5.1.13 - Mend

@khanacademy/wonder-blocks-modal 5.1.11 → 5.1.13

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 (33) hide show

package/CHANGELOG.md +22 -0
package/package.json +10 -10
package/src/components/__tests__/close-button.test.tsx +0 -37
package/src/components/__tests__/focus-trap.test.tsx +0 -100
package/src/components/__tests__/modal-backdrop.test.tsx +0 -241
package/src/components/__tests__/modal-dialog.test.tsx +0 -87
package/src/components/__tests__/modal-header.test.tsx +0 -97
package/src/components/__tests__/modal-launcher.test.tsx +0 -436
package/src/components/__tests__/modal-panel.test.tsx +0 -42
package/src/components/__tests__/one-pane-dialog.test.tsx +0 -87
package/src/components/close-button.tsx +0 -64
package/src/components/focus-trap.tsx +0 -148
package/src/components/modal-backdrop.tsx +0 -172
package/src/components/modal-content.tsx +0 -81
package/src/components/modal-context.ts +0 -16
package/src/components/modal-dialog.tsx +0 -164
package/src/components/modal-footer.tsx +0 -54
package/src/components/modal-header.tsx +0 -194
package/src/components/modal-launcher.tsx +0 -297
package/src/components/modal-panel.tsx +0 -188
package/src/components/one-pane-dialog.tsx +0 -244
package/src/components/scroll-disabler.ts +0 -95
package/src/index.ts +0 -17
package/src/themes/default.ts +0 -36
package/src/themes/khanmigo.ts +0 -16
package/src/themes/themed-modal-dialog.tsx +0 -44
package/src/util/constants.ts +0 -6
package/src/util/find-focusable-nodes.ts +0 -12
package/src/util/maybe-get-portal-mounted-modal-host-element.test.tsx +0 -133
package/src/util/maybe-get-portal-mounted-modal-host-element.ts +0 -35
package/src/util/types.ts +0 -13
package/tsconfig-build.json +0 -20
package/tsconfig-build.tsbuildinfo +0 -1

package/src/components/one-pane-dialog.tsx DELETED Viewed

@@ -1,244 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import {Breadcrumbs} from "@khanacademy/wonder-blocks-breadcrumbs";
-import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import {IDProvider} from "@khanacademy/wonder-blocks-core";
-import ModalDialog from "./modal-dialog";
-import ModalPanel from "./modal-panel";
-import ModalHeader from "./modal-header";
-type Common = {
-    /**
-     * The content of the modal, appearing between the titlebar and footer.
-     */
-    content: React.ReactNode;
-    /**
-     * 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.ReactNode;
-    /**
-     * 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?: () => unknown;
-    /**
-     * 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.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.
-     *
-     * 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.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";
-    /**
-     * 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;
-};
-type WithSubtitle = Common & {
-    /**
-     * The subtitle of the modal, appearing in the titlebar, below the title.
-     */
-    subtitle: string;
-};
-type WithBreadcrumbs = Common & {
-    /**
-     * Adds a breadcrumb-trail, appearing in the ModalHeader, above the title.
-     */
-    breadcrumbs: React.ReactElement<React.ComponentProps<typeof Breadcrumbs>>;
-};
-type Props = Common | WithSubtitle | WithBreadcrumbs;
-type DefaultProps = {
-    closeButtonVisible: 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>
- *     }
- * />
- * ```
- */
-export default class OnePaneDialog extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        closeButtonVisible: true,
-    };
-    renderHeader(
-        uniqueId: string,
-    ): React.ReactElement<React.ComponentProps<typeof ModalHeader>> {
-        const {
-            title,
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'breadcrumbs' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
-            breadcrumbs = undefined,
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'subtitle' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
-            subtitle = undefined,
-            testId,
-        } = this.props;
-        if (breadcrumbs) {
-            return (
-                <ModalHeader
-                    title={title}
-                    breadcrumbs={
-                        breadcrumbs as React.ReactElement<
-                            React.ComponentProps<typeof Breadcrumbs>
-                        >
-                    }
-                    titleId={uniqueId}
-                    testId={testId && `${testId}-header`}
-                />
-            );
-        } else if (subtitle) {
-            return (
-                <ModalHeader
-                    title={title}
-                    subtitle={subtitle as string}
-                    titleId={uniqueId}
-                    testId={testId && `${testId}-header`}
-                />
-            );
-        } else {
-            return (
-                <ModalHeader
-                    title={title}
-                    titleId={uniqueId}
-                    testId={testId && `${testId}-header`}
-                />
-            );
-        }
-    }
-    render(): React.ReactNode {
-        const {
-            onClose,
-            footer,
-            content,
-            above,
-            below,
-            style,
-            closeButtonVisible,
-            testId,
-            titleId,
-            role,
-            "aria-describedby": ariaDescribedBy,
-        } = this.props;
-        return (
-            <MediaLayout styleSheets={styleSheets}>
-                {({styles}) => (
-                    <IDProvider id={titleId} scope="modal">
-                        {(uniqueId) => (
-                            <ModalDialog
-                                style={[styles.dialog, style]}
-                                above={above}
-                                below={below}
-                                testId={testId}
-                                aria-labelledby={uniqueId}
-                                aria-describedby={ariaDescribedBy}
-                                role={role}
-                            >
-                                <ModalPanel
-                                    onClose={onClose}
-                                    header={this.renderHeader(uniqueId)}
-                                    content={content}
-                                    footer={footer}
-                                    closeButtonVisible={closeButtonVisible}
-                                    testId={testId}
-                                />
-                            </ModalDialog>
-                        )}
-                    </IDProvider>
-                )}
-            </MediaLayout>
-        );
-    }
-}
-const styleSheets = {
-    small: StyleSheet.create({
-        dialog: {
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-        },
-    }),
-    mdOrLarger: StyleSheet.create({
-        dialog: {
-            width: "93.75%",
-            maxWidth: 576,
-            height: "81.25%",
-            maxHeight: 624,
-        },
-    }),
-} as const;

package/src/components/scroll-disabler.ts DELETED Viewed

@@ -1,95 +0,0 @@
-/**
- * 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";
-const needsHackyMobileSafariScrollDisabler = (() => {
-    if (typeof window === "undefined") {
-        return false;
-    }
-    const userAgent = window.navigator.userAgent;
-    return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
-})();
-type Props = Record<any, any>;
-class ScrollDisabler extends React.Component<Props> {
-    static oldOverflow: string;
-    static oldPosition: string;
-    static oldScrollY: number;
-    static oldWidth: string;
-    static oldTop: string;
-    componentDidMount() {
-        if (ScrollDisabler.numModalsOpened === 0) {
-            const body = document.body;
-            if (!body) {
-                throw new Error("couldn't find document.body");
-            }
-            // Prevent scrolling of the background, the first time a modal is
-            // opened.
-            ScrollDisabler.oldOverflow = body.style.overflow;
-            ScrollDisabler.oldScrollY = window.scrollY;
-            // We need to grab all of the original style properties before we
-            // modified any of them.
-            if (needsHackyMobileSafariScrollDisabler) {
-                ScrollDisabler.oldPosition = body.style.position;
-                ScrollDisabler.oldWidth = body.style.width;
-                ScrollDisabler.oldTop = body.style.top;
-            }
-            body.style.overflow = "hidden";
-            // On mobile Safari, overflow: hidden is not enough, position:
-            // fixed is also required.  Setting style.top = -scollTop maintains
-            // the scroll position (without which we'd scroll to the top).
-            if (needsHackyMobileSafariScrollDisabler) {
-                body.style.position = "fixed";
-                body.style.width = "100%";
-                body.style.top = `${-ScrollDisabler.oldScrollY}px`;
-            }
-        }
-        ScrollDisabler.numModalsOpened++;
-    }
-    componentWillUnmount() {
-        ScrollDisabler.numModalsOpened--;
-        if (ScrollDisabler.numModalsOpened === 0) {
-            const body = document.body;
-            if (!body) {
-                throw new Error("couldn't find document.body");
-            }
-            // Reset all values on the closing of the final modal.
-            body.style.overflow = ScrollDisabler.oldOverflow;
-            if (needsHackyMobileSafariScrollDisabler) {
-                body.style.position = ScrollDisabler.oldPosition;
-                body.style.width = ScrollDisabler.oldWidth;
-                body.style.top = ScrollDisabler.oldTop;
-            }
-            if (typeof window !== "undefined" && window.scrollTo) {
-                window.scrollTo(0, ScrollDisabler.oldScrollY);
-            }
-        }
-    }
-    static numModalsOpened = 0;
-    render(): React.ReactElement | null {
-        return null;
-    }
-}
-export default ScrollDisabler;

package/src/index.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import ModalDialog from "./components/modal-dialog";
-import ModalFooter from "./components/modal-footer";
-import ModalHeader from "./components/modal-header";
-import ModalLauncher from "./components/modal-launcher";
-import ModalPanel from "./components/modal-panel";
-import OnePaneDialog from "./components/one-pane-dialog";
-import maybeGetPortalMountedModalHostElement from "./util/maybe-get-portal-mounted-modal-host-element";
-export {
-    ModalHeader,
-    ModalFooter,
-    ModalDialog,
-    ModalPanel,
-    ModalLauncher,
-    OnePaneDialog,
-    maybeGetPortalMountedModalHostElement,
-};

package/src/themes/default.ts DELETED Viewed

@@ -1,36 +0,0 @@
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
-const theme = {
-    color: {
-        bg: {
-            inverse: tokens.color.darkBlue,
-        },
-        text: {
-            inverse: tokens.color.white,
-            secondary: tokens.color.offBlack64,
-        },
-        shadow: {
-            default: tokens.color.offBlack16,
-        },
-    },
-    border: {
-        radius: tokens.border.radius.medium_4,
-    },
-    spacing: {
-        dialog: {
-            small: tokens.spacing.medium_16,
-        },
-        panel: {
-            closeButton: tokens.spacing.medium_16,
-            footer: tokens.spacing.xLarge_32,
-        },
-        header: {
-            xsmall: tokens.spacing.xSmall_8,
-            small: tokens.spacing.medium_16,
-            medium: tokens.spacing.large_24,
-            large: tokens.spacing.xLarge_32,
-        },
-    },
-};
-export default theme;

package/src/themes/khanmigo.ts DELETED Viewed

@@ -1,16 +0,0 @@
-import {mergeTheme} from "@khanacademy/wonder-blocks-theming";
-import {color} from "@khanacademy/wonder-blocks-tokens";
-import defaultTheme from "./default";
-/**
- * The overrides for the Khanmigo theme.
- */
-const theme = mergeTheme(defaultTheme, {
-    color: {
-        bg: {
-            inverse: color.eggplant,
-        },
-    },
-});
-export default theme;

package/src/themes/themed-modal-dialog.tsx DELETED Viewed

@@ -1,44 +0,0 @@
-import * as React from "react";
-import {
-    createThemeContext,
-    Themes,
-    ThemeSwitcherContext,
-} from "@khanacademy/wonder-blocks-theming";
-import defaultTheme from "./default";
-import khanmigoTheme from "./khanmigo";
-type Props = {
-    children: React.ReactNode;
-};
-export type ModalDialogThemeContract = typeof defaultTheme;
-/**
- * The themes available to the ModalDialog component.
- */
-const themes: Themes<ModalDialogThemeContract> = {
-    default: defaultTheme,
-    khanmigo: khanmigoTheme,
-};
-/**
- * The context that provides the theme to the ModalDialog component.
- * This is generally consumed via the `useScopedTheme` hook.
- */
-export const ModalDialogThemeContext = createThemeContext(defaultTheme);
-/**
- * ThemeModalDialog is a component that provides a theme to the <ModalDialog/>
- * component.
- */
-export default function ThemeModalDialog(props: Props) {
-    const currentTheme = React.useContext(ThemeSwitcherContext);
-    const theme = themes[currentTheme] || defaultTheme;
-    return (
-        <ModalDialogThemeContext.Provider value={theme}>
-            {props.children}
-        </ModalDialogThemeContext.Provider>
-    );
-}

package/src/util/constants.ts DELETED Viewed

@@ -1,6 +0,0 @@
-/**
- * The attribute used to identify a modal launcher portal.
- */
-const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
-export {ModalLauncherPortalAttributeName};

package/src/util/find-focusable-nodes.ts DELETED Viewed

@@ -1,12 +0,0 @@
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-const FOCUSABLE_ELEMENTS =
-    'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
-export function findFocusableNodes(
-    root: HTMLElement | Document,
-): Array<HTMLElement> {
-    return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
-}

package/src/util/maybe-get-portal-mounted-modal-host-element.test.tsx DELETED Viewed

@@ -1,133 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import {render, screen} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-import {ModalLauncherPortalAttributeName} from "./constants";
-import maybeGetPortalMountedModalHostElement from "./maybe-get-portal-mounted-modal-host-element";
-import ModalLauncher from "../components/modal-launcher";
-import OnePaneDialog from "../components/one-pane-dialog";
-describe("maybeGetPortalMountedModalHostElement", () => {
-    test("when candidate is null, returns null", async () => {
-        // Arrange
-        const candidateElement = null;
-        // Act
-        const result = maybeGetPortalMountedModalHostElement(candidateElement);
-        // Assert
-        expect(result).toBeFalsy();
-    });
-    test("when candidate is not hosted in a modal portal, returns null", async () => {
-        // Arrange
-        const nodes = (
-            <div>
-                <div>
-                    <button>Button</button>
-                </div>
-            </div>
-        );
-        render(nodes);
-        const candidateElement = await screen.findByRole("button");
-        // Act
-        const result = maybeGetPortalMountedModalHostElement(candidateElement);
-        // Assert
-        expect(result).toBeFalsy();
-        expect(candidateElement).not.toBe(null);
-    });
-    describe("hosted in a modal", () => {
-        test("modal is not mounted in a modal portal, returns null", async () => {
-            // Arrange
-            const modalContent = (
-                <div>
-                    Fake modal things
-                    <div>
-                        <button>Candidate</button>
-                    </div>
-                </div>
-            );
-            const modal = (
-                <OnePaneDialog
-                    title="Testing"
-                    footer="Footer"
-                    content={modalContent}
-                />
-            );
-            render(modal);
-            const candidateElement = await screen.findByRole("button", {
-                name: "Candidate",
-            });
-            // Act
-            const result =
-                maybeGetPortalMountedModalHostElement(candidateElement);
-            // Assert
-            expect(result).toBeFalsy();
-            expect(candidateElement).not.toBe(null);
-        });
-        test("modal is mounted in a modal portal, returns host", (done: any) => {
-            const arrange = async (checkDone: any) => {
-                // Arrange
-                const modalContent = (
-                    <div>
-                        Fake modal things
-                        <div>
-                            <span ref={checkDone}>Candidate</span>
-                        </div>
-                    </div>
-                );
-                const modal = (
-                    <OnePaneDialog
-                        title="Testing"
-                        footer="Footer"
-                        content={modalContent}
-                    />
-                );
-                const launcher = (
-                    <ModalLauncher modal={modal}>
-                        {({openModal}: any) => (
-                            <button onClick={openModal}>Modal</button>
-                        )}
-                    </ModalLauncher>
-                );
-                render(launcher);
-                await userEvent.click(await screen.findByRole("button"));
-            };
-            const actAndAssert = (node: any) => {
-                if (node) {
-                    // Act
-                    const candidateElement = ReactDOM.findDOMNode(node);
-                    const result =
-                        maybeGetPortalMountedModalHostElement(candidateElement);
-                    // Assert
-                    expect(result).toBeTruthy();
-                    const modalPortalElement = result;
-                    expect(modalPortalElement).not.toBe(null);
-                    const isModalPortal =
-                        modalPortalElement &&
-                        modalPortalElement.hasAttribute(
-                            ModalLauncherPortalAttributeName,
-                        );
-                    expect(isModalPortal).toBeTruthy();
-                    done();
-                }
-            };
-            arrange(actAndAssert);
-        });
-    });
-});

package/src/util/maybe-get-portal-mounted-modal-host-element.ts DELETED Viewed

@@ -1,35 +0,0 @@
-import {ModalLauncherPortalAttributeName} from "./constants";
-/**
- * From a given element, finds its next ancestor that is a modal launcher portal
- * element.
- * @param {?(Element | Text)} element The element whose ancestors are to be
- * walked.
- * @returns {?Element} The nearest parent modal launcher portal.
- */
-function maybeGetNextAncestorModalLauncherPortal(
-    element?: Element | Text | null,
-) {
-    let candidateElement = element && element.parentElement;
-    while (
-        candidateElement &&
-        !candidateElement.hasAttribute(ModalLauncherPortalAttributeName)
-    ) {
-        candidateElement = candidateElement.parentElement;
-    }
-    return candidateElement;
-}
-/**
- * From a given element, finds the next modal host that has been mounted in
- * a modal portal.
- * @param {?(Element | Text)} element The element whose ancestors are to be
- * walked.
- * @returns {?Element} The next portal-mounted modal host element.
- * TODO(kevinb): look into getting rid of this
- */
-export default function maybeGetPortalMountedModalHostElement(
-    element?: Element | Text | null,
-): Element | null | undefined {
-    return maybeGetNextAncestorModalLauncherPortal(element);
-}

package/src/util/types.ts DELETED Viewed

@@ -1,13 +0,0 @@
-import * as React from "react";
-/**
- * A `ModalElement` is a React element that should either itself be a modal
- * (OnePaneDialog), or wrap a modal.
- *
- * If it's a wrapper component, then its props must be passed along to the child
- * modal, because we clone this element and add new props in order to capture
- * `onClose` events.
- *
- * NOTE(kevinb): we include `| null` here because that's what React.FC<> returns.
- */
-export type ModalElement = React.ReactElement | null;

package/tsconfig-build.json DELETED Viewed

@@ -1,20 +0,0 @@
-{
-    "exclude": ["dist"],
-    "extends": "../tsconfig-shared.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "src",
-    },
-    "references": [
-        {"path": "../wonder-blocks-breadcrumbs/tsconfig-build.json"},
-        {"path": "../wonder-blocks-core/tsconfig-build.json"},
-        {"path": "../wonder-blocks-form/tsconfig-build.json"},
-        {"path": "../wonder-blocks-icon/tsconfig-build.json"},
-        {"path": "../wonder-blocks-icon-button/tsconfig-build.json"},
-        {"path": "../wonder-blocks-layout/tsconfig-build.json"},
-        {"path": "../wonder-blocks-theming/tsconfig-build.json"},
-        {"path": "../wonder-blocks-timing/tsconfig-build.json"},
-        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
-        {"path": "../wonder-blocks-typography/tsconfig-build.json"},
-    ]
-}