carbon-react 118.5.0 → 118.5.2

package/esm/components/anchor-navigation/anchor-navigation.component.js

@@ -9,11 +9,11 @@ import { StyledAnchorNavigation, StyledNavigation, StyledContent } from "./ancho
 import AnchorNavigationItem from "./anchor-navigation-item/anchor-navigation-item.component";
 const SECTION_VISIBILITY_OFFSET = 200;
 const SCROLL_THROTTLE = 100;
-
-const AnchorNavigation = ({
-  children,
-  stickyNavigation
-}) => {
+const AnchorNavigation = _ref => {
+  let {
+    children,
+    stickyNavigation
+  } = _ref;
   !isFragment(stickyNavigation) ? process.env.NODE_ENV !== "production" ? invariant(false, "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.") : invariant(false) : void 0;
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(stickyNavigation.props.children).find(child => {
@@ -32,9 +32,12 @@ const AnchorNavigation = ({
     // istanbul ignore if
     // function is called only after component is rendered, so ref cannot hold a null value
     if (navigationRef.current === null) return;
-    const offsetsWithIndexes = sectionRefs.current.map(({
-      current
-    }, index) => [index, current === null || current === void 0 ? void 0 : current.getBoundingClientRect().top]).filter(offsetWithIndex => offsetWithIndex[1] !== undefined);
+    const offsetsWithIndexes = sectionRefs.current.map((_ref2, index) => {
+      let {
+        current
+      } = _ref2;
+      return [index, current?.getBoundingClientRect().top];
+    }).filter(offsetWithIndex => offsetWithIndex[1] !== undefined);
     const {
       top: navTopOffset
     } = navigationRef.current.getBoundingClientRect();
@@ -52,10 +55,7 @@ const AnchorNavigation = ({
       if (isUserScrollTimer.current !== undefined) {
         window.clearTimeout(isUserScrollTimer.current);
       }
-
-      isUserScrollTimer.current = setTimeout(
-      /* istanbul ignore next */
-      () => {
+      isUserScrollTimer.current = setTimeout( /* istanbul ignore next */() => {
         isUserScroll.current = true;
       }, SCROLL_THROTTLE + 50);
     }
@@ -64,32 +64,31 @@ const AnchorNavigation = ({
     window.addEventListener("scroll", scrollHandler, true);
     return () => window.removeEventListener("scroll", scrollHandler, true);
   }, [scrollHandler]);
-
   const focusSection = section => {
     if (!section.matches(defaultFocusableSelectors)) {
       section.setAttribute("tabindex", "-1");
     }
-
     section.focus({
       preventScroll: true
     });
   };
-
   const scrollToSection = index => {
-    const sectionToScroll = sectionRefs.current[index].current; // istanbul ignore if
+    const sectionToScroll = sectionRefs.current[index].current;
+
+    // istanbul ignore if
     // function is called only after component is rendered, so ref cannot hold a null value
+    if (sectionToScroll === null) return;
 
-    if (sectionToScroll === null) return; // ensure section has the appropriate element to remove the default focus styles.
+    // ensure section has the appropriate element to remove the default focus styles.
     // Can ignore else branch because there's no harm in setting this to "true" twice (it can't hold any other value),
     // but it's probably more efficient not to.
     // istanbul ignore else
-
     if (!sectionToScroll.dataset.carbonAnchornavRef) {
       sectionToScroll.dataset.carbonAnchornavRef = "true";
     }
+    focusSection(sectionToScroll);
 
-    focusSection(sectionToScroll); // workaround due to preventScroll focus method option on firefox not working consistently
-
+    // workaround due to preventScroll focus method option on firefox not working consistently
     window.setTimeout(() => {
       isUserScroll.current = false;
       sectionToScroll.scrollIntoView({
@@ -100,18 +99,15 @@ const AnchorNavigation = ({
       setSelectedIndex(index);
     }, 10);
   };
-
   const handleClick = (event, index) => {
     event.preventDefault();
     scrollToSection(index);
   };
-
   const handleKeyDown = (event, index) => {
     if (Event.isEnterKey(event)) {
       scrollToSection(index);
     }
   };
-
   return /*#__PURE__*/React.createElement(StyledAnchorNavigation, {
     ref: contentRef,
     "data-component": "anchor-navigation"
@@ -126,7 +122,6 @@ const AnchorNavigation = ({
     onKeyDown: event => handleKeyDown(event, index)
   }))), /*#__PURE__*/React.createElement(StyledContent, null, children));
 };
-
 AnchorNavigation.propTypes = {
   "children": PropTypes.node,
   "stickyNavigation": PropTypes.node

package/esm/components/badge/badge.component.d.ts

@@ -9,5 +9,5 @@ export interface BadgeProps {
     /** Callback fired when badge is clicked */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const Badge: ({ "aria-label": ariaLabel, children, counter, onClick, }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ "aria-label": ariaLabel, children, counter, onClick, }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/esm/components/badge/badge.component.js

@@ -1,18 +1,16 @@
-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 from "react";
 import PropTypes from "prop-types";
 import { StyledBadgeWrapper, StyledCrossIcon, StyledCounter, StyledBadge } from "./badge.style";
-
-const Badge = ({
-  "aria-label": ariaLabel,
-  children,
-  counter = 0,
-  onClick
-}) => {
+export const Badge = _ref => {
+  let {
+    "aria-label": ariaLabel,
+    children,
+    counter = 0,
+    onClick
+  } = _ref;
   const shouldDisplayCounter = counter > 0;
   const counterToDisplay = counter > 99 ? 99 : counter;
-
   const renderCorrectBadge = () => {
     const props = onClick ? {
       buttonType: "secondary",
@@ -20,7 +18,6 @@ const Badge = ({
     } : {
       "aria-label": ariaLabel
     };
-
     if (shouldDisplayCounter) {
       return /*#__PURE__*/React.createElement(StyledBadge, _extends({
         "data-component": "badge"
@@ -31,18 +28,8 @@ const Badge = ({
         "data-element": "badge-counter"
       }, counterToDisplay));
     }
-
     return null;
   };
-
   return /*#__PURE__*/React.createElement(StyledBadgeWrapper, null, renderCorrectBadge(), children);
 };
-
-Badge.propTypes = {
-  "aria-label": PropTypes.string,
-  "children": PropTypes.node,
-  "counter": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  "onClick": PropTypes.func
-};
-export { Badge };
 export default Badge;

package/esm/components/badge/badge.style.js

@@ -21,11 +21,14 @@ const StyledCounter = styled.div`
   font-size: 12px;
   margin-top: -1px;
 `;
-const StyledBadge = styled.span.attrs(({
-  onClick
-}) => ({
-  as: onClick ? Button : undefined
-}))`
+const StyledBadge = styled.span.attrs(_ref => {
+  let {
+    onClick
+  } = _ref;
+  return {
+    as: onClick ? Button : undefined
+  };
+})`
   ${commonStyles}
   cursor: default;
   align-items: center;
@@ -41,9 +44,11 @@ const StyledBadge = styled.span.attrs(({
     border: none;
   }
 
-  ${({
-  onClick
-}) => css`
+  ${_ref2 => {
+  let {
+    onClick
+  } = _ref2;
+  return css`
     ${onClick && `
       ${commonStyles}
       width: 22px;
@@ -75,7 +80,8 @@ const StyledBadge = styled.span.attrs(({
         }
       }
     `}
-  `}
+  `;
+}}
 `;
 const StyledCrossIcon = styled(Icon)`
   margin: 0;

package/esm/components/batch-selection/batch-selection.component.d.ts

@@ -11,5 +11,5 @@ export interface BatchSelectionProps {
     /** Number of selected elements */
     selectedCount: number;
 }
-export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, }: BatchSelectionProps) => JSX.Element;
+export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, }: BatchSelectionProps) => React.JSX.Element;
 export default BatchSelection;

package/esm/components/batch-selection/batch-selection.component.js

@@ -2,14 +2,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { StyledBatchSelection, StyledSelectionCount } from "./batch-selection.style";
-
-const BatchSelection = ({
-  disabled,
-  children,
-  colorTheme = "transparent",
-  selectedCount,
-  hidden
-}) => {
+export const BatchSelection = _ref => {
+  let {
+    disabled,
+    children,
+    colorTheme = "transparent",
+    selectedCount,
+    hidden
+  } = _ref;
   const l = useLocale();
   return /*#__PURE__*/React.createElement(StyledBatchSelection, {
     colorTheme: colorTheme,
@@ -20,13 +20,4 @@ const BatchSelection = ({
     "data-element": "selection-count"
   }, l.batchSelection.selected(selectedCount)), children);
 };
-
-BatchSelection.propTypes = {
-  "children": PropTypes.node,
-  "colorTheme": PropTypes.oneOf(["dark", "light", "transparent", "white"]),
-  "disabled": PropTypes.bool,
-  "hidden": PropTypes.bool,
-  "selectedCount": PropTypes.number.isRequired
-};
-export { BatchSelection };
 export default BatchSelection;

package/esm/components/batch-selection/batch-selection.style.js

@@ -2,11 +2,13 @@ import styled, { css } from "styled-components";
 import StyledIconButton from "../icon-button/icon-button.style";
 import StyledIcon from "../icon/icon.style";
 const StyledBatchSelection = styled.div`
-  ${({
-  disabled,
-  colorTheme,
-  hidden
-}) => css`
+  ${_ref => {
+  let {
+    disabled,
+    colorTheme,
+    hidden
+  } = _ref;
+  return css`
     align-items: center;
     display: inline-flex;
     border-radius: var(--borderRadius100);
@@ -68,7 +70,8 @@ const StyledBatchSelection = styled.div`
         }
       }
     `}
-  `}
+  `;
+}}
 `;
 const StyledSelectionCount = styled.span`
   display: inline-block;

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

@@ -6,7 +6,6 @@ import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 let isDeprecationWarningTriggered = false;
-
 const calculatePosition = props => {
   const {
     position,
@@ -18,14 +17,12 @@ const calculatePosition = props => {
     ...rest
   };
 };
-
 export const Box = styled.div`
   ${() => {
   if (!isDeprecationWarningTriggered) {
     isDeprecationWarningTriggered = true;
     Logger.deprecate("Previous props that could be spread to the `Box` component are being removed. Only props documented in the intefaces will be supported.");
   }
-
   return css``;
 }}
 
@@ -34,34 +31,45 @@ export const Box = styled.div`
   ${flexbox}
   ${calculatePosition}
 
-  ${({
-  theme,
-  borderRadius = "borderRadius000"
-}) => !theme.roundedCornersOptOut && css`
+  ${_ref => {
+  let {
+    theme,
+    borderRadius = "borderRadius000"
+  } = _ref;
+  return !theme.roundedCornersOptOut && css`
       border-radius: var(--${borderRadius});
-    `}
+    `;
+}}
 
-  ${({
-  color,
-  bg,
-  backgroundColor,
-  ...rest
-}) => styledColor({
-  color,
-  bg,
-  backgroundColor,
-  ...rest
-})}
+  ${_ref2 => {
+  let {
+    color,
+    bg,
+    backgroundColor,
+    ...rest
+  } = _ref2;
+  return styledColor({
+    color,
+    bg,
+    backgroundColor,
+    ...rest
+  });
+}}
 
-  ${({
-  overflowWrap
-}) => overflowWrap && css`
+  ${_ref3 => {
+  let {
+    overflowWrap
+  } = _ref3;
+  return overflowWrap && css`
       overflow-wrap: ${overflowWrap};
-    `}
+    `;
+}}
 
-  ${({
-  scrollVariant
-}) => scrollVariant && css`
+  ${_ref4 => {
+  let {
+    scrollVariant
+  } = _ref4;
+  return scrollVariant && css`
       scrollbar-color: ${boxConfig[scrollVariant].thumb}
         ${boxConfig[scrollVariant].track};
 
@@ -74,20 +82,26 @@ export const Box = styled.div`
       &::-webkit-scrollbar-thumb {
         background-color: ${boxConfig[scrollVariant].thumb};
       }
-    `}
+    `;
+}}
 
-  ${({
-  boxSizing
-}) => boxSizing && css`
+  ${_ref5 => {
+  let {
+    boxSizing
+  } = _ref5;
+  return boxSizing && css`
       box-sizing: ${boxSizing};
-    `}
+    `;
+}}
 
-    ${({
-  display,
-  gap,
-  columnGap,
-  rowGap
-}) => (display === "flex" || display === "inline-flex") && css`
+    ${_ref6 => {
+  let {
+    display,
+    gap,
+    columnGap,
+    rowGap
+  } = _ref6;
+  return (display === "flex" || display === "inline-flex") && css`
       ${gap !== undefined && css`
         gap: ${boxConfig.gap(gap)};
       `}
@@ -99,13 +113,17 @@ export const Box = styled.div`
       ${rowGap !== undefined && css`
         row-gap: ${boxConfig.gap(rowGap)};
       `}
-    `};
+    `;
+}};
 
-  ${({
-  boxShadow
-}) => boxShadow && css`
+  ${_ref7 => {
+  let {
+    boxShadow
+  } = _ref7;
+  return boxShadow && css`
       box-shadow: var(--${boxShadow});
-    `}
+    `;
+}}
 `;
 Box.defaultProps = {
   theme: BaseTheme

package/esm/components/box/box.config.js

@@ -12,7 +12,6 @@ export default {
     if (typeof gapValue === "number") {
       return space[gapValue];
     }
-
     return gapValue;
   }
 };

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -1,14 +1,14 @@
-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 from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import StyledBreadcrumbs from "./breadcrumbs.style";
 import useLocale from "../../hooks/__internal__/useLocale";
-const Breadcrumbs = /*#__PURE__*/React.forwardRef(({
-  children,
-  ...rest
-}, ref) => {
+const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref;
   const l = useLocale();
   return /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({
     ref: ref,

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -1,21 +1,23 @@
-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 from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import { StyledCrumb, Divider } from "./crumb.style";
-const Crumb = /*#__PURE__*/React.forwardRef(({
-  href,
-  isCurrent,
-  children,
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
-  ref: ref,
-  isCurrent: isCurrent,
-  "aria-current": isCurrent ? "page" : undefined
-}, tagComponent("crumb", rest), !isCurrent && {
-  href
-}), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, null)));
+const Crumb = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    href,
+    isCurrent,
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
+    ref: ref,
+    isCurrent: isCurrent,
+    "aria-current": isCurrent ? "page" : undefined
+  }, tagComponent("crumb", rest), !isCurrent && {
+    href
+  }), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, null));
+});
 Crumb.propTypes = {
   "aria-activedescendant": PropTypes.string,
   "aria-atomic": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),

package/esm/components/breadcrumbs/crumb/crumb.style.js

@@ -2,9 +2,11 @@ import styled, { css } from "styled-components";
 import Link from "../../link";
 export const StyledCrumb = styled(Link)`
   font: var(--typographyLinkTextM);
-  ${({
-  isCurrent
-}) => isCurrent && css`
+  ${_ref => {
+  let {
+    isCurrent
+  } = _ref;
+  return isCurrent && css`
       a {
         color: var(--colorsUtilityYin090);
         text-decoration: none;
@@ -16,7 +18,8 @@ export const StyledCrumb = styled(Link)`
           cursor: text;
         }
       }
-    `}
+    `;
+}}
 `;
 export const Divider = styled.span.attrs({
   children: "/",

package/esm/components/button/button-types.style.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (isDisabled?: boolean | undefined, destructive?: boolean | undefined) => {
+declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
     primary: string;
     secondary: string;
     tertiary: string;

package/esm/components/button/button-types.style.js

@@ -1,6 +1,5 @@
 import StyledIcon from "../icon/icon.style";
 import StyledLoaderSquare from "../loader/loader-square.style";
-
 function makeColors(color) {
   return `
   color: ${color};
@@ -12,7 +11,6 @@ function makeColors(color) {
   }
   `;
 }
-
 export default ((isDisabled, destructive) => ({
   primary: `
     background: var(--colorsActionMajor500);