@rio-cloud/rio-uikit 1.12.0 → 1.13.1

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

@@ -1,188 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,12 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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

@@ -1,8 +0,0 @@
-"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

@@ -1,163 +0,0 @@
-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

@@ -1,191 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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

@@ -1,14 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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

@@ -1,14 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1,7 +0,0 @@
-"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;