carbon-react 119.10.0 → 119.10.2

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -7,24 +7,22 @@ const StyledTitleContent = styled.span`
   line-height: 20px;
   margin: 0;
 
-  ${_ref => {
-  let {
-    hasCustomLayout,
-    error,
-    warning,
-    info,
-    size,
-    isTabSelected,
-    hasSiblings,
-    borders = false,
-    position = "top",
-    noLeftBorder,
-    noRightBorder,
-    hasHref,
-    alternateStyling,
-    align
-  } = _ref;
-  return css`
+  ${({
+  hasCustomLayout,
+  error,
+  warning,
+  info,
+  size,
+  isTabSelected,
+  hasSiblings,
+  borders = false,
+  position = "top",
+  noLeftBorder,
+  noRightBorder,
+  hasHref,
+  alternateStyling,
+  align
+}) => css`
     text-align: ${align};
 
     ${position === "left" && css`
@@ -215,8 +213,7 @@ const StyledTitleContent = styled.span`
         `}
       `}
     `}
-  `;
-}}
+  `}
 `;
 const tabTitleStyles = css`
   background-color: transparent;
@@ -232,43 +229,35 @@ const tabTitleStyles = css`
   text-decoration: none;
   outline-offset: 0px;
   margin: 0;
-  ${_ref2 => {
-  let {
-    position
-  } = _ref2;
-  return position === "top" && "white-space: nowrap";
-}};
-
-  ${_ref3 => {
-  let {
-    position
-  } = _ref3;
-  return css`
+  ${({
+  position
+}) => position === "top" && "white-space: nowrap"};
+
+  ${({
+  position
+}) => css`
     ${position === "left" && css`
       border-top-right-radius: var(--borderRadius000);
     `}
-  `;
-}}
+  `}
 
   a:visited {
     color: inherit;
   }
 
-  ${_ref4 => {
-  let {
-    size,
-    position = "top",
-    borders = false,
-    noRightBorder,
-    noLeftBorder,
-    isTabSelected,
-    alternateStyling,
-    error,
-    warning,
-    info,
-    isInSidebar
-  } = _ref4;
-  return css`
+  ${({
+  size,
+  position = "top",
+  borders = false,
+  noRightBorder,
+  noLeftBorder,
+  isTabSelected,
+  alternateStyling,
+  error,
+  warning,
+  info,
+  isInSidebar
+}) => css`
     height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
 
     ${position === "top" && css`
@@ -404,8 +393,7 @@ const tabTitleStyles = css`
         background-color: var(--colorsActionMinor200);
       `}
     `}
-  `;
-}}
+  `}
 `;
 const StyledTabTitleButton = styled.button`
   ${tabTitleStyles}
@@ -414,14 +402,12 @@ const StyledTabTitleLink = styled.a`
   ${tabTitleStyles}
 `;
 const StyledLayoutWrapper = styled.div`
-  ${_ref5 => {
-  let {
-    hasCustomLayout,
-    titlePosition = "before",
-    hasCustomSibling,
-    position
-  } = _ref5;
-  return css`
+  ${({
+  hasCustomLayout,
+  titlePosition = "before",
+  hasCustomSibling,
+  position
+}) => css`
     ${hasCustomLayout && css`
       flex-grow: 2;
     `}
@@ -452,18 +438,15 @@ const StyledLayoutWrapper = styled.div`
         }
       }
     `}
-  `;
-}}
+  `}
 `;
 const StyledSelectedIndicator = styled.div`
   position: absolute;
   z-index: 1;
 
-  ${_ref6 => {
-  let {
-    position = "top"
-  } = _ref6;
-  return css`
+  ${({
+  position = "top"
+}) => css`
     ${position === "top" && css`
       bottom: 0px;
       left: 0px;
@@ -481,7 +464,6 @@ const StyledSelectedIndicator = styled.div`
       height: 100%;
       width: var(--sizing025);
     `}
-  `;
-}}
+  `}
 `;
 export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator };

package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -8,24 +8,20 @@ import useThrottle from "../../../../hooks/__internal__/useThrottle";
  *  It is ultimately tied to the position of the scroll that will then fade the shadow in and out. */
 const fullOpacityThreshold = 128;
 const getOpacityRatio = value => value / fullOpacityThreshold;
