@zendeskgarden/react-dropdowns.legacy 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/elements/Autocomplete/Autocomplete.js

@@ -0,0 +1,144 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Reference } from 'react-popper';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+import { VALIDATION } from '@zendeskgarden/react-forms';
+import { mergeRefs } from 'react-merge-refs';
+import '../../styled/menu/StyledMenu.js';
+import '../../styled/menu/StyledMenuWrapper.js';
+import '../../styled/menu/StyledSeparator.js';
+import '../../styled/items/StyledAddItem.js';
+import '../../styled/items/StyledItem.js';
+import '../../styled/items/StyledItemMeta.js';
+import '../../styled/items/StyledNextItem.js';
+import '../../styled/items/StyledNextIcon.js';
+import '../../styled/items/StyledPreviousItem.js';
+import '../../styled/items/StyledPreviousIcon.js';
+import '../../styled/items/StyledItemIcon.js';
+import '../../styled/items/header/StyledHeaderIcon.js';
+import '../../styled/items/header/StyledHeaderItem.js';
+import '../../styled/items/media/StyledMediaBody.js';
+import '../../styled/items/media/StyledMediaFigure.js';
+import '../../styled/items/media/StyledMediaItem.js';
+import { StyledFauxInput } from '../../styled/select/StyledFauxInput.js';
+import { StyledInput } from '../../styled/select/StyledInput.js';
+import { StyledSelect } from '../../styled/select/StyledSelect.js';
+import '../../styled/multiselect/StyledMultiselectInput.js';
+import '../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useDropdownContext from '../../utils/useDropdownContext.js';
+import useFieldContext from '../../utils/useFieldContext.js';
+
+const Autocomplete = forwardRef((_ref, ref) => {
+  let {
+    children,
+    inputRef: controlledInputRef,
+    start,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    downshift: {
+      getToggleButtonProps,
+      getInputProps,
+      getRootProps,
+      isOpen
+    },
+    setDropdownType
+  } = useDropdownContext();
+  const {
+    isLabelHovered
+  } = useFieldContext();
+  const inputRef = useRef();
+  const triggerRef = useRef();
+  const previousIsOpenRef = useRef(isOpen);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    if (inputRef.current && isOpen !== previousIsOpenRef.current) {
+      inputRef.current.focus();
+    }
+    previousIsOpenRef.current = isOpen;
+  }, [inputRef, isOpen]);
+  const {
+    type,
+    onKeyDown,
+    ...selectProps
+  } = getToggleButtonProps(getRootProps({
+    role: null,
+    ...props,
+    onKeyDown: e => {
+      if (isOpen) {
+        e.nativeEvent.preventDownshiftDefault = true;
+      }
+    },
+    onMouseEnter: composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
+    onMouseLeave: composeEventHandlers(props.onMouseLeave, () => setIsHovered(false))
+  }));
+  const onSelectKeyDown = composeEventHandlers(props.onKeyDown, onKeyDown);
+  const isContainerHovered = isLabelHovered && !isOpen;
+  const isContainerFocused = isOpen || isFocused;
+  useEffect(() => {
+    setDropdownType('autocomplete');
+  }, [setDropdownType]);
+  return React__default.createElement(Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    return React__default.createElement(StyledFauxInput, Object.assign({
+      isHovered: isContainerHovered,
+      isFocused: isContainerFocused,
+      tabIndex: null,
+      onKeyDown: onSelectKeyDown
+    }, selectProps, {
+      ref: selectRef => {
+        popperReference(selectRef);
+        mergeRefs([triggerRef, ref])(selectRef);
+        popperReferenceElementRef.current = selectRef;
+      }
+    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
+      isHovered: isHovered || isLabelHovered && !isOpen,
+      isFocused: isContainerFocused,
+      isDisabled: props.disabled
+    }, start), !isOpen && React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
+      isHidden: !isOpen,
+      disabled: props.disabled,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+      },
+      onClick: e => {
+        if (isOpen) {
+          e.nativeEvent.preventDownshiftDefault = true;
+        }
+      },
+      role: 'combobox',
+      ref: mergeRefs([inputRef, controlledInputRef || null])
+    })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
+      isHovered: isHovered || isLabelHovered && !isOpen,
+      isFocused: isContainerFocused,
+      isDisabled: props.disabled,
+      isRotated: isOpen
+    }, React__default.createElement(SvgChevronDownStroke, null)));
+  });
+});
+Autocomplete.displayName = 'Autocomplete';
+Autocomplete.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  disabled: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  validation: PropTypes.oneOf(VALIDATION)
+};
+
+export { Autocomplete };

