@khanacademy/wonder-blocks-clickable 4.2.7 → 4.2.8

package/src/components/clickable.tsx

@@ -1,429 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import {Link} from "react-router-dom";
-import {__RouterContext} from "react-router";
-
-import {addStyle} from "@khanacademy/wonder-blocks-core";
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import {color} from "@khanacademy/wonder-blocks-tokens";
-
-import getClickableBehavior from "../util/get-clickable-behavior";
-import type {ClickableRole, ClickableState} from "./clickable-behavior";
-import {isClientSideUrl} from "../util/is-client-side-url";
-
-type CommonProps =
-    /**
-     * aria-label should be used when `spinner={true}` to let people using screen
-     * readers that the action taken by clicking the button will take some
-     * time to complete.
-     */
-    Partial<Omit<AriaProps, "aria-disabled">> & {
-        /**
-         * The child of Clickable must be a function which returns the component
-         * which should be made Clickable.  The function is passed an object with
-         * three boolean properties: hovered, focused, and pressed.
-         */
-        children: (clickableState: ClickableState) => React.ReactNode;
-        /**
-         * An onClick function which Clickable can execute when clicked
-         */
-        onClick?: (e: React.SyntheticEvent) => unknown;
-        /**
-         * An onFocus function which Clickable can execute when focused
-         */
-        onFocus?: (e: React.FocusEvent) => unknown;
-        /**
-         * Optional href which Clickable should direct to, uses client-side routing
-         * by default if react-router is present
-         */
-        href?: string;
-        /**
-         * Styles to apply to the Clickable component
-         */
-        style?: StyleType;
-        /**
-         * Adds CSS classes to the Clickable.
-         */
-        className?: string;
-        /**
-         * Whether the Clickable is on a dark colored background.
-         * Sets the default focus ring color to white, instead of blue.
-         * Defaults to false.
-         */
-        light?: boolean;
-        /**
-         * Disables or enables the child; defaults to false
-         */
-        disabled?: boolean;
-        /**
-         * An optional id attribute.
-         */
-        id?: string;
-        /**
-         * Specifies the type of relationship between the current document and the
-         * linked document. Should only be used when `href` is specified. This
-         * defaults to "noopener noreferrer" when `target="_blank"`, but can be
-         * overridden by setting this prop to something else.
-         */
-        rel?: string;
-        /**
-         * The role of the component, can be a role of type ClickableRole
-         */
-        role?: ClickableRole;
-        /**
-         * Avoids client-side routing in the presence of the href prop
-         */
-        skipClientNav?: boolean;
-        /**
-         * Test ID used for e2e testing.
-         */
-        testId?: string;
-        /**
-         * Respond to raw "keydown" event.
-         */
-        onKeyDown?: (e: React.KeyboardEvent) => unknown;
-        /**
-         * Respond to raw "keyup" event.
-         */
-        onKeyUp?: (e: React.KeyboardEvent) => unknown;
-        /**
-         * Respond to raw "mousedown" event.
-         */
-        onMouseDown?: (e: React.MouseEvent) => unknown;
-        /**
-         * Respond to raw "mouseup" event.
-         */
-        onMouseUp?: (e: React.MouseEvent) => unknown;
-        /**
-         * Don't show the default focus ring.  This should be used when implementing
-         * a custom focus ring within your own component that uses Clickable.
-         */
-        hideDefaultFocusRing?: boolean;
-        /**
-         * Set the tabindex attribute on the rendered element.
-         */
-        tabIndex?: number;
-        /**
-         * An optional title attribute.
-         */
-        title?: string;
-        /**
-         * Run async code before navigating. If the promise returned rejects then
-         * navigation will not occur.
-         *
-         * If both safeWithNav and beforeNav are provided, beforeNav will be run
-         * first and safeWithNav will only be run if beforeNav does not reject.
-         *
-         * WARNING: This prop must be used with `href` and should not be used with
-         * `target="blank"`.
-         */
-        beforeNav?: () => Promise<unknown>;
-        /**
-         * Run async code in the background while client-side navigating. If the
-         * browser does a full page load navigation, the callback promise must be
-         * settled before the navigation will occur. Errors are ignored so that
-         * navigation is guaranteed to succeed.
-         */
-        safeWithNav?: () => Promise<unknown>;
-    };
-
-type Props =
-    | (CommonProps & {
-          href: string;
-
-          /**
-           * Run async code in the background while client-side navigating. If the
-           * browser does a full page load navigation, the callback promise must be
-           * settled before the navigation will occur. Errors are ignored so that
-           * navigation is guaranteed to succeed.
-           */
-          safeWithNav?: () => Promise<unknown>;
-
-          /**
-           * A target destination window for a link to open in.
-           */
-          target?: "_blank";
-
-          beforeNav?: never;
-      })
-    | (CommonProps & {
-          href?: string;
-
-          /**
-           * Run async code before navigating. If the promise returned rejects then
-           * navigation will not occur.
-           *
-           * If both safeWithNav and beforeNav are provided, beforeNav will be run
-           * first and safeWithNav will only be run if beforeNav does not reject.
-           */
-          beforeNav?: () => Promise<unknown>;
-
-          /**
-           * Run async code in the background while client-side navigating. If the
-           * browser does a full page load navigation, the callback promise must be
-           * settled before the navigation will occur. Errors are ignored so that
-           * navigation is guaranteed to succeed.
-           */
-          safeWithNav?: () => Promise<unknown>;
-
-          target?: never;
-      });
-
-const StyledAnchor = addStyle("a");
-const StyledButton = addStyle("button");
-const StyledLink = addStyle(Link);
-
-/**
- * A component to turn any custom component into a clickable one.
- *
- * Works by wrapping `ClickableBehavior` around the child element and styling
- * the child appropriately and encapsulates routing logic which can be
- * customized. Expects a function which returns an element as its child.
- *
- * Clickable allows your components to:
- *
- * - Handle mouse / touch / keyboard events
- * - Match the standard behavior of the given role
- * - Apply custom styles based on pressed / focused / hovered state
- * - Perform Client Side Navigation when href is passed and the component is a
- *   descendent of a react-router Router.
- *
- * ### Usage
- *
- * ```jsx
- * <Clickable onClick={() => alert("You clicked me!")}>
- *     {({hovered, focused, pressed}) =>
- *         <div
- *             style={[
- *                 hovered && styles.hovered,
- *                 focused && styles.focused,
- *                 pressed && styles.pressed,
- *             ]}
- *         >
- *             Click Me!
- *         </div>
- *     }
- * </Clickable>
- * ```
- */
-
-const Clickable = React.forwardRef(function Clickable(
-    props: Props,
-    ref: React.ForwardedRef<
-        typeof Link | HTMLAnchorElement | HTMLButtonElement
-    >,
-) {
-    const getCorrectTag: (
-        clickableState: ClickableState,
-        router: any,
-        commonProps: {
-            [key: string]: any;
-        },
-    ) => React.ReactElement = (clickableState, router, commonProps) => {
-        const activeHref = props.href && !props.disabled;
-        const useClient =
-            router && !props.skipClientNav && isClientSideUrl(props.href || "");
-
-        // NOTE: checking this.props.href here is redundant, but TypeScript
-        // needs it to refine this.props.href to a string.
-        if (activeHref && useClient && props.href) {
-            return (
-                <StyledLink
-                    {...commonProps}
-                    to={props.href}
-                    role={props.role}
-                    target={props.target || undefined}
-                    aria-disabled={props.disabled ? "true" : "false"}
-                    ref={ref as React.Ref<typeof Link>}
-                >
-                    {props.children(clickableState)}
-                </StyledLink>
-            );
-        } else if (activeHref && !useClient) {
-            return (
-                <StyledAnchor
-                    {...commonProps}
-                    href={props.href}
-                    role={props.role}
-                    target={props.target || undefined}
-                    aria-disabled={props.disabled ? "true" : "false"}
-                    ref={ref as React.Ref<HTMLAnchorElement>}
-                >
-                    {props.children(clickableState)}
-                </StyledAnchor>
-            );
-        } else {
-            return (
-                <StyledButton
-                    {...commonProps}
-                    type="button"
-                    aria-disabled={props.disabled}
-                    ref={ref as React.Ref<HTMLButtonElement>}
-                >
-                    {props.children(clickableState)}
-                </StyledButton>
-            );
-        }
-    };
-
-    const renderClickableBehavior: (router: any) => React.ReactNode = (
-        router: any,
-    ) => {
-        const {
-            href,
-            onClick,
-            skipClientNav,
-            beforeNav = undefined,
-            safeWithNav = undefined,
-            style,
-            target = undefined,
-            testId,
-            onFocus,
-            onKeyDown,
-            onKeyUp,
-            onMouseDown,
-            onMouseUp,
-            hideDefaultFocusRing,
-            light,
-            disabled,
-            tabIndex,
-            ...restProps
-        } = props;
-        const ClickableBehavior = getClickableBehavior(
-            href,
-            skipClientNav,
-            router,
-        );
-
-        const getStyle = (state: ClickableState): StyleType => [
-            styles.reset,
-            styles.link,
-            !hideDefaultFocusRing &&
-                state.focused &&
-                (light ? styles.focusedLight : styles.focused),
-            disabled && styles.disabled,
-            style,
-        ];
-
-        if (beforeNav) {
-            return (
-                <ClickableBehavior
-                    href={href}
-                    onClick={onClick}
-                    beforeNav={beforeNav}
-                    safeWithNav={safeWithNav}
-                    onFocus={onFocus}
-                    onKeyDown={onKeyDown}
-                    onKeyUp={onKeyUp}
-                    onMouseDown={onMouseDown}
-                    onMouseUp={onMouseUp}
-                    disabled={disabled}
-                    tabIndex={tabIndex}
-                >
-                    {(state, childrenProps) =>
-                        getCorrectTag(state, router, {
-                            ...restProps,
-                            "data-testid": testId,
-                            style: getStyle(state),
-                            ...childrenProps,
-                        })
-                    }
-                </ClickableBehavior>
-            );
-        } else {
-            return (
-                <ClickableBehavior
-                    href={href}
-                    onClick={onClick}
-                    safeWithNav={safeWithNav}
-                    onFocus={onFocus}
-                    onKeyDown={onKeyDown}
-                    onKeyUp={onKeyUp}
-                    onMouseDown={onMouseDown}
-                    onMouseUp={onMouseUp}
-                    target={target}
-                    disabled={disabled}
-                    tabIndex={tabIndex}
-                >
-                    {(state, childrenProps) =>
-                        getCorrectTag(state, router, {
-                            ...restProps,
-                            "data-testid": testId,
-                            style: getStyle(state),
-                            ...childrenProps,
-                        })
-                    }
-                </ClickableBehavior>
-            );
-        }
-    };
-
-    return (
-        <__RouterContext.Consumer>
-            {(router) => renderClickableBehavior(router)}
-        </__RouterContext.Consumer>
-    );
-});
-
-Clickable.defaultProps = {
-    light: false,
-    disabled: false,
-};
-
-export default Clickable;
-
-// Source:  https://gist.github.com/MoOx/9137295
-const styles = StyleSheet.create({
-    reset: {
-        border: "none",
-        margin: 0,
-        padding: 0,
-        width: "auto",
-        overflow: "visible",
-
-        background: "transparent",
-        textDecoration: "none",
-
-        /* inherit font & color from ancestor */
-        color: "inherit",
-        font: "inherit",
-
-        boxSizing: "border-box",
-        // This removes the 300ms click delay on mobile browsers by indicating that
-        // "double-tap to zoom" shouldn't be used on this element.
-        touchAction: "manipulation",
-        userSelect: "none",
-
-        // This is usual frowned upon b/c of accessibility.  We expect users of Clickable
-        // to define their own focus styles.
-        outline: "none",
-
-        /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-        lineHeight: "normal",
-
-        /* Corrects font smoothing for webkit */
-        WebkitFontSmoothing: "inherit",
-        MozOsxFontSmoothing: "inherit",
-    },
-    link: {
-        cursor: "pointer",
-    },
-    focused: {
-        ":focus": {
-            outline: `solid 2px ${color.blue}`,
-        },
-    },
-    focusedLight: {
-        outline: `solid 2px ${color.white}`,
-    },
-    disabled: {
-        color: color.offBlack32,
-        cursor: "not-allowed",
-        ":focus": {
-            outline: "none",
-        },
-        ":focus-visible": {
-            outline: `solid 2px ${color.blue}`,
-        },
-    },
-});

