carbon-react 119.10.0 → 119.10.2

package/esm/components/note/__internal__/status-icon/status-icon.component.js

@@ -2,11 +2,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledStatusIconWrapper from "./status-icon.style";
 import Tooltip from "../../../tooltip";
-const StatusIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    tooltipMessage,
-    children
-  } = _ref;
+const StatusIcon = /*#__PURE__*/React.forwardRef(({
+  tooltipMessage,
+  children
+}, ref) => {
   return /*#__PURE__*/React.createElement(Tooltip, {
     message: tooltipMessage
   }, /*#__PURE__*/React.createElement(StyledStatusIconWrapper, {

package/esm/components/note/note.component.js

@@ -12,19 +12,18 @@ import LinkPreview from "../link-preview";
 function hasExpectedDisplayName(child, displayName) {
   return child.type.displayName === displayName;
 }
-export const Note = _ref => {
-  let {
-    createdDate,
-    inlineControl,
-    name,
-    noteContent,
-    onLinkAdded,
-    previews,
-    status,
-    title,
-    width = 100,
-    ...rest
-  } = _ref;
+export const Note = ({
+  createdDate,
+  inlineControl,
+  name,
+  noteContent,
+  onLinkAdded,
+  previews,
+  status,
+  title,
+  width = 100,
+  ...rest
+}) => {
   !(width > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> width must be greater than 0") : invariant(false) : void 0;
   !createdDate ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> createdDate is required") : invariant(false) : void 0;
   !noteContent ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> noteContent is required") : invariant(false) : void 0;

package/esm/components/note/note.style.js

@@ -6,11 +6,9 @@ const StyledNoteContent = styled.div`
   position: relative;
   width: 100%;
 
-  ${_ref => {
-  let {
-    hasPreview
-  } = _ref;
-  return css`
+  ${({
+  hasPreview
+}) => css`
     &:not(:last-of-type) {
       padding-bottom: 24px;
     }
@@ -35,15 +33,11 @@ const StyledNoteContent = styled.div`
     ${hasPreview && `
       margin-top: var(--spacing200);
     `}
-  `;
-}}
-
-  ${_ref2 => {
-  let {
-    hasInlineControl
-  } = _ref2;
-  return hasInlineControl && "margin-right: 24px;";
-}}
+  `}
+
+  ${({
+  hasInlineControl
+}) => hasInlineControl && "margin-right: 24px;"}
 `;
 const StyledInlineControl = styled.div`
   position: absolute;
@@ -57,23 +51,18 @@ const StyledTitle = styled.header`
   line-height: 21px;
   padding-bottom: 16px;
 
-  ${_ref3 => {
-  let {
-    hasInlineControl
-  } = _ref3;
-  return hasInlineControl && "margin-right: 24px;";
-}}
+  ${({
+  hasInlineControl
+}) => hasInlineControl && "margin-right: 24px;"}
 `;
 const StyledFooterContent = styled.div`
   line-height: 21px;
   align-items: baseline;
   font-weight: bold;
 
-  ${_ref4 => {
-  let {
-    hasName
-  } = _ref4;
-  return css`
+  ${({
+  hasName
+}) => css`
     margin-top: var(--spacing200);
 
     ${hasName && css`
@@ -108,8 +97,7 @@ const StyledFooterContent = styled.div`
         margin-left: var(--spacing300);
       }
     `}
-  `;
-}}
+  `}
 `;
 const StyledFooter = styled.div`
   display: flex;
@@ -117,11 +105,9 @@ const StyledFooter = styled.div`
   flex-wrap: wrap;
 `;
 const StyledNote = styled.div`
-  ${_ref5 => {
-  let {
-    width
-  } = _ref5;
-  return css`
+  ${({
+  width
+}) => css`
     background-color: var(--colorsUtilityYang100);
     border: 1px solid var(--colorsUtilityMajor100);
     border-radius: var(--borderRadius100);
@@ -136,8 +122,7 @@ const StyledNote = styled.div`
       box-sizing: border-box;
       width: auto;
     }
-  `;
-}}
+  `}
 
   ${StyledLinkPreview} {
     margin: 0px;

package/esm/components/number/number.component.js

@@ -10,14 +10,13 @@ function isValidNumber(value) {
   const result = regex.test(value);
   return result;
 }
-const Number = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    onChange,
-    onKeyDown,
-    value,
-    inputRef,
-    ...rest
-  } = _ref;
+const Number = /*#__PURE__*/React.forwardRef(({
+  onChange,
+  onKeyDown,
+  value,
+  inputRef,
+  ...rest
+}, ref) => {
   const selectionStart = useRef(null);
   const selectionEnd = useRef(null);
   if (!deprecateInputRefWarnTriggered && inputRef) {

package/esm/components/numeral-date/numeral-date.component.js

@@ -28,43 +28,42 @@ const validations = {
   mm: isMonthValid,
   yyyy: isYearValid
 };
-export const NumeralDate = _ref => {
-  let {
-    dateFormat = ["dd", "mm", "yyyy"],
-    defaultValue,
-    disabled,
-    error = "",
-    warning = "",
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    info,
-    id,
-    name,
-    onBlur,
-    onChange,
-    value,
-    validationOnLabel = false,
-    label,
-    labelInline,
-    labelWidth,
-    labelAlign,
-    labelHelp,
-    labelSpacing,
-    fieldHelp,
-    adaptiveLabelBreakpoint,
-    required,
-    readOnly,
-    size,
-    enableInternalError,
-    enableInternalWarning,
-    tooltipPosition,
-    helpAriaLabel,
-    dayRef,
-    monthRef,
-    yearRef,
-    ...rest
-  } = _ref;
+export const NumeralDate = ({
+  dateFormat = ["dd", "mm", "yyyy"],
+  defaultValue,
+  disabled,
+  error = "",
+  warning = "",
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  info,
+  id,
+  name,
+  onBlur,
+  onChange,
+  value,
+  validationOnLabel = false,
+  label,
+  labelInline,
+  labelWidth,
+  labelAlign,
+  labelHelp,
+  labelSpacing,
+  fieldHelp,
+  adaptiveLabelBreakpoint,
+  required,
+  readOnly,
+  size,
+  enableInternalError,
+  enableInternalWarning,
+  tooltipPosition,
+  helpAriaLabel,
+  dayRef,
+  monthRef,
+  yearRef,
+  ...rest
+}) => {
   const l = useLocale();
   const {
     validationRedesignOptIn

package/esm/components/numeral-date/numeral-date.style.js

@@ -14,14 +14,13 @@ export const StyledNumeralDate = styled.div`
   }
 `;
 export const StyledDateField = styled.div`
-  ${_ref => {
-  let {
-    isStart,
-    isYearInput,
-    isEnd,
-    hasValidationIcon,
-    isMiddle
-  } = _ref;
+  ${({
+  isStart,
+  isYearInput,
+  isEnd,
+  hasValidationIcon,
+  isMiddle
+}) => {
   const yearInputOrError = isYearInput || isEnd && hasValidationIcon;
   return css`
       ${StyledInputPresentantion} {

package/esm/components/pager/__internal__/pager-navigation-link.component.js

@@ -2,16 +2,15 @@ import React, { useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import { StyledPagerLink } from "../pager.style";
 import useLocale from "../../../hooks/__internal__/useLocale";
-const PagerNavigationLink = _ref => {
-  let {
-    type,
-    currentPage,
-    pageCount,
-    hideDisabledElements,
-    pageSize,
-    onClick,
-    onPagination
-  } = _ref;
+const PagerNavigationLink = ({
+  type,
+  currentPage,
+  pageCount,
+  hideDisabledElements,
+  pageSize,
+  onClick,
+  onPagination
+}) => {
   const l = useLocale();
   const linkRef = useRef(null);
   const navLinkConfig = {

package/esm/components/pager/__internal__/pager-navigation.component.js

@@ -7,23 +7,22 @@ import Events from "../../../__internal__/utils/helpers/events";
 import createGuid from "../../../__internal__/utils/helpers/guid";
 import PagerNavigationLink from "./pager-navigation-link.component";
 import useLocale from "../../../hooks/__internal__/useLocale";
-const PagerNavigation = _ref => {
-  let {
-    pageSize,
-    currentPage,
-    setCurrentPage,
-    onNext,
-    onPrevious,
-    onFirst,
-    onLast,
-    onPagination,
-    pageCount,
-    showFirstAndLastButtons = true,
-    showPreviousAndNextButtons = true,
-    showPageCount = true,
-    interactivePageNumber = true,
-    hideDisabledElements = false
-  } = _ref;
+const PagerNavigation = ({
+  pageSize,
+  currentPage,
+  setCurrentPage,
+  onNext,
+  onPrevious,
+  onFirst,
+  onLast,
+  onPagination,
+  pageCount,
+  showFirstAndLastButtons = true,
+  showPreviousAndNextButtons = true,
+  showPageCount = true,
+  interactivePageNumber = true,
+  hideDisabledElements = false
+}) => {
   const l = useLocale();
   const guid = useRef(createGuid());
   const currentPageId = `Pager_${guid.current}`;

package/esm/components/pager/pager.component.js

@@ -7,41 +7,40 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSummary, StyledPagerSizeOptionsInner, StyledSelectContainer } from "./pager.style";
 import Events from "../../__internal__/utils/helpers/events";
-export const Pager = _ref => {
-  let {
-    currentPage = 1,
-    hideDisabledElements = false,
-    interactivePageNumber = true,
-    pageSizeSelectionOptions = [{
-      id: "10",
-      name: 10
-    }, {
-      id: "25",
-      name: 25
-    }, {
-      id: "50",
-      name: 50
-    }, {
-      id: "100",
-      name: 100
-    }],
-    pageSize = 10,
-    showPageSizeSelection = false,
-    totalRecords = 0,
-    onPagination,
-    onNext,
-    onFirst,
-    onPrevious,
-    onLast,
-    showPageSizeLabelBefore = true,
-    showPageSizeLabelAfter = true,
-    showTotalRecords = true,
-    showFirstAndLastButtons = true,
-    showPreviousAndNextButtons = true,
-    showPageCount = true,
-    variant = "default",
-    ...rest
-  } = _ref;
+export const Pager = ({
+  currentPage = 1,
+  hideDisabledElements = false,
+  interactivePageNumber = true,
+  pageSizeSelectionOptions = [{
+    id: "10",
+    name: 10
+  }, {
+    id: "25",
+    name: 25
+  }, {
+    id: "50",
+    name: 50
+  }, {
+    id: "100",
+    name: 100
+  }],
+  pageSize = 10,
+  showPageSizeSelection = false,
+  totalRecords = 0,
+  onPagination,
+  onNext,
+  onFirst,
+  onPrevious,
+  onLast,
+  showPageSizeLabelBefore = true,
+  showPageSizeLabelAfter = true,
+  showTotalRecords = true,
+  showFirstAndLastButtons = true,
+  showPreviousAndNextButtons = true,
+  showPageCount = true,
+  variant = "default",
+  ...rest
+}) => {
   const l = useLocale();
   const [page, setPage] = useState(+currentPage);
   const [currentPageSize, setCurrentPageSize] = useState(+pageSize);
@@ -101,14 +100,16 @@ export const Pager = _ref => {
   }, [onPagination]);
   const handleKeyDown = useCallback(e => Events.isEnterKey(e) && handleOnPagination(e.target.value), [handleOnPagination]);
   const sizeSelector = () => {
-    return /*#__PURE__*/React.createElement(StyledSelectContainer, null, /*#__PURE__*/React.createElement(Select, {
+    return /*#__PURE__*/React.createElement(StyledSelectContainer, null, /*#__PURE__*/React.createElement(Select, _extends({
       value: String(value),
       onChange: ev => setValue(+ev.target.value),
       onBlur: () => setValue(currentPageSize),
       onKeyDown: handleKeyDown,
       "data-element": "page-select",
       id: pageSizeSelectId
-    }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/React.createElement(Option, {
+    }, !showPageSizeLabelBefore && !showPageSizeLabelAfter ? {
+      ariaLabel: l.pager.show()
+    } : {}), pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/React.createElement(Option, {
       key: sizeOption.id,
       text: sizeOption.id,
       value: String(sizeOption.name),
@@ -116,9 +117,10 @@ export const Pager = _ref => {
     }))));
   };
   const renderPageSizeOptions = () => {
-    return showPageSizeSelection && /*#__PURE__*/React.createElement(StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && /*#__PURE__*/React.createElement("label", {
+    const wrapper = (isLabel, child) => isLabel ? /*#__PURE__*/React.createElement("label", {
       htmlFor: pageSizeSelectId
-    }, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && /*#__PURE__*/React.createElement("div", null, l.pager.records(currentPageSize, false)));
+    }, child) : /*#__PURE__*/React.createElement("div", null, child);
+    return showPageSizeSelection && /*#__PURE__*/React.createElement(StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && wrapper(showPageSizeLabelBefore, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && wrapper(!showPageSizeLabelBefore, l.pager.records(currentPageSize, false)));
   };
   const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
   return /*#__PURE__*/React.createElement(StyledPagerContainer, _extends({

package/esm/components/pager/pager.style.js

@@ -25,19 +25,16 @@ const StyledPagerContainer = styled.div`
   border-top: none;
   color: var(--colorsUtilityYin090);
 
-  ${_ref => {
-  let {
-    variant
-  } = _ref;
-  return css`
+  ${({
+  variant
+}) => css`
       border-width: 1px 1px 1px 1px;
       border-style: none solid solid solid;
       border-bottom-left-radius: var(--borderRadius100);
       border-bottom-right-radius: var(--borderRadius100);
       border-color: var(--colorsUtilityMajor100);
       background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
-    `;
-}}
+    `}
 `;
 const StyledPagerSizeOptions = styled.div`
   display: flex;
@@ -110,16 +107,13 @@ const StyledPagerLink = styled(Link)`
   margin-left: 7px;
   margin-right: 7px;
 
-  ${_ref2 => {
-  let {
-    hideDisabledButtons
-  } = _ref2;
-  return hideDisabledButtons && css`
+  ${({
+  hideDisabledButtons
+}) => hideDisabledButtons && css`
       & {
         visibility: hidden;
       }
-    `;
-}}
+    `}
 `;
 const StyledPagerNoSelect = styled.div`
   user-select: none;

package/esm/components/pages/page/page.component.js

@@ -7,13 +7,12 @@ import FullScreenHeading from "../../../__internal__/full-screen-heading";
 import Box from "../../box";
 import { StyledPage, StyledPageContent } from "./page.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
-const Page = _ref => {
-  let {
-    role,
-    title,
-    children,
-    ...rest
-  } = _ref;
+const Page = ({
+  role,
+  title,
+  children,
+  ...rest
+}) => {
   const styledPageNodeRef = useRef(null);
   const {
     transitionName

package/esm/components/pages/pages.component.js

@@ -7,14 +7,13 @@ import { PagesWrapperStyle, PagesContent } from "./pages.style";
 const NEXT = "next";
 const PREVIOUS = "previous";
 const TRANSITION_TIME = 500;
-const Pages = _ref => {
-  let {
-    pageIndex: incomingPageIndex,
-    initialpageIndex = 0,
-    transition = "slide",
-    children,
-    ...props
-  } = _ref;
+const Pages = ({
+  pageIndex: incomingPageIndex,
+  initialpageIndex = 0,
+  transition = "slide",
+  children,
+  ...props
+}) => {
   const [pageIndex, setPageIndex] = useState(Number(incomingPageIndex) || Number(initialpageIndex));
   const transitionDirection = useRef(NEXT);
   const transitionName = () => {

package/esm/components/password/password.component.js

@@ -6,13 +6,12 @@ import guid from "../../__internal__/utils/helpers/guid";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useLocale from "../../hooks/__internal__/useLocale";
 import ButtonMinor from "../button-minor/button-minor.component";
-export const Password = _ref => {
-  let {
-    id,
-    disabled,
-    forceObscurity = false,
-    ...rest
-  } = _ref;
+export const Password = ({
+  id,
+  disabled,
+  forceObscurity = false,
+  ...rest
+}) => {
   const internalInputId = useRef(id || guid());
   const l = useLocale();
   const [passwordShown, setPasswordShown] = useState(false);

package/esm/components/pill/pill.component.js

@@ -5,38 +5,35 @@ import StyledPill from "./pill.style";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import IconButton from "../icon-button";
-export const Pill = _ref => {
-  let {
-    wrapText,
-    borderColor,
-    colorVariant = "neutral",
-    children,
-    fill = false,
-    maxWidth,
-    onClick,
-    onDelete,
-    pillRole = "tag",
-    size = "M",
-    ariaLabelOfRemoveButton = "remove pill",
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledPill, _extends({
-    inFill: fill,
-    colorVariant: colorVariant,
-    isDeletable: !!onDelete,
-    pillRole: pillRole,
-    size: size,
-    borderColor: borderColor,
-    onClick: onClick
-  }, tagComponent("pill", rest), {
-    maxWidth: maxWidth,
-    wrapText: wrapText
-  }, rest), children, onDelete && /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onDelete,
-    "data-element": "close",
-    "aria-label": ariaLabelOfRemoveButton
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "cross"
-  })));
-};
+export const Pill = ({
+  wrapText,
+  borderColor,
+  colorVariant = "neutral",
+  children,
+  fill = false,
+  maxWidth,
+  onClick,
+  onDelete,
+  pillRole = "tag",
+  size = "M",
+  ariaLabelOfRemoveButton = "remove pill",
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledPill, _extends({
+  inFill: fill,
+  colorVariant: colorVariant,
+  isDeletable: !!onDelete,
+  pillRole: pillRole,
+  size: size,
+  borderColor: borderColor,
+  onClick: onClick
+}, tagComponent("pill", rest), {
+  maxWidth: maxWidth,
+  wrapText: wrapText
+}, rest), children, onDelete && /*#__PURE__*/React.createElement(IconButton, {
+  onClick: onDelete,
+  "data-element": "close",
+  "aria-label": ariaLabelOfRemoveButton
+}, /*#__PURE__*/React.createElement(Icon, {
+  type: "cross"
+})));
 export default Pill;

package/esm/components/pill/pill.style.js

@@ -17,18 +17,17 @@ function addStyleToPillIcon(fontSize) {
 }
 const StyledPill = styled.span`
   ${margin}
-  ${_ref => {
-  let {
-    wrapText,
-    borderColor,
-    colorVariant,
-    isDeletable,
-    inFill,
-    maxWidth,
-    pillRole,
-    size,
-    theme
-  } = _ref;
+  ${({
+  wrapText,
+  borderColor,
+  colorVariant,
+  isDeletable,
+  inFill,
+  maxWidth,
+  pillRole,
+  size,
+  theme
+}) => {
   const isStatus = pillRole === "status";
   let pillColor;
   let buttonFocusColor;