carbon-react 114.6.1 → 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/i18n-provider/i18n-provider.component.js

@@ -52,6 +52,9 @@ I18nProvider.propTypes = {
     "link": PropTypes.shape({
       "skipLinkLabel": PropTypes.func.isRequired
     }),
+    "loader": PropTypes.shape({
+      "loading": PropTypes.func.isRequired
+    }),
     "locale": PropTypes.func,
     "message": PropTypes.shape({
       "closeButtonAriaLabel": PropTypes.func.isRequired

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/esm/components/loader/loader.component.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledLoaderSquareProps } from "./loader-square.style";
-export interface LoaderProps extends StyledLoaderSquareProps, MarginProps {
-    /** Specify an aria-label for the Loader component */
+export interface LoaderProps extends StyledLoaderSquareProps, MarginProps, TagProps {
+    /** Specify a custom accessible name for the Loader component */
     "aria-label"?: string;
 }
-export declare const Loader: ({ "aria-label": ariaLabel, isInsideButton, isActive, size, ...rest }: LoaderProps) => JSX.Element;
+export declare const Loader: ({ "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => JSX.Element;
 export default Loader;

package/esm/components/loader/loader.component.js

@@ -2,21 +2,26 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoader from "./loader.style";
 import StyledLoaderSquare from "./loader-square.style";
 
 const Loader = ({
-  "aria-label": ariaLabel = "loader",
+  "aria-label": ariaLabel,
+  size = "medium",
   isInsideButton,
   isActive = true,
-  size = "medium",
   ...rest
 }) => {
+  const l = useLocale();
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   return /*#__PURE__*/React.createElement(StyledLoader, _extends({
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || l.loader.loading(),
     role: "progressbar"
-  }, tagComponent("loader", rest), rest), /*#__PURE__*/React.createElement(StyledLoaderSquare, {
+  }, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledLoaderSquare, {
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
@@ -28,11 +33,14 @@ const Loader = ({
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
-  }));
+  })));
 };
 
 Loader.propTypes = {
   "aria-label": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "isActive": PropTypes.bool,
   "isInsideButton": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledLoaderBarProps } from "./loader-bar.style";
-export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps {
+export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps, TagProps {
 }
 export declare const LoaderBar: {
     ({ size, ...rest }: LoaderBarProps): JSX.Element;

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

@@ -2,6 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoaderBar, { InnerBar, StyledLoader } from "./loader-bar.style";
 
@@ -9,7 +12,12 @@ const LoaderBar = ({
   size = "medium",
   ...rest
 }) => {
-  return /*#__PURE__*/React.createElement(StyledLoader, _extends({}, rest, tagComponent("loader-bar", rest)), /*#__PURE__*/React.createElement(StyledLoaderBar, {
+  const l = useLocale();
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  return /*#__PURE__*/React.createElement(StyledLoader, _extends({
+    "aria-label": l.loader.loading(),
+    role: "progressbar"
+  }, tagComponent("loader-bar", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(StyledLoaderBar, {
     size: size
   }, /*#__PURE__*/React.createElement(InnerBar, {
     size: size
@@ -17,6 +25,9 @@ const LoaderBar = ({
 };
 
 LoaderBar.propTypes = {
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

package/esm/components/loader-bar/loader-bar.style.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 export interface StyledLoaderBarProps {
-    /** Size of the loaderBar. */
+    /** Size of the LoaderBar. */
     size?: "small" | "medium" | "large";
 }
 declare const StyledLoader: import("styled-components").StyledComponent<"div", any, StyledLoaderBarProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;

package/esm/components/loader-bar/loader-bar.style.js

@@ -19,9 +19,6 @@ const INNER_BAR_LENGTH = "128px";
 const StyledLoader = styled.div`
   ${margin}
   text-align: center;
-  white-space: nowrap;
-  line-height: 0;
-  font-size: 0;
 `;
 const innerBarAnimation = keyframes`
   0% {

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -20,6 +20,7 @@ const StyledSwitchSlider = styled.span`
     text-transform: uppercase;
     top: 0;
     width: 60px;
+    min-width: fit-content;
     z-index: 2;
     border-radius: 90px;
     border-style: solid;

package/esm/components/switch/switch.component.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
-import SwitchStyle from "./switch.style";
+import StyledSwitch from "./switch.style";
 import CheckableInput from "../../__internal__/checkable-input";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
@@ -103,7 +103,7 @@ const Switch = ({
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/React.createElement(SwitchStyle, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps))));
+  }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps))));
 };
 
 Switch.propTypes = {

package/esm/components/switch/switch.style.js

@@ -26,6 +26,7 @@ const StyledSwitch = styled.div`
       box-sizing: border-box;
       height: 24px;
       width: 60px;
+      min-width: fit-content;
       flex-basis: 100%;
       margin-left: 0;
     }
@@ -125,6 +126,7 @@ const StyledSwitch = styled.div`
       ${StyledCheckableInput}, ${HiddenCheckableInputStyle}, ${StyledSwitchSlider} {
         height: 40px;
         width: 78px;
+        min-width: fit-content;
       }
 
       ${labelInline && !fieldHelpInline && reverse && css`

package/esm/locales/en-gb.js

@@ -60,6 +60,12 @@ const enGB = {
   heading: {
     backLinkAriaLabel: () => "Back"
   },
+  link: {
+    skipLinkLabel: () => "Skip to main content"
+  },
+  loader: {
+    loading: () => "Loading"
+  },
   message: {
     closeButtonAriaLabel: () => "Close"
   },
@@ -94,9 +100,6 @@ const enGB = {
     placeholder: () => "Please Select...",
     noResultsForTerm: term => `No results for "${term}"`
   },
-  link: {
-    skipLinkLabel: () => "Skip to main content"
-  },
   sidebar: {
     ariaLabels: {
       close: () => "Close"

package/esm/locales/locale.d.ts

@@ -36,6 +36,12 @@ interface Locale {
     heading: {
         backLinkAriaLabel: () => string;
     };
+    link: {
+        skipLinkLabel: () => string;
+    };
+    loader: {
+        loading: () => string;
+    };
     message: {
         closeButtonAriaLabel: () => string;
     };
@@ -67,9 +73,6 @@ interface Locale {
         placeholder: () => string;
         noResultsForTerm: (term: string) => string;
     };
-    link: {
-        skipLinkLabel: () => string;
-    };
     sidebar: {
         ariaLabels: {
             close: () => string;

package/esm/locales/pl-pl.js

@@ -58,6 +58,12 @@ const plPL = {
   heading: {
     backLinkAriaLabel: () => "Wstecz"
   },
+  link: {
+    skipLinkLabel: () => "Przejdź do treści"
+  },
+  loader: {
+    loading: () => "Ładowanie"
+  },
   message: {
     closeButtonAriaLabel: () => "Zamknij"
   },
@@ -92,9 +98,6 @@ const plPL = {
     placeholder: () => "Proszę wybierz...",
     noResultsForTerm: term => `Brak wyników dla "${term}"`
   },
-  link: {
-    skipLinkLabel: () => "Przejdź do treści"
-  },
   sidebar: {
     ariaLabels: {
       close: () => "Zamknij"

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/i18n-provider/i18n-provider.component.js

@@ -66,6 +66,9 @@ I18nProvider.propTypes = {
     "link": _propTypes.default.shape({
       "skipLinkLabel": _propTypes.default.func.isRequired
     }),
+    "loader": _propTypes.default.shape({
+      "loading": _propTypes.default.func.isRequired
+    }),
     "locale": _propTypes.default.func,
     "message": _propTypes.default.shape({
       "closeButtonAriaLabel": _propTypes.default.func.isRequired

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/lib/components/loader/loader.component.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledLoaderSquareProps } from "./loader-square.style";
-export interface LoaderProps extends StyledLoaderSquareProps, MarginProps {
-    /** Specify an aria-label for the Loader component */
+export interface LoaderProps extends StyledLoaderSquareProps, MarginProps, TagProps {
+    /** Specify a custom accessible name for the Loader component */
     "aria-label"?: string;
 }
-export declare const Loader: ({ "aria-label": ariaLabel, isInsideButton, isActive, size, ...rest }: LoaderProps) => JSX.Element;
+export declare const Loader: ({ "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => JSX.Element;
 export default Loader;

package/lib/components/loader/loader.component.js

@@ -9,6 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("../../style/utils");
+
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
 var _loader = _interopRequireDefault(require("./loader.style"));
@@ -20,16 +26,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 
 const Loader = ({
-  "aria-label": ariaLabel = "loader",
+  "aria-label": ariaLabel,
+  size = "medium",
   isInsideButton,
   isActive = true,
-  size = "medium",
   ...rest
 }) => {
+  const l = (0, _useLocale.default)();
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || l.loader.loading(),
     role: "progressbar"
-  }, (0, _tags.default)("loader", rest), rest), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
+  }, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
@@ -41,12 +49,15 @@ const Loader = ({
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
-  }));
+  })));
 };
 
 exports.Loader = Loader;
 Loader.propTypes = {
   "aria-label": _propTypes.default.string,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "isActive": _propTypes.default.bool,
   "isInsideButton": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledLoaderBarProps } from "./loader-bar.style";
-export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps {
+export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps, TagProps {
 }
 export declare const LoaderBar: {
     ({ size, ...rest }: LoaderBarProps): JSX.Element;

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

@@ -9,6 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("../../style/utils");
+
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
 var _loaderBar = _interopRequireWildcard(require("./loader-bar.style"));
@@ -25,7 +31,12 @@ const LoaderBar = ({
   size = "medium",
   ...rest
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_loaderBar.StyledLoader, _extends({}, rest, (0, _tags.default)("loader-bar", rest)), /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
+  const l = (0, _useLocale.default)();
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  return /*#__PURE__*/_react.default.createElement(_loaderBar.StyledLoader, _extends({
+    "aria-label": l.loader.loading(),
+    role: "progressbar"
+  }, (0, _tags.default)("loader-bar", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
     size: size
   }, /*#__PURE__*/_react.default.createElement(_loaderBar.InnerBar, {
     size: size
@@ -34,6 +45,9 @@ const LoaderBar = ({
 
 exports.LoaderBar = LoaderBar;
 LoaderBar.propTypes = {
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

package/lib/components/loader-bar/loader-bar.style.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 export interface StyledLoaderBarProps {
-    /** Size of the loaderBar. */
+    /** Size of the LoaderBar. */
     size?: "small" | "medium" | "large";
 }
 declare const StyledLoader: import("styled-components").StyledComponent<"div", any, StyledLoaderBarProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;

package/lib/components/loader-bar/loader-bar.style.js

@@ -34,9 +34,6 @@ const INNER_BAR_LENGTH = "128px";
 const StyledLoader = _styledComponents.default.div`
   ${_styledSystem.margin}
   text-align: center;
-  white-space: nowrap;
-  line-height: 0;
-  font-size: 0;
 `;
 exports.StyledLoader = StyledLoader;
 const innerBarAnimation = (0, _styledComponents.keyframes)`

package/lib/components/switch/__internal__/switch-slider.style.js

@@ -36,6 +36,7 @@ const StyledSwitchSlider = _styledComponents.default.span`
     text-transform: uppercase;
     top: 0;
     width: 60px;
+    min-width: fit-content;
     z-index: 2;
     border-radius: 90px;
     border-style: solid;

package/lib/components/switch/switch.style.js

@@ -49,6 +49,7 @@ const StyledSwitch = _styledComponents.default.div`
       box-sizing: border-box;
       height: 24px;
       width: 60px;
+      min-width: fit-content;
       flex-basis: 100%;
       margin-left: 0;
     }
@@ -148,6 +149,7 @@ const StyledSwitch = _styledComponents.default.div`
       ${_checkableInput.StyledCheckableInput}, ${_hiddenCheckableInput.default}, ${_switchSlider.default} {
         height: 40px;
         width: 78px;
+        min-width: fit-content;
       }
 
       ${labelInline && !fieldHelpInline && reverse && (0, _styledComponents.css)`

package/lib/locales/en-gb.js

@@ -67,6 +67,12 @@ const enGB = {
   heading: {
     backLinkAriaLabel: () => "Back"
   },
+  link: {
+    skipLinkLabel: () => "Skip to main content"
+  },
+  loader: {
+    loading: () => "Loading"
+  },
   message: {
     closeButtonAriaLabel: () => "Close"
   },
@@ -101,9 +107,6 @@ const enGB = {
     placeholder: () => "Please Select...",
     noResultsForTerm: term => `No results for "${term}"`
   },
-  link: {
-    skipLinkLabel: () => "Skip to main content"
-  },
   sidebar: {
     ariaLabels: {
       close: () => "Close"

package/lib/locales/locale.d.ts

@@ -36,6 +36,12 @@ interface Locale {
     heading: {
         backLinkAriaLabel: () => string;
     };
+    link: {
+        skipLinkLabel: () => string;
+    };
+    loader: {
+        loading: () => string;
+    };
     message: {
         closeButtonAriaLabel: () => string;
     };
@@ -67,9 +73,6 @@ interface Locale {
         placeholder: () => string;
         noResultsForTerm: (term: string) => string;
     };
-    link: {
-        skipLinkLabel: () => string;
-    };
     sidebar: {
         ariaLabels: {
             close: () => string;

package/lib/locales/pl-pl.js

@@ -65,6 +65,12 @@ const plPL = {
   heading: {
     backLinkAriaLabel: () => "Wstecz"
   },
+  link: {
+    skipLinkLabel: () => "Przejdź do treści"
+  },
+  loader: {
+    loading: () => "Ładowanie"
+  },
   message: {
     closeButtonAriaLabel: () => "Zamknij"
   },
@@ -99,9 +105,6 @@ const plPL = {
     placeholder: () => "Proszę wybierz...",
     noResultsForTerm: term => `Brak wyników dla "${term}"`
   },
-  link: {
-    skipLinkLabel: () => "Przejdź do treści"
-  },
   sidebar: {
     ariaLabels: {
       close: () => "Zamknij"

package/package.json

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