@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/searchHighlight/SearchHighlightText.d.ts

@@ -0,0 +1,28 @@
+type SearchHighlightTextProps = {
+    /**
+     * Full text content to render and highlight.
+     */
+    text: string;
+    /**
+     * Search query used to highlight matches within the text.
+     */
+    query: string;
+    /**
+     * Whether to perform a case-sensitive match.
+     *
+     * @default false
+     */
+    caseSensitive?: boolean;
+    /**
+     * Optional CSS highlight class name (used by the Highlight API).
+     *
+     * @default 'search-result-highlight'
+     */
+    highlightClassName?: string;
+    /**
+     * Optional additional classes applied to the wrapper element.
+     */
+    classNames?: string;
+};
+declare const SearchHighlightText: (props: SearchHighlightTextProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchHighlightText;

package/components/searchHighlight/SearchHighlightText.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import d, { useRef as S, useMemo as m } from "react";
+import h, { SEARCH_HIGHLIGHT_CLASS as x } from "../../hooks/useSearchHighlight.js";
+const H = (r) => r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), w = (r) => {
+  const { text: c, query: o, caseSensitive: a = !1, highlightClassName: p = x, classNames: i = "" } = r, n = S(null), e = m(() => o.trim(), [o]), g = m(() => h.supported(), []);
+  if (h({ ref: n, query: e, highlightClassName: p, caseSensitive: a }), !g && e) {
+    const u = new RegExp(`(${H(e)})`, a ? "g" : "gi"), f = c.split(u);
+    return /* @__PURE__ */ t("span", { className: i, children: f.map((s, l) => (a ? s === e : s.toLowerCase() === e.toLowerCase()) ? /* @__PURE__ */ t("mark", { children: s }, l) : /* @__PURE__ */ t(d.Fragment, { children: s }, l)) });
+  }
+  return /* @__PURE__ */ t("span", { ref: n, className: i, children: c });
+};
+export {
+  w as default
+};
+//# sourceMappingURL=SearchHighlightText.js.map

