carbon-react 109.2.1 → 109.2.2

package/esm/components/badge/badge.style.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledButton: import("styled-components").StyledComponent<{
-    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
-    displayName: string;
-}, any, {}, never>;
+declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };

package/esm/components/button/button.component.d.ts

@@ -58,10 +58,7 @@ export interface ButtonProps extends SpaceProps {
     /** HTML rel attribute */
     rel?: string;
 }
-declare const Button: {
-    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: ButtonProps): JSX.Element;
-    displayName: string;
-};
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { ButtonWithForwardRef };
 export default Button;

package/esm/components/button/button.component.js

@@ -7,6 +7,7 @@ import Icon from "../icon";
 import StyledButton, { StyledButtonSubtext } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import Logger from "../../__internal__/utils/logger";
 
 function renderChildren({
   /* eslint-disable react/prop-types */
@@ -73,8 +74,8 @@ renderChildren.propTypes = {
     }
   }
 };
-
-const Button = ({
+let deprecatedForwardRefWarnTriggered = false;
+const Button = /*#__PURE__*/React.forwardRef(({
   size = "medium",
   subtext = "",
   children,
@@ -95,13 +96,18 @@ const Button = ({
   iconTooltipPosition,
   fullWidth = false,
   ...rest
-}) => {
+}, ref) => {
   invariant(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
 
   if (subtext) {
     invariant(size === "large", "subtext prop has no effect unless the button is large.");
   }
 
+  if (!deprecatedForwardRefWarnTriggered && forwardRef) {
+    deprecatedForwardRefWarnTriggered = true;
+    Logger.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const [internalRef, setInternalRef] = useState();
   const buttonType = buttonTypeProp;
   let paddingX;
@@ -129,10 +135,11 @@ const Button = ({
 
   const setRefs = useCallback(reference => {
     setInternalRef(reference);
-    if (!forwardRef) return;
-    if (typeof forwardRef === "object") forwardRef.current = reference;
-    if (typeof forwardRef === "function") forwardRef(reference);
-  }, [forwardRef]);
+    const activeRef = ref || forwardRef;
+    if (!activeRef) return;
+    if (typeof activeRef === "object") activeRef.current = reference;
+    if (typeof activeRef === "function") activeRef(reference);
+  }, [ref, forwardRef]);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
     "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
@@ -169,8 +176,7 @@ const Button = ({
     iconTooltipPosition,
     tooltipTarget: internalRef
   }));
-};
-
+});
 Button.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
@@ -507,9 +513,17 @@ Button.propTypes = {
   "target": PropTypes.string,
   "type": PropTypes.string
 };
-const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Button, _extends({
-  forwardRef: ref
-}, props)));
+let deprecatedButtonForwardRefWarnTriggered = false;
+const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  if (!deprecatedButtonForwardRefWarnTriggered) {
+    deprecatedButtonForwardRefWarnTriggered = true;
+    Logger.deprecate("The `ButtonWithForwardRef` component is deprecated and will soon be removed. Please use a basic `Button` component with `ref` instead.");
+  }
+
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+  }, props));
+});
 ButtonWithForwardRef.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),

package/esm/components/duelling-picklist/picklist-group/picklist-group.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { ButtonWithForwardRef } from "../../button";
+import Button from "../../button";
 import { StyledButton } from "../picklist-item/picklist-item.style";
 const StyledGroupWrapper = styled.li`
   ${({
@@ -25,7 +25,7 @@ const StyledPicklistGroup = styled.li`
   width: 100%;
   margin-bottom: 4px;
 `;
-const StyledGroupButton = styled(ButtonWithForwardRef)`
+const StyledGroupButton = styled(Button)`
   ${({
   iconType
 }) => css`

package/esm/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { ButtonWithForwardRef } from "../../button";
+import Button from "../../button";
 import Icon from "../../icon";
 import StyledIcon from "../../icon/icon.style";
 const StyledPicklistItem = styled.li`
@@ -30,7 +30,7 @@ const StyledPicklistItem = styled.li`
     }
   `}
 `;
