@khanacademy/wonder-blocks-popover 3.2.15 → 3.3.0

package/src/components/close-button.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import xIcon from "@phosphor-icons/core/regular/x.svg";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
-
-import PopoverContext from "./popover-context";
-
-type Props = AriaProps & {
-    /**
-     * Whether to display the light version of this component instead, for use
-     * when the item is used on a dark background.
-     */
-    light?: boolean;
-    /**
-     * Custom styles applied to the IconButton
-     */
-    style?: StyleType;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-};
-
-type DefaultProps = {
-    light: Props["light"];
-    ["aria-label"]: Props["aria-label"];
-};
-
-/**
- * This is the visual component rendering the close button that is rendered
- * inside the PopoverContentCore. It’s rendered if closeButtonVisible is set
- * true.
- */
-export default class CloseButton extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        light: true,
-        "aria-label": "Close Popover",
-    };
-
-    render(): React.ReactNode {
-        const {light, "aria-label": ariaLabel, style, testId} = this.props;
-        return (
-            <PopoverContext.Consumer>
-                {({close}) => {
-                    return (
-                        <IconButton
-                            icon={xIcon}
-                            aria-label={ariaLabel}
-                            onClick={close}
-                            kind={light ? "primary" : "tertiary"}
-                            light={light}
-                            style={style}
-                            testId={testId}
-                        />
-                    );
-                }}
-            </PopoverContext.Consumer>
-        );
-    }
-}

package/src/components/focus-manager.tsx

