carbon-react 119.10.0 → 119.10.2

package/esm/components/select/__internal__/select-text/select-text.style.js

@@ -1,15 +1,13 @@
 import styled, { css } from "styled-components";
 import sizes from "../../../../__internal__/input/input-sizes.style";
 const StyledSelectText = styled.span`
-  ${_ref => {
-  let {
-    disabled,
-    hasPlaceholder,
-    readOnly,
-    transparent,
-    size
-  } = _ref;
-  return css`
+  ${({
+  disabled,
+  hasPlaceholder,
+  readOnly,
+  transparent,
+  size
+}) => css`
     align-items: center;
     display: inline-flex;
     flex-grow: 1;
@@ -46,7 +44,6 @@ const StyledSelectText = styled.span`
       color: var(--colorsUtilityYin065);
       text-shadow: none;
     `}
-  `;
-}}
+  `}
 `;
 export default StyledSelectText;

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

@@ -17,46 +17,45 @@ import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibi
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
-const FilterableSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    value,
-    defaultValue,
-    id,
-    name,
-    label,
-    children,
-    onOpen: onOpenProp,
-    onChange,
-    onFilterChange: onFilterChangeProp,
-    onClick,
-    onKeyDown,
-    onFocus,
-    onBlur,
-    openOnFocus,
-    noResultsMessage,
-    disablePortal,
-    listActionButton,
-    listMaxHeight,
-    onListAction,
-    isLoading,
-    disabled,
-    readOnly,
-    onListScrollBottom,
-    tableHeader,
-    multiColumn,
-    "data-component": dataComponent = "filterable-select",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    tooltipPosition,
-    listPlacement = "bottom",
-    flipEnabled = true,
-    inputRef,
-    enableVirtualScroll,
-    virtualScrollOverscan,
-    ...textboxProps
-  } = _ref;
+const FilterableSelect = /*#__PURE__*/React.forwardRef(({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  value,
+  defaultValue,
+  id,
+  name,
+  label,
+  children,
+  onOpen: onOpenProp,
+  onChange,
+  onFilterChange: onFilterChangeProp,
+  onClick,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  openOnFocus,
+  noResultsMessage,
+  disablePortal,
+  listActionButton,
+  listMaxHeight,
+  onListAction,
+  isLoading,
+  disabled,
+  readOnly,
+  onListScrollBottom,
+  tableHeader,
+  multiColumn,
+  "data-component": dataComponent = "filterable-select",
+  "data-element": dataElement,
+  "data-role": dataRole,
+  tooltipPosition,
+  listPlacement = "bottom",
+  flipEnabled = true,
+  inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
+  ...textboxProps
+}, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
   const containerRef = useRef(null);
@@ -140,8 +139,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       return match.props.value;
     });
   }, [children, triggerChange]);
