@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/selects/BaseSelectDropdown.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterOptions = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const useDropDirection_1 = require("../../utils/useDropDirection");
+const scrollItemIntoView_1 = require("../../utils/scrollItemIntoView");
+const useEffectOnce_1 = tslib_1.__importDefault(require("../../hooks/useEffectOnce"));
+const useKey_1 = tslib_1.__importDefault(require("../../useKey"));
+const DropdownHeader_1 = tslib_1.__importDefault(require("./DropdownHeader"));
+const NoItemMessage_1 = tslib_1.__importDefault(require("./NoItemMessage"));
+const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
+const DATA_ATTRIBUTE_ID = 'data-item-id';
+const DEFAULT_FOCUSED_ITEM_INDEX = 0;
+const HIGHLIGHT_CLASS = 'focus';
+const BaseSelectDropdown = (props) => {
+    const { isOpen = false, isLoading = false, updateDOMValues = noop_1.default, onOpen = noop_1.default, onSelect = noop_1.default, onClose = noop_1.default, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
+    const [focusedItemIndex, setFocusedItemIndex] = (0, react_1.useState)(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
+    const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(externalKeyboardUsed);
+    const dropdownMenuRef = (0, react_1.useRef)(null);
+    (0, useEffectOnce_1.default)(() => {
+        // all available items need to be rendered in order to know their DOM value
+        // which will be used for filtering in the parent component
+        const currentItemDOMValues = updateItemDOMValues();
+        updateDOMValues(currentItemDOMValues);
+    });
+    // Overwrite position of dropdown menu in case auto drop is enabled
+    const dropDirection = (0, useDropDirection_1.useDropDirection)({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [isOpen]);
+    // Add or remove the "dropup" class from the parent Select/Multiselect component to position
+    // the dropdown element accordingly via CSS
+    (0, react_1.useLayoutEffect)(() => {
+        if (dropdownMenuRef.current) {
+            const parent = dropdownMenuRef.current.parentElement;
+            if (dropDirection.dropup) {
+                parent?.classList.add('dropup');
+            }
+            else {
+                parent?.classList.remove('dropup');
+            }
+        }
+    }, [dropDirection, dropdownMenuRef]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.useEffect)(() => {
+        if (dropdownMenuRef.current) {
+            updateDOMValues(updateItemDOMValues());
+        }
+    }, [dropdownMenuRef.current]);
+    // update internal state for isOpen
+    const [previousIsOpen, setPreviousIsOpen] = (0, react_1.useState)(isOpen);
+    if (isOpen && !previousIsOpen) {
+        onOpen(dropDirection.dropup);
+        setPreviousIsOpen(isOpen);
+    }
+    else if (!isOpen && previousIsOpen) {
+        onClose();
+        setPreviousIsOpen(isOpen);
+    }
+    (0, useKey_1.default)(event => {
+        if (isOpen) {
+            switch (event.key) {
+                case 'Escape': {
+                    // close dropdown on esc
+                    onClose();
+                    break;
+                }
+                case 'Tab': {
+                    // close dropdown on tab
+                    onClose();
+                    break;
+                }
+                case 'Enter': {
+                    // select item on enter
+                    selectOptionOnEnter(event);
+                    break;
+                }
+                case 'ArrowUp': {
+                    // prevent scrolling the page when dropdown menu is open
+                    event.preventDefault();
+                    // select item above on arrow up key
+                    focusOption(scrollItemIntoView_1.UP);
+                    (0, scrollItemIntoView_1.scrollItemIntoView)(scrollItemIntoView_1.UP, dropdownMenuRef.current, getFocusedOptionNode());
+                    break;
+                }
+                case 'ArrowDown': {
+                    // prevent scrolling the page when dropdown menu is open
+                    event.preventDefault();
+                    // select item below on arrow down key
+                    focusOption(scrollItemIntoView_1.DOWN);
+                    (0, scrollItemIntoView_1.scrollItemIntoView)(scrollItemIntoView_1.DOWN, dropdownMenuRef.current, getFocusedOptionNode());
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+    });
+    const focusOption = (direction) => {
+        let nextFocusedItem = 0;
+        switch (direction) {
+            case scrollItemIntoView_1.UP: {
+                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;
+                break;
+            }
+            case scrollItemIntoView_1.DOWN: {
+                nextFocusedItem = focusedItemIndex === options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;
+                break;
+            }
+            default:
+                break;
+        }
+        // In case the next item index is negative, means outside the bounds of the items,
+        // reset it depending on the current direction
+        const indexLimit = direction === scrollItemIntoView_1.UP ? options.length - 1 : 0;
+        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);
+        setKeyboardUsed(true);
+    };
+    const getOptionNodes = () => {
+        const node = dropdownMenuRef.current;
+        return node?.getElementsByTagName('a') || [];
+    };
+    const updateItemDOMValues = () => {
+        if (dropdownMenuRef.current) {
+            const optionNodes = getOptionNodes();
+            return [...optionNodes].map(item => {
+                return {
+                    id: item.getAttribute(DATA_ATTRIBUTE_ID),
+                    text: item.textContent,
+                };
+            });
+        }
+    };
+    const getFocusedOptionNode = () => {
+        const optionNodes = getOptionNodes();
+        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));
+    };
+    const selectOptionOnEnter = (event) => {
+        event.preventDefault();
+        // When no filter result was found, avoid selecting anything
+        if ((0, isEmpty_1.default)(options)) {
+            return;
+        }
+        const match = getFocusedOptionNode();
+        if (match) {
+            const selectedItem = options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));
+            onSelect(selectedItem);
+        }
+    };
+    const handleOptionChange = (event) => {
+        event.preventDefault();
+        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;
+        const selectedItem = options.find(option => option.id === optionId);
+        onSelect(selectedItem);
+    };
+    const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
+    // Don't show the dropdown, when no match are found when filtering unless there is a not found message
+    if ((0, isEmpty_1.default)(options)) {
+        return (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
+    }
+    return ((0, jsx_runtime_1.jsxs)("ul", { className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu', children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: 'display-flex justify-content-center padding-10', children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) })), !isLoading &&
+                options.map((option, index) => {
+                    if (option.header) {
+                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { icon: option.icon, label: option.label }, option.id);
+                    }
+                    // Show focused style only when keyboard is in use
+                    const anchorClassNames = (0, classnames_1.default)(keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none', 'display-flex align-items-center gap-3');
+                    const wrapperClassNames = (0, classnames_1.default)(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
+                    return ((0, jsx_runtime_1.jsx)("li", { className: wrapperClassNames, role: 'listitem', children: (0, jsx_runtime_1.jsxs)("a", { role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                            // Note, we need to assign the click callback only when it's not disabled
+                            // otherwise the functions is still triggered
+                            // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility
+                            onClick: option.disabled ? undefined : handleOptionChange, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'selected-option-dropdown-item', children: [option.icon && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.icon }), option.label] }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', value: option.id })] }) }, option.id));
+                })] }));
+};
+const filterOptions = (itemDOMValues, filterValue, options) => {
+    const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));
+    // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
+    // on the options itself as they might contain arbitrary components
+    return options.filter(option => {
+        return filteredDOMValues.find(domValue => domValue.id === option.id);
+    });
+};
+exports.filterOptions = filterOptions;
+exports.default = BaseSelectDropdown;

package/lib/es/src/components/selects/ClearButton.d.ts

@@ -0,0 +1,8 @@
+import type { SelectOption } from './Select';
+export type ClearButtonProps = {
+    showClear: boolean;
+    selectedItem: SelectOption | null;
+    onClear: () => void;
+};
+declare const ClearButton: (props: ClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ClearButton;

package/lib/es/src/components/selects/ClearButton.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const ClearButton = (props) => {
+    const { showClear, selectedItem, onClear } = props;
+    const clearButtonClassNames = (0, classnames_1.default)('clearButton', (!showClear || (0, isNil_1.default)(selectedItem)) && 'hide pointer-events-none');
+    return ((0, jsx_runtime_1.jsx)("span", { className: clearButtonClassNames, onClick: onClear, children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }));
+};
+exports.default = ClearButton;

package/lib/es/src/components/selects/DropdownHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type DropdownHeaderProps = {
+    icon?: React.ReactNode;
+    center?: boolean;
+    label: string | React.ReactNode;
+    className?: string;
+};
+declare const DropdownHeader: (props: DropdownHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownHeader;

package/lib/es/src/components/selects/DropdownHeader.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DropdownHeader = (props) => {
+    const { icon, label, center = true, className = '' } = props;
+    return ((0, jsx_runtime_1.jsx)("li", { className: `dropdown-header ${center ? 'center' : ''} ${className}`, children: (0, jsx_runtime_1.jsxs)("span", { className: 'dropdown-header-text', children: [icon && (0, jsx_runtime_1.jsx)("span", { className: 'margin-right-5', children: icon }), label] }) }));
+};
+exports.default = DropdownHeader;

package/lib/es/src/components/selects/Multiselect.d.ts

@@ -0,0 +1,163 @@
+import React from 'react';
+import { type SelectOption } from './BaseSelectDropdown';
+import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
+export type MultiselectCounterMessage = {
+    /**
+     * Text that will be used when a single item is selected.
+     */
+    one: string | React.ReactNode;
+    /**
+     * Text that will be used when multiple item are selected.
+     */
+    many: string | React.ReactNode;
+};
+export type MultiselectOption = SelectOption & {};
+export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {
+    /**
+     * Passed through as HTML attribute to the toggle button.
+     */
+    name?: string;
+    /**
+     * Passed as HTML attribute to the toggle button.
+     *
+     * @default Uses the value given to `name` if not provided explicitly.
+     */
+    id?: string;
+    /**
+     * Items to display in the dropdown menu.
+     *
+     * @default []
+     */
+    options?: T[];
+    /**
+     * Sets the ids of the selected options when the component is already mounted.
+     */
+    value?: string[];
+    /**
+     * Callback function triggered when an item is selected.
+     *
+     * @param selectedItemIds Array containing all the IDs that have been selected.
+     *
+     * @default () => {}
+     */
+    onChange?: (selectedItemIds: string[]) => void;
+    /**
+     * Text to display when nothing is selected.
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Defines whether the dropdown opens upwards.
+     *
+     * Set to `true` additionally disables autoDrop feature.
+     *
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Defines whether the dropdown opens right aligned to the dropdown toggle.
+     *
+     * Set to 'true' additionally disables autoDrop feature.
+     *
+     * @default false
+     */
+    pullRight?: boolean;
+    /**
+     * Enables or disables the autoDrop positioning feature.
+     *
+     * When enabled, the option list opens below or above the input depending on the surrounding space.
+     *
+     * @default true
+     */
+    autoDropDirection?: boolean;
+    /**
+     * Shows a loading spinner instead of the menu items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Defines the size of the select to be rendered.
+     *
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Option to disable the opening of the option list.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the input's tabindex attribute.
+     *
+     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being
+     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for
+     * sequential focus navigation.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Defines whether the Bootstrap error classes shall be added to the toggle element.
+     *
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Defines whether the selected items wrap around within the dropdown toggle.
+     *
+     * @default false
+     */
+    multiline?: boolean;
+    /**
+     * Defines whether the component should be filterable.
+     *
+     * @default false
+     */
+    useFilter?: boolean;
+    /**
+     * Text that shall be shown when not match was found when filtering.
+     */
+    noItemMessage?: string | React.ReactNode;
+    /**
+     * Object that will render the number of selected items instead of individual items.
+     *
+     * Using this prop will disable the filter functionality.
+     */
+    counterMessage?: MultiselectCounterMessage;
+    /**
+     * Optional render function that is used to render the message how many items have been selected.
+     *
+     * Using this prop will disable the filter functionality.
+     *
+     * @param selectedAmount The total amount of selected items.
+     */
+    renderCounterMessage?: (selectedAmount: number) => React.ReactNode;
+    /**
+     * Set to show only the icon and not the label of selected item.
+     *
+     * @default false
+     */
+    showSelectedItemIcon?: boolean;
+    /**
+     * Set to show all item icons within the toggle element.
+     *
+     * Selected items are highlighted and unselected items are shown as inactive.
+     *
+     * @default false
+     */
+    showUnselectedItemIcons?: boolean;
+    /**
+     * Additional classes to be set to the dropdown.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional classes to be set to the select/input.
+     */
+    btnClassName?: string;
+    /**
+     * Additional classes to be set to the select wrapper
+     */
+    className?: string;
+};
+declare const Multiselect: (props: MultiselectProps<MultiselectOption>) => import("react/jsx-runtime").JSX.Element;
+export default Multiselect;

package/lib/es/src/components/selects/Multiselect.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const BaseSelectDropdown_1 = tslib_1.__importStar(require("./BaseSelectDropdown"));
+const MultiselectToggleCounter_1 = tslib_1.__importDefault(require("./MultiselectToggleCounter"));
+const MultiselectToggleSelection_1 = tslib_1.__importDefault(require("./MultiselectToggleSelection"));
+const MultiselectToggleFilter_1 = tslib_1.__importDefault(require("./MultiselectToggleFilter"));
+const MultiselectTogglePlaceholder_1 = tslib_1.__importDefault(require("./MultiselectTogglePlaceholder"));
+const useClickOutside_1 = tslib_1.__importDefault(require("../../useClickOutside"));
+const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
+const WithFeedbackAndAddon_1 = tslib_1.__importDefault(require("./WithFeedbackAndAddon"));
+const DEFAULT_FOCUSED_ITEM_INDEX = -1;
+const Multiselect = (props) => {
+    const { name, id = name, options = [], value, onChange = noop_1.default, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', btnClassName, dropdownClassName, ...remainingProps } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [selectedItemIds, setSelectedItemIds] = (0, react_1.useState)(value || []);
+    const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
+    const [filterValue, setFilterValue] = (0, react_1.useState)('');
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
+    const [itemDOMValues, setItemDOMValues] = (0, react_1.useState)([]);
+    const [focusedItemIndex, setFocusedItemIndex] = (0, react_1.useState)(DEFAULT_FOCUSED_ITEM_INDEX);
+    const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(false);
+    const refToggle = (0, react_1.useRef)(null);
+    const refMultiSelectWrapper = (0, react_1.useRef)(null);
+    const ref = (0, useClickOutside_1.default)(event => {
+        // Check if the click is truly outside the multiselect wrapper
+        if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target)) {
+            closeMenu();
+        }
+    });
+    const mergedSelectRefs = (0, useMergeRefs_1.default)(refMultiSelectWrapper, ref);
+    const updateSelectedItems = (optionsToCheck, selectedItem) => {
+        if (selectedItem) {
+            setSelectedItemIds(selectedItem);
+        }
+        else if (optionsToCheck) {
+            const filteredBySelection = optionsToCheck.filter(item => item.selected);
+            setSelectedItemIds(filteredBySelection.map(option => option.id));
+        }
+    };
+    // Update the selectedItems on first render.
+    // Note, we use a ref instead of an effect as the effect is triggered too late
+    const firstRenderRef = (0, react_1.useRef)(true);
+    if (firstRenderRef.current) {
+        updateSelectedItems(options, value);
+        firstRenderRef.current = false;
+    }
+    // Update selection based on changed value prop
+    const [previousValue, setPreviousValue] = (0, react_1.useState)(value);
+    if (!(0, isEqual_1.default)(value, previousValue)) {
+        updateSelectedItems(options, value);
+        setPreviousValue(value);
+    }
+    // Update options when they have changed from the outside
+    const [previousOptions, setPreviousOptions] = (0, react_1.useState)(options);
+    if (!(0, isEqual_1.default)(options, previousOptions)) {
+        updateSelectedItems(options, value);
+        setFilteredOptions(options);
+        setPreviousOptions(options);
+    }
+    const updateDOMValues = (updatedItemDOMValues = []) => {
+        setItemDOMValues(updatedItemDOMValues);
+    };
+    const renderFilter = () => ((0, jsx_runtime_1.jsx)(MultiselectToggleFilter_1.default, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange }));
+    const renderSelection = () => {
+        if (counterMessage || renderCounterMessage) {
+            return ((0, jsx_runtime_1.jsx)(MultiselectToggleCounter_1.default, { selectedAmount: selectedItemIds.length, counterMessage: counterMessage, customRenderer: renderCounterMessage }));
+        }
+        return ((0, jsx_runtime_1.jsx)(MultiselectToggleSelection_1.default, { options: options, selectedItemIds: selectedItemIds, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons, onRemoveItem: handleRemoveSelectedItem, multiline: multiline, hasInputAddon: !!inputAddon, hasFilter: useFilter, children: multiline && renderFilter() }));
+    };
+    const renderToggle = () => {
+        const wrapperClassNames = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
+        const showPlaceholder = (0, isEmpty_1.default)(selectedItemIds) && !showUnselectedItemIcons;
+        const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
+        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", { type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle, children: [showPlaceholder ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MultiselectTogglePlaceholder_1.default, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] }));
+        if (!inputAddon && !errorMessage && !warningMessage) {
+            return toggleButton;
+        }
+        return ((0, jsx_runtime_1.jsx)(WithFeedbackAndAddon_1.default, { bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, children: toggleButton }));
+    };
+    const renderDropdownMenu = () => {
+        const nonSelectedOptions = filteredOptions.map(option => {
+            option.selected = selectedItemIds.indexOf(option.id) !== -1;
+            return option;
+        });
+        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, isLoading: isLoading, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName }));
+    };
+    const handleFilterChange = (event) => {
+        event.preventDefault();
+        const targetFilterValue = event.currentTarget.value;
+        const optionsFiltered = (0, BaseSelectDropdown_1.filterOptions)(itemDOMValues, targetFilterValue, options);
+        if (!isOpen) {
+            // Ensure dropdown stays open when filtering
+            setIsOpen(true);
+        }
+        const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;
+        setIsFilterActive(true);
+        setFilterValue(targetFilterValue);
+        setFilteredOptions(optionsFiltered);
+        if (optionsFiltered.length > 0) {
+            // Only set keyboard used if there are filtered options
+            setKeyboardUsed(true);
+        }
+        setFocusedItemIndex(newFocusedItemIndex);
+    };
+    const onOptionChange = (currentSelectedItem) => {
+        // prevent selecting disabled Items via keyboard
+        if (currentSelectedItem?.disabled) {
+            return;
+        }
+        const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;
+        // Reset everything after an option was selected. Remove the filter again.
+        setSelectedItemIds(updatedSelectedItems);
+        setIsFilterActive(false);
+        setFilterValue('');
+        setFilteredOptions(options);
+        onChange(updatedSelectedItems);
+    };
+    const updateSelection = (selectedItemId) => {
+        const newSelectedItems = [...selectedItemIds];
+        const itemIndex = selectedItemIds.indexOf(selectedItemId);
+        if (itemIndex !== -1) {
+            newSelectedItems.splice(itemIndex, 1);
+        }
+        else {
+            newSelectedItems.push(selectedItemId);
+        }
+        return newSelectedItems;
+    };
+    const handleRemoveSelectedItem = (event, itemId) => {
+        event.stopPropagation();
+        const newSelectedItems = updateSelection(itemId);
+        setSelectedItemIds(newSelectedItems);
+        onChange(newSelectedItems);
+    };
+    const handleToggleKeyDown = (event) => {
+        switch (event.key) {
+            case 'Space':
+                if (!isOpen) {
+                    // open on space
+                    event.preventDefault();
+                    onToggle(event);
+                }
+                break;
+            case 'Enter':
+                if (!isOpen) {
+                    // open on enter
+                    event.preventDefault();
+                    onToggle(event);
+                }
+                break;
+            default:
+                break;
+        }
+    };
+    const onToggle = (event) => {
+        // Don't toggle when component is disabled or an item in the toggle was clicked in order to remove from
+        // selection neither close when filter is active, means entering some filter value
+        // in order to avoid closing menu on space but allow to use it for filtering
+        if (disabled || isFilterActive) {
+            return;
+        }
+        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
+        // type submit by default in HTML. In order to differentiate between real click and a synthetic event
+        // caused by they keyboard, use the event details. A synthetic event is always 0.
+        const isKeyboardUsed = event.detail === 0;
+        setIsOpen(prevValue => !prevValue);
+        setKeyboardUsed(isKeyboardUsed);
+    };
+    const closeMenu = () => {
+        if (isOpen) {
+            setIsOpen(false);
+            setIsFilterActive(false);
+            setFilterValue('');
+            setFilteredOptions(options);
+            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
+            setKeyboardUsed(false);
+            refToggle?.current?.focus();
+        }
+    };
+    const wrapperClasses = (0, classnames_1.default)('select', 'multiselect', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClasses, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
+};
+exports.default = Multiselect;