-const getScrollRight = _ref => {
-  let {
-    scrollWidth,
-    clientWidth,
-    scrollLeft
-  } = _ref;
-  return scrollWidth - clientWidth - scrollLeft;
-};
-const TabsHeader = _ref2 => {
-  let {
-    align = "left",
-    children,
-    position = "top",
-    role,
-    extendedLine,
-    noRightBorder = false,
-    isInSidebar = false
-  } = _ref2;
+const getScrollRight = ({
+  scrollWidth,
+  clientWidth,
+  scrollLeft
+}) => scrollWidth - clientWidth - scrollLeft;
+const TabsHeader = ({
+  align = "left",
+  children,
+  position = "top",
+  role,
+  extendedLine,
+  noRightBorder = false,
+  isInSidebar = false
+}) => {
   const [leftScrollOpacity, setLeftScrollOpacity] = useState(0);
   const [rightScrollOpacity, setRightScrollOpacity] = useState(1);
   const ref = useRef(null);

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -2,12 +2,10 @@ import styled, { css } from "styled-components";
 import BaseTheme from "../../../../style/themes/base";
 const outlineWidth = "3px";
 const StyledTabsHeaderWrapper = styled.div`
-  ${_ref => {
-  let {
-    position,
-    isInSidebar
-  } = _ref;
-  return position === "left" && css`
+  ${({
+  position,
+  isInSidebar
+}) => position === "left" && css`
       overflow-y: auto;
       box-sizing: border-box;
       padding: 3px;
@@ -26,8 +24,7 @@ const StyledTabsHeaderWrapper = styled.div`
         margin: auto;
         padding: 0px;
       `}
-    `;
-}}
+    `}
 `;
 const commonShadowStyles = css`
   pointer-events: none;
@@ -35,46 +32,35 @@ const commonShadowStyles = css`
   background-repeat: no-repeat;
   background-size: 16px 48px;
   background-attachment: scroll;
-  z-index: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.zIndex.overlay;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.overlay};
   position: sticky;
   min-width: 16px;
   transition: opacity 0.1s ease-in-out;
 `;
 const StyledTabsHeaderList = styled.div`
   display: flex;
