carbon-react 119.9.3 → 119.10.1

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

@@ -2,22 +2,19 @@ import React from "react";
 import PropTypes from "prop-types";
 import { StyledButtonToggleIcon } from "./button-toggle.style";
 import Icon from "../icon";
-const ButtonToggleIcon = _ref => {
-  let {
-    buttonIcon,
-    buttonIconSize,
-    disabled,
-    hasContent
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledButtonToggleIcon, {
-    buttonIconSize: buttonIconSize,
-    hasContent: hasContent
-  }, /*#__PURE__*/React.createElement(Icon, {
-    "aria-hidden": true,
-    type: buttonIcon,
-    fontSize: buttonIconSize,
-    bgSize: "extra-small",
-    disabled: disabled
-  }));
-};
+const ButtonToggleIcon = ({
+  buttonIcon,
+  buttonIconSize,
+  disabled,
+  hasContent
+}) => /*#__PURE__*/React.createElement(StyledButtonToggleIcon, {
+  buttonIconSize: buttonIconSize,
+  hasContent: hasContent
+}, /*#__PURE__*/React.createElement(Icon, {
+  "aria-hidden": true,
+  type: buttonIcon,
+  fontSize: buttonIconSize,
+  bgSize: "extra-small",
+  disabled: disabled
+}));
 export default ButtonToggleIcon;

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

