@khanacademy/wonder-blocks-icon-button - npm Package Compare versions

Comparing version 4.0.14 to 4.1.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-icon-button
 
+## 4.1.0
+
+### Minor Changes
+
+-   0992ff2b: Add ref forwarding to Button and IconButton
+
+### Patch Changes
+
+-   Updated dependencies [c37b99aa]
+-   Updated dependencies [c4cef3e6]
+    -   @khanacademy/wonder-blocks-core@5.3.0
+    -   @khanacademy/wonder-blocks-clickable@3.1.1
+    -   @khanacademy/wonder-blocks-icon@2.0.14
+
 ## 4.0.14
@@ -4,0 +18,0 @@

dist/components/icon-button-core.d.ts

 import * as React from "react";
+import { Link } from "react-router-dom";
 import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
@@ -13,6 +14,3 @@ import type { SharedProps } from "./icon-button";
 };
-export default class IconButtonCore extends React.Component<Props> {
-    renderInner(router: any): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};
+declare const IconButtonCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
+export default IconButtonCore;

dist/components/icon-button.d.ts

 import * as React from "react";
 import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import { Link } from "react-router-dom";
 export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
@@ -13,3 +14,3 @@ /**
      */
-    color: "default" | "destructive";
+    color?: "default" | "destructive";
     /**
@@ -25,11 +26,11 @@ * The kind of the icon button, either primary, secondary, or tertiary.
      */
-    kind: "primary" | "secondary" | "tertiary";
+    kind?: "primary" | "secondary" | "tertiary";
     /**
      * Whether the icon button is on a dark/colored background.
      */
-    light: boolean;
+    light?: boolean;
     /**
      * Whether the icon button is disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
@@ -95,8 +96,2 @@ * Test ID used for e2e testing.
 };
-type DefaultProps = {
-    color: SharedProps["color"];
-    kind: SharedProps["kind"];
-    light: SharedProps["light"];
-    disabled: SharedProps["disabled"];
-};
 /**
@@ -139,7 +134,3 @@ * An IconButton is a button whose contents are an SVG image.
  */
-export default class IconButton extends React.Component<SharedProps> {
-    static defaultProps: DefaultProps;
-    renderClickableBehavior(router: any): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};
+declare const IconButton: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
+export default IconButton;

dist/es/index.js

@@ -46,20 +46,19 @@ import * as React from 'react';
 const StyledLink = addStyle(Link);
-class IconButtonCore extends React.Component {
-  renderInner(router) {
-    const _this$props = this.props,
-      {
-        skipClientNav,
-        color,
-        disabled,
-        focused,
-        hovered,
-        href,
-        icon,
-        kind,
-        light,
-        pressed,
-        style,
-        testId
-      } = _this$props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+const IconButtonCore = React.forwardRef((props, ref) => {
+  const {
+      skipClientNav,
+      color,
+      disabled,
+      focused,
+      hovered,
+      href,
+      icon,
+      kind = "primary",
+      light = false,
+      pressed,
+      style,
+      testId
+    } = props,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const renderInner = router => {
     const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
@@ -79,5 +78,7 @@ const buttonStyles = _generateStyles(buttonColor, kind, light);
       return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
-        to: href
+        to: href,
+        ref: ref
       }), child) : React.createElement(StyledAnchor, _extends({}, commonProps, {
-        href: href
+        href: href,
+        ref: ref
       }), child);
@@ -88,10 +89,9 @@ } else {
       }, commonProps, {
-        disabled: disabled
+        disabled: disabled,
+        ref: ref
       }), child);
     }
