carbon-react 119.10.0 → 119.10.2

package/esm/components/decimal/decimal.component.js

@@ -8,25 +8,24 @@ import usePrevious from "../../hooks/__internal__/usePrevious";
 import Logger from "../../__internal__/utils/logger";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const Decimal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    align = "right",
-    defaultValue,
-    precision = 2,
-    inputWidth,
-    readOnly,
-    onChange,
-    onBlur,
-    onKeyPress,
-    id,
-    name,
-    allowEmptyValue = false,
-    required,
-    locale,
-    value,
-    inputRef,
-    ...rest
-  } = _ref;
+const Decimal = /*#__PURE__*/React.forwardRef(({
+  align = "right",
+  defaultValue,
+  precision = 2,
+  inputWidth,
+  readOnly,
+  onChange,
+  onBlur,
+  onKeyPress,
+  id,
+  name,
+  allowEmptyValue = false,
+  required,
+  locale,
+  value,
+  inputRef,
+  ...rest
+}, ref) => {
   const l = useContext(LocaleContext);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;

package/esm/components/definition-list/dd.component.js

@@ -2,11 +2,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import { StyledDd } from "./definition-list.style";
-const Dd = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
+const Dd = ({
+  children,
+  ...rest
+}) => {
   const {
     mb
   } = rest;

package/esm/components/definition-list/definition-list.style.js

@@ -5,12 +5,10 @@ import { baseTheme } from "../../style/themes";
 export const StyledDl = styled.dl`
   ${space}
 
-  ${_ref => {
-  let {
-    asSingleColumn,
-    w
-  } = _ref;
-  return css`
+  ${({
+  asSingleColumn,
+  w
+}) => css`
     ${!asSingleColumn && css`
       display: grid;
       grid-template-rows: auto;
@@ -19,8 +17,7 @@ export const StyledDl = styled.dl`
     ${asSingleColumn && css`
       line-height: 21px;
     `}
-  `;
-}}
+  `}
 
   width: 100%;
   height: auto;
@@ -31,27 +28,21 @@ StyledDl.defaultProps = {
 };
 export const StyledDtDiv = styled.div`
   ${space}
-  ${_ref2 => {
-  let {
-    dtTextAlign
-  } = _ref2;
-  return css`
+  ${({
+  dtTextAlign
+}) => css`
     text-align: ${dtTextAlign};
-  `;
-}}
+  `}
 `;
 StyledDtDiv.defaultProps = {
   theme: baseTheme
 };
 export const StyledDdDiv = styled.div`
-  ${_ref3 => {
-  let {
-    ddTextAlign
-  } = _ref3;
-  return css`
+  ${({
+  ddTextAlign
+}) => css`
     text-align: ${ddTextAlign};
-  `;
-}}
+  `}
 `;
 export const StyledDt = styled.dt`
   ${space}

package/esm/components/definition-list/dl.component.js

@@ -6,15 +6,14 @@ import { StyledDl, StyledDtDiv, StyledDdDiv } from "./definition-list.style";
 import Dt from "./dt.component";
 import Dd from "./dd.component";
 import DlContext from "./__internal__/dl.context";
-const Dl = _ref => {
-  let {
-    children,
-    w = 50,
-    dtTextAlign = "right",
-    ddTextAlign = "left",
-    asSingleColumn = false,
-    ...rest
-  } = _ref;
+const Dl = ({
+  children,
+  w = 50,
+  dtTextAlign = "right",
+  ddTextAlign = "left",
+  asSingleColumn = false,
+  ...rest
+}) => {
   const dlComponent = [];
   const listChildren = React.Children.toArray(children);
   let key = "";

package/esm/components/definition-list/dt.component.js

@@ -3,11 +3,10 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledDt } from "./definition-list.style";
 import DlContext from "./__internal__/dl.context";
-const Dt = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
+const Dt = ({
+  children,
+  ...rest
+}) => {
   const {
     asSingleColumn
   } = useContext(DlContext);

package/esm/components/detail/detail.component.js

@@ -4,26 +4,23 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote } from "./detail.style";
-export const Detail = _ref => {
-  let {
-    className,
-    icon,
-    footnote,
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledDetail, _extends({
-    className: `carbon-detail ${className}`
-  }, tagComponent("detail", rest), filterStyledSystemMarginProps(rest)), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {
-    type: icon,
-    "data-element": "icon"
-  }), /*#__PURE__*/React.createElement(StyledDetailContent, {
-    "data-element": "detail-content",
-    hasIcon: !!icon
-  }, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
-    "data-element": "footnote",
-    hasIcon: !!icon
-  }, footnote));
-};
+export const Detail = ({
+  className,
+  icon,
+  footnote,
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledDetail, _extends({
+  className: `carbon-detail ${className}`
+}, tagComponent("detail", rest), filterStyledSystemMarginProps(rest)), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {
+  type: icon,
+  "data-element": "icon"
+}), /*#__PURE__*/React.createElement(StyledDetailContent, {
+  "data-element": "detail-content",
+  hasIcon: !!icon
+}, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
+  "data-element": "footnote",
+  hasIcon: !!icon
+}, footnote));
 Detail.displayName = "Detail";
 export default Detail;

package/esm/components/detail/detail.style.js

@@ -12,11 +12,9 @@ const StyledDetail = styled.div`
   }
 `;
 const StyledDetailContent = styled.div`
-  ${_ref => {
-  let {
-    hasIcon
-  } = _ref;
-  return css`
+  ${({
+  hasIcon
+}) => css`
     display: inline-block;
     line-height: 18px;
     white-space: pre-wrap;
@@ -26,8 +24,7 @@ const StyledDetailContent = styled.div`
     ${hasIcon && css`
       margin-left: 26px;
     `}
-  `;
-}}
+  `}
 `;
 const StyledDetailIcon = styled(Icon)`
   position: absolute;
@@ -45,11 +42,9 @@ const StyledDetailIcon = styled(Icon)`
   }
 `;
 const StyledDetailFootnote = styled.div`
-  ${_ref2 => {
-  let {
-    hasIcon
-  } = _ref2;
-  return css`
+  ${({
+  hasIcon
+}) => css`
     color: var(--colorsUtilityYin055);
     font-size: 13px;
     position: relative;
@@ -58,8 +53,7 @@ const StyledDetailFootnote = styled.div`
     ${hasIcon && css`
       margin-left: 26px;
     `}
-  `;
-}}
+  `}
 `;
 StyledDetail.defaultProps = {
   theme: baseTheme

package/esm/components/dialog/dialog.component.js

@@ -14,29 +14,28 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-export const Dialog = _ref => {
-  let {
-    className,
-    children,
-    open,
-    height,
-    size = "medium",
-    title,
-    disableEscKey,
-    subtitle,
-    disableAutoFocus = false,
-    focusFirstElement,
-    focusableSelectors,
-    onCancel,
-    showCloseIcon = true,
-    bespokeFocusTrap,
-    disableClose,
-    help,
-    role = "dialog",
-    contentPadding = {},
-    focusableContainers,
-    ...rest
-  } = _ref;
+export const Dialog = ({
+  className,
+  children,
+  open,
+  height,
+  size = "medium",
+  title,
+  disableEscKey,
+  subtitle,
+  disableAutoFocus = false,
+  focusFirstElement,
+  focusableSelectors,
+  onCancel,
+  showCloseIcon = true,
+  bespokeFocusTrap,
+  disableClose,
+  help,
+  role = "dialog",
+  contentPadding = {},
+  focusableContainers,
+  ...rest
+}) => {
   const locale = useLocale();
   const dialogRef = useRef(null);
   const innerContentRef = useRef(null);

package/esm/components/dialog/dialog.style.js

@@ -16,13 +16,10 @@ const dialogSizes = {
   large: "960px",
   "extra-large": "1080px"
 };
-const calculatePaddingTopInnerContent = _ref => {
-  let {
-    py,
-    p
-  } = _ref;
-  return [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
-};
+const calculatePaddingTopInnerContent = ({
+  py,
+  p
+}) => [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
 const StyledDialog = styled.div`
   background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
@@ -31,40 +28,28 @@ const StyledDialog = styled.div`
   border-radius: var(--borderRadius200);
   position: fixed;
   top: 50%;
-  z-index: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.zIndex.modal;
-}};
-  max-height: ${_ref3 => {
-  let {
-    topMargin
-  } = _ref3;
-  return `calc(100vh - ${topMargin}px)`;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.modal};
+  max-height: ${({
+  topMargin
+}) => `calc(100vh - ${topMargin}px)`};
 
   &:focus {
     outline: none;
   }
 
-  ${_ref4 => {
-  let {
-    size
-  } = _ref4;
-  return size && css`
+  ${({
+  size
+}) => size && css`
       width: ${dialogSizes[size]};
-    `;
-}}
+    `}
 
-  ${_ref5 => {
-  let {
-    dialogHeight
-  } = _ref5;
-  return dialogHeight && css`
+  ${({
+  dialogHeight
+}) => dialogHeight && css`
       height: ${dialogHeight}px;
-    `;
-}}
+    `}
 
   ${StyledForm} {
     padding-bottom: 0px;
@@ -100,12 +85,9 @@ const StyledDialogTitle = styled.div`
   border-bottom: 1px solid #ccd6db;
   border-top-right-radius: var(--borderRadius200);
   border-top-left-radius: var(--borderRadius200);