package/dist/esm/elements/Combobox/Combobox.js

@@ -0,0 +1,106 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Reference } from 'react-popper';
+import { KEY_CODES } from '@zendeskgarden/container-utilities';
+import { MediaInput, VALIDATION } from '@zendeskgarden/react-forms';
+import { mergeRefs } from 'react-merge-refs';
+import useDropdownContext from '../../utils/useDropdownContext.js';
+
+const Combobox = forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    isBare,
+    disabled,
+    focusInset,
+    placeholder,
+    validation,
+    inputRef: inputRefProp = null,
+    start,
+    end,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    downshift: {
+      getToggleButtonProps,
+      getInputProps,
+      getRootProps,
+      isOpen
+    },
+    setDropdownType
+  } = useDropdownContext();
+  const wrapperRef = useRef();
+  const inputRef = useRef();
+  const isOpenRef = useRef(isOpen);
+  const wrapperProps = getToggleButtonProps(getRootProps({
+    role: null,
+    type: null,
+    onClick: event => {
+      event.nativeEvent.preventDownshiftDefault = true;
+    },
+    ...props,
+    onKeyDown: event => {
+      event.nativeEvent.preventDownshiftDefault = true;
+    }
+  }));
+  const inputProps = getInputProps({
+    isCompact,
+    isBare,
+    disabled,
+    focusInset,
+    placeholder,
+    validation,
+    start,
+    end,
+    role: 'combobox',
+    onKeyDown: event => {
+      if (event.keyCode === KEY_CODES.SPACE || !isOpen && [KEY_CODES.DOWN, KEY_CODES.UP].includes(event.keyCode)) {
+        event.nativeEvent.preventDownshiftDefault = true;
+      }
+    },
+    onClick: event => {
+      event.nativeEvent.preventDownshiftDefault = true;
+    }
+  });
+  useEffect(() => {
+    if (inputRef.current && isOpen !== isOpenRef.current) {
+      inputRef.current.focus();
+    }
+    isOpenRef.current = isOpen;
+  }, [inputRef, isOpen]);
+  useEffect(() => {
+    setDropdownType('combobox');
+  }, [setDropdownType]);
+  return React__default.createElement(Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    const wrapperRefProp = element => {
+      popperReference(element);
+      mergeRefs([wrapperRef, ref])(element);
+      popperReferenceElementRef.current = element;
+    };
+    return React__default.createElement(MediaInput, Object.assign({}, inputProps, {
+      wrapperProps: wrapperProps,
+      wrapperRef: wrapperRefProp,
+      ref: mergeRefs([inputRef, inputRefProp])
+    }));
+  });
+});
+Combobox.displayName = 'Combobox';
+Combobox.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  disabled: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  placeholder: PropTypes.string,
+  validation: PropTypes.oneOf(VALIDATION)
+};
+
+export { Combobox };

package/dist/esm/elements/Dropdown/Dropdown.js

