@chakra-ui/button - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

CHANGELOG.md

 # Change Log
 
+## 1.5.1
+
+### Patch Changes
+
+- [#5075](https://github.com/chakra-ui/chakra-ui/pull/5075)
+  [`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)
+  Thanks [@cschroeter](https://github.com/cschroeter)! - Update babel config to
+  transpile soruces for older browsers. This fixes issues with CRA and
+  Storybook.
+- Updated dependencies
+  [[`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)]:
+  - @chakra-ui/hooks@1.7.1
+  - @chakra-ui/react-utils@1.2.1
+  - @chakra-ui/spinner@1.2.1
+  - @chakra-ui/utils@1.9.1
+
 ## 1.5.0
@@ -4,0 +20,0 @@

dist/chakra-ui-button.cjs.dev.js

@@ -32,2 +32,17 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function _extends() {
@@ -51,27 +66,32 @@ _extends = Object.assign || function (target) {
 
-const [ButtonGroupProvider, useButtonGroup] = reactUtils.createContext({
+var _excluded$4 = ["size", "colorScheme", "variant", "className", "spacing", "isAttached", "isDisabled"];
+
+var _createContext = reactUtils.createContext({
   strict: false,
   name: "ButtonGroupContext"
-});
-const ButtonGroup = /*#__PURE__*/system.forwardRef((props, ref) => {
-  const {
-    size,
-    colorScheme,
-    variant,
-    className,
-    spacing = "0.5rem",
-    isAttached,
-    isDisabled,
-    ...rest
-  } = props;
+}),
+    ButtonGroupProvider = _createContext[0],
+    useButtonGroup = _createContext[1];
+var ButtonGroup = /*#__PURE__*/system.forwardRef(function (props, ref) {
+  var size = props.size,
+      colorScheme = props.colorScheme,
+      variant = props.variant,
+      className = props.className,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? "0.5rem" : _props$spacing,
+      isAttached = props.isAttached,
+      isDisabled = props.isDisabled,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$4);
 
-  const _className = utils.cx("chakra-button__group", className);
+  var _className = utils.cx("chakra-button__group", className);
 
-  const context = React__namespace.useMemo(() => ({
-    size,
-    colorScheme,
-    variant,
-    isDisabled
-  }), [size, colorScheme, variant, isDisabled]);
-  let groupStyles = {
+  var context = React__namespace.useMemo(function () {
+    return {
+      size: size,
+      colorScheme: colorScheme,
+      variant: variant,
+      isDisabled: isDisabled
+    };
+  }, [size, colorScheme, variant, isDisabled]);
+  var groupStyles = {
     display: "inline-flex"
@@ -81,3 +101,3 @@ };
   if (isAttached) {
-    groupStyles = { ...groupStyles,
+    groupStyles = _extends({}, groupStyles, {
       "> *:first-of-type:not(:last-of-type)": {
@@ -92,9 +112,9 @@ borderEndRadius: 0
       }
-    };
+    });
   } else {
-    groupStyles = { ...groupStyles,
+    groupStyles = _extends({}, groupStyles, {
       "& > *:not(style) ~ *:not(style)": {
         marginStart: spacing
       }
-    };
+    });
   }
@@ -116,29 +136,29 @@
 
-const ButtonSpinner = props => {
-  const {
-    label,
-    placement,
-    spacing,
-    children = /*#__PURE__*/React__namespace.createElement(spinner.Spinner, {
-      color: "currentColor",
-      width: "1em",
-      height: "1em"
-    }),
-    className,
-    __css,
-    ...rest
-  } = props;
+var _excluded$3 = ["label", "placement", "spacing", "children", "className", "__css"];
+var ButtonSpinner = function ButtonSpinner(props) {
+  var label = props.label,
+      placement = props.placement;
+      props.spacing;
+      var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__namespace.createElement(spinner.Spinner, {
+    color: "currentColor",
+    width: "1em",
+    height: "1em"
+  }) : _props$children,
+      className = props.className,
+      __css = props.__css,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$3);
 
-  const _className = utils.cx("chakra-button__spinner", className);
+  var _className = utils.cx("chakra-button__spinner", className);
 
-  const marginProp = placement === "start" ? "marginEnd" : "marginStart";
-  const spinnerStyles = React__namespace.useMemo(() => ({
-    display: "flex",
-    alignItems: "center",
-    position: label ? "relative" : "absolute",
-    [marginProp]: label ? "0.5rem" : 0,
-    fontSize: "1em",
-    lineHeight: "normal",
-    ...__css
-  }), [__css, label, marginProp]);
+  var marginProp = placement === "start" ? "marginEnd" : "marginStart";
+  var spinnerStyles = React__namespace.useMemo(function () {
+    var _extends2;
+
+    return _extends((_extends2 = {
+      display: "flex",
+      alignItems: "center",
+      position: label ? "relative" : "absolute"
+    }, _extends2[marginProp] = label ? "0.5rem" : 0, _extends2.fontSize = "1em", _extends2.lineHeight = "normal", _extends2), __css);
+  }, [__css, label, marginProp]);
   return /*#__PURE__*/React__namespace.createElement(system.chakra.div, _extends({
@@ -155,10 +175,9 @@ className: _className
 
-const ButtonIcon = props => {
-  const {
-    children,
-    className,
-    ...rest
-  } = props;
+var _excluded$2 = ["children", "className"];
+var ButtonIcon = function ButtonIcon(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
 
-  const _children = /*#__PURE__*/React__namespace.isValidElement(children) ? /*#__PURE__*/React__namespace.cloneElement(children, {
+  var _children = /*#__PURE__*/React__namespace.isValidElement(children) ? /*#__PURE__*/React__namespace.cloneElement(children, {
     "aria-hidden": true,
@@ -168,3 +187,3 @@ focusable: false
 
-  const _className = utils.cx("chakra-button__icon", className);
+  var _className = utils.cx("chakra-button__icon", className);
 
@@ -185,36 +204,41 @@ return /*#__PURE__*/React__namespace.createElement(system.chakra.span, _extends({
 function useButtonType(value) {
-  const [isButton, setIsButton] = React__namespace.useState(!value);
-  const refCallback = React__namespace.useCallback(node => {
+  var _React$useState = React__namespace.useState(!value),
+      isButton = _React$useState[0],
+      setIsButton = _React$useState[1];
+
+  var refCallback = React__namespace.useCallback(function (node) {
     if (!node) return;
     setIsButton(node.tagName === "BUTTON");
   }, []);
-  const type = isButton ? "button" : undefined;
+  var type = isButton ? "button" : undefined;
   return {
     ref: refCallback,
-    type
+    type: type
   };
 }
 
-const Button = /*#__PURE__*/system.forwardRef((props, ref) => {
-  const group = useButtonGroup();
-  const styles = system.useStyleConfig("Button", { ...group,
-    ...props
-  });
-  const {
-    isDisabled = group?.isDisabled,
-    isLoading,
-    isActive,
-    isFullWidth,
-    children,
-    leftIcon,
-    rightIcon,
-    loadingText,
-    iconSpacing = "0.5rem",
-    type,
-    spinner,
-    spinnerPlacement = "start",
-    className,
-    as,
-    ...rest
-  } = system.omitThemingProps(props);
+var _excluded$1 = ["isDisabled", "isLoading", "isActive", "isFullWidth", "children", "leftIcon", "rightIcon", "loadingText", "iconSpacing", "type", "spinner", "spinnerPlacement", "className", "as"];
+var Button = /*#__PURE__*/system.forwardRef(function (props, ref) {
+  var group = useButtonGroup();
+  var styles = system.useStyleConfig("Button", _extends({}, group, props));
+
+  var _omitThemingProps = system.omitThemingProps(props),
+      _omitThemingProps$isD = _omitThemingProps.isDisabled,
+      isDisabled = _omitThemingProps$isD === void 0 ? group == null ? void 0 : group.isDisabled : _omitThemingProps$isD,
+      isLoading = _omitThemingProps.isLoading,
+      isActive = _omitThemingProps.isActive,
+      isFullWidth = _omitThemingProps.isFullWidth,
+      children = _omitThemingProps.children,
+      leftIcon = _omitThemingProps.leftIcon,
+      rightIcon = _omitThemingProps.rightIcon,
+      loadingText = _omitThemingProps.loadingText,
+      _omitThemingProps$ico = _omitThemingProps.iconSpacing,
+      iconSpacing = _omitThemingProps$ico === void 0 ? "0.5rem" : _omitThemingProps$ico,
+      type = _omitThemingProps.type,
+      spinner = _omitThemingProps.spinner,
+      _omitThemingProps$spi = _omitThemingProps.spinnerPlacement,
+      spinnerPlacement = _omitThemingProps$spi === void 0 ? "start" : _omitThemingProps$spi,
+      className = _omitThemingProps.className,
+      as = _omitThemingProps.as,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$1);
   /**
@@ -227,8 +251,11 @@ * When button is used within ButtonGroup (i.e flushed with sibling buttons),
 
-  const buttonStyles = React__namespace.useMemo(() => {
-    const _focus = utils.mergeWith({}, styles?.["_focus"] ?? {}, {
+
+  var buttonStyles = React__namespace.useMemo(function () {
+    var _styles$_focus;
+
+    var _focus = utils.mergeWith({}, (_styles$_focus = styles == null ? void 0 : styles["_focus"]) != null ? _styles$_focus : {}, {
       zIndex: 1
     });
 
-    return {
+    return _extends({
       display: "inline-flex",
@@ -243,18 +270,17 @@ appearance: "none",
       outline: "none",
-      width: isFullWidth ? "100%" : "auto",
-      ...styles,
-      ...(!!group && {
-        _focus
-      })
-    };
+      width: isFullWidth ? "100%" : "auto"
+    }, styles, !!group && {
+      _focus: _focus
+    });
   }, [styles, group, isFullWidth]);
-  const {
-    ref: _ref,
-    type: defaultType
-  } = useButtonType(as);
-  const contentProps = {
-    rightIcon,
-    leftIcon,
-    iconSpacing,
-    children
+
+  var _useButtonType = useButtonType(as),
+      _ref = _useButtonType.ref,
+      defaultType = _useButtonType.type;
+
+  var contentProps = {
+    rightIcon: rightIcon,
+    leftIcon: leftIcon,
+    iconSpacing: iconSpacing,
+    children: children
   };
@@ -265,3 +291,3 @@ return /*#__PURE__*/React__namespace.createElement(system.chakra.button, _extends({
     as: as,
-    type: type ?? defaultType,
+    type: type != null ? type : defaultType,
     "data-active": utils.dataAttr(isActive),
@@ -289,8 +315,6 @@ "data-loading": utils.dataAttr(isLoading),
 function ButtonContent(props) {
-  const {
-    leftIcon,
-    rightIcon,
-    children,
-    iconSpacing
-  } = props;
+  var leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      children = props.children,
+      iconSpacing = props.iconSpacing;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, leftIcon && /*#__PURE__*/React__namespace.createElement(ButtonIcon, {
@@ -303,10 +327,9 @@ marginEnd: iconSpacing
 
-const IconButton = /*#__PURE__*/system.forwardRef((props, ref) => {
-  const {
-    icon,
-    children,
-    isRound,
-    "aria-label": ariaLabel,
-    ...rest
-  } = props;
+var _excluded = ["icon", "children", "isRound", "aria-label"];
+var IconButton = /*#__PURE__*/system.forwardRef(function (props, ref) {
+  var icon = props.icon,
+      children = props.children,
+      isRound = props.isRound,
+      ariaLabel = props["aria-label"],
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
   /**
@@ -316,5 +339,6 @@ * Passing the icon as prop or children should work
 
-  const element = icon || children;
 
-  const _children = /*#__PURE__*/React__namespace.isValidElement(element) ? /*#__PURE__*/React__namespace.cloneElement(element, {
+  var element = icon || children;
+
+  var _children = /*#__PURE__*/React__namespace.isValidElement(element) ? /*#__PURE__*/React__namespace.cloneElement(element, {
     "aria-hidden": true,
@@ -321,0 +345,0 @@ focusable: false

dist/chakra-ui-button.cjs.prod.js

@@ -32,2 +32,17 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function _extends() {
@@ -51,27 +66,32 @@ _extends = Object.assign || function (target) {
 
-const [ButtonGroupProvider, useButtonGroup] = reactUtils.createContext({
+var _excluded$4 = ["size", "colorScheme", "variant", "className", "spacing", "isAttached", "isDisabled"];
+
+var _createContext = reactUtils.createContext({
   strict: false,
   name: "ButtonGroupContext"
-});
-const ButtonGroup = /*#__PURE__*/system.forwardRef((props, ref) => {
-  const {
-    size,
-    colorScheme,
-    variant,
-    className,
-    spacing = "0.5rem",
-    isAttached,
-    isDisabled,
-    ...rest
-  } = props;
+}),
+    ButtonGroupProvider = _createContext[0],
+    useButtonGroup = _createContext[1];
+var ButtonGroup = /*#__PURE__*/system.forwardRef(function (props, ref) {
+  var size = props.size,
+      colorScheme = props.colorScheme,
+      variant = props.variant,
+      className = props.className,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? "0.5rem" : _props$spacing,
+      isAttached = props.isAttached,
+      isDisabled = props.isDisabled,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$4);
 
-  const _className = utils.cx("chakra-button__group", className);
+  var _className = utils.cx("chakra-button__group", className);
 
-  const context = React__namespace.useMemo(() => ({
-    size,
-    colorScheme,
-    variant,
-    isDisabled
-  }), [size, colorScheme, variant, isDisabled]);
-  let groupStyles = {
+  var context = React__namespace.useMemo(function () {
+    return {
+      size: size,
+      colorScheme: colorScheme,
+      variant: variant,
+      isDisabled: isDisabled
+    };
+  }, [size, colorScheme, variant, isDisabled]);
+  var groupStyles = {
     display: "inline-flex"
@@ -81,3 +101,3 @@ };
   if (isAttached) {
-    groupStyles = { ...groupStyles,
+    groupStyles = _extends({}, groupStyles, {
       "> *:first-of-type:not(:last-of-type)": {
@@ -92,9 +112,9 @@ borderEndRadius: 0
       }
-    };
+    });
   } else {
-    groupStyles = { ...groupStyles,
+    groupStyles = _extends({}, groupStyles, {
       "& > *:not(style) ~ *:not(style)": {
         marginStart: spacing
       }
-    };
+    });
   }
@@ -116,29 +136,29 @@
 
-const ButtonSpinner = props => {
-  const {
-    label,
-    placement,
-    spacing,
-    children = /*#__PURE__*/React__namespace.createElement(spinner.Spinner, {
-      color: "currentColor",
-      width: "1em",
-      height: "1em"
-    }),
-    className,
-    __css,
-    ...rest
-  } = props;
+var _excluded$3 = ["label", "placement", "spacing", "children", "className", "__css"];
+var ButtonSpinner = function ButtonSpinner(props) {
+  var label = props.label,
+      placement = props.placement;
+      props.spacing;
+      var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__namespace.createElement(spinner.Spinner, {
+    color: "currentColor",
+    width: "1em",
+    height: "1em"
+  }) : _props$children,
+      className = props.className,
+      __css = props.__css,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$3);
 
-  const _className = utils.cx("chakra-button__spinner", className);
+  var _className = utils.cx("chakra-button__spinner", className);
 
-  const marginProp = placement === "start" ? "marginEnd" : "marginStart";
-  const spinnerStyles = React__namespace.useMemo(() => ({
-    display: "flex",
-    alignItems: "center",
-    position: label ? "relative" : "absolute",
-    [marginProp]: label ? "0.5rem" : 0,
-    fontSize: "1em",
-    lineHeight: "normal",
-    ...__css
-  }), [__css, label, marginProp]);
+  var marginProp = placement === "start" ? "marginEnd" : "marginStart";
+  var spinnerStyles = React__namespace.useMemo(function () {
+    var _extends2;
+
+    return _extends((_extends2 = {
+      display: "flex",
+      alignItems: "center",
+      position: label ? "relative" : "absolute"
+    }, _extends2[marginProp] = label ? "0.5rem" : 0, _extends2.fontSize = "1em", _extends2.lineHeight = "normal", _extends2), __css);
+  }, [__css, label, marginProp]);
   return /*#__PURE__*/React__namespace.createElement(system.chakra.div, _extends({
@@ -155,10 +175,9 @@ className: _className
 
-const ButtonIcon = props => {
-  const {
-    children,
-    className,
-    ...rest
-  } = props;
+var _excluded$2 = ["children", "className"];
+var ButtonIcon = function ButtonIcon(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
 
-  const _children = /*#__PURE__*/React__namespace.isValidElement(children) ? /*#__PURE__*/React__namespace.cloneElement(children, {
+  var _children = /*#__PURE__*/React__namespace.isValidElement(children) ? /*#__PURE__*/React__namespace.cloneElement(children, {
     "aria-hidden": true,
@@ -168,3 +187,3 @@ focusable: false
 
-  const _className = utils.cx("chakra-button__icon", className);
+  var _className = utils.cx("chakra-button__icon", className);
 
@@ -185,36 +204,41 @@ return /*#__PURE__*/React__namespace.createElement(system.chakra.span, _extends({
 function useButtonType(value) {
-  const [isButton, setIsButton] = React__namespace.useState(!value);
-  const refCallback = React__namespace.useCallback(node => {
+  var _React$useState = React__namespace.useState(!value),
+      isButton = _React$useState[0],
+      setIsButton = _React$useState[1];
+
+  var refCallback = React__namespace.useCallback(function (node) {
     if (!node) return;
     setIsButton(node.tagName === "BUTTON");
   }, []);
-  const type = isButton ? "button" : undefined;
+  var type = isButton ? "button" : undefined;
   return {
     ref: refCallback,
-    type
+    type: type
   };
 }
 
-const Button = /*#__PURE__*/system.forwardRef((props, ref) => {
-  const group = useButtonGroup();
-  const styles = system.useStyleConfig("Button", { ...group,
-    ...props
-  });
-  const {
-    isDisabled = group?.isDisabled,
-    isLoading,
-    isActive,
-    isFullWidth,
-    children,
-    leftIcon,
-    rightIcon,
-    loadingText,
-    iconSpacing = "0.5rem",
-    type,
-    spinner,
-    spinnerPlacement = "start",
-    className,
-    as,
-    ...rest
-  } = system.omitThemingProps(props);
+var _excluded$1 = ["isDisabled", "isLoading", "isActive", "isFullWidth", "children", "leftIcon", "rightIcon", "loadingText", "iconSpacing", "type", "spinner", "spinnerPlacement", "className", "as"];
+var Button = /*#__PURE__*/system.forwardRef(function (props, ref) {
+  var group = useButtonGroup();
+  var styles = system.useStyleConfig("Button", _extends({}, group, props));
+
+  var _omitThemingProps = system.omitThemingProps(props),
+      _omitThemingProps$isD = _omitThemingProps.isDisabled,
+      isDisabled = _omitThemingProps$isD === void 0 ? group == null ? void 0 : group.isDisabled : _omitThemingProps$isD,
+      isLoading = _omitThemingProps.isLoading,
+      isActive = _omitThemingProps.isActive,
+      isFullWidth = _omitThemingProps.isFullWidth,
+      children = _omitThemingProps.children,
+      leftIcon = _omitThemingProps.leftIcon,
+      rightIcon = _omitThemingProps.rightIcon,
+      loadingText = _omitThemingProps.loadingText,
+      _omitThemingProps$ico = _omitThemingProps.iconSpacing,
+      iconSpacing = _omitThemingProps$ico === void 0 ? "0.5rem" : _omitThemingProps$ico,
+      type = _omitThemingProps.type,
+      spinner = _omitThemingProps.spinner,
+      _omitThemingProps$spi = _omitThemingProps.spinnerPlacement,
+      spinnerPlacement = _omitThemingProps$spi === void 0 ? "start" : _omitThemingProps$spi,
+      className = _omitThemingProps.className,
+      as = _omitThemingProps.as,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$1);
   /**
@@ -227,8 +251,11 @@ * When button is used within ButtonGroup (i.e flushed with sibling buttons),
 
-  const buttonStyles = React__namespace.useMemo(() => {
-    const _focus = utils.mergeWith({}, styles?.["_focus"] ?? {}, {
+
+  var buttonStyles = React__namespace.useMemo(function () {
+    var _styles$_focus;
+
+    var _focus = utils.mergeWith({}, (_styles$_focus = styles == null ? void 0 : styles["_focus"]) != null ? _styles$_focus : {}, {
       zIndex: 1
     });
 
-    return {
+    return _extends({
       display: "inline-flex",
@@ -243,18 +270,17 @@ appearance: "none",
       outline: "none",
-      width: isFullWidth ? "100%" : "auto",
-      ...styles,
-      ...(!!group && {
-        _focus
-      })
-    };
+      width: isFullWidth ? "100%" : "auto"
+    }, styles, !!group && {
+      _focus: _focus
+    });
   }, [styles, group, isFullWidth]);
-  const {
-    ref: _ref,
-    type: defaultType
-  } = useButtonType(as);
-  const contentProps = {
-    rightIcon,
-    leftIcon,
-    iconSpacing,
-    children
+
+  var _useButtonType = useButtonType(as),
+      _ref = _useButtonType.ref,
+      defaultType = _useButtonType.type;
+
+  var contentProps = {
+    rightIcon: rightIcon,
+    leftIcon: leftIcon,
+    iconSpacing: iconSpacing,
+    children: children
   };
@@ -265,3 +291,3 @@ return /*#__PURE__*/React__namespace.createElement(system.chakra.button, _extends({
     as: as,
-    type: type ?? defaultType,
+    type: type != null ? type : defaultType,
     "data-active": utils.dataAttr(isActive),
@@ -289,8 +315,6 @@ "data-loading": utils.dataAttr(isLoading),
 function ButtonContent(props) {
-  const {
-    leftIcon,
-    rightIcon,
-    children,
-    iconSpacing
-  } = props;
+  var leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      children = props.children,
+      iconSpacing = props.iconSpacing;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, leftIcon && /*#__PURE__*/React__namespace.createElement(ButtonIcon, {
@@ -303,10 +327,9 @@ marginEnd: iconSpacing
 
-const IconButton = /*#__PURE__*/system.forwardRef((props, ref) => {
-  const {
-    icon,
-    children,
-    isRound,
-    "aria-label": ariaLabel,
-    ...rest
-  } = props;
+var _excluded = ["icon", "children", "isRound", "aria-label"];
+var IconButton = /*#__PURE__*/system.forwardRef(function (props, ref) {
+  var icon = props.icon,
+      children = props.children,
+      isRound = props.isRound,
+      ariaLabel = props["aria-label"],
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
   /**
@@ -316,5 +339,6 @@ * Passing the icon as prop or children should work
 
-  const element = icon || children;
 
-  const _children = /*#__PURE__*/React__namespace.isValidElement(element) ? /*#__PURE__*/React__namespace.cloneElement(element, {
+  var element = icon || children;
+
+  var _children = /*#__PURE__*/React__namespace.isValidElement(element) ? /*#__PURE__*/React__namespace.cloneElement(element, {
     "aria-hidden": true,
@@ -321,0 +345,0 @@ focusable: false

dist/chakra-ui-button.esm.js

@@ -8,2 +8,17 @@ import { useMergeRefs } from '@chakra-ui/hooks';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function _extends() {
@@ -27,27 +42,32 @@ _extends = Object.assign || function (target) {
 
-const [ButtonGroupProvider, useButtonGroup] = createContext({
+var _excluded$4 = ["size", "colorScheme", "variant", "className", "spacing", "isAttached", "isDisabled"];
+
+var _createContext = createContext({
   strict: false,
   name: "ButtonGroupContext"
-});
-const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    size,
-    colorScheme,
-    variant,
-    className,
-    spacing = "0.5rem",
-    isAttached,
-    isDisabled,
-    ...rest
-  } = props;
+}),
+    ButtonGroupProvider = _createContext[0],
+    useButtonGroup = _createContext[1];
+var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
+  var size = props.size,
+      colorScheme = props.colorScheme,
+      variant = props.variant,
+      className = props.className,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? "0.5rem" : _props$spacing,
+      isAttached = props.isAttached,
+      isDisabled = props.isDisabled,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$4);
 
-  const _className = cx("chakra-button__group", className);
+  var _className = cx("chakra-button__group", className);
 
-  const context = React.useMemo(() => ({
-    size,
-    colorScheme,
-    variant,
-    isDisabled
-  }), [size, colorScheme, variant, isDisabled]);
-  let groupStyles = {
+  var context = React.useMemo(function () {
+    return {
+      size: size,
+      colorScheme: colorScheme,
+      variant: variant,
+      isDisabled: isDisabled
+    };
+  }, [size, colorScheme, variant, isDisabled]);
+  var groupStyles = {
     display: "inline-flex"
@@ -57,3 +77,3 @@ };
   if (isAttached) {
-    groupStyles = { ...groupStyles,
+    groupStyles = _extends({}, groupStyles, {
       "> *:first-of-type:not(:last-of-type)": {
@@ -68,9 +88,9 @@ borderEndRadius: 0
       }
-    };
+    });
   } else {
-    groupStyles = { ...groupStyles,
+    groupStyles = _extends({}, groupStyles, {
       "& > *:not(style) ~ *:not(style)": {
         marginStart: spacing
       }
-    };
+    });
   }
@@ -92,29 +112,29 @@
 
-const ButtonSpinner = props => {
-  const {
-    label,
-    placement,
-    spacing,
-    children = /*#__PURE__*/React.createElement(Spinner, {
-      color: "currentColor",
-      width: "1em",
-      height: "1em"
-    }),
-    className,
-    __css,
-    ...rest
-  } = props;
+var _excluded$3 = ["label", "placement", "spacing", "children", "className", "__css"];
+var ButtonSpinner = function ButtonSpinner(props) {
+  var label = props.label,
+      placement = props.placement;
+      props.spacing;
+      var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(Spinner, {
+    color: "currentColor",
+    width: "1em",
+    height: "1em"
+  }) : _props$children,
+      className = props.className,
+      __css = props.__css,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$3);
 
-  const _className = cx("chakra-button__spinner", className);
+  var _className = cx("chakra-button__spinner", className);
 
-  const marginProp = placement === "start" ? "marginEnd" : "marginStart";
-  const spinnerStyles = React.useMemo(() => ({
-    display: "flex",
-    alignItems: "center",
-    position: label ? "relative" : "absolute",
-    [marginProp]: label ? "0.5rem" : 0,
-    fontSize: "1em",
-    lineHeight: "normal",
-    ...__css
-  }), [__css, label, marginProp]);
+  var marginProp = placement === "start" ? "marginEnd" : "marginStart";
+  var spinnerStyles = React.useMemo(function () {
+    var _extends2;
+
+    return _extends((_extends2 = {
+      display: "flex",
+      alignItems: "center",
+      position: label ? "relative" : "absolute"
+    }, _extends2[marginProp] = label ? "0.5rem" : 0, _extends2.fontSize = "1em", _extends2.lineHeight = "normal", _extends2), __css);
+  }, [__css, label, marginProp]);
   return /*#__PURE__*/React.createElement(chakra.div, _extends({
@@ -131,10 +151,9 @@ className: _className
 
-const ButtonIcon = props => {
-  const {
-    children,
-    className,
-    ...rest
-  } = props;
+var _excluded$2 = ["children", "className"];
+var ButtonIcon = function ButtonIcon(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
 
-  const _children = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+  var _children = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
     "aria-hidden": true,
@@ -144,3 +163,3 @@ focusable: false
 
-  const _className = cx("chakra-button__icon", className);
+  var _className = cx("chakra-button__icon", className);
 
@@ -161,36 +180,41 @@ return /*#__PURE__*/React.createElement(chakra.span, _extends({
 function useButtonType(value) {
-  const [isButton, setIsButton] = React.useState(!value);
-  const refCallback = React.useCallback(node => {
+  var _React$useState = React.useState(!value),
+      isButton = _React$useState[0],
+      setIsButton = _React$useState[1];
+
+  var refCallback = React.useCallback(function (node) {
     if (!node) return;
     setIsButton(node.tagName === "BUTTON");
   }, []);
-  const type = isButton ? "button" : undefined;
+  var type = isButton ? "button" : undefined;
   return {
     ref: refCallback,
-    type
+    type: type
   };
 }
 
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
-  const group = useButtonGroup();
-  const styles = useStyleConfig("Button", { ...group,
-    ...props
-  });
-  const {
-    isDisabled = group?.isDisabled,
-    isLoading,
-    isActive,
-    isFullWidth,
-    children,
-    leftIcon,
-    rightIcon,
-    loadingText,
-    iconSpacing = "0.5rem",
-    type,
-    spinner,
-    spinnerPlacement = "start",
-    className,
-    as,
-    ...rest
-  } = omitThemingProps(props);
+var _excluded$1 = ["isDisabled", "isLoading", "isActive", "isFullWidth", "children", "leftIcon", "rightIcon", "loadingText", "iconSpacing", "type", "spinner", "spinnerPlacement", "className", "as"];
+var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var group = useButtonGroup();
+  var styles = useStyleConfig("Button", _extends({}, group, props));
+
+  var _omitThemingProps = omitThemingProps(props),
+      _omitThemingProps$isD = _omitThemingProps.isDisabled,
+      isDisabled = _omitThemingProps$isD === void 0 ? group == null ? void 0 : group.isDisabled : _omitThemingProps$isD,
+      isLoading = _omitThemingProps.isLoading,
+      isActive = _omitThemingProps.isActive,
+      isFullWidth = _omitThemingProps.isFullWidth,
+      children = _omitThemingProps.children,
+      leftIcon = _omitThemingProps.leftIcon,
+      rightIcon = _omitThemingProps.rightIcon,
+      loadingText = _omitThemingProps.loadingText,
+      _omitThemingProps$ico = _omitThemingProps.iconSpacing,
+      iconSpacing = _omitThemingProps$ico === void 0 ? "0.5rem" : _omitThemingProps$ico,
+      type = _omitThemingProps.type,
+      spinner = _omitThemingProps.spinner,
+      _omitThemingProps$spi = _omitThemingProps.spinnerPlacement,
+      spinnerPlacement = _omitThemingProps$spi === void 0 ? "start" : _omitThemingProps$spi,
+      className = _omitThemingProps.className,
+      as = _omitThemingProps.as,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$1);
   /**
@@ -203,8 +227,11 @@ * When button is used within ButtonGroup (i.e flushed with sibling buttons),
 
-  const buttonStyles = React.useMemo(() => {
-    const _focus = mergeWith({}, styles?.["_focus"] ?? {}, {
+
+  var buttonStyles = React.useMemo(function () {
+    var _styles$_focus;
+
+    var _focus = mergeWith({}, (_styles$_focus = styles == null ? void 0 : styles["_focus"]) != null ? _styles$_focus : {}, {
       zIndex: 1
     });
 
-    return {
+    return _extends({
       display: "inline-flex",
@@ -219,18 +246,17 @@ appearance: "none",
       outline: "none",
-      width: isFullWidth ? "100%" : "auto",
-      ...styles,
-      ...(!!group && {
-        _focus
-      })
-    };
+      width: isFullWidth ? "100%" : "auto"
+    }, styles, !!group && {
+      _focus: _focus
+    });
   }, [styles, group, isFullWidth]);
-  const {
-    ref: _ref,
-    type: defaultType
-  } = useButtonType(as);
-  const contentProps = {
-    rightIcon,
-    leftIcon,
-    iconSpacing,
-    children
+
+  var _useButtonType = useButtonType(as),
+      _ref = _useButtonType.ref,
+      defaultType = _useButtonType.type;
+
+  var contentProps = {
+    rightIcon: rightIcon,
+    leftIcon: leftIcon,
+    iconSpacing: iconSpacing,
+    children: children
   };
@@ -241,3 +267,3 @@ return /*#__PURE__*/React.createElement(chakra.button, _extends({
     as: as,
-    type: type ?? defaultType,
+    type: type != null ? type : defaultType,
     "data-active": dataAttr(isActive),
@@ -265,8 +291,6 @@ "data-loading": dataAttr(isLoading),
 function ButtonContent(props) {
-  const {
-    leftIcon,
-    rightIcon,
-    children,
-    iconSpacing
-  } = props;
+  var leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      children = props.children,
+      iconSpacing = props.iconSpacing;
   return /*#__PURE__*/React.createElement(React.Fragment, null, leftIcon && /*#__PURE__*/React.createElement(ButtonIcon, {
@@ -279,10 +303,9 @@ marginEnd: iconSpacing
 
-const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    icon,
-    children,
-    isRound,
-    "aria-label": ariaLabel,
-    ...rest
-  } = props;
+var _excluded = ["icon", "children", "isRound", "aria-label"];
+var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var icon = props.icon,
+      children = props.children,
+      isRound = props.isRound,
+      ariaLabel = props["aria-label"],
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
   /**
@@ -292,5 +315,6 @@ * Passing the icon as prop or children should work
 
-  const element = icon || children;
 
-  const _children = /*#__PURE__*/React.isValidElement(element) ? /*#__PURE__*/React.cloneElement(element, {
+  var element = icon || children;
+
+  var _children = /*#__PURE__*/React.isValidElement(element) ? /*#__PURE__*/React.cloneElement(element, {
     "aria-hidden": true,
@@ -297,0 +321,0 @@ focusable: false

dist/declarations/src/button-group.d.ts

@@ -25,1 +25,2 @@ import { SystemProps, ThemingProps, HTMLChakraProps } from "@chakra-ui/system";
 export declare const ButtonGroup: import("@chakra-ui/system").ComponentWithAs<"div", ButtonGroupProps>;
+//# sourceMappingURL=button-group.d.ts.map

dist/declarations/src/button-icon.d.ts

 import { HTMLChakraProps } from "@chakra-ui/system";
 import * as React from "react";
 export declare const ButtonIcon: React.FC<HTMLChakraProps<"span">>;
+//# sourceMappingURL=button-icon.d.ts.map

dist/declarations/src/button-spinner.d.ts

@@ -13,1 +13,2 @@ import { HTMLChakraProps, SystemProps } from "@chakra-ui/system";
 export {};
+//# sourceMappingURL=button-spinner.d.ts.map

dist/declarations/src/button.d.ts

@@ -58,1 +58,2 @@ import { HTMLChakraProps, SystemProps, ThemingProps } from "@chakra-ui/system";
 export declare const Button: import("@chakra-ui/system").ComponentWithAs<"button", ButtonProps>;
+//# sourceMappingURL=button.d.ts.map

dist/declarations/src/icon-button.d.ts

@@ -23,1 +23,2 @@ import * as React from "react";
 export {};
+//# sourceMappingURL=icon-button.d.ts.map

dist/declarations/src/index.d.ts

@@ -5,1 +5,2 @@ export * from "./button";
 export * from "./button-spinner";
+//# sourceMappingURL=index.d.ts.map

dist/declarations/src/use-button-type.d.ts

@@ -6,1 +6,2 @@ import * as React from "react";
 };
+//# sourceMappingURL=use-button-type.d.ts.map

package.json

 {
   "name": "@chakra-ui/button",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "A React component that is a base button.",
@@ -22,3 +22,4 @@ "keywords": [
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -37,10 +38,10 @@ "publishConfig": {
   "devDependencies": {
-    "@chakra-ui/system": "1.8.0",
+    "@chakra-ui/system": "1.8.1",
     "react": "^17.0.1"
   },
   "dependencies": {
-    "@chakra-ui/hooks": "1.7.0",
-    "@chakra-ui/react-utils": "1.2.0",
-    "@chakra-ui/spinner": "1.2.0",
-    "@chakra-ui/utils": "1.9.0"
+    "@chakra-ui/hooks": "1.7.1",
+    "@chakra-ui/react-utils": "1.2.1",
+    "@chakra-ui/spinner": "1.2.1",
+    "@chakra-ui/utils": "1.9.1"
   },
@@ -47,0 +48,0 @@ "peerDependencies": {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73859

increased by47.47%

Number of package files

29

increased by93.33%

Lines of code

1432

increased by45.68%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@chakra-ui/hooks@1.7.1(transitive)

• + Added@chakra-ui/react-utils@1.2.1(transitive)

• + Added@chakra-ui/spinner@1.2.1(transitive)

• + Added@chakra-ui/utils@1.9.1(transitive)

• + Added@chakra-ui/visually-hidden@1.1.1(transitive)

• - Removed@chakra-ui/hooks@1.7.0(transitive)

• - Removed@chakra-ui/react-utils@1.2.0(transitive)

• - Removed@chakra-ui/spinner@1.2.0(transitive)

• - Removed@chakra-ui/utils@1.9.0(transitive)

• - Removed@chakra-ui/visually-hidden@1.1.0(transitive)

• Updated@chakra-ui/hooks@1.7.1

• Updated@chakra-ui/react-utils@1.2.1

• Updated@chakra-ui/spinner@1.2.1

• Updated@chakra-ui/utils@1.9.1