carbon-react 119.10.0 → 119.10.2

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

@@ -10,32 +10,31 @@ import Accordion from "./__internal__/accordion";
 import { StyledTileSelectContainer, StyledTileSelect, StyledTileSelectInput, StyledTitleContainer, StyledTitle, StyledSubtitle, StyledAdornment, StyledDescription, StyledDeselectWrapper, StyledFooterWrapper, StyledFocusWrapper, StyledAccordionFooterWrapper } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const checkPropTypeIsNode = prop => typeof prop !== "string";
-const TileSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    onChange,
-    onBlur,
-    onFocus,
-    value,
-    name,
-    checked = false,
-    className,
-    disabled,
-    title,
-    subtitle,
-    description,
-    titleAdornment,
-    type = "checkbox",
-    id,
-    customActionButton,
-    actionButtonAdornment,
-    footer,
-    prefixAdornment,
-    additionalInformation,
-    accordionContent,
-    accordionControl,
-    accordionExpanded,
-    ...rest
-  } = _ref;
+const TileSelect = /*#__PURE__*/React.forwardRef(({
+  onChange,
+  onBlur,
+  onFocus,
+  value,
+  name,
+  checked = false,
+  className,
+  disabled,
+  title,
+  subtitle,
+  description,
+  titleAdornment,
+  type = "checkbox",
+  id,
+  customActionButton,
+  actionButtonAdornment,
+  footer,
+  prefixAdornment,
+  additionalInformation,
+  accordionContent,
+  accordionControl,
+  accordionExpanded,
+  ...rest
+}, ref) => {
   const l = useLocale();
   const [hasFocus, setHasFocus] = useState(false);
   const handleDeselect = () => onChange?.({

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

@@ -23,12 +23,9 @@ const StyledSubtitle = styled.h4`
 `;
 const StyledAdornment = styled.div`
   z-index: 500;
-  margin-bottom: ${_ref => {
-  let {
-    hasAdditionalInformation
-  } = _ref;
-  return hasAdditionalInformation ? "4" : "8";
-}}px;
+  margin-bottom: ${({
+  hasAdditionalInformation
+}) => hasAdditionalInformation ? "4" : "8"}px;
 `;
 const StyledDescription = styled.p`
   color: var(--colorsActionMinorYin055);
@@ -39,20 +36,15 @@ const StyledTileSelect = styled.div`
   background: var(--colorsActionMinorYang100);
   padding: 24px;
 
-  ${_ref2 => {
-  let {
-    checked
-  } = _ref2;
-  return checked && css`
+  ${({
+  checked
+}) => checked && css`
       background: var(--colorsActionMajor025);
-    `;
-}}
+    `}
 
-  ${_ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled && css`
+  ${({
+  disabled
+}) => disabled && css`
       background: var(--colorsActionMinorYang100);
       ${StyledTitle}, ${StyledSubtitle}, ${StyledDescription} {
         color: var(--colorsActionMinorYin030);
@@ -60,16 +52,13 @@ const StyledTileSelect = styled.div`
       ${StyledAdornment} * {
         opacity: 0.3;
       }
-    `;
-}}
+    `}
 `;
 const StyledFocusWrapper = styled.div`
-  ${_ref4 => {
-  let {
-    checked,
-    hasFocus
-  } = _ref4;
-  return css`
+  ${({
+  checked,
+  hasFocus
+}) => css`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
     border-radius: var(--borderRadius100);
@@ -84,8 +73,7 @@ const StyledFocusWrapper = styled.div`
       outline: 3px solid var(--colorsSemanticFocus500);
       z-index: 15;
     `}
-  `;
-}}
+  `}
 `;
 const StyledTileSelectContainer = styled.div`
   ${margin}
@@ -96,17 +84,14 @@ const StyledTileSelectContainer = styled.div`
   & + & ${StyledFocusWrapper} {
     margin-top: -1px;
   }
-  ${_ref5 => {
-  let {
-    checked,
-    disabled
-  } = _ref5;
-  return !checked && !disabled && css`
+  ${({
+  checked,
+  disabled
+}) => !checked && !disabled && css`
       &:hover ${StyledTileSelect} {
         background: var(--colorsActionMinor050);
       }
-    `;
-}}
+    `}
 `;
 const StyledFooterWrapper = styled.div`
   width: fit-content;
@@ -122,17 +107,14 @@ const StyledAccordionFooterWrapper = styled.div`
   border-bottom-right-radius: var(--borderRadius100);
   border-bottom-left-radius: var(--borderRadius100);
 
-  ${_ref6 => {
-  let {
-    accordionExpanded
-  } = _ref6;
-  return `
+  ${({
+  accordionExpanded
+}) => `
       span[data-element="chevron_down"] {
         transition: transform 0.3s;
         ${!accordionExpanded && "transform: rotate(-90deg)"};
       }
-  `;
-}}
+  `}
 `;
 const StyledTileSelectInput = styled(Input)`
   position: absolute;
@@ -143,12 +125,9 @@ const StyledTileSelectInput = styled(Input)`
   width: 100%;
   margin: 0;
   z-index: 100;
-  cursor: ${_ref7 => {
-  let {
-    disabled
-  } = _ref7;
-  return disabled ? "not-allowed" : "pointer";
-}};
+  cursor: ${({
+  disabled
+}) => disabled ? "not-allowed" : "pointer"};
 `;
 const StyledTitleContainer = styled.div`
   display: inline-flex;
@@ -158,11 +137,9 @@ const StyledTitleContainer = styled.div`
   position: relative;
 `;
 const StyledDeselectWrapper = styled.div`
-  ${_ref8 => {
-  let {
-    hasActionAdornment
-  } = _ref8;
-  return css`
+  ${({
+  hasActionAdornment
+}) => css`
     z-index: 200;
     position: relative;
     top: -4px;
@@ -179,8 +156,7 @@ const StyledDeselectWrapper = styled.div`
         top: 2px;
       }
     `}
-  `;
-}}
+  `}
 `;
 const StyledTileSelectFieldset = styled(Fieldset)`
   ${margin}
@@ -193,16 +169,13 @@ const StyledTileSelectFieldset = styled(Fieldset)`
       margin-left: -2px;
     }
   }
