carbon-react 119.9.3 → 119.10.1

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

@@ -34,12 +34,9 @@ const StyledSubtitle = _styledComponents.default.h4`
 exports.StyledSubtitle = StyledSubtitle;
 const StyledAdornment = _styledComponents.default.div`
   z-index: 500;
-  margin-bottom: ${_ref => {
-  let {
-    hasAdditionalInformation
-  } = _ref;
-  return hasAdditionalInformation ? "4" : "8";
-}}px;
+  margin-bottom: ${({
+  hasAdditionalInformation
+}) => hasAdditionalInformation ? "4" : "8"}px;
 `;
 exports.StyledAdornment = StyledAdornment;
 const StyledDescription = _styledComponents.default.p`
@@ -52,20 +49,15 @@ const StyledTileSelect = _styledComponents.default.div`
   background: var(--colorsActionMinorYang100);
   padding: 24px;
 
-  ${_ref2 => {
-  let {
-    checked
-  } = _ref2;
-  return checked && (0, _styledComponents.css)`
+  ${({
+  checked
+}) => checked && (0, _styledComponents.css)`
       background: var(--colorsActionMajor025);
-    `;
-}}
+    `}
 
-  ${_ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled && (0, _styledComponents.css)`
+  ${({
+  disabled
+}) => disabled && (0, _styledComponents.css)`
       background: var(--colorsActionMinorYang100);
       ${StyledTitle}, ${StyledSubtitle}, ${StyledDescription} {
         color: var(--colorsActionMinorYin030);
@@ -73,17 +65,14 @@ const StyledTileSelect = _styledComponents.default.div`
       ${StyledAdornment} * {
         opacity: 0.3;
       }
-    `;
-}}
+    `}
 `;
 exports.StyledTileSelect = StyledTileSelect;
 const StyledFocusWrapper = _styledComponents.default.div`
-  ${_ref4 => {
-  let {
-    checked,
-    hasFocus
-  } = _ref4;
-  return (0, _styledComponents.css)`
+  ${({
+  checked,
+  hasFocus
+}) => (0, _styledComponents.css)`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
     border-radius: var(--borderRadius100);
@@ -98,8 +87,7 @@ const StyledFocusWrapper = _styledComponents.default.div`
       outline: 3px solid var(--colorsSemanticFocus500);
       z-index: 15;
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledFocusWrapper = StyledFocusWrapper;
 const StyledTileSelectContainer = _styledComponents.default.div`
@@ -111,17 +99,14 @@ const StyledTileSelectContainer = _styledComponents.default.div`
   & + & ${StyledFocusWrapper} {
     margin-top: -1px;
   }
-  ${_ref5 => {
-  let {
-    checked,
-    disabled
-  } = _ref5;
-  return !checked && !disabled && (0, _styledComponents.css)`
+  ${({
+  checked,
+  disabled
+}) => !checked && !disabled && (0, _styledComponents.css)`
       &:hover ${StyledTileSelect} {
         background: var(--colorsActionMinor050);
       }
-    `;
-}}
+    `}
 `;
 exports.StyledTileSelectContainer = StyledTileSelectContainer;
 const StyledFooterWrapper = _styledComponents.default.div`
@@ -139,17 +124,14 @@ const StyledAccordionFooterWrapper = _styledComponents.default.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)"};
       }
-  `;
-}}
+  `}
 `;
 exports.StyledAccordionFooterWrapper = StyledAccordionFooterWrapper;
 const StyledTileSelectInput = (0, _styledComponents.default)(_input.Input)`
@@ -161,12 +143,9 @@ const StyledTileSelectInput = (0, _styledComponents.default)(_input.Input)`
   width: 100%;
   margin: 0;
   z-index: 100;
-  cursor: ${_ref7 => {
-  let {
-    disabled
-  } = _ref7;
-  return disabled ? "not-allowed" : "pointer";
-}};
+  cursor: ${({
+  disabled
+}) => disabled ? "not-allowed" : "pointer"};
 `;
 exports.StyledTileSelectInput = StyledTileSelectInput;
 const StyledTitleContainer = _styledComponents.default.div`