@@ -0,0 +1,178 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useRef, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import Downshift from 'downshift';
+import { Manager } from 'react-popper';
+import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
+import { DropdownContext } from '../../utils/useDropdownContext.js';
+
+const REMOVE_ITEM_STATE_TYPE = 'REMOVE_ITEM';
+const Dropdown = props => {
+  const {
+    children,
+    isOpen,
+    selectedItem,
+    selectedItems,
+    highlightedIndex,
+    inputValue,
+    onSelect,
+    onStateChange,
+    onInputValueChange,
+    downshiftProps
+  } = props;
+  const itemIndexRef = useRef(0);
+  const previousItemRef = useRef(undefined);
+  const previousIndexRef = useRef(undefined);
+  const nextItemsHashRef = useRef({});
+  const containsMultiselectRef = useRef(false);
+  const itemSearchRegistry = useRef([]);
+  const [dropdownType, setDropdownType] = useState('');
+  const {
+    rtl
+  } = useContext(ThemeContext);
+  const hasMenuRef = useRef(false);
+  const popperReferenceElementRef = useRef(null);
+  const customGetInputProps = (_ref, downshift) => {
+    let {
+      onKeyDown,
+      ...other
+    } = _ref;
+    return {
+      onKeyDown: composeEventHandlers(onKeyDown, e => {
+        const PREVIOUS_KEY = rtl ? KEY_CODES.RIGHT : KEY_CODES.LEFT;
+        const NEXT_KEY = rtl ? KEY_CODES.LEFT : KEY_CODES.RIGHT;
+        if (downshift.isOpen) {
+          if (e.keyCode === PREVIOUS_KEY && previousIndexRef.current !== null && previousIndexRef.current !== undefined && !downshift.inputValue) {
+            e.preventDefault();
+            e.stopPropagation();
+            downshift.selectItemAtIndex(previousIndexRef.current);
+          }
+          if (e.keyCode === NEXT_KEY) {
+            const nextItemIndexes = Object.values(nextItemsHashRef.current);
+            if (nextItemIndexes.includes(downshift.highlightedIndex)) {
+              e.preventDefault();
+              e.stopPropagation();
+              downshift.selectItemAtIndex(downshift.highlightedIndex);
+            }
+          }
+        } else if ((e.keyCode === KEY_CODES.ENTER || e.keyCode === KEY_CODES.SPACE) && !downshift.isOpen && dropdownType !== 'combobox') {
+          e.preventDefault();
+          e.stopPropagation();
+          downshift.openMenu();
+        }
+      }),
+      ...other
+    };
+  };
+  const transformDownshift = _ref2 => {
+    let {
+      getInputProps,
+      getToggleButtonProps,
+      ...downshift
+    } = _ref2;
+    return {
+      getInputProps: p => getInputProps(customGetInputProps(p, downshift)),
+      getToggleButtonProps: p => getToggleButtonProps({
+        'aria-label': undefined,
+        ...p
+      }),
+      ...downshift
+    };
+  };
+  return React__default.createElement(Manager, null, React__default.createElement(Downshift, Object.assign({
+    suppressRefError: true
+    ,
+    isOpen: isOpen,
+    highlightedIndex: highlightedIndex,
+    selectedItem: selectedItem || null
+    ,
+    inputValue: inputValue,
+    onInputValueChange: (inputVal, stateAndHelpers) => {
+      if (onInputValueChange) {
+        if (stateAndHelpers.isOpen) {
+          onInputValueChange(inputVal, stateAndHelpers);
+        } else if (dropdownType === 'multiselect') {
+          onInputValueChange('', stateAndHelpers);
+        }
+      }
+    },
+    onStateChange: (changes, stateAndHelpers) => {
+      if (dropdownType === 'autocomplete' && changes.isOpen === false && !changes.selectedItem) {
+        onSelect && onSelect(selectedItem, stateAndHelpers);
+      }
+      if (Object.prototype.hasOwnProperty.call(changes, 'selectedItem') && changes.selectedItem !== null) {
+        if (selectedItems) {
+          const {
+            itemToString
+          } = stateAndHelpers;
+          const existingItemIndex = selectedItems.findIndex(item => {
+            return itemToString(item) === itemToString(changes.selectedItem);
+          });
+          const updatedSelectedItems = Array.from(selectedItems);
+          if (existingItemIndex === -1) {
+            updatedSelectedItems.splice(updatedSelectedItems.length, 0, changes.selectedItem);
+          } else {
+            updatedSelectedItems.splice(existingItemIndex, 1);
+          }
+          changes.selectedItems = updatedSelectedItems;
+          delete changes.selectedItem;
+          onSelect && onSelect(updatedSelectedItems, stateAndHelpers);
+        } else {
+          onSelect && onSelect(changes.selectedItem, stateAndHelpers);
+        }
+        if (dropdownType === 'multiselect') {
+          stateAndHelpers.setState({
+            inputValue: ''
+          });
+        }
+      }
+      onStateChange && onStateChange(changes, stateAndHelpers);
+    },
+    stateReducer: (_state, changes) => {
+      switch (changes.type) {
+        case Downshift.stateChangeTypes.changeInput:
+          if (changes.inputValue === '' && dropdownType === 'combobox') {
+            return {
+              ...changes,
+              isOpen: false
+            };
+          }
+          return changes;
+        default:
+          return changes;
+      }
+    }
+  }, downshiftProps), downshift => React__default.createElement(DropdownContext.Provider, {
+    value: {
+      hasMenuRef,
+      itemIndexRef,
+      previousItemRef,
+      previousIndexRef,
+      nextItemsHashRef,
+      popperReferenceElementRef,
+      selectedItems,
+      downshift: transformDownshift(downshift),
+      containsMultiselectRef,
+      itemSearchRegistry,
+      setDropdownType
+    }
+  }, children)));
+};
+Dropdown.propTypes = {
+  isOpen: PropTypes.bool,
+  selectedItem: PropTypes.any,
+  selectedItems: PropTypes.arrayOf(PropTypes.any),
+  highlightedIndex: PropTypes.number,
+  inputValue: PropTypes.string,
+  onSelect: PropTypes.func,
+  onStateChange: PropTypes.func,
+  downshiftProps: PropTypes.object
+};
+
+export { Dropdown, REMOVE_ITEM_STATE_TYPE };