-  ${_ref9 => {
-  let {
-    multiSelect
-  } = _ref9;
-  return multiSelect && css`
+  ${({
+  multiSelect
+}) => multiSelect && css`
       ${StyledTileSelectContainer} {
         margin-bottom: 8px;
       }
-    `;
-}}
+    `}
 `;
 const StyledGroupDescription = styled.p`
   color: var(--colorsActionMinorYin055);

package/esm/components/toast/toast.component.js

@@ -9,21 +9,20 @@ import IconButton from "../icon-button";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalManager from "../../hooks/__internal__/useModalManager";
-const Toast = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    id,
-    isCenter = true,
-    maxWidth,
-    onDismiss,
-    open = true,
-    targetPortalId,
-    timeout,
-    variant = "success",
-    disableAutoFocus,
-    ...restProps
-  } = _ref;
+const Toast = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  id,
+  isCenter = true,
+  maxWidth,
+  onDismiss,
+  open = true,
+  targetPortalId,
+  timeout,
+  variant = "success",
+  disableAutoFocus,
+  ...restProps
+}, ref) => {
   const isNotice = variant === "notice";
   const locale = useLocale();
   const toastRef = useRef(null);

package/esm/components/toast/toast.style.js

@@ -7,13 +7,11 @@ import Portal from "../portal/portal";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 const StyledPortal = styled(Portal)`
-  ${_ref => {
-  let {
-    theme,
-    isCenter,
-    isNotice
-  } = _ref;
-  return css`
+  ${({
+  theme,
+  isCenter,
+  isNotice
+}) => css`
     position: fixed;
     top: 0;
 
@@ -29,8 +27,7 @@ const StyledPortal = styled(Portal)`
       top: auto;
       width: 100%;
     `}
-  `;
-}}
+  `}
 `;
 StyledPortal.defaultProps = {
   theme: baseTheme
@@ -38,12 +35,10 @@ StyledPortal.defaultProps = {
 const animationName = ".toast";
 const alternativeAnimationName = ".toast-alternative";
 const ToastStyle = styled(MessageStyle)`
-  ${_ref2 => {
-  let {
-    maxWidth,
-    isCenter
-  } = _ref2;
-  return css`
+  ${({
+  maxWidth,
+  isCenter
+}) => css`
     box-shadow: 0 10px 30px 0 rgba(0, 20, 29, 0.1),
       0 30px 60px 0 rgba(0, 20, 29, 0.1);
     line-height: 22px;
@@ -51,8 +46,7 @@ const ToastStyle = styled(MessageStyle)`
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
     margin-right: ${isCenter ? "auto" : "30px"};
-  `;
-}}
+  `}
 
   :focus {
     outline: none;
@@ -66,12 +60,9 @@ const ToastStyle = styled(MessageStyle)`
   &${animationName}-appear${animationName}-appear-active,
     &${animationName}-enter${animationName}-enter-active {
     opacity: 1;
-    transform: ${_ref3 => {
-  let {
-    isCenter
-  } = _ref3;
-  return isCenter ? " scale(1) translateY(0)" : "scale(1)";
-}};
+    transform: ${({
+  isCenter
+}) => isCenter ? " scale(1) translateY(0)" : "scale(1)"};
     transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
   }
 
@@ -88,11 +79,9 @@ const ToastStyle = styled(MessageStyle)`
     transform: translateY(-50%);
   }
 
-  ${_ref4 => {
-  let {
-    isNotice
-  } = _ref4;
-  return isNotice && css`
+  ${({
+  isNotice
+}) => isNotice && css`
       background-color: var(--colorsUtilityMajor400);
       border: none;
       color: var(--colorsSemanticNeutralYang100);
@@ -129,54 +118,41 @@ const ToastStyle = styled(MessageStyle)`
         opacity: 0;
         transition: all 200ms ease;
       }
-    `;
-}}
+    `}
 `;
 const ToastContentStyle = styled(MessageContentStyle)`
   padding: 8px 16px 8px 16px;
 
-  ${_ref5 => {
-  let {
-    isNotice
-  } = _ref5;
-  return isNotice && css`
+  ${({
+  isNotice
+}) => isNotice && css`
       display: flex;
       align-items: center;
       padding: 11px 40px;
-    `;
-}}
-
-  ${_ref6 => {
-  let {
-    isDismiss,
-    isNotice
-  } = _ref6;
-  return isDismiss && css`
+    `}
+
+  ${({
+  isDismiss,
+  isNotice
+}) => isDismiss && css`
       padding-right: ${isNotice ? "88px" : "48px"};
-    `;
-}}
+    `}
 `;
 const ToastWrapper = styled.div`
-  ${_ref7 => {
-  let {
-    isCenter
-  } = _ref7;
-  return isCenter && css`
+  ${({
+  isCenter
+}) => isCenter && css`
       position: relative;
       width: auto;
       height: auto;
       justify-content: center;
       display: flex;
-    `;
-}}
-
-  ${_ref8 => {
-  let {
-    isNotice
-  } = _ref8;
-  return isNotice && css`
+    `}
+
+  ${({
+  isNotice
+}) => isNotice && css`
       display: block;
-    `;
-}}
+    `}
 `;
 export { ToastStyle, TypeIcon, ToastContentStyle, ToastWrapper, StyledPortal };