-  ${_ref6 => {
-  let {
-    showCloseIcon
-  } = _ref6;
-  return showCloseIcon && "padding-right: 85px";
-}};
+  ${({
+  showCloseIcon
+}) => showCloseIcon && "padding-right: 85px"};
 
   ${StyledHeaderContent} {
     align-items: baseline;
@@ -119,12 +101,9 @@ const StyledDialogTitle = styled.div`
       display: block;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding: ${_ref7 => {
-  let {
-    hasSubtitle
-  } = _ref7;
-  return !hasSubtitle && "4px 0px";
-}};
+      padding: ${({
+  hasSubtitle
+}) => !hasSubtitle && "4px 0px"};
     }
   }
 `;
@@ -132,14 +111,11 @@ const StyledDialogContent = styled.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  ${_ref8 => {
-  let {
-    hasStickyFooter
-  } = _ref8;
-  return !hasStickyFooter && css`
+  ${({
+  hasStickyFooter
+}) => !hasStickyFooter && css`
       overflow-y: auto;
-    `;
-}}
+    `}
   width: 100%;
   flex: 1;
   padding: 0px ${HORIZONTAL_PADDING}px ${CONTENT_BOTTOM_PADDING}px;

package/esm/components/dialog-full-screen/content.style.js

@@ -1,14 +1,11 @@
 import styled, { css } from "styled-components";
 import { StyledFormFooter, StyledFormContent } from "../form/form.style";
 const StyledContent = styled.div`
-  ${_ref => {
-  let {
-    hasStickyFooter
-  } = _ref;
-  return !hasStickyFooter && css`
+  ${({
+  hasStickyFooter
+}) => !hasStickyFooter && css`
       overflow-y: auto;
-    `;
-}}
+    `}
   padding: 0 16px;
   flex: 1;
 
@@ -65,11 +62,9 @@ const StyledContent = styled.div`
     }
   }
 
