carbon-react 119.10.0 → 119.10.2

package/esm/components/grid/grid-item/grid-item.style.js

@@ -66,30 +66,27 @@ const StyledGridItem = styled.div`
   margin: 0;
   ${padding}
 
-  ${_ref => {
-  let {
-    alignSelf,
-    justifySelf,
-    gridArea = "auto / 1 / auto / 13",
-    gridColumn,
-    gridRow,
-    responsiveSettings
-  } = _ref;
-  return css`
+  ${({
+  alignSelf,
+  justifySelf,
+  gridArea = "auto / 1 / auto / 13",
+  gridColumn,
+  gridRow,
+  responsiveSettings
+}) => css`
     ${flexbox({
-    alignSelf,
-    justifySelf
-  })}
+  alignSelf,
+  justifySelf
+})}
     ${grid({
-    gridArea,
-    gridColumn,
-    gridRow
-  })};
+  gridArea,
+  gridColumn,
+  gridRow
+})};
 
     ${responsiveSettings && css`
       ${responsiveGridItem(responsiveSettings)};
     `}
-  `;
-}}
+  `}
 `;
 export default StyledGridItem;

package/esm/components/grouped-character/grouped-character.component.js

@@ -4,10 +4,9 @@ import PropTypes from "prop-types";
 import Textbox from "../textbox";
 import { generateGroups, toSum } from "./grouped-character.utils";
 import Logger from "../../__internal__/utils/logger";
-const buildCustomTarget = (_ref, value) => {
-  let {
-    target
-  } = _ref;
+const buildCustomTarget = ({
+  target
+}, value) => {
   const {
     name,
     id
@@ -24,17 +23,16 @@ const buildCustomTarget = (_ref, value) => {
 };
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const GroupedCharacter = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    defaultValue,
-    groups,
-    onBlur,
-    onChange,
-    separator: rawSeparator,
-    value: externalValue,
-    inputRef,
-    ...rest
-  } = _ref2;
+const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
+  defaultValue,
+  groups,
+  onBlur,
+  onChange,
+  separator: rawSeparator,
+  value: externalValue,
+  inputRef,
+  ...rest
+}, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue || "");
   const isControlled = externalValue !== undefined;
   const separator = rawSeparator.substring(0, 1); // Ensure max length is 1

package/esm/components/heading/heading.component.js

@@ -5,23 +5,22 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledHeading, StyledHeadingIcon, StyledSubHeader, StyledHeader, StyledSeparator, StyledHeaderHelp, StyledHeadingTitle, StyledDivider, StyledHeaderContent, StyledHeadingBackButton, StyledHeadingPills } from "./heading.style";
 import useLocale from "../../hooks/__internal__/useLocale";