package/dist/esm/elements/Fields/Field.js

@@ -0,0 +1,35 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useState, useMemo } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+import { Field as Field$1 } from '@zendeskgarden/react-forms';
+import useDropdownContext from '../../utils/useDropdownContext.js';
+import { FieldContext } from '../../utils/useFieldContext.js';
+
+const Field = forwardRef((props, fieldRef) => {
+  const {
+    downshift: {
+      getRootProps
+    }
+  } = useDropdownContext();
+  const [isLabelHovered, setIsLabelHovered] = useState(false);
+  const {
+    ref
+  } = getRootProps();
+  const value = useMemo(() => ({
+    isLabelHovered,
+    setIsLabelHovered
+  }), [isLabelHovered, setIsLabelHovered]);
+  return React__default.createElement(FieldContext.Provider, {
+    value: value
+  }, React__default.createElement(Field$1, Object.assign({
+    ref: mergeRefs([ref, fieldRef])
+  }, props)));
+});
+Field.displayName = 'Field';
+
+export { Field };

package/dist/esm/elements/Fields/Hint.js

@@ -0,0 +1,15 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import { Hint as Hint$1 } from '@zendeskgarden/react-forms';
+
+const Hint = React__default.forwardRef((props, ref) => React__default.createElement(Hint$1, Object.assign({
+  ref: ref
+}, props)));
+Hint.displayName = 'Hint';
+
+export { Hint };

package/dist/esm/elements/Fields/Label.js

@@ -0,0 +1,46 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { Label as Label$1 } from '@zendeskgarden/react-forms';
+import useDropdownContext from '../../utils/useDropdownContext.js';
+import useFieldContext from '../../utils/useFieldContext.js';
+
+const Label = React__default.forwardRef((_ref, ref) => {
+  let {
+    onMouseEnter,
+    onMouseLeave,
+    ...other
+  } = _ref;
+  const {
+    downshift: {
+      getLabelProps
+    }
+  } = useDropdownContext();
+  const {
+    setIsLabelHovered
+  } = useFieldContext();
+  const labelProps = getLabelProps({
+    onMouseEnter: composeEventHandlers(onMouseEnter, () => {
+      setIsLabelHovered(true);
+    }),
+    onMouseLeave: composeEventHandlers(onMouseLeave, () => {
+      setIsLabelHovered(false);
+    }),
+    ...other
+  });
+  return React__default.createElement(Label$1, Object.assign({
+    ref: ref
+  }, labelProps));
+});
+Label.displayName = 'Label';
+Label.propTypes = {
+  isRegular: PropTypes.bool
+};
+
+export { Label };

package/dist/esm/elements/Fields/Message.js

@@ -0,0 +1,19 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { Message as Message$1, VALIDATION } from '@zendeskgarden/react-forms';
+
+const Message = React__default.forwardRef((props, ref) => React__default.createElement(Message$1, Object.assign({
+  ref: ref
+}, props)));
+Message.displayName = 'Message';
+Message.propTypes = {
+  validation: PropTypes.oneOf(VALIDATION)
+};
+
+export { Message };