-  ${_ref2 => {
-  let {
-    disableContentPadding
-  } = _ref2;
-  return css`
+  ${({
+  disableContentPadding
+}) => css`
     ${!disableContentPadding && css`
       @media screen and (min-width: 600px) {
         padding: 0 24px;
@@ -85,17 +80,13 @@ const StyledContent = styled.div`
     ${disableContentPadding && css`
       padding: 0;
     `}
-  `;
-}}
+  `}
 
-  ${_ref3 => {
-  let {
-    hasHeader
-  } = _ref3;
-  return !hasHeader && css`
+  ${({
+  hasHeader
+}) => !hasHeader && css`
       padding-top: 0;
       margin-top: -25px;
-    `;
-}}
+    `}
 `;
 export default StyledContent;

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -13,31 +13,30 @@ import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
-export const DialogFullScreen = _ref => {
-  let {
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    disableAutoFocus = false,
-    focusFirstElement,
-    bespokeFocusTrap,
-    open,
-    children,
-    title,
-    subtitle,
-    pagesStyling,
-    headerChildren,
-    showCloseIcon = true,
-    disableContentPadding,
-    disableEscKey,
-    onCancel,
-    contentRef,
-    help,
-    role = "dialog",
-    focusableContainers,
-    focusableSelectors,
-    ...rest
-  } = _ref;
+export const DialogFullScreen = ({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  disableAutoFocus = false,
+  focusFirstElement,
+  bespokeFocusTrap,
+  open,
+  children,
+  title,
+  subtitle,
+  pagesStyling,
+  headerChildren,
+  showCloseIcon = true,
+  disableContentPadding,
+  disableEscKey,
+  onCancel,
+  contentRef,
+  help,
+  role = "dialog",
+  focusableContainers,
+  focusableSelectors,
+  ...rest
+}) => {
   const locale = useLocale();
   const dialogRef = useRef(null);
   const headingRef = useRef(null);

package/esm/components/dialog-full-screen/dialog-full-screen.style.js

@@ -16,12 +16,9 @@ const StyledDialogFullScreen = styled.div`
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.zIndex.fullScreenModal;
-}}; // TODO (tokens): implement elevation tokens - FE-4437
+  z-index: ${({
+  theme
+}) => theme.zIndex.fullScreenModal}; // TODO (tokens): implement elevation tokens - FE-4437
   display: flex;
   flex-direction: column;
 
@@ -45,11 +42,9 @@ const StyledDialogFullScreen = styled.div`
     The following CSS is for a legacy use of the Pages component.
     Please do not remove this until Pages has been re-written.
    */
-  ${_ref2 => {
-  let {
-    pagesStyling
-  } = _ref2;
-  return pagesStyling && css`
+  ${({
+  pagesStyling
+}) => pagesStyling && css`
       ${StyledContent} {
         padding: 0;
         margin-top: -25px;
@@ -77,8 +72,7 @@ const StyledDialogFullScreen = styled.div`
           width: 100%;
         }
       }
