@khanacademy/wonder-blocks-popover 3.2.15 → 3.3.0

package/src/components/popover-content-core.tsx

@@ -1,143 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-
-import CloseButton from "./close-button";
-
-type Props = AriaProps & {
-    /**
-     * The content to render inside the popover.
-     */
-    children: React.ReactNode;
-    /**
-     * Close button color
-     */
-    closeButtonLight?: boolean;
-    /**
-     * Close button label for use in screen readers
-     */
-    closeButtonLabel?: string;
-    /**
-     * When true, the close button is shown; otherwise, the close button is not shown.
-     */
-    closeButtonVisible?: boolean;
-    /**
-     * Whether we should use the default light color scheme or switch to a
-     * different color scheme.
-     */
-    color: "blue" | "darkBlue" | "white";
-    /**
-     * Custom styles applied to the content container
-     */
-    style?: StyleType;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-};
-
-type DefaultProps = {
-    color: Props["color"];
-    closeButtonLight: Props["closeButtonLight"];
-    closeButtonVisible: Props["closeButtonVisible"];
-};
-
-/**
- * This is the base popover container. It’s used internally by all the variants.
- * Also, it can be used to create flexible popovers.
- *
- * ### Usage
- *
- * ```jsx
- * import {PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
- *
- * <PopoverContentCore>
- *  <>
- *      Some custom layout
- *  </>
- * </PopoverContentCore>
- * ```
- */
-export default class PopoverContentCore extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        color: "white",
-        closeButtonLight: false,
-        closeButtonVisible: false,
-    };
-
-    render(): React.ReactNode {
-        const {
-            "aria-label": ariaLabel,
-            children,
-            closeButtonLight,
-            closeButtonLabel,
-            closeButtonVisible,
-            color,
-            style,
-            testId,
-        } = this.props;
-
-        return (
-            <View
-                testId={testId}
-                style={[
-                    styles.content,
-                    color !== "white" && styles[color],
-                    style,
-                ]}
-                aria-label={ariaLabel}
-            >
-                {closeButtonVisible && (
-                    <CloseButton
-                        aria-label={closeButtonLabel}
-                        light={closeButtonLight || color !== "white"}
-                        style={styles.closeButton}
-                        testId={`${testId || "popover"}-close-btn`}
-                    />
-                )}
-                {children}
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    content: {
-        borderRadius: spacing.xxxSmall_4,
-        border: `solid 1px ${color.offBlack16}`,
-        backgroundColor: color.white,
-        boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
-        margin: 0,
-        maxWidth: spacing.medium_16 * 18, // 288px
-        padding: spacing.large_24,
-        overflow: "hidden",
-        justifyContent: "center",
-    },
-    /**
-     * Theming
-     */
-    blue: {
-        backgroundColor: color.blue,
-        color: color.white,
-    },
-
-    darkBlue: {
-        backgroundColor: color.darkBlue,
-        color: color.white,
-    },
-
-    /**
-     * elements
-     */
-    closeButton: {
-        margin: 0,
-        position: "absolute",
-        right: spacing.xxxSmall_4,
-        top: spacing.xxxSmall_4,
-        // Allows the button to be above the title and/or custom content
-        zIndex: 1,
-    },
-});

package/src/components/popover-content.tsx

