@carbon/react
Version:
React components for the Carbon Design System
640 lines (638 loc) • 27.1 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_Text = require("../Text/Text.js");
const require_keys = require("../../internal/keyboard/keys.js");
const require_match = require("../../internal/keyboard/match.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_index = require("../FeatureFlags/index.js");
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
const require_index$1 = require("../AILabel/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");
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");
let react_fast_compare = require("react-fast-compare");
react_fast_compare = require_runtime.__toESM(react_fast_compare);
//#region src/components/ComboBox/ComboBox.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, FunctionToggleMenu, ToggleButtonClick, ItemMouseMove, InputKeyDownArrowUp, InputKeyDownArrowDown, MenuMouseLeave, ItemClick, FunctionSelectItem } = downshift.useCombobox.stateChangeTypes;
const defaultShouldFilterItem = () => true;
const isDisabledItem = (item) => item !== null && typeof item === "object" && "disabled" in item && Boolean(item.disabled);
const autocompleteCustomFilter = ({ item, inputValue }) => {
if (inputValue === null || inputValue === "") return true;
const lowercaseItem = item.toLowerCase();
const lowercaseInput = inputValue.toLowerCase();
return lowercaseItem.startsWith(lowercaseInput);
};
const getInputValue = ({ initialSelectedItem, itemToString, selectedItem, prevSelectedItem }) => {
if (selectedItem !== null && typeof selectedItem !== "undefined") return itemToString(selectedItem);
if (typeof prevSelectedItem === "undefined" && initialSelectedItem !== null && typeof initialSelectedItem !== "undefined") return itemToString(initialSelectedItem);
return "";
};
const findHighlightedIndex = ({ items, itemToString = require_defaultItemToString.defaultItemToString }, inputValue) => {
if (!inputValue) return -1;
const searchValue = inputValue.toLowerCase();
for (let i = 0; i < items.length; i++) {
const item = itemToString(items[i]).toLowerCase();
if (!isDisabledItem(items[i]) && item.indexOf(searchValue) !== -1) return i;
}
return -1;
};
const ComboBox = (0, react.forwardRef)((props, ref) => {
const prevInputLengthRef = (0, react.useRef)(0);
const inputRef = (0, react.useRef)(null);
const { ["aria-label"]: ariaLabel = "Choose an item", ariaLabel: deprecatedAriaLabel, autoAlign = false, className: containerClassName, decorator, direction = "bottom", disabled = false, downshiftActions, downshiftProps, helperText, id, initialSelectedItem, invalid, invalidText, items, itemToElement = null, itemToString = require_defaultItemToString.defaultItemToString, light, onChange, onInputChange, onToggleClick, placeholder, readOnly, selectedItem: selectedItemProp, shouldFilterItem = defaultShouldFilterItem, size, titleText, translateWithId, typeahead = false, warn, warnText, allowCustomValue = false, slug, inputProps, ...rest } = props;
const enableFloatingStyles = require_index.useFeatureFlag("enable-v12-dynamic-floating-styles") || autoAlign;
const { refs, floatingStyles, middlewareData } = (0, _floating_ui_react.useFloating)(enableFloatingStyles ? {
placement: direction,
strategy: "fixed",
middleware: autoAlign ? [(0, _floating_ui_react.flip)(), (0, _floating_ui_react.hide)()] : void 0,
whileElementsMounted: _floating_ui_react.autoUpdate
} : {});
const referenceElement = refs?.reference?.current;
const parentWidth = typeof HTMLElement !== "undefined" && referenceElement instanceof HTMLElement ? referenceElement.clientWidth : void 0;
(0, react.useEffect)(() => {
if (enableFloatingStyles) {
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];
});
if (parentWidth && refs.floating.current) refs.floating.current.style.width = parentWidth + "px";
}
}, [
enableFloatingStyles,
floatingStyles,
refs.floating,
parentWidth
]);
const [inputValue, setInputValue] = (0, react.useState)(getInputValue({
initialSelectedItem,
itemToString,
selectedItem: selectedItemProp
}));
const [typeaheadText, setTypeaheadText] = (0, react.useState)("");
(0, react.useEffect)(() => {
if (typeahead) {
if (inputValue.length >= prevInputLengthRef.current) if (inputValue) {
const filteredItems = items.filter((item) => !isDisabledItem(item) && autocompleteCustomFilter({
item: itemToString(item),
inputValue
}));
if (filteredItems.length > 0) setTypeaheadText(itemToString(filteredItems[0]).slice(inputValue.length));
else setTypeaheadText("");
} else setTypeaheadText("");
else setTypeaheadText("");
prevInputLengthRef.current = inputValue.length;
}
}, [
typeahead,
inputValue,
items,
itemToString,
autocompleteCustomFilter
]);
const isManualClearingRef = (0, react.useRef)(false);
const committedCustomValueRef = (0, react.useRef)("");
const [isClearing, setIsClearing] = (0, react.useState)(false);
const prefix = require_usePrefix.usePrefix();
const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
const textInput = (0, react.useRef)(null);
const comboBoxInstanceId = require_useId.useId();
const [isFocused, setIsFocused] = (0, react.useState)(false);
const prevInputValue = (0, react.useRef)(inputValue);
const prevSelectedItemProp = (0, react.useRef)(selectedItemProp);
(0, react.useEffect)(() => {
isManualClearingRef.current = isClearing;
if (isClearing) setIsClearing(false);
}, [isClearing]);
(0, react.useEffect)(() => {
if (prevSelectedItemProp.current !== selectedItemProp) {
const currentInputValue = getInputValue({
initialSelectedItem,
itemToString,
selectedItem: selectedItemProp,
prevSelectedItem: prevSelectedItemProp.current
});
if (inputValue !== currentInputValue) {
setInputValue(currentInputValue);
onChange({
selectedItem: selectedItemProp,
inputValue: currentInputValue
});
}
prevSelectedItemProp.current = selectedItemProp;
}
}, [selectedItemProp]);
const filterItems = (items, itemToString, inputValue) => items.filter((item) => typeahead ? autocompleteCustomFilter({
item: itemToString(item),
inputValue
}) : shouldFilterItem ? shouldFilterItem({
item,
itemToString,
inputValue
}) : defaultShouldFilterItem());
(0, react.useEffect)(() => {
if (prevInputValue.current !== inputValue) {
prevInputValue.current = inputValue;
onInputChange?.(inputValue);
}
}, [inputValue]);
const handleSelectionClear = () => {
if (textInput?.current) textInput.current.focus();
};
const filteredItems = (inputValue) => filterItems(items, itemToString, inputValue || null);
const indexToHighlight = (inputValue) => findHighlightedIndex({
...props,
items: filteredItems(inputValue)
}, inputValue);
const stateReducer = (0, react.useCallback)((state, actionAndChanges) => {
const { type, changes } = actionAndChanges;
const { highlightedIndex } = changes;
switch (type) {
case InputBlur:
if (allowCustomValue && highlightedIndex === -1) {
const inputValue = state.inputValue ?? "";
const currentSelectedItem = typeof changes.selectedItem === "undefined" ? state.selectedItem : changes.selectedItem;
if (currentSelectedItem !== null && typeof currentSelectedItem !== "undefined" && itemToString(currentSelectedItem) === inputValue && items.some((item) => (0, react_fast_compare.default)(item, currentSelectedItem))) return changes;
const nextSelectedItem = inputValue === "" ? null : items.find((item) => itemToString(item) === inputValue) ?? inputValue;
const isCustomSelection = typeof nextSelectedItem === "string" && nextSelectedItem !== "" && !items.some((item) => (0, react_fast_compare.default)(item, nextSelectedItem));
if (!(0, react_fast_compare.default)(currentSelectedItem, nextSelectedItem) && onChange) {
onChange({
selectedItem: nextSelectedItem,
inputValue
});
committedCustomValueRef.current = isCustomSelection ? inputValue : "";
}
return {
...changes,
selectedItem: nextSelectedItem
};
}
if (state.inputValue && highlightedIndex === -1 && changes.selectedItem) return {
...changes,
inputValue: itemToString(changes.selectedItem)
};
if (!allowCustomValue) {
const currentInput = state.inputValue ?? "";
if (!(!!currentInput && items.some((item) => itemToString(item) === currentInput))) {
const selectedItem = typeof selectedItemProp !== "undefined" ? selectedItemProp : state.selectedItem;
const restoredInput = selectedItem !== null ? itemToString(selectedItem) : "";
return {
...changes,
inputValue: restoredInput
};
}
}
return changes;
case InputKeyDownEnter:
if (!allowCustomValue) if (state.highlightedIndex !== -1) {
const highlightedItem = filterItems(items, itemToString, inputValue)[state.highlightedIndex];
if (highlightedItem && !isDisabledItem(highlightedItem)) return {
...changes,
selectedItem: highlightedItem,
inputValue: itemToString(highlightedItem)
};
} else {
const autoIndex = indexToHighlight(inputValue);
if (autoIndex !== -1) {
const matchingItem = items[autoIndex];
if (matchingItem && !isDisabledItem(matchingItem)) return {
...changes,
selectedItem: matchingItem,
inputValue: itemToString(matchingItem)
};
}
if (state.selectedItem !== null) return {
...changes,
selectedItem: null,
inputValue
};
}
return {
...changes,
isOpen: true
};
case FunctionToggleMenu:
case ToggleButtonClick:
if (state.isOpen && !changes.isOpen && !allowCustomValue) {
const currentInput = state.inputValue ?? "";
if (!(!!currentInput && items.some((item) => itemToString(item) === currentInput))) {
const selectedItem = typeof selectedItemProp !== "undefined" ? selectedItemProp : state.selectedItem;
const restoredInput = selectedItem !== null ? itemToString(selectedItem) : "";
return {
...changes,
inputValue: restoredInput
};
}
}
return changes;
case MenuMouseLeave: return {
...changes,
highlightedIndex: state.highlightedIndex
};
case InputKeyDownArrowUp:
case InputKeyDownArrowDown:
if (highlightedIndex === -1) return {
...changes,
highlightedIndex: 0
};
return changes;
case ItemMouseMove: return {
...changes,
highlightedIndex: state.highlightedIndex
};
default: return changes;
}
}, [
allowCustomValue,
inputValue,
itemToString,
items,
onChange
]);
const handleToggleClick = (isOpen) => (event) => {
if (onToggleClick) onToggleClick(event);
if (readOnly) {
event.preventDownshiftDefault = true;
event?.persist?.();
return;
}
if (event.target === textInput.current && isOpen) {
event.preventDownshiftDefault = true;
event?.persist?.();
}
};
const normalizedProps = require_useNormalizedInputProps.useNormalizedInputProps({
id,
readOnly,
disabled: disabled || false,
invalid: invalid || false,
invalidText,
warn: warn || false,
warnText
});
const className = (0, classnames.default)(`${prefix}--combo-box`, {
[`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
[`${prefix}--list-box--up`]: direction === "top",
[`${prefix}--combo-box--warning`]: normalizedProps.warn,
[`${prefix}--combo-box--readonly`]: readOnly,
[`${prefix}--autoalign`]: enableFloatingStyles
});
const titleClasses = (0, classnames.default)(`${prefix}--label`, { [`${prefix}--label--disabled`]: disabled });
const helperTextId = `combobox-helper-text-${comboBoxInstanceId}`;
const warnTextId = `combobox-warn-text-${comboBoxInstanceId}`;
const invalidTextId = `combobox-invalid-text-${comboBoxInstanceId}`;
const helperClasses = (0, classnames.default)(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
const wrapperClasses = (0, classnames.default)(`${prefix}--list-box__wrapper`, [containerClassName, {
[`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
[`${prefix}--list-box__wrapper--slug`]: slug,
[`${prefix}--list-box__wrapper--decorator`]: decorator
}]);
const inputClasses = (0, classnames.default)(`${prefix}--text-input`, {
[`${prefix}--text-input--empty`]: !inputValue,
[`${prefix}--combo-box--input--focus`]: isFocused
});
const candidate = slug ?? decorator;
const candidateIsAILabel = require_utils.isComponentElement(candidate, require_index$1.AILabel);
const normalizedDecorator = candidateIsAILabel ? (0, react.cloneElement)(candidate, { size: "mini" }) : candidate;
const { getInputProps, getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, isOpen, highlightedIndex, selectedItem, closeMenu, openMenu, reset, selectItem, setHighlightedIndex, setInputValue: downshiftSetInputValue, toggleMenu } = (0, downshift.useCombobox)({
items: filterItems(items, itemToString, inputValue),
inputValue,
itemToString: (item) => {
return itemToString(item);
},
onInputValueChange({ inputValue }) {
const normalizedInput = inputValue || "";
setInputValue(normalizedInput);
setHighlightedIndex(indexToHighlight(normalizedInput));
},
onHighlightedIndexChange: ({ highlightedIndex }) => {
if (highlightedIndex > -1) {
const highlightedItem = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`)[highlightedIndex];
if (highlightedItem) highlightedItem.scrollIntoView({
behavior: "smooth",
block: "nearest"
});
}
},
initialSelectedItem,
inputId: id,
stateReducer,
isItemDisabled: isDisabledItem,
...downshiftProps,
onStateChange: ({ type, selectedItem: newSelectedItem }) => {
downshiftProps?.onStateChange?.({
type,
selectedItem: newSelectedItem
});
if (isManualClearingRef.current) return;
if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter) && typeof newSelectedItem !== "undefined" && !(0, react_fast_compare.default)(selectedItemProp, newSelectedItem)) {
if (items.some((item) => (0, react_fast_compare.default)(item, newSelectedItem))) committedCustomValueRef.current = "";
onChange({ selectedItem: newSelectedItem });
}
}
});
const currentSelectedItem = typeof selectedItemProp !== "undefined" ? selectedItemProp : selectedItem;
(0, react.useEffect)(() => {
if (downshiftActions) downshiftActions.current = {
closeMenu,
openMenu,
reset,
selectItem,
setHighlightedIndex,
setInputValue: downshiftSetInputValue,
toggleMenu
};
}, [
closeMenu,
openMenu,
reset,
selectItem,
setHighlightedIndex,
downshiftSetInputValue,
toggleMenu
]);
const buttonProps = getToggleButtonProps({
disabled: disabled || readOnly,
onClick: handleToggleClick(isOpen),
onMouseUp(event) {
if (isOpen) event.stopPropagation();
}
});
const handleFocus = (evt) => {
setIsFocused(evt.type === "focus");
if (!inputRef.current?.value && evt.type === "blur") selectItem(null);
};
const readOnlyEventHandlers = readOnly ? {
onKeyDown: (evt) => {
if (evt.key !== "Tab") evt.preventDefault();
},
onClick: (evt) => {
evt.preventDefault();
evt.currentTarget.focus();
}
} : {};
const ariaDescribedBy = normalizedProps.invalid && invalidText && invalidTextId || normalizedProps.warn && warnText && warnTextId || helperText && !isFluid && helperTextId || void 0;
const menuProps = (0, react.useMemo)(() => getMenuProps({ ref: enableFloatingStyles ? refs.setFloating : null }), [
enableFloatingStyles,
deprecatedAriaLabel,
ariaLabel,
getMenuProps,
refs.setFloating
]);
(0, react.useEffect)(() => {
if (textInput.current) {
if (inputRef.current && typeaheadText) {
const selectionStart = inputValue.length;
const selectionEnd = selectionStart + typeaheadText.length;
inputRef.current.value = inputValue + typeaheadText;
inputRef.current.setSelectionRange(selectionStart, selectionEnd);
}
}
}, [inputValue, typeaheadText]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: wrapperClasses,
children: [
titleText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "label",
className: titleClasses,
...getLabelProps(),
children: titleText
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$2.default, {
onFocus: handleFocus,
onBlur: handleFocus,
className,
disabled,
invalid: normalizedProps.invalid,
invalidText,
invalidTextId,
isOpen,
light,
size,
warn: normalizedProps.warn,
ref: enableFloatingStyles ? refs.setReference : null,
warnText,
warnTextId,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--list-box__field`,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
disabled,
className: inputClasses,
type: "text",
tabIndex: 0,
"aria-haspopup": "listbox",
title: textInput?.current?.value,
...getInputProps({
"aria-label": titleText ? void 0 : deprecatedAriaLabel || ariaLabel,
"aria-controls": menuProps.id,
placeholder,
value: inputValue,
...inputProps,
onChange: (e) => {
const newValue = e.target.value;
const shouldClearSelection = allowCustomValue && committedCustomValueRef.current && inputValue === committedCustomValueRef.current && newValue === "";
setInputValue(newValue);
downshiftSetInputValue(newValue);
if (shouldClearSelection) {
setIsClearing(true);
onChange({
selectedItem: null,
inputValue: ""
});
selectItem(null);
committedCustomValueRef.current = "";
}
},
ref: require_mergeRefs.mergeRefs(textInput, ref, inputRef),
onKeyDown: (event) => {
if (require_match.match(event, require_keys.Space)) event.stopPropagation();
if (require_match.match(event, require_keys.Enter) && (!inputValue || allowCustomValue)) {
toggleMenu();
if (highlightedIndex !== -1) selectItem(filterItems(items, itemToString, inputValue)[highlightedIndex]);
if (allowCustomValue && isOpen && inputValue && highlightedIndex === -1) {
committedCustomValueRef.current = inputValue;
onChange({
selectedItem: null,
inputValue
});
}
event.preventDownshiftDefault = true;
event?.persist?.();
}
if (require_match.match(event, require_keys.Escape) && inputValue) {
if (event.target === textInput.current && isOpen) {
toggleMenu();
event.preventDownshiftDefault = true;
event?.persist?.();
}
}
if (require_match.match(event, require_keys.Home) && event.code !== "Numpad7") event.target.setSelectionRange(0, 0);
if (require_match.match(event, require_keys.End) && event.code !== "Numpad1") event.target.setSelectionRange(event.target.value.length, event.target.value.length);
if (event.altKey && event.key == "ArrowDown") {
event.preventDownshiftDefault = true;
if (!isOpen) toggleMenu();
}
if (event.altKey && event.key == "ArrowUp") {
event.preventDownshiftDefault = true;
if (isOpen) toggleMenu();
}
if (!inputValue && highlightedIndex == -1 && event.key == "Enter") {
if (!isOpen) toggleMenu();
selectItem(null);
event.preventDownshiftDefault = true;
if (event.currentTarget.ariaExpanded === "false") openMenu();
}
if (typeahead && event.key === "Tab") {
if (!isOpen) return;
const matchingItem = items.find((item) => !isDisabledItem(item) && itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
if (matchingItem) {
downshiftSetInputValue(itemToString(matchingItem));
selectItem(matchingItem);
}
}
}
}),
...rest,
...readOnlyEventHandlers,
readOnly,
"aria-describedby": ariaDescribedBy
}),
normalizedProps.invalid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--list-box__invalid-icon` }),
normalizedProps.warn && /* @__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: () => {
setIsClearing(true);
setInputValue("");
onChange({ selectedItem: null });
selectItem(null);
committedCustomValueRef.current = "";
handleSelectionClear();
},
translateWithId,
disabled: disabled || readOnly,
onClearSelection: handleSelectionClear,
selectionCount: 0
}),
/* @__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 ? filterItems(items, itemToString, inputValue).map((item, index) => {
const title = item !== null && typeof item === "object" && "text" in item && itemToElement ? item.text?.toString() : itemToString(item);
const itemProps = getItemProps({
item,
index
});
const disabled = itemProps["aria-disabled"];
const { "aria-disabled": unusedAriaDisabled, "aria-selected": unusedAriaSelected, ...modifiedItemProps } = itemProps;
const isSelected = (0, react_fast_compare.default)(currentSelectedItem, item);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$2.default.MenuItem, {
isActive: isSelected,
isHighlighted: highlightedIndex === index,
title,
disabled,
...modifiedItemProps,
"aria-selected": isSelected,
children: [itemToElement ? itemToElement(item) : itemToString(item), isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Checkmark, { className: `${prefix}--list-box__menu-item__selected-icon` })]
}, itemProps.id);
}) : null
})
]
}),
helperText && !normalizedProps.invalid && !normalizedProps.warn && !isFluid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "div",
id: helperTextId,
className: helperClasses,
children: helperText
})
]
});
});
ComboBox.displayName = "ComboBox";
ComboBox.propTypes = {
allowCustomValue: prop_types.default.bool,
["aria-label"]: prop_types.default.string,
ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
autoAlign: prop_types.default.bool,
className: prop_types.default.string,
decorator: prop_types.default.node,
direction: prop_types.default.oneOf(["top", "bottom"]),
disabled: prop_types.default.bool,
downshiftProps: prop_types.default.object,
downshiftActions: prop_types.default.exact({ current: prop_types.default.any }),
helperText: prop_types.default.node,
id: prop_types.default.string.isRequired,
initialSelectedItem: prop_types.default.oneOfType([
prop_types.default.object,
prop_types.default.string,
prop_types.default.number
]),
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 `Combobox` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
onChange: prop_types.default.func.isRequired,
onInputChange: prop_types.default.func,
onToggleClick: prop_types.default.func,
placeholder: prop_types.default.string,
readOnly: prop_types.default.bool,
selectedItem: prop_types.default.oneOfType([
prop_types.default.object,
prop_types.default.string,
prop_types.default.number
]),
shouldFilterItem: prop_types.default.func,
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."),
titleText: prop_types.default.node,
translateWithId: prop_types.default.func,
typeahead: prop_types.default.bool,
warn: prop_types.default.bool,
warnText: prop_types.default.node,
inputProps: prop_types.default.object
};
//#endregion
exports.default = ComboBox;