package/src/index.ts

@@ -1,14 +0,0 @@
-import type {
-    ChildrenProps,
-    ClickableState,
-    ClickableRole,
-} from "./components/clickable-behavior";
-import Clickable from "./components/clickable";
-
-export {default as ClickableBehavior} from "./components/clickable-behavior";
-export {default as getClickableBehavior} from "./util/get-clickable-behavior";
-export {isClientSideUrl} from "./util/is-client-side-url";
-
-export {Clickable as default};
-
-export type {ChildrenProps, ClickableState, ClickableRole};

package/src/util/__tests__/get-clickable-behavior.test.tsx

@@ -1,104 +0,0 @@
-import * as React from "react";
-import {MemoryRouter} from "react-router-dom";
-import ClickableBehavior from "../../components/clickable-behavior";
-import getClickableBehavior from "../get-clickable-behavior";
-
-describe("getClickableBehavior", () => {
-    test("Without href, returns ClickableBehavior", () => {
-        // Arrange
-        const url = undefined;
-        const skipClientNav = undefined;
-        const router = undefined;
-        const expectation = ClickableBehavior;
-
-        // Act
-        const result = getClickableBehavior(url, skipClientNav, router);
-
-        // Assert
-        expect(result).toBe(expectation);
-    });
-
-    describe("with href", () => {
-        test("External URL, returns ClickableBehavior", () => {
-            // Arrange
-            const url = "http://google.com";
-            const skipClientNav = undefined;
-            const router = <MemoryRouter />;
-            const expectation = ClickableBehavior;
-
-            // Act
-            const result = getClickableBehavior(url, skipClientNav, router);
-
-            // Assert
-            expect(result).toBe(expectation);
-        });
-
-        describe("Internal URL", () => {
-            describe("skipClientNav is undefined", () => {
-                test("No router, returns ClickableBehavior", () => {
-                    // Arrange
-                    const url = "/prep/lsat";
-                    const skipClientNav = undefined;
-                    const router = undefined;
-                    const expectation = ClickableBehavior;
-
-                    // Act
-                    const result = getClickableBehavior(
-                        url,
-                        skipClientNav,
-                        router,
-                    );
-
-                    // Assert
-                    expect(result).toBe(expectation);
-                });
-
-                test("Router, returns ClickableBehaviorWithRouter", () => {
-                    // Arrange
-                    const url = "/prep/lsat";
-                    const skipClientNav = undefined;
-                    const router = <MemoryRouter />;
-                    const expectation = "withRouter(ClickableBehavior)";
-
-                    // Act
-                    const result = getClickableBehavior(
-                        url,
-                        skipClientNav,
-                        router,
-                    );
-
-                    // Assert
-                    expect(result.displayName).toBe(expectation);
-                });
-            });
-
-            test("skipClientNav is false, returns ClickableBehaviorWithRouter", () => {
-                // Arrange
-                const url = "/prep/lsat";
-                const skipClientNav = false;
-                const router = <MemoryRouter />;
-                const expectation = "withRouter(ClickableBehavior)";
-
-                // Act
-                const result = getClickableBehavior(url, skipClientNav, router);
-
-                // Assert
-                expect(result.displayName).toBe(expectation);
-            });
-
-            test("skipClientNav is true, returns ClickableBehavior", () => {
-                // Arrange
-                const url = "/prep/lsat";
-                const skipClientNav = true;
-                const router = <MemoryRouter />;
-                const expectation = ClickableBehavior;
-
-                // Act
-                const result = getClickableBehavior(url, skipClientNav, router);
-
-                // Assert
-                expect(result).toBe(expectation);
-            });
-        });
-    });
-});