@@ -178,11 +157,9 @@ const StyledTitleContainer = _styledComponents.default.div`
 `;
 exports.StyledTitleContainer = StyledTitleContainer;
 const StyledDeselectWrapper = _styledComponents.default.div`
-  ${_ref8 => {
-  let {
-    hasActionAdornment
-  } = _ref8;
-  return (0, _styledComponents.css)`
+  ${({
+  hasActionAdornment
+}) => (0, _styledComponents.css)`
     z-index: 200;
     position: relative;
     top: -4px;
@@ -199,8 +176,7 @@ const StyledDeselectWrapper = _styledComponents.default.div`
         top: 2px;
       }
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledDeselectWrapper = StyledDeselectWrapper;
 const StyledTileSelectFieldset = (0, _styledComponents.default)(_fieldset.default)`
@@ -214,16 +190,13 @@ const StyledTileSelectFieldset = (0, _styledComponents.default)(_fieldset.defaul
       margin-left: -2px;
     }
   }
-  ${_ref9 => {
-  let {
-    multiSelect
-  } = _ref9;
-  return multiSelect && (0, _styledComponents.css)`
+  ${({
+  multiSelect
+}) => multiSelect && (0, _styledComponents.css)`
       ${StyledTileSelectContainer} {
         margin-bottom: 8px;
       }
-    `;
-}}
+    `}
 `;
 exports.StyledTileSelectFieldset = StyledTileSelectFieldset;
 const StyledGroupDescription = _styledComponents.default.p`

package/lib/components/toast/toast.component.js

@@ -18,21 +18,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const Toast = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    id,
-    isCenter = true,
-    maxWidth,
-    onDismiss,
-    open = true,
-    targetPortalId,
-    timeout,
-    variant = "success",
-    disableAutoFocus,
-    ...restProps
-  } = _ref;
+const Toast = /*#__PURE__*/_react.default.forwardRef(({
+  children,
+  className,
+  id,
+  isCenter = true,
+  maxWidth,
+  onDismiss,
+  open = true,
+  targetPortalId,
+  timeout,
+  variant = "success",
+  disableAutoFocus,
+  ...restProps
+}, ref) => {
   const isNotice = variant === "notice";
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)(null);

package/lib/components/toast/toast.style.js

@@ -22,13 +22,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const StyledPortal = (0, _styledComponents.default)(_portal.default)`
-  ${_ref => {
-  let {
-    theme,
-    isCenter,
-    isNotice
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  theme,
+  isCenter,
+  isNotice
+}) => (0, _styledComponents.css)`
     position: fixed;
     top: 0;
 
@@ -44,8 +42,7 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
       top: auto;
       width: 100%;
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledPortal = StyledPortal;
 StyledPortal.defaultProps = {
@@ -54,12 +51,10 @@ StyledPortal.defaultProps = {
 const animationName = ".toast";
 const alternativeAnimationName = ".toast-alternative";
 const ToastStyle = (0, _styledComponents.default)(_message.default)`
-  ${_ref2 => {
-  let {
-    maxWidth,
-    isCenter
-  } = _ref2;
-  return (0, _styledComponents.css)`
+  ${({
+  maxWidth,
+  isCenter
+}) => (0, _styledComponents.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;
@@ -67,8 +62,7 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
     margin-right: ${isCenter ? "auto" : "30px"};
-  `;
-}}
+  `}
 
   :focus {
     outline: none;
@@ -82,12 +76,9 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
   &${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);
   }
 
@@ -104,11 +95,9 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
     transform: translateY(-50%);
   }
 
-  ${_ref4 => {
-  let {
-    isNotice
-  } = _ref4;
-  return isNotice && (0, _styledComponents.css)`
+  ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityMajor400);
       border: none;
       color: var(--colorsSemanticNeutralYang100);
@@ -145,56 +134,43 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
         opacity: 0;
         transition: all 200ms ease;
       }
-    `;
-}}
+    `}
 `;
 exports.ToastStyle = ToastStyle;
 const ToastContentStyle = (0, _styledComponents.default)(_messageContent.default)`
   padding: 8px 16px 8px 16px;
 
-  ${_ref5 => {
-  let {
-    isNotice
-  } = _ref5;
-  return isNotice && (0, _styledComponents.css)`
+  ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
       display: flex;
       align-items: center;
       padding: 11px 40px;
-    `;
-}}
-
-  ${_ref6 => {
-  let {
-    isDismiss,
-    isNotice
-  } = _ref6;
-  return isDismiss && (0, _styledComponents.css)`
+    `}
+
+  ${({
+  isDismiss,
+  isNotice
+}) => isDismiss && (0, _styledComponents.css)`
       padding-right: ${isNotice ? "88px" : "48px"};
-    `;
-}}
+    `}
 `;
 exports.ToastContentStyle = ToastContentStyle;
 const ToastWrapper = _styledComponents.default.div`
-  ${_ref7 => {
-  let {
-    isCenter
-  } = _ref7;
-  return isCenter && (0, _styledComponents.css)`
+  ${({
+  isCenter
+}) => isCenter && (0, _styledComponents.css)`
       position: relative;
       width: auto;
       height: auto;
       justify-content: center;
       display: flex;
-    `;
-}}
-
-  ${_ref8 => {
-  let {
-    isNotice
-  } = _ref8;
-  return isNotice && (0, _styledComponents.css)`
+    `}
+
+  ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
       display: block;
-    `;
-}}
+    `}
 `;
 exports.ToastWrapper = ToastWrapper;

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

@@ -15,21 +15,18 @@ const pointerColor = (theme, bgColor, type) => {
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
 const StyledTooltipPointer = _styledComponents.default.div`
