carbon-react 119.10.0 → 119.10.2

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -5,12 +5,11 @@ import StyledTitle from "./menu-segment-title.style";
 import MenuContext from "../menu.context";
 import { StyledMenuItem } from "../menu.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
-const MenuSegmentTitle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    variant = "default",
-    ...rest
-  } = _ref;
+const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
+  children,
+  variant = "default",
+  ...rest
+}, ref) => {
   const menuContext = useContext(MenuContext);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true

package/esm/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -1,12 +1,10 @@
 import styled, { css } from "styled-components";
 import menuConfigVariants from "../menu.config";
 const StyledTitle = styled.div`
-  ${_ref => {
-  let {
-    menuType,
-    variant
-  } = _ref;
-  return css`
+  ${({
+  menuType,
+  variant
+}) => css`
     padding: 16px 16px 8px;
     font-size: 12px;
     font-weight: 700;
@@ -15,7 +13,6 @@ const StyledTitle = styled.div`
     cursor: default;
     color: ${menuConfigVariants[menuType].title};
     ${variant === "alternate" && `background-color: ${menuConfigVariants[menuType].alternate};`};
-  `;
-}}
+  `}
 `;
 export default StyledTitle;

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

@@ -6,12 +6,11 @@ import tagComponent from "../../__internal__/utils/helpers/tags";
 import MenuContext from "./menu.context";
 import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation";
 import { MENU_ITEM_CHILDREN_LOCATOR } from "./__internal__/locators";
-export const Menu = _ref => {
-  let {
-    menuType = "light",
-    children,
-    ...rest
-  } = _ref;
+export const Menu = ({
+  menuType = "light",
+  children,
+  ...rest
+}) => {
   const [openSubmenuId, setOpenSubmenuId] = useState(null);
   const ref = useRef(null);
   const [focusId, setFocusId] = useState(undefined);

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

@@ -14,11 +14,9 @@ const StyledMenuWrapper = styled.ul`
   ${flexbox}
 
   ${StyledVerticalWrapper} {
-    ${_ref => {
-  let {
-    menuType
-  } = _ref;
-  return menuType && css`
+    ${({
+  menuType
+}) => menuType && css`
         display: inline-block;
         vertical-align: bottom;
         background-color: ${menuConfigVariants[menuType].background};
@@ -31,8 +29,7 @@ const StyledMenuWrapper = styled.ul`
             color: ${menuConfigVariants[menuType].color};
           `}
         `}
-      `;
-}}
+      `}
     ${StyledDivider} {
       position: relative;
       top: -1px;
@@ -47,21 +44,16 @@ const StyledMenuItem = styled.li`
     border-radius: var(--borderRadius000);
   }
 
-  ${_ref2 => {
-  let {
-    inSubmenu
-  } = _ref2;
-  return css`
+  ${({
+  inSubmenu
+}) => css`
     ${inSubmenu && css`
       display: list-item;
     `}
-  `;
-}}
-  ${_ref3 => {
-  let {
-    inFullscreenView
-  } = _ref3;
-  return inFullscreenView && css`
+  `}
+  ${({
+  inFullscreenView
+}) => inFullscreenView && css`
       padding-top: 16px;
       padding-bottom: 16px;
 
@@ -75,7 +67,6 @@ const StyledMenuItem = styled.li`
         width: 100%;
         box-sizing: border-box;
       }
-    `;
-}}
+    `}
 `;
 export { StyledMenuWrapper, StyledMenuItem };

package/esm/components/menu/scrollable-block/scrollable-block.component.js

@@ -6,15 +6,14 @@ import MenuItem from "../menu-item";
 import StyledScrollableBlock from "./scrollable-block.style";
 import Box from "../../box";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
