carbon-react 119.9.3 → 119.10.1

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

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

package/esm/components/vertical-divider/vertical-divider.component.js

@@ -3,14 +3,13 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { MenuContext } from "../menu/menu.component";
 import { StyledVerticalWrapper, StyledDivider } from "./vertical-divider.style";
-const VerticalDivider = _ref => {
-  let {
-    h,
-    height,
-    displayInline = false,
-    tint = 80,
-    ...props
-  } = _ref;
+const VerticalDivider = ({
+  h,
+  height,
+  displayInline = false,
+  tint = 80,
+  ...props
+}) => {
   const {
     inMenu
   } = useContext(MenuContext);

package/esm/components/vertical-divider/vertical-divider.style.js

@@ -3,30 +3,21 @@ import { space } from "styled-system";
 import { baseTheme } from "../../style/themes";
 const StyledVerticalWrapper = styled.div`
   ${space}
-  ${_ref => {
-  let {
-    height
-  } = _ref;
-  return height && css`
+  ${({
+  height
+}) => height && css`
       height: ${typeof height === "string" ? `${height}` : `${height}px`};
-    `;
-}}
-  ${_ref2 => {
-  let {
-    displayInline
-  } = _ref2;
-  return displayInline ? "display: inline;" : "";
-}}
+    `}
+  ${({
+  displayInline
+}) => displayInline ? "display: inline;" : ""}
 `;
 const StyledDivider = styled.div`
   height: 100%;
-  border-left: 1px solid ${_ref3 => {
-  let {
-    theme,
-    tint
-  } = _ref3;
-  return theme.palette.slateTint(tint);
-}};
+  border-left: 1px solid ${({
+  theme,
+  tint
+}) => theme.palette.slateTint(tint)};
   display: inherit;
 `;
 StyledVerticalWrapper.defaultProps = {

package/esm/components/vertical-menu/vertical-menu-full-screen.component.js

@@ -11,15 +11,14 @@ import Box from "../box";
 import { StyledList, StyledVerticalMenuFullScreen } from "./vertical-menu.style";
 import VerticalMenuFullScreenContext from "./vertical-menu-full-screen.context";
 import Events from "../../__internal__/utils/helpers/events/events";
-export const VerticalMenuFullScreen = _ref => {
-  let {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    children,
-    isOpen,
-    onClose,
-    ...rest
-  } = _ref;
+export const VerticalMenuFullScreen = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  children,
+  isOpen,
+  onClose,
+  ...rest
+}) => {
   const l = useLocale();
   const menuWrapperRef = useRef(null);
   const handleKeyDown = useCallback(ev => {

package/esm/components/vertical-menu/vertical-menu-item.component.js

@@ -8,19 +8,18 @@ import { StyledVerticalMenuItem, StyledTitle, StyledAdornment, StyledList, Style
 const MenuItemContext = /*#__PURE__*/React.createContext({
   level: 0
 });
-export const VerticalMenuItem = _ref => {
-  let {
-    defaultOpen = false,
-    title,
-    iconType,
-    adornment,
-    children,
-    component,
-    active,
-    height = "56px",
-    href,
-    ...rest
-  } = _ref;
+export const VerticalMenuItem = ({
+  defaultOpen = false,
+  title,
+  iconType,
+  adornment,
+  children,
+  component,
+  active,
+  height = "56px",
+  href,
+  ...rest
+}) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const handleOnClick = () => {
     setIsOpen(state => !state);

package/esm/components/vertical-menu/vertical-menu-trigger.component.js

@@ -4,14 +4,13 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import { StyledVerticalMenuItem, StyledTitle } from "./vertical-menu.style";
-export const VerticalMenuTrigger = _ref => {
-  let {
-    height = "40px",
-    p = 2,
-    onClick,
-    children,
-    ...rest
-  } = _ref;
+export const VerticalMenuTrigger = ({
+  height = "40px",
+  p = 2,
+  onClick,
+  children,
+  ...rest
+}) => {
   const paddingProps = filterStyledSystemPaddingProps(rest);
   return /*#__PURE__*/React.createElement(StyledVerticalMenuItem, _extends({
     onClick: onClick,

package/esm/components/vertical-menu/vertical-menu.component.js

@@ -3,15 +3,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { StyledVerticalMenu, StyledList } from "./vertical-menu.style";
-export const VerticalMenu = _ref => {
-  let {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    width = "322px",
-    children,
-    height = "100%",
-    ...rest
-  } = _ref;
+export const VerticalMenu = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  width = "322px",
+  children,
+  height = "100%",
+  ...rest
+}) => {
   return /*#__PURE__*/React.createElement(StyledVerticalMenu, _extends({
     boxSizing: "border-box",
     scrollVariant: "light",

package/esm/components/vertical-menu/vertical-menu.style.js

@@ -9,12 +9,9 @@ export const StyledList = styled.ul`
   padding: 0;
 `;
 export const StyledVerticalMenuItem = styled.div`
-  min-height: ${_ref => {
-  let {
-    height
-  } = _ref;
-  return height;
-}};
+  min-height: ${({
+  height
+}) => height};
   width: 100%;
   display: flex;
   border: none;
@@ -39,11 +36,9 @@ export const StyledVerticalMenuItem = styled.div`
     outline-offset: -3px;
   }
 
-  ${_ref2 => {
-  let {
-    active
-  } = _ref2;
-  return active && css`
+  ${({
+  active
+}) => active && css`
       &:before {
         background: var(--colorsComponentsLeftnavWinterStandardSelected);
         border-radius: var(--borderRadius100);
@@ -61,8 +56,7 @@ export const StyledVerticalMenuItem = styled.div`
           background: var(--colorsComponentsLeftnavWinterStandardHover);
         }
       }
-    `;
-}}
+    `}
 
   ${StyledIcon} {
     width: 20px;
@@ -117,12 +111,9 @@ export const StyledVerticalMenuFullScreen = styled(Box)`
   background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
   box-sizing: border-box;
   transition: all 0.3s ease;
-  z-index: ${_ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.zIndex.fullScreenModal;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.fullScreenModal};
 
   // TODO remove hardcoded values when DS have had chance to review which token to use
   &::-webkit-scrollbar-track {

package/esm/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -2,10 +2,7 @@ import React, { useMemo, useRef } from "react";
 import CharacterCount from "../../../__internal__/character-count";
 import useLocale from "../useLocale";
 import guid from "../../../__internal__/utils/helpers/guid";
-const useCharacterCount = function () {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  let characterLimit = arguments.length > 1 ? arguments[1] : undefined;
-  let enforceCharacterLimit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+const useCharacterCount = (value = "", characterLimit, enforceCharacterLimit = true) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const l = useLocale();
   const hintString = l.characterCount.hintString();

package/esm/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -1,8 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import Events from "../../../__internal__/utils/helpers/events";
 import useMenuKeyboardNavigation from "../useMenuKeyboardNavigation";
-const useChildButtons = function (toggleButtonRef) {
-  let widthRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
   const buttonNode = useRef(null);

package/esm/hooks/__internal__/useClickAwayListener/useClickAwayListener.js

@@ -4,8 +4,7 @@ import { useEffect, useRef, useCallback } from "react";
 // event.stopPropagation() which could have unexpected and frustrating consequences for consumers.
 // Simple approach taken from https://github.com/facebook/react/issues/10962#issuecomment-444622208
 
-export default (function (handleClickAway) {
-  let eventTypeId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "click";
+export default ((handleClickAway, eventTypeId = "click") => {
   const clickIsInside = useRef(false);
   const onDocumentClick = useCallback(ev => {
     if (clickIsInside.current) {

package/esm/hooks/__internal__/useFloating/useFloating.js

@@ -1,15 +1,14 @@
 import { useRef, useLayoutEffect } from "react";
 import { computePosition, autoUpdate } from "@floating-ui/dom";
-const useFloating = _ref => {
-  let {
-    isOpen,
-    reference,
-    floating,
-    strategy = "absolute",
-    placement,
-    middleware,
-    animationFrame
-  } = _ref;
+const useFloating = ({
+  isOpen,
+  reference,
+  floating,
+  strategy = "absolute",
+  placement,
+  middleware,
+  animationFrame
+}) => {
   const originalValues = useRef(null);
   useLayoutEffect(() => {
     let cleanup;
@@ -40,12 +39,11 @@ const useFloating = _ref => {
           strategy,
           middleware,
           placement
-        }).then(_ref2 => {
-          let {
-            x,
-            y,
-            placement: currentPlacement
-          } = _ref2;
+        }).then(({
+          x,
+          y,
+          placement: currentPlacement
+        }) => {
           Object.assign(floatingElement.style, {
             left: `${x}px`,
             top: `${y}px`,

package/esm/hooks/__internal__/useInputAccessibility/useInputAccessibility.js

@@ -1,13 +1,12 @@
-export default function useInputAccessibility(_ref) {
-  let {
-    id,
-    validationRedesignOptIn,
-    error,
-    warning,
-    info,
-    label,
-    fieldHelp
-  } = _ref;
+export default function useInputAccessibility({
+  id,
+  validationRedesignOptIn,
+  error,
+  warning,
+  info,
+  label,
+  fieldHelp
+}) {
   const labelId = label ? `${id}-label` : undefined;
   const validationId = [error, warning, info].filter(validation => validation && typeof validation === "string").length ? `${id}-validation` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;

package/esm/hooks/__internal__/useModalAria/useModalAria.js

@@ -23,12 +23,11 @@ export default function useModalAria(containerRef) {
     if (isTopModal) {
       hideNonTopModalElements(document.body);
     }
-    return () => originalValues.forEach(_ref => {
-      let {
-        element,
-        "aria-hidden": ariaHidden,
-        inert
-      } = _ref;
+    return () => originalValues.forEach(({
+      element,
+      "aria-hidden": ariaHidden,
+      inert
+    }) => {
       if (ariaHidden === null) {
         element.removeAttribute("aria-hidden");
       } else {

package/esm/hooks/__internal__/useModalManager/useModalManager.js

@@ -1,13 +1,12 @@
 import { useEffect, useRef, useCallback } from "react";
 import ModalManager from "../../../components/modal/__internal__/modal-manager";
-const useModalManager = _ref => {
-  let {
-    open,
-    closeModal,
-    modalRef,
-    setTriggerRefocusFlag,
-    triggerRefocusOnClose = true
-  } = _ref;
+const useModalManager = ({
+  open,
+  closeModal,
+  modalRef,
+  setTriggerRefocusFlag,
+  triggerRefocusOnClose = true
+}) => {
   const listenerAdded = useRef(false);
   const modalRegistered = useRef(false);
   const handleClose = useCallback(ev => {

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -43,11 +43,10 @@ const useScrollBlock = () => {
   } = useRef(guid());
   const originalValuesRef = useRef([]);
   const restoreValues = useCallback(() => {
-    getRules().forEach((_ref, index) => {
-      let {
-        element,
-        property
-      } = _ref;
+    getRules().forEach(({
+      element,
+      property
+    }, index) => {
       element.style[property] = originalValuesRef.current[index];
     });
   }, []);
@@ -58,24 +57,20 @@ const useScrollBlock = () => {
     if (isBlocked) {
       return;
     }
-    const originalValues = rules.map(_ref2 => {
-      let {
-        element,
-        property
-      } = _ref2;
-      return element.style[property];
-    });
+    const originalValues = rules.map(({
+      element,
+      property
+    }) => element.style[property]);
     originalValuesRef.current = originalValues;
     scrollBlockManager.saveRestoreValuesCallback(restoreValues);
     // TODO: saveOriginalValues can be removed
     scrollBlockManager.saveOriginalValues(originalValues);
     // TODO: slice san be removed
-    rules.slice(-3).forEach(_ref3 => {
-      let {
-        element,
-        property,
-        blockingValue
-      } = _ref3;
+    rules.slice(-3).forEach(({
+      element,
+      property,
+      blockingValue
+    }) => {
       element.style[property] = blockingValue;
     });
   }, [restoreValues, containerGuid]);
@@ -92,11 +87,10 @@ const useScrollBlock = () => {
 
     // TODO: all of the code below can be removed from this block
     const originalValues = scrollBlockManager.getOriginalValues();
-    getRules().forEach((_ref4, index) => {
-      let {
-        element,
-        property
-      } = _ref4;
+    getRules().forEach(({
+      element,
+      property
+    }, index) => {
       element.style[property] = originalValues[index];
     });
     scrollBlockManager.saveOriginalValues([]);

package/esm/hooks/__internal__/useStableCallback/useStableCallback.js

@@ -6,12 +6,7 @@ import { useRef, useCallback } from "react";
 export function useStableCallback(callback) {
   const ref = useRef(callback);
   ref.current = callback;
-  const stableCallback = useCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    return ref.current?.(...args);
-  }, []);
+  const stableCallback = useCallback((...args) => ref.current?.(...args), []);
   return callback ? stableCallback : undefined;
 }
 export default useStableCallback;

package/esm/locales/en-gb.js

@@ -84,8 +84,7 @@ const enGB = {
   },
   pager: {
     show: () => "Show",
-    records: function (count) {
-      let showNumber = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    records: (count, showNumber = true) => {
       const noun = isSingular(count) ? "item" : "items";
       return showNumber ? `${count} ${noun}` : noun;
     },

package/esm/locales/pl-pl.js

@@ -119,8 +119,7 @@ const plPL = {
   },
   pager: {
     show: () => "Pokaż",
-    records: function (count) {
-      let showNumber = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    records: (count, showNumber = true) => {
       const noun = isSingular(count) ? "rzecz" : "rzeczy";
       return showNumber ? `${count} ${noun}` : noun;
     },

package/esm/playwright/components/badge/index.d.ts

@@ -0,0 +1,5 @@
+import type { Page } from "@playwright/test";
+declare const badge: (page: Page) => import("playwright-core").Locator;
+declare const badgeCounter: (page: Page) => import("playwright-core").Locator;
+declare const badgeCrossIcon: (page: Page) => import("playwright-core").Locator;
+export { badge, badgeCounter, badgeCrossIcon };

package/esm/playwright/components/badge/locators.d.ts

@@ -0,0 +1,3 @@
+export declare const BADGE = "[data-component=\"badge\"]";
+export declare const BADGE_COUNTER = "[data-element=\"badge-counter\"]";
+export declare const BADGE_CROSS_ICON = "[data-element=\"badge-cross-icon\"]";

package/esm/playwright/components/breadcrumbs/index.d.ts

@@ -0,0 +1,5 @@
+import type { Page } from "@playwright/test";
+declare const breadcrumbsComponent: (page: Page) => import("playwright-core").Locator;
+declare const allCrumbs: (page: Page) => import("playwright-core").Locator;
+declare const crumbAtIndex: (page: Page, index: number) => import("playwright-core").Locator;
+export { breadcrumbsComponent, allCrumbs, crumbAtIndex };

package/esm/playwright/components/breadcrumbs/locators.d.ts

@@ -0,0 +1,2 @@
+declare const BREADCRUMBS = "[data-component=\"breadcrumbs\"]";
+export default BREADCRUMBS;

package/esm/playwright/components/button/index.d.ts

@@ -0,0 +1,5 @@
+import type { Page } from "@playwright/test";
+declare const buttonDataComponent: (page: Page) => import("playwright-core").Locator;
+declare const buttonSubtextPreview: (page: Page) => import("playwright-core").Locator;
+declare const buttonMinorComponent: (page: Page, index?: number) => import("playwright-core").Locator;
+export { buttonDataComponent, buttonSubtextPreview, buttonMinorComponent };

package/esm/playwright/components/button/locators.d.ts

@@ -0,0 +1,3 @@
+export declare const BUTTON_SUBTEXT_PREVIEW = "[data-element=\"subtext\"]";
+export declare const BUTTON_DATA_COMPONENT_PREVIEW = "[data-component=\"button\"]";
+export declare const BUTTON_MINOR_COMPONENT = "[data-component=\"button-minor\"]";

package/esm/playwright/components/index.d.ts

@@ -0,0 +1,3 @@
+import type { Page } from "@playwright/test";
+declare const icon: (page: Page) => import("playwright-core").Locator;
+export default icon;

package/esm/playwright/components/loader/index.d.ts

@@ -0,0 +1,4 @@
+import type { Page } from "@playwright/test";
+declare const loader: (page: Page, index: number) => import("playwright-core").Locator;
+declare const loaderInsideButton: (page: Page) => import("playwright-core").Locator;
+export { loader, loaderInsideButton };

package/esm/playwright/components/loader/locators.d.ts

@@ -0,0 +1,2 @@
+declare const LOADER = "[data-component=\"loader\"]";
+export default LOADER;

package/esm/playwright/components/locators.d.ts

@@ -0,0 +1,21 @@
+export declare const CLOSE_ICON_BUTTON = "button[data-element=\"close\"]";
+export declare const HELP_ICON_PREVIEW = "[data-component=\"help\"]";
+export declare const TOOLTIP_PREVIEW = "[data-component=\"tooltip\"]";
+export declare const FIELD_HELP_PREVIEW = "span[data-element=\"help\"]";
+export declare const DLS_ROOT = "#root";
+export declare const BODY = "body";
+export declare const BACKGROUND_UI_LOCATOR = "div[data-element=\"modal-background\"]";
+export declare const LINK = "[data-component=\"link\"]";
+export declare const ICON = "[data-component=\"icon\"]";
+export declare const ERROR_ICON = "[data-element=\"error\"]";
+export declare const WARNING_ICON = "[data-component=\"icon\"][data-element=\"warning\"]";
+export declare const INFO_ICON = "[data-component=\"icon\"][data-element=\"info\"]";
+export declare const COMMMON_DATA_ELEMENT_INPUT = "input[data-element=\"input\"]";
+export declare const LABEL = "[data-element=\"label\"]";
+export declare const COMMON_INPUT = ".common-input__";
+export declare const BUTTON = "button[type=\"button\"]";
+export declare const COMMON_INPUT_PREFIX = "[data-element=\"textbox-prefix\"]";
+export declare const COMMON_INPUT_CHARACTER_LIMIT = "div[data-element=\"character-limit\"]";
+export declare const PORTAL = ".carbon-portal";
+export declare const LEGEND = "legend";
+export declare const STICKY_FOOTER = "[data-component=\"sticky-footer\"]";