@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0

package/components/selects/Multiselect.js

@@ -1,187 +1,207 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import classNames from 'classnames';
-import { isEqual } from 'es-toolkit/predicate';
-import { isEmpty } from 'es-toolkit/compat';
-import { noop } from 'es-toolkit/function';
-import BaseSelectDropdown, { filterOptions } from "./BaseSelectDropdown.js";
-import MultiselectToggleCounter from "./MultiselectToggleCounter.js";
-import MultiselectToggleSelection from "./MultiselectToggleSelection.js";
-import MultiselectToggleFilter from "./MultiselectToggleFilter.js";
-import MultiselectTogglePlaceholder from "./MultiselectTogglePlaceholder.js";
-import useClickOutside from "../../useClickOutside.js";
-import useMergeRefs from "../../hooks/useMergeRefs.js";
-import WithFeedbackAndAddon from "./WithFeedbackAndAddon.js";
-const DEFAULT_FOCUSED_ITEM_INDEX = -1;
-const Multiselect = (props) => {
-    const { name, id = name, options = [], value, onChange = noop, 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] = 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 [keyboardUsed, setKeyboardUsed] = useState(false);
-    const refToggle = useRef(null);
-    const refMultiSelectWrapper = useRef(null);
-    const ref = useClickOutside(event => {
-        // Check if the click is truly outside the multiselect wrapper
-        if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target)) {
-            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;
+import { jsxs as C, jsx as c, Fragment as xe } from "react/jsx-runtime";
+import { useState as n, useRef as x } from "react";
+import L from "classnames";
+import { isEqual as q } from "es-toolkit/predicate";
+import { isEmpty as ve } from "es-toolkit/compat";
+import { noop as Ae } from "es-toolkit/function";
+import Te, { filterOptions as ye } from "./BaseSelectDropdown.js";
+import Ne from "./MultiselectToggleCounter.js";
+import Re from "./MultiselectToggleSelection.js";
+import Ee from "./MultiselectToggleFilter.js";
+import Ve from "./MultiselectTogglePlaceholder.js";
+import ke from "../../hooks/useClickOutside.js";
+import Pe from "../../hooks/useMergeRefs.js";
+import Ue from "./WithFeedbackAndAddon.js";
+const z = -1, Ze = (X) => {
+  const {
+    name: v,
+    id: G = v,
+    options: o = [],
+    value: a,
+    onChange: A = Ae,
+    placeholder: H,
+    isLoading: J = !1,
+    dropup: Q = !1,
+    pullRight: Y = !1,
+    autoDropDirection: Z = !0,
+    bsSize: p = "md",
+    disabled: T = !1,
+    tabIndex: $ = 0,
+    hasError: ee = !1,
+    useFilter: y = !1,
+    multiline: d = !1,
+    noItemMessage: te,
+    counterMessage: m,
+    renderCounterMessage: g,
+    showSelectedItemIcon: se = !1,
+    showUnselectedItemIcons: N = !1,
+    className: R,
+    inputAddon: h,
+    errorMessage: E,
+    warningMessage: V,
+    messageWhiteSpace: oe = "normal",
+    btnClassName: k,
+    dropdownClassName: ne,
+    ...re
+  } = X, [r, I] = n(!1), [l, u] = n(a || []), [P, w] = n(!1), [U, F] = n(""), [le, f] = n(o), [ie, ae] = n([]), [ce, K] = n(z), [de, S] = n(!1), B = x(null), M = x(null), ue = ke((e) => {
+    M.current && !M.current.contains(e.target) && j();
+  }), fe = Pe(M, ue), O = (e, t) => {
+    if (t)
+      u(t);
+    else if (e) {
+      const s = e.filter((i) => i.selected);
+      u(s.map((i) => i.id));
     }
-    // Update selection based on changed value prop
-    const [previousValue, setPreviousValue] = useState(value);
-    if (!isEqual(value, previousValue)) {
-        updateSelectedItems(options, value);
-        setPreviousValue(value);
+  }, W = x(!0);
+  W.current && (O(o, a), W.current = !1);
+  const [pe, me] = n(a);
+  q(a, pe) || (O(o, a), me(a));
+  const [ge, he] = n(o);
+  q(o, ge) || (O(o, a), f(o), he(o));
+  const Ie = (e = []) => {
+    ae(e);
+  }, D = () => /* @__PURE__ */ c(
+    Ee,
+    {
+      isActive: P || !!U,
+      selectedItemIds: l,
+      filterValue: U,
+      onFilterChange: Me
     }
-    // Update options when they have changed from the outside
-    const [previousOptions, setPreviousOptions] = useState(options);
-    if (!isEqual(options, previousOptions)) {
-        updateSelectedItems(options, value);
-        setFilteredOptions(options);
-        setPreviousOptions(options);
+  ), we = () => m || g ? /* @__PURE__ */ c(
+    Ne,
+    {
+      selectedAmount: l.length,
+      counterMessage: m,
+      customRenderer: g
     }
-    const updateDOMValues = (updatedItemDOMValues = []) => {
-        setItemDOMValues(updatedItemDOMValues);
-    };
-    const renderFilter = () => (_jsx(MultiselectToggleFilter, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange }));
-    const renderSelection = () => {
-        if (counterMessage || renderCounterMessage) {
-            return (_jsx(MultiselectToggleCounter, { selectedAmount: selectedItemIds.length, counterMessage: counterMessage, customRenderer: renderCounterMessage }));
-        }
-        return (_jsx(MultiselectToggleSelection, { 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', btnClassName && btnClassName, 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", { 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 ? (_jsxs(_Fragment, { children: [_jsx(MultiselectTogglePlaceholder, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), _jsx("span", { className: 'caret' })] }));
-        if (!inputAddon && !errorMessage && !warningMessage) {
-            return toggleButton;
-        }
-        return (_jsx(WithFeedbackAndAddon, { 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(BaseSelectDropdown, { 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 = 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 = classNames('select', 'multiselect', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
-    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
+  ) : /* @__PURE__ */ c(
+    Re,
+    {
+      options: o,
+      selectedItemIds: l,
+      showSelectedItemIcon: se,
+      showUnselectedItemIcons: N,
+      onRemoveItem: De,
+      multiline: d,
+      hasInputAddon: !!h,
+      hasFilter: y,
+      children: d && D()
+    }
+  ), Fe = () => {
+    const e = L(
+      "dropdown-toggle",
+      "form-control",
+      "text-left",
+      k && k,
+      p === "sm" && "input-sm",
+      p === "lg" && "input-lg",
+      d && "height-auto",
+      T && "disabled"
+    ), t = ve(l) && !N, s = y && r && !m && !g, i = /* @__PURE__ */ C(
+      "button",
+      {
+        type: "button",
+        id: G,
+        name: v,
+        className: e,
+        "data-toggle": "dropdown",
+        tabIndex: $,
+        "aria-haspopup": "true",
+        "aria-expanded": r,
+        onClick: b,
+        onKeyDown: be,
+        ref: B,
+        children: [
+          t ? /* @__PURE__ */ C(xe, { children: [
+            /* @__PURE__ */ c(Ve, { placeholder: H }),
+            s && D()
+          ] }) : we(),
+          s && !d && D(),
+          /* @__PURE__ */ c("span", { className: "caret" })
+        ]
+      }
+    );
+    return !h && !E && !V ? i : /* @__PURE__ */ c(
+      Ue,
+      {
+        bsSize: p,
+        inputAddon: h,
+        errorMessage: E,
+        warningMessage: V,
+        messageWhiteSpace: oe,
+        children: i
+      }
+    );
+  }, Se = () => {
+    const e = le.map((t) => (t.selected = l.indexOf(t.id) !== -1, t));
+    return /* @__PURE__ */ c(
+      Te,
+      {
+        isOpen: r,
+        isLoading: J,
+        options: e,
+        focusedItemIndex: ce,
+        keyboardUsed: de,
+        updateDOMValues: Ie,
+        onSelect: Oe,
+        onClose: j,
+        noItemMessage: te,
+        pullRight: Y,
+        useActiveClass: !0,
+        dropup: Q,
+        autoDropDirection: Z,
+        dropdownClassName: ne
+      }
+    );
+  }, Me = (e) => {
+    e.preventDefault();
+    const t = e.currentTarget.value, s = ye(ie, t, o);
+    r || I(!0);
+    const i = s.length > 0 ? 0 : -1;
+    w(!0), F(t), f(s), s.length > 0 && S(!0), K(i);
+  }, Oe = (e) => {
+    if (e?.disabled)
+      return;
+    const t = e ? _(e.id) : l;
+    u(t), w(!1), F(""), f(o), A(t);
+  }, _ = (e) => {
+    const t = [...l], s = l.indexOf(e);
+    return s !== -1 ? t.splice(s, 1) : t.push(e), t;
+  }, De = (e, t) => {
+    e.stopPropagation();
+    const s = _(t);
+    u(s), A(s);
+  }, be = (e) => {
+    switch (e.key) {
+      case "Space":
+        r || (e.preventDefault(), b(e));
+        break;
+      case "Enter":
+        r || (e.preventDefault(), b(e));
+        break;
+    }
+  }, b = (e) => {
+    if (T || P)
+      return;
+    const t = e.detail === 0;
+    I((s) => !s), S(t);
+  }, j = () => {
+    r && (I(!1), w(!1), F(""), f(o), K(z), S(!1), B?.current?.focus());
+  }, Ce = L(
+    "select",
+    "multiselect",
+    "dropdown",
+    r && "open",
+    ee && "has-error",
+    R && R
+  );
+  return /* @__PURE__ */ C("div", { ...re, className: Ce, ref: fe, children: [
+    Fe(),
+    Se()
+  ] });
+};
+export {
+  Ze as default
 };
-export default Multiselect;
+//# sourceMappingURL=Multiselect.js.map

package/components/selects/Multiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Multiselect.js","sources":["../../../src/components/selects/Multiselect.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport MultiselectToggleCounter from './MultiselectToggleCounter';\nimport MultiselectToggleSelection from './MultiselectToggleSelection';\nimport MultiselectToggleFilter from './MultiselectToggleFilter';\nimport MultiselectTogglePlaceholder from './MultiselectTogglePlaceholder';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\nexport type MultiselectCounterMessage = {\n    /**\n     * Text that will be used when a single item is selected.\n     */\n    one: string | React.ReactNode;\n\n    /**\n     * Text that will be used when multiple item are selected.\n     */\n    many: string | React.ReactNode;\n};\n\nexport type MultiselectOption = SelectOption & {};\n\nexport type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     */\n    name?: string;\n\n    /**\n     * Passed as HTML attribute to the toggle button.\n     *\n     * @default Uses the value given to `name` if not provided explicitly.\n     */\n    id?: string;\n\n    /**\n     * Items to display in the dropdown menu.\n     *\n     * @default []\n     */\n    options?: T[];\n\n    /**\n     * Sets the ids of the selected options when the component is already mounted.\n     */\n    value?: string[];\n\n    /**\n     * Callback function triggered when an item is selected.\n     *\n     * @param selectedItemIds Array containing all the IDs that have been selected.\n     *\n     * @default () => {}\n     */\n    onChange?: (selectedItemIds: string[]) => void;\n\n    /**\n     * Text to display when nothing is selected.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines whether the dropdown opens upwards.\n     *\n     * Set to `true` additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown toggle.\n     *\n     * Set to 'true' additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Enables or disables the autoDrop positioning feature.\n     *\n     * When enabled, the option list opens below or above the input depending on the surrounding space.\n     *\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the menu items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Defines the size of the select to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Option to disable the opening of the option list.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Sets the input's tabindex attribute.\n     *\n     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being\n     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for\n     * sequential focus navigation.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defines whether the Bootstrap error classes shall be added to the toggle element.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines whether the selected items wrap around within the dropdown toggle.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the component should be filterable.\n     *\n     * @default false\n     */\n    useFilter?: boolean;\n\n    /**\n     * Text that shall be shown when not match was found when filtering.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Object that will render the number of selected items instead of individual items.\n     *\n     * Using this prop will disable the filter functionality.\n     */\n    counterMessage?: MultiselectCounterMessage;\n\n    /**\n     * Optional render function that is used to render the message how many items have been selected.\n     *\n     * Using this prop will disable the filter functionality.\n     *\n     * @param selectedAmount The total amount of selected items.\n     */\n    renderCounterMessage?: (selectedAmount: number) => React.ReactNode;\n\n    /**\n     * Set to show only the icon and not the label of selected item.\n     *\n     * @default false\n     */\n    showSelectedItemIcon?: boolean;\n\n    /**\n     * Set to show all item icons within the toggle element.\n     *\n     * Selected items are highlighted and unselected items are shown as inactive.\n     *\n     * @default false\n     */\n    showUnselectedItemIcons?: boolean;\n\n    /**\n     * Additional classes to be set to the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the select/input.\n     */\n    btnClassName?: string;\n\n    /**\n     * Additional classes to be set to the select wrapper\n     */\n    className?: string;\n};\n\nconst Multiselect = (props: MultiselectProps<MultiselectOption>) => {\n    const {\n        name,\n        id = name,\n        options = [],\n        value,\n        onChange = noop,\n        placeholder,\n        isLoading = false,\n        dropup = false,\n        pullRight = false,\n        autoDropDirection = true,\n        bsSize = 'md',\n        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        multiline = false,\n        noItemMessage,\n        counterMessage,\n        renderCounterMessage,\n        showSelectedItemIcon = false,\n        showUnselectedItemIcons = false,\n        className,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        btnClassName,\n        dropdownClassName,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [selectedItemIds, setSelectedItemIds] = useState<string[]>(value || []);\n    const [isFilterActive, setIsFilterActive] = useState(false);\n    const [filterValue, setFilterValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<MultiselectOption[]>(options);\n    const [itemDOMValues, setItemDOMValues] = useState<OptionDOMValue[]>([]);\n    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(false);\n\n    const refToggle = useRef<HTMLButtonElement>(null);\n    const refMultiSelectWrapper = useRef<HTMLDivElement>(null);\n\n    const ref = useClickOutside(event => {\n        // Check if the click is truly outside the multiselect wrapper\n        if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target as Node)) {\n            closeMenu();\n        }\n    });\n\n    const mergedSelectRefs = useMergeRefs(refMultiSelectWrapper, ref);\n\n    const updateSelectedItems = (optionsToCheck: MultiselectOption[], selectedItem: string[] | undefined) => {\n        if (selectedItem) {\n            setSelectedItemIds(selectedItem);\n        } else if (optionsToCheck) {\n            const filteredBySelection = optionsToCheck.filter(item => item.selected);\n            setSelectedItemIds(filteredBySelection.map(option => option.id));\n        }\n    };\n\n    // Update the selectedItems on first render.\n    // Note, we use a ref instead of an effect as the effect is triggered too late\n    const firstRenderRef = useRef<boolean>(true);\n    if (firstRenderRef.current) {\n        updateSelectedItems(options, value);\n        firstRenderRef.current = false;\n    }\n\n    // Update selection based on changed value prop\n    const [previousValue, setPreviousValue] = useState(value);\n    if (!isEqual(value, previousValue)) {\n        updateSelectedItems(options, value);\n        setPreviousValue(value);\n    }\n\n    // Update options when they have changed from the outside\n    const [previousOptions, setPreviousOptions] = useState(options);\n    if (!isEqual(options, previousOptions)) {\n        updateSelectedItems(options, value);\n        setFilteredOptions(options);\n        setPreviousOptions(options);\n    }\n\n    const updateDOMValues = (updatedItemDOMValues: OptionDOMValue[] = []) => {\n        setItemDOMValues(updatedItemDOMValues);\n    };\n\n    const renderFilter = () => (\n        <MultiselectToggleFilter\n            isActive={isFilterActive || !!filterValue}\n            selectedItemIds={selectedItemIds}\n            filterValue={filterValue}\n            onFilterChange={handleFilterChange}\n        />\n    );\n\n    const renderSelection = () => {\n        if (counterMessage || renderCounterMessage) {\n            return (\n                <MultiselectToggleCounter\n                    selectedAmount={selectedItemIds.length}\n                    counterMessage={counterMessage}\n                    customRenderer={renderCounterMessage}\n                />\n            );\n        }\n\n        return (\n            <MultiselectToggleSelection\n                options={options}\n                selectedItemIds={selectedItemIds}\n                showSelectedItemIcon={showSelectedItemIcon}\n                showUnselectedItemIcons={showUnselectedItemIcons}\n                onRemoveItem={handleRemoveSelectedItem}\n                multiline={multiline}\n                hasInputAddon={!!inputAddon}\n                hasFilter={useFilter}\n            >\n                {multiline && renderFilter()}\n            </MultiselectToggleSelection>\n        );\n    };\n\n    const renderToggle = () => {\n        const wrapperClassNames = classNames(\n            'dropdown-toggle',\n            'form-control',\n            'text-left',\n            btnClassName && btnClassName,\n            bsSize === 'sm' && 'input-sm',\n            bsSize === 'lg' && 'input-lg',\n            multiline && 'height-auto',\n            disabled && 'disabled'\n        );\n\n        const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;\n        const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={wrapperClassNames}\n                data-toggle='dropdown'\n                tabIndex={tabIndex}\n                aria-haspopup='true'\n                aria-expanded={isOpen}\n                onClick={onToggle}\n                onKeyDown={handleToggleKeyDown}\n                ref={refToggle}\n            >\n                {showPlaceholder ? (\n                    <>\n                        <MultiselectTogglePlaceholder placeholder={placeholder} />\n                        {showFilter && renderFilter()}\n                    </>\n                ) : (\n                    renderSelection()\n                )}\n                {showFilter && !multiline && renderFilter()}\n                <span className='caret' />\n            </button>\n        );\n\n        if (!inputAddon && !errorMessage && !warningMessage) {\n            return toggleButton;\n        }\n\n        return (\n            <WithFeedbackAndAddon\n                bsSize={bsSize}\n                inputAddon={inputAddon}\n                errorMessage={errorMessage}\n                warningMessage={warningMessage}\n                messageWhiteSpace={messageWhiteSpace}\n            >\n                {toggleButton}\n            </WithFeedbackAndAddon>\n        );\n    };\n\n    const renderDropdownMenu = () => {\n        const nonSelectedOptions = filteredOptions.map(option => {\n            option.selected = selectedItemIds.indexOf(option.id) !== -1;\n            return option;\n        });\n\n        return (\n            <BaseSelectDropdown\n                isOpen={isOpen}\n                isLoading={isLoading}\n                options={nonSelectedOptions}\n                focusedItemIndex={focusedItemIndex}\n                keyboardUsed={keyboardUsed}\n                updateDOMValues={updateDOMValues}\n                onSelect={onOptionChange}\n                onClose={closeMenu}\n                noItemMessage={noItemMessage}\n                pullRight={pullRight}\n                useActiveClass\n                dropup={dropup}\n                autoDropDirection={autoDropDirection}\n                dropdownClassName={dropdownClassName}\n            />\n        );\n    };\n\n    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const targetFilterValue = event.currentTarget.value;\n        const optionsFiltered = filterOptions(itemDOMValues, targetFilterValue, options);\n\n        if (!isOpen) {\n            // Ensure dropdown stays open when filtering\n            setIsOpen(true);\n        }\n\n        const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;\n\n        setIsFilterActive(true);\n        setFilterValue(targetFilterValue);\n        setFilteredOptions(optionsFiltered);\n\n        if (optionsFiltered.length > 0) {\n            // Only set keyboard used if there are filtered options\n            setKeyboardUsed(true);\n        }\n\n        setFocusedItemIndex(newFocusedItemIndex);\n    };\n\n    const onOptionChange = (currentSelectedItem: MultiselectOption | undefined) => {\n        // prevent selecting disabled Items via keyboard\n        if (currentSelectedItem?.disabled) {\n            return;\n        }\n\n        const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;\n\n        // Reset everything after an option was selected. Remove the filter again.\n        setSelectedItemIds(updatedSelectedItems);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n\n        onChange(updatedSelectedItems);\n    };\n\n    const updateSelection = (selectedItemId: string) => {\n        const newSelectedItems = [...selectedItemIds];\n        const itemIndex = selectedItemIds.indexOf(selectedItemId);\n\n        if (itemIndex !== -1) {\n            newSelectedItems.splice(itemIndex, 1);\n        } else {\n            newSelectedItems.push(selectedItemId);\n        }\n\n        return newSelectedItems;\n    };\n\n    const handleRemoveSelectedItem = (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => {\n        event.stopPropagation();\n\n        const newSelectedItems = updateSelection(itemId);\n        setSelectedItemIds(newSelectedItems);\n\n        onChange(newSelectedItems);\n    };\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        switch (event.key) {\n            case 'Space':\n                if (!isOpen) {\n                    // open on space\n                    event.preventDefault();\n                    onToggle(event);\n                }\n                break;\n            case 'Enter':\n                if (!isOpen) {\n                    // open on enter\n                    event.preventDefault();\n                    onToggle(event);\n                }\n                break;\n            default:\n                break;\n        }\n    };\n\n    const onToggle = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n        // Don't toggle when component is disabled or an item in the toggle was clicked in order to remove from\n        // selection neither close when filter is active, means entering some filter value\n        // in order to avoid closing menu on space but allow to use it for filtering\n        if (disabled || isFilterActive) {\n            return;\n        }\n\n        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of\n        // type submit by default in HTML. In order to differentiate between real click and a synthetic event\n        // caused by they keyboard, use the event details. A synthetic event is always 0.\n        const isKeyboardUsed = event.detail === 0;\n\n        setIsOpen(prevValue => !prevValue);\n        setKeyboardUsed(isKeyboardUsed);\n    };\n\n    const closeMenu = () => {\n        if (isOpen) {\n            setIsOpen(false);\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            setKeyboardUsed(false);\n\n            refToggle?.current?.focus();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'select',\n        'multiselect',\n        'dropdown',\n        isOpen && 'open',\n        hasError && 'has-error',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClasses} ref={mergedSelectRefs}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Multiselect;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Multiselect","props","name","id","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","disabled","tabIndex","hasError","useFilter","multiline","noItemMessage","counterMessage","renderCounterMessage","showSelectedItemIcon","showUnselectedItemIcons","className","inputAddon","errorMessage","warningMessage","messageWhiteSpace","btnClassName","dropdownClassName","remainingProps","isOpen","setIsOpen","useState","selectedItemIds","setSelectedItemIds","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refToggle","useRef","refMultiSelectWrapper","ref","useClickOutside","event","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItems","optionsToCheck","selectedItem","filteredBySelection","item","option","firstRenderRef","previousValue","setPreviousValue","isEqual","previousOptions","setPreviousOptions","updateDOMValues","updatedItemDOMValues","renderFilter","jsx","MultiselectToggleFilter","handleFilterChange","renderSelection","MultiselectToggleCounter","MultiselectToggleSelection","handleRemoveSelectedItem","renderToggle","wrapperClassNames","classNames","showPlaceholder","isEmpty","showFilter","toggleButton","jsxs","onToggle","handleToggleKeyDown","Fragment","MultiselectTogglePlaceholder","WithFeedbackAndAddon","renderDropdownMenu","nonSelectedOptions","BaseSelectDropdown","onOptionChange","targetFilterValue","optionsFiltered","filterOptions","newFocusedItemIndex","currentSelectedItem","updatedSelectedItems","updateSelection","selectedItemId","newSelectedItems","itemIndex","itemId","isKeyboardUsed","prevValue","wrapperClasses"],"mappings":"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"}

package/components/selects/MultiselectToggleCounter.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import type { MultiselectCounterMessage } from './Multiselect';
+import { default as React } from 'react';
+import { MultiselectCounterMessage } from './Multiselect';
 export type MultiselectToggleCounterProps = {
     customRenderer?: (selectedAmount: number) => React.ReactNode;
     counterMessage?: MultiselectCounterMessage;

package/components/selects/MultiselectToggleCounter.js

@@ -1,12 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "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 (_jsxs("span", { children: [_jsx("span", { className: 'option-counter margin-right-1', children: selectedAmount }), _jsx("span", { className: 'counter-message margin-left-1', children: message })] }));
-    }
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+const i = (r) => {
+  const { customRenderer: n, selectedAmount: e, counterMessage: s } = r;
+  if (n)
+    return n(e);
+  if (s) {
+    const o = e === 1 ? s.one : s.many;
+    return /* @__PURE__ */ a("span", { children: [
+      /* @__PURE__ */ t("span", { className: "option-counter margin-right-1", children: e }),
+      /* @__PURE__ */ t("span", { className: "counter-message margin-left-1", children: o })
+    ] });
+  }
 };
-export default MultiselectToggleCounter;
+export {
+  i as default
+};
+//# sourceMappingURL=MultiselectToggleCounter.js.map

package/components/selects/MultiselectToggleCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiselectToggleCounter.js","sources":["../../../src/components/selects/MultiselectToggleCounter.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { MultiselectCounterMessage } from './Multiselect';\n\nexport type MultiselectToggleCounterProps = {\n    customRenderer?: (selectedAmount: number) => React.ReactNode;\n    counterMessage?: MultiselectCounterMessage;\n    selectedAmount: number;\n};\n\nconst MultiselectToggleCounter = (props: MultiselectToggleCounterProps): any => {\n    const { customRenderer, selectedAmount, counterMessage } = props;\n\n    if (customRenderer) {\n        return customRenderer(selectedAmount);\n    }\n\n    if (counterMessage) {\n        const message = selectedAmount === 1 ? counterMessage.one : counterMessage.many;\n        return (\n            <span>\n                <span className='option-counter margin-right-1'>{selectedAmount}</span>\n                <span className='counter-message margin-left-1'>{message}</span>\n            </span>\n        );\n    }\n};\n\nexport default MultiselectToggleCounter;\n"],"names":["MultiselectToggleCounter","props","customRenderer","selectedAmount","counterMessage","message","jsx"],"mappings":";AAUA,MAAMA,IAA2B,CAACC,MAA8C;AAC5E,QAAM,EAAE,gBAAAC,GAAgB,gBAAAC,GAAgB,gBAAAC,EAAA,IAAmBH;AAE3D,MAAIC;AACA,WAAOA,EAAeC,CAAc;AAGxC,MAAIC,GAAgB;AAChB,UAAMC,IAAUF,MAAmB,IAAIC,EAAe,MAAMA,EAAe;AAC3E,6BACK,QAAA,EACG,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,iCAAiC,UAAAH,GAAe;AAAA,MAChE,gBAAAG,EAAC,QAAA,EAAK,WAAU,iCAAiC,UAAAD,EAAA,CAAQ;AAAA,IAAA,GAC7D;AAAA,EAER;AACJ;"}

package/components/selects/MultiselectToggleFilter.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type MultiselectToggleFilterProps = {
     isActive: boolean;
     selectedItemIds?: string[];

package/components/selects/MultiselectToggleFilter.js

@@ -1,11 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { isEmpty } from 'es-toolkit/compat';
-const MultiselectToggleFilter = (props) => {
-    const { isActive, selectedItemIds, filterValue, onFilterChange } = props;
-    const inputClasses = classNames('multiselect-filter-input', isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active');
-    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, value: filterValue }));
+import { jsx as o } from "react/jsx-runtime";
+import u from "classnames";
+import { isEmpty as a } from "es-toolkit/compat";
+const p = (e) => {
+  const { isActive: t, selectedItemIds: l, filterValue: s, onFilterChange: i } = e, r = u(
+    "multiselect-filter-input",
+    a(l) && "multiselect-filter-input-placeholder",
+    t && "multiselect-filter-input-active"
+  );
+  return /* @__PURE__ */ o(
+    "input",
+    {
+      type: "text",
+      role: "searchbox",
+      className: r,
+      autoFocus: !0,
+      onChange: i,
+      value: s
+    }
+  );
 };
-export default MultiselectToggleFilter;
+export {
+  p as default
+};
+//# sourceMappingURL=MultiselectToggleFilter.js.map

package/components/selects/MultiselectToggleFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiselectToggleFilter.js","sources":["../../../src/components/selects/MultiselectToggleFilter.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\n\nexport type MultiselectToggleFilterProps = {\n    isActive: boolean;\n    selectedItemIds?: string[];\n    filterValue: string;\n    onFilterChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst MultiselectToggleFilter = (props: MultiselectToggleFilterProps) => {\n    const { isActive, selectedItemIds, filterValue, onFilterChange } = props;\n\n    const inputClasses = classNames(\n        'multiselect-filter-input',\n        isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder',\n        isActive && 'multiselect-filter-input-active'\n    );\n    return (\n        <input\n            type='text'\n            role='searchbox'\n            className={inputClasses}\n            // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter\n            autoFocus\n            onChange={onFilterChange}\n            value={filterValue}\n        />\n    );\n};\n\nexport default MultiselectToggleFilter;\n"],"names":["MultiselectToggleFilter","props","isActive","selectedItemIds","filterValue","onFilterChange","inputClasses","classNames","isEmpty","jsx"],"mappings":";;;AAWA,MAAMA,IAA0B,CAACC,MAAwC;AACrE,QAAM,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,aAAAC,GAAa,gBAAAC,MAAmBJ,GAE7DK,IAAeC;AAAA,IACjB;AAAA,IACAC,EAAQL,CAAe,KAAK;AAAA,IAC5BD,KAAY;AAAA,EAAA;AAEhB,SACI,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAWH;AAAA,MAEX,WAAS;AAAA,MACT,UAAUD;AAAA,MACV,OAAOD;AAAA,IAAA;AAAA,EAAA;AAGnB;"}

package/components/selects/MultiselectTogglePlaceholder.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type MultiselectTogglePlaceholderProps = {
     placeholder: string | React.ReactNode;
 };

package/components/selects/MultiselectTogglePlaceholder.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const MultiselectTogglePlaceholder = ({ placeholder }) => {
-    return placeholder ? _jsx("span", { className: 'placeholder', children: placeholder }) : _jsx("span", {});
+import { jsx as l } from "react/jsx-runtime";
+const a = ({ placeholder: e }) => e ? /* @__PURE__ */ l("span", { className: "placeholder", children: e }) : /* @__PURE__ */ l("span", {});
+export {
+  a as default
 };
-export default MultiselectTogglePlaceholder;
+//# sourceMappingURL=MultiselectTogglePlaceholder.js.map

package/components/selects/MultiselectTogglePlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiselectTogglePlaceholder.js","sources":["../../../src/components/selects/MultiselectTogglePlaceholder.tsx"],"sourcesContent":["import type React from 'react';\n\nexport type MultiselectTogglePlaceholderProps = {\n    placeholder: string | React.ReactNode;\n};\n\nconst MultiselectTogglePlaceholder = ({ placeholder }: MultiselectTogglePlaceholderProps) => {\n    return placeholder ? <span className='placeholder'>{placeholder}</span> : <span />;\n};\n\nexport default MultiselectTogglePlaceholder;\n"],"names":["MultiselectTogglePlaceholder","placeholder"],"mappings":";AAMA,MAAMA,IAA+B,CAAC,EAAE,aAAAC,QAC7BA,sBAAe,QAAA,EAAK,WAAU,eAAe,UAAAA,EAAA,CAAY,sBAAW,QAAA,CAAA,CAAK;"}

package/components/selects/MultiselectToggleSelection.d.ts

@@ -1,6 +1,5 @@
-import type React from 'react';
-import type { PropsWithChildren } from 'react';
-import type { SelectOption } from './BaseSelectDropdown';
+import { default as React, PropsWithChildren } from 'react';
+import { SelectOption } from './BaseSelectDropdown';
 export type MultiselectToggleSelectionProps = {
     options: SelectOption[];
     selectedItemIds: string[];