@khanacademy/wonder-blocks-clickable 2.4.4 → 2.4.6

package/dist/components/clickable.d.ts

@@ -0,0 +1,150 @@
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { ClickableRole, ClickableState } from "./clickable-behavior";
+type Props = 
+/**
+ * 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: (arg1: ClickableState) => React.ReactNode;
+    /**
+     * An onClick function which Clickable can execute when clicked
+     */
+    onClick?: (e: React.SyntheticEvent) => 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;
+    /**
+     * 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;
+    /**
+     * A target destination window for a link to open in.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank";
+    /**
+     * 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 DefaultProps = {
+    light: Props["light"];
+    disabled: Props["disabled"];
+};
+/**
+ * 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>
+ * ```
+ */
+export default class Clickable extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    getCorrectTag: (clickableState: ClickableState, router: any, commonProps: {
+        [key: string]: any;
+    }) => React.ReactElement;
+    renderClickableBehavior(router: any): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/clickable.js.flow

@@ -0,0 +1,176 @@
+/**
+ * Flowtype definitions for clickable
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { ClickableRole, ClickableState } from "./clickable-behavior";
+declare type Props = {
+  ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, { ... }>,
+  ...{
+    /**
+     * 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: (arg1: ClickableState) => React.Node,
+
+    /**
+     * An onClick function which Clickable can execute when clicked
+     */
+    onClick?: (e: React.SyntheticEvent<>) => mixed,
+
+    /**
+     * 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<>) => mixed,
+
+    /**
+     * Respond to raw "keyup" event.
+     */
+    onKeyUp?: (e: React.KeyboardEvent<>) => mixed,
+
+    /**
+     * 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,
+
+    /**
+     * A target destination window for a link to open in.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank",
+
+    /**
+     * 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<mixed>,
+
+    /**
+     * 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<mixed>,
+    ...
+  },
+};
+declare type DefaultProps = {
+  light: $PropertyType<Props, "light">,
+  disabled: $PropertyType<Props, "disabled">,
+  ...
+};
+/**
+ * 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>
+ * ```
+ */
+declare export default class Clickable mixins React.Component<Props> {
+  static defaultProps: DefaultProps;
+  getCorrectTag: (
+    clickableState: ClickableState,
+    router: any,
+    commonProps: {
+      [key: string]: any,
+    }
+  ) => React.Element<>;
+  renderClickableBehavior(router: any): React.Node;
+  render(): React.Element<>;
+}