-    `;
-}}
+    `}
 `;
 StyledDialogFullScreen.defaultProps = {
   theme: baseTheme

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -4,26 +4,23 @@ import PropTypes from "prop-types";
 import { StyledDismissibleBox } from "./dismissible-box.style";
 import IconButton from "../icon-button";
 import Icon from "../icon";
-export const DismissibleBox = _ref => {
-  let {
-    children,
-    onClose,
-    borderRadius = "borderRadius100",
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
-    p: "20px 24px 20px 20px",
-    "data-component": "dismissible-box",
-    borderRadius: borderRadius
-  }, rest), children, /*#__PURE__*/React.createElement("span", {
-    "data-element": "close-button-wrapper"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onClose,
-    "aria-label": "close-button",
-    ml: 3
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "close",
-    color: "--colorsActionMinor500"
-  }))));
-};
+export const DismissibleBox = ({
+  children,
+  onClose,
+  borderRadius = "borderRadius100",
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
+  p: "20px 24px 20px 20px",
+  "data-component": "dismissible-box",
+  borderRadius: borderRadius
+}, rest), children, /*#__PURE__*/React.createElement("span", {
+  "data-element": "close-button-wrapper"
+}, /*#__PURE__*/React.createElement(IconButton, {
+  onClick: onClose,
+  "aria-label": "close-button",
+  ml: 3
+}, /*#__PURE__*/React.createElement(Icon, {
+  type: "close",
+  color: "--colorsActionMinor500"
+}))));
 export default DismissibleBox;

package/esm/components/dismissible-box/dismissible-box.style.js

@@ -2,12 +2,10 @@ import styled, { css } from "styled-components";
 import Box from "../box";
 import StyledIcon from "../icon/icon.style";
 const StyledDismissibleBox = styled(Box)`
-  ${_ref => {
-  let {
-    hasBorderLeftHighlight = true,
-    variant = "light"
-  } = _ref;
-  return css`
+  ${({
+  hasBorderLeftHighlight = true,
+  variant = "light"
+}) => css`
     background-color: ${variant === "light" ? "#FFFFFF" : "var(--colorsUtilityMajor050)"};
 
     border: 1px solid var(--colorsUtilityMajor100);
@@ -23,7 +21,6 @@ const StyledDismissibleBox = styled(Box)`
     ${StyledIcon}:hover {
       color: var(--colorsActionMinor600);
     }
-  `;
-}}
+  `}
 `;
 export { StyledDismissibleBox };