carbon-react 118.5.0 → 118.5.2

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

@@ -1,5 +1,4 @@
-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, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -20,45 +19,46 @@ import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibi
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
-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 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 [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
   const accessibilityLabelId = useRef(guid());
@@ -84,31 +84,27 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     label
   });
   const actualValue = isControlled.current ? value : selectedValue;
-
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     Logger.deprecate("The `inputRef` prop in `Multi Select` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
-
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
-
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-
   const setOpen = useCallback(() => {
     setOpenState(isAlreadyOpen => {
       if (!isAlreadyOpen && onOpen) {
         onOpen();
       }
-
       return true;
     });
   }, [onOpen]);
   const createCustomEvent = useCallback(newValue => {
     const customEvent = {
-      target: { ...(name && {
+      target: {
+        ...(name && {
           name
         }),
         ...(id && {
@@ -119,41 +115,37 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     };
     return customEvent;
   }, [name, id]);
+
   /* generic value update function which can be used for both controlled and uncontrolled
    * components, both with and without onChange.
    * It accepts a function to update the value, which is assumed to be have no side effects and therefore
    * be safe to run more than once if needed. */
-
   const updateValue = useCallback(updateFunction => {
-    const newValue = updateFunction(actualValue); // only call onChange if an option has been selected or deselected
-
-    if (onChange && newValue.length !== (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length)) {
+    const newValue = updateFunction(actualValue);
+    // only call onChange if an option has been selected or deselected
+    if (onChange && newValue.length !== actualValue?.length) {
       onChange(createCustomEvent(newValue));
-    } // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
-
+    }
 
+    // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
     if (!isControlled.current) {
       setSelectedValue(updateFunction);
     }
   }, [createCustomEvent, onChange, actualValue]);
-
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {
       const {
         text
       } = child.props;
-      return (text === null || text === void 0 ? void 0 : text.toLowerCase().indexOf(textToMatch.toLowerCase())) !== -1;
+      return text?.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
     });
   }
-
   const handleTextboxChange = useCallback(event => {
     const newValue = event.target.value;
     const match = findElementWithMatchingText(newValue, children);
-
     if (match) {
       setHighlightedValue(match.props.value);
     }
-
     setFilterText(newValue);
     setTextValue(newValue);
     setOpen();
@@ -164,9 +156,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       if (!previousValue.length) {
         return previousValue;
       }
-
       const newValue = previousValue.slice(); // spreading does not work but slice does - see https://github.com/microsoft/TypeScript/issues/53670
-
       newValue.splice(index, 1);
       return newValue;
     });
@@ -176,64 +166,51 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       key
     } = event;
     const isDeleteKey = key === "Backspace" || key === "Delete";
-
     if (onKeyDown) {
       onKeyDown(event);
     }
-
     if (readOnly) {
       return;
     }
-
     if (!event.defaultPrevented && isNavigationKey(key)) {
       event.preventDefault();
       setOpen();
     }
-
     if (isDeleteKey && (filterText === "" || textValue === "")) {
       removeSelectedValue(-1);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = useMemo(() => {
-    var _React$Children$map;
-
-    return actualValue && actualValue.length ? (_React$Children$map = React.Children.map(children, child => {
+    return actualValue && actualValue.length ? React.Children.map(children, child => {
       return /*#__PURE__*/React.isValidElement(child) && actualValue.includes(child.props.value) ? child.props.text : false;
-    })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(child => child).reduce((acc, item) => {
+    })?.filter(child => child).reduce((acc, item) => {
       return acc ? `${acc}, ${item}` : item;
     }, "") : null;
   }, [children, actualValue]);
   const handleGlobalClick = useCallback(event => {
     isMouseDownReported.current = false;
-
     if (!isOpen) {
       return;
     }
-
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
-
     if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
       setTextValue("");
       setFilterText("");
       setHighlightedValue("");
       setOpenState(false);
     }
-
     isClickTriggeredBySelect.current = false;
   }, [isOpen]);
   const mapValuesToPills = useMemo(() => {
     const canDelete = !disabled && !readOnly;
-
-    if (!(actualValue !== null && actualValue !== void 0 && actualValue.length)) {
+    if (!actualValue?.length) {
       return "";
     }
-
     return actualValue.map((singleValue, index) => {
       const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, singleValue));
       let pillProps = {};
-
       if ( /*#__PURE__*/React.isValidElement(matchingOption)) {
         pillProps = {
           title: matchingOption.props.text,
@@ -241,7 +218,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
           borderColor: matchingOption.props.borderColor
         };
       }
-
       const title = pillProps.title || "";
       const key = title + ( /*#__PURE__*/React.isValidElement(matchingOption) && matchingOption.props.value || index);
       return /*#__PURE__*/React.createElement(StyledSelectPillContainer, {
@@ -250,19 +226,20 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
         onDelete: canDelete ? () => removeSelectedValue(index) : undefined,
         wrapText: wrapPillText
       }, pillProps), title));
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, actualValue]);
   useEffect(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
     !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
-  }, [value, onChange]); // removes placeholder when a value is present
+  }, [value, onChange]);
 
+  // removes placeholder when a value is present
   useEffect(() => {
-    const hasValue = value === null || value === void 0 ? void 0 : value.length;
-    const hasSelectedValue = actualValue === null || actualValue === void 0 ? void 0 : actualValue.length;
-
+    const hasValue = value?.length;
+    const hasSelectedValue = actualValue?.length;
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");
     } else {
@@ -286,84 +263,64 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     isFirstRender.current = false;
   }, []);
-
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-
     if (onClick) {
       onClick(event);
     }
   }
-
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;
-
     if (onClick) {
       onClick(event);
     }
-
     setOpenState(isAlreadyOpen => {
       if (isAlreadyOpen) {
         setFilterText("");
         return false;
       }
-
       if (onOpen) {
         onOpen();
       }
-
       return true;
     });
   }
-
   function handleTextboxBlur(event) {
     isMouseDownOnInput.current = false;
-
     if (isMouseDownReported.current) {
       return;
     }
-
     isInputFocused.current = false;
-
     if (onBlur) {
       onBlur(event);
     }
   }
-
   function handleTextboxMouseDown(event) {
     isMouseDownReported.current = true;
-
     if (event.target.dataset.element === "input") {
       isMouseDownOnInput.current = true;
     }
   }
-
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
-
   function handleTextboxFocus(event) {
-    const triggerFocus = () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-
+    const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {
       setOpenState(isAlreadyOpen => {
         if (isAlreadyOpen) {
           return true;
         }
-
         if (onOpen) {
           onOpen();
         }
-
         if (onFocus && !isInputFocused.current) {
           triggerFocus();
           isInputFocused.current = true;
         }
-
         if (isMouseDownReported.current && !isMouseDownOnInput.current) {
           return false;
         }
-
         return true;
       });
     } else if (onFocus && !isInputFocused.current) {
@@ -371,33 +328,28 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       isInputFocused.current = true;
     }
   }
-
   const onSelectOption = useCallback(optionData => {
     const {
       value: newValue,
       selectionType,
       id: selectedOptionId
     } = optionData;
-
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
       setActiveDescendantId(selectedOptionId);
       return;
     }
-
     if (selectionType === "click") {
       isClickTriggeredBySelect.current = true;
     }
-
     setTextValue("");
-    const isAlreadySelected = (actualValue === null || actualValue === void 0 ? void 0 : actualValue.findIndex(val => isExpectedValue(val, newValue))) !== -1;
-    textboxRef === null || textboxRef === void 0 ? void 0 : textboxRef.focus();
+    const isAlreadySelected = actualValue?.findIndex(val => isExpectedValue(val, newValue)) !== -1;
+    textboxRef?.focus();
     isMouseDownReported.current = false;
     updateValue(previousValue => {
       if (isAlreadySelected) {
         return previousValue;
       }
-
       return [...previousValue, newValue];
     });
   }, [textboxRef, actualValue, updateValue]);