-  }
-  render() {
-    return React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-}
+  };
+  return React.createElement(__RouterContext.Consumer, null, router => renderInner(router));
+});
 const sharedStyles = StyleSheet.create({
@@ -177,17 +177,20 @@ shared: {
 
-const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target"];
-class IconButton extends React.Component {
-  renderClickableBehavior(router) {
-    const _this$props = this.props,
-      {
-        onClick,
-        href,
-        skipClientNav,
-        tabIndex,
-        target
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target", "color", "kind", "light", "disabled"];
+const IconButton = React.forwardRef((props, ref) => {
+  const {
+      onClick,
+      href,
+      skipClientNav,
+      tabIndex,
+      target,
+      color = "default",
+      kind = "primary",
+      light = false,
+      disabled = false
+    } = props,
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const renderClickableBehavior = router => {
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
     return React.createElement(ClickableBehavior, {
-      disabled: sharedProps.disabled,
+      disabled: disabled,
       href: href,
@@ -200,20 +203,17 @@ onClick: onClick,
       return React.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
+        color: color,
+        kind: kind,
+        light: light,
+        disabled: disabled,
         skipClientNav: skipClientNav,
         href: href,
         target: target,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        ref: ref
       }));
     });
-  }
-  render() {
-    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-}
-IconButton.defaultProps = {
-  color: "default",
-  kind: "primary",
-  light: false,
-  disabled: false
-};
+  };
+  return React.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+});
 
 export { IconButton as default };

dist/index.js

@@ -72,20 +72,19 @@ 'use strict';
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
-class IconButtonCore extends React__namespace.Component {
-  renderInner(router) {
-    const _this$props = this.props,
-      {
-        skipClientNav,
-        color,
-        disabled,
-        focused,
-        hovered,
-        href,
-        icon,
-        kind,
-        light,
-        pressed,
-        style,
-        testId
-      } = _this$props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+const IconButtonCore = React__namespace.forwardRef((props, ref) => {
+  const {
+      skipClientNav,
+      color,
+      disabled,
+      focused,
+      hovered,
+      href,
+      icon,
+      kind = "primary",
+      light = false,
+      pressed,
+      style,
+      testId
+    } = props,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const renderInner = router => {
     const buttonColor = color === "destructive" ? Color.SemanticColor.controlDestructive : Color.SemanticColor.controlDefault;
@@ -105,5 +104,7 @@ const buttonStyles = _generateStyles(buttonColor, kind, light);
       return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
-        to: href
+        to: href,
+        ref: ref
       }), child) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
-        href: href
+        href: href,
+        ref: ref
       }), child);
@@ -114,10 +115,9 @@ } else {
       }, commonProps, {
-        disabled: disabled
+        disabled: disabled,
+        ref: ref
       }), child);
     }
-  }
-  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 sharedStyles = aphrodite.StyleSheet.create({
@@ -203,17 +203,20 @@ shared: {
 
-const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target"];
-class IconButton extends React__namespace.Component {
-  renderClickableBehavior(router) {
-    const _this$props = this.props,
-      {
-        onClick,
-        href,
-        skipClientNav,
-        tabIndex,
-        target
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target", "color", "kind", "light", "disabled"];
+const IconButton = React__namespace.forwardRef((props, ref) => {
+  const {
+      onClick,
+      href,
+      skipClientNav,
+      tabIndex,
+      target,
+      color = "default",
+      kind = "primary",
+      light = false,
+      disabled = false
+    } = props,
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const renderClickableBehavior = router => {
     const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
     return React__namespace.createElement(ClickableBehavior, {
-      disabled: sharedProps.disabled,
+      disabled: disabled,
       href: href,
@@ -226,20 +229,17 @@ onClick: onClick,
       return React__namespace.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
+        color: color,
+        kind: kind,
+        light: light,
+        disabled: disabled,
         skipClientNav: skipClientNav,
         href: href,
         target: target,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        ref: ref
       }));
     });
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-}
-IconButton.defaultProps = {
-  color: "default",
-  kind: "primary",
-  light: false,
-  disabled: false
-};
+  };
+  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+});
 
 module.exports = IconButton;

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "4.0.14",
+  "version": "4.1.0",
   "design": "v1",
@@ -19,6 +19,6 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.1.0",
+    "@khanacademy/wonder-blocks-clickable": "^3.1.1",
     "@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.0",
+    "@khanacademy/wonder-blocks-icon": "^2.0.14"
   },
@@ -25,0 +25,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

219900

increased by1.1%

Lines of code

1220

increased by0.99%

Dependency changes

• Updated@khanacademy/wonder-blocks-clickable@^3.1.1

• Updated@khanacademy/wonder-blocks-core@^5.3.0

• Updated@khanacademy/wonder-blocks-icon@^2.0.14