carbon-react 119.10.0 → 119.10.2

package/esm/components/link/link.component.js

@@ -7,28 +7,27 @@ import Event from "../../__internal__/utils/helpers/events";
 import { StyledLink, StyledContent } from "./link.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useLocale from "../../hooks/__internal__/useLocale";
-const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    onKeyDown,
-    href,
-    onClick,
-    onMouseDown,
-    icon,
-    iconAlign = "left",
-    isSkipLink,
-    disabled,
-    ariaLabel,
-    rel,
-    tooltipMessage,
-    tooltipPosition,
-    target,
-    variant = "default",
-    isDarkBackground,
-    placeholderTabIndex,
-    ...rest
-  } = _ref;
+const Link = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  onKeyDown,
+  href,
+  onClick,
+  onMouseDown,
+  icon,
+  iconAlign = "left",
+  isSkipLink,
+  disabled,
+  ariaLabel,
+  rel,
+  tooltipMessage,
+  tooltipPosition,
+  target,
+  variant = "default",
+  isDarkBackground,
+  placeholderTabIndex,
+  ...rest
+}, ref) => {
   const l = useLocale();
   const {
     inMenu
@@ -47,8 +46,7 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onClick(ev);
     }
   };
-  const renderLinkIcon = function () {
-    let currentAlignment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "left";
+  const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
       type: icon,

package/esm/components/link/link.style.js

@@ -34,17 +34,16 @@ const colorMap = {
   }
 };
 const StyledLink = styled.span`
-  ${_ref => {
-  let {
-    isSkipLink,
-    theme,
-    iconAlign,
-    hasContent,
-    disabled,
-    variant,
-    isDarkBackground,
-    isMenuItem
-  } = _ref;
+  ${({
+  isSkipLink,
+  theme,
+  iconAlign,
+  hasContent,
+  disabled,
+  variant,
+  isDarkBackground,
+  isMenuItem
+}) => {
   const colorMapKey = isDarkBackground ? "dark" : "light";
   const {
     color,

package/esm/components/link-preview/__internal__/placeholder.component.js

@@ -23,26 +23,17 @@ const Square = styled.div`
   height: 200px;
   width: 200px;
   transform: rotate(45deg);
-  background-color: ${_ref => {
-  let {
-    color
-  } = _ref;
-  return color;
-}};
+  background-color: ${({
+  color
+}) => color};
   position: absolute;
   border-radius: 2%;
-  top: ${_ref2 => {
-  let {
-    top
-  } = _ref2;
-  return top;
-}};
-  left: ${_ref3 => {
-  let {
-    left
-  } = _ref3;
-  return left;
-}};
+  top: ${({
+  top
+}) => top};
+  left: ${({
+  left
+}) => left};
 `;
 const Placeholder = () => /*#__PURE__*/React.createElement(StyledPlaceHolder, {
   "data-component": "link preview image placeholder"

package/esm/components/link-preview/link-preview.component.js

@@ -8,17 +8,16 @@ import IconButton from "../icon-button";
 import Icon from "../icon";
 import Placeholder from "./__internal__/placeholder.component";
 const SCHEME_SEPARATOR = "://";
-export const LinkPreview = _ref => {
-  let {
-    as,
-    description,
-    image,
-    isLoading,
-    onClose,
-    title,
-    url,
-    ...rest
-  } = _ref;
+export const LinkPreview = ({
+  as,
+  description,
+  image,
+  isLoading,
+  onClose,
+  title,
+  url,
+  ...rest
+}) => {
   const loadingState = isLoading || !url;
   const canRenderAsLink = !loadingState && as !== "div";
   const imageProps = () => {

package/esm/components/link-preview/link-preview.style.js

@@ -7,11 +7,9 @@ const StyledLinkPreview = styled.a`
   text-decoration: none;
   outline: none;
 
-  ${_ref => {
-  let {
-    as
-  } = _ref;
-  return css`
+  ${({
+  as
+}) => css`
     border: 1px solid var(--colorsUtilityMajor050);
     border-radius: var(--borderRadius100);
     background-color: var(--colorsUtilityMajor025);
@@ -28,8 +26,7 @@ const StyledLinkPreview = styled.a`
         background-color: var(--colorsUtilityMajor100);
       }
     `}
-  `;
-}}
+  `}
 `;
 const StyledCloseIconWrapper = styled.div`
   padding: 16px;