@@ -407,18 +359,15 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, []);
   const assignInput = useCallback(element => {
     setTextboxRef(element);
-
     if (inputRef || !ref) {
       return;
     }
-
     if (typeof ref === "function") {
       ref(element);
     } else {
       ref.current = element;
     }
   }, [ref, inputRef]);
-
   function getTextboxProps() {
     return {
       id: inputId.current,
@@ -445,12 +394,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }
-
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
     labelId: labelId,
-    anchorElement: (textboxRef === null || textboxRef === void 0 ? void 0 : textboxRef.parentElement) || undefined,
+    anchorElement: textboxRef?.parentElement || undefined,
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
@@ -567,14 +515,12 @@ MultiSelect.propTypes = {
   "children": PropTypes.node,
   "className": PropTypes.string,
   "color": PropTypes.string,
+  "content": PropTypes.string,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
-  "crossOrigin": PropTypes.string,
-  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
-    "__emotion_styles": PropTypes.any.isRequired
-  }), PropTypes.string, PropTypes.bool]),
+  "crossOrigin": PropTypes.oneOf(["", "anonymous", "use-credentials"]),
   "dangerouslySetInnerHTML": PropTypes.shape({
-    "__html": PropTypes.string.isRequired
+    "__html": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
   }),
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
@@ -794,6 +740,7 @@ MultiSelect.propTypes = {
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
   "name": PropTypes.string,
+  "nonce": PropTypes.string,
   "noResultsMessage": PropTypes.string,
   "onAbort": PropTypes.func,
   "onAbortCapture": PropTypes.func,
@@ -965,9 +912,11 @@ MultiSelect.propTypes = {
   "property": PropTypes.string,
   "radioGroup": PropTypes.string,
   "readOnly": PropTypes.bool,
+  "rel": PropTypes.string,
   "required": PropTypes.bool,
   "resource": PropTypes.string,
   "results": PropTypes.number,
+  "rev": PropTypes.string,
   "reverse": PropTypes.bool,
   "role": PropTypes.oneOfType([PropTypes.oneOf(["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

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

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

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

@@ -1,41 +1,38 @@
-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, { 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(({
-  text,
-  children,
-  onSelect,
-  value,
-  id,
-  index,
-  hidden,
-  onClick,
-  style,
-  ...rest
-}, ref) => {
+const Option = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    text,
+    children,
+    onSelect,
+    value,
+    id,
+    index,
+    hidden,
+    onClick,
+    style,
+    ...rest
+  } = _ref;
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
-
   if (selectListContext.multiselectValues) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
-
   function handleClick() {
     if (!onClick) {
-      onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+      onSelect?.({
         text,
         value,
         id
       });
     } else {
-      onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+      onSelect?.();
       onClick(value);
     }
   }
-
   return /*#__PURE__*/React.createElement(StyledOption, _extends({
     id: id,
     ref: ref,
@@ -112,14 +109,12 @@ Option.propTypes = {
   "children": PropTypes.node,
   "className": PropTypes.string,
   "color": PropTypes.string,
+  "content": PropTypes.string,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
-  "crossOrigin": PropTypes.string,
-  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
-    "__emotion_styles": PropTypes.any.isRequired
-  }), PropTypes.string, PropTypes.bool]),
+  "crossOrigin": PropTypes.oneOf(["", "anonymous", "use-credentials"]),
   "dangerouslySetInnerHTML": PropTypes.shape({
-    "__html": PropTypes.string.isRequired
+    "__html": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
   }),
   "datatype": PropTypes.string,
   "defaultChecked": PropTypes.bool,
@@ -155,6 +150,7 @@ Option.propTypes = {
   "minLength": PropTypes.number,
   "multiple": PropTypes.bool,
   "name": PropTypes.string,
+  "nonce": PropTypes.string,
   "onAbort": PropTypes.func,
   "onAbortCapture": PropTypes.func,
   "onAnimationEnd": PropTypes.func,
@@ -321,9 +317,11 @@ Option.propTypes = {
   "property": PropTypes.string,
   "radioGroup": PropTypes.string,
   "readOnly": PropTypes.bool,
+  "rel": PropTypes.string,
   "required": PropTypes.bool,
   "resource": PropTypes.string,
   "results": PropTypes.number,
+  "rev": PropTypes.string,
   "role": PropTypes.oneOfType([PropTypes.oneOf(["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,

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

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

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

@@ -1,15 +1,15 @@
-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 StyledOptionGroupHeader from "./option-group-header.style";
 import Icon from "../../icon";
-const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
-  label,
-  icon,
-  style,
-  ...rest
-}, ref) => {
+const OptionGroupHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    label,
+    icon,
+    style,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, _extends({
     style: style
   }, rest, {