carbon-react 119.10.0 → 119.10.2

package/esm/components/pod/pod.component.js

@@ -8,30 +8,29 @@ import Icon from "../icon";
 import Event from "../../__internal__/utils/helpers/events";
 let deprecationOnEditStringWarnTriggered = false;
 let deprecationOnEditObjectWarnTriggered = false;
-const Pod = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "data-element": dataElement,
-    "data-role": dataRole,
-    alignTitle = "left",
-    border = true,
-    children,
-    className,
-    displayEditButtonOnHover,
-    editContentFullWidth,
-    footer,
-    height,
-    internalEditButton,
-    onDelete,
-    onEdit,
-    onUndo,
-    size = "medium",
-    softDelete,
-    subtitle,
-    title,
-    triggerEditOnContent,
-    variant = "primary",
-    ...rest
-  } = _ref;
+const Pod = /*#__PURE__*/React.forwardRef(({
+  "data-element": dataElement,
+  "data-role": dataRole,
+  alignTitle = "left",
+  border = true,
+  children,
+  className,
+  displayEditButtonOnHover,
+  editContentFullWidth,
+  footer,
+  height,
+  internalEditButton,
+  onDelete,
+  onEdit,
+  onUndo,
+  size = "medium",
+  softDelete,
+  subtitle,
+  title,
+  triggerEditOnContent,
+  variant = "primary",
+  ...rest
+}, ref) => {
   if (!deprecationOnEditStringWarnTriggered && typeof onEdit === "string") {
     deprecationOnEditStringWarnTriggered = true;
     Logger.deprecate("Support for passing strings to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");

package/esm/components/pod/pod.style.js

@@ -9,18 +9,12 @@ const StyledPod = styled.div`
   display: flex;
   align-items: flex-start;
   width: 100%;
-  ${_ref => {
-  let {
-    internalEditButton
-  } = _ref;
-  return internalEditButton && "position: relative";
-}};
-  ${_ref2 => {
-  let {
-    height
-  } = _ref2;
-  return height && `height: ${height}`;
-}};
+  ${({
+  internalEditButton
+}) => internalEditButton && "position: relative"};
+  ${({
+  height
+}) => height && `height: ${height}`};
 
   &:focus {
     outline: none;
@@ -34,19 +28,17 @@ const blockBackgrounds = {
   tile: "var(--colorsUtilityYang100)"
 };
 const StyledBlock = styled.div`
-  ${_ref3 => {
-  let {
-    variant,
-    softDelete,
-    noBorder,
-    hasButtons,
-    contentTriggersEdit,
-    fullWidth,
-    internalEditButton,
-    isHovered,
-    isFocused
-  } = _ref3;
-  return css`
+  ${({
+  variant,
+  softDelete,
+  noBorder,
+  hasButtons,
+  contentTriggersEdit,
+  fullWidth,
+  internalEditButton,
+  isHovered,
+  isFocused
+}) => css`
       box-sizing: border-box;
       border-radius: var(--borderRadius100);
       display: flex;
@@ -92,8 +84,7 @@ const StyledBlock = styled.div`
           color: var(--colorsUtilityYin065);
         }
       `};
-    `;
-}}
+    `}
 `;
 const contentPaddings = {
   "extra-small": "8px",
@@ -104,12 +95,9 @@ const contentPaddings = {
 };
 const StyledContent = styled.div`
   text-align: left;
-  padding: ${_ref4 => {
-  let {
-    size
-  } = _ref4;
-  return contentPaddings[size];
-}};
+  padding: ${({
+  size
+}) => contentPaddings[size]};
   flex-grow: 1;
 `;
 const footerPaddings = {
@@ -120,13 +108,11 @@ const footerPaddings = {
   "extra-large": "24px 40px"
 };
 const StyledFooter = styled.div`
-  ${_ref5 => {
-  let {
-    variant,
-    size,
-    softDelete
-  } = _ref5;
-  return css`
+  ${({
+  variant,
+  size,
+  softDelete
+}) => css`
     background-color: var(--colorsUtilityMajor025);
     border-bottom-left-radius: var(--borderRadius100);
     border-bottom-right-radius: var(--borderRadius100);
@@ -137,24 +123,20 @@ const StyledFooter = styled.div`
     ${softDelete && `color: var(--colorsUtilityYin055)`};
 
     ${variant === "tile" && `border-top: 1px solid var(--colorsUtilityMajor100)`};
-  `;
-}}
+  `}
 `;
 const StyledActionsContainer = styled.div`
   display: flex;
   flex-direction: column;
 
-  ${_ref6 => {
-  let {
-    internalEditButton
-  } = _ref6;
-  return internalEditButton && css`
+  ${({
+  internalEditButton
+}) => internalEditButton && css`
       position: absolute;
       right: 2px;
       top: 2px;
       z-index: 10;
-    `;
-}}
+    `}
 `;
 const actionButtonSizes = {
   "extra-small": 34,
@@ -172,17 +154,15 @@ const actionButtonBackgrounds = {
 };
 const StyledEditAction = styled.a`
   && {
-    ${_ref7 => {
-  let {
-    displayOnlyOnHover,
-    isHovered,
-    isFocused,
-    variant,
-    size,
-    internalEditButton,
-    noBorder
-  } = _ref7;
-  return css`
+    ${({
+  displayOnlyOnHover,
+  isHovered,
+  isFocused,
+  variant,
+  size,
+  internalEditButton,
+  noBorder
+}) => css`
       cursor: pointer;
       background-color: ${actionButtonBackgrounds[variant]};
       border: 1px solid var(--colorsActionMinor200);
@@ -225,8 +205,7 @@ const StyledEditAction = styled.a`
         outline: 3px solid var(--colorsSemanticFocus500);
         border: none;
       `};
-    `;
-}};
+    `};
   }
 
   ${StyledLinkContent} {
@@ -236,16 +215,14 @@ const StyledEditAction = styled.a`
 `;
 const StyledDeleteButton = styled(IconButton)`
   && {
-    ${_ref8 => {
-  let {
-    noBorder,
-    internalEditButton,
-    isHovered,
-    isFocused,
-    variant,
-    size
-  } = _ref8;
-  return css`
+    ${({
+  noBorder,
+  internalEditButton,
+  isHovered,
+  isFocused,
+  variant,
+  size
+}) => css`
       cursor: pointer;
       background-color: ${actionButtonBackgrounds[variant]};
       border: ${noBorder ? "none" : "1px solid var(--colorsActionMinor200)"};
@@ -281,22 +258,19 @@ const StyledDeleteButton = styled(IconButton)`
         outline: 3px solid var(--colorsSemanticFocus500);
         border: none;
       `};
-    `;
-}}
+    `}
   }
 `;
 const StyledUndoButton = styled(IconButton)`
   && {
-    ${_ref9 => {
-  let {
-    isHovered,
-    isFocused,
-    variant,
-    size,
-    noBorder,
-    internalEditButton
-  } = _ref9;
-  return css`
+    ${({
+  isHovered,
+  isFocused,
+  variant,
+  size,
+  noBorder,
+  internalEditButton
+}) => css`
       cursor: pointer;
       background-color: ${actionButtonBackgrounds[variant]};
       border: 1px solid var(--colorsActionMinor200);
@@ -334,8 +308,7 @@ const StyledUndoButton = styled(IconButton)`
         outline: 3px solid var(--colorsSemanticFocus500);
         border: none;
       `};
-    `;
-}}
+    `}
   }
 `;
 const headerRightAlignMargins = {
@@ -346,21 +319,18 @@ const headerRightAlignMargins = {
   "extra-large": 30
 };
 const StyledHeader = styled.div`
-  ${_ref10 => {
-  let {
-    alignTitle,
-    internalEditButton,
-    size
-  } = _ref10;
-  return css`
+  ${({
+  alignTitle,
+  internalEditButton,
+  size
+}) => css`
     margin-bottom: 24px;
     text-align: ${alignTitle};
 
     ${alignTitle === "right" && internalEditButton && css`
       margin-right: ${headerRightAlignMargins[size]}px;
     `};
-  `;
-}}
+  `}
 `;
 const StyledSubtitle = styled.h5`
   margin-top: 8px;

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

@@ -9,75 +9,65 @@ import Popover from "../../__internal__/popover";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
-export const renderOpen = _ref => {
-  let {
-    tabIndex,
-    onClick,
-    "data-element": dataElement,
-    ref,
-    "aria-label": ariaLabel,
-    id,
-    "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHasPopup
-  } = _ref;
-  return /*#__PURE__*/React.createElement(PopoverContainerOpenIcon, {
-    tabIndex: tabIndex,
-    onClick: onClick,
-    "data-element": dataElement,
-    ref: ref,
-    "aria-label": ariaLabel,
-    "aria-haspopup": ariaHasPopup,
-    "aria-expanded": ariaExpanded,
-    id: id
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "settings"
-  }));
-};
-export const renderClose = _ref2 => {
-  let {
-    "data-element": dataElement,
-    tabIndex,
-    onClick,
-    ref,
-    "aria-label": ariaLabel
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(PopoverContainerCloseIcon, {
-    "data-element": dataElement,
-    tabIndex: tabIndex,
-    onClick: onClick,
-    ref: ref,
-    "aria-label": ariaLabel
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "close"
-  }));
-};
-const popoverMiddleware = [offset(_ref3 => {
-  let {
-    rects
-  } = _ref3;
-  return {
-    mainAxis: -rects.reference.height
-  };
-}), flip({
+export const renderOpen = ({
+  tabIndex,
+  onClick,
+  "data-element": dataElement,
+  ref,
+  "aria-label": ariaLabel,
+  id,
+  "aria-expanded": ariaExpanded,
+  "aria-haspopup": ariaHasPopup
+}) => /*#__PURE__*/React.createElement(PopoverContainerOpenIcon, {
+  tabIndex: tabIndex,
+  onClick: onClick,
+  "data-element": dataElement,
+  ref: ref,
+  "aria-label": ariaLabel,
+  "aria-haspopup": ariaHasPopup,
+  "aria-expanded": ariaExpanded,
+  id: id
+}, /*#__PURE__*/React.createElement(Icon, {
+  type: "settings"
+}));
+export const renderClose = ({
+  "data-element": dataElement,
+  tabIndex,
+  onClick,
+  ref,
+  "aria-label": ariaLabel
+}) => /*#__PURE__*/React.createElement(PopoverContainerCloseIcon, {
+  "data-element": dataElement,
+  tabIndex: tabIndex,
+  onClick: onClick,
+  ref: ref,
+  "aria-label": ariaLabel
+}, /*#__PURE__*/React.createElement(Icon, {
+  type: "close"
+}));
+const popoverMiddleware = [offset(({
+  rects
+}) => ({
+  mainAxis: -rects.reference.height
+})), flip({
   fallbackStrategy: "initialPlacement"
 })];
-export const PopoverContainer = _ref4 => {
-  let {
-    children,
-    title,
-    position = "right",
-    open,
-    onOpen,
-    onClose,
-    renderOpenComponent = renderOpen,
-    renderCloseComponent = renderClose,
-    shouldCoverButton = false,
-    ariaDescribedBy,
-    openButtonAriaLabel,
-    closeButtonAriaLabel = "close",
-    containerAriaLabel,
-    ...rest
-  } = _ref4;
+export const PopoverContainer = ({
+  children,
+  title,
+  position = "right",
+  open,
+  onOpen,
+  onClose,
+  renderOpenComponent = renderOpen,
+  renderCloseComponent = renderClose,
+  shouldCoverButton = false,
+  ariaDescribedBy,
+  openButtonAriaLabel,
+  closeButtonAriaLabel = "close",
+  containerAriaLabel,
+  ...rest
+}) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = useState(false);
   const closeButtonRef = useRef(null);

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

@@ -21,17 +21,13 @@ const PopoverContainerContentStyle = styled.div`
   box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;
-  z-index: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.zIndex.popover;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
 
-  ${_ref2 => {
-  let {
-    animationState
-  } = _ref2;
+  ${({
+  animationState
+}) => {
   switch (animationState) {
     case "entering":
       return `

package/esm/components/portal/portal.js

@@ -3,13 +3,12 @@ import ReactDOM from "react-dom";
 import guid from "../../__internal__/utils/helpers/guid";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 export const PortalContext = /*#__PURE__*/React.createContext({});
-const Portal = _ref => {
-  let {
-    children,
-    className,
-    id,
-    onReposition
-  } = _ref;
+const Portal = ({
+  children,
+  className,
+  id,
+  onReposition
+}) => {
   const [portalNode, setPortalNode] = useState(null);
   const uniqueId = useMemo(() => guid(), []);
   const {

package/esm/components/portrait/portrait-gravatar.component.js

@@ -3,14 +3,13 @@ import PropTypes from "prop-types";
 import MD5 from "crypto-js/md5";
 import { StyledPortraitGravatar } from "./portrait.style";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
-const PortraitGravatar = _ref => {
-  let {
-    gravatarEmail,
-    size,
-    alt,
-    shape = "circle",
-    errorCallback
-  } = _ref;
+const PortraitGravatar = ({
+  gravatarEmail,
+  size,
+  alt,
+  shape = "circle",
+  errorCallback
+}) => {
   const gravatarSrc = () => {
     const {
       dimensions

package/esm/components/portrait/portrait-initials.component.js

@@ -3,14 +3,13 @@ import PropTypes from "prop-types";
 import tokens from "@sage/design-tokens/js/base/common";
 import { StyledPortraitInitials, StyledPortraitInitialsImg, getColorsForInitials } from "./portrait.style";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
-const PortraitInitials = _ref => {
-  let {
-    initials,
-    size,
-    shape = "circle",
-    darkBackground,
-    alt
-  } = _ref;
+const PortraitInitials = ({
+  initials,
+  size,
+  shape = "circle",
+  darkBackground,
+  alt
+}) => {
   const [cachedImageDataUrl, setCachedImageDataUrl] = useState();
   useEffect(() => {
     setCachedImageDataUrl("");

package/esm/components/portrait/portrait.component.js

@@ -9,27 +9,26 @@ import PortraitInitials from "./portrait-initials.component";
 import { StyledCustomImg, StyledIcon, StyledPortraitContainer } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { NewValidationContext as RoundedCornersOptOutContext } from "../carbon-provider/carbon-provider.component";
-export const Portrait = _ref => {
-  let {
-    alt = "",
-    darkBackground = false,
-    gravatar,
-    iconType = "individual",
-    initials,
-    shape,
-    size = "M",
-    src,
-    onClick,
-    tooltipMessage,
-    tooltipId,
-    tooltipIsVisible,
-    tooltipPosition,
-    tooltipType,
-    tooltipSize,
-    tooltipBgColor,
-    tooltipFontColor,
-    ...rest
-  } = _ref;
+export const Portrait = ({
+  alt = "",
+  darkBackground = false,
+  gravatar,
+  iconType = "individual",
+  initials,
+  shape,
+  size = "M",
+  src,
+  onClick,
+  tooltipMessage,
+  tooltipId,
+  tooltipIsVisible,
+  tooltipPosition,
+  tooltipType,
+  tooltipSize,
+  tooltipBgColor,
+  tooltipFontColor,
+  ...rest
+}) => {
   const [externalError, setExternalError] = useState(false);
   const {
     roundedCornersOptOut

package/esm/components/portrait/portrait.style.js

@@ -3,11 +3,10 @@ import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import Icon from "../icon";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
-function stylingForSize(_ref) {
-  let {
-    size,
-    initials
-  } = _ref;
+function stylingForSize({
+  size,
+  initials
+}) {
   const params = PORTRAIT_SIZE_PARAMS[size];
   if (initials) {
     return css`
@@ -21,10 +20,9 @@ function stylingForSize(_ref) {
     height: ${params?.dimensions}px;
   `;
 }
-function stylingForShape(_ref2) {
-  let {
-    shape
-  } = _ref2;
+function stylingForShape({
+  shape
+}) {
   let cssString = "overflow: hidden;";
   if (shape === "square") cssString += "border-radius: 0px;";
   if (shape === "circle") cssString += "border-radius: var(--borderRadiusCircle);";
@@ -32,11 +30,10 @@ function stylingForShape(_ref2) {
     ${cssString}
   `;
 }
-function stylingForIcon(_ref3) {
-  let {
-    size,
-    darkBackground
-  } = _ref3;
+function stylingForIcon({
+  size,
+  darkBackground
+}) {
   const params = PORTRAIT_SIZE_PARAMS[size];
   let color = "var(--colorsUtilityMajor200)";
   let backgroundColor = "var(--colorsUtilityMajor025)";
@@ -98,22 +95,16 @@ export const StyledIcon = styled(Icon)`
     ${stylingForSize}
     ${stylingForIcon}
     ${stylingForShape}
-    border: 1px dashed ${_ref4 => {
-  let {
-    darkBackground
-  } = _ref4;
-  return darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)";
-}};
+    border: 1px dashed ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)"};
   }
 `;
 export const StyledPortraitContainer = styled.div`
   display: inline-block;
-  ${_ref5 => {
-  let {
-    onClick
-  } = _ref5;
-  return onClick && "cursor: pointer";
-}}
+  ${({
+  onClick
+}) => onClick && "cursor: pointer"}
   ${margin}
 `;
 StyledPortraitContainer.defaultProps = {