carbon-react 114.7.0 → 114.7.1

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

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import Icon from "../icon";
@@ -8,6 +8,7 @@ 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";
+import { ButtonBarContext } from "../button-bar/button-bar.component";
 
 function renderChildren({
   /* eslint-disable react/prop-types */
@@ -75,8 +76,9 @@ renderChildren.propTypes = {
   }
 };
 let deprecatedForwardRefWarnTriggered = false;
+let deprecatedDashedButtonWarnTriggered = false;
 const Button = /*#__PURE__*/React.forwardRef(({
-  size = "medium",
+  size: sizeProp = "medium",
   subtext = "",
   children,
   forwardRef,
@@ -85,7 +87,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   destructive = false,
   buttonType: buttonTypeProp = "secondary",
   iconType,
-  iconPosition = "before",
+  iconPosition: iconPositionProp = "before",
   href,
   m = 0,
   px,
@@ -94,9 +96,19 @@ const Button = /*#__PURE__*/React.forwardRef(({
   rel,
   iconTooltipMessage,
   iconTooltipPosition,
-  fullWidth = false,
+  fullWidth: fullWidthProp = false,
   ...rest
 }, ref) => {
+  const {
+    buttonType: buttonTypeContext,
+    size: sizeContext,
+    iconPosition: iconPositionContext,
+    fullWidth: fullWidthContext
+  } = useContext(ButtonBarContext);
+  const buttonType = buttonTypeContext || buttonTypeProp;
+  const size = sizeContext || sizeProp;
+  const iconPosition = iconPositionContext || iconPositionProp;
+  const fullWidth = fullWidthContext || fullWidthProp;
   !!!(children || iconType) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `iconType` must be defined or this node must have children.") : invariant(false) : void 0;
 
   if (subtext) {
@@ -108,8 +120,12 @@ const Button = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecatedDashedButtonWarnTriggered && buttonType === "dashed") {
+    deprecatedDashedButtonWarnTriggered = true;
+    Logger.deprecate("The `dashed` variant of the `buttonType` prop for `Button` component is deprecated and will soon be removed.");
+  }
+
   const [internalRef, setInternalRef] = useState();
-  const buttonType = buttonTypeProp;
   let paddingX;
 
   const handleLinkKeyDown = event => {

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

@@ -1,15 +1,20 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-export interface ButtonBarProps extends SpaceProps {
-    /** Button or IconButton Elements, to be rendered inside the component */
-    children: React.ReactNode;
+export interface ButtonBarContextProps {
     /** Apply fullWidth style to the button bar */
     fullWidth?: boolean;
     /** Defines an Icon position for buttons: "before" | "after" */
     iconPosition?: "before" | "after";
     /** Assigns a size to the buttons: "small" | "medium" | "large" */
     size?: "small" | "medium" | "large";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    buttonType?: "primary" | "secondary" | "primary";
+}
+export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps {
+    /** Button or IconButton Elements, to be rendered inside the component */
+    children: React.ReactNode;
 }
+export declare const ButtonBarContext: React.Context<ButtonBarContextProps>;
 export declare const ButtonBar: {
     ({ children, size, iconPosition, fullWidth, ...rest }: ButtonBarProps): JSX.Element;
     displayName: string;

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

@@ -1,11 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useMemo } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import invariant from "invariant";
 import StyledButtonBar from "./button-bar.style";
-import Button from "../button";
-import IconButton from "../icon-button";
+export const ButtonBarContext = /*#__PURE__*/React.createContext({});
 
 const ButtonBar = ({
   children,
@@ -13,39 +11,20 @@ const ButtonBar = ({
   iconPosition = "before",
   fullWidth = false,
   ...rest
-}) => {
-  const hasProperChildren = useMemo(() => {
-    const incorrectChild = React.Children.toArray(children).find(child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return true;
-      }
-
-      return child.type !== Button && child.type !== IconButton;
-    });
-    return !incorrectChild;
-  }, [children]);
-  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, "ButtonBar accepts only `Button` or `IconButton` elements.") : invariant(false) : void 0;
-
-  const getBtnProps = child => {
-    var _child$props, _child$props2, _child$props2$childre, _child$props2$childre2;
-
-    const btnProps = { ...child.props,
-      buttonType: "secondary",
-      size,
-      iconPosition,
-      fullWidth,
-      "aria-label": child.type === IconButton ? ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.ariaLabel) || ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : (_child$props2$childre = _child$props2.children) === null || _child$props2$childre === void 0 ? void 0 : (_child$props2$childre2 = _child$props2$childre.props) === null || _child$props2$childre2 === void 0 ? void 0 : _child$props2$childre2.type) : ""
-    };
-    return btnProps;
-  };
-
-  return /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, {
-    fullWidth: fullWidth,
-    size: size
-  }), React.Children.map(children, child => /*#__PURE__*/React.createElement(child.type, getBtnProps(child))));
-};
+}) => /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, {
+  fullWidth: fullWidth,
+  size: size
+}), /*#__PURE__*/React.createElement(ButtonBarContext.Provider, {
+  value: {
+    buttonType: "secondary",
+    size,
+    iconPosition,
+    fullWidth
+  }
+}, children));
 
 ButtonBar.propTypes = {
+  "buttonType": PropTypes.oneOf(["primary", "secondary"]),
   "children": PropTypes.node,
   "fullWidth": PropTypes.bool,
   "iconPosition": PropTypes.oneOf(["after", "before"]),

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

@@ -1,10 +1,11 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import Events from "../../__internal__/utils/helpers/events";
 import StyledIconButton from "./icon-button.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import { ButtonBarContext } from "../button-bar/button-bar.component";
 const IconButton = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
   onAction,
@@ -12,7 +13,11 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   disabled,
   ...rest
 }, ref) => {
+  var _internalRef$querySel;
+
   const [internalRef, setInternalRef] = useState();
+  const context = useContext(ButtonBarContext);
+  const ariaLabelValue = Object.keys(context).length ? ariaLabel || (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$querySel = internalRef.querySelector("[data-component='icon']")) === null || _internalRef$querySel === void 0 ? void 0 : _internalRef$querySel.getAttribute("type")) || undefined : ariaLabel;
 
   const handleKeyDown = e => {
     if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
@@ -36,7 +41,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(StyledIconButton, _extends({
     p: 0
   }, rest, {
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabelValue,
     onKeyDown: handleKeyDown,
     onClick: handleOnClick,
     ref: setRefs,

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

@@ -21,6 +21,8 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
+var _buttonBar = require("../button-bar/button-bar.component");
+
 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; }
@@ -95,9 +97,10 @@ renderChildren.propTypes = {
   }
 };
 let deprecatedForwardRefWarnTriggered = false;
+let deprecatedDashedButtonWarnTriggered = false;
 
 const Button = /*#__PURE__*/_react.default.forwardRef(({
-  size = "medium",
+  size: sizeProp = "medium",
   subtext = "",
   children,
   forwardRef,
@@ -106,7 +109,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   destructive = false,
   buttonType: buttonTypeProp = "secondary",
   iconType,
-  iconPosition = "before",
+  iconPosition: iconPositionProp = "before",
   href,
   m = 0,
   px,
@@ -115,9 +118,19 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   rel,
   iconTooltipMessage,
   iconTooltipPosition,
-  fullWidth = false,
+  fullWidth: fullWidthProp = false,
   ...rest
 }, ref) => {
+  const {
+    buttonType: buttonTypeContext,
+    size: sizeContext,
+    iconPosition: iconPositionContext,
+    fullWidth: fullWidthContext
+  } = (0, _react.useContext)(_buttonBar.ButtonBarContext);
+  const buttonType = buttonTypeContext || buttonTypeProp;
+  const size = sizeContext || sizeProp;
+  const iconPosition = iconPositionContext || iconPositionProp;
+  const fullWidth = fullWidthContext || fullWidthProp;
   !!!(children || iconType) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `iconType` must be defined or this node must have children.") : (0, _invariant.default)(false) : void 0;
 
   if (subtext) {
@@ -130,8 +143,13 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecatedDashedButtonWarnTriggered && buttonType === "dashed") {
+    deprecatedDashedButtonWarnTriggered = true;
+
+    _logger.default.deprecate("The `dashed` variant of the `buttonType` prop for `Button` component is deprecated and will soon be removed.");
+  }
+
   const [internalRef, setInternalRef] = (0, _react.useState)();
-  const buttonType = buttonTypeProp;
   let paddingX;
 
   const handleLinkKeyDown = event => {

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

@@ -1,15 +1,20 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-export interface ButtonBarProps extends SpaceProps {
-    /** Button or IconButton Elements, to be rendered inside the component */
-    children: React.ReactNode;
+export interface ButtonBarContextProps {
     /** Apply fullWidth style to the button bar */
     fullWidth?: boolean;
     /** Defines an Icon position for buttons: "before" | "after" */
     iconPosition?: "before" | "after";
     /** Assigns a size to the buttons: "small" | "medium" | "large" */
     size?: "small" | "medium" | "large";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    buttonType?: "primary" | "secondary" | "primary";
+}
+export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps {
+    /** Button or IconButton Elements, to be rendered inside the component */
+    children: React.ReactNode;
 }
+export declare const ButtonBarContext: React.Context<ButtonBarContextProps>;
 export declare const ButtonBar: {
     ({ children, size, iconPosition, fullWidth, ...rest }: ButtonBarProps): JSX.Element;
     displayName: string;

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

@@ -3,27 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ButtonBar = void 0;
+exports.default = exports.ButtonBar = exports.ButtonBarContext = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _invariant = _interopRequireDefault(require("invariant"));
-
 var _buttonBar = _interopRequireDefault(require("./button-bar.style"));
 
-var _button = _interopRequireDefault(require("../button"));
-
-var _iconButton = _interopRequireDefault(require("../icon-button"));
-
 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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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; }
+const ButtonBarContext = /*#__PURE__*/_react.default.createContext({});
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+exports.ButtonBarContext = ButtonBarContext;
 
 const ButtonBar = ({
   children,
@@ -31,41 +25,21 @@ const ButtonBar = ({
   iconPosition = "before",
   fullWidth = false,
   ...rest
-}) => {
-  const hasProperChildren = (0, _react.useMemo)(() => {
-    const incorrectChild = _react.default.Children.toArray(children).find(child => {
-      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-        return true;
-      }
-
-      return child.type !== _button.default && child.type !== _iconButton.default;
-    });
-
-    return !incorrectChild;
-  }, [children]);
-  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ButtonBar accepts only `Button` or `IconButton` elements.") : (0, _invariant.default)(false) : void 0;
-
-  const getBtnProps = child => {
-    var _child$props, _child$props2, _child$props2$childre, _child$props2$childre2;
-
-    const btnProps = { ...child.props,
-      buttonType: "secondary",
-      size,
-      iconPosition,
-      fullWidth,
-      "aria-label": child.type === _iconButton.default ? ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.ariaLabel) || ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : (_child$props2$childre = _child$props2.children) === null || _child$props2$childre === void 0 ? void 0 : (_child$props2$childre2 = _child$props2$childre.props) === null || _child$props2$childre2 === void 0 ? void 0 : _child$props2$childre2.type) : ""
-    };
-    return btnProps;
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_buttonBar.default, _extends({}, rest, {
-    fullWidth: fullWidth,
-    size: size
-  }), _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(child.type, getBtnProps(child))));
-};
+}) => /*#__PURE__*/_react.default.createElement(_buttonBar.default, _extends({}, rest, {
+  fullWidth: fullWidth,
+  size: size
+}), /*#__PURE__*/_react.default.createElement(ButtonBarContext.Provider, {
+  value: {
+    buttonType: "secondary",
+    size,
+    iconPosition,
+    fullWidth
+  }
+}, children));
 
 exports.ButtonBar = ButtonBar;
 ButtonBar.propTypes = {
+  "buttonType": _propTypes.default.oneOf(["primary", "secondary"]),
   "children": _propTypes.default.node,
   "fullWidth": _propTypes.default.bool,
   "iconPosition": _propTypes.default.oneOf(["after", "before"]),

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

@@ -15,6 +15,8 @@ var _iconButton = _interopRequireDefault(require("./icon-button.style"));
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _buttonBar = require("../button-bar/button-bar.component");
+
 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; }
@@ -30,7 +32,11 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   disabled,
   ...rest
 }, ref) => {
+  var _internalRef$querySel;
+
   const [internalRef, setInternalRef] = (0, _react.useState)();
+  const context = (0, _react.useContext)(_buttonBar.ButtonBarContext);
+  const ariaLabelValue = Object.keys(context).length ? ariaLabel || (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$querySel = internalRef.querySelector("[data-component='icon']")) === null || _internalRef$querySel === void 0 ? void 0 : _internalRef$querySel.getAttribute("type")) || undefined : ariaLabel;
 
   const handleKeyDown = e => {
     if (_events.default.isEnterKey(e) || _events.default.isSpaceKey(e)) {
@@ -54,7 +60,7 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
     p: 0
   }, rest, {
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabelValue,
     onKeyDown: handleKeyDown,
     onClick: handleOnClick,
     ref: setRefs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.7.0",
+  "version": "114.7.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",