-const StyledButton = styled(ButtonWithForwardRef)`
+const StyledButton = styled(Button)`
   ${({
   iconType
 }) => css`

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState, useRef, useMemo } from "react"
 import PropTypes from "prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
-import Button, { ButtonWithForwardRef } from "../button";
+import Button from "../button";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
@@ -67,11 +67,6 @@ const MultiActionButton = ({
           (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
         }
       };
-
-      if (child.type === Button) {
-        return /*#__PURE__*/React.createElement(ButtonWithForwardRef, _extends({}, child.props, props));
-      }
-
       return /*#__PURE__*/React.cloneElement(child, props);
     });
   };

package/esm/components/split-button/split-button.component.js

@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Icon from "../icon";
-import Button, { ButtonWithForwardRef } from "../button";
+import Button from "../button";
 import StyledSplitButton from "./split-button.style";
 import StyledSplitButtonToggle from "./split-button-toggle.style";
 import StyledSplitButtonChildrenContainer from "./split-button-children.style";
@@ -217,11 +217,6 @@ const SplitButton = ({
           (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
         }
       };
-
-      if (child.type === Button) {
-        return /*#__PURE__*/React.createElement(ButtonWithForwardRef, _extends({}, child.props, childProps));
-      }
-
       return /*#__PURE__*/React.cloneElement(child, childProps);
     });
   }

package/lib/components/badge/badge.style.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledButton: import("styled-components").StyledComponent<{
-    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
-    displayName: string;
-}, any, {}, never>;
+declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };

package/lib/components/button/button.component.d.ts

@@ -58,10 +58,7 @@ export interface ButtonProps extends SpaceProps {
     /** HTML rel attribute */
     rel?: string;
 }
-declare const Button: {
-    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: ButtonProps): JSX.Element;
-    displayName: string;
-};
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { ButtonWithForwardRef };
 export default Button;

package/lib/components/button/button.component.js

@@ -19,6 +19,8 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -92,8 +94,9 @@ renderChildren.propTypes = {
     }
   }
 };
+let deprecatedForwardRefWarnTriggered = false;
 
-const Button = ({
+const Button = /*#__PURE__*/_react.default.forwardRef(({
   size = "medium",
   subtext = "",
   children,
@@ -114,13 +117,19 @@ const Button = ({
   iconTooltipPosition,
   fullWidth = false,
   ...rest
-}) => {
+}, ref) => {
   (0, _invariant.default)(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
 
   if (subtext) {
     (0, _invariant.default)(size === "large", "subtext prop has no effect unless the button is large.");
   }
 
+  if (!deprecatedForwardRefWarnTriggered && forwardRef) {
+    deprecatedForwardRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const [internalRef, setInternalRef] = (0, _react.useState)();
   const buttonType = buttonTypeProp;
   let paddingX;
@@ -148,10 +157,11 @@ const Button = ({
 
   const setRefs = (0, _react.useCallback)(reference => {
     setInternalRef(reference);
-    if (!forwardRef) return;
-    if (typeof forwardRef === "object") forwardRef.current = reference;
-    if (typeof forwardRef === "function") forwardRef(reference);
-  }, [forwardRef]);
+    const activeRef = ref || forwardRef;
+    if (!activeRef) return;
+    if (typeof activeRef === "object") activeRef.current = reference;
+    if (typeof activeRef === "function") activeRef(reference);
+  }, [ref, forwardRef]);
   return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
@@ -188,7 +198,7 @@ const Button = ({
     iconTooltipPosition,
     tooltipTarget: internalRef
   }));
-};
+});
 
 Button.propTypes = {
   "aria-label": _propTypes.default.string,
@@ -526,10 +536,19 @@ Button.propTypes = {
   "target": _propTypes.default.string,
   "type": _propTypes.default.string
 };
+let deprecatedButtonForwardRefWarnTriggered = false;
+
+const ButtonWithForwardRef = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  if (!deprecatedButtonForwardRefWarnTriggered) {
+    deprecatedButtonForwardRefWarnTriggered = true;
 
-const ButtonWithForwardRef = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(Button, _extends({
-  forwardRef: ref
-}, props)));
+    _logger.default.deprecate("The `ButtonWithForwardRef` component is deprecated and will soon be removed. Please use a basic `Button` component with `ref` instead.");
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Button, _extends({
+    ref: ref
+  }, props));
+});
 
 exports.ButtonWithForwardRef = ButtonWithForwardRef;
 ButtonWithForwardRef.propTypes = {

package/lib/components/duelling-picklist/picklist-group/picklist-group.style.js

@@ -7,10 +7,12 @@ exports.StyledGroupButton = exports.StyledPicklistGroup = exports.StyledPicklist
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _button = require("../../button");
+var _button = _interopRequireDefault(require("../../button"));
 
 var _picklistItem = require("../picklist-item/picklist-item.style");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,7 +44,7 @@ const StyledPicklistGroup = _styledComponents.default.li`
   margin-bottom: 4px;
 `;
 exports.StyledPicklistGroup = StyledPicklistGroup;
-const StyledGroupButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
+const StyledGroupButton = (0, _styledComponents.default)(_button.default)`
   ${({
   iconType
 }) => (0, _styledComponents.css)`

package/lib/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -7,7 +7,7 @@ exports.StyledLockIcon = exports.StyledButton = exports.StyledPicklistItem = voi
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _button = require("../../button");
+var _button = _interopRequireDefault(require("../../button"));
 
 var _icon = _interopRequireDefault(require("../../icon"));
 
@@ -48,7 +48,7 @@ const StyledPicklistItem = _styledComponents.default.li`
   `}
 `;
 exports.StyledPicklistItem = StyledPicklistItem;
-const StyledButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
+const StyledButton = (0, _styledComponents.default)(_button.default)`
   ${({
   iconType
 }) => (0, _styledComponents.css)`

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -13,7 +13,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 
 var _multiActionButton = require("./multi-action-button.style");
 
-var _button = _interopRequireWildcard(require("../button"));
+var _button = _interopRequireDefault(require("../button"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
@@ -88,11 +88,6 @@ const MultiActionButton = ({
           (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
         }
       };
-
-      if (child.type === _button.default) {
-        return /*#__PURE__*/_react.default.createElement(_button.ButtonWithForwardRef, _extends({}, child.props, props));
-      }
-
       return /*#__PURE__*/_react.default.cloneElement(child, props);
     });
   };

package/lib/components/split-button/split-button.component.js

@@ -17,7 +17,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 
 var _icon = _interopRequireDefault(require("../icon"));
 
-var _button = _interopRequireWildcard(require("../button"));
+var _button = _interopRequireDefault(require("../button"));
 
 var _splitButton = _interopRequireDefault(require("./split-button.style"));
 
@@ -249,11 +249,6 @@ const SplitButton = ({
           (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
         }
       };
-
-      if (child.type === _button.default) {
-        return /*#__PURE__*/_react.default.createElement(_button.ButtonWithForwardRef, _extends({}, child.props, childProps));
-      }
-
       return /*#__PURE__*/_react.default.cloneElement(child, childProps);
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.2.1",
+  "version": "109.2.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {