@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/components/selects/Multiselect.js

@@ -1,186 +1,120 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import onClickOutside from 'react-onclickoutside';
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import { useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';
-import logDeprecatedWarnings from '../../utils/logDeprecatedWarnings';
-import { BaseDropdownMenu } from './BaseDropdownMenu';
-const warningProps = [
-    {
-        prop: 'autoDropDirection',
-    },
-];
-export class Multiselect extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isOpen: false,
-            selectedItems: props.value || [],
-            isFilterActive: false,
-            filterValue: '',
-            filteredOptions: props.options,
-            itemDOMValues: [],
-            keyboardUsed: false,
-        };
-        // necessary for using the uikit as submodule
-        this.onToggle = this.onToggle.bind(this);
-        this.handleClickOutside = this.handleClickOutside.bind(this);
-        this.handleFilterChange = this.handleFilterChange.bind(this);
-        this.onOptionChange = this.onOptionChange.bind(this);
-        this.updateDOMValues = this.updateDOMValues.bind(this);
-        this.closeMenu = this.closeMenu.bind(this);
-        this.onOpenMenu = this.onOpenMenu.bind(this);
-        this.handleToggleKeyDown = this.handleToggleKeyDown.bind(this);
-    }
-    UNSAFE_componentWillMount() {
-        this.updateSelectedItems(this.props.options, this.props.value);
-    }
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        this.updateSelectedItems(nextProps.options, nextProps.value);
-        if (!isEqual(nextProps.options, this.props.options)) {
-            this.setState({
-                filteredOptions: nextProps.options,
-                requestItemDOMValues: true,
-            });
-        }
-    }
-    updateSelectedItems(options, value) {
-        if (value) {
-            this.setState(() => ({
-                selectedItems: value,
-            }));
-        }
-        else if (options) {
-            this.setState(() => ({
-                selectedItems: options
-                    .filter(item => {
-                    return item.selected ? item.id : false;
-                })
-                    .map(option => option.id),
-            }));
-        }
-    }
-    updateDOMValues(itemDOMValues) {
-        this.setState(() => ({
-            itemDOMValues,
-            requestItemDOMValues: false,
-        }));
-    }
-    render() {
-        const { className, hasError } = this.props;
-        const dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
-        const wrapperClasses = classNames('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
-        return (_jsxs("div", Object.assign({ className: wrapperClasses, ref: multiselectWrapper => (this.multiselectWrapper = multiselectWrapper) }, { children: [this.renderToggle(), this.renderDropdownMenu()] })));
-    }
-    buildSelectionRepresentation(options) {
-        const { showSelectedItemIcon, showUnselectedItemIcons } = this.props;
-        if (!options || !options.length) {
-            return '';
-        }
-        const selectionTags = options
-            .filter(option => (showUnselectedItemIcons ? !option.header : this.isItemSelected(option)))
-            .map((option, index) => this.renderSelectionItem(option, index));
-        const optionListClassNames = classNames(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list');
-        return _jsx("span", Object.assign({ className: optionListClassNames }, { children: selectionTags }));
-    }
-    renderCounterMessage(selectedItems, counterMessage, renderCounterMessage) {
-        if (renderCounterMessage) {
-            return renderCounterMessage(selectedItems.length);
-        }
-        else if (counterMessage) {
-            const message = selectedItems.length === 1 ? counterMessage.one : counterMessage.many;
-            return (_jsxs("span", { children: [_jsx("span", Object.assign({ className: 'option-counter margin-right-1' }, { children: selectedItems.length })), _jsx("span", Object.assign({ className: 'counter-message margin-left-1' }, { children: message }))] }));
-        }
-    }
-    isItemSelected(item) {
-        return this.state.selectedItems.indexOf(item.id) !== -1;
-    }
-    renderSelectionItem(item, index) {
-        if (this.props.showSelectedItemIcon) {
-            const inactiveClassNames = classNames('margin-right-5', !this.isItemSelected(item) && 'inactiveIcon');
-            return (_jsx("span", Object.assign({ className: inactiveClassNames }, { children: item.icon }), item.id));
-        }
-        return (_jsxs("span", Object.assign({ className: 'selected-option' }, { children: [_jsxs("span", Object.assign({ className: 'selected-label' }, { children: [item.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: item.icon })), item.label] })), _jsx("span", Object.assign({ className: 'removeIcon', onClick: event => {
-                        this.removeSelectedItem(event, item.id);
-                    } }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }))] }), index));
-    }
-    renderSelection() {
-        const { options, counterMessage, renderCounterMessage } = this.props;
-        const { selectedItems } = this.state;
-        return counterMessage || renderCounterMessage
-            ? this.renderCounterMessage(selectedItems, counterMessage, renderCounterMessage)
-            : this.buildSelectionRepresentation(options);
-    }
-    renderPlaceholder(placeholder) {
-        return placeholder ? _jsx("span", Object.assign({ className: 'placeholder' }, { children: placeholder })) : _jsx("span", {});
-    }
-    renderToggle() {
-        const { isOpen, selectedItems } = this.state;
-        const { name, id = name, tabIndex, disabled, useFilter, bsSize, placeholder, counterMessage, renderCounterMessage, } = this.props;
-        logDeprecatedWarnings(warningProps, this.props, 'Multiselect');
-        const wrapperClassNames = classNames('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg', // TODO: deprecate since it's not consistent
-        bsSize === 'small' && 'input-sm', // TODO: deprecate since it's not consistent
-        bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
-        const showPlaceholder = !selectedItems.length && !this.props.showUnselectedItemIcons;
-        // Note: due to issues with nested events in Firefox (for toggle and inside the remove)
-        // the toggle element must not be a <button> but a div.
-        return (_jsxs("div", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: this.onToggle, onKeyDown: this.handleToggleKeyDown, ref: node => (this.refToggle = node) }, { children: [showPlaceholder ? this.renderPlaceholder(placeholder) : this.renderSelection(), useFilter && isOpen && !counterMessage && !renderCounterMessage && this.renderFilterInput(), _jsx("span", { className: 'caret' })] })));
-    }
-    renderDropdownMenu() {
-        const { pullRight, noItemMessage } = this.props;
-        const options = this.state.filteredOptions.map(option => {
-            option.selected = this.state.selectedItems.indexOf(option.id) !== -1;
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+import BaseSelectDropdown, { filterOptions } from './BaseSelectDropdown';
+import MultiselectToggleCounter from './MultiselectToggleCounter';
+import MultiselectToggleSelection from './MultiselectToggleSelection';
+import MultiselectToggleFilter from './MultiselectToggleFilter';
+import MultiselectTogglePlaceholder from './MultiselectTogglePlaceholder';
+import useClickOutside from '../../useClickOutside';
+import useMergeRefs from '../../hooks/useMergeRefs';
+import WithFeedbackAndAddon from './WithFeedbackAndAddon';
+const DEFAULT_FOCUSED_ITEM_INDEX = -1;
+const Multiselect = (props) => {
+    const { name, id = name, options = [], value, onChange = noop, placeholder, 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' } = props, remainingProps = __rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItemIds, setSelectedItemIds] = useState(value || []);
+    const [isFilterActive, setIsFilterActive] = useState(false);
+    const [filterValue, setFilterValue] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [itemDOMValues, setItemDOMValues] = useState([]);
+    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);
+    const [requestItemDOMValues, setRequestItemDOMValues] = useState(false);
+    const [keyboardUsed, setKeyboardUsed] = useState(false);
+    const refToggle = useRef(null);
+    const refMultiSelectWrapper = useRef(null);
+    const ref = useClickOutside(() => closeMenu());
+    const mergedSelectRefs = useMergeRefs(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 = useRef(true);
+    if (firstRenderRef.current) {
+        updateSelectedItems(options, value);
+        firstRenderRef.current = false;
+    }
+    // Update selection based on changed value prop
+    const [previousValue, setPreviousValue] = useState(value);
+    if (!isEqual(value, previousValue)) {
+        updateSelectedItems(options, value);
+        setPreviousValue(value);
+    }
+    // Update options when they have changed from the outside
+    const [previousOptions, setPreviousOptions] = useState(options);
+    if (!isEqual(options, previousOptions)) {
+        updateSelectedItems(options, value);
+        setFilteredOptions(options);
+        setRequestItemDOMValues(true);
+        setPreviousOptions(options);
+    }
+    const updateDOMValues = (updatedItemDOMValues = []) => {
+        setItemDOMValues(updatedItemDOMValues);
+        setRequestItemDOMValues(false);
+    };
+    const renderFilter = () => (_jsx(MultiselectToggleFilter, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange, multiline: multiline }));
+    const renderSelection = () => {
+        if (counterMessage || renderCounterMessage) {
+            return (_jsx(MultiselectToggleCounter, { selectedAmount: selectedItemIds.length, counterMessage: counterMessage, customRenderer: renderCounterMessage }));
+        }
+        return (_jsx(MultiselectToggleSelection, Object.assign({ options: options, selectedItemIds: selectedItemIds, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons, onRemoveItem: handleRemoveSelectedItem, multiline: multiline, hasInputAddon: !!inputAddon, hasFilter: useFilter }, { children: multiline && renderFilter() })));
+    };
+    const renderToggle = () => {
+        const wrapperClassNames = classNames('dropdown-toggle', 'form-control', 'text-left', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
+        const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;
+        const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
+        const toggleButton = (_jsxs("button", Object.assign({ 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 ? _jsx(MultiselectTogglePlaceholder, { placeholder: placeholder }) : renderSelection(), showFilter && !multiline && renderFilter(), _jsx("span", { className: 'caret' })] })));
+        if (!inputAddon && !errorMessage && !warningMessage) {
+            return toggleButton;
+        }
+        return (_jsx(WithFeedbackAndAddon, Object.assign({ 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 (_jsx(BaseDropdownMenu, { isOpen: this.state.isOpen, options: options, keyboardUsed: this.state.keyboardUsed, updateDOMValues: this.updateDOMValues, onOpen: this.onOpenMenu, onSelect: this.onOptionChange, onClose: this.closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true }));
-    }
-    renderFilterInput() {
-        const inputClasses = classNames('multiselect-filter-input', !this.state.selectedItems.length && 'multiselect-filter-input-placeholder', (this.state.isFilterActive || this.state.filterValue) && 'multiselect-filter-input-active');
-        return (_jsx("input", { type: 'text', className: inputClasses, autoFocus: true, onChange: this.handleFilterChange, defaultValue: this.state.filterValue }));
-    }
-    filterOptions(itemDOMValues, filterValue, options) {
-        const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));
-        // Filter the options accodring 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(value => value.id === option.id);
-        });
-    }
-    handleFilterChange(event) {
+        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
+    };
+    const handleFilterChange = (event) => {
         event.preventDefault();
-        const filterValue = event.currentTarget.value;
-        const filteredOptions = this.filterOptions(this.state.itemDOMValues, filterValue, this.props.options);
+        const targetFilterValue = event.currentTarget.value;
+        const optionsFiltered = filterOptions(itemDOMValues, targetFilterValue, options);
         // highlight the first item of the search result if at least one item was found
-        const newFocusedItemIndex = filteredOptions.length > 0 ? 0 : -1;
-        this.setState(() => ({
-            isFilterActive: true,
-            filterValue,
-            filteredOptions,
-            keyboardUsed: true,
-            focusedItemIndex: newFocusedItemIndex,
-        }));
-    }
-    onOptionChange(event, selectedItem) {
-        event.preventDefault();
-        // prevent selecting disabled Items
-        if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.disabled) {
+        const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;
+        setIsFilterActive(true);
+        setFilterValue(targetFilterValue);
+        setFilteredOptions(optionsFiltered);
+        setKeyboardUsed(true);
+        setFocusedItemIndex(newFocusedItemIndex);
+    };
+    const onOptionChange = (currentSelectedItem) => {
+        // prevent selecting disabled Items via keyboard
+        if (currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.disabled) {
             return;
         }
-        const newSelectedItems = this.updateSelection(selectedItem.id);
-        this.setState(() => ({
-            selectedItems: newSelectedItems,
-            isFilterActive: false,
-            filterValue: '',
-            filteredOptions: this.props.options,
-        }));
-        this.props.onChange(this.state.selectedItems);
-    }
-    updateSelection(selectedItemId) {
-        const newSelectedItems = this.state.selectedItems;
-        const itemIndex = this.state.selectedItems.indexOf(selectedItemId);
+        const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;
+        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);
         }
@@ -188,134 +122,57 @@ export class Multiselect extends Component {
             newSelectedItems.push(selectedItemId);
         }
         return newSelectedItems;
-    }
-    removeSelectedItem(event, itemId) {
+    };
+    const handleRemoveSelectedItem = (event, itemId) => {
         event.stopPropagation();
-        const newSelectedItems = this.updateSelection(itemId);
-        this.setState(() => ({
-            selectedItems: newSelectedItems,
-        }));
-        if (this.props.onChange) {
-            this.props.onChange(this.state.selectedItems);
-        }
-    }
-    isAutoDropActive() {
-        return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
-    }
-    handleToggleKeyDown(event) {
-        switch (event.keyCode) {
-            case 32:
-                if (!this.state.isOpen) {
+        const newSelectedItems = updateSelection(itemId);
+        setSelectedItemIds(newSelectedItems);
+        onChange(newSelectedItems);
+    };
+    const handleToggleKeyDown = (event) => {
+        switch (event.key) {
+            case 'Space':
+                if (!isOpen) {
                     // open on space
                     event.preventDefault();
-                    this.onToggle(event);
+                    onToggle(event);
                 }
                 break;
-            case 13:
-                if (!this.state.isOpen) {
+            case 'Enter':
+                if (!isOpen) {
                     // open on enter
                     event.preventDefault();
-                    this.onToggle(event);
+                    onToggle(event);
                 }
                 break;
             default:
                 break;
         }
-    }
-    onToggle(event) {
-        // Dont 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
+    };
+    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 (this.props.disabled || this.state.isFilterActive) {
+        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 keyboardUsed = event.detail === 0;
-        this.setState({
-            isOpen: !this.state.isOpen,
-            keyboardUsed,
-        });
-    }
-    onOpenMenu(dropup) {
-        const node = ReactDOM.findDOMNode(this);
-        if (dropup) {
-            node.classList.add('dropup');
-        }
-        else {
-            node.classList.remove('dropup');
-        }
-    }
-    closeMenu() {
-        if (this.state.isOpen) {
-            this.setState(() => ({
-                isOpen: false,
-                isFilterActive: false,
-                keyboardUsed: false,
-            }));
-            this.refToggle.focus();
-        }
-    }
-    handleClickOutside() {
-        this.closeMenu();
-    }
-}
-Multiselect.defaultProps = {
-    onChange: () => { },
-    options: [],
-    selectedItems: [],
-    disabled: false,
-    pullRight: false,
-    hasError: false,
-    useFilter: false,
-    tabIndex: 0,
-    showSelectedItemIcon: false,
-    showUnselectedItemIcons: false,
-};
-Multiselect.propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.shape({
-        // Identify an option
-        id: PropTypes.string.isRequired,
-        // A label to show in body
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-        // An icon to show in body
-        icon: PropTypes.node,
-        // Mark option as selected
-        selected: PropTypes.bool,
-        // Mark option as disabled
-        disabled: PropTypes.bool,
-        // Mark option as groupHeader
-        header: PropTypes.bool,
-    })),
-    // Callback params: option to change
-    onChange: PropTypes.func,
-    // Text to display when no menu item is selected
-    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    dropup: PropTypes.bool,
-    pullRight: PropTypes.bool,
-    autoDropDirection: PropTypes.bool,
-    value: PropTypes.array,
-    bsSize: PropTypes.oneOf(['sm', 'lg', 'small', 'large']),
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    tabIndex: PropTypes.number,
-    hasError: PropTypes.bool,
-    useFilter: PropTypes.bool,
-    // Text to display when no menu item is selected
-    noItemMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    // Text to display a counter for selected items
-    counterMessage: PropTypes.shape({
-        one: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-        many: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    }),
-    // External function to render a counter message for selected items
-    renderCounterMessage: PropTypes.func,
-    // shows icons as selected values
-    showSelectedItemIcon: PropTypes.bool,
-    // shows icons always with active or inactive state
-    showUnselectedItemIcons: PropTypes.bool,
+        const isKeyboardUsed = event.detail === 0;
+        setIsOpen(!isOpen);
+        setKeyboardUsed(isKeyboardUsed);
+    };
+    const closeMenu = () => {
+        var _a;
+        if (isOpen) {
+            setIsOpen(false);
+            setIsFilterActive(false);
+            setKeyboardUsed(false);
+            (_a = refToggle === null || refToggle === void 0 ? void 0 : refToggle.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const wrapperClasses = classNames('select', 'multiselect', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: mergedSelectRefs }, { children: [renderToggle(), renderDropdownMenu()] })));
 };
-export default onClickOutside(Multiselect);
+export default Multiselect;

package/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/components/selects/MultiselectToggleCounter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+const MultiselectToggleCounter = (props) => {
+    const { customRenderer, selectedAmount, counterMessage } = props;
+    if (customRenderer) {
+        return customRenderer(selectedAmount);
+    }
+    if (counterMessage) {
+        const message = selectedAmount === 1 ? counterMessage.one : counterMessage.many;
+        return (_jsxs("span", { children: [_jsx("span", Object.assign({ className: 'option-counter margin-right-1' }, { children: selectedAmount })), _jsx("span", Object.assign({ className: 'counter-message margin-left-1' }, { children: message }))] }));
+    }
+};
+export default MultiselectToggleCounter;

package/components/selects/MultiselectToggleFilter.d.ts

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

package/components/selects/MultiselectToggleFilter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+const MultiselectToggleFilter = (props) => {
+    const { isActive, selectedItemIds, filterValue, multiline, onFilterChange } = props;
+    const inputClasses = classNames('multiselect-filter-input', isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active', multiline && 'padding-left-0');
+    return (_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, defaultValue: filterValue }));
+};
+export default MultiselectToggleFilter;

package/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/components/selects/MultiselectTogglePlaceholder.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+const MultiselectTogglePlaceholder = ({ placeholder }) => {
+    return placeholder ? _jsx("span", Object.assign({ className: 'placeholder' }, { children: placeholder })) : _jsx("span", {});
+};
+export default MultiselectTogglePlaceholder;

package/components/selects/MultiselectToggleSelection.d.ts

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from 'react';
+import type { SelectOption } from './BaseSelectDropdown';
+export type MultiselectToggleSelectionProps = {
+    options: SelectOption[];
+    selectedItemIds: string[];
+    showSelectedItemIcon: boolean;
+    showUnselectedItemIcons: boolean;
+    multiline: boolean;
+    hasInputAddon: boolean;
+    hasFilter: boolean;
+    onRemoveItem: (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => void;
+};
+declare const MultiselectToggleSelection: (props: PropsWithChildren<MultiselectToggleSelectionProps>) => import("react/jsx-runtime").JSX.Element | null;
+export default MultiselectToggleSelection;

package/components/selects/MultiselectToggleSelection.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+const MultiselectToggleSelection = (props) => {
+    const { options, selectedItemIds, showSelectedItemIcon, showUnselectedItemIcons, multiline, hasInputAddon, hasFilter, onRemoveItem, children, } = props;
+    if (!options || isEmpty(options)) {
+        return null;
+    }
+    const isItemSelected = (item) => {
+        return selectedItemIds.indexOf(item.id) !== -1;
+    };
+    const renderSelectionItem = (item, index) => {
+        if (showSelectedItemIcon) {
+            const inactiveClassNames = classNames('margin-right-5', !isItemSelected(item) && 'inactiveIcon');
+            return (_jsx("span", Object.assign({ className: inactiveClassNames }, { children: item.icon }), item.id));
+        }
+        return (_jsxs("span", Object.assign({ className: 'selected-option' }, { children: [_jsxs("span", Object.assign({ className: 'selected-label' }, { children: [item.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: item.icon })), item.label] })), _jsx("span", Object.assign({ className: 'removeIcon', onClick: event => {
+                        onRemoveItem(event, item.id);
+                    } }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }))] }), index));
+    };
+    const optionListClassNames = classNames(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list', multiline && 'flex-wrap', hasInputAddon && 'margin-left-0', hasFilter && 'padding-left-1');
+    return (_jsxs("span", Object.assign({ className: optionListClassNames }, { children: [options
+                .filter(option => (showUnselectedItemIcons ? !option.header : isItemSelected(option)))
+                .map((option, index) => renderSelectionItem(option, index)), children] })));
+};
+export default MultiselectToggleSelection;

package/components/selects/NoItemMessage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type NoItemMessageProps = {
+    noItemMessage: string | React.ReactNode;
+    className?: string;
+};
+declare const NoItemMessage: (props: NoItemMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default NoItemMessage;

package/components/selects/NoItemMessage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+const NoItemMessage = (props) => {
+    const { noItemMessage, className } = props;
+    if (!noItemMessage) {
+        return null;
+    }
+    return (_jsx("ul", Object.assign({ className: className, role: 'menu' }, { children: _jsx("li", Object.assign({ className: 'no-item-message disabled', role: 'presentation' }, { children: _jsx("a", Object.assign({ role: 'menuitem' }, { children: _jsx("i", { children: noItemMessage }) })) })) })));
+};
+export default NoItemMessage;