package/dist/esm/elements/Menu/Items/AddItem.js

@@ -0,0 +1,66 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import SvgPlusStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js';
+import { Item } from './Item.js';
+import '../../../styled/menu/StyledMenu.js';
+import '../../../styled/menu/StyledMenuWrapper.js';
+import '../../../styled/menu/StyledSeparator.js';
+import { StyledAddItem } from '../../../styled/items/StyledAddItem.js';
+import '../../../styled/items/StyledItem.js';
+import '../../../styled/items/StyledItemMeta.js';
+import '../../../styled/items/StyledNextItem.js';
+import '../../../styled/items/StyledNextIcon.js';
+import '../../../styled/items/StyledPreviousItem.js';
+import '../../../styled/items/StyledPreviousIcon.js';
+import { StyledItemIcon } from '../../../styled/items/StyledItemIcon.js';
+import '../../../styled/items/header/StyledHeaderIcon.js';
+import '../../../styled/items/header/StyledHeaderItem.js';
+import '../../../styled/items/media/StyledMediaBody.js';
+import '../../../styled/items/media/StyledMediaFigure.js';
+import '../../../styled/items/media/StyledMediaItem.js';
+import '../../../styled/select/StyledFauxInput.js';
+import '../../../styled/select/StyledInput.js';
+import '../../../styled/select/StyledSelect.js';
+import '../../../styled/multiselect/StyledMultiselectInput.js';
+import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useMenuContext from '../../../utils/useMenuContext.js';
+
+const AddItemComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    disabled,
+    ...props
+  } = _ref;
+  const {
+    isCompact
+  } = useMenuContext();
+  return React__default.createElement(StyledAddItem, Object.assign({
+    ref: ref,
+    disabled: disabled
+  }, props), React__default.createElement(StyledItemIcon, {
+    isCompact: isCompact,
+    isVisible: true,
+    isDisabled: disabled
+  }, React__default.createElement(SvgPlusStroke, null)), children);
+});
+const AddItem = React__default.forwardRef((props, ref) => React__default.createElement(Item, Object.assign({
+  component: AddItemComponent,
+  ref: ref
+}, props, {
+  hasIcon: true
+})));
+AddItem.displayName = 'AddItem';
+AddItem.propTypes = {
+  value: PropTypes.any,
+  disabled: PropTypes.bool
+};
+
+export { AddItem };

package/dist/esm/elements/Menu/Items/HeaderIcon.js

@@ -0,0 +1,44 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import '../../../styled/menu/StyledMenu.js';
+import '../../../styled/menu/StyledMenuWrapper.js';
+import '../../../styled/menu/StyledSeparator.js';
+import '../../../styled/items/StyledAddItem.js';
+import '../../../styled/items/StyledItem.js';
+import '../../../styled/items/StyledItemMeta.js';
+import '../../../styled/items/StyledNextItem.js';
+import '../../../styled/items/StyledNextIcon.js';
+import '../../../styled/items/StyledPreviousItem.js';
+import '../../../styled/items/StyledPreviousIcon.js';
+import '../../../styled/items/StyledItemIcon.js';
+import { StyledHeaderIcon } from '../../../styled/items/header/StyledHeaderIcon.js';
+import '../../../styled/items/header/StyledHeaderItem.js';
+import '../../../styled/items/media/StyledMediaBody.js';
+import '../../../styled/items/media/StyledMediaFigure.js';
+import '../../../styled/items/media/StyledMediaItem.js';
+import '../../../styled/select/StyledFauxInput.js';
+import '../../../styled/select/StyledInput.js';
+import '../../../styled/select/StyledSelect.js';
+import '../../../styled/multiselect/StyledMultiselectInput.js';
+import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useMenuContext from '../../../utils/useMenuContext.js';
+
+const HeaderIcon = React__default.forwardRef((props, ref) => {
+  const {
+    isCompact
+  } = useMenuContext();
+  return React__default.createElement(StyledHeaderIcon, Object.assign({
+    ref: ref,
+    isCompact: isCompact
+  }, props));
+});
+HeaderIcon.displayName = 'HeaderIcon';
+
+export { HeaderIcon };