@@ -1,344 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import {findFocusableNodes} from "../util/util";
-import InitialFocus from "./initial-focus";
-
-type Props = {
-    /**
-     * The popover content container
-     */
-    children: React.ReactElement<any>;
-    /**
-     * A reference to the trigger element
-     */
-    anchorElement: HTMLElement | null | undefined;
-    /**
-     * 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;
-};
-
-/**
- * This component ensures that focus flows correctly when the popover is open.
- *
- * Inside the popover:
- * - `tab`: Moves focus to the next focusable element.
- * - `shift + tab`: Moves focus to the previous focusable element.
- *
- * After the focus reaches the start/end of the popover,  then we handle two
- * different scenarios:
- *
- * 1. If the focus has reached the last focusable element inside the popover,
- *    the next tab will set focus on the next focusable element that exists
- *    after the PopoverAnchor.
- * 2. If the focus is set to the first focusable element inside the popover, the
- *    next shift + tab will set focus on the PopoverAnchor element.
- *
- */
-export default class FocusManager extends React.Component<Props> {
-    /**
-     * The focusable element that is positioned after the trigger element
-     */
-    nextElementAfterPopover: HTMLElement | null | undefined;
-
-    /**
-     * Tabbing is restricted to descendents of this element.
-     */
-    rootNode: HTMLElement | null | undefined;
-
-    componentDidMount() {
-        this.addEventListeners();
-    }
-
-    componentDidUpdate() {
-        // Ensure that the event listeners are not duplicated.
-        this.removeEventListeners();
-        this.addEventListeners();
-    }
-
-    /**
-     * Remove keydown listeners
-     */
-    componentWillUnmount() {
-        // Reset focusability
-        this.changeFocusabilityInsidePopover(true);
-
-        this.removeEventListeners();
-    }
-
-    /**
-     * List of focusable elements within the popover content
-     */
-    elementsThatCanBeFocusableInsidePopover: Array<HTMLElement> = [];
-
-    /**
-     * The first focusable element inside the popover (if it exists)
-     */
-    firstFocusableElementInPopover: HTMLElement | null | undefined = null;
-
-    /**
-     * The last focusable element inside the popover (if it exists)
-     */
-    lastFocusableElementInPopover: HTMLElement | null | undefined = null;
-
-    /**
-     * Add keydown listeners
-     */
-    addEventListeners: () => void = () => {
-        const {anchorElement} = this.props;
-
-        if (anchorElement) {
-            anchorElement.addEventListener(
-                "keydown",
-                this.handleKeydownPreviousFocusableElement,
-            );
-        }
-
-        if (this.rootNode) {
-            // store the list of possible focusable elements inside the popover
-            this.elementsThatCanBeFocusableInsidePopover = findFocusableNodes(
-                this.rootNode,
-            );
-
-            // find the first and last focusable elements inside the popover
-            this.firstFocusableElementInPopover =
-                this.elementsThatCanBeFocusableInsidePopover[0];
-            this.lastFocusableElementInPopover =
-                this.elementsThatCanBeFocusableInsidePopover[
-                    this.elementsThatCanBeFocusableInsidePopover.length - 1
-                ];
-        }
-
-        // tries to get the next focusable element outside of the popover
-        this.nextElementAfterPopover = this.getNextFocusableElement();
-
-        // NOTE: This is only needed when the trigger element is the last
-        // focusable element in the document. It's specially useful for when the
-        // focus is set in the address bar and the user presses `shift+tab` to
-        // focus back on the document.
-        if (!this.nextElementAfterPopover) {
-            window.addEventListener("blur", () => {
-                this.changeFocusabilityInsidePopover(true);
-            });
-        }
-
-        if (this.firstFocusableElementInPopover) {
-            this.firstFocusableElementInPopover.addEventListener(
-                "keydown",
-                this.handleKeydownFirstFocusableElement,
-            );
-        }
-
-        if (this.lastFocusableElementInPopover) {
-            this.lastFocusableElementInPopover.addEventListener(
-                "keydown",
-                this.handleKeydownLastFocusableElement,
-            );
-        }
-
-        if (this.nextElementAfterPopover) {
-            this.nextElementAfterPopover.addEventListener(
-                "keydown",
-                this.handleKeydownNextFocusableElement,
-            );
-        }
-    };
-
-    removeEventListeners() {
-        const {anchorElement} = this.props;
-
-        if (anchorElement) {
-            anchorElement.removeEventListener(
-                "keydown",
-                this.handleKeydownPreviousFocusableElement,
-            );
-        }
-
-        if (!this.nextElementAfterPopover) {
-            window.removeEventListener("blur", () => {
-                this.changeFocusabilityInsidePopover(true);
-            });
-        }
-
-        if (this.firstFocusableElementInPopover) {
-            this.firstFocusableElementInPopover.removeEventListener(
-                "keydown",
-                this.handleKeydownFirstFocusableElement,
-            );
-        }
-
-        if (this.lastFocusableElementInPopover) {
-            this.lastFocusableElementInPopover.removeEventListener(
-                "keydown",
-                this.handleKeydownLastFocusableElement,
-            );
-        }
-
-        if (this.nextElementAfterPopover) {
-            this.nextElementAfterPopover.removeEventListener(
-                "keydown",
-                this.handleKeydownNextFocusableElement,
-            );
-        }
-    }
-
-    handleKeydownFirstFocusableElement: (e: KeyboardEvent) => void = (e) => {
-        // It will try focus only if the user is pressing `Shift+tab`
-        if (e.key === "Tab" && e.shiftKey) {
-            e.preventDefault();
-            this.props.anchorElement?.focus();
-        }
-    };
-
-    handleKeydownLastFocusableElement: (e: KeyboardEvent) => void = (e) => {
-        // It will try focus only if the user is pressing `Shift+tab`
-        if (this.nextElementAfterPopover && e.key === "Tab" && !e.shiftKey) {
-            e.preventDefault();
-            this.nextElementAfterPopover?.focus();
-        }
-    };
-
-    /**
-     * Gets the next focusable element after the anchor element
-     */
-    getNextFocusableElement: () => HTMLElement | null | undefined = () => {
-        const {anchorElement} = this.props;
-
-        if (!anchorElement) {
-            return;
-        }
-
-        // get the total list of focusable elements within the document
-        const focusableElements = findFocusableNodes(document);
-
-        const focusableElementsOutside = focusableElements.filter((element) => {
-            const index =
-                this.elementsThatCanBeFocusableInsidePopover.indexOf(element);
-            return index < 0;
-        });
-
-        // get anchor element index
-        const anchorIndex = focusableElementsOutside.indexOf(anchorElement);
-
-        if (
-            anchorIndex >= 0 &&
-            anchorIndex !== focusableElementsOutside.length - 1
-        ) {
-            // guess next focusable element index
-            const nextElementIndex =
-                anchorIndex < focusableElementsOutside.length - 1
-                    ? anchorIndex + 1
-                    : 0;
-
-            // get next element's DOM reference
-            return focusableElementsOutside[nextElementIndex];
-        }
-
-        return;
-    };
-
-    /**
-     * Gets the list of focusable elements inside the popover
-     */
-    // @ts-expect-error [FEI-5019] - TS2322 - Type '(node: any) => void' is not assignable to type '() => void'.
-    getComponentRootNode: () => void = (node: any) => {
-        if (!node) {
-            // The component is being umounted
-            return;
-        }
-
-        const rootNode: HTMLElement = ReactDOM.findDOMNode(node) as any;
-
-        if (!rootNode) {
-            throw new Error(
-                "Assertion error: root node should exist after mount",
-            );
-        }
-
-        this.rootNode = rootNode as HTMLElement;
-    };
-
-    /**
-     * Triggered when the focus is set to the first sentinel. This way, the
-     * focus will be redirected to the anchor element.
-     */
-    handleFocusPreviousFocusableElement: () => void = () => {
-        if (this.props.anchorElement) {
-            this.props.anchorElement.focus();
-        }
-    };
-
-    /**
-     * Toggle focusability for all the focusable elements inside the popover.
-     * This is useful to prevent the user from tabbing into the popover when it
-     * reaches to the last focusable element within the document.
-     */
-    changeFocusabilityInsidePopover = (enabled = true) => {
-        const tabIndex = enabled ? "0" : "-1";
-
-        // Enable/disable focusability for all the focusable elements inside the
-        // popover.
-        this.elementsThatCanBeFocusableInsidePopover.forEach((element) => {
-            element.setAttribute("tabIndex", tabIndex);
-        });
-    };
-
-    /**
-     * Triggered when the focus is set to the last sentinel. This way, the focus
-     * will be redirected to next element after the anchor element.
-     */
-    handleFocusNextFocusableElement: () => void = () => {
-        if (this.nextElementAfterPopover) {
-            this.nextElementAfterPopover.focus();
-        }
-    };
-
-    /**
-     * Triggered when the focus is leaving the previous focusable element. This
-     * way, the focus is redirected to the first focusable element inside the
-     * popover.
-     */
-    handleKeydownPreviousFocusableElement: (e: KeyboardEvent) => void = (e) => {
-        // It will try focus only if the user is pressing `tab`
-        if (e.key === "Tab" && !e.shiftKey) {
-            e.preventDefault();
-            this.firstFocusableElementInPopover?.focus();
-        }
-    };
-
-    /**
-     * Triggered when the focus is leaving the next focusable element. This way,
-     * the focus is redirected to the last focusable element inside the popover.
-     */
-    handleKeydownNextFocusableElement: (e: KeyboardEvent) => void = (e) => {
-        // It will try focus only if the user is pressing `Shift+tab`
-        if (e.key === "Tab" && e.shiftKey) {
-            e.preventDefault();
-            this.lastFocusableElementInPopover?.focus();
-        }
-    };
-
-    render(): React.ReactNode {
-        const {children} = this.props;
-
-        return (
-            <div
-                ref={this.getComponentRootNode}
-                onClick={() => {
-                    this.changeFocusabilityInsidePopover(true);
-                }}
-                onFocus={() => {
-                    this.changeFocusabilityInsidePopover(true);
-                }}
-                onBlur={() => {
-                    this.changeFocusabilityInsidePopover(false);
-                }}
-            >
-                <InitialFocus initialFocusId={this.props.initialFocusId}>
-                    {children}
-                </InitialFocus>
-            </div>
-        );
-    }
-}

package/src/components/initial-focus.ts

@@ -1,87 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-import {findFocusableNodes} from "../util/util";
-
-type Props = {
-    /**
-     * The container to apply the initial focus
-     */
-    children: React.ReactElement<any>;
-    /**
-     * The selector for the element that will be focused when the component shows.
-     * When not set, the first tabbable element within the component will be used.
-     */
-    initialFocusId?: string;
-};
-
-/**
- * This component finds which element (from within the children) needs to
- * receive focus. After that, the children is rendered with the focus assigned.
- */
-export default class InitialFocus extends React.Component<Props> {
-    componentDidMount() {
-        const node: HTMLElement = ReactDOM.findDOMNode(this) as any;
-
-        if (!node) {
-            return;
-        }
-        // try to focus on the first focussable element
-        this.setInitialFocusableElement(node);
-    }
-
-    /**
-     * Gets the focusable element and applies focus to it
-     */
-    setInitialFocusableElement: (node: HTMLElement) => void = (node) => {
-        // 1. try to get element specified by the user
-        // 2. get first occurence from list of focusable elements
-        // 3. If no focusable elements are found, get the container itself
-        const firstFocusableElement =
-            this.maybeGetInitialFocusElement(node) ||
-            this.maybeGetFirstFocusableElement(node) ||
-            node;
-
-        if (firstFocusableElement === node) {
-            // add tabIndex to make the container focusable
-            node.tabIndex = -1;
-        }
-
-        // using timeout to prevent page jumps when focusing on this element
-        setTimeout(() => {
-            firstFocusableElement.focus();
-        }, 0);
-    };
-
-    /**
-     * Returns an element specified by the user
-     */
-    maybeGetInitialFocusElement(node: HTMLElement): HTMLElement | null {
-        const {initialFocusId} = this.props;
-
-        if (!initialFocusId) {
-            return null;
-        }
-
-        return node.querySelector(`#${initialFocusId}`);
-    }
-
-    /**
-     * Returns the first focusable element found inside the children
-     */
-    maybeGetFirstFocusableElement(node: HTMLElement): HTMLElement | null {
-        // get a collection of elements that can be focused
-        const focusableElements = findFocusableNodes(node);
-
-        if (!focusableElements.length) {
-            return null;
-        }
-
-        // if found, return the first focusable element
-        return focusableElements[0];
-    }
-
-    render(): React.ReactNode {
-        return this.props.children;
-    }
-}

package/src/components/popover-anchor.ts

@@ -1,93 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-import type {AriaProps} from "@khanacademy/wonder-blocks-core";
-
-type Props = AriaProps & {
-    /**
-     * Callback to be invoked when the anchored content is mounted.
-     * This provides a reference to the anchored content, which can then be
-     * used for calculating popover content positioning.
-     */
-    anchorRef: (arg1?: HTMLElement) => unknown;
-    /**
-     * The element that triggers the popover. This element will be used to
-     * position the popover. It can be either a Node or a function using the
-     * children-as-function pattern to pass an open function for use anywhere
-     * within children. The latter provides a lot of flexibility in terms of
-     * what actions may trigger the `Popover` to launch the
-     * [PopoverDialog](#PopoverDialog).
-     */
-    children:
-        | React.ReactElement<any>
-        | ((arg1: {open: () => void}) => React.ReactElement<any>);
-    /**
-     * The unique identifier to give to the anchor.
-     */
-    id?: string;
-    /**
-     * Called when the anchor is clicked
-     */
-    onClick: () => void;
-};
-
-/**
- * The element that triggers the popover dialog. This is also used as reference
- * to position the dialog itself.
- */
-export default class PopoverAnchor extends React.Component<Props> {
-    componentDidMount() {
-        const anchorNode = ReactDOM.findDOMNode(this) as HTMLElement;
-
-        if (anchorNode) {
-            this.props.anchorRef(anchorNode);
-        }
-    }
-
-    render(): React.ReactNode {
-        const {
-            children,
-            id,
-            onClick,
-            "aria-controls": ariaControls,
-            "aria-expanded": ariaExpanded,
-        } = this.props;
-
-        // props that will be injected to both children versions
-        const sharedProps = {
-            id: id,
-            "aria-controls": ariaControls,
-            "aria-expanded": ariaExpanded,
-        } as const;
-
-        if (typeof children === "function") {
-            const renderedChildren = children({
-                open: onClick,
-            });
-
-            // we clone it to allow injecting the sharedProps defined before
-            return React.cloneElement(renderedChildren, sharedProps);
-        } else {
-            // add onClick handler to automatically open the dialog after
-            // clicking on this anchor element
-            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-            return React.cloneElement(children, {
-                // @ts-expect-error [FEI-5019] - TS2339 - Property 'props' does not exist on type 'ReactElement<any, string | JSXElementConstructor<any>> | (ReactElement<any, string | JSXElementConstructor<any>> & string) | ... 9 more ... | (((arg1: { ...; }) => ReactElement<...>) & true)'.
-                ...children.props,
-                ...sharedProps,
-                // @ts-expect-error [FEI-5019] - TS2339 - Property 'props' does not exist on type 'ReactElement<any, string | JSXElementConstructor<any>> | (ReactElement<any, string | JSXElementConstructor<any>> & string) | ... 9 more ... | (((arg1: { ...; }) => ReactElement<...>) & true)'.
-                onClick: children.props.onClick
-                    ? // @ts-expect-error [FEI-5019] - TS7006 - Parameter 'e' implicitly has an 'any' type.
-                      (e) => {
-                          e.stopPropagation();
-                          // This is done to avoid overriding a custom onClick
-                          // handler inside the children node
-                          // @ts-expect-error [FEI-5019] - TS2339 - Property 'props' does not exist on type 'ReactElement<any, string | JSXElementConstructor<any>> | (ReactElement<any, string | JSXElementConstructor<any>> & string) | ... 9 more ... | (((arg1: { ...; }) => ReactElement<...>) & true)'.
-                          children.props.onClick();
-                          onClick();
-                      }
-                    : onClick,
-            });
-        }
-    }
-}