@khanacademy/wonder-blocks-clickable 3.0.13 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 3.1.0
+
+### Minor Changes
+
+-   ad8beb23: Added new tab index and ref props
+
 ## 3.0.13
 
 ### Patch Changes

package/dist/components/clickable.d.ts

@@ -1,13 +1,41 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 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.
+ * 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>
+ * ```
  */
-Partial<Omit<AriaProps, "aria-disabled">> & {
+declare const Clickable: React.ForwardRefExoticComponent<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
@@ -17,12 +45,12 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * An onClick function which Clickable can execute when clicked
      */
-    onClick?: (e: React.SyntheticEvent) => unknown;
+    onClick?: ((e: React.SyntheticEvent) => unknown) | undefined;
     /**
      * Optional href which Clickable should direct to, uses client-side routing
      * by default if react-router is present
      */
-    href?: string;
+    href?: string | undefined;
     /**
      * Styles to apply to the Clickable component
      */
@@ -30,59 +58,63 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * Adds CSS classes to the Clickable.
      */
-    className?: string;
+    className?: string | undefined;
     /**
      * 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;
+    light?: boolean | undefined;
     /**
      * Disables or enables the child; defaults to false
      */
-    disabled: boolean;
+    disabled?: boolean | undefined;
     /**
      * An optional id attribute.
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * 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;
+    rel?: string | undefined;
     /**
      * The role of the component, can be a role of type ClickableRole
      */
-    role?: ClickableRole;
+    role?: ClickableRole | undefined;
     /**
      * Avoids client-side routing in the presence of the href prop
      */
-    skipClientNav?: boolean;
+    skipClientNav?: boolean | undefined;
     /**
      * Test ID used for e2e testing.
      */
-    testId?: string;
+    testId?: string | undefined;
     /**
      * Respond to raw "keydown" event.
      */
-    onKeyDown?: (e: React.KeyboardEvent) => unknown;
+    onKeyDown?: ((e: React.KeyboardEvent) => unknown) | undefined;
     /**
      * Respond to raw "keyup" event.
      */
-    onKeyUp?: (e: React.KeyboardEvent) => unknown;
+    onKeyUp?: ((e: React.KeyboardEvent) => unknown) | undefined;
     /**
      * 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;
+    hideDefaultFocusRing?: boolean | undefined;
     /**
      * 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";
+    target?: "_blank" | undefined;
+    /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number | undefined;
     /**
      * Run async code before navigating. If the promise returned rejects then
      * navigation will not occur.
@@ -93,58 +125,13 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
      * WARNING: This prop must be used with `href` and should not be used with
      * `target="blank"`.
      */
-    beforeNav?: () => Promise<unknown>;
+    beforeNav?: (() => Promise<unknown>) | undefined;
     /**
      * 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.ReactNode;
-}
-export {};
+    safeWithNav?: (() => Promise<unknown>) | undefined;
+} & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | typeof Link>>;
+export default Clickable;

package/dist/components/clickable.js.flow

@@ -5,9 +5,44 @@
  * @flow
  */
 import * as React from "react";
+import { Link } from "react-router-dom";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import type { ClickableRole, ClickableState } from "./clickable-behavior";
-declare type Props = {|
+
+/**
+ * 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 var Clickable: React.ForwardRefExoticComponent<{|
   ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, {}>,
   ...{|
     /**
@@ -20,13 +55,13 @@ declare type Props = {|
     /**
      * An onClick function which Clickable can execute when clicked
      */
-    onClick?: (e: SyntheticEvent<>) => mixed,
+    onClick?: ((e: SyntheticEvent<>) => mixed) | void,
 
     /**
      * Optional href which Clickable should direct to, uses client-side routing
      * by default if react-router is present
      */
-    href?: string,
+    href?: string | void,
 
     /**
      * Styles to apply to the Clickable component
@@ -36,24 +71,24 @@ declare type Props = {|
     /**
      * Adds CSS classes to the Clickable.
      */
-    className?: string,
+    className?: string | void,
 
     /**
      * 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,
+    light?: boolean | void,
 
     /**
      * Disables or enables the child; defaults to false
      */
-    disabled: boolean,
+    disabled?: boolean | void,
 
     /**
      * An optional id attribute.
      */
-    id?: string,
+    id?: string | void,
 
     /**
      * Specifies the type of relationship between the current document and the
@@ -61,45 +96,50 @@ declare type Props = {|
      * defaults to "noopener noreferrer" when `target="_blank"`, but can be
      * overridden by setting this prop to something else.
      */
-    rel?: string,
+    rel?: string | void,
 
     /**
      * The role of the component, can be a role of type ClickableRole
      */
-    role?: ClickableRole,
+    role?: ClickableRole | void,
 
     /**
      * Avoids client-side routing in the presence of the href prop
      */
-    skipClientNav?: boolean,
+    skipClientNav?: boolean | void,
 
     /**
      * Test ID used for e2e testing.
      */
-    testId?: string,
+    testId?: string | void,
 
     /**
      * Respond to raw "keydown" event.
      */
-    onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
+    onKeyDown?: ((e: SyntheticKeyboardEvent<>) => mixed) | void,
 
     /**
      * Respond to raw "keyup" event.
      */
-    onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
+    onKeyUp?: ((e: SyntheticKeyboardEvent<>) => mixed) | void,
 
     /**
      * 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,
+    hideDefaultFocusRing?: boolean | void,
 
     /**
      * 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",
+    target?: "_blank" | void,
+
+    /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number | void,
 
     /**
      * Run async code before navigating. If the promise returned rejects then
@@ -111,7 +151,7 @@ declare type Props = {|
      * WARNING: This prop must be used with `href` and should not be used with
      * `target="blank"`.
      */
-    beforeNav?: () => Promise<mixed>,
+    beforeNav?: (() => Promise<mixed>) | void,
 
     /**
      * Run async code in the background while client-side navigating. If the
@@ -119,55 +159,8 @@ declare type Props = {|
      * settled before the navigation will occur. Errors are ignored so that
      * navigation is guaranteed to succeed.
      */
-    safeWithNav?: () => Promise<mixed>,
+    safeWithNav?: (() => Promise<mixed>) | void,
   |},
-|};
-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 extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  getCorrectTag: (
-    clickableState: ClickableState,
-    router: any,
-    commonProps: {
-      [key: string]: any,
-    }
-  ) => React.Element<any>;
-  renderClickableBehavior(router: any): React.Node;
-  render(): React.Node;
-}
+  ...React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | typeof Link>,
+|}>;
+declare export default typeof Clickable;

package/dist/es/index.js

@@ -364,41 +364,40 @@ function getClickableBehavior(href, skipClientNav, router) {
   return ClickableBehavior;
 }
 
-const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"];
+const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled", "tabIndex"];
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-class Clickable extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.getCorrectTag = (clickableState, router, commonProps) => {
-      const activeHref = this.props.href && !this.props.disabled;
-      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || "");
-      if (activeHref && useClient && this.props.href) {
-        return React.createElement(StyledLink, _extends({}, commonProps, {
-          to: this.props.href,
-          role: this.props.role,
-          target: this.props.target || undefined,
-          "aria-disabled": this.props.disabled ? "true" : undefined
-        }), this.props.children(clickableState));
-      } else if (activeHref && !useClient) {
-        return React.createElement(StyledAnchor, _extends({}, commonProps, {
-          href: this.props.href,
-          role: this.props.role,
-          target: this.props.target || undefined,
-          "aria-disabled": this.props.disabled ? "true" : undefined
-        }), this.props.children(clickableState));
-      } else {
-        return React.createElement(StyledButton, _extends({}, commonProps, {
-          type: "button",
-          "aria-disabled": this.props.disabled
-        }), this.props.children(clickableState));
-      }
-    };
-  }
-  renderClickableBehavior(router) {
-    const _this$props = this.props,
-      {
+const Clickable = React.forwardRef(function Clickable(props, ref) {
+  const getCorrectTag = (clickableState, router, commonProps) => {
+    const activeHref = props.href && !props.disabled;
+    const useClient = router && !props.skipClientNav && isClientSideUrl(props.href || "");
+    if (activeHref && useClient && props.href) {
+      return React.createElement(StyledLink, _extends({}, commonProps, {
+        to: props.href,
+        role: props.role,
+        target: props.target || undefined,
+        "aria-disabled": props.disabled ? "true" : undefined,
+        ref: ref
+      }), props.children(clickableState));
+    } else if (activeHref && !useClient) {
+      return React.createElement(StyledAnchor, _extends({}, commonProps, {
+        href: props.href,
+        role: props.role,
+        target: props.target || undefined,
+        "aria-disabled": props.disabled ? "true" : undefined,
+        ref: ref
+      }), props.children(clickableState));
+    } else {
+      return React.createElement(StyledButton, _extends({}, commonProps, {
+        type: "button",
+        "aria-disabled": props.disabled,
+        ref: ref
+      }), props.children(clickableState));
+    }
+  };
+  const renderClickableBehavior = router => {
+    const {
         href,
         onClick,
         skipClientNav,
@@ -411,9 +410,10 @@ class Clickable extends React.Component {
         onKeyUp,
         hideDefaultFocusRing,
         light,
-        disabled
-      } = _this$props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+        disabled,
+        tabIndex
+      } = props,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded);
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
     const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
     if (beforeNav) {
@@ -424,8 +424,9 @@ class Clickable extends React.Component {
         safeWithNav: safeWithNav,
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
-        disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
+        disabled: disabled,
+        tabIndex: tabIndex
+      }, (state, childrenProps) => getCorrectTag(state, router, _extends({}, restProps, {
         "data-test-id": testId,
         style: getStyle(state)
       }, childrenProps)));
@@ -437,17 +438,16 @@ class Clickable extends React.Component {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         target: target,
-        disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
+        disabled: disabled,
+        tabIndex: tabIndex
+      }, (state, childrenProps) => getCorrectTag(state, router, _extends({}, restProps, {
         "data-test-id": testId,
         style: getStyle(state)
       }, childrenProps)));
     }
-  }
-  render() {
-    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-}
+  };
+  return React.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+});
 Clickable.defaultProps = {
   light: false,
   disabled: false