-export const ScrollableBlock = _ref => {
-  let {
-    children,
-    height,
-    variant = "default",
-    parent,
-    parentVariant,
-    ...rest
-  } = _ref;
+export const ScrollableBlock = ({
+  children,
+  height,
+  variant = "default",
+  parent,
+  parentVariant,
+  ...rest
+}) => {
   const {
     menuType
   } = useContext(MenuContext);

package/esm/components/menu/scrollable-block/scrollable-block.style.js

@@ -5,12 +5,10 @@ import Box from "../../box/box.component";
 import { StyledMenuItem } from "../menu.style";
 import { StyledLink } from "../../link/link.style";
 const StyledScrollableBlock = styled.li`
-  ${_ref => {
-  let {
-    menuType,
-    variant
-  } = _ref;
-  return css`
+  ${({
+  menuType,
+  variant
+}) => css`
     && ${StyledMenuItemWrapper} {
       background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].alternate};
     }
@@ -26,7 +24,6 @@ const StyledScrollableBlock = styled.li`
         border-bottom-right-radius: var(--borderRadius000);
       }
     }
-  `;
-}}
+  `}
 `;
 export default StyledScrollableBlock;

package/esm/components/message/message-content/message-content.component.js

@@ -2,12 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import Content from "../../content";
 import MessageContentStyle from "./message-content.style";
-const MessageContent = _ref => {
-  let {
-    title,
-    children,
-    showCloseIcon
-  } = _ref;
+const MessageContent = ({
+  title,
+  children,
+  showCloseIcon
+}) => {
   return /*#__PURE__*/React.createElement(MessageContentStyle, {
     showCloseIcon: showCloseIcon,
     "data-element": "message-content"

package/esm/components/message/message-content/message-content.style.js

@@ -1,11 +1,8 @@
 import styled from "styled-components";
 const MessageContentStyle = styled.div`
-  padding: 15px ${_ref => {
-  let {
-    showCloseIcon
-  } = _ref;
-  return showCloseIcon ? "50px" : "20px";
-}} 15px
+  padding: 15px ${({
+  showCloseIcon
+}) => showCloseIcon ? "50px" : "20px"} 15px
     20px;
   white-space: pre-wrap;
   flex: 1;

package/esm/components/message/message.component.js

@@ -9,20 +9,19 @@ import Icon from "../icon";
 import IconButton from "../icon-button";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