package/components/searchHighlight/SearchHighlightText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchHighlightText.js","sources":["../../../src/components/searchHighlight/SearchHighlightText.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport useSearchHighlight, { SEARCH_HIGHLIGHT_CLASS } from '../../hooks/useSearchHighlight';\n\ntype SearchHighlightTextProps = {\n    /**\n     * Full text content to render and highlight.\n     */\n    text: string;\n\n    /**\n     * Search query used to highlight matches within the text.\n     */\n    query: string;\n\n    /**\n     * Whether to perform a case-sensitive match.\n     *\n     * @default false\n     */\n    caseSensitive?: boolean;\n\n    /**\n     * Optional CSS highlight class name (used by the Highlight API).\n     *\n     * @default 'search-result-highlight'\n     */\n    highlightClassName?: string;\n\n    /**\n     * Optional additional classes applied to the wrapper element.\n     */\n    classNames?: string;\n};\n\nconst escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\nconst SearchHighlightText = (props: SearchHighlightTextProps) => {\n    const { text, query, caseSensitive = false, highlightClassName = SEARCH_HIGHLIGHT_CLASS, classNames = '' } = props;\n\n    const ref = useRef<HTMLSpanElement | null>(null);\n\n    // Normalize once to keep comparisons stable across re-renders.\n    const normalizedQuery = useMemo(() => query.trim(), [query]);\n\n    // Native CSS highlighting is preferred when available.\n    const isSupported = useMemo(() => useSearchHighlight.supported(), []);\n\n    // always call the hook\n    useSearchHighlight({ ref, query: normalizedQuery, highlightClassName, caseSensitive });\n\n    if (!isSupported && normalizedQuery) {\n        // Fallback: split and wrap matching segments in <mark>.\n        const regex = new RegExp(`(${escapeRegExp(normalizedQuery)})`, caseSensitive ? 'g' : 'gi');\n        const parts = text.split(regex);\n\n        return (\n            <span className={classNames}>\n                {parts.map((part, index) => {\n                    const isMatch = caseSensitive\n                        ? part === normalizedQuery\n                        : part.toLowerCase() === normalizedQuery.toLowerCase();\n                    return isMatch ? (\n                        <mark key={index}>{part}</mark>\n                    ) : (\n                        <React.Fragment key={index}>{part}</React.Fragment>\n                    );\n                })}\n            </span>\n        );\n    }\n\n    return (\n        <span ref={ref} className={classNames}>\n            {text}\n        </span>\n    );\n};\n\nexport default SearchHighlightText;\n"],"names":["escapeRegExp","value","SearchHighlightText","props","text","query","caseSensitive","highlightClassName","SEARCH_HIGHLIGHT_CLASS","classNames","ref","useRef","normalizedQuery","useMemo","isSupported","useSearchHighlight","regex","parts","jsx","part","index","React"],"mappings":";;;AAkCA,MAAMA,IAAe,CAACC,MAAkBA,EAAM,QAAQ,uBAAuB,MAAM,GAE7EC,IAAsB,CAACC,MAAoC;AAC7D,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,eAAAC,IAAgB,IAAO,oBAAAC,IAAqBC,GAAwB,YAAAC,IAAa,GAAA,IAAON,GAEvGO,IAAMC,EAA+B,IAAI,GAGzCC,IAAkBC,EAAQ,MAAMR,EAAM,QAAQ,CAACA,CAAK,CAAC,GAGrDS,IAAcD,EAAQ,MAAME,EAAmB,UAAA,GAAa,CAAA,CAAE;AAKpE,MAFAA,EAAmB,EAAE,KAAAL,GAAK,OAAOE,GAAiB,oBAAAL,GAAoB,eAAAD,GAAe,GAEjF,CAACQ,KAAeF,GAAiB;AAEjC,UAAMI,IAAQ,IAAI,OAAO,IAAIhB,EAAaY,CAAe,CAAC,KAAKN,IAAgB,MAAM,IAAI,GACnFW,IAAQb,EAAK,MAAMY,CAAK;AAE9B,WACI,gBAAAE,EAAC,UAAK,WAAWT,GACZ,YAAM,IAAI,CAACU,GAAMC,OACEd,IACVa,MAASP,IACTO,EAAK,YAAA,MAAkBP,EAAgB,YAAA,KAEzC,gBAAAM,EAAC,QAAA,EAAkB,UAAAC,EAAA,GAARC,CAAa,IAExB,gBAAAF,EAACG,EAAM,UAAN,EAA4B,UAAAF,EAAA,GAARC,CAAa,CAEzC,EAAA,CACL;AAAA,EAER;AAEA,SACI,gBAAAF,EAAC,QAAA,EAAK,KAAAR,GAAU,WAAWD,GACtB,UAAAL,GACL;AAER;"}

package/components/selects/BaseSelectDropdown.js

@@ -1,143 +1,154 @@
-import { jsx as i, jsxs as b, Fragment as X } from "react/jsx-runtime";
-import { useState as h, useRef as q, useLayoutEffect as z, useEffect as J } from "react";
-import O from "classnames";
-import { isEmpty as v } from "es-toolkit/compat";
-import { noop as f } from "es-toolkit/function";
-import { useDropDirection as Q } from "../../utils/useDropDirection.js";
-import { scrollItemIntoView as A, DOWN as w, UP as I } from "../../utils/scrollItemIntoView.js";
-import Y from "../../hooks/useEffectOnce.js";
-import Z from "../../hooks/useKey.js";
-import $ from "./DropdownHeader.js";
-import ee from "./NoItemMessage.js";
-import te from "../spinner/Spinner.js";
-const L = "data-item-id", se = 0, M = "focus", Ie = (g) => {
+import { jsx as c, jsxs as x, Fragment as Q } from "react/jsx-runtime";
+import { useState as y, useRef as _, useEffect as b, useLayoutEffect as Y } from "react";
+import { isEmpty as V } from "es-toolkit/compat";
+import { noop as N } from "es-toolkit/function";
+import C from "../../utils/classNames.js";
+import { useDropDirection as Z } from "../../utils/useDropDirection.js";
+import { DOWN as O, scrollItemIntoView as T, UP as g } from "../../utils/scrollItemIntoView.js";
+import $ from "../../hooks/useEffectOnce.js";
+import ee from "../../hooks/useKey.js";
+import te from "./DropdownHeader.js";
+import re from "./NoItemMessage.js";
+import se from "../spinner/Spinner.js";
+const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
   const {
     isOpen: r = !1,
     isLoading: l = !1,
-    updateDOMValues: u = f,
-    onOpen: c = f,
-    onSelect: m = f,
-    onClose: D = f,
-    options: n = [],
-    autoDropDirection: U = !0,
-    dropup: F = !1,
-    pullRight: S = !1,
-    useActiveClass: _ = !1,
-    focusedItemIndex: R,
-    keyboardUsed: V,
-    noItemMessage: B,
-    dropdownClassName: H
-  } = g, [o, j] = h(R || se), [K, G] = h(V), s = q(null);
-  Y(() => {
-    const e = k();
+    updateDOMValues: u = N,
+    onOpen: i = N,
+    onSelect: p = N,
+    onClose: E = N,
+    options: o = [],
+    autoDropDirection: j = !0,
+    dropup: K = !1,
+    pullRight: G = !1,
+    useActiveClass: P = !1,
+    focusedItemIndex: m,
+    keyboardUsed: f,
+    noItemMessage: W,
+    dropdownClassName: X
+  } = h, [n, k] = y(m || ne), [q, A] = y(f), w = _(L), s = _(null);
+  b(() => {
+    r && s.current && (s.current.scrollTop = 0);
+  }, [r]), b(() => {
+    typeof m == "number" && k(m), typeof f == "boolean" && A(f), r || (w.current = L);
+  }, [m, f, r]), $(() => {
+    const e = F();
     u(e);
   });
-  const p = Q({ pullRight: S, dropup: F, autoDropDirection: U, dropdownMenuRef: s }, [r]);
-  z(() => {
+  const I = Z({ pullRight: G, dropup: K, autoDropDirection: j, dropdownMenuRef: s }, [r]);
+  Y(() => {
     if (s.current) {
       const e = s.current.parentElement;
-      p.dropup ? e?.classList.add("dropup") : e?.classList.remove("dropup");
+      I.dropup ? e?.classList.add("dropup") : e?.classList.remove("dropup");
     }
-  }, [p, s]), J(() => {
-    s.current && u(k());
-  }, [s.current]);
-  const [x, E] = h(r);
-  r && !x ? (c(p.dropup), E(r)) : !r && x && (D(), E(r)), Z((e) => {
+  }, [I, s]), b(() => {
+    s.current && u(F());
+  }, [s.current]), b(() => {
+    r && T(
+      w.current || L,
+      s.current,
+      D()
+    );
+  }, [n, r]);
+  const [v, U] = y(r);
+  r && !v ? (i(I.dropup), U(r)) : !r && v && (E(), U(r)), ee((e) => {
     if (r)
       switch (e.key) {
         case "Escape": {
-          D();
+          E();
           break;
         }
         case "Tab": {
-          D();
+          E();
           break;
         }
         case "Enter": {
-          P(e);
+          z(e);
           break;
         }
         case "ArrowUp": {
-          e.preventDefault(), y(I), A(I, s.current, N());
+          e.preventDefault(), M(g), T(g, s.current, D());
           break;
         }
         case "ArrowDown": {
-          e.preventDefault(), y(w), A(w, s.current, N());
+          e.preventDefault(), M(O), T(O, s.current, D());
           break;
         }
       }
   });
-  const y = (e) => {
+  const M = (e) => {
     let t = 0;
     switch (e) {
-      case I: {
-        t = o <= 0 ? o : o - 1;
+      case g: {
+        t = n <= 0 ? n : n - 1;
         break;
       }
-      case w: {
-        t = o === n.length - 1 ? o : o + 1;
+      case O: {
+        t = n === o.length - 1 ? n : n + 1;
         break;
       }
     }
-    const a = e === I ? n.length - 1 : 0;
-    j(t < 0 ? a : t), G(!0);
-  }, C = () => s.current?.getElementsByTagName("a") || [], k = () => {
+    w.current = e;
+    const a = e === g ? o.length - 1 : 0;
+    k(t < 0 ? a : t), A(!0);
+  }, S = () => s.current?.getElementsByTagName("a") || [], F = () => {
     if (s.current)
-      return [...C()].map((t) => ({
-        id: t.getAttribute(L),
+      return [...S()].map((t) => ({
+        id: t.getAttribute(B),
         text: t.textContent
       }));
-  }, N = () => [...C()].find((t) => t.className.includes(M)), P = (e) => {
-    if (e.preventDefault(), v(n))
+  }, D = () => [...S()].find((t) => t.className.includes(H)), z = (e) => {
+    if (e.preventDefault(), V(o))
       return;
-    const t = N();
+    const t = D();
     if (t) {
-      const a = n.find((d) => d.id === t.getAttribute(L));
-      m(a);
+      const a = o.find((d) => d.id === t.getAttribute(B));
+      p(a);
     }
-  }, W = (e) => {
+  }, J = (e) => {
     e.preventDefault();
-    const t = e.currentTarget.getElementsByTagName("input")[0].value, a = n.find((d) => d.id === t);
-    m(a);
-  }, T = O("dropdown-menu", p.pullRight && "pull-right", H);
-  return v(n) ? /* @__PURE__ */ i(ee, { noItemMessage: B, className: T }) : /* @__PURE__ */ b("ul", { className: T, ref: s, role: "menu", children: [
-    l && /* @__PURE__ */ i("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ i(te, {}) }),
-    !l && n.map((e, t) => {
+    const t = e.currentTarget.getElementsByTagName("input")[0].value, a = o.find((d) => d.id === t);
+    p(a);
+  }, R = C("dropdown-menu", I.pullRight && "pull-right", X);
+  return V(o) ? /* @__PURE__ */ c(re, { noItemMessage: W, className: R }) : /* @__PURE__ */ x("ul", { className: R, ref: s, role: "menu", children: [
+    l && /* @__PURE__ */ c("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ c(se, {}) }),
+    !l && o.map((e, t) => {
       if (e.header)
-        return /* @__PURE__ */ i($, { icon: e.icon, label: e.label }, e.id);
-      const a = O(
-        K && o === t ? M : "",
+        return /* @__PURE__ */ c(te, { icon: e.icon, label: e.label }, e.id);
+      const a = C(
+        q && n === t ? H : "",
         e.disabled && "pointer-events-none",
         "display-flex align-items-center gap-3"
-      ), d = O(
+      ), d = C(
         e.disabled && "disabled",
-        _ && e.selected && "active"
+        P && e.selected && "active"
       );
-      return /* @__PURE__ */ i("li", { className: d, role: "listitem", children: /* @__PURE__ */ b(
+      return /* @__PURE__ */ c("li", { className: d, role: "listitem", children: /* @__PURE__ */ x(
         "a",
         {
           role: "menuitem",
           className: a,
           "data-item-id": e.id,
           "data-item-index": t,
-          onClick: e.disabled ? void 0 : W,
+          onClick: e.disabled ? void 0 : J,
           children: [
-            /* @__PURE__ */ b("span", { className: "selected-option-dropdown-item", children: [
-              e.icon && /* @__PURE__ */ i(X, { children: e.icon }),
+            /* @__PURE__ */ x("span", { className: "selected-option-dropdown-item", children: [
+              e.icon && /* @__PURE__ */ c(Q, { children: e.icon }),
               e.label
             ] }),
-            /* @__PURE__ */ i("input", { type: "hidden", value: e.id })
+            /* @__PURE__ */ c("input", { type: "hidden", value: e.id })
           ]
         }
       ) }, e.id);
     })
   ] });
-}, ge = (g, r, l) => {
-  const u = g.filter((c) => c.text.toLowerCase().includes(r.toLowerCase()));
-  return l.filter((c) => u.find((m) => m.id === c.id));
+}, Ne = (h, r, l) => {
+  const u = h.filter((i) => i.text.toLowerCase().includes(r.toLowerCase()));
+  return l.filter((i) => u.find((p) => p.id === i.id));
 };
 export {
-  Ie as default,
-  ge as filterOptions
+  be as default,
+  Ne as filterOptions
 };
 //# sourceMappingURL=BaseSelectDropdown.js.map

package/components/selects/BaseSelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSelectDropdown.js","sources":["../../../src/components/selects/BaseSelectDropdown.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport { DOWN, scrollItemIntoView, UP } from '../../utils/scrollItemIntoView';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useKey from '../../useKey';\nimport DropdownHeader from './DropdownHeader';\nimport NoItemMessage from './NoItemMessage';\nimport Spinner from '../spinner/Spinner';\n\nconst DATA_ATTRIBUTE_ID = 'data-item-id';\nconst DEFAULT_FOCUSED_ITEM_INDEX = 0;\nconst HIGHLIGHT_CLASS = 'focus';\n\nexport type OptionDOMValue = {\n    id: string;\n    text: string;\n};\n\nexport type SelectOption = {\n    /**\n     * Used to identify an option.\n     */\n    id: string;\n\n    /**\n     * The option item text.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Icon to be displayed in front of the label.\n     */\n    icon?: React.ReactNode;\n\n    /**\n     * Defines whether the menu item is selected.\n     *\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Setting \"disabled\" to true will disable the respective item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Will treat the given value as a menu header\n     */\n    header?: boolean;\n};\n\nexport type BaseSelectDropdownProps<T extends SelectOption> = {\n    options?: T[];\n    isOpen?: boolean;\n    isLoading?: boolean;\n    updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;\n    onOpen?: (hasDropup: boolean) => void;\n    onSelect?: (selectedItem: T | undefined) => void;\n    onClose?: () => void;\n    placeholder?: string | React.ReactNode;\n    dropup?: boolean;\n    pullRight?: boolean;\n    autoDropDirection?: boolean;\n    noItemMessage?: string | React.ReactNode;\n    focusedItemIndex?: number;\n    dropdownClassName?: string;\n    keyboardUsed?: boolean;\n    useActiveClass?: boolean;\n};\n\nconst BaseSelectDropdown = <T extends SelectOption>(props: BaseSelectDropdownProps<T>) => {\n    const {\n        isOpen = false,\n        isLoading = false,\n        updateDOMValues = noop,\n        onOpen = noop,\n        onSelect = noop,\n        onClose = noop,\n        options = [],\n        autoDropDirection = true,\n        dropup = false,\n        pullRight = false,\n        useActiveClass = false,\n        focusedItemIndex: externalFocusedItemIndex,\n        keyboardUsed: externalKeyboardUsed,\n        noItemMessage,\n        dropdownClassName,\n    } = props;\n\n    const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);\n\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n\n    useEffectOnce(() => {\n        // all available items need to be rendered in order to know their DOM value\n        // which will be used for filtering in the parent component\n        const currentItemDOMValues = updateItemDOMValues();\n        updateDOMValues(currentItemDOMValues);\n    });\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [isOpen]);\n\n    // Add or remove the \"dropup\" class from the parent Select/Multiselect component to position\n    // the dropdown element accordingly via CSS\n    useLayoutEffect(() => {\n        if (dropdownMenuRef.current) {\n            const parent = dropdownMenuRef.current.parentElement;\n            if (dropDirection.dropup) {\n                parent?.classList.add('dropup');\n            } else {\n                parent?.classList.remove('dropup');\n            }\n        }\n    }, [dropDirection, dropdownMenuRef]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (dropdownMenuRef.current) {\n            updateDOMValues(updateItemDOMValues());\n        }\n    }, [dropdownMenuRef.current]);\n\n    // update internal state for isOpen\n    const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);\n    if (isOpen && !previousIsOpen) {\n        onOpen(dropDirection.dropup);\n        setPreviousIsOpen(isOpen);\n    } else if (!isOpen && previousIsOpen) {\n        onClose();\n        setPreviousIsOpen(isOpen);\n    }\n\n    useKey(event => {\n        if (isOpen) {\n            switch (event.key) {\n                case 'Escape': {\n                    // close dropdown on esc\n                    onClose();\n                    break;\n                }\n                case 'Tab': {\n                    // close dropdown on tab\n                    onClose();\n                    break;\n                }\n                case 'Enter': {\n                    // select item on enter\n                    selectOptionOnEnter(event);\n                    break;\n                }\n                case 'ArrowUp': {\n                    // prevent scrolling the page when dropdown menu is open\n                    event.preventDefault();\n\n                    // select item above on arrow up key\n                    focusOption(UP);\n                    scrollItemIntoView(UP, dropdownMenuRef.current, getFocusedOptionNode());\n                    break;\n                }\n                case 'ArrowDown': {\n                    // prevent scrolling the page when dropdown menu is open\n                    event.preventDefault();\n\n                    // select item below on arrow down key\n                    focusOption(DOWN);\n                    scrollItemIntoView(DOWN, dropdownMenuRef.current, getFocusedOptionNode());\n                    break;\n                }\n                default:\n                    break;\n            }\n        }\n    });\n\n    const focusOption = (direction: typeof UP | typeof DOWN) => {\n        let nextFocusedItem = 0;\n\n        switch (direction) {\n            case UP: {\n                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;\n                break;\n            }\n            case DOWN: {\n                nextFocusedItem = focusedItemIndex === options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;\n                break;\n            }\n            default:\n                break;\n        }\n\n        // In case the next item index is negative, means outside the bounds of the items,\n        // reset it depending on the current direction\n        const indexLimit = direction === UP ? options.length - 1 : 0;\n\n        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);\n        setKeyboardUsed(true);\n    };\n\n    const getOptionNodes = () => {\n        const node = dropdownMenuRef.current;\n        return node?.getElementsByTagName('a') || [];\n    };\n\n    const updateItemDOMValues = () => {\n        if (dropdownMenuRef.current) {\n            const optionNodes = getOptionNodes();\n            return [...optionNodes].map(item => {\n                return {\n                    id: item.getAttribute(DATA_ATTRIBUTE_ID),\n                    text: item.textContent,\n                } as OptionDOMValue;\n            });\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        const optionNodes = getOptionNodes();\n        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));\n    };\n\n    const selectOptionOnEnter = (event: KeyboardEvent) => {\n        event.preventDefault();\n\n        // When no filter result was found, avoid selecting anything\n        if (isEmpty(options)) {\n            return;\n        }\n\n        const match = getFocusedOptionNode();\n\n        if (match) {\n            const selectedItem = options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));\n            onSelect(selectedItem);\n        }\n    };\n\n    const handleOptionChange = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        event.preventDefault();\n\n        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;\n        const selectedItem = options.find(option => option.id === optionId);\n\n        onSelect(selectedItem);\n    };\n\n    const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);\n\n    // Don't show the dropdown, when no match are found when filtering unless there is a not found message\n    if (isEmpty(options)) {\n        return <NoItemMessage noItemMessage={noItemMessage} className={dropdownMenuClasses} />;\n    }\n\n    return (\n        <ul className={dropdownMenuClasses} ref={dropdownMenuRef} role='menu'>\n            {isLoading && (\n                <div className='display-flex justify-content-center padding-10'>\n                    <Spinner />\n                </div>\n            )}\n            {!isLoading &&\n                options.map((option, index) => {\n                    if (option.header) {\n                        return <DropdownHeader key={option.id} icon={option.icon} label={option.label} />;\n                    }\n\n                    // Show focused style only when keyboard is in use\n                    const anchorClassNames = classNames(\n                        keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '',\n                        option.disabled && 'pointer-events-none',\n                        'display-flex align-items-center gap-3'\n                    );\n\n                    const wrapperClassNames = classNames(\n                        option.disabled && 'disabled',\n                        useActiveClass && option.selected && 'active'\n                    );\n\n                    return (\n                        <li key={option.id} className={wrapperClassNames} role='listitem'>\n                            <a\n                                role='menuitem'\n                                className={anchorClassNames}\n                                data-item-id={option.id}\n                                data-item-index={index}\n                                // Note, we need to assign the click callback only when it's not disabled\n                                // otherwise the functions is still triggered\n                                // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility\n                                onClick={option.disabled ? undefined : handleOptionChange}\n                            >\n                                <span className='selected-option-dropdown-item'>\n                                    {option.icon && <>{option.icon}</>}\n                                    {option.label}\n                                </span>\n                                <input type='hidden' value={option.id} />\n                            </a>\n                        </li>\n                    );\n                })}\n        </ul>\n    );\n};\n\nexport const filterOptions = <T extends SelectOption>(\n    itemDOMValues: OptionDOMValue[],\n    filterValue: string,\n    options: T[]\n) => {\n    const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));\n\n    // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done\n    // on the options itself as they might contain arbitrary components\n    return options.filter(option => {\n        return filteredDOMValues.find(domValue => domValue.id === option.id);\n    });\n};\n\nexport default BaseSelectDropdown;\n"],"names":["DATA_ATTRIBUTE_ID","DEFAULT_FOCUSED_ITEM_INDEX","HIGHLIGHT_CLASS","BaseSelectDropdown","props","isOpen","isLoading","updateDOMValues","noop","onOpen","onSelect","onClose","options","autoDropDirection","dropup","pullRight","useActiveClass","externalFocusedItemIndex","externalKeyboardUsed","noItemMessage","dropdownClassName","focusedItemIndex","setFocusedItemIndex","useState","keyboardUsed","setKeyboardUsed","dropdownMenuRef","useRef","useEffectOnce","currentItemDOMValues","updateItemDOMValues","dropDirection","useDropDirection","useLayoutEffect","parent","useEffect","previousIsOpen","setPreviousIsOpen","useKey","event","selectOptionOnEnter","focusOption","UP","scrollItemIntoView","getFocusedOptionNode","DOWN","direction","nextFocusedItem","indexLimit","getOptionNodes","item","isEmpty","match","selectedItem","option","handleOptionChange","optionId","dropdownMenuClasses","classNames","jsx","NoItemMessage","Spinner","index","DropdownHeader","anchorClassNames","wrapperClassNames","jsxs","Fragment","filterOptions","itemDOMValues","filterValue","filteredDOMValues","domValue"],"mappings":"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"}
+{"version":3,"file":"BaseSelectDropdown.js","sources":["../../../src/components/selects/BaseSelectDropdown.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport { DOWN, scrollItemIntoView, UP } from '../../utils/scrollItemIntoView';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useKey from '../../useKey';\nimport DropdownHeader from './DropdownHeader';\nimport NoItemMessage from './NoItemMessage';\nimport Spinner from '../spinner/Spinner';\n\nconst DATA_ATTRIBUTE_ID = 'data-item-id';\nconst DEFAULT_FOCUSED_ITEM_INDEX = 0;\nconst HIGHLIGHT_CLASS = 'focus';\nconst DEFAULT_SCROLL_DIRECTION = DOWN;\n\nexport type OptionDOMValue = {\n    id: string;\n    text: string;\n};\n\nexport type SelectOption = {\n    /**\n     * Used to identify an option.\n     */\n    id: string;\n\n    /**\n     * The option item text.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Icon to be displayed in front of the label.\n     */\n    icon?: React.ReactNode;\n\n    /**\n     * Defines whether the menu item is selected.\n     *\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Setting \"disabled\" to true will disable the respective item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Will treat the given value as a menu header\n     */\n    header?: boolean;\n};\n\nexport type BaseSelectDropdownProps<T extends SelectOption> = {\n    options?: T[];\n    isOpen?: boolean;\n    isLoading?: boolean;\n    updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;\n    onOpen?: (hasDropup: boolean) => void;\n    onSelect?: (selectedItem: T | undefined) => void;\n    onClose?: () => void;\n    placeholder?: string | React.ReactNode;\n    dropup?: boolean;\n    pullRight?: boolean;\n    autoDropDirection?: boolean;\n    noItemMessage?: string | React.ReactNode;\n    focusedItemIndex?: number;\n    dropdownClassName?: string;\n    keyboardUsed?: boolean;\n    useActiveClass?: boolean;\n};\n\nconst BaseSelectDropdown = <T extends SelectOption>(props: BaseSelectDropdownProps<T>) => {\n    const {\n        isOpen = false,\n        isLoading = false,\n        updateDOMValues = noop,\n        onOpen = noop,\n        onSelect = noop,\n        onClose = noop,\n        options = [],\n        autoDropDirection = true,\n        dropup = false,\n        pullRight = false,\n        useActiveClass = false,\n        focusedItemIndex: externalFocusedItemIndex,\n        keyboardUsed: externalKeyboardUsed,\n        noItemMessage,\n        dropdownClassName,\n    } = props;\n\n    const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);\n    const lastScrollDirectionRef = useRef<typeof UP | typeof DOWN>(DEFAULT_SCROLL_DIRECTION);\n\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n\n    // Reset scroll position whenever the menu opens to avoid retaining old scroll offsets\n    useEffect(() => {\n        if (isOpen && dropdownMenuRef.current) {\n            dropdownMenuRef.current.scrollTop = 0;\n        }\n    }, [isOpen]);\n\n    // Keep internal focus state in sync when the dropdown opens/closes or when parent-controlled values change\n    useEffect(() => {\n        if (typeof externalFocusedItemIndex === 'number') {\n            setFocusedItemIndex(externalFocusedItemIndex);\n        }\n\n        if (typeof externalKeyboardUsed === 'boolean') {\n            setKeyboardUsed(externalKeyboardUsed);\n        }\n\n        if (!isOpen) {\n            lastScrollDirectionRef.current = DEFAULT_SCROLL_DIRECTION;\n        }\n    }, [externalFocusedItemIndex, externalKeyboardUsed, isOpen]);\n\n    useEffectOnce(() => {\n        // all available items need to be rendered in order to know their DOM value\n        // which will be used for filtering in the parent component\n        const currentItemDOMValues = updateItemDOMValues();\n        updateDOMValues(currentItemDOMValues);\n    });\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [isOpen]);\n\n    // Add or remove the \"dropup\" class from the parent Select/Multiselect component to position\n    // the dropdown element accordingly via CSS\n    useLayoutEffect(() => {\n        if (dropdownMenuRef.current) {\n            const parent = dropdownMenuRef.current.parentElement;\n            if (dropDirection.dropup) {\n                parent?.classList.add('dropup');\n            } else {\n                parent?.classList.remove('dropup');\n            }\n        }\n    }, [dropDirection, dropdownMenuRef]);\n\n    useEffect(() => {\n        if (dropdownMenuRef.current) {\n            updateDOMValues(updateItemDOMValues());\n        }\n    }, [dropdownMenuRef.current]);\n\n    // Scroll the focused item into view whenever focus changes\n    useEffect(() => {\n        if (!isOpen) {\n            return;\n        }\n\n        scrollItemIntoView(\n            lastScrollDirectionRef.current || DEFAULT_SCROLL_DIRECTION,\n            dropdownMenuRef.current,\n            getFocusedOptionNode()\n        );\n    }, [focusedItemIndex, isOpen]);\n\n    // update internal state for isOpen\n    const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);\n    if (isOpen && !previousIsOpen) {\n        onOpen(dropDirection.dropup);\n        setPreviousIsOpen(isOpen);\n    } else if (!isOpen && previousIsOpen) {\n        onClose();\n        setPreviousIsOpen(isOpen);\n    }\n\n    useKey(event => {\n        if (isOpen) {\n            switch (event.key) {\n                case 'Escape': {\n                    // close dropdown on esc\n                    onClose();\n                    break;\n                }\n                case 'Tab': {\n                    // close dropdown on tab\n                    onClose();\n                    break;\n                }\n                case 'Enter': {\n                    // select item on enter\n                    selectOptionOnEnter(event);\n                    break;\n                }\n                case 'ArrowUp': {\n                    // prevent scrolling the page when dropdown menu is open\n                    event.preventDefault();\n\n                    // select item above on arrow up key\n                    focusOption(UP);\n                    scrollItemIntoView(UP, dropdownMenuRef.current, getFocusedOptionNode());\n                    break;\n                }\n                case 'ArrowDown': {\n                    // prevent scrolling the page when dropdown menu is open\n                    event.preventDefault();\n\n                    // select item below on arrow down key\n                    focusOption(DOWN);\n                    scrollItemIntoView(DOWN, dropdownMenuRef.current, getFocusedOptionNode());\n                    break;\n                }\n                default:\n                    break;\n            }\n        }\n    });\n\n    const focusOption = (direction: typeof UP | typeof DOWN) => {\n        let nextFocusedItem = 0;\n\n        switch (direction) {\n            case UP: {\n                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;\n                break;\n            }\n            case DOWN: {\n                nextFocusedItem = focusedItemIndex === options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;\n                break;\n            }\n            default:\n                break;\n        }\n\n        lastScrollDirectionRef.current = direction;\n\n        // In case the next item index is negative, means outside the bounds of the items,\n        // reset it depending on the current direction\n        const indexLimit = direction === UP ? options.length - 1 : 0;\n\n        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);\n        setKeyboardUsed(true);\n    };\n\n    const getOptionNodes = () => {\n        const node = dropdownMenuRef.current;\n        return node?.getElementsByTagName('a') || [];\n    };\n\n    const updateItemDOMValues = () => {\n        if (dropdownMenuRef.current) {\n            const optionNodes = getOptionNodes();\n            return [...optionNodes].map(item => {\n                return {\n                    id: item.getAttribute(DATA_ATTRIBUTE_ID),\n                    text: item.textContent,\n                } as OptionDOMValue;\n            });\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        const optionNodes = getOptionNodes();\n        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));\n    };\n\n    const selectOptionOnEnter = (event: KeyboardEvent) => {\n        event.preventDefault();\n\n        // When no filter result was found, avoid selecting anything\n        if (isEmpty(options)) {\n            return;\n        }\n\n        const match = getFocusedOptionNode();\n\n        if (match) {\n            const selectedItem = options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));\n            onSelect(selectedItem);\n        }\n    };\n\n    const handleOptionChange = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        event.preventDefault();\n\n        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;\n        const selectedItem = options.find(option => option.id === optionId);\n\n        onSelect(selectedItem);\n    };\n\n    const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);\n\n    // Don't show the dropdown, when no match are found when filtering unless there is a not found message\n    if (isEmpty(options)) {\n        return <NoItemMessage noItemMessage={noItemMessage} className={dropdownMenuClasses} />;\n    }\n\n    return (\n        <ul className={dropdownMenuClasses} ref={dropdownMenuRef} role='menu'>\n            {isLoading && (\n                <div className='display-flex justify-content-center padding-10'>\n                    <Spinner />\n                </div>\n            )}\n            {!isLoading &&\n                options.map((option, index) => {\n                    if (option.header) {\n                        return <DropdownHeader key={option.id} icon={option.icon} label={option.label} />;\n                    }\n\n                    // Show focused style only when keyboard is in use\n                    const anchorClassNames = classNames(\n                        keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '',\n                        option.disabled && 'pointer-events-none',\n                        'display-flex align-items-center gap-3'\n                    );\n\n                    const wrapperClassNames = classNames(\n                        option.disabled && 'disabled',\n                        useActiveClass && option.selected && 'active'\n                    );\n\n                    return (\n                        <li key={option.id} className={wrapperClassNames} role='listitem'>\n                            <a\n                                role='menuitem'\n                                className={anchorClassNames}\n                                data-item-id={option.id}\n                                data-item-index={index}\n                                // Note, we need to assign the click callback only when it's not disabled\n                                // otherwise the functions is still triggered\n                                onClick={option.disabled ? undefined : handleOptionChange}\n                            >\n                                <span className='selected-option-dropdown-item'>\n                                    {option.icon && <>{option.icon}</>}\n                                    {option.label}\n                                </span>\n                                <input type='hidden' value={option.id} />\n                            </a>\n                        </li>\n                    );\n                })}\n        </ul>\n    );\n};\n\nexport const filterOptions = <T extends SelectOption>(\n    itemDOMValues: OptionDOMValue[],\n    filterValue: string,\n    options: T[]\n) => {\n    const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));\n\n    // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done\n    // on the options itself as they might contain arbitrary components\n    return options.filter(option => {\n        return filteredDOMValues.find(domValue => domValue.id === option.id);\n    });\n};\n\nexport default BaseSelectDropdown;\n"],"names":["DATA_ATTRIBUTE_ID","DEFAULT_FOCUSED_ITEM_INDEX","HIGHLIGHT_CLASS","DEFAULT_SCROLL_DIRECTION","DOWN","BaseSelectDropdown","props","isOpen","isLoading","updateDOMValues","noop","onOpen","onSelect","onClose","options","autoDropDirection","dropup","pullRight","useActiveClass","externalFocusedItemIndex","externalKeyboardUsed","noItemMessage","dropdownClassName","focusedItemIndex","setFocusedItemIndex","useState","keyboardUsed","setKeyboardUsed","lastScrollDirectionRef","useRef","dropdownMenuRef","useEffect","useEffectOnce","currentItemDOMValues","updateItemDOMValues","dropDirection","useDropDirection","useLayoutEffect","parent","scrollItemIntoView","getFocusedOptionNode","previousIsOpen","setPreviousIsOpen","useKey","event","selectOptionOnEnter","focusOption","UP","direction","nextFocusedItem","indexLimit","getOptionNodes","item","isEmpty","match","selectedItem","option","handleOptionChange","optionId","dropdownMenuClasses","classNames","jsx","NoItemMessage","Spinner","index","DropdownHeader","anchorClassNames","wrapperClassNames","jsxs","Fragment","filterOptions","itemDOMValues","filterValue","filteredDOMValues","domValue"],"mappings":"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"}

package/components/selects/ClearButton.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import a from "classnames";
-import { isNil as l } from "es-toolkit/predicate";
+import { isNil as a } from "es-toolkit/predicate";
+import l from "../../utils/classNames.js";
 const p = (o) => {
-  const { showClear: s, selectedItem: t, onClear: r } = o, n = a(
+  const { showClear: s, selectedItem: t, onClear: r } = o, n = l(
     "clearButton",
-    (!s || l(t)) && "hide pointer-events-none"
+    (!s || a(t)) && "hide pointer-events-none"
   );
   return /* @__PURE__ */ e("span", { className: n, onClick: r, children: /* @__PURE__ */ e("span", { className: "clearButtonIcon rioglyph rioglyph-remove-sign" }) });
 };

package/components/selects/ClearButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearButton.js","sources":["../../../src/components/selects/ClearButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport type { SelectOption } from './Select';\n\nexport type ClearButtonProps = {\n    showClear: boolean;\n    selectedItem: SelectOption | null;\n    onClear: () => void;\n};\n\nconst ClearButton = (props: ClearButtonProps) => {\n    const { showClear, selectedItem, onClear } = props;\n\n    const clearButtonClassNames = classNames(\n        'clearButton',\n        (!showClear || isNil(selectedItem)) && 'hide pointer-events-none'\n    );\n\n    return (\n        <span className={clearButtonClassNames} onClick={onClear}>\n            <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n        </span>\n    );\n};\n\nexport default ClearButton;\n"],"names":["ClearButton","props","showClear","selectedItem","onClear","clearButtonClassNames","classNames","isNil","jsx"],"mappings":";;;AAWA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,SAAAC,EAAA,IAAYH,GAEvCI,IAAwBC;AAAA,IAC1B;AAAA,KACC,CAACJ,KAAaK,EAAMJ,CAAY,MAAM;AAAA,EAAA;AAG3C,SACI,gBAAAK,EAAC,QAAA,EAAK,WAAWH,GAAuB,SAASD,GAC7C,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,gDAAA,CAAgD,EAAA,CACpE;AAER;"}
+{"version":3,"file":"ClearButton.js","sources":["../../../src/components/selects/ClearButton.tsx"],"sourcesContent":["import { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport type { SelectOption } from './Select';\n\nexport type ClearButtonProps = {\n    showClear: boolean;\n    selectedItem: SelectOption | null;\n    onClear: () => void;\n};\n\nconst ClearButton = (props: ClearButtonProps) => {\n    const { showClear, selectedItem, onClear } = props;\n\n    const clearButtonClassNames = classNames(\n        'clearButton',\n        (!showClear || isNil(selectedItem)) && 'hide pointer-events-none'\n    );\n\n    return (\n        <span className={clearButtonClassNames} onClick={onClear}>\n            <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n        </span>\n    );\n};\n\nexport default ClearButton;\n"],"names":["ClearButton","props","showClear","selectedItem","onClear","clearButtonClassNames","classNames","isNil","jsx"],"mappings":";;;AAWA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,SAAAC,EAAA,IAAYH,GAEvCI,IAAwBC;AAAA,IAC1B;AAAA,KACC,CAACJ,KAAaK,EAAMJ,CAAY,MAAM;AAAA,EAAA;AAG3C,SACI,gBAAAK,EAAC,QAAA,EAAK,WAAWH,GAAuB,SAASD,GAC7C,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,gDAAA,CAAgD,EAAA,CACpE;AAER;"}

package/components/selects/Multiselect.js

@@ -1,9 +1,9 @@
 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 { isEqual as L } from "es-toolkit/predicate";
 import { isEmpty as ve } from "es-toolkit/compat";
 import { noop as Ae } from "es-toolkit/function";
+import q from "../../utils/classNames.js";
 import Te, { filterOptions as ye } from "./BaseSelectDropdown.js";
 import Ne from "./MultiselectToggleCounter.js";
 import Re from "./MultiselectToggleSelection.js";
@@ -55,9 +55,9 @@ const z = -1, Ze = (X) => {
   }, W = x(!0);
   W.current && (O(o, a), W.current = !1);
   const [pe, me] = n(a);
-  q(a, pe) || (O(o, a), me(a));
+  L(a, pe) || (O(o, a), me(a));
   const [ge, he] = n(o);
-  q(o, ge) || (O(o, a), f(o), he(o));
+  L(o, ge) || (O(o, a), f(o), he(o));
   const Ie = (e = []) => {
     ae(e);
   }, D = () => /* @__PURE__ */ c(
@@ -89,7 +89,7 @@ const z = -1, Ze = (X) => {
       children: d && D()
     }
   ), Fe = () => {
-    const e = L(
+    const e = q(
       "dropdown-toggle",
       "form-control",
       "text-left",
@@ -188,7 +188,7 @@ const z = -1, Ze = (X) => {
     I((s) => !s), S(t);
   }, j = () => {
     r && (I(!1), w(!1), F(""), f(o), K(z), S(!1), B?.current?.focus());
-  }, Ce = L(
+  }, Ce = q(
     "select",
     "multiselect",
     "dropdown",

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 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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"}
+{"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 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":";;;;;;;;;;;;;;AAgBA,MAAMA,IAA6B,IA2L7BC,KAAc,CAACC,MAA+C;AAChE,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,IAAAC,IAAKD;AAAA,IACL,SAAAE,IAAU,CAAA;AAAA,IACV,OAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,UAAAC,KAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,sBAAAC,KAAuB;AAAA,IACvB,yBAAAC,IAA0B;AAAA,IAC1B,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC,KAAoB;AAAA,IACpB,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACH9B,GAEE,CAAC+B,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAiBC,CAAkB,IAAIF,EAAmB7B,KAAS,CAAA,CAAE,GACtE,CAACgC,GAAgBC,CAAiB,IAAIJ,EAAS,EAAK,GACpD,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAE,GAC3C,CAACO,IAAiBC,CAAkB,IAAIR,EAA8B9B,CAAO,GAC7E,CAACuC,IAAeC,EAAgB,IAAIV,EAA2B,CAAA,CAAE,GACjE,CAACW,IAAkBC,CAAmB,IAAIZ,EAASnC,CAA0B,GAC7E,CAACgD,IAAcC,CAAe,IAAId,EAAS,EAAK,GAEhDe,IAAYC,EAA0B,IAAI,GAC1CC,IAAwBD,EAAuB,IAAI,GAEnDE,KAAMC,GAAgB,CAAAC,MAAS;AAEjC,IAAIH,EAAsB,WAAW,CAACA,EAAsB,QAAQ,SAASG,EAAM,MAAc,KAC7FC,EAAA;AAAA,EAER,CAAC,GAEKC,KAAmBC,GAAaN,GAAuBC,EAAG,GAE1DM,IAAsB,CAACC,GAAqCC,MAAuC;AACrG,QAAIA;AACA,MAAAxB,EAAmBwB,CAAY;AAAA,aACxBD,GAAgB;AACvB,YAAME,IAAsBF,EAAe,OAAO,CAAAG,MAAQA,EAAK,QAAQ;AACvE,MAAA1B,EAAmByB,EAAoB,IAAI,CAAAE,MAAUA,EAAO,EAAE,CAAC;AAAA,IACnE;AAAA,EACJ,GAIMC,IAAiBd,EAAgB,EAAI;AAC3C,EAAIc,EAAe,YACfN,EAAoBtD,GAASC,CAAK,GAClC2D,EAAe,UAAU;AAI7B,QAAM,CAACC,IAAeC,EAAgB,IAAIhC,EAAS7B,CAAK;AACxD,EAAK8D,EAAQ9D,GAAO4D,EAAa,MAC7BP,EAAoBtD,GAASC,CAAK,GAClC6D,GAAiB7D,CAAK;AAI1B,QAAM,CAAC+D,IAAiBC,EAAkB,IAAInC,EAAS9B,CAAO;AAC9D,EAAK+D,EAAQ/D,GAASgE,EAAe,MACjCV,EAAoBtD,GAASC,CAAK,GAClCqC,EAAmBtC,CAAO,GAC1BiE,GAAmBjE,CAAO;AAG9B,QAAMkE,KAAkB,CAACC,IAAyC,OAAO;AACrE,IAAA3B,GAAiB2B,CAAoB;AAAA,EACzC,GAEMC,IAAe,MACjB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,UAAUrC,KAAkB,CAAC,CAACE;AAAA,MAC9B,iBAAAJ;AAAA,MACA,aAAAI;AAAA,MACA,gBAAgBoC;AAAA,IAAA;AAAA,EAAA,GAIlBC,KAAkB,MAChBxD,KAAkBC,IAEd,gBAAAoD;AAAA,IAACI;AAAA,IAAA;AAAA,MACG,gBAAgB1C,EAAgB;AAAA,MAChC,gBAAAf;AAAA,MACA,gBAAgBC;AAAA,IAAA;AAAA,EAAA,IAMxB,gBAAAoD;AAAA,IAACK;AAAA,IAAA;AAAA,MACG,SAAA1E;AAAA,MACA,iBAAA+B;AAAA,MACA,sBAAAb;AAAA,MACA,yBAAAC;AAAA,MACA,cAAcwD;AAAA,MACd,WAAA7D;AAAA,MACA,eAAe,CAAC,CAACO;AAAA,MACjB,WAAWR;AAAA,MAEV,eAAauD,EAAA;AAAA,IAAa;AAAA,EAAA,GAKjCQ,KAAe,MAAM;AACvB,UAAMC,IAAoBC;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACArD,KAAgBA;AAAA,MAChBhB,MAAW,QAAQ;AAAA,MACnBA,MAAW,QAAQ;AAAA,MACnBK,KAAa;AAAA,MACbJ,KAAY;AAAA,IAAA,GAGVqE,IAAkBC,GAAQjD,CAAe,KAAK,CAACZ,GAC/C8D,IAAapE,KAAae,KAAU,CAACZ,KAAkB,CAACC,GAExDiE,IACF,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,IAAApF;AAAA,QACA,MAAAD;AAAA,QACA,WAAW+E;AAAA,QACX,eAAY;AAAA,QACZ,UAAAlE;AAAA,QACA,iBAAc;AAAA,QACd,iBAAeiB;AAAA,QACf,SAASwD;AAAA,QACT,WAAWC;AAAA,QACX,KAAKxC;AAAA,QAEJ,UAAA;AAAA,UAAAkC,IACG,gBAAAI,EAAAG,IAAA,EACI,UAAA;AAAA,YAAA,gBAAAjB,EAACkB,MAA6B,aAAAnF,GAA0B;AAAA,YACvD6E,KAAcb,EAAA;AAAA,UAAa,EAAA,CAChC,IAEAI,GAAA;AAAA,UAEHS,KAAc,CAACnE,KAAasD,EAAA;AAAA,UAC7B,gBAAAC,EAAC,QAAA,EAAK,WAAU,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIhC,WAAI,CAAChD,KAAc,CAACC,KAAgB,CAACC,IAC1B2D,IAIP,gBAAAb;AAAA,MAACmB;AAAA,MAAA;AAAA,QACG,QAAA/E;AAAA,QACA,YAAAY;AAAA,QACA,cAAAC;AAAA,QACA,gBAAAC;AAAA,QACA,mBAAAC;AAAA,QAEC,UAAA0D;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb,GAEMO,KAAqB,MAAM;AAC7B,UAAMC,IAAqBrD,GAAgB,IAAI,CAAAsB,OAC3CA,EAAO,WAAW5B,EAAgB,QAAQ4B,EAAO,EAAE,MAAM,IAClDA,EACV;AAED,WACI,gBAAAU;AAAA,MAACsB;AAAA,MAAA;AAAA,QACG,QAAA/D;AAAA,QACA,WAAAvB;AAAA,QACA,SAASqF;AAAA,QACT,kBAAAjD;AAAA,QACA,cAAAE;AAAA,QACA,iBAAAuB;AAAA,QACA,UAAU0B;AAAA,QACV,SAASzC;AAAA,QACT,eAAApC;AAAA,QACA,WAAAR;AAAA,QACA,gBAAc;AAAA,QACd,QAAAD;AAAA,QACA,mBAAAE;AAAA,QACA,mBAAAkB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ,GAEM6C,KAAqB,CAACrB,MAA+C;AACvE,IAAAA,EAAM,eAAA;AAEN,UAAM2C,IAAoB3C,EAAM,cAAc,OACxC4C,IAAkBC,GAAcxD,IAAesD,GAAmB7F,CAAO;AAE/E,IAAK4B,KAEDC,EAAU,EAAI;AAGlB,UAAMmE,IAAsBF,EAAgB,SAAS,IAAI,IAAI;AAE7D,IAAA5D,EAAkB,EAAI,GACtBE,EAAeyD,CAAiB,GAChCvD,EAAmBwD,CAAe,GAE9BA,EAAgB,SAAS,KAEzBlD,EAAgB,EAAI,GAGxBF,EAAoBsD,CAAmB;AAAA,EAC3C,GAEMJ,KAAiB,CAACK,MAAuD;AAE3E,QAAIA,GAAqB;AACrB;AAGJ,UAAMC,IAAuBD,IAAsBE,EAAgBF,EAAoB,EAAE,IAAIlE;AAG7F,IAAAC,EAAmBkE,CAAoB,GACvChE,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBtC,CAAO,GAE1BE,EAASgG,CAAoB;AAAA,EACjC,GAEMC,IAAkB,CAACC,MAA2B;AAChD,UAAMC,IAAmB,CAAC,GAAGtE,CAAe,GACtCuE,IAAYvE,EAAgB,QAAQqE,CAAc;AAExD,WAAIE,MAAc,KACdD,EAAiB,OAAOC,GAAW,CAAC,IAEpCD,EAAiB,KAAKD,CAAc,GAGjCC;AAAA,EACX,GAEM1B,KAA2B,CAACzB,GAA0CqD,MAAmB;AAC3F,IAAArD,EAAM,gBAAA;AAEN,UAAMmD,IAAmBF,EAAgBI,CAAM;AAC/C,IAAAvE,EAAmBqE,CAAgB,GAEnCnG,EAASmG,CAAgB;AAAA,EAC7B,GAEMhB,KAAsB,CAACnC,MAAkD;AAC3E,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AACD,QAAKtB,MAEDsB,EAAM,eAAA,GACNkC,EAASlC,CAAK;AAElB;AAAA,MACJ,KAAK;AACD,QAAKtB,MAEDsB,EAAM,eAAA,GACNkC,EAASlC,CAAK;AAElB;AAAA,IAEA;AAAA,EAEZ,GAEMkC,IAAW,CAAClC,MAAwF;AAItG,QAAIxC,KAAYuB;AACZ;AAMJ,UAAMuE,IAAiBtD,EAAM,WAAW;AAExC,IAAArB,EAAU,CAAA4E,MAAa,CAACA,CAAS,GACjC7D,EAAgB4D,CAAc;AAAA,EAClC,GAEMrD,IAAY,MAAM;AACpB,IAAIvB,MACAC,EAAU,EAAK,GACfK,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBtC,CAAO,GAC1B0C,EAAoB/C,CAA0B,GAC9CiD,EAAgB,EAAK,GAErBC,GAAW,SAAS,MAAA;AAAA,EAE5B,GAEM6D,KAAiB5B;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACAlD,KAAU;AAAA,IACVhB,MAAY;AAAA,IACZQ,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAK,GAAGO,IAAgB,WAAW+E,IAAgB,KAAKtD,IACpD,UAAA;AAAA,IAAAwB,GAAA;AAAA,IACAa,GAAA;AAAA,EAAmB,GACxB;AAER;"}

package/components/selects/MultiselectToggleFilter.js

@@ -1,10 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
-import u from "classnames";
-import { isEmpty as a } from "es-toolkit/compat";
+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 = u(
+  const { isActive: t, selectedItemIds: l, filterValue: s, onFilterChange: i } = e, r = a(
     "multiselect-filter-input",
-    a(l) && "multiselect-filter-input-placeholder",
+    u(l) && "multiselect-filter-input-placeholder",
     t && "multiselect-filter-input-active"
   );
   return /* @__PURE__ */ o(

package/components/selects/MultiselectToggleFilter.js.map

@@ -1 +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;"}
+{"version":3,"file":"MultiselectToggleFilter.js","sources":["../../../src/components/selects/MultiselectToggleFilter.tsx"],"sourcesContent":["import type React from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\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":";;;AAYA,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;"}