@@ -38,18 +35,15 @@ const StyledPreviewWrapper = styled.div`
   flex-grow: 1;
   padding: 16px;
 
-  ${_ref2 => {
-  let {
-    isLoading
-  } = _ref2;
-  return !isLoading && css`
+  ${({
+  isLoading
+}) => !isLoading && css`
       ${StyledPreview} {
         display: flex;
         flex-direction: column;
         height: 100%;
       }
-    `;
-}}
+    `}
 
   ${StyledPreviewPlaceholder}:first-of-type {
     margin-top: 8px;

package/esm/components/loader/loader-square.style.js

@@ -34,14 +34,12 @@ const getDimentions = (size, roundedCornersOptOut) => {
   `;
 };
 const StyledLoaderSquare = styled.div`
-  ${_ref => {
-  let {
-    size,
-    isInsideButton,
-    isActive,
-    theme
-  } = _ref;
-  return css`
+  ${({
+  size,
+  isInsideButton,
+  isActive,
+  theme
+}) => css`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: var(--colorsActionMajor500);
     display: inline-block;
@@ -63,8 +61,7 @@ const StyledLoaderSquare = styled.div`
       animation-delay: 0.4s;
       margin-right: 0px;
     }
-  `;
-}}
+  `}
 `;
 StyledLoaderSquare.defaultProps = {
   size: "small",

package/esm/components/loader/loader.component.js

@@ -7,14 +7,13 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoader from "./loader.style";
 import StyledLoaderSquare from "./loader-square.style";
-export const Loader = _ref => {
-  let {
-    "aria-label": ariaLabel,
-    size = "medium",
-    isInsideButton,
-    isActive = true,
-    ...rest
-  } = _ref;
+export const Loader = ({
+  "aria-label": ariaLabel,
+  size = "medium",
+  isInsideButton,
+  isActive = true,
+  ...rest
+}) => {
   const l = useLocale();
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   return /*#__PURE__*/React.createElement(StyledLoader, _extends({

package/esm/components/loader/loader.config.d.ts

@@ -1 +1 @@
-export declare const LOADER_SIZES: string[];
+export declare const LOADER_SIZES: readonly ["small", "medium", "large"];

package/esm/components/loader-bar/loader-bar.component.js

@@ -6,11 +6,10 @@ import useMediaQuery from "../../hooks/useMediaQuery";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoaderBar, { InnerBar, StyledLoader } from "./loader-bar.style";
-export const LoaderBar = _ref => {
-  let {
-    size = "medium",
-    ...rest
-  } = _ref;
+export const LoaderBar = ({
+  size = "medium",
+  ...rest
+}) => {
   const l = useLocale();
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   return /*#__PURE__*/React.createElement(StyledLoader, _extends({

package/esm/components/loader-bar/loader-bar.style.js

@@ -25,11 +25,9 @@ const innerBarAnimation = keyframes`
   }
 `;
 const StyledLoaderBar = styled.div`
-  ${_ref => {
-  let {
-    size
-  } = _ref;
-  return css`
+  ${({
+  size
+}) => css`
     display: inline-block;
     border-radius: var(--borderRadius400);
     height: ${getHeight(size)};
@@ -37,22 +35,18 @@ const StyledLoaderBar = styled.div`
     background-color: var(--colorsActionMajor150);
     overflow: hidden;
     position: relative;
-  `;
-}}
+  `}
 `;
 const InnerBar = styled.div`
-  ${_ref2 => {
-  let {
-    size
-  } = _ref2;
-  return css`
+  ${({
+  size
+}) => css`
     position: absolute;
     background-color: var(--colorsActionMajor500);
     width: ${INNER_BAR_LENGTH};
     height: ${getHeight(size)};
     animation: 2s ${innerBarAnimation} linear 0s infinite normal none running;
-  `;
-}}
+  `}
 `;
 StyledLoader.defaultProps = {
   theme: baseTheme

package/esm/components/menu/__internal__/spec-helper/index.js

@@ -7,8 +7,7 @@ const events = {
     preventDefault: jest.fn()
   }
 };
