@carbon/react
Version:
React components for the Carbon Design System
834 lines (819 loc) • 29.9 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var iconsReact = require('@carbon/icons-react');
var cx = require('classnames');
var Downshift = require('downshift');
var isEqual = require('react-fast-compare');
var PropTypes = require('prop-types');
var React = require('react');
var filter = require('./filter.js');
var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
var index$1 = require('../ListBox/index.js');
var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
var keys = require('../../internal/keyboard/keys.js');
var match = require('../../internal/keyboard/match.js');
var itemToString = require('./tools/itemToString.js');
var mergeRefs = require('../../tools/mergeRefs.js');
var deprecate = require('../../prop-types/deprecate.js');
var useId = require('../../internal/useId.js');
var sorting = require('./tools/sorting.js');
var usePrefix = require('../../internal/usePrefix.js');
require('../FluidForm/FluidForm.js');
var FormContext = require('../FluidForm/FormContext.js');
var Selection = require('../../internal/Selection.js');
var react = require('@floating-ui/react');
var index = require('../AILabel/index.js');
var utils = require('../../internal/utils.js');
var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const {
InputBlur,
InputKeyDownEnter,
ItemClick,
MenuMouseLeave,
InputKeyDownArrowUp,
InputKeyDownArrowDown,
ItemMouseMove,
InputClick,
ToggleButtonClick,
FunctionToggleMenu,
InputChange,
InputKeyDownEscape,
FunctionSetHighlightedIndex
} = Downshift.useCombobox.stateChangeTypes;
const {
SelectedItemKeyDownBackspace,
SelectedItemKeyDownDelete,
DropdownKeyDownBackspace,
FunctionRemoveSelectedItem
} = Downshift.useMultipleSelection.stateChangeTypes;
/**
* Message ids that will be passed to translateWithId().
* Combination of message ids from ListBox/next/ListBoxSelection.js and
* ListBox/next/ListBoxTrigger.js, but we can't access those values directly
* because those components aren't Typescript. (If you try, TranslationKey
* ends up just being defined as "string".)
*/
const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableMultiSelect({
autoAlign = false,
className: containerClassName,
clearSelectionDescription = 'Total items selected: ',
clearSelectionText = 'To clear selection, press Delete or Backspace',
compareItems = sorting.defaultCompareItems,
decorator,
direction = 'bottom',
disabled = false,
downshiftProps,
filterItems = filter.defaultFilterItems,
helperText,
hideLabel,
id,
initialSelectedItems = [],
invalid,
invalidText,
items,
itemToElement: ItemToElement,
// needs to be capitalized for react to render it correctly
itemToString: itemToString$1 = itemToString.defaultItemToString,
light,
locale = 'en',
onInputValueChange,
open = false,
onChange,
onMenuChange,
placeholder,
readOnly,
titleText,
type,
selectionFeedback = 'top-after-reopen',
selectedItems: selected,
size,
sortItems = sorting.defaultSortItems,
translateWithId,
useTitleInItem,
warn,
warnText,
slug
}, ref) {
const {
isFluid
} = React.useContext(FormContext.FormContext);
const isFirstRender = React.useRef(true);
const [isFocused, setIsFocused] = React.useState(false);
const [isOpen, setIsOpen] = React.useState(!!open);
const [prevOpen, setPrevOpen] = React.useState(!!open);
const [inputValue, setInputValue] = React.useState('');
const [topItems, setTopItems] = React.useState(initialSelectedItems ?? []);
const [inputFocused, setInputFocused] = React.useState(false);
const {
selectedItems: controlledSelectedItems,
onItemChange,
clearSelection
} = Selection.useSelection({
disabled,
initialSelectedItems,
onChange,
selectedItems: selected
});
const {
refs,
floatingStyles,
middlewareData
} = react.useFloating(autoAlign ? {
placement: direction,
// The floating element is positioned relative to its nearest
// containing block (usually the viewport). It will in many cases also
// “break” the floating element out of a clipping ancestor.
// https://floating-ui.com/docs/misc#clipping
strategy: 'fixed',
// Middleware order matters, arrow should be last
middleware: [react.flip({
crossAxis: false
}), react.size({
apply({
rects,
elements
}) {
Object.assign(elements.floating.style, {
width: `${rects.reference.width}px`
});
}
}), react.hide()],
whileElementsMounted: react.autoUpdate
} : {});
React.useLayoutEffect(() => {
if (autoAlign) {
const updatedFloatingStyles = {
...floatingStyles,
visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
};
Object.keys(updatedFloatingStyles).forEach(style => {
if (refs.floating.current) {
refs.floating.current.style[style] = updatedFloatingStyles[style];
}
});
}
}, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
const textInput = React.useRef(null);
const filterableMultiSelectInstanceId = useId.useId();
const prefix = usePrefix.usePrefix();
if (prevOpen !== open) {
setIsOpen(open);
setPrevOpen(open);
}
// memoize sorted items to reduce unnecessary expensive sort on rerender
const sortedItems = React.useMemo(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return sortItems(filterItems(items, {
itemToString: itemToString$1,
inputValue
}), {
selectedItems: {
top: controlledSelectedItems,
fixed: [],
'top-after-reopen': topItems
}[selectionFeedback],
itemToString: itemToString$1,
compareItems,
locale
});
}, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString$1, compareItems, locale]);
const inline = type === 'inline';
const showWarning = !invalid && warn;
const wrapperClasses = cx__default["default"](`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
[`${prefix}--multi-select__wrapper--inline`]: inline,
[`${prefix}--list-box__wrapper--inline`]: inline,
[`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
[`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
[`${prefix}--list-box--up`]: direction === 'top',
[`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
[`${prefix}--list-box__wrapper--slug`]: slug,
[`${prefix}--list-box__wrapper--decorator`]: decorator,
[`${prefix}--autoalign`]: autoAlign
});
const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
const labelId = `${id}-label`;
const titleClasses = cx__default["default"]({
[`${prefix}--label`]: true,
[`${prefix}--label--disabled`]: disabled,
[`${prefix}--visually-hidden`]: hideLabel
});
const helperClasses = cx__default["default"]({
[`${prefix}--form__helper-text`]: true,
[`${prefix}--form__helper-text--disabled`]: disabled
});
const inputClasses = cx__default["default"]({
[`${prefix}--text-input`]: true,
[`${prefix}--text-input--empty`]: !inputValue,
[`${prefix}--text-input--light`]: light
});
const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
id: helperId,
className: helperClasses
}, helperText) : null;
const menuId = `${id}__menu`;
const inputId = `${id}-input`;
React.useEffect(() => {
if (!isOpen) {
setTopItems(controlledSelectedItems);
}
}, [controlledSelectedItems, isOpen, setTopItems]);
const validateHighlightFocus = () => {
if (controlledSelectedItems.length > 0) {
setHighlightedIndex(0);
}
};
function handleMenuChange(forceIsOpen) {
if (!readOnly) {
const nextIsOpen = forceIsOpen ?? !isOpen;
setIsOpen(nextIsOpen);
validateHighlightFocus();
}
}
React.useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
if (open) {
onMenuChange?.(isOpen);
}
} else {
onMenuChange?.(isOpen);
}
}, [isOpen, onMenuChange, open]);
React.useEffect(() => {
const handleClickOutside = event => {
const target = event.target;
const wrapper = document.getElementById(id)?.closest(`.${prefix}--multi-select__wrapper`);
// If click is outside our component and menu is open or input is focused
if (wrapper && !wrapper.contains(target)) {
if (isOpen || inputFocused) {
setIsOpen(false);
setInputFocused(false);
setInputValue('');
}
}
};
if (inputFocused || isOpen) {
document.addEventListener('mousedown', handleClickOutside);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [isOpen, inputFocused]);
const {
getToggleButtonProps,
getLabelProps,
getMenuProps,
getInputProps,
highlightedIndex,
setHighlightedIndex,
getItemProps,
openMenu,
isOpen: isMenuOpen
} = Downshift.useCombobox({
isOpen,
items: sortedItems,
// defaultHighlightedIndex: 0, // after selection, highlight the first item.
itemToString: itemToString$1,
id,
labelId,
menuId,
inputId,
inputValue,
stateReducer,
isItemDisabled(item, _index) {
return item?.disabled;
}
});
function stateReducer(state, actionAndChanges) {
const {
type,
props,
changes
} = actionAndChanges;
const {
highlightedIndex
} = changes;
if (changes.isOpen && !isOpen) {
setTopItems(controlledSelectedItems);
}
switch (type) {
case InputKeyDownEnter:
if (changes.selectedItem && changes.selectedItem.disabled !== true) {
onItemChange(changes.selectedItem);
}
setHighlightedIndex(changes.selectedItem);
return {
...changes,
highlightedIndex: state.highlightedIndex
};
case ItemClick:
if (changes.selectedItem) {
onItemChange(changes.selectedItem);
}
setHighlightedIndex(changes.selectedItem);
return changes;
case InputBlur:
case InputKeyDownEscape:
setIsOpen(false);
return changes;
case FunctionToggleMenu:
case ToggleButtonClick:
validateHighlightFocus();
if (changes.isOpen && !changes.selectedItem) {
return {
...changes
};
}
return {
...changes,
highlightedIndex: null
};
case InputChange:
if (onInputValueChange) {
onInputValueChange(changes.inputValue);
}
setInputValue(changes.inputValue ?? '');
setIsOpen(true);
return {
...changes,
highlightedIndex: 0
};
case InputClick:
validateHighlightFocus();
if (changes.isOpen && !changes.selectedItem) {
return {
...changes
};
}
return {
...changes,
isOpen: false,
highlightedIndex: null
};
case MenuMouseLeave:
return {
...changes,
highlightedIndex: state.highlightedIndex
};
case InputKeyDownArrowUp:
case InputKeyDownArrowDown:
if (InputKeyDownArrowDown === type && !isOpen) {
setIsOpen(true);
return {
...changes,
highlightedIndex: 0
};
}
if (highlightedIndex > -1) {
const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
props.scrollIntoView(itemArray[highlightedIndex]);
}
if (highlightedIndex === -1) {
return {
...changes,
highlightedIndex: 0
};
}
return changes;
case ItemMouseMove:
return {
...changes,
highlightedIndex: state.highlightedIndex
};
case FunctionSetHighlightedIndex:
if (!isOpen) {
return {
...changes,
highlightedIndex: 0
};
} else {
return {
...changes,
highlightedIndex: props.items.indexOf(highlightedIndex)
};
}
default:
return changes;
}
}
const {
getDropdownProps
} = Downshift.useMultipleSelection({
activeIndex: highlightedIndex,
initialSelectedItems,
selectedItems: controlledSelectedItems,
onStateChange(changes) {
switch (changes.type) {
case SelectedItemKeyDownBackspace:
case SelectedItemKeyDownDelete:
case DropdownKeyDownBackspace:
case FunctionRemoveSelectedItem:
{
clearSelection();
break;
}
}
},
...downshiftProps
});
React.useEffect(() => {
if (isOpen && !isMenuOpen) {
openMenu();
}
});
function clearInputValue(event) {
const value = textInput.current?.value;
if (value?.length === 1 || event && 'key' in event && match.match(event, keys.Escape)) {
setInputValue('');
} else {
setInputValue(value ?? '');
}
if (textInput.current) {
textInput.current.focus();
}
}
// AILabel always size `mini`
const candidate = slug ?? decorator;
const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
size: 'mini'
}) : null;
const className = cx__default["default"](`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
[`${prefix}--multi-select--invalid`]: invalid,
[`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
[`${prefix}--multi-select--open`]: isOpen,
[`${prefix}--multi-select--inline`]: inline,
[`${prefix}--multi-select--selected`]: controlledSelectedItems?.length > 0,
[`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
[`${prefix}--multi-select--readonly`]: readOnly
});
const labelProps = getLabelProps();
const buttonProps = getToggleButtonProps({
disabled,
onClick: () => {
handleMenuChange(!isOpen);
textInput.current?.focus();
},
// When we moved the "root node" of Downshift to the <input> for
// ARIA 1.2 compliance, we unfortunately hit this branch for the
// "mouseup" event that downshift listens to:
// https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
//
// As a result, it will reset the state of the component and so we
// stop the event from propagating to prevent this. This allows the
// toggleMenu behavior for the toggleButton to correctly open and
// close the menu.
onMouseUp(event) {
if (isOpen) {
event.stopPropagation();
}
}
});
const inputProps = getInputProps(getDropdownProps({
'aria-controls': isOpen ? menuId : undefined,
'aria-describedby': helperText ? helperId : undefined,
'aria-haspopup': 'listbox',
// Remove excess aria `aria-labelledby`. HTML <label for>
// provides this aria information.
'aria-labelledby': undefined,
disabled,
placeholder,
preventKeyAction: isOpen,
onClick: () => handleMenuChange(true),
onKeyDown(event) {
const $input = event.target;
const $value = $input.value;
if (match.match(event, keys.Space)) {
event.stopPropagation();
}
if (match.match(event, keys.Enter)) {
handleMenuChange(true);
}
if (!disabled) {
if (match.match(event, keys.Delete) || match.match(event, keys.Escape)) {
if (isOpen) {
handleMenuChange(true);
clearInputValue(event);
event.stopPropagation();
} else if (!isOpen) {
clearInputValue(event);
clearSelection();
event.stopPropagation();
}
}
}
if (match.match(event, keys.Tab)) {
handleMenuChange(false);
}
if (match.match(event, keys.Home)) {
$input.setSelectionRange(0, 0);
}
if (match.match(event, keys.End)) {
$input.setSelectionRange($value.length, $value.length);
}
},
onFocus: () => setInputFocused(true),
onBlur: () => {
!isOpen && setInputFocused(false);
setInputValue('');
}
}));
// Memoize the value of getMenuProps to avoid an infinite loop
const menuProps = React.useMemo(() => getMenuProps({
ref: autoAlign ? refs.setFloating : null
}, {
suppressRefError: true
}), [autoAlign, getMenuProps, refs.setFloating]);
const handleFocus = evt => {
if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
setIsFocused(false);
} else {
setIsFocused(evt?.type === 'focus' ? true : false);
}
};
const mergedRef = mergeRefs["default"](textInput, inputProps.ref);
const readOnlyEventHandlers = readOnly ? {
onClick: evt => {
// NOTE: does not prevent click
evt.preventDefault();
// focus on the element as per readonly input behavior
if (mergedRef.current !== undefined) {
mergedRef.current.focus();
}
},
onKeyDown: evt => {
const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
// This prevents the select from opening for the above keys
if (selectAccessKeys.includes(evt.key)) {
evt.preventDefault();
}
}
} : {};
const clearSelectionContent = controlledSelectedItems.length > 0 ? `${clearSelectionDescription} ${controlledSelectedItems.length}. ${clearSelectionText}.` : `${clearSelectionDescription} 0.`;
return /*#__PURE__*/React__default["default"].createElement("div", {
className: wrapperClasses
}, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
className: titleClasses
}, labelProps), titleText, /*#__PURE__*/React__default["default"].createElement("span", {
className: `${prefix}--visually-hidden`
}, clearSelectionContent)) : null, /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
onFocus: isFluid ? handleFocus : undefined,
onBlur: isFluid ? handleFocus : undefined,
className: className,
disabled: disabled,
light: light,
ref: ref,
id: id,
invalid: invalid,
invalidText: invalidText,
warn: warn,
warnText: warnText,
isOpen: !readOnly && isOpen,
size: size
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--list-box__field`,
ref: autoAlign ? refs.setReference : null
}, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
readOnly: readOnly,
clearSelection: () => {
clearSelection();
if (textInput.current) {
textInput.current.focus();
}
},
selectionCount: controlledSelectedItems.length,
translateWithId: translateWithId,
disabled: disabled
}), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
className: inputClasses
}, inputProps, {
ref: mergedRef
}, readOnlyEventHandlers, {
readOnly: readOnly
})), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
className: `${prefix}--list-box__invalid-icon`
}), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
}), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
clearSelection: clearInputValue,
disabled: disabled,
translateWithId: translateWithId,
readOnly: readOnly,
onMouseUp: event => {
// If we do not stop this event from propagating,
// it seems like Downshift takes our event and
// prevents us from getting `onClick` /
// `clearSelection` from the underlying <button> in
// ListBoxSelection
event.stopPropagation();
}
}), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
isOpen: isOpen,
translateWithId: translateWithId
}))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--list-box__inner-wrapper--decorator`
}, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
const isChecked = controlledSelectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
const itemProps = getItemProps({
item,
['aria-selected']: isChecked
});
const itemText = itemToString$1(item);
// The initial implementation using <Downshift> would place the disabled attribute
// on disabled menu items. Conversely, useCombobox places aria-disabled instead.
// To avoid any potential breaking changes, we avoid placing aria-disabled and
// instead match the old behavior of placing the disabled attribute.
const disabled = itemProps['aria-disabled'];
const {
'aria-disabled': unusedAriaDisabled,
// eslint-disable-line @typescript-eslint/no-unused-vars
...modifiedItemProps
} = itemProps;
return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
key: itemProps.id,
"aria-label": itemText,
isActive: isChecked,
isHighlighted: highlightedIndex === index,
title: itemText,
disabled: disabled
}, modifiedItemProps), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--checkbox-wrapper`
}, /*#__PURE__*/React__default["default"].createElement("span", {
title: useTitleInItem ? itemText : undefined,
className: `${prefix}--checkbox-label`,
"data-contained-checkbox-state": isChecked,
id: `${itemProps.id}-item`
}, ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
key: itemProps.id
}, item)) : itemText)));
}) : null)), !inline && !invalid && !warn ? helper : null);
});
FilterableMultiSelect.displayName = 'FilterableMultiSelect';
FilterableMultiSelect.propTypes = {
/**
* Deprecated, aria-label is no longer needed
* Specify a label to be read by screen readers on the container node
*/
['aria-label']: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
/**
* Deprecated, please use `aria-label` instead.
* Specify a label to be read by screen readers on the container note.
*/
ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
/**
* **Experimental**: Will attempt to automatically align the floating
* element to avoid collisions with the viewport and being clipped by
* ancestor elements.
*/
autoAlign: PropTypes__default["default"].bool,
/**
* Specify the text that should be read for screen readers that describes total items selected
*/
clearSelectionDescription: PropTypes__default["default"].string,
/**
* Specify the text that should be read for screen readers to clear selection.
*/
clearSelectionText: PropTypes__default["default"].string,
/**
* **Experimental**: Provide a decorator component to be rendered inside the `FilterableMultiSelect` component
*/
decorator: PropTypes__default["default"].node,
/**
* Specify the direction of the multiselect dropdown. Can be either top or bottom.
*/
direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
/**
* Disable the control
*/
disabled: PropTypes__default["default"].bool,
/**
* Additional props passed to Downshift.
*
* **Use with caution:** anything you define here overrides the components'
* internal handling of that prop. Downshift APIs and internals are subject to
* change, and in some cases they can not be shimmed by Carbon to shield you
* from potentially breaking changes.
*/
// @ts-ignore
downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
/**
* Specify whether the title text should be hidden or not
*/
hideLabel: PropTypes__default["default"].bool,
/**
* Specify a custom `id`
*/
id: PropTypes__default["default"].string.isRequired,
/**
* Allow users to pass in arbitrary items from their collection that are
* pre-selected
*/
initialSelectedItems: PropTypes__default["default"].array,
/**
* Is the current selection invalid?
*/
invalid: PropTypes__default["default"].bool,
/**
* If invalid, what is the error?
*/
invalidText: PropTypes__default["default"].node,
/**
* Function to render items as custom components instead of strings.
* Defaults to null and is overridden by a getter
*/
itemToElement: PropTypes__default["default"].func,
/**
* Helper function passed to downshift that allows the library to render a
* given item to a string label. By default, it extracts the `label` field
* from a given item to serve as the item label in the list.
*/
itemToString: PropTypes__default["default"].func,
/**
* We try to stay as generic as possible here to allow individuals to pass
* in a collection of whatever kind of data structure they prefer
*/
items: PropTypes__default["default"].array.isRequired,
/**
* `true` to use the light version.
*/
light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
/**
* Specify the locale of the control. Used for the default `compareItems`
* used for sorting the list of items in the control.
*/
locale: PropTypes__default["default"].string,
/**
* `onChange` is a utility for this controlled component to communicate to a
* consuming component what kind of internal state changes are occurring.
*/
onChange: PropTypes__default["default"].func,
/**
* `onInputValueChange` is a utility for this controlled component to communicate to
* the currently typed input.
*/
onInputValueChange: PropTypes__default["default"].func,
/**
* `onMenuChange` is a utility for this controlled component to communicate to a
* consuming component that the menu was opened(`true`)/closed(`false`).
*/
onMenuChange: PropTypes__default["default"].func,
/**
* Initialize the component with an open(`true`)/closed(`false`) menu.
*/
open: PropTypes__default["default"].bool,
/**
* Generic `placeholder` that will be used as the textual representation of
* what this field is for
*/
placeholder: PropTypes__default["default"].string,
/**
* Specify feedback (mode) of the selection.
* `top`: selected item jumps to top
* `fixed`: selected item stays at it's position
* `top-after-reopen`: selected item jump to top after reopen dropdown
*/
selectionFeedback: PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
/**
* Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
*/
size: ListBoxPropTypes.ListBoxSizePropType,
slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
...MultiSelectPropTypes.sortingPropTypes,
/**
* Provide text to be used in a `<label>` element that is tied to the
* combobox via ARIA attributes.
*/
titleText: PropTypes__default["default"].node,
/**
* Callback function for translating ListBoxMenuIcon SVG title
*/
translateWithId: PropTypes__default["default"].func,
type: ListBoxPropTypes.ListBoxTypePropType,
/**
* Specify title to show title on hover
*/
useTitleInItem: PropTypes__default["default"].bool,
/**
* Specify whether the control is currently in warning state
*/
warn: PropTypes__default["default"].bool,
/**
* Provide the text that is displayed when the control is in warning state
*/
warnText: PropTypes__default["default"].node
};
exports.FilterableMultiSelect = FilterableMultiSelect;