@khanacademy/wonder-blocks-link 4.2.8 → 4.3.1

package/dist/index.js

@@ -70,27 +70,26 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
-class LinkCore extends React__namespace.Component {
-  renderInner(router) {
-    const _this$props = this.props,
-      {
+const LinkCore = React__namespace.forwardRef(function LinkCore(props, ref) {
+  const renderInner = router => {
+    const {
         children,
         skipClientNav,
         focused,
         hovered,
         href,
-        inline,
-        kind,
-        light,
-        visitable,
+        inline = false,
+        kind = "primary",
+        light = false,
+        visitable = false,
         pressed,
         style,
         testId,
         target,
         startIcon,
         endIcon
-      } = _this$props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+      } = props,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
     const linkStyles = _generateStyles(inline, kind, light, visitable);
     const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
     const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
@@ -124,15 +123,15 @@ class LinkCore extends React__namespace.Component {
       "aria-hidden": "true"
     }) : isExternalLink && target === "_blank" && externalIcon);
     return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
-      to: href
+      to: href,
+      ref: ref
     }), linkContent) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
-      href: href
+      href: href,
+      ref: ref
     }), linkContent);
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-}
+  };
+  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderInner(router));
+});
 const styles = {};
 const linkContentStyles = aphrodite.StyleSheet.create({
   startIcon: {
@@ -222,23 +221,26 @@ const _generateStyles = (inline, kind, light, visitable) => {
   return styles[buttonType];
 };
 
-const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"];
-class Link extends React__namespace.Component {
-  renderClickableBehavior(router) {
-    const _this$props = this.props,
-      {
-        onClick,
-        beforeNav = undefined,
-        safeWithNav,
-        href,
-        skipClientNav,
-        children,
-        tabIndex,
-        onKeyDown,
-        onKeyUp,
-        target = undefined
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target", "inline", "kind", "light", "visitable"];
+const Link = React__namespace.forwardRef(function Link(props, ref) {
+  const {
+      onClick,
+      beforeNav = undefined,
+      safeWithNav,
+      href,
+      skipClientNav,
+      children,
+      tabIndex,
+      onKeyDown,
+      onKeyUp,
+      target = undefined,
+      inline = false,
+      kind = "primary",
+      light = false,
+      visitable = false
+    } = props,
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const renderClickableBehavior = router => {
     const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
     if (beforeNav) {
       return React__namespace.createElement(ClickableBehavior, {
@@ -256,7 +258,12 @@ class Link extends React__namespace.Component {
           skipClientNav: skipClientNav,
           href: href,
           target: target,
-          tabIndex: tabIndex
+          tabIndex: tabIndex,
+          inline: inline,
+          kind: kind,
+          light: light,
+          visitable: visitable,
+          ref: ref
         }), children);
       });
     } else {
@@ -275,20 +282,17 @@ class Link extends React__namespace.Component {
           skipClientNav: skipClientNav,
           href: href,
           target: target,
-          tabIndex: tabIndex
+          tabIndex: tabIndex,
+          inline: inline,
+          kind: kind,
+          light: light,
+          visitable: visitable,
+          ref: ref
         }), children);
       });
     }
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-}
-Link.defaultProps = {
-  inline: false,
-  kind: "primary",
-  light: false,
-  visitable: false
-};
+  };
+  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+});
 
 module.exports = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "4.2.8",
