@khanacademy/wonder-blocks-clickable 3.0.13 → 3.1.0

package/dist/index.js

@@ -391,41 +391,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 = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
-class Clickable extends React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement(StyledButton, _extends({}, commonProps, {
+        type: "button",
+        "aria-disabled": props.disabled,
+        ref: ref
+      }), props.children(clickableState));
+    }
+  };
+  const renderClickableBehavior = router => {
+    const {
         href,
         onClick,
         skipClientNav,
@@ -438,9 +437,10 @@ class Clickable extends React__namespace.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) {
@@ -451,8 +451,9 @@ class Clickable extends React__namespace.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)));
@@ -464,17 +465,16 @@ class Clickable extends React__namespace.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__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-}
+  };
+  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+});
 Clickable.defaultProps = {
   light: false,
   disabled: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "3.0.13",
+  "version": "3.1.0",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",

package/src/components/__tests__/clickable.test.tsx

@@ -506,6 +506,84 @@ describe("Clickable", () => {
         expect(button).toHaveFocus();
     });
 
+    test("should not have a tabIndex if one is not set", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Clickable testId="clickable-button">
+                {(eventState: any) => <h1>Click Me!</h1>}
+            </Clickable>,
+        );
+
+        const button = screen.getByTestId("clickable-button");
+
+        // Assert
+        expect(button).not.toHaveAttribute("tabIndex");
+    });
+
+    test("should have the tabIndex that is passed in", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Clickable testId="clickable-button" tabIndex={1}>
+                {(eventState: any) => <h1>Click Me!</h1>}
+            </Clickable>,
+        );
+
+        const button = screen.getByTestId("clickable-button");
+
+        // Assert
+        expect(button).toHaveAttribute("tabIndex", "1");
+    });
+
+    test("should have the tabIndex that is passed in", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Clickable testId="clickable-button" tabIndex={1}>
+                {(eventState: any) => <h1>Click Me!</h1>}
+            </Clickable>,
+        );
+
+        const button = screen.getByTestId("clickable-button");
+
+        // Assert
+        expect(button).toHaveAttribute("tabIndex", "1");
+    });
+
+    test("forwards the ref to the clickable button element", () => {
+        // Arrange
+        const ref: React.RefObject<HTMLButtonElement> = React.createRef();
+
+        // Act
+        render(
+            <Clickable testId="clickable-button" ref={ref}>
+                {(eventState: any) => <h1>Click Me!</h1>}
+            </Clickable>,
+        );
+
+        // Assert
+        expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    test("forwards the ref to the clickable anchor element ", () => {
+        // Arrange
+        const ref: React.RefObject<HTMLAnchorElement> = React.createRef();
+
+        // Act
+        render(
+            <Clickable href="/test-url" testId="clickable-anchor" ref={ref}>
+                {(eventState: any) => <h1>Click Me!</h1>}
+            </Clickable>,
+        );
+
+        // Assert
+        expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    });
+
     describe("raw events", () => {
         /**
          * Clickable expect a function as children so we create a simple wrapper to

package/src/components/clickable.tsx

@@ -47,11 +47,11 @@ type Props =
          * Sets the default focus ring color to white, instead of blue.
          * Defaults to false.
          */
-        light: boolean;
+        light?: boolean;
         /**
          * Disables or enables the child; defaults to false
          */
-        disabled: boolean;
+        disabled?: boolean;
         /**
          * An optional id attribute.
          */
@@ -94,6 +94,10 @@ type Props =
          * TODO(WB-1262): only allow this prop when `href` is also set.t
          */
         target?: "_blank";
+        /**
+         * Set the tabindex attribute on the rendered element.
+         */
+        tabIndex?: number;
         /**
          * Run async code before navigating. If the promise returned rejects then
          * navigation will not occur.
@@ -114,11 +118,6 @@ type Props =
         safeWithNav?: () => Promise<unknown>;
     };
 
-type DefaultProps = {
-    light: Props["light"];
-    disabled: Props["disabled"];
-};
-
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
@@ -156,49 +155,50 @@ const StyledLink = addStyle(Link);
  * </Clickable>
  * ```
  */
-export default class Clickable extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        light: false,
-        disabled: false,
-    };
 
-    getCorrectTag: (
+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 = this.props.href && !this.props.disabled;
+        const activeHref = props.href && !props.disabled;
         const useClient =
-            router &&
-            !this.props.skipClientNav &&
-            isClientSideUrl(this.props.href || "");
+            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 && this.props.href) {
+        if (activeHref && useClient && props.href) {
             return (
                 <StyledLink
                     {...commonProps}
-                    to={this.props.href}
-                    role={this.props.role}
-                    target={this.props.target || undefined}
-                    aria-disabled={this.props.disabled ? "true" : undefined}
+                    to={props.href}
+                    role={props.role}
+                    target={props.target || undefined}
+                    aria-disabled={props.disabled ? "true" : undefined}
+                    ref={ref as React.Ref<typeof Link>}
                 >
-                    {this.props.children(clickableState)}
+                    {props.children(clickableState)}
                 </StyledLink>
             );
         } else if (activeHref && !useClient) {
             return (
                 <StyledAnchor
                     {...commonProps}
-                    href={this.props.href}
-                    role={this.props.role}
-                    target={this.props.target || undefined}
-                    aria-disabled={this.props.disabled ? "true" : undefined}
+                    href={props.href}
+                    role={props.role}
+                    target={props.target || undefined}
+                    aria-disabled={props.disabled ? "true" : undefined}
+                    ref={ref as React.Ref<HTMLAnchorElement>}
                 >
-                    {this.props.children(clickableState)}
+                    {props.children(clickableState)}
                 </StyledAnchor>
             );
         } else {
@@ -206,15 +206,18 @@ export default class Clickable extends React.Component<Props> {
                 <StyledButton
                     {...commonProps}
                     type="button"
-                    aria-disabled={this.props.disabled}
+                    aria-disabled={props.disabled}
+                    ref={ref as React.Ref<HTMLButtonElement>}
                 >
-                    {this.props.children(clickableState)}
+                    {props.children(clickableState)}
                 </StyledButton>
             );
         }
     };
 
-    renderClickableBehavior(router: any): React.ReactNode {
+    const renderClickableBehavior: (router: any) => React.ReactNode = (
+        router: any,
+    ) => {
         const {
             href,
             onClick,
@@ -229,8 +232,9 @@ export default class Clickable extends React.Component<Props> {
             hideDefaultFocusRing,
             light,
             disabled,
+            tabIndex,
             ...restProps
-        } = this.props;
+        } = props;
         const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
@@ -257,9 +261,10 @@ export default class Clickable extends React.Component<Props> {
                     onKeyDown={onKeyDown}
                     onKeyUp={onKeyUp}
                     disabled={disabled}
+                    tabIndex={tabIndex}
                 >
                     {(state, childrenProps) =>
-                        this.getCorrectTag(state, router, {
+                        getCorrectTag(state, router, {
                             ...restProps,
                             "data-test-id": testId,
                             style: getStyle(state),
@@ -278,9 +283,10 @@ export default class Clickable extends React.Component<Props> {
                     onKeyUp={onKeyUp}
                     target={target}
                     disabled={disabled}
+                    tabIndex={tabIndex}
                 >
                     {(state, childrenProps) =>
-                        this.getCorrectTag(state, router, {
+                        getCorrectTag(state, router, {
                             ...restProps,
                             "data-test-id": testId,
                             style: getStyle(state),
@@ -290,16 +296,21 @@ export default class Clickable extends React.Component<Props> {
                 </ClickableBehavior>
             );
         }
-    }
+    };
 
-    render(): React.ReactNode {
-        return (
-            <__RouterContext.Consumer>
-                {(router) => this.renderClickableBehavior(router)}
-            </__RouterContext.Consumer>
-        );
-    }
-}
+    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({