-  ${_ref => {
-  let {
-    theme,
-    type,
-    bgColor
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  theme,
+  type,
+  bgColor
+}) => (0, _styledComponents.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: _base.default

package/lib/components/tooltip/tooltip.component.js

@@ -27,23 +27,22 @@ function preserveRef(ref, node) {
   }
 }
 const TOOLTIP_DELAY = 100;
-const Tooltip = /*#__PURE__*/_react.default.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.default.forwardRef(({
+  children,
+  isVisible,
+  position = "top",
+  message,
+  type,
+  size = "medium",
+  isPartOfInput,
+  inputSize = "medium",
+  id,
+  bgColor,
+  fontColor,
+  flipOverrides,
+  target,
+  ...rest
+}, ref) => {
   const targetInternalRef = (0, _react.useRef)(null);
   const isControlled = isVisible !== undefined;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -76,15 +75,13 @@ const Tooltip = /*#__PURE__*/_react.default.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);
         });
       }
@@ -105,26 +102,20 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return mainAxisOffset;
   }, [inputSize, isPartOfInput]);
-  const defaultMiddleware = (0, _react.useMemo)(() => [(0, _reactDom.offset)(_ref4 => {
-    let {
-      placement
-    } = _ref4;
-    return {
-      mainAxis: calculateOffset(placement)
-    };
-  }), (0, _reactDom.flip)({
+  const defaultMiddleware = (0, _react.useMemo)(() => [(0, _reactDom.offset)(({
+    placement
+  }) => ({
+    mainAxis: calculateOffset(placement)
+  })), (0, _reactDom.flip)({
     fallbackPlacements: flipOverridesRef.current
   }), (0, _reactDom.shift)({
     padding: 5,
     limiter: (0, _reactDom.limitShift)({
-      offset: _ref5 => {
-        let {
-          rects
-        } = _ref5;
-        return {
-          mainAxis: rects.reference.height
-        };
-      }
+      offset: ({
+        rects
+      }) => ({
+        mainAxis: rects.reference.height
+      })
     })
   }), (0, _reactDom.arrow)({
     element: arrowReference

package/lib/components/tooltip/tooltip.style.js

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

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

@@ -15,28 +15,22 @@ const getListStyleType = as => {
   }
   return "decimal";
 };
-const List = _ref => {
-  let {
-    children,
-    as = "ul",
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
-    variant: "p",
-    as: as,
-    listStyleType: getListStyleType(as)
-  }, props), children);
-};
+const List = ({
+  children,
+  as = "ul",
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
+  variant: "p",
+  as: as,
+  listStyleType: getListStyleType(as)
+}, props), children);
 exports.List = List;
-const ListItem = _ref2 => {
-  let {
-    children,
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
-    as: "li",
-    variant: "p",
-    m: "0 0 8px 16px"
-  }, props), children);
-};
+const ListItem = ({
+  children,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
+  as: "li",
+  variant: "p",
+  m: "0 0 8px 16px"
+}, props), children);
 exports.ListItem = ListItem;

package/lib/components/typography/typography.component.js

@@ -129,16 +129,15 @@ const getDecoration = variant => {
   return "none";
 };
 let isDeprecationWarningTriggered = false;
-const Typography = _styledComponents.default.span.attrs(_ref => {
-  let {
-    variant,
-    as,
-    fontSize,
-    fontWeight,
-    textTransform,
-    lineHeight,
-    textDecoration
-  } = _ref;
+const Typography = _styledComponents.default.span.attrs(({
+  variant,
+  as,
+  fontSize,
+  fontWeight,
+  textTransform,
+  lineHeight,
+  textDecoration
+}) => {
   return {
     as: as || getAs(variant),
     size: fontSize || getSize(variant),
@@ -156,23 +155,21 @@ const Typography = _styledComponents.default.span.attrs(_ref => {
   }
   return (0, _styledComponents.css)``;
 }}
-  ${_ref2 => {
-  let {
-    size,
-    weight,
-    textTransform,
-    lineHeight,
-    defaultMargin,
-    textDecoration,
-    display,
-    variant,
-    listStyleType,
-    whiteSpace,
-    wordWrap,
-    textOverflow,
-    truncate
-  } = _ref2;
-  return (0, _styledComponents.css)`
+  ${({
+  size,
+  weight,
+  textTransform,
+  lineHeight,
+  defaultMargin,
+  textDecoration,
+  display,
+  variant,
+  listStyleType,
+  whiteSpace,
+  wordWrap,
+  textOverflow,
+  truncate
+}) => (0, _styledComponents.css)`
     font-style: normal;
     font-size: ${size};
     font-weight: ${weight};
@@ -191,23 +188,19 @@ const Typography = _styledComponents.default.span.attrs(_ref => {
     ${variant === "sub" && "vertical-align: sub;"};
     ${display && `display: ${display};`};
     ${listStyleType && `list-style-type: ${listStyleType};`}; ;
-  `;
-}}
+  `}
   ${_styledSystem.space}
-  ${_ref3 => {
-  let {
-    color,
-    bg,
-    backgroundColor,
-    ...rest
-  } = _ref3;
-  return (0, _color.default)({
-    color,
-    bg,
-    backgroundColor,
-    ...rest
-  });
-}}
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => (0, _color.default)({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
 `;
 Typography.defaultProps = {
   color: "blackOpacity90",