+  "version": "4.3.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,10 +16,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.1.0",
+    "@khanacademy/wonder-blocks-clickable": "^3.1.2",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.2.3",
-    "@khanacademy/wonder-blocks-icon": "^2.0.13",
+    "@khanacademy/wonder-blocks-core": "^5.3.1",
+    "@khanacademy/wonder-blocks-icon": "^2.0.15",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1"
   },
   "peerDependencies": {

package/src/components/link-core.tsx

@@ -26,18 +26,21 @@ type Props = SharedProps &
 const StyledAnchor = addStyle("a");
 const StyledLink = addStyle(Link);
 
-export default class LinkCore extends React.Component<Props> {
-    renderInner(router: any): React.ReactNode {
+const LinkCore = React.forwardRef(function LinkCore(
+    props: Props,
+    ref: React.ForwardedRef<typeof Link | HTMLAnchorElement>,
+) {
+    const renderInner = (router: any): React.ReactNode => {
         const {
             children,
             skipClientNav,
             focused,
             hovered,
             href,
-            inline,
-            kind,
-            light,
-            visitable,
+            inline = false,
+            kind = "primary",
+            light = false,
+            visitable = false,
             pressed,
             style,
             testId,
@@ -46,7 +49,7 @@ export default class LinkCore extends React.Component<Props> {
             startIcon,
             endIcon,
             ...restProps
-        } = this.props;
+        } = props;
 
         const linkStyles = _generateStyles(inline, kind, light, visitable);
         const restingStyles = inline
@@ -123,24 +126,30 @@ export default class LinkCore extends React.Component<Props> {
         );
 
         return router && !skipClientNav && isClientSideUrl(href) ? (
-            <StyledLink {...commonProps} to={href}>
+            <StyledLink
+                {...commonProps}
+                to={href}
+                ref={ref as React.ForwardedRef<typeof Link>}
+            >
                 {linkContent}
             </StyledLink>
         ) : (
-            <StyledAnchor {...commonProps} href={href}>
+            <StyledAnchor
+                {...commonProps}
+                href={href}
+                ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+            >
                 {linkContent}
             </StyledAnchor>
         );
-    }
+    };
 
-    render(): React.ReactNode {
-        return (
-            <__RouterContext.Consumer>
-                {(router) => this.renderInner(router)}
-            </__RouterContext.Consumer>
-        );
-    }
-}
+    return (
+        <__RouterContext.Consumer>
+            {(router) => renderInner(router)}
+        </__RouterContext.Consumer>
+    );
+});
 
 const styles: Record<string, any> = {};
 
@@ -276,3 +285,5 @@ const _generateStyles = (
     styles[buttonType] = StyleSheet.create(newStyles);
     return styles[buttonType];
 };
+
+export default LinkCore;

package/src/components/link.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import {__RouterContext} from "react-router";
+import {Link as ReactRouterLink} from "react-router-dom";
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
@@ -26,20 +27,20 @@ export type SharedProps = AriaProps & {
      * This styles the link with an underline to distinguish it
      * from surrounding text.
      */
-    inline: boolean;
+    inline?: boolean;
     /**
      * Kind of Link. Note: Secondary light Links are not supported.
      */
-    kind: "primary" | "secondary";
+    kind?: "primary" | "secondary";
     /**
      * Whether the button is on a dark/colored background.
      */
-    light: boolean;
+    light?: boolean;
     /**
      * Whether the link should change color once it's visited.
      * secondary or primary (light) links are not allowed to be visitable.
      */
-    visitable: boolean;
+    visitable?: boolean;
     /**
      * Specifies the type of relationship between the current document and the
      * linked document. Should only be used when `href` is specified. This
@@ -153,13 +154,6 @@ export type SharedProps = AriaProps & {
     endIcon?: IconAsset;
 };
 
-type DefaultProps = {
-    inline: SharedProps["inline"];
-    kind: SharedProps["kind"];
-    light: SharedProps["light"];
-    visitable: SharedProps["visitable"];
-};
-
 /**
  * Reusable link component.
  *
@@ -178,29 +172,29 @@ type DefaultProps = {
  * </Link>
  * ```
  */
-export default class Link extends React.Component<SharedProps> {
-    static defaultProps: DefaultProps = {
-        inline: false,
-        kind: "primary",
-        light: false,
-        visitable: false,
-    };
-
-    renderClickableBehavior(router: any): React.ReactNode {
-        const {
-            onClick,
-            beforeNav = undefined,
-            safeWithNav,
-            href,
-            skipClientNav,
-            children,
-            tabIndex,
-            onKeyDown,
-            onKeyUp,
-            target = undefined,
-            ...sharedProps
-        } = this.props;
+const Link = React.forwardRef(function Link(
+    props: SharedProps,
+    ref: React.ForwardedRef<typeof ReactRouterLink | HTMLAnchorElement>,
+) {
+    const {
+        onClick,
+        beforeNav = undefined,
+        safeWithNav,
+        href,
+        skipClientNav,
+        children,
+        tabIndex,
+        onKeyDown,
+        onKeyUp,
+        target = undefined,
+        inline = false,
+        kind = "primary",
+        light = false,
+        visitable = false,
+        ...sharedProps
+    } = props;
 
+    const renderClickableBehavior = (router: any): React.ReactNode => {
         const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
@@ -229,6 +223,11 @@ export default class Link extends React.Component<SharedProps> {
                                 href={href}
                                 target={target}
                                 tabIndex={tabIndex}
+                                inline={inline}
+                                kind={kind}
+                                light={light}
+                                visitable={visitable}
+                                ref={ref}
                             >
                                 {children}
                             </LinkCore>
@@ -258,6 +257,11 @@ export default class Link extends React.Component<SharedProps> {
                                 href={href}
                                 target={target}
                                 tabIndex={tabIndex}
+                                inline={inline}
+                                kind={kind}
+                                light={light}
+                                visitable={visitable}
+                                ref={ref}
                             >
                                 {children}
                             </LinkCore>
@@ -266,13 +270,13 @@ export default class Link extends React.Component<SharedProps> {
                 </ClickableBehavior>
             );
         }
-    }
+    };
 
-    render(): React.ReactNode {
-        return (
-            <__RouterContext.Consumer>
-                {(router) => this.renderClickableBehavior(router)}
-            </__RouterContext.Consumer>
-        );
-    }
-}
+    return (
+        <__RouterContext.Consumer>
+            {(router) => renderClickableBehavior(router)}
+        </__RouterContext.Consumer>
+    );
+});
+
+export default Link;