@khanacademy/perseus 0.4.1 → 0.4.2

package/src/components/new-tooltip/flexible-position.jsx

@@ -1,182 +0,0 @@
-// @flow
-/**
- * This is FlexiblePosition, part of NewTooltip.
- *
- * This generalizable component attempts to center its children relative to a
- * given point... but refuses to allow the children to overflow their
- * container. If the children *would* overflow, we first use the Flexbox
- * algorithm to shift the element off-center. If that still doesn't work (i.e.,
- * the children are larger than the container), then we shrink the children.
- *
- * This layout algorithm is entirely implemented via Flexbox. We have three
- * elements: the pre-content spacer, the content, and the post-content spacer.
- * The pre-content spacer and post-content spacer use their basis sizes to
- * position the content at the target point, then shrink by equal amounts in
- * order to *center* the content at the target point.
- *
- * To understand the algorithm, first consider *just* the spacer elements.
- * If the container is 80px wide, and we're targeting a point 60px from the
- * right and 20px from the left, then the spacer elements will use those values
- * as their flex-basis:
- *
- * [        pre-content         ][   post-content   ]
- *
- * They take up 100% of the container by default. But, if the content element
- * _also_ wants space, then the pre-content and post-content spacers need to
- * shrink. We've configured them to shrink by equal amounts, which therefore
- * center-aligns the target element at the target point.
- *
- * [      pre-content      ][content ][post-content ]
- *
- * (Incidentally, the flex-shrink property is surprisingly complicated: it's
- * defined relative to the element's own flex-basis. So, to get the spacers to
- * shrink at equal rates, we define each spacer's flex-shrink to match the
- * _other_ element's flex-basis. Fun! ^_^`)
- *
- * TODO(mdr): This component currently only supports horizontal positioning,
- *     but we'll probably extend it later to support vertical positioning, too.
- */
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-type FlexiblePositionProps = {
-    children: React.Node,
-    // The direction along which to position the element.
-    //
-    // If "horizontal", this will be a full-width element that horizontally
-    // positions its children near a target x-coordinate.
-    //
-    // If "vertical", this will be a full-height element that vertically
-    // positions its children near a target y-coordinate.
-    direction: "horizontal" | "vertical",
-    // Specify the target point, by providing its distance from the flex-start
-    // and its distance from the flex-end. (These, together, must sum to the
-    // total container size.)
-    //
-    // If `direction` is "horizontal", then `pxFromStart` is the target
-    // position's offset from the left of the container, and `pxFromEnd` is the
-    // offset from the right.
-    //
-    // If `direction` is "vertical", then `pxFromStart` is the target
-    // position's offset from the top of the container, and `pxFromEnd` is the
-    // offset from the bottom.
-    pxFromStart: number,
-    pxFromEnd: number,
-    ...
-};
-
-export default class FlexiblePosition extends React.PureComponent<FlexiblePositionProps> {
-    render(): React.Element<"div"> {
-        const {direction, pxFromStart, pxFromEnd} = this.props;
-
-        const wrapperStyles = [
-            styles.wrapper,
-            direction === "horizontal" && styles.wrapperHorizontal,
-            direction === "vertical" && styles.wrapperVertical,
-        ];
-        const contentStyles = [
-            styles.content,
-            direction === "horizontal" && styles.contentHorizontal,
-            direction === "vertical" && styles.contentVertical,
-        ];
-
-        // We need to handle the zero cases specially, because otherwise we get
-        // spacer elements with `flex-shrink: 0` - that is, they don't shrink
-        // for the content at all!
-        if (pxFromStart === 0) {
-            return (
-                <div className={css(...wrapperStyles)}>
-                    <div className={css(...contentStyles)}>
-                        {this.props.children}
-                    </div>
-                </div>
-            );
-        }
-        if (pxFromEnd === 0) {
-            return (
-                <div
-                    className={css(...wrapperStyles, styles.wrapperAlignToEnd)}
-                >
-                    <div className={css(...contentStyles)}>
-                        {this.props.children}
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <div className={css(...wrapperStyles)}>
-                <div
-                    style={{
-                        flexShrink: pxFromEnd,
-                        flexBasis: pxFromStart,
-                    }}
-                />
-                <div className={css(...contentStyles)}>
-                    {this.props.children}
-                </div>
-                <div
-                    style={{
-                        flexShrink: pxFromStart,
-                        flexBasis: pxFromEnd,
-                    }}
-                />
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    wrapper: {
-        display: "flex",
-        overflow: "hidden",
-    },
-
-    wrapperHorizontal: {
-        flexDirection: "row",
-
-        // The FlexiblePosition container takes the full width of its parent,
-        // and will not allow overflow (see `styles.wrapper`). This ensures
-        // that we prefer to shrink our contents, rather than overflow our
-        // parent.
-        width: "100%",
-    },
-
-    wrapperVertical: {
-        flexDirection: "column",
-
-        // The FlexiblePosition container takes the full height of its parent,
-        // and will not allow overflow (see `styles.wrapper`). This ensures
-        // that we prefer to shrink our contents, rather than overflow our
-        // parent.
-        height: "100%",
-    },
-
-    wrapperAlignToEnd: {
-        justifyContent: "flex-end",
-    },
-
-    content: {
-        // The content element must not grow or shrink, and instead always use
-        // its basis value.
-        flex: "0 0 auto",
-    },
-
-    contentHorizontal: {
-        // The only case in which the content element should "shrink" is when
-        // the content itself is too large for the container. In this case, we
-        // constrain the size with maximum width. (We can't use flex-shrink for
-        // this behavior, because we need the spacer elements to be prioritized
-        // as the only flex-shrinkable elements.)
-        maxWidth: "100%",
-    },
-
-    contentVertical: {
-        // The only case in which the content element should "shrink" is when
-        // the content itself is too large for the container. In this case, we
-        // constrain the size with maximum height. (We can't use flex-shrink
-        // for this behavior, because we need the spacer elements to be
-        // prioritized as the only flex-shrinkable elements.)
-        maxHeight: "100%",
-    },
-});

package/src/components/new-tooltip/tooltip-arrow.jsx

@@ -1,184 +0,0 @@
-// @flow
-/**
- * This is TooltipArrow, part of NewTooltip.
- *
- * This component manages the visuals for the tooltip "arrow" UI element, which
- * is visually attached to the TooltipBubble, and points to the target element.
- *
- * This component and TooltipBubble both count as part of the tooltip, and
- * trigger mouse events like `onClick`, `onMouseEnter`, and `onMouseLeave`.
- */
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import {Errors} from "../../logging/log.js";
-import {PerseusError} from "../../perseus-error.js";
-
-import {
-    arrowHeight,
-    arrowWidth,
-    dropShadowOpacity,
-    dropShadowRadius,
-    dropShadowXOffset,
-    dropShadowYOffset,
-} from "./style-constants.js";
-import {getTooltipColors} from "./util.js";
-
-import type {NewTooltipProps} from "./types.js";
-
-type TooltipArrowProps = {|
-    tooltipProps: {
-        side: NewTooltipProps["side"],
-        color: NewTooltipProps["color"],
-        inverted: NewTooltipProps["inverted"],
-
-        onClick?: NewTooltipProps["onClick"],
-        onMouseEnter?: NewTooltipProps["onMouseEnter"],
-        onMouseLeave?: NewTooltipProps["onMouseLeave"],
-        ...
-    },
-|};
-
-export default class TooltipArrow extends React.PureComponent<TooltipArrowProps> {
-    render(): React.Element<"svg"> {
-        const {onClick, onMouseEnter, onMouseLeave, side} =
-            this.props.tooltipProps;
-        const {backgroundColor} = getTooltipColors(this.props.tooltipProps);
-
-        // Draw the three points of the arrow. Depending on the arrow's
-        // direction (i.e., the tooltip's "side"), we choose different points,
-        // and set our SVG's bounds differently.
-        //
-        // Note that `arrowWidth` and `arrowHeight` refer to the
-        // downward-pointing arrow (i.e. side="top"). When the arrow points to
-        // the left or right instead, the width/height are inverted.
-        let points;
-        let svgWidth;
-        let svgHeight;
-        if (side === "top") {
-            points = [
-                "0,0",
-                `${arrowWidth / 2},${arrowHeight}`,
-                `${arrowWidth},0`,
-            ];
-            svgWidth = arrowWidth;
-            svgHeight = arrowHeight;
-        } else if (side === "right") {
-            points = [
-                `${arrowHeight},0`,
-                `0,${arrowWidth / 2}`,
-                `${arrowHeight},${arrowWidth}`,
-            ];
-            svgWidth = arrowHeight;
-            svgHeight = arrowWidth;
-        } else if (side === "bottom") {
-            points = [
-                `0,${arrowHeight}`,
-                `${arrowWidth / 2},0`,
-                `${arrowWidth},${arrowHeight}`,
-            ];
-            svgWidth = arrowWidth;
-            svgHeight = arrowHeight;
-        } else if (side === "left") {
-            points = [
-                "0,0",
-                `${arrowHeight},${arrowWidth / 2}`,
-                `0,${arrowWidth}`,
-            ];
-            svgWidth = arrowHeight;
-            svgHeight = arrowWidth;
-        } else {
-            throw new PerseusError(
-                `unexpected side ${side}`,
-                Errors.InvalidInput,
-            );
-        }
-
-        // This SVG is copied from tooltip-package/tooltip.jsx - with some minor
-        // modifications, because styling is handled differently.
-        return (
-            <svg
-                width={svgWidth}
-                height={svgHeight}
-                className={css(styles.tooltipArrow)}
-            >
-                {/* 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!)
-                 *
-                 * In general, it's not *great* that multiple tooltips of the
-                 * same side will yield ID conflicts... but at least they'll
-                 * be the same filter, so it doesn't matter which one we
-                 * reference, so long as it's for the correct side. */}
-                <filter id={`tooltip-dropshadow-${side}`} height="150%">
-                    <feOffset
-                        dx={dropShadowXOffset}
-                        dy={dropShadowYOffset}
-                        result="offsetblur"
-                    />
-                    <feGaussianBlur
-                        in="SourceAlpha"
-                        stdDeviation={dropShadowRadius / 2}
-                    />
-                    <feComponentTransfer>
-                        <feFuncA type="linear" slope={dropShadowOpacity} />
-                    </feComponentTransfer>
-                    <feMerge>
-                        <feMergeNode />
-                        <feMergeNode in="SourceGraphic" />
-                    </feMerge>
-                </filter>
-
-                {/* Draw the background of the tooltip arrow. */}
-                <polyline
-                    fill={backgroundColor}
-                    stroke={backgroundColor}
-                    points={points.join(" ")}
-                    // We attach our mouse event styles and handlers to this
-                    // element, instead of the root SVG element. That way, our
-                    // target area will only include the actual _arrow_ shape,
-                    // rather than the entire bounding rectangle.
-                    className={css(
-                        onClick && styles.tooltipArrowShapeWithOnClick,
-                    )}
-                    onClick={onClick}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                />
-
-                {/* Draw an outline around the tooltip arrow, and apply the
-                 * blur filter we created above, to produce a drop shadow
-                 * effect. */}
-                <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={backgroundColor}
-                    points={points.join(" ")}
-                    stroke="rgba(0, 0, 0, 0.1)"
-                    filter={`url(#tooltip-dropshadow-${side})`}
-                />
-            </svg>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    tooltipArrow: {
-        display: "block",
-
-        // Ensure that clicking on the tooltip's empty space doesn't clear the
-        // user's text selection elsewhere in the page.
-        userSelect: "none",
-    },
-
-    tooltipArrowShapeWithOnClick: {
-        pointerEvents: "auto",
-        cursor: "pointer",
-    },
-});

package/src/components/new-tooltip/tooltip-bubble.jsx

@@ -1,223 +0,0 @@
-// @flow
-/**
- * This is TooltipBubble, part of NewTooltip.
- *
- * This component manages the visuals for the tooltip "bubble" UI element,
- * which contains the tooltip content.
- *
- * This component and TooltipArrow both count as part of the tooltip, and
- * trigger mouse events like `onClick`, `onMouseEnter`, and `onMouseLeave`.
- */
-import {UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import {typography} from "../../styles/global-styles.js";
-import a11yStyles from "../../util/a11y.js";
-import Icon from "../icon.jsx";
-
-import {
-    bubbleBorderRadius,
-    dropShadowOpacity,
-    dropShadowRadius,
-    dropShadowXOffset,
-    dropShadowYOffset,
-} from "./style-constants.js";
-import {getTooltipColors} from "./util.js";
-
-import type {NewTooltipProps} from "./types.js";
-import type {IIdentifierFactory} from "@khanacademy/wonder-blocks-core";
-
-const closeIconPath =
-    "M6.26353762,4.99851587 L9.73097464,1.53107884 C10.0836373,1.17841618 10.0842213,0.612127047 9.73530496,0.263210718 C9.38395604,-0.0881381913 8.81874474,-0.0837668714 8.46743686,0.267541014 L4.99999981,3.73497806 L1.5325628,0.267541051 C1.1812549,-0.0837668481 0.616043606, -0.0881381955 0.264694717,0.263210694 C-0.0842215912,0.612127004 -0.0836375768,1.17841613 0.269025093,1.5310788 L3.73646206,4.9985158 L0.269025109,8.46595276 C-0.083637537,8.81861541 -0.0842215923, 9.38490462 0.264694642,9.73382106 C0.616043456,10.0851701 1.18125469, 10.0807988 1.53256259,9.72949093 L4.99999988,6.26205363 L8.46743739, 9.72949117 C8.8187453,10.0807991 9.38395655,10.0851704 9.73530537, 9.73382138 C10.0842216,9.38490498 10.0836375,8.81861579 9.73097488, 8.46595313 L6.26353762,4.99851587 Z";
-
-type TooltipBubbleProps = {|
-    tooltipProps: NewTooltipProps,
-    dismiss: () => void,
-|};
-
-export default class TooltipBubble extends React.PureComponent<TooltipBubbleProps> {
-    _handleClickClose: () => void = () => this.props.dismiss();
-
-    _renderCloseButton(
-        ids: IIdentifierFactory,
-    ): null | React.Element<"button"> {
-        const {inverted, dismissOnClickClose} = this.props.tooltipProps;
-
-        if (!dismissOnClickClose) {
-            // When `dismissOnClickClose` is not set, don't render a close
-            // button at all.
-            return null;
-        }
-
-        const buttonDescriptionId = ids.get("button-description");
-        const headerId = this.getA11yHeaderId(ids);
-
-        return (
-            <button
-                className={css(styles.closeIcon)}
-                onClick={this._handleClickClose}
-                aria-describedby={`${buttonDescriptionId} ${headerId}`}
-            >
-                <Icon
-                    title={i18n._("Close")}
-                    icon={closeIconPath}
-                    size={10}
-                    color={
-                        // Use a light icon if we're inverted, or dark
-                        // otherwise.
-                        inverted
-                            ? "rgba(255, 255, 255, 0.7)"
-                            : "rgba(0, 0, 0, 0.15)"
-                    }
-                />
-                <div
-                    id={buttonDescriptionId}
-                    className={css(a11yStyles.srOnly)}
-                >
-                    {i18n._("Closes the tooltip: ")}
-                </div>
-            </button>
-        );
-    }
-
-    getA11yHeaderId(ids: IIdentifierFactory): string {
-        const {
-            tooltipProps: {a11y},
-        } = this.props;
-        if (!a11y || !a11y.title) {
-            // No title specified so assume our content labels us.
-            return this.getA11yContentId(ids);
-        }
-        if (typeof a11y.title === "string") {
-            // We have a string title, so we'll generate our own label.
-            return ids.get("header");
-        }
-        // We've been given a specific identifier, so use that.
-        return a11y.title.id;
-    }
-
-    getA11yContentId(ids: IIdentifierFactory): string {
-        return ids.get("content");
-    }
-
-    renderTooltip(ids: IIdentifierFactory): React.Element<"div"> {
-        const {
-            content,
-            dismissOnClickClose,
-            noPadding,
-            onClick,
-            onMouseEnter,
-            onMouseLeave,
-            a11y,
-            testId,
-        } = this.props.tooltipProps;
-        const a11yTitle = a11y && a11y.title;
-        const a11yAssertiveness = a11y && a11y.assertiveness;
-        const {backgroundColor, textColor} = getTooltipColors(
-            this.props.tooltipProps,
-        );
-        const headerId = this.getA11yHeaderId(ids);
-        const contentId = this.getA11yContentId(ids);
-        return (
-            <div
-                className={css(
-                    styles.tooltipBubble,
-                    !noPadding && styles.tooltipBubbleWithPadding,
-                    dismissOnClickClose && styles.tooltipBubbleWithCloseIcon,
-                    onClick && styles.tooltipBubbleWithOnClick,
-                )}
-                onClick={onClick}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-                style={{backgroundColor, color: textColor}}
-                role="region"
-                aria-labelledby={headerId}
-                aria-describedby={contentId === headerId ? null : contentId}
-                data-test-id={testId}
-            >
-                {this._renderCloseButton(ids)}
-                <div aria-live={a11yAssertiveness}>
-                    {typeof a11yTitle === "string" ? (
-                        <div className={css(a11yStyles.srOnly)} id={headerId}>
-                            {a11yTitle}
-                        </div>
-                    ) : null}
-                    <div id={contentId} className={css(styles.tooltipContent)}>
-                        {content}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render(): React.Node {
-        return (
-            <UniqueIDProvider mockOnFirstRender={false} scope="tooltip-bubble">
-                {(ids) => this.renderTooltip(ids)}
-            </UniqueIDProvider>
-        );
-    }
-}
-
-// These styles are copied from tooltip-package/tooltip.jsx - with some minor
-// modifications, because positioning is handled differently.
-//
-// TODO(mdr): Also, the standard tooltip seemed to have `transition` styles
-//     designed to fade-in the tooltip... but they don't seem to work? I've
-//     removed them for now. We'd probably have to use an
-//     AphroditeCSSTransitionGroup, in order to initialize the opacity to 0,
-//     then wait a tick before setting the opacity to 1.
-const styles = StyleSheet.create({
-    tooltipBubble: {
-        // layout styles
-        boxSizing: "border-box",
-        position: "relative", // for the close icon
-
-        // content styles
-        ...typography.labelMedium,
-
-        // border and box shadow styles
-        borderRadius: bubbleBorderRadius,
-        border: "1px solid rgba(0, 0, 0, 0.1)",
-        boxShadow:
-            `${dropShadowXOffset}px ${dropShadowYOffset}px ` +
-            `${dropShadowRadius}px 0px ` +
-            `rgba(0, 0, 0, ${dropShadowOpacity})`,
-
-        // Ensure that clicking on the tooltip's empty space doesn't clear the
-        // user's text selection elsewhere in the page. (We reset this rule in
-        // `tooltipContent`, so that the user _can_ select text _inside_ the
-        // tooltip.)
-        userSelect: "none",
-    },
-
-    tooltipBubbleWithPadding: {
-        padding: "10px 23px",
-    },
-
-    tooltipBubbleWithCloseIcon: {
-        paddingRight: 34,
-    },
-
-    tooltipBubbleWithOnClick: {
-        cursor: "pointer",
-    },
-
-    tooltipContent: {
-        // Reset the `userSelect: none` rule in `tooltipBubble`, to enable the
-        // user to select the tooltip's content.
-        userSelect: "auto",
-    },
-
-    closeIcon: {
-        display: "block",
-        position: "absolute",
-        right: 10,
-        top: 10,
-        padding: 0,
-        background: "inherit",
-        border: "none",
-    },
-});

package/src/components/new-tooltip/tooltip-portal.jsx

@@ -1,101 +0,0 @@
-// @flow
-/**
- * This is TooltipPortal, part of NewTooltip.
- *
- * This component renders nothing inline - but it mounts a TooltipPositioner in
- * `#outer-wrapper`, and unmounts it when this unmounts.
- *
- * This is a lot like a React 16 "portal", but we're in React 15, so we sorta
- * have to reimplement that behavior ourselves ^_^`
- * https://reactjs.org/docs/portals.html
- *
- * This component has a public method `remeasure`, to delegate `remeasure`
- * calls down from NewTooltip to TooltipPositioner.
- *
- * TODO(mdr): Once we upgrade to React 16, replace some of this logic with a
- *     built-in React portal.
- */
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-import TooltipPositioner from "./tooltip-positioner.jsx";
-
-import type {NewTooltipProps} from "./types.js";
-
-type TooltipPortalProps = {|
-    tooltipProps: NewTooltipProps,
-    dismiss: () => void,
-    rootElement: HTMLElement,
-    targetElement: HTMLElement,
-    isAboveModal?: boolean,
-|};
-export default class TooltipPortal extends React.Component<TooltipPortalProps> {
-    _mountNode: ?HTMLElement;
-    _tooltipPositioner: ?TooltipPositioner;
-
-    // We mounted, so we should mount the TooltipPositioner! Create a node for
-    // it, then mount it there.
-    componentDidMount() {
-        const mountNode = document.createElement("div");
-        this._mountNode = mountNode;
-        this.props.rootElement.appendChild(mountNode);
-
-        this._renderInMountNode(mountNode);
-    }
-
-    // We updated, so we should update to the TooltipPositioner! Re-call
-    // ReactDOM.render, which will trigger an update rather than a mount,
-    // because the component is already mounted in that location.
-    componentDidUpdate() {
-        const mountNode = this._mountNode;
-        if (!mountNode) {
-            return;
-        }
-
-        this._renderInMountNode(mountNode);
-    }
-
-    // We unmounted, so we should unmount the TooltipPositioner! Ask React to
-    // unmount it, then destroy the node we created.
-    componentWillUnmount() {
-        const mountNode = this._mountNode;
-        if (!mountNode) {
-            return;
-        }
-
-        ReactDOM.unmountComponentAtNode(mountNode);
-        this.props.rootElement.removeChild(mountNode);
-    }
-
-    remeasure() {
-        this._tooltipPositioner && this._tooltipPositioner.remeasure();
-    }
-
-    _renderInMountNode(mountNode: HTMLElement) {
-        const {
-            tooltipProps,
-            dismiss,
-            rootElement,
-            targetElement,
-            isAboveModal,
-        } = this.props;
-
-        // TODO(LP-11406): Replace with React Portal
-        // eslint-disable-next-line no-restricted-syntax
-        ReactDOM.render(
-            <TooltipPositioner
-                tooltipProps={tooltipProps}
-                dismiss={dismiss}
-                rootElement={rootElement}
-                targetElement={targetElement}
-                isAboveModal={isAboveModal}
-                ref={(node) => (this._tooltipPositioner = node)}
-            />,
-            mountNode,
-        );
-    }
-
-    render(): null {
-        return null;
-    }
-}