carbon-react 119.10.0 → 119.10.2

package/esm/components/select/select-textbox/select-textbox.component.js

@@ -1,55 +1,49 @@
 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, { useRef, useMemo } from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { offset, size as sizeMiddleware } from "@floating-ui/dom";
 import useFloating from "../../../hooks/__internal__/useFloating";
 import Textbox from "../../textbox";
 import SelectText from "../__internal__/select-text";
-import guid from "../../../__internal__/utils/helpers/guid";
 import useLocale from "../../../hooks/__internal__/useLocale";
-const floatingMiddleware = [offset(_ref => {
-  let {
-    rects
-  } = _ref;
-  return {
-    mainAxis: -rects.reference.height
-  };
-}), sizeMiddleware({
-  apply(_ref2) {
-    let {
-      rects,
-      elements
-    } = _ref2;
+const floatingMiddleware = [offset(({
+  rects
+}) => ({
+  mainAxis: -rects.reference.height
+})), sizeMiddleware({
+  apply({
+    rects,
+    elements
+  }) {
     elements.reference.style.height = `${rects.floating.height}px`;
     elements.floating.style.width = `${rects.reference.width}px`;
   }
 })];
-const SelectTextbox = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    ariaLabel,
-    ariaLabelledby,
-    accessibilityLabelId,
-    labelId,
-    "aria-controls": ariaControls,
-    disabled,
-    isOpen,
-    id,
-    readOnly,
-    placeholder,
-    size = "medium",
-    onClick,
-    onFocus,
-    onBlur,
-    onChange,
-    selectedValue,
-    required,
-    textboxRef,
-    hasTextCursor,
-    transparent,
-    activeDescendantId,
-    onKeyDown,
-    ...restProps
-  } = _ref3;
+const SelectTextbox = /*#__PURE__*/React.forwardRef(({
+  ariaLabel,
+  ariaLabelledby,
+  accessibilityLabelId,
+  labelId,
+  "aria-controls": ariaControls,
+  disabled,
+  isOpen,
+  id,
+  readOnly,
+  placeholder,
+  size = "medium",
+  onClick,
+  onFocus,
+  onBlur,
+  onChange,
+  selectedValue,
+  required,
+  textboxRef,
+  hasTextCursor,
+  transparent,
+  activeDescendantId,
+  onKeyDown,
+  ...restProps
+}, ref) => {
   const reference = useMemo(() => ({
     current: textboxRef?.parentElement?.parentElement || null
   }), [textboxRef]);
@@ -65,7 +59,6 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     middleware: floatingMiddleware
   });
   const l = useLocale();
-  const textId = useRef(guid());
   function handleTextboxClick(event) {
     if (disabled || readOnly) {
       return;
@@ -85,60 +78,28 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       onBlur(event);
     }
   }
-  function handleSelectTextKeydown(event) {
-    if (event.key.length === 1) {
-      onChange?.({
-        target: {
-          value: event.key
-        }
-      });
-    }
-  }
-  function getTextboxProps() {
-    return {
-      disabled,
-      id,
-      readOnly,
-      required,
-      onClick: handleTextboxClick,
-      onFocus: handleTextboxFocus,
-      onBlur: handleTextboxBlur,
-      labelId,
-      type: "text",
-      ref,
-      onKeyDown,
-      ...restProps
-    };
-  }
-  function getInputAriaAttributes() {
-    const joinIds = function () {
-      for (var _len = arguments.length, ids = new Array(_len), _key = 0; _key < _len; _key++) {
-        ids[_key] = arguments[_key];
-      }
-      return ids.filter(item => item !== undefined).join(" ");
-    };
-    const combinedAriaLabelledBy = hasTextCursor ? joinIds(ariaLabelledby || labelId, accessibilityLabelId || textId.current) : joinIds(ariaLabelledby || labelId, textId.current);
-    return {
-      "aria-expanded": readOnly ? undefined : isOpen,
-      "aria-labelledby": ariaLabel && !ariaLabelledby ? undefined : combinedAriaLabelledBy,
-      "aria-activedescendant": activeDescendantId,
-      "aria-controls": ariaControls,
-      "aria-autocomplete": hasTextCursor ? "both" : undefined,
-      role: readOnly ? undefined : "combobox"
-    };
-  }
-  function renderSelectText() {
-    return /*#__PURE__*/React.createElement(SelectText, _extends({
-      textId: textId.current,
-      transparent: transparent,
-      onKeyDown: onKeyDown || handleSelectTextKeydown,
-      placeholder: placeholder || l.select.placeholder(),
-      onClick: handleTextboxClick,
-      disabled: disabled,
-      readOnly: readOnly,
-      size: size
-    }, restProps));
-  }
+  const textboxProps = {
+    disabled,
+    id,
+    readOnly,
+    required,
+    onClick: handleTextboxClick,
+    onFocus: handleTextboxFocus,
+    onBlur: handleTextboxBlur,
+    labelId,
+    type: "text",
+    ref,
+    onKeyDown,
+    ...restProps
+  };
+  const inputAriaAttributes = {
+    "aria-expanded": readOnly ? undefined : isOpen,
+    "aria-labelledby": accessibilityLabelId ? `${ariaLabelledby || labelId} ${accessibilityLabelId}` : ariaLabelledby,
+    "aria-activedescendant": activeDescendantId,
+    "aria-controls": ariaControls,
+    "aria-autocomplete": hasTextCursor ? "both" : undefined,
+    role: readOnly ? undefined : "combobox"
+  };
   const hasStringValue = typeof selectedValue === "string" || Array.isArray(selectedValue) && typeof selectedValue[0] === "string";
   return /*#__PURE__*/React.createElement(Textbox, _extends({
     "aria-label": ariaLabel,
@@ -149,9 +110,16 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     onChange: onChange,
     value: hasStringValue ? selectedValue : undefined,
     placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
-  }, getInputAriaAttributes(), getTextboxProps(), {
+  }, inputAriaAttributes, textboxProps, {
     my: 0 // prevents any form spacing being applied
-  }), !hasTextCursor && renderSelectText());
+  }), !hasTextCursor && /*#__PURE__*/React.createElement(SelectText, _extends({
+    transparent: transparent,
+    placeholder: placeholder || l.select.placeholder(),
+    onClick: handleTextboxClick,
+    disabled: disabled,
+    readOnly: readOnly,
+    size: size
+  }, restProps)));
 });
 SelectTextbox.propTypes = {
   "about": PropTypes.string,

package/esm/components/select/select.style.js

@@ -5,16 +5,14 @@ import StyledInput from "../../__internal__/input/input.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import { baseTheme } from "../../style/themes";
 const StyledSelect = styled.div`
-  ${_ref => {
-  let {
-    hasTextCursor,
-    disabled,
-    readOnly,
-    theme,
-    transparent,
-    isOpen
-  } = _ref;
-  return css`
+  ${({
+  hasTextCursor,
+  disabled,
+  readOnly,
+  theme,
+  transparent,
+  isOpen
+}) => css`
     ${margin}
 
     position: relative;
@@ -74,8 +72,7 @@ const StyledSelect = styled.div`
         opacity: 0;
       }
     `}
-  `;
-}}
+  `}
 `;
 StyledSelect.defaultProps = {
   size: "medium",

package/esm/components/select/simple-select/simple-select.component.js

@@ -15,43 +15,42 @@ import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const SimpleSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    value,
-    defaultValue,
-    id,
-    label,
-    name,
-    disabled,
-    readOnly,
-    children,
-    transparent,
-    openOnFocus = false,
-    onOpen,
-    onChange,
-    onClick,
-    onFocus,
-    onKeyDown,
-    onBlur,
-    disablePortal = false,
-    isLoading,
-    listMaxHeight,
-    onListScrollBottom,
-    tableHeader,
-    multiColumn,
-    tooltipPosition,
-    "data-component": dataComponent = "simple-select",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    listPlacement = "bottom",
-    flipEnabled = true,
-    inputRef,
-    enableVirtualScroll,
-    virtualScrollOverscan,
-    ...props
-  } = _ref;
+const SimpleSelect = /*#__PURE__*/React.forwardRef(({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  value,
+  defaultValue,
+  id,
+  label,
+  name,
+  disabled,
+  readOnly,
+  children,
+  transparent,
+  openOnFocus = false,
+  onOpen,
+  onChange,
+  onClick,
+  onFocus,
+  onKeyDown,
+  onBlur,
+  disablePortal = false,
+  isLoading,
+  listMaxHeight,
+  onListScrollBottom,
+  tableHeader,
+  multiColumn,
+  tooltipPosition,
+  "data-component": dataComponent = "simple-select",
+  "data-element": dataElement,
+  "data-role": dataRole,
+  listPlacement = "bottom",
+  flipEnabled = true,
+  inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
+  ...props
+}, ref) => {
   const selectListId = useRef(guid());
   const containerRef = useRef(null);
   const listboxRef = useRef(null);

package/esm/components/select/utils/get-next-child-by-text.js

@@ -22,8 +22,7 @@ function getIndexOfNextElement(listOfMatches, previousIndex) {
 /**
  * Recreates HTML Select element functionality of finding first match based on typed characters
  * */
-export default function getNextChildByText(textToMatch, arrayOfChildren) {
-  let previousIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+export default function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
   const lastCharacter = textToMatch.slice(-1);
   const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
   let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);

package/esm/components/select/utils/with-filter.hoc.js

@@ -81,16 +81,15 @@ function addHighlightedContent(filteredElements, filterText) {
 }
 /** Filters wrapped component children based on provided filter text and highlights matching content */
 const withFilter = WrappedComponent => {
-  const FilteredComponent = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
-    let {
-      children,
-      filterText,
-      noResultsMessage,
-      isLoading,
-      multiColumn,
-      tableHeader,
-      ...props
-    } = _ref;
+  const FilteredComponent = /*#__PURE__*/React.forwardRef(({
+    children,
+    filterText,
+    noResultsMessage,
+    isLoading,
+    multiColumn,
+    tableHeader,
+    ...props
+  }, forwardedRef) => {
     const l = useLocale();
     const getFilteredChildren = useCallback(() => {
       let filteredElements = children;

package/esm/components/settings-row/settings-row.component.js

@@ -5,16 +5,15 @@ import Heading from "../heading";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledSettingsRow, StyledSettingsRowHeader, StyledSettingsRowInput } from "./settings-row.style";
-export const SettingsRow = _ref => {
-  let {
-    title,
-    headingType = "h3",
-    children,
-    description,
-    divider = true,
-    className,
-    ...rest
-  } = _ref;
+export const SettingsRow = ({
+  title,
+  headingType = "h3",
+  children,
+  description,
+  divider = true,
+  className,
+  ...rest
+}) => {
   const heading = () => {
     if (!title) return null;
     return /*#__PURE__*/React.createElement(Heading, {

package/esm/components/settings-row/settings-row.style.js

@@ -13,15 +13,12 @@ export const StyledSettingsRow = styled.div`
   padding: 0;
   position: relative;
 
-  ${_ref => {
-  let {
-    hasDivider
-  } = _ref;
-  return hasDivider && css`
+  ${({
+  hasDivider
+}) => hasDivider && css`
       border-bottom: 1px solid var(--colorsUtilityMajor050);
       padding-bottom: 30px;
-    `;
-}}
+    `}
 
   ${StyledHeader} {
     margin-bottom: 0;

package/esm/components/show-edit-pod/show-edit-pod.component.js

@@ -12,31 +12,30 @@ import StyledPod from "./show-edit-pod.style";
 import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 let deprecateWarnTriggered = false;
-const ShowEditPod = _ref => {
-  let {
-    border = false,
-    className,
-    children,
-    saving = false,
-    editFields,
-    editing,
-    onEdit,
-    onSave,
-    onCancel,
-    onUndo,
-    cancel = true,
-    cancelText,
-    saveText,
-    onDelete,
-    deleteText,
-    softDelete,
-    buttonAlign = "right",
-    transitionName = "carbon-show-edit-pod__transition",
-    title,
-    hideDeleteButtonInViewMode = false,
-    variant = "transparent",
-    ...rest
-  } = _ref;
+const ShowEditPod = ({
+  border = false,
+  className,
+  children,
+  saving = false,
+  editFields,
+  editing,
+  onEdit,
+  onSave,
+  onCancel,
+  onUndo,
+  cancel = true,
+  cancelText,
+  saveText,
+  onDelete,
+  deleteText,
+  softDelete,
+  buttonAlign = "right",
+  transitionName = "carbon-show-edit-pod__transition",
+  title,
+  hideDeleteButtonInViewMode = false,
+  variant = "transparent",
+  ...rest
+}) => {
   if (!deprecateWarnTriggered) {
     deprecateWarnTriggered = true;
     Logger.deprecate("The ShowEditPod component is deprecated and will soon be removed. Please use alternatives such as the Fieldset, Form or Pod components instead.");

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

@@ -2,19 +2,16 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import StyledSidebarHeader from "./sidebar-header.style";
-const SidebarHeader = _ref => {
-  let {
-    children,
-    id,
-    closeIcon,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledSidebarHeader, _extends({
-    hasClose: !!closeIcon,
-    id: id,
-    "data-component": "sidebar-header",
-    p: "27px 32px 32px"
-  }, rest), children, closeIcon);
-};
+const SidebarHeader = ({
+  children,
+  id,
+  closeIcon,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledSidebarHeader, _extends({
+  hasClose: !!closeIcon,
+  id: id,
+  "data-component": "sidebar-header",
+  p: "27px 32px 32px"
+}, rest), children, closeIcon);
 SidebarHeader.displayName = "SidebarHeader";
 export default SidebarHeader;

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

@@ -12,11 +12,9 @@ const StyledSidebarHeader = styled.div`
 
   ${padding}
 
-  ${_ref => {
-  let {
-    hasClose
-  } = _ref;
-  return hasClose && css`
+  ${({
+  hasClose
+}) => hasClose && css`
       display: flex;
       justify-content: space-between;
 
@@ -25,8 +23,7 @@ const StyledSidebarHeader = styled.div`
         z-index: 1;
         right: 25px;
       }
-    `;
-}}
+    `}
 `;
 StyledSidebarHeader.defaultProps = {
   theme: baseTheme

package/esm/components/sidebar/sidebar.component.js

@@ -17,29 +17,28 @@ import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 // TODO FE-5408 will investigate why React.RefObject<T> produces a failed prop type when current = null
 
 export const SidebarContext = /*#__PURE__*/React.createContext({});
-const Sidebar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    open,
-    bespokeFocusTrap,
-    disableAutoFocus = false,
-    disableEscKey = false,
-    enableBackgroundUI = false,
-    header,
-    position = "right",
-    size = "medium",
-    children,
-    onCancel,
-    role = "dialog",
-    focusFirstElement,
-    focusableContainers,
-    focusableSelectors,
-    width,
-    headerPadding = {},
-    ...rest
-  } = _ref;
+const Sidebar = /*#__PURE__*/React.forwardRef(({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  open,
+  bespokeFocusTrap,
+  disableAutoFocus = false,
+  disableEscKey = false,
+  enableBackgroundUI = false,
+  header,
+  position = "right",
+  size = "medium",
+  children,
+  onCancel,
+  role = "dialog",
+  focusFirstElement,
+  focusableContainers,
+  focusableSelectors,
+  width,
+  headerPadding = {},
+  ...rest
+}, ref) => {
   const locale = useLocale();
   const {
     current: headerId

package/esm/components/sidebar/sidebar.style.js

@@ -20,15 +20,13 @@ const StyledSidebar = styled.div`
     ${props => calculateFormSpacingValues(props, false, "sidebar")}
   }
 
-  ${_ref => {
-  let {
-    onCancel,
-    position,
-    size,
-    theme,
-    width
-  } = _ref;
-  return css`
+  ${({
+  onCancel,
+  position,
+  size,
+  theme,
+  width
+}) => css`
     background: var(--colorsUtilityMajor025);
     border-radius: 1px;
     bottom: 0;
@@ -42,8 +40,8 @@ const StyledSidebar = styled.div`
       width: ${SIDEBAR_SIZES_CSS[size]};
     `}
     ${width && computeWidth({
-    width
-  })}
+  width
+})}
 
     ${position && css`
       box-shadow: var(--boxShadow300);
@@ -58,8 +56,7 @@ const StyledSidebar = styled.div`
         top: 25px;
       }
     `}
-  `;
-}}
+  `}
 `;
 StyledSidebar.defaultProps = {
   theme: baseTheme

package/esm/components/simple-color-picker/simple-color/simple-color.style.js

@@ -22,26 +22,20 @@ export const StyledColorSampleBox = styled.div`
   justify-content: center;
   border: 2px solid transparent;
 
-  ${_ref => {
-  let {
-    color
-  } = _ref;
-  return color !== "transparent" && css`
+  ${({
+  color
+}) => color !== "transparent" && css`
       background-color: ${color};
-    `;
-}}
+    `}
 
-  ${_ref2 => {
-  let {
-    color
-  } = _ref2;
-  return color === "transparent" && css`
+  ${({
+  color
+}) => color === "transparent" && css`
       background-color: #eeeeee;
       background-image: url(${checkerBoardSvg});
       background-size: 14px 14px;
       background-position: -2px -2px;
-    `;
-}}
+    `}
 `;
 export const StyledSimpleColorInput = styled(Input)`
   position: absolute;
@@ -83,11 +77,8 @@ export const StyledTickIcon = styled(Icon)`
 
   &::before {
     font-size: 20px;
-    color: ${_ref3 => {
-  let {
-    color
-  } = _ref3;
-  return getIconColor(color);
-}};
+    color: ${({
+  color
+}) => getIconColor(color)};
   }
 `;