package/lib/es/src/components/selects/MultiselectToggleCounter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MultiselectCounterMessage } from './Multiselect';
+export type MultiselectToggleCounterProps = {
+    customRenderer?: (selectedAmount: number) => React.ReactNode;
+    counterMessage?: MultiselectCounterMessage;
+    selectedAmount: number;
+};
+declare const MultiselectToggleCounter: (props: MultiselectToggleCounterProps) => any;
+export default MultiselectToggleCounter;

package/lib/es/src/components/selects/MultiselectToggleCounter.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MultiselectToggleCounter = (props) => {
+    const { customRenderer, selectedAmount, counterMessage } = props;
+    if (customRenderer) {
+        return customRenderer(selectedAmount);
+    }
+    if (counterMessage) {
+        const message = selectedAmount === 1 ? counterMessage.one : counterMessage.many;
+        return ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { className: 'option-counter margin-right-1', children: selectedAmount }), (0, jsx_runtime_1.jsx)("span", { className: 'counter-message margin-left-1', children: message })] }));
+    }
+};
+exports.default = MultiselectToggleCounter;

package/lib/es/src/components/selects/MultiselectToggleFilter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type MultiselectToggleFilterProps = {
+    isActive: boolean;
+    selectedItemIds?: string[];
+    filterValue: string;
+    onFilterChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const MultiselectToggleFilter: (props: MultiselectToggleFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiselectToggleFilter;

package/lib/es/src/components/selects/MultiselectToggleFilter.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const MultiselectToggleFilter = (props) => {
+    const { isActive, selectedItemIds, filterValue, onFilterChange } = props;
+    const inputClasses = (0, classnames_1.default)('multiselect-filter-input', (0, isEmpty_1.default)(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active');
+    return ((0, jsx_runtime_1.jsx)("input", { type: 'text', role: 'searchbox', className: inputClasses, 
+        // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
+        autoFocus: true, onChange: onFilterChange, value: filterValue }));
+};
+exports.default = MultiselectToggleFilter;

package/lib/es/src/components/selects/MultiselectTogglePlaceholder.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type MultiselectTogglePlaceholderProps = {
+    placeholder: string | React.ReactNode;
+};
+declare const MultiselectTogglePlaceholder: ({ placeholder }: MultiselectTogglePlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiselectTogglePlaceholder;

package/lib/es/src/components/selects/MultiselectTogglePlaceholder.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MultiselectTogglePlaceholder = ({ placeholder }) => {
+    return placeholder ? (0, jsx_runtime_1.jsx)("span", { className: 'placeholder', children: placeholder }) : (0, jsx_runtime_1.jsx)("span", {});
+};
+exports.default = MultiselectTogglePlaceholder;