-const openSubmenu = function (wrapper) {
-  let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+const openSubmenu = (wrapper, index = 0) => {
   const menuWrapper = wrapper.find(StyledSubmenuWrapper).at(index);
   const menuItem = menuWrapper.exists("a") ? menuWrapper.find("a") : menuWrapper.find("button");
   menuItem.getDOMNode().focus();

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -12,25 +12,24 @@ import guid from "../../../../__internal__/utils/helpers/guid";
 import { SCROLLABLE_BLOCK, SCROLLABLE_BLOCK_PARENT, BLOCK_INDEX_SELECTOR, ALL_CHILDREN_SELECTOR } from "../locators";
 import useStableCallback from "../../../../hooks/__internal__/useStableCallback/useStableCallback";
 import FixedNavigationBarContext from "../../../navigation-bar/fixed-navigation-bar.context";
-const Submenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    title,
-    icon,
-    submenuDirection = "right",
-    onKeyDown,
-    variant = "default",
-    showDropdownArrow = true,
-    clickToOpen,
-    href,
-    maxWidth,
-    asPassiveItem,
-    onSubmenuOpen: onSubmenuOpenProp,
-    onSubmenuClose,
-    onClick,
-    ...rest
-  } = _ref;
+const Submenu = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  title,
+  icon,
+  submenuDirection = "right",
+  onKeyDown,
+  variant = "default",
+  showDropdownArrow = true,
+  clickToOpen,
+  href,
+  maxWidth,
+  asPassiveItem,
+  onSubmenuOpen: onSubmenuOpenProp,
+  onSubmenuClose,
+  onClick,
+  ...rest
+}, ref) => {
   const submenuRef = useRef(null);
   const submenuId = useRef(guid());
   const menuContext = useContext(MenuContext);

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -11,23 +11,18 @@ const StyledSubmenuWrapper = styled.div`
   width: fit-content;
   max-width: inherit;
 
-  ${_ref => {
-  let {
-    isSubmenuOpen,
-    theme
-  } = _ref;
-  return isSubmenuOpen && css`
+  ${({
+  isSubmenuOpen,
+  theme
+}) => isSubmenuOpen && css`
       z-index: ${theme.zIndex.popover};
-    `;
-}}
-
-  ${_ref2 => {
-  let {
-    inFullscreenView,
-    menuType,
-    asPassiveItem
-  } = _ref2;
-  return inFullscreenView && css`
+    `}
+
+  ${({
+  inFullscreenView,
+  menuType,
+  asPassiveItem
+}) => inFullscreenView && css`
       width: 100%;
 
       ${asPassiveItem && menuType && css`
@@ -36,19 +31,16 @@ const StyledSubmenuWrapper = styled.div`
           color: ${menuConfigVariants[menuType].title};
         }
       `}
-    `;
-}}
+    `}
 `;
 const StyledSubmenu = styled.ul`
