@khanacademy/wonder-blocks-tooltip 2.4.1 → 2.4.3

package/src/components/tooltip.tsx

@@ -1,306 +0,0 @@
-/**
- * The Tooltip component provides the means to anchor some additional
- * information to some content. The additional information is shown in a
- * callout that hovers above the page content. This additional information is
- * invoked by hovering over the anchored content, or focusing all or part of the
- * anchored content.
- *
- * This component is structured as follows:
- *
- * Tooltip (this component)
- * - TooltipAnchor (provides hover/focus behaviors on anchored content)
- *   - TooltipPortalMounter (creates portal into which the callout is rendered)
- * --------------------------- [PORTAL BOUNDARY] ------------------------------
- * - TooltipPopper (provides positioning for the callout using react-popper)
- *   - TooltipBubble (renders the callout borders, background and shadow)
- *     - TooltipContent (renders the callout content; the actual information)
- *     - TooltipTail (renders the callout tail and shadow that points from the
- *                     callout to the anchor content)
- */
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-import {
-    UniqueIDProvider,
-    IIdentifierFactory,
-} from "@khanacademy/wonder-blocks-core";
-import {maybeGetPortalMountedModalHostElement} from "@khanacademy/wonder-blocks-modal";
-import type {Typography} from "@khanacademy/wonder-blocks-typography";
-import type {AriaProps} from "@khanacademy/wonder-blocks-core";
-import {color} from "@khanacademy/wonder-blocks-tokens";
-
-import TooltipAnchor from "./tooltip-anchor";
-import TooltipBubble from "./tooltip-bubble";
-import TooltipContent from "./tooltip-content";
-import TooltipPopper from "./tooltip-popper";
-import type {ContentStyle, Placement} from "../util/types";
-
-type Props = AriaProps &
-    Readonly<{
-        /**
-         * The content for anchoring the tooltip.
-         * This component will be used to position the tooltip.
-         */
-        children: React.ReactElement<any> | string;
-        /**
-         * Optional title for the tooltip content.
-         */
-        title?: string | React.ReactElement<React.ComponentProps<Typography>>;
-
-        /**
-         * Whether the tooltip should update its position when the anchor
-         * element changes size or position. Defaults to false.
-         */
-        autoUpdate?: boolean;
-        /**
-         * The content to render in the tooltip.
-         */
-        content:
-            | string
-            | React.ReactElement<React.ComponentProps<typeof TooltipContent>>;
-        /**
-         * The unique identifier to give to the tooltip. Provide this in cases where
-         * you want to override the default accessibility solution. This identifier
-         * will be applied to the tooltip bubble content.
-         *
-         * By providing this identifier, the children that this tooltip anchors to
-         * will not be automatically given the aria-desribedby attribute. Instead,
-         * the accessibility solution is the responsibility of the caller.
-         *
-         * If this is not provided, the aria-describedby attribute will be added
-         * to the children with a unique identifier pointing to the tooltip bubble
-         * content.
-         */
-        id?: string;
-        /**
-         * When true, if a tabindex attribute is not already present on the element
-         * wrapped by the anchor, the element will be given tabindex=0 to make it
-         * keyboard focusable; otherwise, does not attempt to change the ability to
-         * focus the anchor element.
-         *
-         * Defaults to true.
-         *
-         * One might set this to false in circumstances where the wrapped component
-         * already can receive focus or contains an element that can.
-         * Use good judgement when overriding this value, the tooltip content should
-         * be accessible via keyboard in all circumstances where the tooltip would
-         * appear using the mouse, so verify those use-cases.
-         *
-         * Also, note that the aria-describedby attribute is attached to the root
-         * anchor element, so you may need to implement an additional accessibility
-         * solution when overriding anchor focusivity.
-         */
-        forceAnchorFocusivity?: boolean;
-        /**
-         * Where the tooltip should appear in relation to the anchor element.
-         * Defaults to "top".
-         */
-        placement: Placement;
-        /**
-         * Renders the tooltip when true, renders nothing when false.
-         *
-         * Using this prop makes the component behave as a controlled component. The
-         * parent is responsible for managing the opening/closing of the tooltip
-         * when using this prop.
-         */
-        opened?: boolean;
-        /**
-         * Test ID used for e2e testing.
-         */
-        testId?: string;
-        /**
-         * Optional custom styles for the tooltip content which are a subset of valid CSS styles.
-         */
-        contentStyle?: ContentStyle;
-        /**
-         * Optional background color.
-         */
-        backgroundColor?: keyof typeof color;
-    }>;
-
-type State = Readonly<{
-    /**
-     * Whether the tooltip is open by hovering/focusing on the anchor element.
-     */
-    active: boolean;
-    /**
-     * Whether the tooltip is open by hovering on the tooltip bubble.
-     */
-    activeBubble: boolean;
-    /**
-     * The element that activates the tooltip.
-     */
-    anchorElement?: HTMLElement;
-}>;
-
-type DefaultProps = {
-    forceAnchorFocusivity: Props["forceAnchorFocusivity"];
-    placement: Props["placement"];
-};
-
-/**
- * Use a tooltip to help describe an on screen object.
- *
- * Tooltips:
- *  - contain text
- *  - (optional) contain small graphic elements to complement the text
- *  - appear on hover or focus (for non-assistive tech keyboard users)
- *  - must have a tail that points to a parent object
- *  - DO NOT include actions
- *
- * For more rich content see Popovers, for taking action on an object, see
- * Snackbars (proposed).
- *
- * ### Usage
- *
- * ```jsx
- * import Tooltip from "@khanacademy/wonder-blocks-tooltip";
- *
- * <Tooltip content="This is a text tooltip">
- *  Tooltip anchor
- * </Tooltip>
- * ```
- *
- */
-export default class Tooltip extends React.Component<Props, State> {
-    static defaultProps: DefaultProps = {
-        forceAnchorFocusivity: true,
-        placement: "top",
-    };
-
-    /**
-     * Used to sync the `opened` state when Tooltip acts as a controlled
-     * component
-     */
-    static getDerivedStateFromProps(
-        props: Props,
-        state: State,
-    ): Partial<State> | null {
-        return {
-            active:
-                typeof props.opened === "boolean" ? props.opened : state.active,
-        };
-    }
-
-    state: State = {
-        active: false,
-        activeBubble: false,
-    };
-    static ariaContentId = "aria-content";
-
-    _updateAnchorElement(ref?: Element | null) {
-        if (ref && ref !== this.state.anchorElement) {
-            this.setState({anchorElement: ref as HTMLElement});
-        }
-    }
-
-    _renderBubbleContent(): React.ReactElement<
-        React.ComponentProps<typeof TooltipContent>
-    > {
-        const {title, content, contentStyle, testId} = this.props;
-        if (typeof content === "string") {
-            return (
-                <TooltipContent
-                    title={title}
-                    contentStyle={contentStyle}
-                    testId={testId ? `${testId}-content` : undefined}
-                >
-                    {content}
-                </TooltipContent>
-            );
-        } else if (title) {
-            return React.cloneElement(content, {title});
-        } else {
-            return content;
-        }
-    }
-
-    _renderPopper(ids?: IIdentifierFactory): React.ReactNode {
-        const {id, backgroundColor} = this.props;
-        const bubbleId = ids ? ids.get(Tooltip.ariaContentId) : id;
-        if (!bubbleId) {
-            throw new Error("Did not get an identifier factory nor a id prop");
-        }
-
-        const {placement} = this.props;
-        return (
-            <TooltipPopper
-                anchorElement={this.state.anchorElement}
-                placement={placement}
-                autoUpdate={this.props.autoUpdate}
-            >
-                {(props) => (
-                    <TooltipBubble
-                        id={bubbleId}
-                        style={props.style}
-                        backgroundColor={backgroundColor}
-                        tailOffset={props.tailOffset}
-                        isReferenceHidden={props.isReferenceHidden}
-                        placement={props.placement}
-                        updateTailRef={props.updateTailRef}
-                        updateBubbleRef={props.updateBubbleRef}
-                        onActiveChanged={(active) =>
-                            this.setState({activeBubble: active})
-                        }
-                    >
-                        {this._renderBubbleContent()}
-                    </TooltipBubble>
-                )}
-            </TooltipPopper>
-        );
-    }
-
-    _getHost(): Element | null | undefined {
-        const {anchorElement} = this.state;
-
-        return (
-            maybeGetPortalMountedModalHostElement(anchorElement) ||
-            document.body
-        );
-    }
-
-    _renderTooltipAnchor(ids?: IIdentifierFactory): React.ReactNode {
-        const {autoUpdate, children, forceAnchorFocusivity} = this.props;
-        const {active, activeBubble} = this.state;
-
-        const popperHost = this._getHost();
-
-        // Only render the popper if the anchor element is available so that we
-        // can position the popper correctly. If autoUpdate is false, we don't
-        // need to wait for the anchor element to render the popper.
-        const shouldAnchorExist = autoUpdate ? this.state.anchorElement : true;
-        const shouldBeVisible =
-            popperHost && (active || activeBubble) && shouldAnchorExist;
-
-        // TODO(kevinb): update to use ReactPopper's React 16-friendly syntax
-        return (
-            <React.Fragment>
-                <TooltipAnchor
-                    forceAnchorFocusivity={forceAnchorFocusivity}
-                    anchorRef={(r) => this._updateAnchorElement(r)}
-                    onActiveChanged={(active) => this.setState({active})}
-                    ids={ids}
-                >
-                    {children}
-                </TooltipAnchor>
-                {shouldBeVisible &&
-                    ReactDOM.createPortal(this._renderPopper(ids), popperHost)}
-            </React.Fragment>
-        );
-    }
-
-    render(): React.ReactNode {
-        const {id} = this.props;
-        if (id) {
-            // Let's bypass the extra weight of an id provider since we don't
-            // need it.
-            return this._renderTooltipAnchor();
-        } else {
-            return (
-                <UniqueIDProvider scope="tooltip" mockOnFirstRender={true}>
-                    {(ids) => this._renderTooltipAnchor(ids)}
-                </UniqueIDProvider>
-            );
-        }
-    }
-}

