carbon-react 119.9.3 → 119.10.1

package/esm/components/action-popover/action-popover.component.js

@@ -14,19 +14,18 @@ import ActionPopoverContext from "./action-popover-context";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 const onOpenDefault = () => {};
 const onCloseDefault = () => {};
-export const ActionPopover = _ref => {
-  let {
-    children,
-    id,
-    onOpen = onOpenDefault,
-    onClose = onCloseDefault,
-    rightAlignMenu,
-    renderButton,
-    placement = "bottom",
-    horizontalAlignment = "left",
-    submenuPosition = "left",
-    ...rest
-  } = _ref;
+export const ActionPopover = ({
+  children,
+  id,
+  onOpen = onOpenDefault,
+  onClose = onCloseDefault,
+  rightAlignMenu,
+  renderButton,
+  placement = "bottom",
+  horizontalAlignment = "left",
+  submenuPosition = "left",
+  ...rest
+}) => {
   const l = useLocale();
   const [isOpen, setOpenState] = useState(false);
   const [focusIndex, setFocusIndex] = useState(0);
@@ -112,10 +111,9 @@ export const ActionPopover = _ref => {
     modalRef: buttonRef
   });
   useEffect(() => {
-    const handler = _ref2 => {
-      let {
-        target
-      } = _ref2;
+    const handler = ({
+      target
+    }) => {
       // If the event didn't came from part of this component, close the menu.
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page

package/esm/components/action-popover/action-popover.style.js

@@ -5,24 +5,18 @@ import StyledIcon from "../icon/icon.style";
 import StyledButton from "../button/button.style";
 import { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
 const Menu = styled.div`
-  ${_ref => {
-  let {
-    isOpen
-  } = _ref;
-  return isOpen ? "display: block;" : "visibility: hidden;";
-}}
+  ${({
+  isOpen
+}) => isOpen ? "display: block;" : "visibility: hidden;"}
   margin: 0;
   padding: var(--spacing100) 0;
   box-shadow: var(--boxShadow100);
   position: absolute;
   border-radius: var(--borderRadius100);
   background-color: var(--colorsUtilityYang100);
-  z-index: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return `${theme.zIndex?.popover}`;
-}}; // TODO (tokens): implement elevation tokens - FE-4437
+  z-index: ${({
+  theme
+}) => `${theme.zIndex?.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 function getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu) {
   if (!childHasIcon && childHasSubmenu && !hasIcon && !hasSubmenu) {
@@ -53,17 +47,15 @@ function getIconPaddingValues(index, horizontalAlignment, submenuPosition, sibli
   return "var(--spacing100)";
 }
 const StyledMenuItemInnerText = styled.div`
-  ${_ref3 => {
-  let {
-    childHasSubmenu,
-    childHasIcon,
-    hasIcon,
-    hasSubmenu,
-    submenuPosition,
-    horizontalAlignment,
-    isASubmenu
-  } = _ref3;
-  return css`
+  ${({
+  childHasSubmenu,
+  childHasIcon,
+  hasIcon,
+  hasSubmenu,
+  submenuPosition,
+  horizontalAlignment,
+  isASubmenu
+}) => css`
     padding-left: ${isASubmenu ? `var(--spacing000)` : `var(--spacing100)`};
     padding-right: ${isASubmenu ? `var(--spacing000)` : `var(--spacing100)`};
 
@@ -74,21 +66,18 @@ const StyledMenuItemInnerText = styled.div`
     ${horizontalAlignment === "right" && submenuPosition === "right" && !isASubmenu && css`
       padding-right: ${getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu)};
     `}
-  `;
-}}
+  `}
 `;
 const StyledMenuItemOuterContainer = styled.div`
   display: inherit;
 `;
 const StyledMenuItem = styled.button`
-  ${_ref4 => {
-  let {
-    horizontalAlignment,
-    submenuPosition,
-    childHasSubmenu,
-    hasSubmenu
-  } = _ref4;
-  return css`
+  ${({
+  horizontalAlignment,
+  submenuPosition,
+  childHasSubmenu,
+  hasSubmenu
+}) => css`
       justify-content: ${horizontalAlignment === "left" ? "flex-start" : "flex-end"};
 
       ${horizontalAlignment === "left" && submenuPosition === "right" && css`
@@ -100,8 +89,7 @@ const StyledMenuItem = styled.button`
           justify-content: space-between;
         `}
       `}
-    `;
-}}
+    `}
 
   text-decoration: none;
   background-color: var(--colorsActionMajorYang100);
@@ -126,11 +114,9 @@ const StyledMenuItem = styled.button`
     border-radius: var(--borderRadius000);
   }
 
-  ${_ref5 => {
-  let {
-    isDisabled
-  } = _ref5;
-  return isDisabled && css`
+  ${({
+  isDisabled
+}) => isDisabled && css`
       color: var(--colorsUtilityYin030);
       cursor: not-allowed;
 
@@ -138,14 +124,11 @@ const StyledMenuItem = styled.button`
         cursor: not-allowed;
         color: var(--colorsUtilityYin030);
       }
-    `;
-}}
+    `}
 
-  ${_ref6 => {
-  let {
-    isDisabled
-  } = _ref6;
-  return !isDisabled && css`
+  ${({
+  isDisabled
+}) => !isDisabled && css`
       &:focus,
       &:hover {
         background-color: var(--colorsUtilityMajor100);
@@ -153,8 +136,7 @@ const StyledMenuItem = styled.button`
       && ${StyledIcon} {
         cursor: pointer;
       }
-    `;
-}}
+    `}
 `;
 const StyledMenuItemWrapper = styled.div`
   position: relative;
@@ -189,32 +171,27 @@ const StyledButtonIcon = styled.div`
   }
 `;
 const MenuItemIcon = styled(Icon)`
-  ${_ref7 => {
-  let {
-    horizontalAlignment,
-    submenuPosition,
-    childHasIcon,
-    childHasSubmenu,
-    hasIcon,
-    hasSubmenu,
-    isASubmenu
-  } = _ref7;
-  return css`
+  ${({
+  horizontalAlignment,
+  submenuPosition,
+  childHasIcon,
+  childHasSubmenu,
+  hasIcon,
+  hasSubmenu,
+  isASubmenu
+}) => css`
     justify-content: ${horizontalAlignment};
     padding: var(--spacing100)
       ${getIconPaddingValues(1, horizontalAlignment, submenuPosition, childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu, isASubmenu)}
       var(--spacing100)
       ${getIconPaddingValues(2, horizontalAlignment, submenuPosition, childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu, isASubmenu)};
     color: var(--colorsUtilityYin065);
-  `;
-}}
+  `}
 `;
 const SubMenuItemIcon = styled(ButtonIcon)`
-  ${_ref8 => {
-  let {
-    type
-  } = _ref8;
-  return css`
+  ${({
+  type
+}) => css`
     ${type === "chevron_left_thick" && css`
       left: -5px;
     `}
@@ -225,8 +202,7 @@ const SubMenuItemIcon = styled(ButtonIcon)`
         top: var(--sizing100);
       `}
     `}
-  `;
-}}
+  `}
 `;
 const MenuButtonOverrideWrapper = styled.div`
   ${StyledButton} {

package/esm/components/advanced-color-picker/advanced-color-picker-cell.style.js

@@ -7,25 +7,19 @@ const StyledAdvancedColorPickerCell = styled.button.attrs({
   width: 25px;
   height: 25px;
   border: 1px solid var(--colorsUtilityYin090);
-  ${_ref => {
-  let {
-    color
-  } = _ref;
-  return color && css`
+  ${({
+  color
+}) => color && css`
       background-color: ${color};
       border-radius: var(--borderRadius050);
-    `;
-}}
+    `}
 
-  ${_ref2 => {
-  let {
-    color
-  } = _ref2;
-  return color === "transparent" && css`
+  ${({
+  color
+}) => color === "transparent" && css`
       background: #eee url("data:image/svg+xml,${transparentSvg}");
       background-size: 10px 10px;
-    `;
-}}
+    `}
 
   &:hover {
     cursor: pointer;

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

@@ -10,34 +10,32 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import { Dt, Dd } from "../definition-list";
 import Logger from "../../__internal__/utils/logger";
 let deprecateUncontrolledWarnTriggered = false;
-export const AdvancedColorPicker = _ref => {
-  let {
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    availableColors,
-    defaultColor,
-    name,
-    onOpen,
-    onClose,
-    onChange,
-    onBlur,
-    open = false,
-    role,
-    selectedColor,
-    ...props
-  } = _ref;
+export const AdvancedColorPicker = ({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  availableColors,
+  defaultColor,
+  name,
+  onOpen,
+  onClose,
+  onChange,
+  onBlur,
+  open = false,
+  role,
+  selectedColor,
+  ...props
+}) => {
   const [dialogOpen, setDialogOpen] = useState();
   const currentColor = selectedColor || defaultColor;
   const [selectedColorRef, setSelectedColorRef] = useState(null);
   const descriptionId = useRef(guid());
   const l = useLocale();
   const simpleColorPickerData = useRef(null);
-  const colors = availableColors.map((_ref2, index) => {
-    let {
-      value,
-      label
-    } = _ref2;
+  const colors = availableColors.map(({
+    value,
+    label
+  }, index) => {
     return {
       value,
       label,
@@ -153,18 +151,15 @@ export const AdvancedColorPicker = _ref => {
     onBlur: handleOnBlur,
     onKeyDown: handleColorOnKeyDown,
     ref: simpleColorPickerData
-  }, colors?.map(_ref3 => {
-    let {
-      value,
-      label
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(SimpleColor, {
-      value: value,
-      key: value,
-      "aria-label": label,
-      id: value,
-      defaultChecked: value === currentColor
-    });
-  }))));
+  }, colors?.map(({
+    value,
+    label
+  }) => /*#__PURE__*/React.createElement(SimpleColor, {
+    value: value,
+    key: value,
+    "aria-label": label,
+    id: value,
+    defaultChecked: value === currentColor
+  })))));
 };
 export default AdvancedColorPicker;

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

@@ -29,25 +29,19 @@ const StyledAdvancedColorPickerPreview = styled.div`
   border: 1px solid var(--colorsUtilityYin090);
   border-radius: var(--borderRadius050);
 
-  ${_ref => {
-  let {
-    color
-  } = _ref;
-  return color !== "transparent" && css`
+  ${({
+  color
+}) => color !== "transparent" && css`
       background-color: ${color};
-    `;
-}}
+    `}
 
-  ${_ref2 => {
-  let {
-    color
-  } = _ref2;
-  return color === "transparent" && css`
+  ${({
+  color
+}) => color === "transparent" && css`
       background-color: #eeeeee;
       background-image: url(${checkerBoardSvg});
       background-size: 10px 10px;
-    `;
-}}
+    `}
 
   &:hover {
     cursor: initial;

package/esm/components/alert/alert.component.js

@@ -2,16 +2,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import Dialog from "../dialog";
-export const Alert = _ref => {
-  let {
-    children,
-    size = "extra-small",
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Dialog, _extends({
-    "data-component": "alert",
-    role: "alertdialog",
-    size: size
-  }, rest), children);
-};
+export const Alert = ({
+  children,
+  size = "extra-small",
+  ...rest
+}) => /*#__PURE__*/React.createElement(Dialog, _extends({
+  "data-component": "alert",
+  role: "alertdialog",
+  size: size
+}, rest), children);
 export default Alert;

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.js

@@ -1,26 +1,23 @@
 import React from "react";
 import PropTypes from "prop-types";
 import StyledNavigationItem from "./anchor-navigation-item.style";
-const AnchorNavigationItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    onKeyDown,
-    onClick,
-    href,
-    tabIndex,
-    isSelected
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledNavigationItem, {
-    isSelected: isSelected
-  }, /*#__PURE__*/React.createElement("a", {
-    onKeyDown: onKeyDown,
-    onClick: onClick,
-    tabIndex: tabIndex,
-    ref: ref,
-    href: href,
-    "data-element": "anchor-navigation-item"
-  }, children));
-});
+const AnchorNavigationItem = /*#__PURE__*/React.forwardRef(({
+  children,
+  onKeyDown,
+  onClick,
+  href,
+  tabIndex,
+  isSelected
+}, ref) => /*#__PURE__*/React.createElement(StyledNavigationItem, {
+  isSelected: isSelected
+}, /*#__PURE__*/React.createElement("a", {
+  onKeyDown: onKeyDown,
+  onClick: onClick,
+  tabIndex: tabIndex,
+  ref: ref,
+  href: href,
+  "data-element": "anchor-navigation-item"
+}, children)));
 AnchorNavigationItem.propTypes = {
   "children": PropTypes.node,
   "href": PropTypes.string,

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -19,25 +19,19 @@ const StyledNavigationItem = styled.li`
     }
 
     &:hover {
-      ${_ref => {
-  let {
-    isSelected
-  } = _ref;
-  return !isSelected && css`
+      ${({
+  isSelected
+}) => !isSelected && css`
           background-color: var(--colorsActionMinor100);
-        `;
-}};
+        `};
     }
 
-    ${_ref2 => {
-  let {
-    isSelected
-  } = _ref2;
-  return isSelected && css`
+    ${({
+  isSelected
+}) => isSelected && css`
         background-color: var(--colorsActionMajorYang100);
         border-left-color: var(--colorsActionMajor500);
-      `;
-}}
+      `}
   }
 `;
 export default StyledNavigationItem;

package/esm/components/anchor-navigation/anchor-navigation.component.js

@@ -9,11 +9,10 @@ import { StyledAnchorNavigation, StyledNavigation, StyledContent } from "./ancho
 import AnchorNavigationItem from "./anchor-navigation-item/anchor-navigation-item.component";
 const SECTION_VISIBILITY_OFFSET = 200;
 const SCROLL_THROTTLE = 100;
-const AnchorNavigation = _ref => {
-  let {
-    children,
-    stickyNavigation
-  } = _ref;
+const AnchorNavigation = ({
+  children,
+  stickyNavigation
+}) => {
   !isFragment(stickyNavigation) ? process.env.NODE_ENV !== "production" ? invariant(false, "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.") : invariant(false) : void 0;
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(stickyNavigation.props.children).find(child => {
@@ -32,12 +31,9 @@ const AnchorNavigation = _ref => {
     // istanbul ignore if
     // function is called only after component is rendered, so ref cannot hold a null value
     if (navigationRef.current === null) return;
-    const offsetsWithIndexes = sectionRefs.current.map((_ref2, index) => {
-      let {
-        current
-      } = _ref2;
-      return [index, current?.getBoundingClientRect().top];
-    }).filter(offsetWithIndex => offsetWithIndex[1] !== undefined);
+    const offsetsWithIndexes = sectionRefs.current.map(({
+      current
+    }, index) => [index, current?.getBoundingClientRect().top]).filter(offsetWithIndex => offsetWithIndex[1] !== undefined);
     const {
       top: navTopOffset
     } = navigationRef.current.getBoundingClientRect();

package/esm/components/badge/badge.component.js

@@ -2,13 +2,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import { StyledBadgeWrapper, StyledCrossIcon, StyledCounter, StyledBadge } from "./badge.style";
-export const Badge = _ref => {
-  let {
-    "aria-label": ariaLabel,
-    children,
-    counter = 0,
-    onClick
-  } = _ref;
+export const Badge = ({
+  "aria-label": ariaLabel,
+  children,
+  counter = 0,
+  onClick
+}) => {
   const shouldDisplayCounter = counter > 0;
   const counterToDisplay = counter > 99 ? 99 : counter;
   const renderCorrectBadge = () => {

package/esm/components/badge/badge.style.js

@@ -21,14 +21,11 @@ const StyledCounter = styled.div`
   font-size: 12px;
   margin-top: -1px;
 `;
-const StyledBadge = styled.span.attrs(_ref => {
-  let {
-    onClick
-  } = _ref;
-  return {
-    as: onClick ? Button : undefined
-  };
-})`
+const StyledBadge = styled.span.attrs(({
+  onClick
+}) => ({
+  as: onClick ? Button : undefined
+}))`
   ${commonStyles}
   cursor: default;
   align-items: center;
@@ -44,11 +41,9 @@ const StyledBadge = styled.span.attrs(_ref => {
     border: none;
   }
 
-  ${_ref2 => {
-  let {
-    onClick
-  } = _ref2;
-  return css`
+  ${({
+  onClick
+}) => css`
     ${onClick && `
       ${commonStyles}
       width: 22px;
@@ -80,8 +75,7 @@ const StyledBadge = styled.span.attrs(_ref => {
         }
       }
     `}
-  `;
-}}
+  `}
 `;
 const StyledCrossIcon = styled(Icon)`
   margin: 0;

package/esm/components/batch-selection/batch-selection.component.js

@@ -2,14 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { StyledBatchSelection, StyledSelectionCount } from "./batch-selection.style";
-export const BatchSelection = _ref => {
-  let {
-    disabled,
-    children,
-    colorTheme = "transparent",
-    selectedCount,
-    hidden
-  } = _ref;
+export const BatchSelection = ({
+  disabled,
+  children,
+  colorTheme = "transparent",
+  selectedCount,
+  hidden
+}) => {
   const l = useLocale();
   return /*#__PURE__*/React.createElement(StyledBatchSelection, {
     colorTheme: colorTheme,

package/esm/components/batch-selection/batch-selection.style.js

@@ -2,13 +2,11 @@ import styled, { css } from "styled-components";
 import StyledIconButton from "../icon-button/icon-button.style";
 import StyledIcon from "../icon/icon.style";
 const StyledBatchSelection = styled.div`
-  ${_ref => {
-  let {
-    disabled,
-    colorTheme,
-    hidden
-  } = _ref;
-  return css`
+  ${({
+  disabled,
+  colorTheme,
+  hidden
+}) => css`
     align-items: center;
     display: inline-flex;
     border-radius: var(--borderRadius100);
@@ -70,8 +68,7 @@ const StyledBatchSelection = styled.div`
         }
       }
     `}
-  `;
-}}
+  `}
 `;
 const StyledSelectionCount = styled.span`
   display: inline-block;