@@ -1,319 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import {addStyle, View} from "@khanacademy/wonder-blocks-core";
-import {spacing} from "@khanacademy/wonder-blocks-tokens";
-import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-
-import type {PopoverContextType} from "./popover-context";
-
-import PopoverContentCore from "./popover-content-core";
-import PopoverContext from "./popover-context";
-
-type CommonProps = AriaProps & {
-    /**
-     * The content to render inside the popover.
-     */
-    content: string;
-    /**
-     * The popover title
-     */
-    title: string;
-    /**
-     * User-defined actions.
-     *
-     * It can be either a Node or a function using the children-as-function
-     * pattern to pass a close function for use anywhere within the actions.
-     * This provides a lot of flexibility in terms of what actions may trigger
-     * the Popover to close the popover dialog.
-     */
-    actions?:
-        | React.ReactNode
-        | ((arg1: {close: () => unknown}) => React.ReactElement);
-    /**
-     * Close button label for use in screen readers
-     */
-    closeButtonLabel?: string;
-    /**
-     * When true, the close button is shown; otherwise, the close button is not shown.
-     */
-    closeButtonVisible?: boolean;
-    /**
-     * Custom styles to be injected to the popover content container
-     */
-    style?: StyleType;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-    /**
-     * Unique ID for the popover. This is used as a prefix to the IDs of the
-     * popover's elements.
-     * @ignore
-     */
-    uniqueId?: string;
-};
-
-type Props =
-    | (CommonProps & {
-          /**
-           * Decorate the popover with an illustrated icon. It cannot be used at the
-           * same time with image.
-           */
-          icon?:
-              | string
-              | React.ReactElement<React.ComponentProps<"img">>
-              | React.ReactElement<React.ComponentProps<"svg">>;
-          /**
-           * Decorate the popover with a full-bleed illustration. It cannot be used at
-           * the same time with icon.
-           */
-          image?:
-              | React.ReactElement<React.ComponentProps<"img">>
-              | React.ReactElement<React.ComponentProps<"svg">>;
-
-          emphasized?: never;
-      })
-    | (CommonProps & {
-          /**
-           * When true, changes the popover dialog background to blue; otherwise, the
-           * popover dialog background is not modified. It can be used only with
-           * Text-only popovers. It cannot be used with icon or image.
-           */
-          emphasized?: boolean;
-
-          icon?: never;
-          image?: never;
-      });
-
-type DefaultProps = {
-    closeButtonVisible: Props["closeButtonVisible"];
-};
-
-// Created to add custom styles to the icon or image elements
-const StyledImage = addStyle("img");
-
-/**
- * This is the container that is consumed by all the predefined variations. Its
- * main responsibility is populate the contents depending on the variation used.
- *
- * ### Usage
- *
- * ```jsx
- * import {PopoverContent} from "@khanacademy/wonder-blocks-popover";
- *
- * <PopoverContent
- *  closeButtonVisible
- *  content="Some content for the popover"
- *  title="Popover with text only"
- * />
- * ```
- */
-export default class PopoverContent extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        closeButtonVisible: false,
-    };
-
-    componentDidMount() {
-        const {icon, image} = this.props;
-
-        // this runtime check is added to support <svg> and <img> elements
-        // inside the image prop
-        if (image && icon) {
-            throw new Error(
-                "'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.",
-            );
-        }
-    }
-
-    /**
-     * Runtime validation in case we try to use an invalid shape
-     */
-    validateProps({placement}: PopoverContextType) {
-        // illustration popover can't be placed horizontally
-        if (
-            this.props.image &&
-            (placement === "left" || placement === "right")
-        ) {
-            throw new Error(
-                "'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.",
-            );
-        }
-    }
-
-    // @ts-expect-error [FEI-5019] - TS2322 - Type '({ placement, }: PopoverContextType) => Element | null' is not assignable to type '(context: PopoverContextType) => ReactElement<any, string | JSXElementConstructor<any>>'.
-    maybeRenderImage: (context: PopoverContextType) => React.ReactElement = ({
-        placement,
-    }) => {
-        const {image} = this.props;
-
-        if (!image) {
-            return null;
-        }
-
-        return (
-            <View
-                style={[
-                    styles.image,
-                    placement === "bottom" && styles.imageToBottom,
-                ]}
-            >
-                {image}
-            </View>
-        );
-    };
-
-    // @ts-expect-error [FEI-5019] - TS2322 - Type '() => JSX.Element | null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>>'.
-    maybeRenderIcon: () => React.ReactElement = () => {
-        const {icon} = this.props;
-
-        if (!icon) {
-            return null;
-        }
-
-        return (
-            <View style={styles.iconContainer}>
-                {typeof icon !== "string" ? (
-                    icon
-                ) : (
-                    <StyledImage src={icon} style={styles.icon} />
-                )}
-            </View>
-        );
-    };
-
-    // @ts-expect-error [FEI-5019] - TS2322 - Type '(close: () => unknown) => Element | null' is not assignable to type '(close: () => unknown) => ReactElement<any, string | JSXElementConstructor<any>>'.
-    maybeRenderActions: (close: () => unknown) => React.ReactElement = (
-        close,
-    ) => {
-        const {actions} = this.props;
-
-        if (!actions) {
-            return null;
-        }
-
-        return (
-            <View style={styles.actions}>
-                {typeof actions === "function"
-                    ? actions({
-                          close: close,
-                      })
-                    : actions}
-            </View>
-        );
-    };
-
-    render(): React.ReactNode {
-        const {
-            closeButtonLabel,
-            closeButtonVisible,
-            content,
-            emphasized = undefined,
-            icon,
-            image,
-            style,
-            title,
-            testId,
-            uniqueId,
-        } = this.props;
-
-        return (
-            <PopoverContext.Consumer>
-                {({close, placement}) => {
-                    // verify if the props are correct
-                    this.validateProps({close, placement});
-
-                    return (
-                        <PopoverContentCore
-                            color={emphasized ? "blue" : "white"}
-                            closeButtonLight={image && placement === "top"}
-                            closeButtonLabel={closeButtonLabel}
-                            closeButtonVisible={closeButtonVisible}
-                            style={style}
-                            testId={testId}
-                        >
-                            <View style={!!icon && styles.withIcon}>
-                                {this.maybeRenderImage({placement})}
-
-                                {this.maybeRenderIcon()}
-
-                                <View style={styles.text}>
-                                    <HeadingSmall
-                                        id={`${uniqueId}-title`}
-                                        style={styles.title}
-                                    >
-                                        {title}
-                                    </HeadingSmall>
-                                    <Body id={`${uniqueId}-content`}>
-                                        {content}
-                                    </Body>
-                                </View>
-                            </View>
-
-                            {this.maybeRenderActions(close as any)}
-                        </PopoverContentCore>
-                    );
-                }}
-            </PopoverContext.Consumer>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    /**
-     * Shared styles
-     */
-    actions: {
-        marginTop: spacing.large_24,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "flex-end",
-    },
-
-    text: {
-        justifyContent: "center",
-    },
-
-    title: {
-        marginBottom: spacing.xSmall_8,
-    },
-
-    /**
-     * Icon styles
-     */
-    iconContainer: {
-        alignItems: "center",
-        justifyContent: "center",
-        height: spacing.xxxLarge_64,
-        width: spacing.xxxLarge_64,
-        minWidth: spacing.xxxLarge_64,
-        marginRight: spacing.medium_16,
-        overflow: "hidden",
-    },
-
-    icon: {
-        width: "100%",
-    },
-
-    withIcon: {
-        flexDirection: "row",
-    },
-
-    /**
-     * Illustration styles
-     */
-    image: {
-        marginBottom: spacing.large_24,
-        marginLeft: -spacing.large_24,
-        marginRight: -spacing.large_24,
-        marginTop: -spacing.large_24,
-        width: `calc(100% + ${spacing.large_24 * 2}px)`,
-    },
-
-    imageToBottom: {
-        marginBottom: -spacing.large_24,
-        marginTop: spacing.large_24,
-        order: 1,
-    },
-});