@@ -11,27 +11,26 @@ import { InputGroupContext } from "../../__internal__/input-behaviour";
 let deprecateCheckedWarnTriggered = false;
 let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-export const ButtonToggle = _ref => {
-  let {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    buttonIcon,
-    buttonIconSize = "small",
-    checked,
-    children,
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    disabled,
-    grouped,
-    name,
-    onBlur,
-    onFocus,
-    onClick,
-    pressed,
-    size = "medium",
-    value
-  } = _ref;
+export const ButtonToggle = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  buttonIcon,
+  buttonIconSize = "small",
+  checked,
+  children,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  disabled,
+  grouped,
+  name,
+  onBlur,
+  onFocus,
+  onClick,
+  pressed,
+  size = "medium",
+  value
+}) => {
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
   if (checked !== undefined && !deprecateCheckedWarnTriggered) {
     deprecateCheckedWarnTriggered = true;

package/esm/components/button-toggle/button-toggle.style.js

@@ -41,16 +41,13 @@ const StyledButtonToggle = styled.button`
   box-sizing: border-box;
   max-width: 100%;
 
-  ${_ref => {
-  let {
-    size
-  } = _ref;
-  return css`
+  ${({
+  size
+}) => css`
     height: ${heightConfig[size]}px;
     padding: 0 ${paddingConfig[size]}px;
     font-size: ${fontSizeConfig[size]}px;
-  `;
-}}
+  `}
   font-weight: 700;
   background-color: transparent;
   cursor: pointer;
@@ -67,14 +64,11 @@ const StyledButtonToggle = styled.button`
   &[aria-pressed="true"] {
     background-color: var(--colorsActionMinor300);
     color: var(--colorsActionMinor600);
-    ${_ref2 => {
-  let {
-    allowDeselect
-  } = _ref2;
-  return !allowDeselect && css`
+    ${({
+  allowDeselect
+}) => !allowDeselect && css`
         cursor: auto;
-      `;
-}}
+      `}
   }
 
   :not([aria-pressed="true"]):not(:disabled):hover {
@@ -90,23 +84,18 @@ const StyledButtonToggle = styled.button`
     color: var(--colorsActionMinor500);
   }
 
-  ${_ref3 => {
-  let {
-    buttonIcon,
-    buttonIconSize,
-    size
-  } = _ref3;
-  return buttonIcon && buttonIconSize === "large" && css`
+  ${({
+  buttonIcon,
+  buttonIconSize,
+  size
+}) => buttonIcon && buttonIconSize === "large" && css`
       height: ${heightLargeIconConfig[size]}px;
       padding: 0 ${paddingLargeIconConfig[size]}px;
       flex-direction: column;
-    `;
-}}
-  ${_ref4 => {
-  let {
-    disabled
-  } = _ref4;
-  return disabled && css`
+    `}
+  ${({
+  disabled
+}) => disabled && css`
       & {
         border-color: var(--colorsActionDisabled500);
         color: var(--colorsActionMinorYin030);
@@ -115,25 +104,19 @@ const StyledButtonToggle = styled.button`
         }
       }
       cursor: not-allowed;
-    `;
-}};
+    `};
 `;
 const iconFontSizes = {
   smallIcon: 16,
   largeIcon: 32
 };
 const StyledButtonToggleIcon = styled.div`
-  ${_ref5 => {
-  let {
-    hasContent
-  } = _ref5;
-  return hasContent && `margin-right: 8px;`;
-}}
-  ${_ref6 => {
-  let {
-    buttonIconSize
-  } = _ref6;
-  return buttonIconSize === "large" && css`
+  ${({
+  hasContent
+}) => hasContent && `margin-right: 8px;`}
+  ${({
+  buttonIconSize
+}) => buttonIconSize === "large" && css`
       margin-right: 0;
       ${StyledIcon} {
         margin-right: 0;
@@ -148,18 +131,15 @@ const StyledButtonToggleIcon = styled.div`
       .carbon-icon__svg--credit-card-slash {
         margin-left: 6px;
       }
-    `;
-}}
+    `}
 `;
 const StyledButtonToggleWrapper = styled.div`
   display: inline-block;
   vertical-align: middle;
 
-  ${_ref7 => {
-  let {
-    grouped
-  } = _ref7;
-  return css`
+  ${({
+  grouped
+}) => css`
       ${!grouped && css`
         &&&& {
           ${StyledButtonToggle} {
@@ -185,22 +165,18 @@ const StyledButtonToggleWrapper = styled.div`
           }
         }
       `}
-    `;
-}}
+    `}
 
   &:not(:first-of-type) {
     margin-left: 8px;
   }
 
-  ${_ref8 => {
-  let {
-    grouped
-  } = _ref8;
-  return grouped && css`
+  ${({
+  grouped
+}) => grouped && css`
       &:not(:first-of-type) {
         margin-left: -1px;
       }
-    `;
-}};
+    `};
 `;
 export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper };

package/esm/components/carbon-provider/carbon-provider.component.js

@@ -5,13 +5,12 @@ import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-
 import { mintTheme } from "../../style/themes";
 import { TopModalContextProvider } from "./top-modal-context";
 export const NewValidationContext = /*#__PURE__*/createContext({});
-export const CarbonProvider = _ref => {
-  let {
-    children,
-    theme = mintTheme,
-    validationRedesignOptIn = false,
-    roundedCornersOptOut = false
-  } = _ref;
+export const CarbonProvider = ({
+  children,
+  theme = mintTheme,
+  validationRedesignOptIn = false,
+  roundedCornersOptOut = false
+}) => {
   const {
     roundedCornersOptOut: existingRoundedCornersOptOut
   } = useContext(NewValidationContext);

package/esm/components/carbon-provider/top-modal-context.js

@@ -2,10 +2,9 @@ import React, { createContext, useState, useEffect, useRef } from "react";
 const TopModalContext = /*#__PURE__*/createContext({
   topModal: null
 });
-export const TopModalContextProvider = _ref => {
-  let {
-    children
-  } = _ref;
+export const TopModalContextProvider = ({
+  children
+}) => {
   const [topModal, setTopModal] = useState(null);
 
   // can't add the setter to the global list inside useEffect because that doesn't run until

package/esm/components/card/card-column/card-column.component.js

@@ -1,15 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import StyledCardColumn from "./card-column.style";
-const CardColumn = _ref => {
-  let {
-    align = "center",
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledCardColumn, {
-    align: align,
-    "data-element": "card-column"
-  }, children);
-};
+const CardColumn = ({
+  align = "center",
+  children
+}) => /*#__PURE__*/React.createElement(StyledCardColumn, {
+  align: align,
+  "data-element": "card-column"
+}, children);
 CardColumn.displayName = "CardColumn";
 export default CardColumn;

package/esm/components/card/card-column/card-column.style.js

@@ -1,11 +1,8 @@
 import styled from "styled-components";
 const StyledCardColumn = styled.div`
   flex-grow: 1;
-  text-align: ${_ref => {
-  let {
-    align
-  } = _ref;
-  return align;
-}};
+  text-align: ${({
+  align
+}) => align};
 `;
 export default StyledCardColumn;

package/esm/components/card/card-footer/card-footer.component.js

@@ -4,13 +4,12 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardFooter from "./card-footer.style";
 import CardContext from "../__internal__/card-context";
-const CardFooter = _ref => {
-  let {
-    spacing = "medium",
-    children,
-    variant = "default",
-    ...rest
-  } = _ref;
+const CardFooter = ({
+  spacing = "medium",
+  children,
+  variant = "default",
+  ...rest
+}) => {
   const {
     roundness
   } = useContext(CardContext);

package/esm/components/card/card-footer/card-footer.style.js

@@ -14,13 +14,11 @@ const paddingSizes = {
 const StyledCardFooter = styled.div`
   ${space}
 
-  ${_ref => {
-  let {
-    spacing,
-    variant,
-    roundness = "default"
-  } = _ref;
-  return css`
+  ${({
+  spacing,
+  variant,
+  roundness = "default"
+}) => css`
     background-color: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
     border-top: var(--colorsUtilityMajor100);
     border-top-width: 1px;
@@ -42,7 +40,6 @@ const StyledCardFooter = styled.div`
       margin: 0;
       padding: ${paddingSizes[spacing]};
     }
-  `;
-}}
+  `}
 `;
 export default StyledCardFooter;

package/esm/components/card/card-row/card-row.component.js

@@ -3,12 +3,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardRow from "./card-row.style";
-const CardRow = _ref => {
-  let {
-    children,
-    spacing = "medium",
-    ...rest
-  } = _ref;
+const CardRow = ({
+  children,
+  spacing = "medium",
+  ...rest
+}) => {
   return /*#__PURE__*/React.createElement(StyledCardRow, _extends({
     "data-element": "card-row",
     spacing: spacing

package/esm/components/card/card-row/card-row.style.js

@@ -8,15 +8,12 @@ const paddingSizes = {
 };
 const StyledCardRow = styled.div`
   display: flex;
-  ${_ref => {
-  let {
-    spacing
-  } = _ref;
-  return css`
+  ${({
+  spacing
+}) => css`
     padding-top: ${paddingSizes[spacing]};
     padding-bottom: ${paddingSizes[spacing]};
-  `;
-}}
+  `}
 
   ${padding}
 `;

package/esm/components/card/card.component.js

@@ -11,23 +11,22 @@ function hasDisplayName(child, displayName) {
   return child.type.displayName === displayName;
 }
 let isDeprecationWarningTriggered = false;
-const Card = _ref => {
-  let {
-    "data-element": dataElement,
-    "data-role": dataRole,
-    dataRole: oldDataRole,
-    action,
-    children,
-    cardWidth = "500px",
-    draggable,
-    height,
-    interactive,
-    spacing = "medium",
-    boxShadow,
-    hoverBoxShadow,
-    roundness = "default",
-    ...rest
-  } = _ref;
+const Card = ({
+  "data-element": dataElement,
+  "data-role": dataRole,
+  dataRole: oldDataRole,
+  action,
+  children,
+  cardWidth = "500px",
+  draggable,
+  height,
+  interactive,
+  spacing = "medium",
+  boxShadow,
+  hoverBoxShadow,
+  roundness = "default",
+  ...rest
+}) => {
   if (!isDeprecationWarningTriggered && oldDataRole) {
     isDeprecationWarningTriggered = true;
     Logger.deprecate("The `dataRole` prop of `Card` is now deprecated. Please use the kebab-case version `data-role` instead.");

package/esm/components/card/card.style.js

@@ -7,18 +7,16 @@ const paddingSizes = {
   large: "0 48px"
 };
 const StyledCard = styled.div`
-  ${_ref => {
-  let {
-    cardWidth,
-    interactive,
-    draggable,
-    height,
-    spacing,
-    boxShadow = "boxShadow050",
-    hoverBoxShadow = "boxShadow100",
-    roundness
-  } = _ref;
-  return css`
+  ${({
+  cardWidth,
+  interactive,
+  draggable,
+  height,
+  spacing,
+  boxShadow = "boxShadow050",
+  hoverBoxShadow = "boxShadow100",
+  roundness
+}) => css`
     background-color: var(--colorsUtilityYang100);
     border: none;
     border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
@@ -52,8 +50,7 @@ const StyledCard = styled.div`
     ::-moz-focus-inner {
       border: 0;
     }
-  `;
-}}
+  `}
 `;
 StyledCard.defaultProps = {
   theme: baseTheme

package/esm/components/carousel/carousel.component.js

@@ -6,18 +6,17 @@ import { CarouselPreviousButtonWrapperStyle, CarouselNextButtonWrapperStyle, Car
 import guid from "../../__internal__/utils/helpers/guid";
 const NEXT = "next";
 const PREVIOUS = "previous";
-export const Carousel = _ref => {
-  let {
-    children,
-    className,
-    enableSlideSelector = true,
-    enablePreviousButton = true,
-    enableNextButton = true,
-    initialSlideIndex = 0,
-    onSlideChange,
-    slideIndex,
-    ...props
-  } = _ref;
+export const Carousel = ({
+  children,
+  className,
+  enableSlideSelector = true,
+  enablePreviousButton = true,
+  enableNextButton = true,
+  initialSlideIndex = 0,
+  onSlideChange,
+  slideIndex,
+  ...props
+}) => {
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = useRef(NEXT);
   const lastSlideIndexProp = useRef(slideIndex);

package/esm/components/carousel/carousel.style.js

@@ -31,11 +31,9 @@ const CarouselStyledIconRight = styled(CarouselStyledIcon)`
 const CarouselButtonStyle = styled.button.attrs({
   type: "button"
 })`
-  ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return css`
+  ${({
+  disabled
+}) => css`
     border: none;
     border-radius: var(--borderRadius400);
     width: 40px;
@@ -79,8 +77,7 @@ const CarouselButtonStyle = styled.button.attrs({
         outline: none;
       `}
     }
-  `;
-}}
+  `}
 `;
 const CarouselSelectorInputStyle = styled.input`
   display: none;
@@ -124,19 +121,16 @@ const CarouselSliderWrapper = styled.div`
   display: flex;
   position: relative;
 
-  ${_ref2 => {
-  let {
-    elementIndex
-  } = _ref2;
-  return css`
+  ${({
+  elementIndex
+}) => css`
     left: ${10 - 80 * elementIndex}%;
 
     ${SlideStyle}:nth-of-type(${elementIndex + 1}) {
       transform: scale(1);
       opacity: 1;
     }
-  `;
-}}
+  `}
 `;
 const CarouselWrapperStyle = styled.div`
   .carbon-carousel__content {

package/esm/components/carousel/slide/slide.style.js

@@ -1,10 +1,8 @@
 import styled, { css } from "styled-components";
 const SlideStyle = styled.div`
-  ${_ref => {
-  let {
-    onClick
-  } = _ref;
-  return css`
+  ${({
+  onClick
+}) => css`
     box-sizing: border-box;
     display: inline-block;
     width: 100%;
@@ -27,8 +25,7 @@ const SlideStyle = styled.div`
         cursor: pointer;
       }
     `}
-  `;
-}}
+  `}
 `;
 
 // eslint-disable-next-line import/prefer-default-export

package/esm/components/checkbox/checkbox-group.component.js

@@ -1,14 +1,21 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import StyledCheckboxGroup from "./checkbox-group.style";
+import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
 import Fieldset from "../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
+import Box from "../../components/box";
+import { ErrorBorder } from "../../components/textbox/textbox.style";
 export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
 export const CheckboxGroup = props => {
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const {
     children,
     legend,
@@ -20,9 +27,42 @@ export const CheckboxGroup = props => {
     legendWidth,
     legendAlign,
     legendSpacing,
-    tooltipPosition
+    legendHelp,
+    tooltipPosition,
+    inline
   } = props;
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
+    legend: legend,
+    inline: legendInline,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
+    error: error,
+    warning: warning,
+    info: info,
+    isRequired: required
+  }, tagComponent("checkboxgroup", props), {
+    blockGroupBehaviour: !(error || warning)
+  }, filterStyledSystemMarginProps(props)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning),
+    inline: inline
+  }), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
+    "data-component": "checkbox-group",
+    legendInline: legendInline,
+    inline: inline
+  }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+    value: {
+      error: !!error,
+      warning: !!warning
+    }
+  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
+    marginBottom: undefined
+  }, children))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(Fieldset, _extends({
     legend: legend,
@@ -47,7 +87,7 @@ export const CheckboxGroup = props => {
     }
   }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: undefined
-  }, children)))));
+  }, children))))));
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 export default CheckboxGroup;