-const Message = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    open = true,
-    transparent = false,
-    title,
-    variant = "info",
-    children,
-    onDismiss,
-    id,
-    className,
-    closeButtonAriaLabel,
-    showCloseIcon = true,
-    ...props
-  } = _ref;
+const Message = /*#__PURE__*/React.forwardRef(({
+  open = true,
+  transparent = false,
+  title,
+  variant = "info",
+  children,
+  onDismiss,
+  id,
+  className,
+  closeButtonAriaLabel,
+  showCloseIcon = true,
+  ...props
+}, ref) => {
   const messageRef = useRef(null);
   const refToPass = ref || messageRef;
   const marginProps = filterStyledSystemMarginProps(props);

package/esm/components/message/message.style.js

@@ -15,12 +15,9 @@ const MessageStyle = styled.div`
   align-content: center;
   border-radius: var(--borderRadius100);
   overflow: hidden;
-  border: 1px solid ${_ref => {
-  let {
-    variant
-  } = _ref;
-  return variant && messageVariants[variant];
-}};
+  border: 1px solid ${({
+  variant
+}) => variant && messageVariants[variant]};
   background-color: var(--colorsUtilityYang100);
   min-height: 38px;
 
@@ -28,15 +25,12 @@ const MessageStyle = styled.div`
     outline: none;
   }
 
-  ${_ref2 => {
-  let {
-    transparent
-  } = _ref2;
-  return transparent && css`
+  ${({
+  transparent
+}) => transparent && css`
       border: none;
       background: transparent;
-    `;
-}}
+    `}
 
   ${StyledIconButton} {
     position: absolute;

package/esm/components/message/type-icon/type-icon.component.js

@@ -2,11 +2,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import TypeIconStyle from "./type-icon.style";
 import Icon from "../../icon";
-const TypeIcon = _ref => {
-  let {
-    variant = "info",
-    transparent = false
-  } = _ref;
+const TypeIcon = ({
+  variant = "info",
+  transparent = false
+}) => {
   return /*#__PURE__*/React.createElement(TypeIconStyle, {
     variant: variant,
     transparent: transparent

package/esm/components/message/type-icon/type-icon.style.js

@@ -7,12 +7,9 @@ const messageVariants = {
 };
 const TypeIconStyle = styled.div`
   align-items: center;
-  background-color: ${_ref => {
-  let {
-    variant
-  } = _ref;
-  return messageVariants[variant];
-}};
+  background-color: ${({
+  variant
+}) => messageVariants[variant]};
   display: flex;
   justify-content: center;
   line-height: 100%;
@@ -24,19 +21,16 @@ const TypeIconStyle = styled.div`
     }
   }
 
-  ${_ref2 => {
-  let {
-    transparent,
-    variant
-  } = _ref2;
-  return transparent && css`
+  ${({
+  transparent,
+  variant
+}) => transparent && css`
       background-color: transparent;
       span {
         &:before {
           color: ${messageVariants[variant]};
         }
       }
-    `;
-}}
+    `}
 `;
 export default TypeIconStyle;

package/esm/components/modal/__internal__/modal-manager.js

@@ -53,14 +53,10 @@ let ModalManagerInstance = /*#__PURE__*/function () {
     }
   }, {
     key: "removeModal",
-    value: function removeModal(modal) {
-      let triggerRefocusOnClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      const modalIndex = this.modalList.findIndex(_ref => {
-        let {
-          modal: m
-        } = _ref;
-        return m === modal;
-      });
+    value: function removeModal(modal, triggerRefocusOnClose = true) {
+      const modalIndex = this.modalList.findIndex(({
+        modal: m
+      }) => m === modal);
       if (modalIndex === -1) {
         return;
       }

package/esm/components/modal/modal.component.js

@@ -8,17 +8,16 @@ import Events from "../../__internal__/utils/helpers/events";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import { StyledModal, StyledModalBackground } from "./modal.style";
 export const ModalContext = /*#__PURE__*/React.createContext({});
-const Modal = _ref => {
-  let {
-    children,
-    open,
-    onCancel,
-    disableEscKey = false,
-    disableClose,
-    enableBackgroundUI = false,
-    timeout = 300,
-    ...rest
-  } = _ref;
+const Modal = ({
+  children,
+  open,
+  onCancel,
+  disableEscKey = false,
+  disableClose,
+  enableBackgroundUI = false,
+  timeout = 300,
+  ...rest
+}) => {
   const ref = useRef(null);
   const backgroundNodeRef = useRef(null);
   const contentNodeRef = useRef(null);

package/esm/components/modal/modal.style.js

@@ -10,12 +10,10 @@ const StyledModalBackground = styled.div`
   right: 0;
   top: 0;
 
-  ${_ref => {
-  let {
-    transitionName,
-    transitionTime
-  } = _ref;
-  return css`
+  ${({
+  transitionName,
+  transitionTime
+}) => css`
     &.${transitionName}-enter, .${transitionName}-appear {
       opacity: 0;
     }
@@ -34,24 +32,18 @@ const StyledModalBackground = styled.div`
       opacity: 0;
       transition: opacity ${transitionTime}ms 100ms ease-out;
     }
-  `;
-}};
+  `};
 `;
 const StyledModal = styled.div`
   position: absolute;
-  z-index: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.zIndex.modal;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.modal};
 
-  ${_ref3 => {
-  let {
-    transitionName,
-    transitionTime
-  } = _ref3;
-  return css`
+  ${({
+  transitionName,
+  transitionTime
+}) => css`
     .${transitionName}-enter, .${transitionName}-appear {
       opacity: 0;
     }
@@ -70,8 +62,7 @@ const StyledModal = styled.div`
       opacity: 0;
       transition: all ${transitionTime}ms ease-out;
     }
-  `;
-}}
+  `}
 `;
 StyledModal.defaultProps = {
   theme: baseTheme

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -8,21 +8,20 @@ import Button from "../button";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
 import useChildButtons from "../../hooks/__internal__/useChildButtons";
-export const MultiActionButton = _ref => {
-  let {
-    align = "left",
-    disabled,
-    buttonType,
-    size,
-    children,
-    text,
-    subtext,
-    width,
-    onClick,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    ...rest
-  } = _ref;
+export const MultiActionButton = ({
+  align = "left",
+  disabled,
+  buttonType,
+  size,
+  children,
+  text,
+  subtext,
+  width,
+  onClick,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  ...rest
+}) => {
   const buttonRef = useRef(null);
   const {
     showAdditionalButtons,

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -11,20 +11,17 @@ const StyledMultiActionButton = styled.div`
   display: inline-block;
   position: relative;
 
-  ${_ref => {
-  let {
-    width
-  } = _ref;
-  return width && css`
+  ${({
+  width
+}) => width && css`
     ${computeWidth({
-    width
-  })}
+  width
+})}
 
     ${StyledButton} {
       width: 100%
       justify-content: space-between;
-    }`;
-}}
+    }`}
 
   & > ${StyledButton} {
     margin: 0;
@@ -46,11 +43,9 @@ const StyledMultiActionButton = styled.div`
       }
     }
 
-    ${_ref2 => {
-  let {
-    displayed
-  } = _ref2;
-  return displayed && css`
+    ${({
+  displayed
+}) => displayed && css`
         background-color: var(--colorsActionMajor700);
         border-color: var(--colorsActionMajor700);
 
@@ -63,18 +58,15 @@ const StyledMultiActionButton = styled.div`
           border-color: var(--colorsSemanticFocus500);
           margin: 0 -1px;
         }
-      `;
-}}
+      `}
   }
 `;
 const StyledButtonChildrenContainer = styled.div`
-  ${_ref3 => {
-  let {
-    theme,
-    align,
-    minWidth
-  } = _ref3;
-  return css`
+  ${({
+  theme,
+  align,
+  minWidth
+}) => css`
     background-color: var(--colorsActionMajorYang100);
     min-width: ${minWidth}px;
     white-space: nowrap;
@@ -110,8 +102,7 @@ const StyledButtonChildrenContainer = styled.div`
         margin-top: 3px;
       }
     }
-  `;
-}}
+  `}
 `;
 StyledButtonChildrenContainer.defaultProps = {
   theme: baseTheme

package/esm/components/navigation-bar/fixed-navigation-bar.context.js

@@ -1,14 +1,13 @@
 import React, { createContext, useState, useCallback } from "react";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver/useResizeObserver";
 const FixedNavigationBarContext = /*#__PURE__*/createContext({});
-export const FixedNavigationBarContextProvider = _ref => {
-  let {
-    position,
-    orientation,
-    offset,
-    children,
-    navbarElement
-  } = _ref;
+export const FixedNavigationBarContextProvider = ({
+  position,
+  orientation,
+  offset,
+  children,
+  navbarElement
+}) => {
   const [navbarHeight, setNavbarHeight] = useState(navbarElement?.offsetHeight);
   const updateHeight = useCallback(() => setNavbarHeight(navbarElement?.offsetHeight), [navbarElement]);
   useResizeObserver({

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

@@ -3,18 +3,17 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import StyledNavigationBar from "./navigation-bar.style";
 import { FixedNavigationBarContextProvider } from "./fixed-navigation-bar.context";
-const NavigationBar = _ref => {
-  let {
-    navigationType = "light",
-    isLoading = false,
-    children,
-    ariaLabel,
-    position,
-    offset = "0",
-    orientation,
-    isGlobal,
-    ...props
-  } = _ref;
+const NavigationBar = ({
+  navigationType = "light",
+  isLoading = false,
+  children,
+  ariaLabel,
+  position,
+  offset = "0",
+  orientation,
+  isGlobal,
+  ...props
+}) => {
   const [navbarElement, setNavbarElement] = useState(null);
   return /*#__PURE__*/React.createElement(StyledNavigationBar, _extends({
     role: "navigation",

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

@@ -35,13 +35,11 @@ const StyledNavigationBar = styled.nav`
     margin-right: 10px;
   }
 
-  ${_ref => {
-  let {
-    position,
-    orientation,
-    offset
-  } = _ref;
-  return position && orientation && css`
+  ${({
+  position,
+  orientation,
+  offset
+}) => position && orientation && css`
       position: ${position};
       ${orientation}: ${offset};
 
@@ -49,16 +47,13 @@ const StyledNavigationBar = styled.nav`
         box-sizing: border-box;
         width: 100%;
       `}
-    `;
-}}
+    `}
 
-  ${_ref2 => {
-  let {
-    navigationType,
-    theme,
-    isGlobal
-  } = _ref2;
-  return css`
+  ${({
+  navigationType,
+  theme,
+  isGlobal
+}) => css`
     min-height: 40px;
     z-index: ${isGlobal ? theme.zIndex.globalNav : theme.zIndex.nav};
 
@@ -83,8 +78,7 @@ const StyledNavigationBar = styled.nav`
       border-bottom: var(--borderWidth100) solid
         var(--colorsComponentsMenuSummerChildAlt500);
     `}
-  `;
-}}
+  `}
 `;
 StyledNavigationBar.defaultProps = {
   theme: baseTheme