package/src/util/__tests__/is-client-side-url.js.test.ts

@@ -1,49 +0,0 @@
-import {isClientSideUrl} from "../is-client-side-url";
-
-describe("isClientSideUrl", () => {
-    test("returns boolean based on the url", () => {
-        // external URLs
-        expect(
-            isClientSideUrl(
-                "//khanacademy.zendesk.com/hc/en-us/articles/236355907",
-            ),
-        ).toEqual(false);
-        expect(
-            isClientSideUrl(
-                "https://khanacademy.zendesk.com/hc/en-us/articles/360007253831",
-            ),
-        ).toEqual(false);
-        expect(isClientSideUrl("http://external.com")).toEqual(false);
-        expect(isClientSideUrl("//www.google.com")).toEqual(false);
-        expect(isClientSideUrl("//")).toEqual(false);
-
-        // non-http(s) URLs
-        expect(isClientSideUrl("javascript:void(0);")).toEqual(false);
-        expect(isClientSideUrl("javascript:void(0)")).toEqual(false);
-        expect(isClientSideUrl("mailto:foo@example.com")).toEqual(false);
-        expect(isClientSideUrl("tel:+1234567890")).toEqual(false);
-        expect(isClientSideUrl("tel:+1234567890")).toEqual(false);
-        expect(isClientSideUrl("ms-help://kb12345.htm")).toEqual(false);
-        expect(isClientSideUrl("z39.50s://0.0.0.0")).toEqual(false);
-
-        // HREFs with anchors
-        expect(isClientSideUrl("#")).toEqual(false);
-        expect(isClientSideUrl("#foo")).toEqual(false);
-        expect(isClientSideUrl("/foo#bar")).toEqual(false);
-        expect(isClientSideUrl("foo/bar#baz")).toEqual(false);
-
-        // internal URLs
-        expect(isClientSideUrl("/foo//bar")).toEqual(true);
-        expect(isClientSideUrl("/coach/dashboard")).toEqual(true);
-        expect(isClientSideUrl("/math/early-math/modal/e/addition_1")).toEqual(
-            true,
-        );
-    });
-
-    test("invalid values for 'href' should return false", () => {
-        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'null' is not assignable to parameter of type 'string'.
-        expect(isClientSideUrl(null)).toEqual(false);
-        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'undefined' is not assignable to parameter of type 'string'.
-        expect(isClientSideUrl(undefined)).toEqual(false);
-    });
-});