package/src/index.ts

@@ -1,10 +0,0 @@
-import type {Placement, PopperElementProps} from "./util/types";
-
-import Tooltip from "./components/tooltip";
-import TooltipContent from "./components/tooltip-content";
-import TooltipPopper from "./components/tooltip-popper";
-import TooltipTail from "./components/tooltip-tail";
-
-export {Tooltip as default, TooltipContent, TooltipPopper, TooltipTail};
-
-export type {Placement, PopperElementProps};

package/src/util/__tests__/__snapshots__/active-tracker.test.ts.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ActiveTracker #subscribe if already subscribed, throws 1`] = `"Already subscribed."`;

package/src/util/__tests__/__snapshots__/ref-tracker.test.tsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RefTracker #setCallback called with non-function, throws 1`] = `"targetFn must be a function"`;

package/src/util/__tests__/active-tracker.test.ts

@@ -1,142 +0,0 @@
-import ActiveTracker from "../active-tracker";
-import type {IActiveTrackerSubscriber} from "../active-tracker";
-
-class MockSubscriber implements IActiveTrackerSubscriber {
-    activeStateStolen = jest.fn();
-}
-
-describe("ActiveTracker", () => {
-    describe("#subscribe", () => {
-        test("subscribes to notifications", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const subscriber = new MockSubscriber();
-            const thief = new MockSubscriber();
-
-            // Act
-            tracker.subscribe(subscriber);
-            tracker.steal(thief);
-
-            // Assert
-            expect(subscriber.activeStateStolen).toHaveBeenCalledTimes(1);
-        });
-
-        test("if already subscribed, throws", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const subscriber = new MockSubscriber();
-            tracker.subscribe(subscriber);
-
-            // Act
-            const underTest = () => tracker.subscribe(subscriber);
-
-            // Assert
-            expect(underTest).toThrowErrorMatchingSnapshot();
-        });
-
-        test("returns a function", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const subscriber = new MockSubscriber();
-
-            // Act
-            const result = tracker.subscribe(subscriber);
-
-            // Assert
-            expect(result).toBeInstanceOf(Function);
-        });
-
-        test("returned function unsubscribes from notifications", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const subscriber1 = new MockSubscriber();
-            const testCase = new MockSubscriber();
-            const subscriber3 = new MockSubscriber();
-            const subscriber4 = new MockSubscriber();
-            tracker.subscribe(subscriber1);
-            const unsubscribe = tracker.subscribe(testCase);
-            tracker.subscribe(subscriber3);
-
-            // Act
-            unsubscribe();
-            tracker.steal(subscriber4);
-
-            // Assert
-            expect(testCase.activeStateStolen).not.toHaveBeenCalled();
-            expect(subscriber1.activeStateStolen).toHaveBeenCalledTimes(1);
-            expect(subscriber3.activeStateStolen).toHaveBeenCalledTimes(1);
-        });
-    });
-
-    describe("#steal", () => {
-        test("notifies subscribers of theft attempt", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const thief = new MockSubscriber();
-            const subscriber = new MockSubscriber();
-            tracker.subscribe(subscriber);
-
-            // Act
-            tracker.steal(thief);
-
-            // Assert
-            expect(subscriber.activeStateStolen).toHaveBeenCalledTimes(1);
-        });
-
-        test("does not notifier thief of their own theft attempt", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const thief = new MockSubscriber();
-            tracker.subscribe(thief);
-
-            // Act
-            tracker.steal(thief);
-
-            // Assert
-            expect(thief.activeStateStolen).not.toHaveBeenCalledTimes(1);
-        });
-
-        test("returns falsy if active state was not stolen", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const thief = new MockSubscriber();
-
-            // Act
-            const result = tracker.steal(thief);
-
-            // Assert
-            expect(result).toBeFalsy();
-        });
-
-        test("returns truthy if active state was stolen", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const thief = new MockSubscriber();
-            const owner = new MockSubscriber();
-            tracker.steal(owner);
-
-            // Act
-            const result = tracker.steal(thief);
-
-            // Assert
-            expect(result).toBeTruthy();
-        });
-    });
-
-    describe("#giveup", () => {
-        test("marks the active state as false", () => {
-            // Arrange
-            const tracker = new ActiveTracker();
-            const owner = new MockSubscriber();
-            tracker.steal(owner);
-
-            // Act
-            expect(tracker.steal(owner)).toBeTruthy();
-            tracker.giveup();
-            const result = tracker.steal(owner);
-
-            // Assert
-            expect(result).toBeFalsy();
-        });
-    });
-});

