@carbon/react
Version:
React components for the Carbon Design System
621 lines (619 loc) • 24.9 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_keys = require("../../internal/keyboard/keys.js");
const require_match = require("../../internal/keyboard/match.js");
const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
const require_useId = require("../../internal/useId.js");
const require_deprecate = require("../../prop-types/deprecate.js");
const require_defaultItemToString = require("../../internal/defaultItemToString.js");
const require_utils = require("../../internal/utils.js");
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
const require_index = require("../AILabel/index.js");
const require_index$1 = require("../Checkbox/index.js");
const require_ListBoxPropTypes = require("../ListBox/ListBoxPropTypes.js");
const require_FormContext = require("../FluidForm/FormContext.js");
const require_index$2 = require("../ListBox/index.js");
const require_ListBoxSelection = require("../ListBox/next/ListBoxSelection.js");
const require_ListBoxTrigger = require("../ListBox/next/ListBoxTrigger.js");
const require_mergeRefs = require("../../tools/mergeRefs.js");
const require_filter = require("./filter.js");
const require_MultiSelectPropTypes = require("./MultiSelectPropTypes.js");
const require_sorting = require("./tools/sorting.js");
const require_Selection = require("../../internal/Selection.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@carbon/icons-react");
let _floating_ui_react = require("@floating-ui/react");
let downshift = require("downshift");
downshift = require_runtime.__toESM(downshift);
let react_fast_compare = require("react-fast-compare");
react_fast_compare = require_runtime.__toESM(react_fast_compare);
//#region src/components/MultiSelect/FilterableMultiSelect.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
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;
const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSelect({ autoAlign = false, className: containerClassName, clearSelectionDescription = "Total items selected: ", clearSelectionText = "To clear selection, press Delete or Backspace", compareItems = require_sorting.defaultCompareItems, decorator, direction = "bottom", disabled = false, downshiftProps, filterItems = require_filter.defaultFilterItems, helperText, hideLabel, id, initialSelectedItems = [], invalid = false, invalidText, items, itemToElement: ItemToElement, itemToString = require_defaultItemToString.defaultItemToString, light, locale = "en", onInputValueChange, open = false, onChange, onMenuChange, placeholder, readOnly, titleText, type, selectionFeedback = "top-after-reopen", selectedItems: selected, size, sortItems = require_sorting.defaultSortItems, translateWithId, useTitleInItem, warn = false, warnText, slug, inputProps }, ref) {
const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
const isFirstRender = (0, react.useRef)(true);
const [isOpen, setIsOpen] = (0, react.useState)(!!open);
const [inputValue, setInputValue] = (0, react.useState)("");
const [topItems, setTopItems] = (0, react.useState)(initialSelectedItems ?? []);
const [inputFocused, setInputFocused] = (0, react.useState)(false);
const filteredItems = (0, react.useMemo)(() => filterItems(items, {
itemToString,
inputValue
}), [
items,
inputValue,
itemToString,
filterItems
]);
const nonSelectAllItems = (0, react.useMemo)(() => filteredItems.filter((item) => !item.isSelectAll), [filteredItems]);
const selectAll = filteredItems.some((item) => item.isSelectAll);
const { selectedItems: controlledSelectedItems, onItemChange, clearSelection, toggleAll } = require_Selection.useSelection({
disabled,
initialSelectedItems,
onChange,
selectedItems: selected,
selectAll,
filteredItems
});
const selectAllStatus = (0, react.useMemo)(() => {
const selectable = nonSelectAllItems.filter((item) => !item.disabled);
const nonSelectedCount = selectable.filter((item) => !controlledSelectedItems.some((sel) => (0, react_fast_compare.default)(sel, item))).length;
const totalCount = selectable.length;
return {
checked: totalCount > 0 && nonSelectedCount === 0,
indeterminate: nonSelectedCount > 0 && nonSelectedCount < totalCount
};
}, [controlledSelectedItems, nonSelectAllItems]);
const handleSelectAllClick = (0, react.useCallback)(() => {
const selectable = nonSelectAllItems.filter((i) => !i.disabled);
const { checked, indeterminate } = selectAllStatus;
if (checked || indeterminate) toggleAll(controlledSelectedItems.filter((sel) => !filteredItems.some((e) => (0, react_fast_compare.default)(e, sel))));
else {
const toSelect = selectable.filter((e) => !controlledSelectedItems.some((sel) => (0, react_fast_compare.default)(sel, e)));
toggleAll([...controlledSelectedItems, ...toSelect]);
}
}, [
nonSelectAllItems,
selectAllStatus,
controlledSelectedItems,
toggleAll
]);
const { refs, floatingStyles, middlewareData } = (0, _floating_ui_react.useFloating)(autoAlign ? {
placement: direction,
strategy: "fixed",
middleware: [
(0, _floating_ui_react.flip)({ crossAxis: false }),
(0, _floating_ui_react.size)({ apply({ rects, elements }) {
Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
} }),
(0, _floating_ui_react.hide)()
],
whileElementsMounted: _floating_ui_react.autoUpdate
} : {});
require_useIsomorphicEffect.default(() => {
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 = (0, react.useRef)(null);
const filterableMultiSelectInstanceId = require_useId.useId();
const prefix = require_usePrefix.usePrefix();
(0, react.useEffect)(() => {
setIsOpen(open);
}, [open]);
const sortedItems = (0, react.useMemo)(() => {
const selectAllItem = items.find((item) => item.isSelectAll);
const selectableRealItems = nonSelectAllItems.filter((item) => !item.disabled);
const sortedReal = sortItems(nonSelectAllItems, {
selectedItems: {
top: controlledSelectedItems,
fixed: [],
"top-after-reopen": topItems
}[selectionFeedback],
itemToString,
compareItems,
locale
});
if (selectAllItem && selectableRealItems.length > 0) return [selectAllItem, ...sortedReal];
return sortedReal;
}, [
items,
inputValue,
controlledSelectedItems,
topItems,
selectionFeedback,
itemToString,
compareItems,
locale,
sortItems,
nonSelectAllItems
]);
const normalizedProps = require_useNormalizedInputProps.useNormalizedInputProps({
id,
disabled,
readOnly,
invalid,
warn
});
const inline = type === "inline";
const showWarning = normalizedProps.warn;
const showHelperText = !normalizedProps.warn && !normalizedProps.invalid;
const wrapperClasses = (0, classnames.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 && normalizedProps.invalid,
[`${prefix}--list-box__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
[`${prefix}--list-box--up`]: direction === "top",
[`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && normalizedProps.invalid,
[`${prefix}--list-box__wrapper--slug`]: slug,
[`${prefix}--list-box__wrapper--decorator`]: decorator,
[`${prefix}--autoalign`]: autoAlign
});
const hasHelper = typeof helperText !== "undefined" && helperText !== null;
const helperId = !hasHelper ? void 0 : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
const labelId = `${id}-label`;
const titleClasses = (0, classnames.default)({
[`${prefix}--label`]: true,
[`${prefix}--label--disabled`]: disabled,
[`${prefix}--visually-hidden`]: hideLabel
});
const helperClasses = (0, classnames.default)({
[`${prefix}--form__helper-text`]: true,
[`${prefix}--form__helper-text--disabled`]: disabled
});
const inputClasses = (0, classnames.default)({
[`${prefix}--text-input`]: true,
[`${prefix}--text-input--empty`]: !inputValue,
[`${prefix}--text-input--light`]: light
});
const helper = hasHelper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
id: helperId,
className: helperClasses,
children: helperText
});
const menuId = `${id}__menu`;
const inputId = `${id}-input`;
(0, react.useEffect)(() => {
if (!isOpen) setTopItems(controlledSelectedItems);
}, [
controlledSelectedItems,
isOpen,
setTopItems
]);
const validateHighlightFocus = () => {
if (controlledSelectedItems.length > 0) setHighlightedIndex(0);
};
function handleMenuChange(forceIsOpen) {
if (!readOnly) {
setIsOpen(forceIsOpen ?? !isOpen);
validateHighlightFocus();
}
}
(0, react.useEffect)(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
if (open) onMenuChange?.(isOpen);
} else onMenuChange?.(isOpen);
}, [
isOpen,
onMenuChange,
open
]);
(0, react.useEffect)(() => {
const handleClickOutside = (event) => {
const target = event.target;
if (!(target instanceof Node)) return;
const wrapper = document.getElementById(id)?.closest(`.${prefix}--multi-select__wrapper`);
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 } = (0, downshift.useCombobox)({
isOpen,
items: sortedItems,
itemToString,
id,
labelId,
menuId,
inputId,
inputValue,
stateReducer,
isItemDisabled(item) {
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 (sortedItems.length === 0) return changes;
if (changes.selectedItem && changes.selectedItem.disabled !== true) if (changes.selectedItem.isSelectAll) handleSelectAllClick();
else onItemChange(changes.selectedItem);
setHighlightedIndex(changes.selectedItem);
return {
...changes,
highlightedIndex: state.highlightedIndex
};
case ItemClick:
if (changes.selectedItem.isSelectAll) handleSelectAllClick();
else 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: controlledSelectedItems.length > 0 ? 0 : -1
};
case InputChange:
if (onInputValueChange) onInputValueChange(changes);
setInputValue(changes.inputValue ?? "");
setIsOpen(true);
return {
...changes,
highlightedIndex: 0
};
case InputClick:
setIsOpen(changes.isOpen || false);
validateHighlightFocus();
if (changes.isOpen && !changes.selectedItem) return { ...changes };
return {
...changes,
isOpen: false,
highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
};
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 } = (0, downshift.useMultipleSelection)({
activeIndex: highlightedIndex,
initialSelectedItems,
selectedItems: controlledSelectedItems,
onStateChange(changes) {
switch (changes.type) {
case SelectedItemKeyDownBackspace:
case SelectedItemKeyDownDelete:
case DropdownKeyDownBackspace:
case FunctionRemoveSelectedItem:
clearSelection();
break;
}
},
...downshiftProps
});
(0, react.useEffect)(() => {
if (isOpen && !isMenuOpen) openMenu();
});
function clearInputValue(event) {
const value = textInput.current?.value;
if (value?.length === 1 || event && "key" in event && require_match.match(event, require_keys.Escape)) setInputValue("");
else setInputValue(value ?? "");
if (textInput.current) textInput.current.focus();
}
const candidate = slug ?? decorator;
const candidateIsAILabel = require_utils.isComponentElement(candidate, require_index.AILabel);
const normalizedDecorator = candidateIsAILabel ? (0, react.cloneElement)(candidate, { size: "mini" }) : candidate;
const selectedItemsLength = controlledSelectedItems.filter((item) => !item.isSelectAll).length;
const className = (0, classnames.default)(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
[`${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,
[`${prefix}--multi-select--selectall`]: selectAll
});
const labelProps = getLabelProps();
const buttonProps = getToggleButtonProps({
disabled,
onClick: () => {
handleMenuChange(!isOpen);
textInput.current?.focus();
},
onMouseUp(event) {
if (isOpen) event.stopPropagation();
}
});
const inputProp = getInputProps(getDropdownProps({
"aria-controls": isOpen ? menuId : void 0,
"aria-describedby": helperText && showHelperText ? helperId : void 0,
"aria-haspopup": "listbox",
"aria-labelledby": void 0,
disabled,
placeholder,
preventKeyAction: isOpen,
...inputProps,
onClick: () => handleMenuChange(true),
onKeyDown(event) {
const $input = event.target;
const $value = $input.value;
if (require_match.match(event, require_keys.Space)) event.stopPropagation();
if (require_match.match(event, require_keys.Enter)) handleMenuChange(true);
if (!disabled) {
if (require_match.match(event, require_keys.Delete) || require_match.match(event, require_keys.Escape)) {
if (isOpen) {
handleMenuChange(true);
clearInputValue(event);
event.stopPropagation();
} else if (!isOpen) {
clearInputValue(event);
clearSelection();
event.stopPropagation();
}
}
}
if (require_match.match(event, require_keys.Tab)) handleMenuChange(false);
if (require_match.match(event, require_keys.Home)) $input.setSelectionRange(0, 0);
if (require_match.match(event, require_keys.End)) $input.setSelectionRange($value.length, $value.length);
},
onFocus: () => setInputFocused(true),
onBlur: () => {
setInputFocused(false);
setInputValue("");
}
}));
const menuProps = (0, react.useMemo)(() => getMenuProps({
ref: autoAlign ? refs.setFloating : null,
hidden: !isOpen
}, { suppressRefError: true }), [
autoAlign,
getMenuProps,
isOpen,
refs.setFloating
]);
const mergedRef = require_mergeRefs.mergeRefs(textInput, inputProp.ref);
const readOnlyEventHandlers = readOnly ? {
onClick: (evt) => {
evt.preventDefault();
if (textInput.current) textInput.current.focus();
},
onKeyDown: (evt) => {
if ([
"ArrowDown",
"ArrowUp",
" ",
"Enter"
].includes(evt.key)) evt.preventDefault();
}
} : {};
const clearSelectionContent = controlledSelectedItems.length > 0 ? `${clearSelectionDescription} ${controlledSelectedItems.length}. ${clearSelectionText}.` : `${clearSelectionDescription} 0.`;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: wrapperClasses,
children: [
titleText ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
className: titleClasses,
...labelProps,
children: [titleText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${prefix}--visually-hidden`,
children: clearSelectionContent
})]
}) : null,
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$2.default, {
className,
disabled,
light,
ref,
id,
invalid: normalizedProps.invalid,
invalidText,
warn: normalizedProps.warn,
warnText,
isOpen: !readOnly && isOpen,
size,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--list-box__field`,
ref: autoAlign ? refs.setReference : null,
children: [
controlledSelectedItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListBoxSelection.default, {
readOnly,
clearSelection: () => {
clearSelection();
if (textInput.current) textInput.current.focus();
},
selectionCount: selectedItemsLength,
translateWithId,
disabled
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
className: inputClasses,
...inputProp,
ref: mergedRef,
...readOnlyEventHandlers,
readOnly
}),
normalizedProps.invalid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--list-box__invalid-icon` }),
showWarning && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningAltFilled, { className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning` }),
inputValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListBoxSelection.default, {
clearSelection: clearInputValue,
disabled,
translateWithId,
readOnly,
onMouseUp: (event) => {
event.stopPropagation();
}
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListBoxTrigger.default, {
...buttonProps,
isOpen,
translateWithId
})
]
}),
slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--list-box__inner-wrapper--decorator`,
children: candidateIsAILabel ? normalizedDecorator : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: normalizedDecorator })
}) : "",
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default.Menu, {
...menuProps,
children: isOpen ? sortedItems.map((item, index) => {
let isChecked;
let isIndeterminate = false;
if (item.isSelectAll) {
isChecked = selectAllStatus.checked;
isIndeterminate = selectAllStatus.indeterminate;
} else isChecked = controlledSelectedItems.filter((selected) => (0, react_fast_compare.default)(selected, item)).length > 0;
const itemProps = getItemProps({
item,
["aria-selected"]: isChecked
});
const itemText = itemToString(item);
const disabled = itemProps["aria-disabled"];
const { "aria-disabled": unusedAriaDisabled, ...modifiedItemProps } = itemProps;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default.MenuItem, {
"aria-label": itemText,
"aria-checked": isIndeterminate ? "mixed" : isChecked,
isActive: isChecked && !item["isSelectAll"],
isHighlighted: highlightedIndex === index,
title: itemText,
disabled,
...modifiedItemProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--checkbox-wrapper`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
id: `${itemProps.id}-item`,
labelText: ItemToElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemToElement, { ...item }, itemProps.id) : itemText,
checked: isChecked,
title: useTitleInItem ? itemText : void 0,
indeterminate: isIndeterminate,
disabled,
tabIndex: -1
})
})
}, itemProps.id);
}) : null
})
]
}),
!inline && showHelperText ? helper : null
]
});
});
FilterableMultiSelect.displayName = "FilterableMultiSelect";
FilterableMultiSelect.propTypes = {
["aria-label"]: require_deprecate.deprecate(prop_types.default.string, "ariaLabel / aria-label props are no longer required for FilterableMultiSelect"),
ariaLabel: require_deprecate.deprecate(prop_types.default.string, "ariaLabel / aria-label props are no longer required for FilterableMultiSelect"),
autoAlign: prop_types.default.bool,
clearSelectionDescription: prop_types.default.string,
clearSelectionText: prop_types.default.string,
decorator: prop_types.default.node,
filterItems: prop_types.default.func,
direction: prop_types.default.oneOf(["top", "bottom"]),
disabled: prop_types.default.bool,
downshiftProps: prop_types.default.shape(downshift.default.propTypes),
hideLabel: prop_types.default.bool,
id: prop_types.default.string.isRequired,
initialSelectedItems: prop_types.default.array,
invalid: prop_types.default.bool,
invalidText: prop_types.default.node,
itemToElement: prop_types.default.func,
itemToString: prop_types.default.func,
items: prop_types.default.array.isRequired,
light: require_deprecate.deprecate(prop_types.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."),
locale: prop_types.default.string,
onChange: prop_types.default.func,
onInputValueChange: prop_types.default.func,
onMenuChange: prop_types.default.func,
open: prop_types.default.bool,
placeholder: prop_types.default.string,
selectionFeedback: prop_types.default.oneOf([
"top",
"fixed",
"top-after-reopen"
]),
size: require_ListBoxPropTypes.ListBoxSizePropType,
slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
...require_MultiSelectPropTypes.sortingPropTypes,
titleText: prop_types.default.node,
translateWithId: prop_types.default.func,
type: require_ListBoxPropTypes.ListBoxTypePropType,
useTitleInItem: prop_types.default.bool,
warn: prop_types.default.bool,
warnText: prop_types.default.node,
inputProps: prop_types.default.object
};
//#endregion
exports.FilterableMultiSelect = FilterableMultiSelect;