package/src/util/get-clickable-behavior.ts

@@ -1,46 +0,0 @@
-/**
- * Returns either the default ClickableBehavior or a react-router aware version.
- *
- * The react-router aware version is returned if `router` is a react-router-dom
- * router, `skipClientNav` is not `true`, and `href` is an internal URL.
- *
- * The `router` can be accessed via __RouterContext (imported from 'react-router')
- * from a component rendered as a descendant of a BrowserRouter.
- * See https://reacttraining.com/react-router/web/guides/basic-components.
- */
-import * as React from "react";
-import {withRouter} from "react-router-dom";
-
-import {PropsFor} from "@khanacademy/wonder-blocks-core";
-
-import ClickableBehavior from "../components/clickable-behavior";
-import {isClientSideUrl} from "./is-client-side-url";
-
-// @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'typeof ClickableBehavior' is not assignable to parameter of type 'ComponentType<RouteComponentProps<any, StaticContext, unknown>>'.
-const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
-
-export default function getClickableBehavior(
-    /**
-     * The URL to navigate to.
-     */
-    href?: string,
-    /**
-     * Should we skip using the react router and go to the page directly.
-     */
-    skipClientNav?: boolean,
-    /**
-     * router object added to the React context object by react-router-dom.
-     */
-    router?: any,
-): React.ComponentType<PropsFor<typeof ClickableBehavior>> {
-    if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
-        // We cast to `any` here since the type of ClickableBehaviorWithRouter
-        // is slightly different from the return type of this function.
-        // TODO(WB-1037): Always return the wrapped version once all routes have
-        // been ported to the app-shell in webapp.
-        return ClickableBehaviorWithRouter as any;
-    }
-
-    // @ts-expect-error [FEI-5019] - TS2322 - Type 'typeof ClickableBehavior' is not assignable to type 'ComponentType<Pick<Props, "children" | "href" | "tabIndex" | "role" | "target" | "type" | "rel" | "onKeyDown" | "onKeyUp" | "onClick" | "history" | "skipClientNav" | "safeWithNav" | "beforeNav"> & InexactPartial<...> & InexactPartial<...>>'.
-    return ClickableBehavior;
-}

package/src/util/is-client-side-url.ts

@@ -1,15 +0,0 @@
-/**
- * Returns:
- * - false for hrefs staring with http://, https://, //.
- * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
- * - true for all other values, e.g. /foo/bar
- */
-export const isClientSideUrl = (href: string): boolean => {
-    if (typeof href !== "string") {
-        return false;
-    }
-    return (
-        !/^(https?:)?\/\//i.test(href) &&
-        !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href)
-    );
-};

package/tsconfig-build.json

@@ -1,12 +0,0 @@
-{
-    "exclude": ["dist"],
-    "extends": "../tsconfig-shared.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "src",
-    },
-    "references": [
-        {"path": "../wonder-blocks-core/tsconfig-build.json"},
-        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
-    ]
-}