package/src/components/popover-context.ts

@@ -1,40 +0,0 @@
-import * as React from "react";
-
-import type {Placement} from "@khanacademy/wonder-blocks-tooltip";
-
-export type PopoverContextType = {
-    /**
-     * Facilitates passing the `onClose` handler from the Popover down to its
-     * children.
-     */
-    close?: () => unknown;
-    /**
-     * Facilitates passing this value from Popover (via TooltipPopper) down to
-     * PopoverContent. This is needed here to reposition the illustration to the
-     * start or the end of the content, in case the popper changes its
-     * placement.
-     */
-    placement?: Placement;
-};
-
-const defaultContext: PopoverContextType = {
-    close: undefined,
-    placement: "top",
-};
-
-/**
- * This context is being used for two reasons:
- *
- * 1. Pass down the `close` method from the `Popover` component to its children
- *    (`PopoverContent` and `CloseButton`). This way, these components can use
- *    this handler internally.
- *
- * 2. Keeps a reference of the TooltipPopper's `placement` value. It can be one
- *    of the following values: "top", "bottom", "left" or "right".
- */
-const PopoverContext = React.createContext<PopoverContextType>(
-    defaultContext,
-) as React.Context<PopoverContextType>;
-PopoverContext.displayName = "PopoverContext";
-
-export default PopoverContext;

