carbon-react 119.10.0 → 119.10.2

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -15,11 +15,9 @@ const StyledToolbarButton = styled.button.attrs({
     width: auto;
   }
 
-  ${_ref => {
-  let {
-    isActive
-  } = _ref;
-  return css`
+  ${({
+  isActive
+}) => css`
     :focus,
     :active {
       outline: 2px solid var(--colorsSemanticFocus500);
@@ -35,7 +33,6 @@ const StyledToolbarButton = styled.button.attrs({
     ${isActive && css`
       background-color: var(--colorsActionMinor200);
     `}
-  `;
-}}
+  `}
 `;
 export default StyledToolbarButton;

package/esm/components/text-editor/__internal__/toolbar/toolbar.component.js

@@ -7,14 +7,13 @@ import Icon from "../../../icon";
 import Tooltip from "../../../tooltip";
 import useLocale from "../../../../hooks/__internal__/useLocale";
 import { BOLD, ITALIC, UNORDERED_LIST, ORDERED_LIST } from "../../types";
-const Toolbar = _ref => {
-  let {
-    activeControls,
-    canFocus,
-    toolbarElements,
-    setBlockStyle,
-    setInlineStyle
-  } = _ref;
+const Toolbar = ({
+  activeControls,
+  canFocus,
+  toolbarElements,
+  setBlockStyle,
+  setInlineStyle
+}) => {
   const {
     textEditor
   } = useLocale();

package/esm/components/text-editor/__internal__/utils/utils.js

@@ -14,8 +14,7 @@ export const computeBlockType = (char, type) => {
 /*
 Returns default block-level metadata for various block type. Empty object otherwise.
 */
-const getDefaultBlockData = function (blockType) {
-  let initialData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+const getDefaultBlockData = (blockType, initialData = {}) => {
   switch (blockType) {
     case ORDERED_LIST:
       return {};
@@ -29,8 +28,7 @@ const getDefaultBlockData = function (blockType) {
 /*
 Changes the block type of the current block.
 */
-export const resetBlockType = function (value) {
-  let newType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "unstyled";
+export const resetBlockType = (value, newType = "unstyled") => {
   const contentState = value.getCurrentContent();
   const selectionState = value.getSelection();
   const key = selectionState.getStartKey();

package/esm/components/text-editor/text-editor.component.js

@@ -13,22 +13,21 @@ import { BOLD, ITALIC, UNORDERED_LIST, ORDERED_LIST } from "./types";
 const NUMBERS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const INLINE_STYLES = [BOLD, ITALIC];
 export const EditorContext = /*#__PURE__*/React.createContext({});
-const TextEditor = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    characterLimit = 3000,
-    labelText,
-    onChange,
-    value,
-    required,
-    error,
-    warning,
-    info,
-    toolbarElements,
-    rows,
-    previews,
-    onLinkAdded,
-    ...rest
-  } = _ref;
+const TextEditor = /*#__PURE__*/React.forwardRef(({
+  characterLimit = 3000,
+  labelText,
+  onChange,
+  value,
+  required,
+  error,
+  warning,
+  info,
+  toolbarElements,
+  rows,
+  previews,
+  onLinkAdded,
+  ...rest
+}, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const [inlines, setInlines] = useState([]);
   const [activeInlines, setActiveInlines] = useState({});

package/esm/components/text-editor/text-editor.style.js

@@ -10,13 +10,11 @@ StyledEditorWrapper.defaultProps = {
   theme: baseTheme
 };
 const StyledEditorContainer = styled.div`
-  ${_ref => {
-  let {
-    hasError,
-    rows,
-    hasPreview
-  } = _ref;
-  return css`
+  ${({
+  hasError,
+  rows,
+  hasPreview
+}) => css`
     border-radius: var(--borderRadius050);
     min-height: ${rows ? `${rows * lineHeight}` : `${hasPreview ? 125 : 220}`}px;
     min-width: 320px;
@@ -56,16 +54,13 @@ const StyledEditorContainer = styled.div`
 
     background-color: var(--colorsUtilityYang100);
     outline: ${hasError ? "2px solid var(--colorsSemanticNegative500)" : "1px solid var(--colorsUtilityMajor200)"};
-  `;
-}}
+  `}
 `;
 const StyledEditorOutline = styled.div`
-  ${_ref2 => {
-  let {
-    isFocused,
-    hasError
-  } = _ref2;
-  return css`
+  ${({
+  isFocused,
+  hasError
+}) => css`
     border-radius: var(--borderRadius050);
     outline: none;
     min-width: 320px;
@@ -74,7 +69,6 @@ const StyledEditorOutline = styled.div`
       outline: 3px solid var(--colorsSemanticFocus500);
       outline-offset: ${hasError ? "2px;" : "1px;"};
     `}
-  `;
-}}
+  `}
 `;
 export { StyledEditorWrapper, StyledEditorContainer, StyledEditorOutline };

package/esm/components/textarea/textarea.component.js

@@ -19,48 +19,47 @@ import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "aria-labelledby": ariaLabelledBy,
-    autoFocus,
-    inputHint,
-    fieldHelp,
-    label,
-    size,
-    children,
-    characterLimit,
-    enforceCharacterLimit = true,
-    onChange,
-    disabled = false,
-    labelInline,
-    labelAlign,
-    labelHelp,
-    labelSpacing,
-    inputIcon,
-    id: idProp,
-    error,
-    warning,
-    info,
-    name,
-    readOnly = false,
-    placeholder,
-    expandable = false,
-    rows,
-    cols,
-    validationOnLabel = false,
-    adaptiveLabelBreakpoint,
-    inputWidth,
-    maxWidth,
-    labelWidth = 30,
-    tooltipPosition,
-    value,
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    helpAriaLabel,
-    inputRef,
-    ...rest
-  } = _ref;
+const Textarea = /*#__PURE__*/React.forwardRef(({
+  "aria-labelledby": ariaLabelledBy,
+  autoFocus,
+  inputHint,
+  fieldHelp,
+  label,
+  size,
+  children,
+  characterLimit,
+  enforceCharacterLimit = true,
+  onChange,
+  disabled = false,
+  labelInline,
+  labelAlign,
+  labelHelp,
+  labelSpacing,
+  inputIcon,
+  id: idProp,
+  error,
+  warning,
+  info,
+  name,
+  readOnly = false,
+  placeholder,
+  expandable = false,
+  rows,
+  cols,
+  validationOnLabel = false,
+  adaptiveLabelBreakpoint,
+  inputWidth,
+  maxWidth,
+  labelWidth = 30,
+  tooltipPosition,
+  value,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  helpAriaLabel,
+  inputRef,
+  ...rest
+}, ref) => {
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);

package/esm/components/textarea/textarea.style.js

@@ -14,25 +14,19 @@ const StyledTextarea = styled.div`
     min-height: ${MIN_HEIGHT}px;
     padding: var(--spacing150) var(--spacing200);
 
-    ${_ref => {
-  let {
-    hasIcon
-  } = _ref;
-  return hasIcon && "padding-right: var(--spacing500)";
-}}
+    ${({
+  hasIcon
+}) => hasIcon && "padding-right: var(--spacing500)"}
   }
 
-  ${_ref2 => {
-  let {
-    labelInline
-  } = _ref2;
-  return labelInline && css`
+  ${({
+  labelInline
+}) => labelInline && css`
       ${StyledLabelContainer} {
         align-items: flex-start;
         padding-top: 6px;
       }
-    `;
-}}
+    `}
 
   ${InputIconToggleStyle} {
     height: 40px;

package/esm/components/textbox/__internal__/prefix.style.js

@@ -3,12 +3,9 @@ import InputSizes from "../../../__internal__/input/input-sizes.style";
 const StyledPrefix = styled.span`
   align-self: center;
   font-weight: 900;
-  margin-left: ${_ref => {
-  let {
-    size
-  } = _ref;
-  return InputSizes[size].horizontalPadding;
-}}; // margin must match the original component padding
+  margin-left: ${({
+  size
+}) => InputSizes[size].horizontalPadding}; // margin must match the original component padding
 
   && + input {
     padding-left: var(--spacing100);

package/esm/components/textbox/textbox.component.js

@@ -20,62 +20,61 @@ import Logger from "../../__internal__/utils/logger";
 import guid from "../../__internal__/utils/helpers/guid";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const Textbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "aria-labelledby": ariaLabelledBy,
-    align = "left",
-    autoFocus,
-    children,
-    disabled,
-    inputIcon,
-    leftChildren,
-    label,
-    labelAlign,
-    labelHelp,
-    labelInline,
-    labelSpacing,
-    id,
-    formattedValue,
-    inputHint,
-    fieldHelp,
-    error,
-    warning,
-    info,
-    name,
-    reverse,
-    size = "medium",
-    value,
-    readOnly,
-    placeholder,
-    inputRef,
-    onBlur,
-    onClick,
-    onFocus,
-    onChange,
-    onMouseDown,
-    onChangeDeferred,
-    deferTimeout,
-    isOptional,
-    iconOnClick,
-    iconOnMouseDown,
-    iconTabIndex,
-    validationOnLabel = false,
-    labelWidth = 30,
-    inputWidth,
-    maxWidth,
-    prefix,
-    adaptiveLabelBreakpoint,
-    required,
-    positionedChildren,
-    tooltipPosition,
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    enforceCharacterLimit = true,
-    characterLimit,
-    helpAriaLabel,
-    ...props
-  } = _ref;
+const Textbox = /*#__PURE__*/React.forwardRef(({
+  "aria-labelledby": ariaLabelledBy,
+  align = "left",
+  autoFocus,
+  children,
+  disabled,
+  inputIcon,
+  leftChildren,
+  label,
+  labelAlign,
+  labelHelp,
+  labelInline,
+  labelSpacing,
+  id,
+  formattedValue,
+  inputHint,
+  fieldHelp,
+  error,
+  warning,
+  info,
+  name,
+  reverse,
+  size = "medium",
+  value,
+  readOnly,
+  placeholder,
+  inputRef,
+  onBlur,
+  onClick,
+  onFocus,
+  onChange,
+  onMouseDown,
+  onChangeDeferred,
+  deferTimeout,
+  isOptional,
+  iconOnClick,
+  iconOnMouseDown,
+  iconTabIndex,
+  validationOnLabel = false,
+  labelWidth = 30,
+  inputWidth,
+  maxWidth,
+  prefix,
+  adaptiveLabelBreakpoint,
+  required,
+  positionedChildren,
+  tooltipPosition,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  enforceCharacterLimit = true,
+  characterLimit,
+  helpAriaLabel,
+  ...props
+}, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
   const [maxLength, characterCount, characterCountHintId, characterCountHint] = useCharacterCount(characterCountValue, characterLimit, enforceCharacterLimit);
   const {

package/esm/components/textbox/textbox.style.js

@@ -1,11 +1,9 @@
 import styled, { css } from "styled-components";
 const ErrorBorder = styled.span`
-  ${_ref => {
-  let {
-    warning,
-    inline
-  } = _ref;
-  return css`
+  ${({
+  warning,
+  inline
+}) => css`
       position: absolute;
       z-index: 6;
       width: 2px;
@@ -13,8 +11,7 @@ const ErrorBorder = styled.span`
       left: -12px;
       bottom: ${inline ? "10px" : "0px"};
       top: 0px;
-    `;
-}}
+    `}
 `;
 const StyledInputHint = styled.p`
   display: block;

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

@@ -2,12 +2,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import StyledTileFooter from "./tile-footer.style";
-export const TileFooter = _ref => {
-  let {
-    variant,
-    children,
-    ...props
-  } = _ref;
+export const TileFooter = ({
+  variant,
+  children,
+  ...props
+}) => {
   return /*#__PURE__*/React.createElement(StyledTileFooter, _extends({
     "data-component": "tile-footer",
     variant: variant

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

@@ -14,15 +14,12 @@ const getBackgroundColor = variant => {
 const StyledTileFooter = styled.div`
   ${padding}
 
-  ${_ref => {
-  let {
-    variant
-  } = _ref;
-  return css`
+  ${({
+  variant
+}) => css`
     background: ${getBackgroundColor(variant)};
     border-top: 1px solid var(--colorsUtilityMajor100);
-  `;
-}}
+  `}
 `;
 StyledTileFooter.defaultProps = {
   theme: baseTheme

package/esm/components/tile/tile.component.js

@@ -2,16 +2,15 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import { StyledTile, TileContent } from "./tile.style";
-export const Tile = _ref => {
-  let {
-    variant = "tile",
-    p = 3,
-    children,
-    orientation = "horizontal",
-    width,
-    roundness = "default",
-    ...props
-  } = _ref;
+export const Tile = ({
+  variant = "tile",
+  p = 3,
+  children,
+  orientation = "horizontal",
+  width,
+  roundness = "default",
+  ...props
+}) => {
   const isHorizontal = orientation === "horizontal";
   const isVertical = orientation === "vertical";
   const wrappedChildren = React.Children.map(children, (child, index) => {

package/esm/components/tile/tile.style.js

@@ -19,13 +19,11 @@ const getBorderColor = borderVariant => {
   }
 };
 const TileContent = styled.div`
-  ${_ref => {
-  let {
-    isHorizontal,
-    isVertical,
-    width
-  } = _ref;
-  return css`
+  ${({
+  isHorizontal,
+  isVertical,
+  width
+}) => css`
     ${space}
 
     box-sizing: border-box;
@@ -69,23 +67,20 @@ const TileContent = styled.div`
     ${width && css`
       flex-grow: 0;
       ${computeWidth({
-    width
-  })}
+  width
+})}
     `}
-  `;
-}}
+  `}
 `;
 const StyledTile = styled.div`
-  ${_ref2 => {
-  let {
-    borderVariant,
-    borderWidth = "borderWidth100",
-    isHorizontal,
-    variant,
-    width,
-    roundness
-  } = _ref2;
-  return css`
+  ${({
+  borderVariant,
+  borderWidth = "borderWidth100",
+  isHorizontal,
+  variant,
+  width,
+  roundness
+}) => css`
     ${space}
 
     box-sizing: border-box;
@@ -113,11 +108,10 @@ const StyledTile = styled.div`
 
     ${width && css`
       ${computeWidth({
-    width
-  })}
+  width
+})}
     `}
-  `;
-}}
+  `}
 `;
 TileContent.defaultProps = {
   theme: baseTheme

package/esm/components/tile-select/__internal__/accordion/accordion.component.js

@@ -2,13 +2,12 @@ import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { StyledContentContainer, StyledContent } from "./accordion.style";
 import useResizeObserver from "../../../../hooks/__internal__/useResizeObserver";
-const Accordion = _ref => {
-  let {
-    children,
-    expanded,
-    contentId,
-    controlId
-  } = _ref;
+const Accordion = ({
+  children,
+  expanded,
+  contentId,
+  controlId
+}) => {
   const [contentHeight, setContentHeight] = useState(0);
   const contentRef = useRef(null);
   useResizeObserver(contentRef, () => {

package/esm/components/tile-select/tile-select-group.component.js

@@ -5,18 +5,17 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-button-mapper.component";
 import { StyledTileSelectFieldset, StyledGroupDescription } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-export const TileSelectGroup = _ref => {
-  let {
-    children,
-    name,
-    legend,
-    description,
-    onChange,
-    onBlur,
-    value,
-    multiSelect = false,
-    ...rest
-  } = _ref;
+export const TileSelectGroup = ({
+  children,
+  name,
+  legend,
+  description,
+  onChange,
+  onBlur,
+  value,
+  multiSelect = false,
+  ...rest
+}) => {
   let tiles;
   if (multiSelect) {
     tiles = children;