package/esm/components/tooltip/tooltip-pointer.style.js

@@ -6,21 +6,18 @@ const pointerColor = (theme, bgColor, type) => {
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
 const StyledTooltipPointer = styled.div`
-  ${_ref => {
-  let {
-    theme,
-    type,
-    bgColor
-  } = _ref;
-  return css`
+  ${({
+  theme,
+  type,
+  bgColor
+}) => css`
     z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437
     background: ${pointerColor(theme, bgColor, type)};
     position: absolute;
     width: 12px;
     height: 12px;
     transform: rotate(45deg);
-  `;
-}}
+  `}
 `;
 StyledTooltipPointer.defaultProps = {
   theme: baseTheme

package/esm/components/tooltip/tooltip.component.js

@@ -18,23 +18,22 @@ function preserveRef(ref, node) {
   }
 }
 const TOOLTIP_DELAY = 100;
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    isVisible,
-    position = "top",
-    message,
-    type,
-    size = "medium",
-    isPartOfInput,
-    inputSize = "medium",
-    id,
-    bgColor,
-    fontColor,
-    flipOverrides,
-    target,
-    ...rest
-  } = _ref;
+const Tooltip = /*#__PURE__*/React.forwardRef(({
+  children,
+  isVisible,
+  position = "top",
+  message,
+  type,
+  size = "medium",
+  isPartOfInput,
+  inputSize = "medium",
+  id,
+  bgColor,
+  fontColor,
+  flipOverrides,
+  target,
+  ...rest
+}, ref) => {
   const targetInternalRef = useRef(null);
   const isControlled = isVisible !== undefined;
   const [isOpen, setIsOpen] = useState(false);
@@ -67,15 +66,13 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     };
     const targetElement = target || targetInternalRef.current;
     if (!isControlled) {
-      Object.entries(events).forEach(_ref2 => {
-        let [event, handler] = _ref2;
+      Object.entries(events).forEach(([event, handler]) => {
         targetElement?.addEventListener(event, handler);
       });
     }
     return () => {
       if (!isControlled) {
-        Object.entries(events).forEach(_ref3 => {
-          let [event, handler] = _ref3;
+        Object.entries(events).forEach(([event, handler]) => {
           targetElement?.removeEventListener(event, handler);
         });
       }
@@ -96,26 +93,20 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     return mainAxisOffset;
   }, [inputSize, isPartOfInput]);
-  const defaultMiddleware = useMemo(() => [offset(_ref4 => {
-    let {
-      placement
-    } = _ref4;
-    return {
-      mainAxis: calculateOffset(placement)
-    };
-  }), flip({
+  const defaultMiddleware = useMemo(() => [offset(({
+    placement
+  }) => ({
+    mainAxis: calculateOffset(placement)
+  })), flip({
     fallbackPlacements: flipOverridesRef.current
   }), shift({
     padding: 5,
     limiter: limitShift({
-      offset: _ref5 => {
-        let {
-          rects
-        } = _ref5;
-        return {
-          mainAxis: rects.reference.height
-        };
-      }
+      offset: ({
+        rects
+      }) => ({
+        mainAxis: rects.reference.height
+      })
     })
   }), arrow({
     element: arrowReference

package/esm/components/tooltip/tooltip.style.js

@@ -15,15 +15,13 @@ const tooltipColor = (theme, bgColor, type) => {
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
 const StyledTooltip = styled.div`
-  ${_ref => {
-  let {
-    size,
-    theme,
-    type,
-    bgColor,
-    fontColor
-  } = _ref;
-  return css`
+  ${({
+  size,
+  theme,
+  type,
+  bgColor,
+  fontColor
+}) => css`
     bottom: auto;
     right: auto;
     max-width: 300px;
@@ -42,8 +40,7 @@ const StyledTooltip = styled.div`
     line-height: 1.5rem;
     font-weight: 400;
     background-color: ${tooltipColor(theme, bgColor, type)};
-  `;
-}}
+  `}
 `;
 StyledTooltip.defaultProps = {
   theme: baseTheme

package/esm/components/typography/list.component.js

@@ -8,27 +8,21 @@ const getListStyleType = as => {
   }
   return "decimal";
 };
-const List = _ref => {
-  let {
-    children,
-    as = "ul",
-    ...props
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Typography, _extends({
-    variant: "p",
-    as: as,
-    listStyleType: getListStyleType(as)
-  }, props), children);
-};
-const ListItem = _ref2 => {
-  let {
-    children,
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(Typography, _extends({
-    as: "li",
-    variant: "p",
-    m: "0 0 8px 16px"
-  }, props), children);
-};
+const List = ({
+  children,
+  as = "ul",
+  ...props
+}) => /*#__PURE__*/React.createElement(Typography, _extends({
+  variant: "p",
+  as: as,
+  listStyleType: getListStyleType(as)
+}, props), children);
+const ListItem = ({
+  children,
+  ...props
+}) => /*#__PURE__*/React.createElement(Typography, _extends({
+  as: "li",
+  variant: "p",
+  m: "0 0 8px 16px"
+}, props), children);
 export { List, ListItem };