-  ${_ref3 => {
-  let {
-    menuType,
-    submenuDirection,
-    variant,
-    inFullscreenView,
-    maxHeight
-  } = _ref3;
-  return css`
+  ${({
+  menuType,
+  submenuDirection,
+  variant,
+  inFullscreenView,
+  maxHeight
+}) => css`
     ${!inFullscreenView && menuType && css`
       box-shadow: var(--boxShadow100);
       position: absolute;
@@ -175,8 +167,7 @@ const StyledSubmenu = styled.ul`
     ${submenuDirection === "left" && css`
       right: 0;
     `}
-  `;
-}}
+  `}
 `;
 StyledSubmenuWrapper.defaultProps = {
   theme: baseTheme

package/esm/components/menu/menu-divider/menu-divider.component.js

@@ -5,11 +5,10 @@ import StyledDivider from "./menu-divider.style";
 import MenuContext from "../menu.context";
 import { StyledMenuItem } from "../menu.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
-const MenuDivider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    size = "default",
-    ...rest
-  } = _ref;
+const MenuDivider = /*#__PURE__*/React.forwardRef(({
+  size = "default",
+  ...rest
+}, ref) => {
   const menuContext = useContext(MenuContext);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true

package/esm/components/menu/menu-divider/menu-divider.style.js

@@ -2,16 +2,13 @@ import styled, { css } from "styled-components";
 import menuConfigVariants from "../menu.config";
 const StyledDivider = styled.div`
   cursor: default;
-  ${_ref => {
-  let {
-    menuType,
-    size
-  } = _ref;
-  return css`
+  ${({
+  menuType,
+  size
+}) => css`
     margin: 0px ${size === "large" ? "" : "16px"};
     height: ${size === "large" ? "4px" : "1px"};
     background-color: ${menuConfigVariants[menuType].divider};
-  `;
-}}
+  `}
 `;
 export default StyledDivider;

package/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -12,14 +12,13 @@ import Icon from "../../icon";
 import Portal from "../../portal";
 import MenuDivider from "../menu-divider/menu-divider.component";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
-export const MenuFullscreen = _ref => {
-  let {
-    children,
-    isOpen,
-    startPosition = "left",
-    onClose,
-    ...rest
-  } = _ref;
+export const MenuFullscreen = ({
+  children,
+  isOpen,
+  startPosition = "left",
+  onClose,
+  ...rest
+}) => {
   const menuWrapperRef = useRef(null);
   const menuContentRef = useRef(null);
   const {

package/esm/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -20,14 +20,12 @@ const StyledMenuFullscreen = styled.div`
     font-size: 16px;
   }
 
-  ${_ref => {
-  let {
-    isOpen,
-    menuType,
-    startPosition,
-    theme
-  } = _ref;
-  return css`
+  ${({
+  isOpen,
+  menuType,
+  startPosition,
+  theme
+}) => css`
     background-color: ${menuConfigVariants[menuType].background};
     z-index: ${theme.zIndex.fullScreenModal};
 
@@ -83,8 +81,7 @@ const StyledMenuFullscreen = styled.div`
       ${startPosition}: -100%;
       transition: all 0.3s ease;
     `}
-  `;
-}}
+  `}
 
   ${Box} {
     &::-webkit-scrollbar {
@@ -102,14 +99,11 @@ const StyledMenuFullscreenHeader = styled.div`
     top: 8px;
   }
 
-  ${_ref2 => {
-  let {
-    menuType
-  } = _ref2;
-  return css`
+  ${({
+  menuType
+}) => css`
     background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-  `;
-}}
+  `}
 `;
 StyledMenuFullscreen.defaultProps = {
   theme: baseTheme

package/esm/components/menu/menu-item/menu-item.component.js

@@ -11,29 +11,28 @@ import SubmenuContext from "../__internal__/submenu/submenu.context";
 import { StyledMenuItem } from "../menu.style";
 import guid from "../../../__internal__/utils/helpers/guid";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
-export const MenuItem = _ref => {
-  let {
-    submenu,
-    children,
-    href,
-    onClick,
-    target,
-    submenuDirection = "right",
-    icon,
-    selected,
-    onKeyDown,
-    variant = "default",
-    showDropdownArrow = true,
-    ariaLabel,
-    clickToOpen,
-    maxWidth,
-    onSubmenuOpen,
-    onSubmenuClose,
-    overrideColor,
-    rel,
-    as,
-    ...rest
-  } = _ref;
+export const MenuItem = ({
+  submenu,
+  children,
+  href,
+  onClick,
+  target,
+  submenuDirection = "right",
+  icon,
+  selected,
+  onKeyDown,
+  variant = "default",
+  showDropdownArrow = true,
+  ariaLabel,
+  clickToOpen,
+  maxWidth,
+  onSubmenuOpen,
+  onSubmenuClose,
+  overrideColor,
+  rel,
+  as,
+  ...rest
+}) => {
   !(icon || children) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `icon` must be defined or this node must have `children`.") : invariant(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : invariant(false) : void 0;
   const {

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

@@ -9,24 +9,22 @@ import { baseTheme } from "../../../style/themes";
 const StyledMenuItemWrapper = styled.a.attrs({
   as: Link
 })`
-  ${_ref => {
-  let {
-    menuType,
-    selected,
-    hasSubmenu,
-    isOpen,
-    variant,
-    showDropdownArrow,
-    href,
-    clickToOpen,
-    maxWidth,
-    inFullscreenView,
-    overrideColor,
-    asPassiveItem,
-    asDiv,
-    hasInput
-  } = _ref;
-  return css`
+  ${({
+  menuType,
+  selected,
+  hasSubmenu,
+  isOpen,
+  variant,
+  showDropdownArrow,
+  href,
+  clickToOpen,
+  maxWidth,
+  inFullscreenView,
+  overrideColor,
+  asPassiveItem,
+  asDiv,
+  hasInput
+}) => css`
     ${padding}
 
     display: inline-block;
@@ -319,8 +317,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
         }
       }
     `}
-  `;
-}}
+  `}
 `;
 StyledMenuItemWrapper.defaultProps = {
   theme: baseTheme