package/src/util/__tests__/ref-tracker.test.tsx

@@ -1,158 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import {render} from "@testing-library/react";
-import {View} from "@khanacademy/wonder-blocks-core";
-
-import RefTracker from "../ref-tracker";
-
-type CallbackFn = (arg1?: HTMLElement | null | undefined) => void;
-
-describe("RefTracker", () => {
-    describe("#setCallback", () => {
-        test("called with falsy value, no throw", () => {
-            // Arrange
-            const tracker = new RefTracker();
-
-            // Act
-            const underTest = () => tracker.setCallback(null);
-
-            // Assert
-            expect(underTest).not.toThrow();
-        });
-
-        test("called with non-function, throws", () => {
-            // Arrange
-            const tracker = new RefTracker();
-            const targetFn = {} as CallbackFn;
-
-            // Act
-            const underTest = () => tracker.setCallback(targetFn);
-
-            // Assert
-            expect(underTest).toThrowErrorMatchingSnapshot();
-        });
-
-        describe("called with a function", () => {
-            test("no prior call to updateRef, does not call targetFn", () => {
-                // Arrange
-                const tracker = new RefTracker();
-                const targetFn = jest.fn();
-                // Act
-                tracker.setCallback(targetFn);
-
-                // Assert
-                expect(targetFn).not.toHaveBeenCalled();
-            });
-
-            test("prior updateRef call, target called with ref's node", async () => {
-                // Arrange
-                const tracker = new RefTracker();
-                const targetFn = jest.fn();
-                const ref = await new Promise((resolve: any) => {
-                    const nodes = (
-                        <View>
-                            <View ref={resolve} />
-                        </View>
-                    );
-                    render(nodes);
-                });
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
-                const domNode = ReactDOM.findDOMNode(ref);
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
-                tracker.updateRef(ref);
-
-                // Act
-                tracker.setCallback(targetFn);
-
-                // Assert
-                expect(targetFn).toHaveBeenCalledWith(domNode);
-            });
-        });
-    });
-
-    describe("#updateRef", () => {
-        describe("calling without setting a callback", () => {
-            test("falsy ref, no throw", () => {
-                // Arrange
-                const tracker = new RefTracker();
-
-                // Act
-                const underTest = () => tracker.updateRef(null);
-
-                // Assert
-                expect(underTest).not.toThrow();
-            });
-
-            test("real ref, no callback, no throw", async () => {
-                // Arrange
-                const tracker = new RefTracker();
-                const ref = await new Promise((resolve: any) => {
-                    const nodes = (
-                        <View>
-                            <View ref={resolve} />
-                        </View>
-                    );
-                    render(nodes);
-                });
-
-                // Act
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
-                const underTest = () => tracker.updateRef(ref);
-
-                // Assert
-                expect(underTest).not.toThrow();
-            });
-
-            test("real ref, targetFn callback, calls the targetFn", async () => {
-                // Arrange
-                const tracker = new RefTracker();
-                const targetFn = jest.fn();
-                tracker.setCallback(targetFn);
-
-                const ref = await new Promise((resolve: any) => {
-                    const nodes = (
-                        <View>
-                            <View ref={resolve} />
-                        </View>
-                    );
-                    render(nodes);
-                });
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
-                const domNode = ReactDOM.findDOMNode(ref);
-
-                // Act
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
-                tracker.updateRef(ref);
-
-                // Assert
-                expect(targetFn).toHaveBeenCalledWith(domNode);
-            });
-
-            test("same ref, targetFn callback, does not call targetFn", async () => {
-                // Arrange
-                const tracker = new RefTracker();
-                const targetFn = jest.fn();
-                tracker.setCallback(targetFn);
-
-                const ref = await new Promise((resolve: any) => {
-                    const nodes = (
-                        <View>
-                            <View ref={resolve} />
-                        </View>
-                    );
-                    render(nodes);
-                });
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
-                tracker.updateRef(ref);
-                targetFn.mockClear();
-
-                // Act
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
-                tracker.updateRef(ref);
-
-                // Assert
-                expect(targetFn).not.toHaveBeenCalled();
-            });
-        });
-    });
-});