carbon-react 119.10.0 → 119.10.2

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -181,26 +181,23 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
     role: "radiogroup",
     legend: legend,
     isRequired: required
-  }, validationOnLegend && validationProps, tagComponent("simple-color-picker", props), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, _ref => {
-    let {
-      onMouseEnter,
-      onMouseLeave
-    } = _ref;
-    return /*#__PURE__*/React.createElement(StyledColorOptions, _extends({
-      maxWidth: maxWidth,
-      childWidth: childWidth,
-      ref: internalRef,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
-    }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
-      name: name,
-      value: value,
-      onChange: onChange,
-      onMouseDown: handleOnMouseDown,
-      onKeyDown: onKeyDownHandler,
-      onBlur: handleOnBlur
-    }, navigationGrid));
-  }), !validationOnLegend && /*#__PURE__*/React.createElement(ValidationIcon, _extends({}, validationProps, {
+  }, validationOnLegend && validationProps, tagComponent("simple-color-picker", props), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
+    onMouseEnter,
+    onMouseLeave
+  }) => /*#__PURE__*/React.createElement(StyledColorOptions, _extends({
+    maxWidth: maxWidth,
+    childWidth: childWidth,
+    ref: internalRef,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
+    name: name,
+    value: value,
+    onChange: onChange,
+    onMouseDown: handleOnMouseDown,
+    onKeyDown: onKeyDownHandler,
+    onBlur: handleOnBlur
+  }, navigationGrid))), !validationOnLegend && /*#__PURE__*/React.createElement(ValidationIcon, _extends({}, validationProps, {
     tooltipFlipOverrides: ["top", "bottom"]
   }))));
 });

package/esm/components/simple-color-picker/simple-color-picker.style.js

@@ -11,13 +11,10 @@ const StyledContent = styled.div`
   }
 `;
 const StyledColorOptions = styled.div`
-  max-width: ${_ref => {
-  let {
-    maxWidth,
-    childWidth
-  } = _ref;
-  return getRoundedMaxWidth(maxWidth, childWidth);
-}}px;
+  max-width: ${({
+  maxWidth,
+  childWidth
+}) => getRoundedMaxWidth(maxWidth, childWidth)}px;
 
   padding: 0;
   display: flex;
@@ -25,12 +22,11 @@ const StyledColorOptions = styled.div`
   border-left: ${BORDER_WIDTH}px solid transparent;
   border-top: ${BORDER_WIDTH}px solid transparent;
 
