carbon-react 118.5.1 → 118.6.0

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

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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); }
 import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -10,39 +9,38 @@ import Box from "../box";
 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(({
-  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((_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 l = useLocale();
   const [hasFocus, setHasFocus] = useState(false);
-
-  const handleDeselect = () => onChange === null || onChange === void 0 ? void 0 : onChange({
-    target: { ...(name && {
+  const handleDeselect = () => onChange?.({
+    target: {
+      ...(name && {
         name
       }),
       ...(id && {
@@ -52,7 +50,6 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
       checked: false
     }
   });
-
   const renderActionButton = () => /*#__PURE__*/React.createElement(StyledDeselectWrapper, {
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/React.createElement(Button, {
@@ -61,7 +58,6 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
     disabled: disabled,
     onClick: handleDeselect
   }, l.tileSelect.deselect()), actionButtonAdornment);
-
   useEffect(() => {
     if (disabled && hasFocus) {
       setHasFocus(false);
@@ -81,11 +77,11 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
     onChange: onChange,
     onBlur: ev => {
       setHasFocus(false);
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
+      onBlur?.(ev);
     },
     onFocus: ev => {
       setHasFocus(true);
-      onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
+      onFocus?.(ev);
     },
     checked: checked,
     name: name,

package/esm/components/tile-select/tile-select.style.d.ts

@@ -28,7 +28,7 @@ declare const StyledDeselectWrapper: import("styled-components").StyledComponent
     hasActionAdornment: boolean;
 }, never>;
 declare const StyledTileSelectFieldset: import("styled-components").StyledComponent<{
-    ({ children, inline, legend, ...rest }: import("../fieldset").FieldsetProps): JSX.Element;
+    ({ children, inline, legend, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     multiSelect: boolean;

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

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

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

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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); }
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
@@ -10,20 +9,21 @@ 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(({
-  children,
-  className,
-  id,
-  isCenter = true,
-  maxWidth,
-  onDismiss,
-  open = true,
-  targetPortalId,
-  timeout,
-  variant = "success",
-  disableAutoFocus,
-  ...restProps
-}, ref) => {
+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 isNotice = variant === "notice";
   const locale = useLocale();
   const toastRef = useRef(null);
@@ -33,11 +33,9 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   const focusedElementBeforeOpening = useRef(null);
   const [tabIndex, setTabIndex] = useState(0);
   let refToPass = toastRef;
-
   if (ref && typeof ref === "object" && "current" in ref) {
     refToPass = ref;
   }
-
   const dismissToast = useCallback(ev => {
     if (onDismiss && Events.isEscKey(ev)) {
       ev.stopImmediatePropagation();
@@ -52,20 +50,16 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     /* istanbul ignore next */
     if (timer.current) clearTimeout(timer.current);
-
     if (!timeout || !open || !onDismiss) {
       return;
     }
-
     timer.current = setTimeout(() => onDismiss(), +timeout);
   }, [onDismiss, open, timeout]);
   useEffect(() => {
     if (!disableAutoFocus) {
       if (open) {
-        var _toastContentNodeRef$;
-
         focusedElementBeforeOpening.current = document.activeElement;
-        (_toastContentNodeRef$ = toastContentNodeRef.current) === null || _toastContentNodeRef$ === void 0 ? void 0 : _toastContentNodeRef$.focus();
+        toastContentNodeRef.current?.focus();
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
         focusedElementBeforeOpening.current = null;
@@ -80,7 +74,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       }
     };
   }, []);
-
   function renderCloseIcon() {
     if (!onDismiss) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -92,15 +85,12 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       type: "close"
     }));
   }
-
   function renderToastContent() {
     if (!open) return null;
     let toastVariant;
-
     if (variant !== "notice") {
       toastVariant = variant;
     }
-
     return /*#__PURE__*/React.createElement(CSSTransition, {
       enter: true,
       classNames: isNotice ? "toast-alternative" : "toast",
@@ -131,7 +121,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       isDismiss: !!onDismiss
     }, children), renderCloseIcon()));
   }
-
   return /*#__PURE__*/React.createElement(StyledPortal, {
     id: targetPortalId,
     isCenter: isCenter,

package/esm/components/toast/toast.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import TypeIcon from "../message/type-icon/type-icon.style";
-declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => JSX.Element, any, {
+declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;

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

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

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

@@ -1,25 +1,26 @@
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import { toColor } from "../../style/utils/color";
-
 const pointerColor = (theme, bgColor, type) => {
   if (bgColor) return toColor(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
-
 const StyledTooltipPointer = styled.div`
-  ${({
-  theme,
-  type,
-  bgColor
-}) => css`
+  ${_ref => {
+  let {
+    theme,
+    type,
+    bgColor
+  } = _ref;
+  return 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