package/src/components/popover-dialog.tsx

@@ -1,150 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-import {TooltipTail} from "@khanacademy/wonder-blocks-tooltip";
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
-
-import type {AriaProps} from "@khanacademy/wonder-blocks-core";
-import type {
-    Placement,
-    PopperElementProps,
-} from "@khanacademy/wonder-blocks-tooltip";
-
-import PopoverContent from "./popover-content";
-import PopoverContentCore from "./popover-content-core";
-
-type Props = AriaProps &
-    /**
-     * Required to correctly position the elements inside the dialog
-     * @ignore
-     */ PopperElementProps & {
-        /**
-         * The content to render inside the dialog.
-         */
-        children:
-            | React.ReactElement<React.ComponentProps<typeof PopoverContent>>
-            | React.ReactElement<
-                  React.ComponentProps<typeof PopoverContentCore>
-              >;
-        /**
-         * The unique identifier to give to the popover content.
-         */
-        id?: string;
-        /**
-         * Called when popper changes its placement
-         */
-        onUpdate: (placement: Placement) => unknown;
-        /**
-         * Whether to show the popover tail or not.
-         */
-        showTail: boolean;
-    };
-
-/**
- * This is an internal component that we use to render the stuff that appears
- * when a popover shows. It's composed by two elements: The popover content,
- * that can be of type [PopoverContent](#PopoverContent) or
- * [PopoverContentCore](#PopoverContentCore), and the
- * [TooltipTail](#TooltipTail).
- *
- * The main difference with [TooltipBubble](#TooltipBubble) is that bubble
- * handles hover states and PopoverDialog doesn't need to handle any states at
- * all (for now). Also, PopoverDialog needs to coordinate different background
- * colors for the content and tail components.
- *
- * Note that without explicit positioning, the tail will not be centered.
- */
-export default class PopoverDialog extends React.Component<Props> {
-    componentDidUpdate(prevProps: Props) {
-        // if the placement has changed, then we need to notify this to the
-        // parent component (`Popover`). This way, the context will update its
-        // `placement` value.
-        if (prevProps.placement !== this.props.placement) {
-            this.props.onUpdate(this.props.placement);
-        }
-    }
-
-    render(): React.ReactNode {
-        const {
-            placement,
-            children,
-            id,
-            isReferenceHidden,
-            updateBubbleRef,
-            updateTailRef,
-            tailOffset,
-            style,
-            showTail,
-            "aria-describedby": ariaDescribedby,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-label": ariaLabel,
-        } = this.props;
-
-        const contentProps = children.props as any;
-
-        // extract the background color from the popover content
-        const color: keyof typeof tokens.color = contentProps.emphasized
-            ? "blue"
-            : contentProps.color;
-
-        return (
-            <React.Fragment>
-                <View
-                    aria-label={ariaLabel}
-                    aria-describedby={ariaDescribedby}
-                    aria-labelledby={ariaLabelledBy}
-                    id={id}
-                    role="dialog"
-                    ref={updateBubbleRef}
-                    data-placement={placement}
-                    style={[
-                        isReferenceHidden && styles.hide,
-                        styles[`content-${placement}`],
-                        style,
-                    ]}
-                >
-                    {children}
-                    <TooltipTail
-                        show={showTail}
-                        color={color}
-                        updateRef={updateTailRef}
-                        placement={placement}
-                        offset={tailOffset}
-                    />
-                </View>
-            </React.Fragment>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    /**
-     * The hide style ensures that the bounds of the popover stay unchanged.
-     * This is because popper.js calculates the bubble position based off its
-     * bounds and if we stopped rendering it entirely, it wouldn't know where to
-     * place it when it reappeared.
-     */
-    hide: {
-        pointerEvents: "none",
-        opacity: 0,
-        backgroundColor: "transparent",
-        color: "transparent",
-    },
-
-    /**
-     * Ensure the content and tail are properly arranged.
-     */
-    "content-top": {
-        flexDirection: "column",
-    },
-    "content-right": {
-        flexDirection: "row-reverse",
-    },
-    "content-bottom": {
-        flexDirection: "column-reverse",
-    },
-    "content-left": {
-        flexDirection: "row",
-    },
-});