@khanacademy/wonder-blocks-tooltip 2.4.2 → 2.4.3

package/src/components/tooltip-popper.tsx

@@ -1,265 +0,0 @@
-/**
- * This component is a light wrapper for react-popper, allowing us to position
- * and control the tooltip bubble location and visibility as we need.
- */
-import * as React from "react";
-import {Popper} from "react-popper";
-import type {Modifier, PopperChildrenProps} from "react-popper";
-
-import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
-import type {ModifierArguments, RootBoundary} from "@popperjs/core";
-import type {FlipModifier} from "@popperjs/core/lib/modifiers/flip";
-import type {PreventOverflowModifier} from "@popperjs/core/lib/modifiers/preventOverflow";
-import type {
-    Placement,
-    PopperElementProps,
-    PopperUpdateFn,
-} from "../util/types";
-import RefTracker from "../util/ref-tracker";
-
-type Props = {
-    /**
-     * This uses the children-as-a-function approach, mirroring react-popper's
-     * implementation.
-     *
-     * TODO(WB-624): figure out to only allow TooltipBubble and PopoverDialog
-     */
-    children: (arg1: PopperElementProps) => React.ReactNode;
-    /**
-     * The element that anchors the tooltip bubble.
-     * This is used to position the bubble.
-     */
-    anchorElement?: HTMLElement;
-    /** Where should the bubble try to go with respect to its anchor. */
-    placement: Placement;
-    /**
-     * Whether the tooltip should automatically update its position when the
-     * anchor element changes.
-     */
-    autoUpdate?: boolean;
-    /**
-     * Optional property to set what the root boundary is for the popper behavior.
-     * This is set to "viewport" by default, causing the popper to be positioned based
-     * on the user's viewport. If set to "document", it will position itself based
-     * on where there is available room within the document body.
-     */
-    rootBoundary?: RootBoundary;
-};
-
-type DefaultProps = {
-    rootBoundary: Props["rootBoundary"];
-};
-
-const filterPopperPlacement = (
-    placement: PopperChildrenProps["placement"],
-): Placement => {
-    switch (placement) {
-        case "auto":
-        case "auto-start":
-        case "auto-end":
-        case "top":
-        case "top-start":
-        case "top-end":
-            return "top";
-        case "bottom":
-        case "bottom-start":
-        case "bottom-end":
-            return "bottom";
-        case "right":
-        case "right-start":
-        case "right-end":
-            return "right";
-        case "left":
-        case "left-start":
-        case "left-end":
-            return "left";
-        default:
-            throw new UnreachableCaseError(placement);
-    }
-};
-
-type SmallViewportModifier = Modifier<"smallViewport", Record<string, never>>;
-
-type Modifiers =
-    | Partial<PreventOverflowModifier>
-    | Partial<FlipModifier>
-    | Partial<SmallViewportModifier>;
-
-/**
- * This function calculates the height of the popper
- * vs. the height of the viewport. If the popper is larger
- * than the viewport, it sets the popper isReferenceHidden
- * state to false, to ensure the popper stays visible even if
- * the reference is no longer in view. If the popper is less
- * than the viewport, it leaves it as is so the popper will
- * disappear if the reference is no longer in view.
- */
-function _modifyPosition({
-    state,
-}: ModifierArguments<Record<string, never>>): void {
-    // Calculates the available space for the popper based on the placement
-    // relative to the viewport.
-    const popperHeight =
-        state.rects.popper.height + state.rects.reference.height;
-    const minHeight = document.documentElement.clientHeight;
-
-    if (minHeight < popperHeight && state.modifiersData.hide) {
-        state.modifiersData.hide = {
-            ...state.modifiersData.hide,
-            isReferenceHidden: false,
-        };
-    }
-}
-
-const smallViewportModifier: SmallViewportModifier = {
-    name: "smallViewport",
-    enabled: true,
-    phase: "main",
-    fn: _modifyPosition,
-};
-
-/**
- * A component that wraps react-popper's Popper component to provide a
- * consistent interface for positioning floating elements.
- */
-export default class TooltipPopper extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        rootBoundary: "viewport",
-    };
-
-    /**
-     * Automatically updates the position of the floating element when necessary
-     * to ensure it stays anchored.
-     *
-     * NOTE: This is a temporary solution that checks for changes in the anchor
-     * element's DOM. This is not a perfect solution and may not work in all
-     * cases. It is recommended to use the autoUpdate prop only when necessary.
-     *
-     * TODO(WB-1680): Replace this with floating-ui's autoUpdate feature.
-     * @see https://floating-ui.com/docs/autoupdate
-     */
-    componentDidMount() {
-        const {anchorElement, autoUpdate} = this.props;
-        if (!anchorElement || !autoUpdate) {
-            return;
-        }
-
-        this._observer = new MutationObserver(() => {
-            // Update the popper when the anchor element changes.
-            this._popperUpdate?.();
-        });
-
-        // Check for DOM changes to the anchor element.
-        this._observer.observe(anchorElement, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-
-    componentWillUnmount() {
-        this._observer?.disconnect();
-    }
-
-    /**
-     * A ref tracker for the bubble element.
-     */
-    _bubbleRefTracker: RefTracker = new RefTracker();
-    /**
-     * A ref tracker for the tail element.
-     */
-    _tailRefTracker: RefTracker = new RefTracker();
-    /**
-     * A MutationObserver that watches for changes to the anchor element.
-     */
-    _observer: MutationObserver | null = null;
-    /**
-     * A function that can be called to update the popper.
-     * @see https://popper.js.org/docs/v2/lifecycle/#manual-update
-     */
-    _popperUpdate: PopperUpdateFn | null = null;
-
-    _renderPositionedContent(
-        popperProps: PopperChildrenProps,
-    ): React.ReactNode {
-        const {children} = this.props;
-
-        // We'll hide some complexity from the children here and ensure
-        // that our placement always has a value.
-        const placement: Placement =
-            filterPopperPlacement(popperProps.placement) ||
-            this.props.placement;
-
-        // Just in case the callbacks have changed, let's update our reference
-        // trackers.
-        this._bubbleRefTracker.setCallback(popperProps.ref);
-        this._tailRefTracker.setCallback(popperProps.arrowProps.ref);
-
-        // Store a reference to the update function so that we can call it
-        // later if needed.
-        this._popperUpdate = popperProps.update;
-
-        // Here we translate from the react-popper's PropperChildrenProps
-        // to our own TooltipBubbleProps.
-        const bubbleProps = {
-            placement,
-            style: {
-                // NOTE(jeresig): We can't just use `popperProps.style` here
-                // as the TypeScript type doesn't match Aphrodite's CSS TypeScript
-                // props (as it doesn't camelCase props). So we just copy over the
-                // props that we need, instead.
-                top: popperProps.style.top,
-                left: popperProps.style.left,
-                bottom: popperProps.style.bottom,
-                right: popperProps.style.right,
-                position: popperProps.style.position,
-                transform: popperProps.style.transform,
-            },
-            updateBubbleRef: this._bubbleRefTracker.updateRef,
-            tailOffset: {
-                bottom: popperProps.arrowProps.style.bottom,
-                right: popperProps.arrowProps.style.right,
-                top: popperProps.arrowProps.style.top,
-                left: popperProps.arrowProps.style.left,
-                transform: popperProps.arrowProps.style.transform,
-            },
-            updateTailRef: this._tailRefTracker.updateRef,
-            isReferenceHidden: popperProps.isReferenceHidden,
-        } as const;
-        return children(bubbleProps);
-    }
-
-    render(): React.ReactNode {
-        const {anchorElement, placement, rootBoundary} = this.props;
-
-        // TODO(WB-1680): Use floating-ui's
-        const modifiers: Modifiers[] = [smallViewportModifier];
-
-        if (rootBoundary === "viewport") {
-            modifiers.push({
-                name: "preventOverflow",
-                options: {
-                    rootBoundary: "viewport",
-                },
-            });
-        } else {
-            modifiers.push({
-                name: "flip",
-                options: {
-                    rootBoundary: "document",
-                },
-            });
-        }
-
-        return (
-            <Popper
-                referenceElement={anchorElement}
-                strategy="fixed"
-                placement={placement}
-                modifiers={modifiers}
-            >
-                {(props) => this._renderPositionedContent(props)}
-            </Popper>
-        );
-    }
-}

package/src/components/tooltip-tail.tsx

@@ -1,445 +0,0 @@
-import * as React from "react";
-import {css, StyleSheet} from "aphrodite";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import type {getRefFn, Placement, Offset} from "../util/types";
-
-export type Props = {
-    /**
-     * Whether we should use the default white background color or switch to a
-     * different bg color.
-     *
-     * NOTE: Added to support custom popovers
-     * @ignore
-     */
-    color: keyof typeof color;
-    /** The offset of the tail indicating where it should be positioned. */
-    offset?: Offset;
-    /** The placement of the tail with respect to the tooltip anchor. */
-    placement: Placement;
-    /** A callback to update the ref of the tail element. */
-    updateRef?: getRefFn;
-    /** When true, the tail is shown; otherwise, it is not but it still takes
-     * space in the layout. */
-    show: boolean;
-};
-
-type DefaultProps = {
-    color: Props["color"];
-    show: Props["show"];
-};
-
-type Dimensions = {
-    trimlinePoints: [string, string];
-    points: [string, string, string];
-    height: number;
-    width: number;
-};
-
-type FilterPosition = {
-    y: string;
-    x: string;
-    offsetShadowX: number;
-};
-
-// TODO(somewhatabstract): Replace this really basic unique ID work with
-// something SSR-friendly and more robust.
-let tempIdCounter = 0;
-
-export default class TooltipTail extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        color: "white",
-        show: true,
-    };
-
-    _calculateDimensionsFromPlacement(): Dimensions {
-        const {placement} = this.props;
-
-        // The trimline, which we draw to make the tail flush to the bubble,
-        // has a thickness of 1. Since the line is drawn centered to the
-        // coordinates, we use an offset of 0.5 so that it properly covers what
-        // we want it to.
-        const trimlineOffset = 0.5;
-
-        // Calculate the three points of the arrow. Depending on the tail's
-        // direction (i.e., the tooltip's "side"), we choose different points,
-        // and set our SVG's bounds differently.
-        //
-        // Note that when the tail points to the left or right, the width/height
-        // are inverted.
-        switch (placement) {
-            case "top":
-                return {
-                    trimlinePoints: [
-                        `0,-${trimlineOffset}`,
-                        `${ARROW_WIDTH},-${trimlineOffset}`,
-                    ],
-                    points: [
-                        "0,0",
-                        `${ARROW_WIDTH / 2},${ARROW_HEIGHT}`,
-                        `${ARROW_WIDTH},0`,
-                    ],
-                    height: ARROW_HEIGHT,
-                    width: ARROW_WIDTH,
-                };
-
-            case "right":
-                return {
-                    trimlinePoints: [
-                        `${ARROW_HEIGHT + trimlineOffset},0`,
-                        `${ARROW_HEIGHT + trimlineOffset},${ARROW_WIDTH}`,
-                    ],
-                    points: [
-                        `${ARROW_HEIGHT},0`,
-                        `0,${ARROW_WIDTH / 2}`,
-                        `${ARROW_HEIGHT},${ARROW_WIDTH}`,
-                    ],
-                    width: ARROW_HEIGHT,
-                    height: ARROW_WIDTH,
-                };
-
-            case "bottom":
-                return {
-                    trimlinePoints: [
-                        `0, ${ARROW_HEIGHT + trimlineOffset}`,
-                        `${ARROW_WIDTH},${ARROW_HEIGHT + trimlineOffset}`,
-                    ],
-                    points: [
-                        `0, ${ARROW_HEIGHT}`,
-                        `${ARROW_WIDTH / 2},0`,
-                        `${ARROW_WIDTH},${ARROW_HEIGHT}`,
-                    ],
-                    width: ARROW_WIDTH,
-                    height: ARROW_HEIGHT,
-                };
-
-            case "left":
-                return {
-                    trimlinePoints: [
-                        `-${trimlineOffset},0`,
-                        `-${trimlineOffset},${ARROW_WIDTH}`,
-                    ],
-                    points: [
-                        `0,0`,
-                        `${ARROW_HEIGHT},${ARROW_WIDTH / 2}`,
-                        `0,${ARROW_WIDTH}`,
-                    ],
-                    width: ARROW_HEIGHT,
-                    height: ARROW_WIDTH,
-                };
-
-            default:
-                throw new Error(`Unknown placement: ${placement}`);
-        }
-    }
-
-    _getFilterPositioning(): FilterPosition | null | undefined {
-        const {placement} = this.props;
-        switch (placement) {
-            case "top":
-                return {
-                    y: "-50%",
-                    x: "-50%",
-                    offsetShadowX: 0,
-                };
-
-            case "bottom":
-                // No shadow on the arrow as it falls "under" the bubble.
-                return null;
-
-            case "left":
-                return {
-                    y: "-50%",
-                    x: "0%",
-                    offsetShadowX: 1,
-                };
-
-            case "right":
-                return {
-                    y: "-50%",
-                    x: "-100%",
-                    offsetShadowX: -1,
-                };
-
-            default:
-                throw new Error(`Unknown placement: ${placement}`);
-        }
-    }
-
-    /**
-     * Create an SVG filter that applies a blur to an element.
-     * We'll apply it to a dark shape outlining the tooltip, which
-     * will produce the overall effect of a drop-shadow.
-     *
-     * Also, scope its ID by side, so that tooltips with other
-     * "side" values don't end up using the wrong filter from
-     * elsewhere in the document. (The `height` value depends on
-     * which way the arrow is turned!)
-     */
-    _maybeRenderDropshadow(points: [string, string, string]): React.ReactNode {
-        const position = this._getFilterPositioning();
-        if (!position) {
-            return null;
-        }
-        const {placement} = this.props;
-        const {y, x, offsetShadowX} = position;
-        const dropShadowFilterId = `tooltip-dropshadow-${placement}-${tempIdCounter++}`;
-        return [
-            <filter
-                key="filter"
-                id={dropShadowFilterId}
-                // Height and width tell the filter how big of a canvas to
-                // draw based on its parent size. i.e. 2 times bigger.
-                // This is so that the diffuse gaussian blur has space to
-                // bleed into.
-                width="200%"
-                height="200%"
-                // The x and y values tell the filter where, relative to its
-                // parent, it should begin showing its canvas. Without these
-                // the filter would clip at 0,0, which would look really
-                // strange.
-                x={x}
-                y={y}
-            >
-                {/* Here we provide a nice blur that will be our shadow
-                 * The stdDeviation is the spread of the blur. We don't want it
-                 * too diffuse.
-                 */}
-                <feGaussianBlur
-                    in="SourceAlpha"
-                    stdDeviation={spacing.xxSmall_6 / 2}
-                />
-
-                {/* Here we adjust the alpha (feFuncA) linearly so as to blend
-                 * the shadow to match the rest of the tooltip bubble shadow.
-                 * It is a combination of the diffuse blur and this alpha
-                 * value that will make it look right.
-                 *
-                 * The value of 0.3. was arrived at from trial and error.
-                 */}
-                <feComponentTransfer>
-                    <feFuncA type="linear" slope="0.3" />
-                </feComponentTransfer>
-            </filter>,
-            /**
-             * Draw the tooltip arrow and apply the blur filter we created
-             * above, to produce a drop shadow effect.
-             * We move it down a bit with a translation, so that it is what
-             * we want.
-             *
-             * We offset the shadow on the X-axis because for left/right
-             * tails, we move the tail 1px toward the bubble. If we didn't
-             * offset the shadow, it would crash the bubble outline.
-             *
-             * See styles below for why we offset the arrow.
-             */
-            <g key="dropshadow" transform={`translate(${offsetShadowX},5.5)`}>
-                <polyline
-                    fill={color.offBlack16}
-                    points={points.join(" ")}
-                    stroke={color.offBlack32}
-                    filter={`url(#${dropShadowFilterId})`}
-                />
-            </g>,
-        ];
-    }
-
-    _getFullTailWidth(): number {
-        return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
-    }
-
-    _getFullTailHeight(): number {
-        return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
-    }
-
-    _getContainerStyle(): StyleType {
-        const {placement} = this.props;
-        /**
-         * Ensure the container is sized properly for us to be placed correctly
-         * by the Popper.js code.
-         *
-         * Here we offset the arrow 1px toward the bubble. This ensures the arrow
-         * outline meets the bubble outline and allows the arrow to erase the bubble
-         * outline between the ends of the arrow outline. We do this so that the
-         * arrow outline and bubble outline create a single, seamless outline of
-         * the callout.
-         *
-         * NOTE: The widths and heights refer to the downward-pointing tail
-         * (i.e. placement="top"). When the tail points to the left or right
-         * instead, the width/height are inverted.
-         */
-        const fullTailWidth = this._getFullTailWidth();
-        const fullTailHeight = this._getFullTailHeight();
-
-        switch (placement) {
-            case "top":
-                return {
-                    top: -1,
-                    width: fullTailWidth,
-                    height: fullTailHeight,
-                };
-
-            case "right":
-                return {
-                    left: 1,
-                    width: fullTailHeight,
-                    height: fullTailWidth,
-                };
-
-            case "bottom":
-                return {
-                    top: 1,
-                    width: fullTailWidth,
-                    height: fullTailHeight,
-                };
-
-            case "left":
-                return {
-                    left: -1,
-                    width: fullTailHeight,
-                    height: fullTailWidth,
-                };
-
-            default:
-                throw new Error(`Unknown placement: ${placement}`);
-        }
-    }
-
-    _getArrowStyle(): React.CSSProperties {
-        const {placement} = this.props;
-        switch (placement) {
-            case "top":
-                return {
-                    marginLeft: MIN_DISTANCE_FROM_CORNERS,
-                    marginRight: MIN_DISTANCE_FROM_CORNERS,
-                    paddingBottom: DISTANCE_FROM_ANCHOR,
-                };
-
-            case "right":
-                return {
-                    marginTop: MIN_DISTANCE_FROM_CORNERS,
-                    marginBottom: MIN_DISTANCE_FROM_CORNERS,
-                    paddingLeft: DISTANCE_FROM_ANCHOR,
-                };
-
-            case "bottom":
-                return {
-                    marginLeft: MIN_DISTANCE_FROM_CORNERS,
-                    marginRight: MIN_DISTANCE_FROM_CORNERS,
-                    paddingTop: DISTANCE_FROM_ANCHOR,
-                };
-
-            case "left":
-                return {
-                    marginTop: MIN_DISTANCE_FROM_CORNERS,
-                    marginBottom: MIN_DISTANCE_FROM_CORNERS,
-                    paddingRight: DISTANCE_FROM_ANCHOR,
-                };
-
-            default:
-                throw new Error(`Unknown placement: ${placement}`);
-        }
-    }
-
-    _renderArrow(): React.ReactNode {
-        const {trimlinePoints, points, height, width} =
-            this._calculateDimensionsFromPlacement();
-
-        const {color: arrowColor, show} = this.props;
-
-        if (!show) {
-            // If we aren't showing the tail, we still need to take up space
-            // so we render a strut instead.
-            return <Strut size={height} />;
-        }
-
-        return (
-            <svg
-                className={css(styles.arrow)}
-                style={this._getArrowStyle()}
-                width={width}
-                height={height}
-                aria-hidden
-            >
-                {this._maybeRenderDropshadow(points)}
-                {/**
-                 * Draw the actual background of the tooltip arrow.
-                 *
-                 * We draw the outline in white too so that when we draw the
-                 * outline, it draws over white and not the dropshadow behind.
-                 */}
-                <polyline
-                    fill={color[arrowColor]}
-                    stroke={color[arrowColor]}
-                    points={points.join(" ")}
-                />
-                {/* Draw the tooltip outline around the tooltip arrow. */}
-                <polyline
-                    // Redraw the stroke on top of the background color,
-                    // so that the ends aren't extra dark where they meet
-                    // the border of the tooltip.
-                    fill={color[arrowColor]}
-                    points={points.join(" ")}
-                    stroke={color.offBlack16}
-                />
-                {/* Draw a trimline to make the arrow appear flush */}
-                <polyline
-                    stroke={color[arrowColor]}
-                    points={trimlinePoints.join(" ")}
-                />
-            </svg>
-        );
-    }
-
-    render(): React.ReactNode {
-        const {offset, placement, updateRef} = this.props;
-        return (
-            <View
-                style={[
-                    styles.tailContainer,
-                    {...offset},
-                    this._getContainerStyle(),
-                ]}
-                data-placement={placement}
-                ref={updateRef}
-            >
-                {this._renderArrow()}
-            </View>
-        );
-    }
-}
-
-/**
- * Some constants to make style generation easier to understand.
- * NOTE: The widths and heights refer to the downward-pointing tail
- * (i.e. placement="top"). When the tail points to the left or right instead,
- * the width/height are inverted.
- */
-const DISTANCE_FROM_ANCHOR = spacing.xSmall_8;
-
-const MIN_DISTANCE_FROM_CORNERS = spacing.xSmall_8;
-
-const ARROW_WIDTH = spacing.large_24;
-const ARROW_HEIGHT = spacing.small_12;
-
-const styles = StyleSheet.create({
-    /**
-     * Container
-     */
-    tailContainer: {
-        position: "relative",
-        pointerEvents: "none",
-    },
-
-    /**
-     * Arrow
-     */
-    arrow: {
-        // Ensure the dropshadow bleeds outside our bounds.
-        overflow: "visible",
-    },
-});