: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
'aria-haspopup': 'listbox',
'aria-owns': elementIds.menuId,
'aria-expanded': latest.current.state.isOpen,
}, [latest, setGetterPropCallInfo, elementIds]); // returns
const toggleMenu = (0,external_React_.useCallback)(() => {
const closeMenu = (0,external_React_.useCallback)(() => {
const openMenu = (0,external_React_.useCallback)(() => {
const setHighlightedIndex = (0,external_React_.useCallback)(newHighlightedIndex => {
type: FunctionSetHighlightedIndex,
highlightedIndex: newHighlightedIndex
const selectItem = (0,external_React_.useCallback)(newSelectedItem => {
type: FunctionSelectItem,
selectedItem: newSelectedItem
const setInputValue = (0,external_React_.useCallback)(newInputValue => {
type: FunctionSetInputValue,
inputValue: newInputValue
const reset = (0,external_React_.useCallback)(() => {
const defaultStateValues = {
* Returns the initial value for a state key in the following order:
* 1. controlled prop, 2. initial prop, 3. default prop, 4. default
* @param {Object} props Props passed to the hook.
* @param {string} propKey Props key to generate the value for.
* @returns {any} The initial value for that prop.
function getInitialValue(props, propKey) {
return getInitialValue$1(props, propKey, defaultStateValues);
* Returns the default value for a state key in the following order:
* 1. controlled prop, 2. default prop, 3. default value from Downshift.
* @param {Object} props Props passed to the hook.
* @param {string} propKey Props key to generate the value for.
* @returns {any} The initial value for that prop.
function getDefaultValue(props, propKey) {
return getDefaultValue$1(props, propKey, defaultStateValues);
* Gets the initial state based on the provided props. It uses initial, default
* and controlled props related to state in order to compute the initial value.
* @param {Object} props Props passed to the hook.
* @returns {Object} The initial state.
function getInitialState(props) {
const activeIndex = getInitialValue(props, 'activeIndex');
const selectedItems = getInitialValue(props, 'selectedItems');
* Returns true if dropdown keydown operation is permitted. Should not be
* allowed on keydown with modifier keys (ctrl, alt, shift, meta), on
* input element with text content that is either highlighted or selection
* cursor is not at the starting position.
* @param {KeyboardEvent} event The event from keydown.
* @returns {boolean} Whether the operation is allowed.
function isKeyDownOperationPermitted(event) {
if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
const element = event.target;
if (element instanceof HTMLInputElement && // if element is a text input
element.value !== '' && ( // and we have text in it
// and cursor is either not at the start or is currently highlighting text.
element.selectionStart !== 0 || element.selectionEnd !== 0)) {
* Returns a message to be added to aria-live region when item is removed.
* @param {Object} selectionParameters Parameters required to build the message.
* @returns {string} The a11y message.
function getA11yRemovalMessage(selectionParameters) {
itemToString: itemToStringLocal
return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
selectedItems: (prop_types_default()).array,
initialSelectedItems: (prop_types_default()).array,
defaultSelectedItems: (prop_types_default()).array,
itemToString: (prop_types_default()).func,
getA11yRemovalMessage: (prop_types_default()).func,
stateReducer: (prop_types_default()).func,
activeIndex: (prop_types_default()).number,
initialActiveIndex: (prop_types_default()).number,
defaultActiveIndex: (prop_types_default()).number,
onActiveIndexChange: (prop_types_default()).func,
onSelectedItemsChange: (prop_types_default()).func,
keyNavigationNext: (prop_types_default()).string,
keyNavigationPrevious: (prop_types_default()).string,
environment: prop_types_default().shape({
addEventListener: (prop_types_default()).func,
removeEventListener: (prop_types_default()).func,
document: prop_types_default().shape({
getElementById: (prop_types_default()).func,
activeElement: (prop_types_default()).any,
body: (prop_types_default()).any
itemToString: defaultProps$3.itemToString,
stateReducer: defaultProps$3.stateReducer,
environment: defaultProps$3.environment,
keyNavigationNext: 'ArrowRight',
keyNavigationPrevious: 'ArrowLeft'
}; // eslint-disable-next-line import/no-mutable-exports
let validatePropTypes = downshift_esm_noop;
/* istanbul ignore next */
const SelectedItemClick = false ? 0 : 0;
const SelectedItemKeyDownDelete = false ? 0 : 1;
const SelectedItemKeyDownBackspace = false ? 0 : 2;
const SelectedItemKeyDownNavigationNext = false ? 0 : 3;
const SelectedItemKeyDownNavigationPrevious = false ? 0 : 4;
const DropdownKeyDownNavigationPrevious = false ? 0 : 5;
const DropdownKeyDownBackspace = false ? 0 : 6;
const DropdownClick = false ? 0 : 7;
const FunctionAddSelectedItem = false ? 0 : 8;
const FunctionRemoveSelectedItem = false ? 0 : 9;
const FunctionSetSelectedItems = false ? 0 : 10;
const FunctionSetActiveIndex = false ? 0 : 11;
const FunctionReset = false ? 0 : 12;
var stateChangeTypes = /*#__PURE__*/Object.freeze({
SelectedItemClick: SelectedItemClick,
SelectedItemKeyDownDelete: SelectedItemKeyDownDelete,
SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace,
SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext,
SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious,
DropdownKeyDownNavigationPrevious: DropdownKeyDownNavigationPrevious,
DropdownKeyDownBackspace: DropdownKeyDownBackspace,
DropdownClick: DropdownClick,
FunctionAddSelectedItem: FunctionAddSelectedItem,
FunctionRemoveSelectedItem: FunctionRemoveSelectedItem,
FunctionSetSelectedItems: FunctionSetSelectedItems,
FunctionSetActiveIndex: FunctionSetActiveIndex,
FunctionReset: FunctionReset
/* eslint-disable complexity */
function downshiftMultipleSelectionReducer(state, action) {
case SelectedItemKeyDownNavigationPrevious:
activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1
case SelectedItemKeyDownNavigationNext:
activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1
case SelectedItemKeyDownBackspace:
case SelectedItemKeyDownDelete:
let newActiveIndex = activeIndex;
if (selectedItems.length === 1) {
} else if (activeIndex === selectedItems.length - 1) {
newActiveIndex = selectedItems.length - 2;
selectedItems: [...selectedItems.slice(0, activeIndex), ...selectedItems.slice(activeIndex + 1)],
activeIndex: newActiveIndex
case DropdownKeyDownNavigationPrevious:
activeIndex: selectedItems.length - 1
case DropdownKeyDownBackspace:
selectedItems: selectedItems.slice(0, selectedItems.length - 1)
case FunctionAddSelectedItem:
selectedItems: [...selectedItems, selectedItem]
case FunctionRemoveSelectedItem:
let newActiveIndex = activeIndex;
const selectedItemIndex = selectedItems.indexOf(selectedItem);
if (selectedItemIndex >= 0) {
if (selectedItems.length === 1) {
} else if (selectedItemIndex === selectedItems.length - 1) {
newActiveIndex = selectedItems.length - 2;
selectedItems: [...selectedItems.slice(0, selectedItemIndex), ...selectedItems.slice(selectedItemIndex + 1)],
activeIndex: newActiveIndex
case FunctionSetSelectedItems:
selectedItems: newSelectedItems
selectedItems: newSelectedItems
case FunctionSetActiveIndex:
activeIndex: newActiveIndex
activeIndex: newActiveIndex
activeIndex: getDefaultValue(props, 'activeIndex'),
selectedItems: getDefaultValue(props, 'selectedItems')
throw new Error('Reducer called without proper action type.');
useMultipleSelection.stateChangeTypes = stateChangeTypes;
function useMultipleSelection(userProps) {
if (userProps === void 0) {
validatePropTypes(userProps, useMultipleSelection); // Props defaults and destructuring.
const props = { ...defaultProps,
} = props; // Reducer init.
const [state, dispatch] = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props);
const isInitialMountRef = (0,external_React_.useRef)(true);
const dropdownRef = (0,external_React_.useRef)(null);
const previousSelectedItemsRef = (0,external_React_.useRef)(selectedItems);
const selectedItemRefs = (0,external_React_.useRef)();
selectedItemRefs.current = [];
const latest = downshift_esm_useLatestRef({
/* Sets a11y status message on changes in selectedItem. */
(0,external_React_.useEffect)(() => {
if (isInitialMountRef.current) {
if (selectedItems.length < previousSelectedItemsRef.current.length) {
const removedSelectedItem = previousSelectedItemsRef.current.find(item => selectedItems.indexOf(item) < 0);
setStatus(getA11yRemovalMessage({
resultCount: selectedItems.length,
activeSelectedItem: selectedItems[activeIndex]
}), environment.document);
previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedItems.length]); // Sets focus on active item.
(0,external_React_.useEffect)(() => {
if (isInitialMountRef.current) {
if (activeIndex === -1 && dropdownRef.current) {
dropdownRef.current.focus();
} else if (selectedItemRefs.current[activeIndex]) {
selectedItemRefs.current[activeIndex].focus();
useControlPropsValidator({
isInitialMount: isInitialMountRef.current,
const setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
(0,external_React_.useEffect)(() => {
isInitialMountRef.current = false;
}, []); // Event handler functions.
const selectedItemKeyDownHandlers = (0,external_React_.useMemo)(() => ({
[keyNavigationPrevious]() {
type: SelectedItemKeyDownNavigationPrevious
type: SelectedItemKeyDownNavigationNext
type: SelectedItemKeyDownDelete
type: SelectedItemKeyDownBackspace
}), [dispatch, keyNavigationNext, keyNavigationPrevious]);
const dropdownKeyDownHandlers = (0,external_React_.useMemo)(() => ({
[keyNavigationPrevious](event) {
if (isKeyDownOperationPermitted(event)) {
type: DropdownKeyDownNavigationPrevious
if (isKeyDownOperationPermitted(event)) {
type: DropdownKeyDownBackspace
}), [dispatch, keyNavigationPrevious]); // Getter props.
const getSelectedItemProps = (0,external_React_.useCallback)(function (_temp) {
} = _temp === void 0 ? {} : _temp;