-  ${_ref2 => {
-  let {
-    error,
-    info,
-    warning
-  } = _ref2;
+  ${({
+  error,
+  info,
+  warning
+}) => {
   if (error) return css`
         outline: var(--borderWidth200) solid var(--colorsSemanticNegative500);
       `;

package/esm/components/split-button/split-button-children.style.js

@@ -28,13 +28,11 @@ export const borderRadiusStyling = `
 `;
 const StyledSplitButtonChildrenContainer = styled.div`
   border-radius: var(--borderRadius100);
-  ${_ref => {
-  let {
-    theme,
-    align,
-    minWidth
-  } = _ref;
-  return css`
+  ${({
+  theme,
+  align,
+  minWidth
+}) => css`
     background-color: var(--colorsActionMajorYang100);
     min-width: ${minWidth}px;
     white-space: nowrap;
@@ -55,8 +53,7 @@ const StyledSplitButtonChildrenContainer = styled.div`
         margin-top: 3px;
       }
     }
-  `;
-}}
+  `}
 `;
 StyledSplitButtonChildrenContainer.defaultProps = {
   theme: BaseTheme

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

@@ -7,14 +7,12 @@ const horizontalPaddingSizes = {
   large: 14
 };
 const StyledSplitButtonToggle = styled(StyledButton)`
-  ${_ref => {
-  let {
-    buttonType,
-    disabled,
-    displayed,
-    size
-  } = _ref;
-  return css`
+  ${({
+  buttonType,
+  disabled,
+  displayed,
+  size
+}) => css`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
 
@@ -69,7 +67,6 @@ const StyledSplitButtonToggle = styled(StyledButton)`
         color: var(--colorsActionMajorYang100);
       }
     }
-  `;
-}}
+  `}
 `;
 export default StyledSplitButtonToggle;

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

@@ -15,22 +15,21 @@ import { baseTheme } from "../../style/themes";
 import useChildButtons from "../../hooks/__internal__/useChildButtons";
 import SplitButtonContext from "./__internal__/split-button.context";
 const CONTENT_WIDTH_RATIO = 0.75;
-export const SplitButton = _ref => {
-  let {
-    align = "left",
-    buttonType = "secondary",
-    children,
-    disabled = false,
-    iconPosition = "before",
-    iconType,
-    onClick,
-    size = "medium",
-    subtext,
-    text,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    ...rest
-  } = _ref;
+export const SplitButton = ({
+  align = "left",
+  buttonType = "secondary",
+  children,
+  disabled = false,
+  iconPosition = "before",
+  iconType,
+  onClick,
+  size = "medium",
+  subtext,
+  text,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  ...rest
+}) => {
   const theme = useContext(ThemeContext) || baseTheme;
   const buttonLabelId = useRef(guid());
   const toggleButton = useRef(null);

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -4,17 +4,16 @@ import PropTypes from "prop-types";
 import { StyledStepSequenceItem, StyledStepSequenceItemContent, StyledStepSequenceItemIndicator, StyledStepSequenceItemHiddenLabel } from "./step-sequence-item.style";
 import Icon from "../../icon";
 import { StepSequenceContext } from "../step-sequence.component";
-export const StepSequenceItem = _ref => {
-  let {
-    hideIndicator = false,
-    indicator,
-    status = "incomplete",
-    hiddenCompleteLabel,
-    hiddenCurrentLabel,
-    children,
-    ariaLabel,
-    ...rest
-  } = _ref;
+export const StepSequenceItem = ({
+  hideIndicator = false,
+  indicator,
+  status = "incomplete",
+  hiddenCompleteLabel,
+  hiddenCurrentLabel,
+  children,
+  ariaLabel,
+  ...rest
+}) => {
   const {
     orientation
   } = useContext(StepSequenceContext);

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.js

@@ -8,11 +8,10 @@ export const StyledStepSequenceItem = styled.li`
   list-style-type: none;
   color: var(--colorsUtilityYin055);
 
-  ${_ref => {
-  let {
-    orientation,
-    status
-  } = _ref;
+  ${({
+  orientation,
+  status
+}) => {
   const side = orientation === "vertical" ? "left" : "top";
   return css`
       &::before {

package/esm/components/step-sequence/step-sequence.component.js

@@ -5,12 +5,11 @@ import StyledStepSequence from "./step-sequence.style";
 export const StepSequenceContext = /*#__PURE__*/React.createContext({
   orientation: "horizontal"
 });
-export const StepSequence = _ref => {
-  let {
-    children,
-    orientation = "horizontal",
-    ...props
-  } = _ref;
+export const StepSequence = ({
+  children,
+  orientation = "horizontal",
+  ...props
+}) => {
   return /*#__PURE__*/React.createElement(StyledStepSequence, _extends({
     "data-component": "step-sequence",
     orientation: orientation,

package/esm/components/step-sequence/step-sequence.style.js

@@ -6,15 +6,12 @@ const StyledStepSequence = styled.ol`
   margin: 0;
   font-weight: bold;
 
-  ${_ref => {
-  let {
-    orientation
-  } = _ref;
-  return orientation === "vertical" && css`
+  ${({
+  orientation
+}) => orientation === "vertical" && css`
       flex-direction: column;
       height: 100%;
-    `;
-}}
+    `}
 
   ${space}
 `;

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

@@ -2,12 +2,10 @@ import styled, { css } from "styled-components";
 import StyledLoader from "../../loader/loader.style";
 import StyledLoaderSquare from "../../loader/loader-square.style";
 const SwitchSliderPanel = styled.div`
-  ${_ref => {
-  let {
-    isLoading,
-    size
-  } = _ref;
-  return css`
+  ${({
+  isLoading,
+  size
+}) => css`
     border: 0;
     color: var(--colorsActionMinorYang100);
     margin: auto;
@@ -58,7 +56,6 @@ const SwitchSliderPanel = styled.div`
         }
       }
     `}
-  `;
-}}
+  `}
 `;
 export default SwitchSliderPanel;

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

@@ -5,17 +5,16 @@ import StyledSwitchSlider from "./switch-slider.style";
 import SwitchSliderPanel from "./switch-slider-panel.style";
 import ValidationIcon from "../../../__internal__/validations/validation-icon.component";
 import useLocale from "../../../hooks/__internal__/useLocale";
-const SwitchSlider = _ref => {
-  let {
-    checked,
-    disabled,
-    loading,
-    size,
-    error,
-    warning,
-    info,
-    useValidationIcon
-  } = _ref;
+const SwitchSlider = ({
+  checked,
+  disabled,
+  loading,
+  size,
+  error,
+  warning,
+  info,
+  useValidationIcon
+}) => {
   const l = useLocale();
   const panelContent = checked ? l.switch.on() : l.switch.off();
   const switchSliderStyleProps = {

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

@@ -3,17 +3,15 @@ import SwitchSliderPanel from "./switch-slider-panel.style";
 import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
 import baseTheme from "../../../style/themes/base";
 const StyledSwitchSlider = styled.span`
-  ${_ref => {
-  let {
-    checked,
-    isLoading,
-    disabled,
-    size,
-    error,
-    warning,
-    theme
-  } = _ref;
-  return css`
+  ${({
+  checked,
+  isLoading,
+  disabled,
+  size,
+  error,
+  warning,
+  theme
+}) => css`
     display: flex;
     font-size: 12px;
     font-weight: bold;
@@ -110,8 +108,7 @@ const StyledSwitchSlider = styled.span`
       right: -30px;
       height: 100%;
     }
-  `;
-}}
+  `}
 `;
 StyledSwitchSlider.defaultProps = {
   theme: baseTheme

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

@@ -13,39 +13,38 @@ import Box from "../box";
 import Label from "../../__internal__/label";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    autoFocus,
-    id,
-    label,
-    onChange,
-    onBlur,
-    onFocus,
-    value,
-    checked,
-    defaultChecked,
-    disabled,
-    loading,
-    reverse = true,
-    validationOnLabel = false,
-    labelInline = false,
-    labelSpacing,
-    labelHelp,
-    fieldHelpInline,
-    size,
-    name,
-    adaptiveLabelBreakpoint,
-    tooltipPosition,
-    error,
-    warning,
-    info,
-    "data-component": dataComponent = "switch",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    helpAriaLabel,
-    inputRef,
-    ...rest
-  } = _ref;
+const Switch = /*#__PURE__*/React.forwardRef(({
+  autoFocus,
+  id,
+  label,
+  onChange,
+  onBlur,
+  onFocus,
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  loading,
+  reverse = true,
+  validationOnLabel = false,
+  labelInline = false,
+  labelSpacing,
+  labelHelp,
+  fieldHelpInline,
+  size,
+  name,
+  adaptiveLabelBreakpoint,
+  tooltipPosition,
+  error,
+  warning,
+  info,
+  "data-component": dataComponent = "switch",
+  "data-element": dataElement,
+  "data-role": dataRole,
+  helpAriaLabel,
+  inputRef,
+  ...rest
+}, ref) => {
   const isControlled = checked !== undefined;
   const {
     validationRedesignOptIn

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

@@ -9,11 +9,9 @@ import StyledSwitchSlider from "./__internal__/switch-slider.style";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
 export const ErrorBorder = styled.span`
-  ${_ref => {
-  let {
-    warning
-  } = _ref;
-  return css`
+  ${({
+  warning
+}) => css`
       position: absolute;
       z-index: 6;
       width: 2px;
@@ -21,8 +19,7 @@ export const ErrorBorder = styled.span`
       left: -12px;
       bottom: -4px;
       top: 2px;
-    `;
-}}
+    `}
 `;
 export const StyledHintText = styled.div`
   margin-top: 8px;
@@ -32,14 +29,12 @@ export const StyledHintText = styled.div`
   font-weight: 400;
 `;
 const StyledSwitch = styled.div`
-  ${_ref2 => {
-  let {
-    fieldHelpInline,
-    labelInline,
-    reverse,
-    size
-  } = _ref2;
-  return css`
+  ${({
+  fieldHelpInline,
+  labelInline,
+  reverse,
+  size
+}) => css`
     ${margin}
     ${FieldLineStyle} {
       display: flex;
@@ -174,8 +169,7 @@ const StyledSwitch = styled.div`
         `}
       `}
     `}
-  `;
-}}
+  `}
 `;
 StyledSwitch.defaultProps = {
   theme: baseTheme

package/esm/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -8,35 +8,34 @@ import Icon from "../../../icon";
 import Events from "../../../../__internal__/utils/helpers/events";
 import { TooltipProvider } from "../../../../__internal__/tooltip-provider";
 export const TabTitleContext = /*#__PURE__*/React.createContext({});
-const TabTitle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    isTabSelected,
-    dataTabId,
-    "data-role": dataRole,
-    title,
-    position,
-    error,
-    warning,
-    info,
-    size = "default",
-    onClick,
-    titlePosition = "before",
-    siblings,
-    errorMessage = "",
-    warningMessage = "",
-    infoMessage = "",
-    borders,
-    alternateStyling = false,
-    noLeftBorder = false,
-    noRightBorder = false,
-    customLayout,
-    isInSidebar,
-    href,
-    onKeyDown,
-    align,
-    tabIndex,
-    ...tabTitleProps
-  } = _ref;
+const TabTitle = /*#__PURE__*/React.forwardRef(({
+  isTabSelected,
+  dataTabId,
+  "data-role": dataRole,
+  title,
+  position,
+  error,
+  warning,
+  info,
+  size = "default",
+  onClick,
+  titlePosition = "before",
+  siblings,
+  errorMessage = "",
+  warningMessage = "",
+  infoMessage = "",
+  borders,
+  alternateStyling = false,
+  noLeftBorder = false,
+  noRightBorder = false,
+  customLayout,
+  isInSidebar,
+  href,
+  onKeyDown,
+  align,
+  tabIndex,
+  ...tabTitleProps
+}, ref) => {
   const isHref = !!href;
   const hasAlternateStyling = alternateStyling || isInSidebar;
   const hasFailedValidation = error || warning || info;