-  ${_ref3 => {
-  let {
-    extendedLine = true
-  } = _ref3;
-  return !extendedLine && css`
+  ${({
+  extendedLine = true
+}) => !extendedLine && css`
       width: fit-content;
-    `;
-}}
+    `}
   cursor: default;
   list-style: none;
   margin: -${outlineWidth};
   padding: ${outlineWidth};
   overflow-x: auto;
   position: relative;
-  ${_ref4 => {
-  let {
-    position
-  } = _ref4;
-  return position === "top" && "white-space: nowrap";
-}};
+  ${({
+  position
+}) => position === "top" && "white-space: nowrap"};
 
-  ${_ref5 => {
-  let {
-    isScrollable,
-    leftScrollOpacity,
-    rightScrollOpacity
-  } = _ref5;
-  return isScrollable && css`
+  ${({
+  isScrollable,
+  leftScrollOpacity,
+  rightScrollOpacity
+}) => isScrollable && css`
       &:before {
         ${commonShadowStyles}
         background: radial-gradient(
@@ -100,8 +86,7 @@ const StyledTabsHeaderList = styled.div`
         margin-left: -16px;
         opacity: ${rightScrollOpacity};
       }
-    `;
-}}
+    `}
 
   &::-webkit-scrollbar {
     -webkit-appearance: none;
@@ -115,23 +100,18 @@ const StyledTabsHeaderList = styled.div`
     cursor: pointer;
   }
 
-  ${_ref6 => {
-  let {
-    align = "left"
-  } = _ref6;
-  return align === "right" && css`
+  ${({
+  align = "left"
+}) => align === "right" && css`
       justify-content: flex-end;
       text-align: right;
-    `;
-}}
+    `}
 
-  ${_ref7 => {
-  let {
-    position = "top",
-    noRightBorder,
-    align = "left"
-  } = _ref7;
-  return position === "left" && css`
+  ${({
+  position = "top",
+  noRightBorder,
+  align = "left"
+}) => position === "left" && css`
       flex-direction: column;
       box-shadow: none;
 
@@ -142,8 +122,7 @@ const StyledTabsHeaderList = styled.div`
       ${align === "right" && css`
         justify-content: flex-start;
       `}
-    `;
-}}
+    `}
 `;
 StyledTabsHeaderList.defaultProps = {
   theme: BaseTheme

package/esm/components/tabs/tab/tab.component.js

@@ -4,27 +4,26 @@ import PropTypes from "prop-types";
 import StyledTab from "./tab.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 const TabContext = /*#__PURE__*/React.createContext({});
-export const Tab = _ref => {
-  let {
-    ariaLabelledby,
-    className,
-    children,
-    isTabSelected,
-    position = "top",
-    role = "tabpanel",
-    tabId,
-    updateErrors,
-    updateWarnings,
-    updateInfos,
-    href,
-    // title is destructured purely to NOT spread it as part of rest to the underlying HTML element.
-    // Both this and titleProps are used as part of child.props inside Tabs component
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    title,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    titleProps,
-    ...rest
-  } = _ref;
+export const Tab = ({
+  ariaLabelledby,
+  className,
+  children,
+  isTabSelected,
+  position = "top",
+  role = "tabpanel",
+  tabId,
+  updateErrors,
+  updateWarnings,
+  updateInfos,
+  href,
+  // title is destructured purely to NOT spread it as part of rest to the underlying HTML element.
+  // Both this and titleProps are used as part of child.props inside Tabs component
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  title,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  titleProps,
+  ...rest
+}) => {
   const [tabErrors, setTabErrors] = useState({});
   const [tabWarnings, setTabWarnings] = useState({});
   const [tabInfos, setTabInfos] = useState({});

package/esm/components/tabs/tab/tab.style.js

@@ -4,12 +4,10 @@ import BaseTheme from "../../../style/themes/base";
 const StyledTab = styled.div`
   display: none;
 
-  ${_ref => {
-  let {
-    isTabSelected,
-    position = "top"
-  } = _ref;
-  return isTabSelected && css`
+  ${({
+  isTabSelected,
+  position = "top"
+}) => isTabSelected && css`
       display: block;
 
       ${position === "left" && css`
@@ -17,8 +15,7 @@ const StyledTab = styled.div`
       `}
 
       ${padding}
-    `;
-}}
+    `}
 `;
 StyledTab.defaultProps = {
   theme: BaseTheme

package/esm/components/tabs/tabs.component.js

@@ -8,24 +8,23 @@ import StyledTabs from "./tabs.style";
 import TabsHeader from "./__internal__/tabs-header";
 import TabTitle from "./__internal__/tab-title";
 import { DrawerSidebarContext } from "../drawer";
-const Tabs = _ref => {
-  let {
-    align = "left",
-    className,
-    children,
-    onTabChange,
-    selectedTabId,
-    renderHiddenTabs = true,
-    position = "top",
-    extendedLine = true,
-    size,
-    borders = "off",
-    variant = "default",
-    validationStatusOverride,
-    headerWidth,
-    showValidationsSummary,
-    ...rest
-  } = _ref;
+const Tabs = ({
+  align = "left",
+  className,
+  children,
+  onTabChange,
+  selectedTabId,
+  renderHiddenTabs = true,
+  position = "top",
+  extendedLine = true,
+  size,
+  borders = "off",
+  variant = "default",
+  validationStatusOverride,
+  headerWidth,
+  showValidationsSummary,
+  ...rest
+}) => {
   if (position !== "left" && headerWidth !== undefined) {
     // eslint-disable-next-line no-console
     console.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");
@@ -173,8 +172,7 @@ const Tabs = _ref => {
       const tabHasError = errorOverride !== undefined ? errorOverride : !!errorsCount;
       const tabHasWarning = warningOverride !== undefined ? warningOverride : !!warningsCount && !tabHasError;
       const tabHasInfo = infoOverride !== undefined ? infoOverride : !!infosCount && !tabHasError && !tabHasWarning;
-      const getValidationMessage = function (message) {
-        let validations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const getValidationMessage = (message, validations = {}) => {
         const summaryOfMessages = Object.values(validations).filter(value => value && typeof value === "string");
         if (!showValidationsSummary || !summaryOfMessages.length) {
           return message;

package/esm/components/tabs/tabs.style.js

@@ -4,13 +4,11 @@ import BaseTheme from "../../style/themes/base";
 import { StyledTabsHeaderWrapper } from "./__internal__/tabs-header/tabs-header.style";
 import StyledTab from "./tab/tab.style";
 const StyledTabs = styled.div`
-  ${_ref => {
-  let {
-    position,
-    isInSidebar,
-    headerWidth
-  } = _ref;
-  return css`
+  ${({
+  position,
+  isInSidebar,
+  headerWidth
+}) => css`
     color: var(--colorsActionMinorYin090);
 
     ${position === "left" && css`
@@ -30,8 +28,7 @@ const StyledTabs = styled.div`
 
       width: 100%;
     `}
-  `;
-}}
+  `}
 
   ${margin}
 `;

package/esm/components/text-editor/__internal__/decorators/link-decorator.js

@@ -17,12 +17,7 @@ function findWithRegex(regex, contentBlock, callback) {
   });
 }
 const linkStrategy = (contentBlock, callback) => {
-  const combineRegex = function () {
-    for (var _len = arguments.length, regex = new Array(_len), _key = 0; _key < _len; _key++) {
-      regex[_key] = arguments[_key];
-    }
-    return new RegExp(regex.map(r => r.source).join(""), "g");
-  };
+  const combineRegex = (...regex) => new RegExp(regex.map(r => r.source).join(""), "g");
   const urlRegex = combineRegex(/\b/, /(http:\/\/|https:\/\/|www\.)/,
   // prefix
   /([\w-]+:([\w-]+@))?/,

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.component.js

@@ -2,24 +2,21 @@ import React from "react";
 import PropTypes from "prop-types";
 import { StyledCounterWrapper, StyledCounter } from "./editor-counter.style";
 import ValidationIcon from "../../../../__internal__/validations";
-const Counter = _ref => {
-  let {
-    count = 0,
-    limit = 3000,
-    error,
-    warning,
-    info
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledCounterWrapper, {
-    "data-component": "text-editor-counter"
-  }, !!(error || warning || info) && /*#__PURE__*/React.createElement(ValidationIcon, {
-    error: error,
-    warning: warning,
-    info: info,
-    tooltipPosition: "top",
-    tabIndex: 0
-  }), /*#__PURE__*/React.createElement(StyledCounter, {
-    hasError: !!error
-  }, `${limit - count}`));
-};
+const Counter = ({
+  count = 0,
+  limit = 3000,
+  error,
+  warning,
+  info
+}) => /*#__PURE__*/React.createElement(StyledCounterWrapper, {
+  "data-component": "text-editor-counter"
+}, !!(error || warning || info) && /*#__PURE__*/React.createElement(ValidationIcon, {
+  error: error,
+  warning: warning,
+  info: info,
+  tooltipPosition: "top",
+  tabIndex: 0
+}), /*#__PURE__*/React.createElement(StyledCounter, {
+  hasError: !!error
+}, `${limit - count}`));
 export default Counter;

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.style.js

@@ -1,11 +1,8 @@
 import styled from "styled-components";
 const StyledCounter = styled.span`
-  color: ${_ref => {
-  let {
-    hasError
-  } = _ref;
-  return hasError ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)";
-}};
+  color: ${({
+  hasError
+}) => hasError ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
   width: 100%;
 `;
 const StyledCounterWrapper = styled.div`

package/esm/components/text-editor/__internal__/editor-link/editor-link.component.js

@@ -3,13 +3,12 @@ import React, { useContext, useEffect } from "react";
 import PropTypes from "prop-types";
 import StyledLink from "./editor-link.style";
 import { EditorContext } from "../../text-editor.component";
-const EditorLink = _ref => {
-  let {
-    children,
-    contentState,
-    entityKey,
-    ...rest
-  } = _ref;
+const EditorLink = ({
+  children,
+  contentState,
+  entityKey,
+  ...rest
+}) => {
   const url = !!contentState && !!entityKey ? contentState.getEntity(entityKey).getData() : children[0].props.text;
   const buildValidUrl = () => {
     const candidateUrl = url.url || url;

package/esm/components/text-editor/__internal__/label-wrapper/label-wrapper.component.js

@@ -7,11 +7,10 @@ import React from "react";
  * This wrapper allows us to trigger focus on TextEditor
  */
 import PropTypes from "prop-types";
-const LabelWrapper = _ref => {
-  let {
-    onClick,
-    children
-  } = _ref;
+const LabelWrapper = ({
+  onClick,
+  children
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     onClick: onClick
   }, " ", children, " ");

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.js

@@ -2,19 +2,18 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import StyledToolbarButton from "./toolbar-button.style";
-const ToolbarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    onKeyDown,
-    onMouseDown,
-    activated,
-    ariaLabel,
-    tabbable,
-    children,
-    onMouseOver,
-    onMouseLeave,
-    onFocus,
-    onBlur
-  } = _ref;
+const ToolbarButton = /*#__PURE__*/React.forwardRef(({
+  onKeyDown,
+  onMouseDown,
+  activated,
+  ariaLabel,
+  tabbable,
+  children,
+  onMouseOver,
+  onMouseLeave,
+  onFocus,
+  onBlur
+}, ref) => {
   return /*#__PURE__*/React.createElement(StyledToolbarButton, _extends({
     "data-component": "text-editor-toolbar-button",
     ref: ref,