-  const setMatchingText = useCallback(function (newValue) {
-    let isClosing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const setMatchingText = useCallback((newValue, isClosing = false) => {
     const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");

package/esm/components/select/list-action-button/list-action-button.component.js

@@ -3,11 +3,10 @@ import PropTypes from "prop-types";
 import StyledListActionButtonWrapper from "./list-action-button.style";
 import useLocale from "../../../hooks/__internal__/useLocale";
 import Button from "../../button";
-const ListActionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    listActionButton,
-    onListAction
-  } = _ref;
+const ListActionButton = /*#__PURE__*/React.forwardRef(({
+  listActionButton,
+  onListAction
+}, ref) => {
   const l = useLocale();
   function renderListActionButton() {
     if (!listActionButton || listActionButton === true) {

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

@@ -19,46 +19,45 @@ import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibi
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
-const MultiSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    value,
-    defaultValue,
-    id,
-    label,
-    name,
-    disabled,
-    readOnly,
-    children,
-    onOpen,
-    onFilterChange: onFilterChangeProp,
-    onChange,
-    onClick,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    openOnFocus = false,
-    noResultsMessage,
-    placeholder,
-    disablePortal,
-    isLoading,
-    tableHeader,
-    multiColumn,
-    tooltipPosition,
-    size,
-    "data-component": dataComponent = "multiselect",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    listPlacement = "bottom",
-    listMaxHeight,
-    flipEnabled = true,
-    wrapPillText = true,
-    inputRef,
-    enableVirtualScroll,
-    virtualScrollOverscan,
-    ...textboxProps
-  } = _ref;
+const MultiSelect = /*#__PURE__*/React.forwardRef(({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  value,
+  defaultValue,
+  id,
+  label,
+  name,
+  disabled,
+  readOnly,
+  children,
+  onOpen,
+  onFilterChange: onFilterChangeProp,
+  onChange,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  openOnFocus = false,
+  noResultsMessage,
+  placeholder,
+  disablePortal,
+  isLoading,
+  tableHeader,
+  multiColumn,
+  tooltipPosition,
+  size,
+  "data-component": dataComponent = "multiselect",
+  "data-element": dataElement,
+  "data-role": dataRole,
+  listPlacement = "bottom",
+  listMaxHeight,
+  flipEnabled = true,
+  wrapPillText = true,
+  inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
+  ...textboxProps
+}, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
   const accessibilityLabelId = useRef(guid());

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

@@ -26,18 +26,12 @@ const StyledSelectMultiSelect = styled(StyledSelect)`
 
   ${InputPresentationStyle} {
     // size has a default value of "medium" defined in StyledSelect, but TS can't see this
-    padding-right: ${_ref => {
-  let {
-    size
-  } = _ref;
-  return sizes[size].height;
-}};
-    padding-left: ${_ref2 => {
-  let {
-    size
-  } = _ref2;
-  return sizes[size].horizontalPadding;
-}};
+    padding-right: ${({
+  size
+}) => sizes[size].height};
+    padding-left: ${({
+  size
+}) => sizes[size].horizontalPadding};
     position: relative;
 
     ${StyledInput} {

package/esm/components/select/option/option.component.d.ts

@@ -6,9 +6,9 @@ export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElemen
      * Will use a randomly generated GUID if none is provided.
      */
     id?: string;
-    /** The option's visible text, displayed within <Textbox> of <Select>, and used for filtering */
+    /** The option's visible text, displayed within `<Textbox>` of `<Select>`, and used for filtering */
     text: string;
-    /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */
+    /** Optional: alternative rendered content, displayed within `<SelectList>` of `<Select>` (eg: an icon, an image, etc) */
     children?: React.ReactNode;
     /** The option's invisible internal value */
     value: string | Record<string, unknown>;

package/esm/components/select/option/option.component.js

@@ -3,19 +3,18 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledOption from "./option.style";
 import SelectListContext from "../__internal__/select-list-context";
-const Option = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    text,
-    children,
-    onSelect,
-    value,
-    id,
-    index,
-    hidden,
-    onClick,
-    style,
-    ...rest
-  } = _ref;
+const Option = /*#__PURE__*/React.forwardRef(({
+  text,
+  children,
+  onSelect,
+  value,
+  id,
+  index,
+  hidden,
+  onClick,
+  style,
+  ...rest
+}, ref) => {
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
   if (selectListContext.multiselectValues) {

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

@@ -11,21 +11,15 @@ const StyledOption = styled.li`
   left: 0;
   width: 100%;
 
-  ${_ref => {
-  let {
-    isHighlighted
-  } = _ref;
-  return isHighlighted && css`
+  ${({
+  isHighlighted
+}) => isHighlighted && css`
       background-color: var(--colorsUtilityMajor200);
-    `;
-}}
+    `}
 
-  ${_ref2 => {
-  let {
-    hidden
-  } = _ref2;
-  return hidden && "display: none;";
-}}
+  ${({
+  hidden
+}) => hidden && "display: none;"}
 
   :hover {
     background-color: var(--colorsUtilityMajor100);

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -3,13 +3,12 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledOptionGroupHeader from "./option-group-header.style";
 import Icon from "../../icon";
-const OptionGroupHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    label,
-    icon,
-    style,
-    ...rest
-  } = _ref;
+const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
+  label,
+  icon,
+  style,
+  ...rest
+}, ref) => {
   return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, _extends({
     style: style
   }, rest, {

package/esm/components/select/option-row/option-row.component.js

@@ -3,18 +3,17 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledOptionRow from "./option-row.style";
 import SelectListContext from "../__internal__/select-list-context";
-const OptionRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    id,
-    text,
-    children,
-    onSelect,
-    value,
-    index,
-    hidden,
-    style,
-    ...rest
-  } = _ref;
+const OptionRow = /*#__PURE__*/React.forwardRef(({
+  id,
+  text,
+  children,
+  onSelect,
+  value,
+  index,
+  hidden,
+  style,
+  ...rest
+}, ref) => {
   const handleClick = () => {
     onSelect?.({
       id,

package/esm/components/select/option-row/option-row.style.js

@@ -6,21 +6,15 @@ const StyledOptionRow = styled.tr`
   left: 0;
   width: 100%;
 
-  ${_ref => {
-  let {
-    hidden
-  } = _ref;
-  return hidden && "display: none;";
-}}
+  ${({
+  hidden
+}) => hidden && "display: none;"}
 
-  ${_ref2 => {
-  let {
-    isHighlighted
-  } = _ref2;
-  return isHighlighted && css`
+  ${({
+  isHighlighted
+}) => isHighlighted && css`
       background-color: var(--colorsUtilityMajor200);
-    `;
-}}
+    `}
 
   :hover {
     background-color: var(--colorsUtilityMajor100);

package/esm/components/select/select-list/select-list-container.style.js

@@ -5,30 +5,21 @@ const StyledSelectListContainer = styled.div`
   box-shadow: var(--boxShadow100);
   animation: fadeIn 250ms ease-out;
   position: absolute;
-  z-index: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.zIndex.popover;
-}};
-  max-height: ${_ref2 => {
-  let {
-    maxHeight
-  } = _ref2;
-  return `${maxHeight}px`;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  max-height: ${({
+  maxHeight
+}) => `${maxHeight}px`};
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   border-radius: var(--borderRadius050);
 
-  ${_ref3 => {
-  let {
-    isLoading
-  } = _ref3;
-  return isLoading && "min-height: 150px";
-}};
+  ${({
+  isLoading
+}) => isLoading && "min-height: 150px"};
 
   @keyframes fadeIn {
     0% {

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

@@ -23,33 +23,32 @@ const SCROLL_OPTIONS = {
   behavior: "auto",
   align: "end"
 };
-const SelectList = /*#__PURE__*/React.forwardRef((_ref, listContainerRef) => {
-  let {
-    listMaxHeight = 180,
-    listActionButton,
-    id,
-    labelId,
-    children,
-    onSelect,
-    onSelectListClose,
-    filterText,
-    anchorElement,
-    highlightedValue,
-    disablePortal,
-    onListAction,
-    isLoading,
-    onListScrollBottom,
-    multiColumn,
-    tableHeader,
-    loaderDataRole,
-    listPlacement = "bottom",
-    flipEnabled = true,
-    isOpen,
-    multiselectValues,
-    enableVirtualScroll,
-    virtualScrollOverscan = 5,
-    ...listProps
-  } = _ref;
+const SelectList = /*#__PURE__*/React.forwardRef(({
+  listMaxHeight = 180,
+  listActionButton,
+  id,
+  labelId,
+  children,
+  onSelect,
+  onSelectListClose,
+  filterText,
+  anchorElement,
+  highlightedValue,
+  disablePortal,
+  onListAction,
+  isLoading,
+  onListScrollBottom,
+  multiColumn,
+  tableHeader,
+  loaderDataRole,
+  listPlacement = "bottom",
+  flipEnabled = true,
+  isOpen,
+  multiselectValues,
+  enableVirtualScroll,
+  virtualScrollOverscan = 5,
+  ...listProps
+}, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
   const lastFilter = useRef("");
@@ -299,11 +298,10 @@ const SelectList = /*#__PURE__*/React.forwardRef((_ref, listContainerRef) => {
     }
   }, [children, currentOptionsListIndex, isLoading, lastOptionIndex, listContainerRef, virtualizer]);
   const popoverMiddleware = useMemo(() => [offset(3), size({
-    apply(_ref2) {
-      let {
-        rects,
-        elements
-      } = _ref2;
+    apply({
+      rects,
+      elements
+    }) {
       Object.assign(elements.floating.style, {
         width: `${rects.reference.width}px`
       });

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

@@ -1,10 +1,8 @@
 import styled, { css } from "styled-components";
 const StyledSelectList = styled.ul`
-  ${_ref => {
-  let {
-    listHeight
-  } = _ref;
-  return css`
+  ${({
+  listHeight
+}) => css`
     box-sizing: border-box;
     display: flex;
     align-items: flex-start;
@@ -16,8 +14,7 @@ const StyledSelectList = styled.ul`
     position: relative;
     width: 100%;
     ${listHeight === undefined ? "" : `height: ${listHeight}px;`}
-  `;
-}}
+  `}
 `;
 const StyledSelectLoaderContainer = styled.div`
   display: flex;
@@ -54,12 +51,9 @@ const StyledSelectListTableHeader = styled.thead`
   z-index: 1;
 
   tr {
-    width: ${_ref2 => {
-  let {
-    scrollbarWidth
-  } = _ref2;
-  return `calc(100% - ${scrollbarWidth}px)`;
-}};
+    width: ${({
+  scrollbarWidth
+}) => `calc(100% - ${scrollbarWidth}px)`};
   }
 
   th {
@@ -93,11 +87,8 @@ const StyledSelectListTableBody = styled.tbody`
   width: 100%;
   table-layout: fixed;
   width: 100%;
-  height: ${_ref3 => {
-  let {
-    listHeight
-  } = _ref3;
-  return `${listHeight}px`;
-}};
+  height: ${({
+  listHeight
+}) => `${listHeight}px`};
 `;
 export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody };