@rio-cloud/rio-uikit 2.5.0 → 3.0.0-beta.1

package/components/selects/Multiselect.js

@@ -1,229 +1,163 @@
-import { jsxs as N, jsx as a } from "react/jsx-runtime";
-import { useState as n, useRef as T } from "react";
-import { isEqual as k } from "es-toolkit/predicate";
-import { isEmpty as ke } from "es-toolkit/compat";
-import { noop as ye } from "es-toolkit/function";
-import G from "../../utils/classNames.js";
-import Re, { filterOptions as Ee } from "./BaseSelectDropdown.js";
-import Pe from "./ClearButton.js";
-import _e from "./MultiselectToggleCounter.js";
-import Ke from "./MultiselectToggleSelection.js";
-import Ue from "./MultiselectToggleFilter.js";
-import Be from "./MultiselectTogglePlaceholder.js";
-import Ve from "../../hooks/useClickOutside.js";
-import We from "../../hooks/useMergeRefs.js";
-import je from "./WithFeedbackAndAddon.js";
-const I = -1, nt = (H) => {
-  const {
-    name: y,
-    id: J = y,
-    options: o = [],
-    value: i,
-    onChange: S = ye,
-    placeholder: Q,
-    isLoading: Y = !1,
-    dropup: Z = !1,
-    pullRight: $ = !1,
-    autoDropDirection: ee = !0,
-    bsSize: w = "md",
-    variant: te = "default",
-    disabled: R = !1,
-    tabIndex: se = 0,
-    hasError: oe = !1,
-    useFilter: E = !1,
-    useClear: ne = !1,
-    multiline: g = !1,
-    noItemMessage: re,
-    counterMessage: C,
-    renderCounterMessage: F,
-    showSelectedItemIcon: le = !1,
-    showUnselectedItemIcons: P = !1,
-    className: _,
-    inputAddon: b,
-    errorMessage: K,
-    warningMessage: U,
-    messageWhiteSpace: ae = "normal",
-    btnClassName: B,
-    dropdownClassName: ie,
-    trackingAttributes: ce,
-    ...de
-  } = H, [l, M] = n(!1), [r, u] = n(i || []), [v, f] = n(!1), [O, p] = n(""), [ue, d] = n(o), [V, fe] = n([]), [pe, h] = n(I), [me, m] = n(!1), W = T(null), x = T(null), ge = Ve((e) => {
-    x.current && !x.current.contains(e.target) && z();
-  }), he = We(x, ge), D = (e, t) => {
-    if (t)
-      u(t);
-    else if (e) {
-      const s = e.filter((c) => c.selected);
-      u(s.map((c) => c.id));
-    }
-  }, j = T(!0);
-  j.current && (D(o, i), j.current = !1);
-  const [Ie, Se] = n(i);
-  k(i, Ie) || (D(o, i), Se(i));
-  const [we, Ce] = n(o);
-  k(o, we) || (D(o, i), d(o), Ce(o));
-  const Fe = (e = []) => {
-    !e.length || (v || O) && V.length > 0 || fe(
-      (s) => k(s, e) ? s : e
-    );
-  }, L = () => /* @__PURE__ */ a(
-    Ue,
-    {
-      isActive: v || !!O,
-      selectedItemIds: r,
-      filterValue: O,
-      onFilterChange: Oe
-    }
-  ), be = () => C || F ? /* @__PURE__ */ a(
-    _e,
-    {
-      selectedAmount: r.length,
-      counterMessage: C,
-      customRenderer: F
-    }
-  ) : /* @__PURE__ */ a(
-    Ke,
-    {
-      options: o,
-      selectedItemIds: r,
-      showSelectedItemIcon: le,
-      showUnselectedItemIcons: P,
-      onRemoveItem: De,
-      multiline: g,
-      hasInputAddon: !!b,
-      hasFilter: E,
-      children: g && L()
-    }
-  ), Me = () => {
-    const e = G(
-      "dropdown-toggle",
-      "form-control",
-      "text-left",
-      B && B,
-      w === "sm" && "input-sm",
-      w === "lg" && "input-lg",
-      g && "height-auto",
-      R && "disabled"
-    ), t = ke(r) && !P, s = E && l && !C && !F, c = r.length > 0 ? { id: "__multiselect-clear__", label: "" } : null, X = /* @__PURE__ */ N(
-      "button",
-      {
-        type: "button",
-        id: J,
-        name: y,
-        className: e,
-        ...ce,
-        "data-toggle": "dropdown",
-        tabIndex: se,
-        "aria-haspopup": "true",
-        "aria-expanded": l,
-        onClick: A,
-        onKeyDown: Ne,
-        ref: W,
-        children: [
-          t ? /* @__PURE__ */ a(Be, { placeholder: Q }) : be(),
-          s && !g && L(),
-          /* @__PURE__ */ N("span", { className: "select-toggle-actions", children: [
-            /* @__PURE__ */ a(
-              Pe,
-              {
-                showClear: ne,
-                selectedItem: c,
-                onClear: Ae
-              }
-            ),
-            /* @__PURE__ */ a("span", { className: "caret" })
-          ] })
-        ]
-      }
-    );
-    return !b && !K && !U ? X : /* @__PURE__ */ a(
-      je,
-      {
-        bsSize: w,
-        inputAddon: b,
-        errorMessage: K,
-        warningMessage: U,
-        messageWhiteSpace: ae,
-        children: X
-      }
-    );
-  }, ve = () => {
-    const e = ue.map((t) => (t.selected = r.indexOf(t.id) !== -1, t));
-    return /* @__PURE__ */ a(
-      Re,
-      {
-        isOpen: l,
-        isLoading: Y,
-        options: e,
-        focusedItemIndex: pe,
-        keyboardUsed: me,
-        updateDOMValues: Fe,
-        onSelect: xe,
-        onClose: z,
-        noItemMessage: re,
-        pullRight: $,
-        useActiveClass: !0,
-        dropup: Z,
-        autoDropDirection: ee,
-        dropdownClassName: ie
-      }
-    );
-  }, Oe = (e) => {
-    e.preventDefault();
-    const t = e.currentTarget.value;
-    if (t === "") {
-      f(!1), p(""), d(o), m(!1), h(I);
-      return;
-    }
-    const s = Ee(V, t, o);
-    l || M(!0);
-    const c = s.length > 0 ? 0 : -1;
-    f(!0), p(t), d(s), s.length > 0 && m(!0), h(c);
-  }, xe = (e) => {
-    if (e?.disabled)
-      return;
-    const t = e ? q(e.id) : r;
-    u(t), f(!1), p(""), d(o), S(t);
-  }, q = (e) => {
-    const t = [...r], s = r.indexOf(e);
-    return s !== -1 ? t.splice(s, 1) : t.push(e), t;
-  }, De = (e, t) => {
-    e.stopPropagation();
-    const s = q(t);
-    u(s), S(s);
-  }, Ae = () => {
-    u([]), f(!1), p(""), d(o), m(!1), h(I), S([]);
-  }, Ne = (e) => {
-    switch (e.key) {
-      case "Space":
-        l || (e.preventDefault(), A(e));
-        break;
-      case "Enter":
-        l || (e.preventDefault(), A(e));
-        break;
-    }
-  }, A = (e) => {
-    if (R || v)
-      return;
-    const t = e.detail === 0;
-    M((s) => !s), m(t);
-  }, z = () => {
-    l && (M(!1), f(!1), p(""), d(o), h(I), m(!1), W?.current?.focus());
-  }, Te = G(
-    "select",
-    "multiselect",
-    "dropdown",
-    l && "open",
-    oe && "has-error",
-    te === "blank" && "select-blank",
-    _ && _
-  );
-  return /* @__PURE__ */ N("div", { ...de, className: Te, ref: he, children: [
-    Me(),
-    ve()
-  ] });
+import e from "../../hooks/useClickOutside.js";
+import "../../useClickOutside.js";
+import t from "../../utils/classNames.js";
+import n from "../../hooks/useMergeRefs.js";
+import { useAnchorName as r } from "../../hooks/useAnchoredPopover.js";
+import i, { filterOptions as a } from "./BaseSelectDropdown.js";
+import ee from "./ClearButton.js";
+import te from "./WithFeedbackAndAddon.js";
+import ne from "./MultiselectToggleCounter.js";
+import re from "./MultiselectToggleSelection.js";
+import ie from "./MultiselectToggleFilter.js";
+import ae from "./MultiselectTogglePlaceholder.js";
+import { useRef as o, useState as s } from "react";
+import { noop as oe } from "es-toolkit/function";
+import { isEmpty as se } from "es-toolkit/compat";
+import { isEqual as c } from "es-toolkit/predicate";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/selects/Multiselect.tsx
+var d = -1, f = (f) => {
+	let { name: p, id: m = p, options: h = [], value: g, onChange: _ = oe, placeholder: ce, isLoading: le = !1, dropup: v = !1, pullRight: ue = !1, bsSize: y = "md", variant: de = "default", disabled: b = !1, tabIndex: fe = 0, hasError: pe = !1, useFilter: x = !1, useClear: S = !1, multiline: C = !1, noItemMessage: me, counterMessage: w, renderCounterMessage: T, showSelectedItemIcon: E = !1, showUnselectedItemIcons: D = !1, className: O, inputAddon: k, errorMessage: A, warningMessage: j, messageWhiteSpace: he = "normal", btnClassName: M, dropdownClassName: ge, trackingAttributes: _e, ...ve } = f, [N, P] = s(!1), [F, I] = s(g || []), [L, R] = s(!1), [z, B] = s(""), [ye, V] = s(h), [H, be] = s([]), [xe, U] = s(d), [Se, W] = s(!1), G = o(null), K = o(null), q = r("multiselect"), Ce = { anchorName: q }, we = n(K, e((e) => {
+		K.current && !K.current.contains(e.target) && $();
+	})), J = (e, t) => {
+		if (t) I(t);
+		else if (e) {
+			let t = e.filter((e) => e.selected);
+			I(t.map((e) => e.id));
+		}
+	}, Te = o(!0);
+	Te.current &&= (J(h, g), !1);
+	let [Ee, De] = s(g);
+	c(g, Ee) || (J(h, g), De(g));
+	let [Oe, ke] = s(h);
+	c(h, Oe) || (J(h, g), V(h), ke(h));
+	let Ae = (e = []) => {
+		e.length && ((L || z) && H.length > 0 || be((t) => c(t, e) ? t : e));
+	}, Y = () => /* @__PURE__ */ l(ie, {
+		isActive: L || !!z,
+		selectedItemIds: F,
+		filterValue: z,
+		onFilterChange: Ne
+	}), je = () => w || T ? /* @__PURE__ */ l(ne, {
+		selectedAmount: F.length,
+		counterMessage: w,
+		customRenderer: T
+	}) : /* @__PURE__ */ l(re, {
+		options: h,
+		selectedItemIds: F,
+		showSelectedItemIcon: E,
+		showUnselectedItemIcons: D,
+		onRemoveItem: Fe,
+		multiline: C,
+		hasInputAddon: !!k,
+		hasFilter: x,
+		children: C && Y()
+	}), Me = () => {
+		let e = t("dropdown-toggle", "form-control", "text-left", M && M, y === "sm" && "input-sm", y === "lg" && "input-lg", C && "height-auto", b && "disabled"), n = se(F) && !D, r = x && N && !w && !T, i = F.length > 0 ? {
+			id: "__multiselect-clear__",
+			label: ""
+		} : null, a = /* @__PURE__ */ u("button", {
+			type: "button",
+			id: m,
+			name: p,
+			className: e,
+			..._e,
+			"data-toggle": "dropdown",
+			tabIndex: fe,
+			"aria-haspopup": "true",
+			"aria-expanded": N,
+			onClick: Q,
+			onKeyDown: Le,
+			ref: G,
+			children: [
+				n ? /* @__PURE__ */ l(ae, { placeholder: ce }) : je(),
+				r && !C && Y(),
+				/* @__PURE__ */ u("span", {
+					className: "select-toggle-actions",
+					children: [/* @__PURE__ */ l(ee, {
+						showClear: S,
+						selectedItem: i,
+						onClear: Ie
+					}), /* @__PURE__ */ l("span", { className: "caret" })]
+				})
+			]
+		});
+		return !k && !A && !j ? a : /* @__PURE__ */ l(te, {
+			bsSize: y,
+			inputAddon: k,
+			errorMessage: A,
+			warningMessage: j,
+			messageWhiteSpace: he,
+			children: a
+		});
+	}, X = () => {
+		let e = ye.map((e) => (e.selected = F.indexOf(e.id) !== -1, e));
+		return /* @__PURE__ */ l(i, {
+			isOpen: N,
+			isLoading: le,
+			options: e,
+			focusedItemIndex: xe,
+			keyboardUsed: Se,
+			updateDOMValues: Ae,
+			onSelect: Pe,
+			onClose: $,
+			noItemMessage: me,
+			pullRight: ue,
+			useActiveClass: !0,
+			dropup: v,
+			dropdownClassName: ge,
+			anchorName: q
+		});
+	}, Ne = (e) => {
+		e.preventDefault();
+		let t = e.currentTarget.value;
+		if (t === "") {
+			R(!1), B(""), V(h), W(!1), U(d);
+			return;
+		}
+		let n = a(H, t, h);
+		N || P(!0);
+		let r = n.length > 0 ? 0 : -1;
+		R(!0), B(t), V(n), n.length > 0 && W(!0), U(r);
+	}, Pe = (e) => {
+		if (e?.disabled) return;
+		let t = e ? Z(e.id) : F;
+		I(t), R(!1), B(""), V(h), _(t);
+	}, Z = (e) => {
+		let t = [...F], n = F.indexOf(e);
+		return n === -1 ? t.push(e) : t.splice(n, 1), t;
+	}, Fe = (e, t) => {
+		e.stopPropagation();
+		let n = Z(t);
+		I(n), _(n);
+	}, Ie = () => {
+		I([]), R(!1), B(""), V(h), W(!1), U(d), _([]);
+	}, Le = (e) => {
+		switch (e.key) {
+			case "Space":
+				N || (e.preventDefault(), Q(e));
+				break;
+			case "Enter":
+				N || (e.preventDefault(), Q(e));
+				break;
+			default: break;
+		}
+	}, Q = (e) => {
+		if (b || L) return;
+		let t = e.detail === 0;
+		P((e) => !e), W(t);
+	}, $ = () => {
+		N && (P(!1), R(!1), B(""), V(h), U(d), W(!1), G?.current?.focus());
+	}, Re = t("select", "multiselect", "dropdown", v && "dropup", N && "open", pe && "has-error", de === "blank" && "select-blank", O && O);
+	return /* @__PURE__ */ u("div", {
+		...ve,
+		className: Re,
+		ref: we,
+		style: Ce,
+		children: [Me(), X()]
+	});
 };
-export {
-  nt as default
-};
-//# sourceMappingURL=Multiselect.js.map
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=Multiselect.js.map

package/components/selects/Multiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.js","sources":["../../../src/components/selects/Multiselect.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport ClearButton from './ClearButton';\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 type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\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     * Defines the visual variant of the select.\n     *\n     * @default 'default'\n     */\n    variant?: 'default' | 'blank';\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     * Set to show a clear button.\n     *\n     * @default false\n     */\n    useClear?: 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    /**\n     * Optional tracking attributes added to the toggle button.\n     */\n    trackingAttributes?: TrackingAttributes;\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        variant = 'default',\n        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        useClear = 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        trackingAttributes,\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        if (!updatedItemDOMValues.length) {\n            return;\n        }\n\n        const shouldKeepPreviousSnapshot = (isFilterActive || filterValue) && itemDOMValues.length > 0;\n        if (shouldKeepPreviousSnapshot) {\n            return;\n        }\n\n        setItemDOMValues(currentItemDOMValues =>\n            isEqual(currentItemDOMValues, updatedItemDOMValues) ? currentItemDOMValues : updatedItemDOMValues\n        );\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        const selectedItemForClearButton =\n            selectedItemIds.length > 0 ? ({ id: '__multiselect-clear__', label: '' } as SelectOption) : null;\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={wrapperClassNames}\n                {...trackingAttributes}\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 ? <MultiselectTogglePlaceholder placeholder={placeholder} /> : renderSelection()}\n                {showFilter && !multiline && renderFilter()}\n                <span className='select-toggle-actions'>\n                    <ClearButton\n                        showClear={useClear}\n                        selectedItem={selectedItemForClearButton}\n                        onClear={handleClearSelectedItems}\n                    />\n                    <span className='caret' />\n                </span>\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\n        if (targetFilterValue === '') {\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            return;\n        }\n\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 handleClearSelectedItems = () => {\n        setSelectedItemIds([]);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n        setKeyboardUsed(false);\n        setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n\n        onChange([]);\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        variant === 'blank' && 'select-blank',\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","variant","disabled","tabIndex","hasError","useFilter","useClear","multiline","noItemMessage","counterMessage","renderCounterMessage","showSelectedItemIcon","showUnselectedItemIcons","className","inputAddon","errorMessage","warningMessage","messageWhiteSpace","btnClassName","dropdownClassName","trackingAttributes","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","currentItemDOMValues","renderFilter","jsx","MultiselectToggleFilter","handleFilterChange","renderSelection","MultiselectToggleCounter","MultiselectToggleSelection","handleRemoveSelectedItem","renderToggle","wrapperClassNames","classNames","showPlaceholder","isEmpty","showFilter","selectedItemForClearButton","toggleButton","jsxs","onToggle","handleToggleKeyDown","MultiselectTogglePlaceholder","ClearButton","handleClearSelectedItems","WithFeedbackAndAddon","renderDropdownMenu","nonSelectedOptions","BaseSelectDropdown","onOptionChange","targetFilterValue","optionsFiltered","filterOptions","newFocusedItemIndex","currentSelectedItem","updatedSelectedItems","updateSelection","selectedItemId","newSelectedItems","itemIndex","itemId","isKeyboardUsed","prevValue","wrapperClasses"],"mappings":"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"}
+{"version":3,"file":"Multiselect.js","names":[],"sources":["../../../src/components/selects/Multiselect.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState, type CSSProperties } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport ClearButton from './ClearButton';\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 type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\nimport { useAnchorName } from '../../hooks/useAnchoredPopover';\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     * The dropdown can still fall back to another position when there is not enough space.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown toggle.\n     *\n     * @default false\n     */\n    pullRight?: 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     * Defines the visual variant of the select.\n     *\n     * @default 'default'\n     */\n    variant?: 'default' | 'blank';\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     * Set to show a clear button.\n     *\n     * @default false\n     */\n    useClear?: 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    /**\n     * Optional tracking attributes added to the toggle button.\n     */\n    trackingAttributes?: TrackingAttributes;\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        bsSize = 'md',\n        variant = 'default',\n        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        useClear = 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        trackingAttributes,\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    const anchorName = useAnchorName('multiselect');\n\n    const wrapperStyle = {\n        anchorName,\n    } as CSSProperties;\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        if (!updatedItemDOMValues.length) {\n            return;\n        }\n\n        const shouldKeepPreviousSnapshot = (isFilterActive || filterValue) && itemDOMValues.length > 0;\n        if (shouldKeepPreviousSnapshot) {\n            return;\n        }\n\n        setItemDOMValues(currentItemDOMValues =>\n            isEqual(currentItemDOMValues, updatedItemDOMValues) ? currentItemDOMValues : updatedItemDOMValues\n        );\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        const selectedItemForClearButton =\n            selectedItemIds.length > 0 ? ({ id: '__multiselect-clear__', label: '' } as SelectOption) : null;\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={wrapperClassNames}\n                {...trackingAttributes}\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 ? <MultiselectTogglePlaceholder placeholder={placeholder} /> : renderSelection()}\n                {showFilter && !multiline && renderFilter()}\n                <span className='select-toggle-actions'>\n                    <ClearButton\n                        showClear={useClear}\n                        selectedItem={selectedItemForClearButton}\n                        onClear={handleClearSelectedItems}\n                    />\n                    <span className='caret' />\n                </span>\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                dropdownClassName={dropdownClassName}\n                anchorName={anchorName}\n            />\n        );\n    };\n\n    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const targetFilterValue = event.currentTarget.value;\n\n        if (targetFilterValue === '') {\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            return;\n        }\n\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 handleClearSelectedItems = () => {\n        setSelectedItemIds([]);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n        setKeyboardUsed(false);\n        setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n\n        onChange([]);\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        // TODO(anchor-positioning): Move this placement state to the popover menu once the legacy wrapper dropup\n        // selectors have been removed.\n        dropup && 'dropup',\n        isOpen && 'open',\n        hasError && 'has-error',\n        variant === 'blank' && 'select-blank',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClasses} ref={mergedSelectRefs} style={wrapperStyle}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Multiselect;\n"],"mappings":"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"}

package/components/selects/MultiselectToggleCounter.js

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

package/components/selects/MultiselectToggleCounter.js.map

@@ -1 +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;"}
+{"version":3,"file":"MultiselectToggleCounter.js","names":[],"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"],"mappings":";;AAUA,IAAM,KAA4B,MAA8C;CAC5E,IAAM,EAAE,mBAAgB,mBAAgB,sBAAmB;CAE3D,IAAI,GACA,OAAO,EAAe,CAAc;CAGxC,IAAI,GAAgB;EAChB,IAAM,IAAU,MAAmB,IAAI,EAAe,MAAM,EAAe;EAC3E,OACI,kBAAC,QAAD,EAAA,UAAA,CACI,kBAAC,QAAD;GAAM,WAAU;aAAiC;EAAqB,CAAA,GACtE,kBAAC,QAAD;GAAM,WAAU;aAAiC;EAAc,CAAA,CAC7D,EAAA,CAAA;CAEd;AACJ"}

package/components/selects/MultiselectToggleFilter.js

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