-export const Heading = _ref => {
-  let {
-    children,
-    backLink,
-    divider = true,
-    help,
-    helpAriaLabel,
-    helpLink,
-    pills,
-    separator = false,
-    subheader,
-    subtitleId,
-    headingType = "h1",
-    title,
-    titleId,
-    ...rest
-  } = _ref;
+export const Heading = ({
+  children,
+  backLink,
+  divider = true,
+  help,
+  helpAriaLabel,
+  helpLink,
+  pills,
+  separator = false,
+  subheader,
+  subtitleId,
+  headingType = "h1",
+  title,
+  titleId,
+  ...rest
+}) => {
   const getHelp = () => {
     return /*#__PURE__*/React.createElement(StyledHeaderHelp, {
       "data-element": "help",

package/esm/components/heading/heading.style.js

@@ -19,13 +19,11 @@ const StyledHeaderContent = styled.div`
   align-items: flex-end;
 `;
 const StyledHeader = styled.div`
-  ${_ref => {
-  let {
-    divider,
-    subheader,
-    hasBackLink
-  } = _ref;
-  return css`
+  ${({
+  divider,
+  subheader,
+  hasBackLink
+}) => css`
     ${subheader && css`
       margin-bottom: 16px;
     `}
@@ -42,8 +40,7 @@ const StyledHeader = styled.div`
       display: grid;
       grid-template-columns: min-content auto;
     `}
-  `;
-}}
+  `}
 `;
 const StyledHeadingBackButton = styled(Link)`
   margin-right: 5px;
@@ -74,14 +71,11 @@ const StyledHeadingBackButton = styled(Link)`
 `;
 const StyledHeadingTitle = styled(Typography)`
   line-height: 32px;
-  ${_ref2 => {
-  let {
-    withMargin
-  } = _ref2;
-  return withMargin ? css`
+  ${({
+  withMargin
+}) => withMargin ? css`
           margin-right: 16px;
-        ` : null;
-}}
+        ` : null}
 `;
 const StyledHeadingPills = styled.span`
   line-height: 32px;
@@ -92,24 +86,18 @@ const StyledSubHeader = styled.div`
   margin-top: 5px;
   grid-row: 2;
 
-  ${_ref3 => {
-  let {
-    hasBackLink
-  } = _ref3;
-  return hasBackLink && css`
+  ${({
+  hasBackLink
+}) => hasBackLink && css`
       grid-column: 2;
-    `;
-}}
+    `}
 
-  ${_ref4 => {
-  let {
-    hasSeparator
-  } = _ref4;
-  return hasSeparator && css`
+  ${({
+  hasSeparator
+}) => hasSeparator && css`
       grid-row: 3;
       margin-top: 0px;
-    `;
-}}
+    `}
 `;
 const StyledHeadingIcon = styled(Icon)`
   height: 30px;

package/esm/components/help/help.component.js

@@ -8,24 +8,23 @@ import Events from "../../__internal__/utils/helpers/events";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import guid from "../../__internal__/utils/helpers/guid";
-const Help = _ref => {
-  let {
-    as,
-    ariaLabel = "help",
-    children,
-    className,
-    href,
-    helpId,
-    isFocused,
-    tabIndex = 0,
-    tooltipBgColor,
-    tooltipFontColor,
-    tooltipFlipOverrides,
-    tooltipId,
-    tooltipPosition = "top",
-    type = "help",
-    ...rest
-  } = _ref;
+const Help = ({
+  as,
+  ariaLabel = "help",
+  children,
+  className,
+  href,
+  helpId,
+  isFocused,
+  tabIndex = 0,
+  tooltipBgColor,
+  tooltipFontColor,
+  tooltipFlipOverrides,
+  tooltipId,
+  tooltipPosition = "top",
+  type = "help",
+  ...rest
+}) => {
   const defaultTooltipId = useRef(guid());
   const helpElement = useRef(null);
   const [isTooltipVisible, updateTooltipVisible] = useState(false);

package/esm/components/help/help.style.js

@@ -19,14 +19,11 @@ const StyledHelp = styled.div`
     color: var(--colorsUtilityYin065);
   }
 
-  ${_ref => {
-  let {
-    href
-  } = _ref;
-  return href && css`
+  ${({
+  href
+}) => href && css`
       cursor: pointer;
-    `;
-}}
+    `}
 
   &:focus ${StyledIcon},
   &:hover ${StyledIcon} {

package/esm/components/hr/hr.component.js

@@ -3,13 +3,12 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledHr from "./hr.style";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-const Hr = _ref => {
-  let {
-    adaptiveMxBreakpoint,
-    ml,
-    mr,
-    ...rest
-  } = _ref;
+const Hr = ({
+  adaptiveMxBreakpoint,
+  ml,
+  mr,
+  ...rest
+}) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveMxBreakpoint);
   let marginLeft = ml;
   let marginRight = mr;

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

@@ -3,13 +3,10 @@ import PropTypes from "prop-types";
 import merge from "lodash/merge";
 import Context from "../../__internal__/i18n-context";
 import enGB from "../../locales/en-gb";
-export const I18nProvider = _ref => {
-  let {
-    locale,
-    children
-  } = _ref;
-  return locale ? /*#__PURE__*/React.createElement(Context.Provider, {
-    value: merge({}, enGB, locale)
-  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
+export const I18nProvider = ({
+  locale,
+  children
+}) => locale ? /*#__PURE__*/React.createElement(Context.Provider, {
+  value: merge({}, enGB, locale)
+}, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 export default I18nProvider;

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

@@ -8,33 +8,32 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledIcon from "./icon.style";
 import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
 import { TabTitleContext } from "../tabs/__internal__/tab-title";
-const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "aria-hidden": ariaHidden,
-    ariaLabel,
-    bg,
-    bgShape,
-    bgSize = "small",
-    className,
-    color,
-    disabled,
-    focusable = true,
-    fontSize = "small",
-    id,
-    inputSize,
-    isPartOfInput,
-    tabIndex,
-    tooltipMessage,
-    tooltipPosition,
-    tooltipVisible,
-    tooltipBgColor,
-    tooltipFontColor,
-    tooltipFlipOverrides,
-    tooltipId,
-    type,
-    role,
-    ...rest
-  } = _ref;
+const Icon = /*#__PURE__*/React.forwardRef(({
+  "aria-hidden": ariaHidden,
+  ariaLabel,
+  bg,
+  bgShape,
+  bgSize = "small",
+  className,
+  color,
+  disabled,
+  focusable = true,
+  fontSize = "small",
+  id,
+  inputSize,
+  isPartOfInput,
+  tabIndex,
+  tooltipMessage,
+  tooltipPosition,
+  tooltipVisible,
+  tooltipBgColor,
+  tooltipFontColor,
+  tooltipFlipOverrides,
+  tooltipId,
+  type,
+  role,
+  ...rest
+}, ref) => {
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ICON_TOOLTIP_POSITIONS.includes(override));
   if (tooltipFlipOverrides) {
     !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? invariant(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;

package/esm/components/icon/icon.style.js

@@ -14,19 +14,18 @@ function adjustIconBgSize(fontSize, bgSize) {
   return bgSize ? iconConfig.backgroundSize[bgSize] : undefined;
 }
 const StyledIcon = styled.span`
-  ${_ref => {
-  let {
-    theme,
-    color,
-    bg,
-    isInteractive,
-    bgSize,
-    bgShape,
-    type,
-    fontSize,
-    disabled,
-    hasTooltip
-  } = _ref;
+  ${({
+  theme,
+  color,
+  bg,
+  isInteractive,
+  bgSize,
+  bgShape,
+  type,
+  fontSize,
+  disabled,
+  hasTooltip
+}) => {
   let finalColor;
   let finalHoverColor;
   let bgColor;

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

@@ -8,15 +8,14 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { ButtonBarContext } from "../button-bar/button-bar.component";
 import Logger from "../../__internal__/utils/logger";
 let onActionButtonWarnTriggered = false;
-const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "aria-label": ariaLabel,
-    onAction,
-    onClick,
-    children,
-    disabled,
-    ...rest
-  } = _ref;
+const IconButton = /*#__PURE__*/React.forwardRef(({
+  "aria-label": ariaLabel,
+  onAction,
+  onClick,
+  children,
+  disabled,
+  ...rest
+}, ref) => {
   if (!onActionButtonWarnTriggered && onAction) {
     onActionButtonWarnTriggered = true;
     Logger.deprecate("The `onAction` callback for the `IconButton` component is deprecated and will soon be removed. Please use `onClick` instead");

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

@@ -5,11 +5,9 @@ import { baseTheme } from "../../style/themes";
 const StyledIconButton = styled.button.attrs({
   type: "button"
 })`
-  ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return css`
+  ${({
+  disabled
+}) => css`
     && {
       ${space}
     }
@@ -42,8 +40,7 @@ const StyledIconButton = styled.button.attrs({
         border: none;
       }
     }
-  `;
-}}
+  `}
 `;
 StyledIconButton.defaultProps = {
   theme: baseTheme

package/esm/components/image/image.component.js

@@ -3,14 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { StyledImage } from "./image.style";
-export const Image = _ref => {
-  let {
-    alt,
-    decorative = false,
-    src,
-    children,
-    ...rest
-  } = _ref;
+export const Image = ({
+  alt,
+  decorative = false,
+  src,
+  children,
+  ...rest
+}) => {
   !(!src || !children) ? process.env.NODE_ENV !== "production" ? invariant(false, "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children.") : invariant(false) : void 0;
   !(!src || alt && typeof alt === "string" || decorative) ? process.env.NODE_ENV !== "production" ? invariant(false, "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element.") : invariant(false) : void 0;
   return /*#__PURE__*/React.createElement(StyledImage, _extends({

package/esm/components/image/image.style.js

@@ -1,32 +1,26 @@
 import styled, { css } from "styled-components";
 import { margin, layout, background } from "styled-system";
 import { baseTheme } from "../../style/themes";
-const StyledImage = styled.div.attrs(_ref => {
-  let {
-    src,
-    children,
-    hidden = false
-  } = _ref;
-  return {
-    ...(src && {
-      as: "img"
-    }),
-    children: src ? undefined : children,
-    src,
-    hidden
-  };
-})`
+const StyledImage = styled.div.attrs(({
+  src,
+  children,
+  hidden = false
+}) => ({
+  ...(src && {
+    as: "img"
+  }),
+  children: src ? undefined : children,
+  src,
+  hidden
+}))`
   ${margin}
   ${layout}
 
-  ${_ref2 => {
-  let {
-    as
-  } = _ref2;
-  return as !== "img" && css`
+  ${({
+  as
+}) => as !== "img" && css`
       ${background}
-    `;
-}}
+    `}
 `;
 StyledImage.defaultProps = {
   backgroundPosition: "center",

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -14,21 +14,20 @@ const columnWrapper = (children, gutter) => {
     }, input);
   });
 };
-const InlineInputs = _ref => {
-  let {
-    adaptiveLabelBreakpoint,
-    label,
-    labelId,
-    htmlFor,
-    children = null,
-    className = "",
-    gutter = "none",
-    inputWidth,
-    labelInline = true,
-    labelWidth,
-    required,
-    ...rest
-  } = _ref;
+const InlineInputs = ({
+  adaptiveLabelBreakpoint,
+  label,
+  labelId,
+  htmlFor,
+  children = null,
+  className = "",
+  gutter = "none",
+  inputWidth,
+  labelInline = true,
+  labelWidth,
+  required,
+  ...rest
+}) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let inlineLabel = labelInline;
   if (adaptiveLabelBreakpoint) {

package/esm/components/inline-inputs/inline-inputs.style.js

@@ -16,30 +16,22 @@ const spacings = {
 const StyledInlineInput = styled.div`
   flex: 1;
 
-  ${_ref => {
-  let {
-    gutter
-  } = _ref;
-  return gutter && css`
+  ${({
+  gutter
+}) => gutter && css`
       margin-bottom: 0;
       padding-left: ${spacings[gutter]}px;
-    `;
-}}
+    `}
 `;
 const StyledContentContainer = styled.div`
   display: flex;
-  flex: ${_ref2 => {
-  let {
-    inputWidth
-  } = _ref2;
-  return inputWidth ? `0 0 ${inputWidth}%` : 1;
-}};
+  flex: ${({
+  inputWidth
+}) => inputWidth ? `0 0 ${inputWidth}%` : 1};
 
-  ${_ref3 => {
-  let {
-    gutter
-  } = _ref3;
-  return gutter && css`
+  ${({
+  gutter
+}) => gutter && css`
       margin-bottom: 0;
       margin-left: -${spacings[gutter]}px;
 
@@ -66,35 +58,25 @@ const StyledContentContainer = styled.div`
           border-bottom-right-radius: var(--borderRadius050);
         }
       `}
-    `;
-}}
+    `}
 `;
 const StyledInlineInputs = styled.div`
   ${margin}
 
-  display: ${_ref4 => {
-  let {
-    labelInline
-  } = _ref4;
-  return labelInline ? `flex` : `block`;
-}};
+  display: ${({
+  labelInline
+}) => labelInline ? `flex` : `block`};
   align-items: center;
 
   ${StyledLabelContainer} {
     width: auto;
-    margin-bottom: ${_ref5 => {
-  let {
-    labelInline
-  } = _ref5;
-  return labelInline ? `0px` : `8px`;
-}};
+    margin-bottom: ${({
+  labelInline
+}) => labelInline ? `0px` : `8px`};
     padding-right: 16px;
-    flex: 0 0 ${_ref6 => {
-  let {
-    labelWidth
-  } = _ref6;
-  return labelWidth ? `${labelWidth}%` : "auto";
-}};
+    flex: 0 0 ${({
+  labelWidth
+}) => labelWidth ? `${labelWidth}%` : "auto"};
   }
 
   input {