@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

package/components/selects/BaseSelectDropdown.js

@@ -8,11 +8,11 @@ import { DOWN as O, scrollItemIntoView as T, UP as g } from "../../utils/scrollI
 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";
+import se from "./NoItemMessage.js";
+import re from "../spinner/Spinner.js";
 const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
   const {
-    isOpen: r = !1,
+    isOpen: s = !1,
     isLoading: l = !1,
     updateDOMValues: u = N,
     onOpen: i = N,
@@ -27,33 +27,33 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
     keyboardUsed: f,
     noItemMessage: W,
     dropdownClassName: X
-  } = h, [n, k] = y(m || ne), [q, A] = y(f), w = _(L), s = _(null);
+  } = h, [n, k] = y(m || ne), [q, A] = y(f), w = _(L), r = _(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]), $(() => {
+    s && r.current && (r.current.scrollTop = 0);
+  }, [s]), b(() => {
+    typeof m == "number" && k(m), typeof f == "boolean" && A(f), s || (w.current = L);
+  }, [m, f, s]), $(() => {
     const e = F();
     u(e);
   });
-  const I = Z({ pullRight: G, dropup: K, autoDropDirection: j, dropdownMenuRef: s }, [r]);
+  const I = Z({ pullRight: G, dropup: K, autoDropDirection: j, dropdownMenuRef: r }, [s]);
   Y(() => {
-    if (s.current) {
-      const e = s.current.parentElement;
+    if (r.current) {
+      const e = r.current.parentElement;
       I.dropup ? e?.classList.add("dropup") : e?.classList.remove("dropup");
     }
-  }, [I, s]), b(() => {
-    s.current && u(F());
-  }, [s.current]), b(() => {
-    r && T(
+  }, [I, r]), b(() => {
+    r.current && u(F());
+  }, [r.current]), b(() => {
+    s && T(
       w.current || L,
-      s.current,
+      r.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)
+  }, [n, s]);
+  const [v, U] = y(s);
+  s && !v ? (i(I.dropup), U(s)) : !s && v && (E(), U(s)), ee((e) => {
+    if (s)
       switch (e.key) {
         case "Escape": {
           E();
@@ -68,11 +68,11 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
           break;
         }
         case "ArrowUp": {
-          e.preventDefault(), M(g), T(g, s.current, D());
+          e.preventDefault(), M(g), T(g, r.current, D());
           break;
         }
         case "ArrowDown": {
-          e.preventDefault(), M(O), T(O, s.current, D());
+          e.preventDefault(), M(O), T(O, r.current, D());
           break;
         }
       }
@@ -92,12 +92,14 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
     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 [...S()].map((t) => ({
-        id: t.getAttribute(B),
-        text: t.textContent
-      }));
+  }, S = () => r.current?.getElementsByTagName("a") || [], F = () => {
+    if (r.current)
+      return [...S()].map(
+        (t) => ({
+          id: t.getAttribute(B),
+          text: t.textContent
+        })
+      );
   }, D = () => [...S()].find((t) => t.className.includes(H)), z = (e) => {
     if (e.preventDefault(), V(o))
       return;
@@ -111,8 +113,8 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
     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, {}) }),
+  return V(o) ? /* @__PURE__ */ c(se, { noItemMessage: W, className: R }) : /* @__PURE__ */ x("ul", { className: R, ref: r, role: "menu", children: [
+    l && /* @__PURE__ */ c("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ c(re, {}) }),
     !l && o.map((e, t) => {
       if (e.header)
         return /* @__PURE__ */ c(te, { icon: e.icon, label: e.label }, e.id);
@@ -143,8 +145,8 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
       ) }, e.id);
     })
   ] });
-}, Ne = (h, r, l) => {
-  const u = h.filter((i) => i.text.toLowerCase().includes(r.toLowerCase()));
+}, Ne = (h, s, l) => {
+  const u = h.filter((i) => i.text.toLowerCase().includes(s.toLowerCase()));
   return l.filter((i) => u.find((p) => p.id === i.id));
 };
 export {

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 { 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":";;;;;;;;;;;;AAcA,MAAMA,IAAoB,gBACpBC,KAA6B,GAC7BC,IAAkB,SAClBC,IAA2BC,GA8D3BC,KAAqB,CAAyBC,MAAsC;AACtF,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,iBAAAC,IAAkBC;AAAA,IAClB,QAAAC,IAASD;AAAA,IACT,UAAAE,IAAWF;AAAA,IACX,SAAAG,IAAUH;AAAA,IACV,SAAAI,IAAU,CAAA;AAAA,IACV,mBAAAC,IAAoB;AAAA,IACpB,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,kBAAkBC;AAAA,IAClB,cAAcC;AAAA,IACd,eAAAC;AAAA,IACA,mBAAAC;AAAA,EAAA,IACAhB,GAEE,CAACiB,GAAkBC,CAAmB,IAAIC,EAASN,KAA4BlB,EAA0B,GACzG,CAACyB,GAAcC,CAAe,IAAIF,EAASL,CAAoB,GAC/DQ,IAAyBC,EAAgC1B,CAAwB,GAEjF2B,IAAkBD,EAAyB,IAAI;AAGrD,EAAAE,EAAU,MAAM;AACZ,IAAIxB,KAAUuB,EAAgB,YAC1BA,EAAgB,QAAQ,YAAY;AAAA,EAE5C,GAAG,CAACvB,CAAM,CAAC,GAGXwB,EAAU,MAAM;AACZ,IAAI,OAAOZ,KAA6B,YACpCK,EAAoBL,CAAwB,GAG5C,OAAOC,KAAyB,aAChCO,EAAgBP,CAAoB,GAGnCb,MACDqB,EAAuB,UAAUzB;AAAA,EAEzC,GAAG,CAACgB,GAA0BC,GAAsBb,CAAM,CAAC,GAE3DyB,EAAc,MAAM;AAGhB,UAAMC,IAAuBC,EAAA;AAC7B,IAAAzB,EAAgBwB,CAAoB;AAAA,EACxC,CAAC;AAGD,QAAME,IAAgBC,EAAiB,EAAE,WAAAnB,GAAW,QAAAD,GAAQ,mBAAAD,GAAmB,iBAAAe,EAAA,GAAmB,CAACvB,CAAM,CAAC;AAI1G,EAAA8B,EAAgB,MAAM;AAClB,QAAIP,EAAgB,SAAS;AACzB,YAAMQ,IAASR,EAAgB,QAAQ;AACvC,MAAIK,EAAc,SACdG,GAAQ,UAAU,IAAI,QAAQ,IAE9BA,GAAQ,UAAU,OAAO,QAAQ;AAAA,IAEzC;AAAA,EACJ,GAAG,CAACH,GAAeL,CAAe,CAAC,GAEnCC,EAAU,MAAM;AACZ,IAAID,EAAgB,WAChBrB,EAAgByB,GAAqB;AAAA,EAE7C,GAAG,CAACJ,EAAgB,OAAO,CAAC,GAG5BC,EAAU,MAAM;AACZ,IAAKxB,KAILgC;AAAA,MACIX,EAAuB,WAAWzB;AAAA,MAClC2B,EAAgB;AAAA,MAChBU,EAAA;AAAA,IAAqB;AAAA,EAE7B,GAAG,CAACjB,GAAkBhB,CAAM,CAAC;AAG7B,QAAM,CAACkC,GAAgBC,CAAiB,IAAIjB,EAASlB,CAAM;AAC3D,EAAIA,KAAU,CAACkC,KACX9B,EAAOwB,EAAc,MAAM,GAC3BO,EAAkBnC,CAAM,KACjB,CAACA,KAAUkC,MAClB5B,EAAA,GACA6B,EAAkBnC,CAAM,IAG5BoC,GAAO,CAAAC,MAAS;AACZ,QAAIrC;AACA,cAAQqC,EAAM,KAAA;AAAA,QACV,KAAK,UAAU;AAEX,UAAA/B,EAAA;AACA;AAAA,QACJ;AAAA,QACA,KAAK,OAAO;AAER,UAAAA,EAAA;AACA;AAAA,QACJ;AAAA,QACA,KAAK,SAAS;AAEV,UAAAgC,EAAoBD,CAAK;AACzB;AAAA,QACJ;AAAA,QACA,KAAK,WAAW;AAEZ,UAAAA,EAAM,eAAA,GAGNE,EAAYC,CAAE,GACdR,EAAmBQ,GAAIjB,EAAgB,SAASU,EAAA,CAAsB;AACtE;AAAA,QACJ;AAAA,QACA,KAAK,aAAa;AAEd,UAAAI,EAAM,eAAA,GAGNE,EAAY1C,CAAI,GAChBmC,EAAmBnC,GAAM0B,EAAgB,SAASU,EAAA,CAAsB;AACxE;AAAA,QACJ;AAAA,MAEI;AAAA,EAGhB,CAAC;AAED,QAAMM,IAAc,CAACE,MAAuC;AACxD,QAAIC,IAAkB;AAEtB,YAAQD,GAAA;AAAA,MACJ,KAAKD,GAAI;AACL,QAAAE,IAAkB1B,KAAoB,IAAIA,IAAmBA,IAAmB;AAChF;AAAA,MACJ;AAAA,MACA,KAAKnB,GAAM;AACP,QAAA6C,IAAkB1B,MAAqBT,EAAQ,SAAS,IAAIS,IAAmBA,IAAmB;AAClG;AAAA,MACJ;AAAA,IAEI;AAGR,IAAAK,EAAuB,UAAUoB;AAIjC,UAAME,IAAaF,MAAcD,IAAKjC,EAAQ,SAAS,IAAI;AAE3D,IAAAU,EAAoByB,IAAkB,IAAIC,IAAaD,CAAe,GACtEtB,EAAgB,EAAI;AAAA,EACxB,GAEMwB,IAAiB,MACNrB,EAAgB,SAChB,qBAAqB,GAAG,KAAK,CAAA,GAGxCI,IAAsB,MAAM;AAC9B,QAAIJ,EAAgB;AAEhB,aAAO,CAAC,GADYqB,EAAA,CACE,EAAE,IAAI,CAAAC,OACjB;AAAA,QACH,IAAIA,EAAK,aAAapD,CAAiB;AAAA,QACvC,MAAMoD,EAAK;AAAA,MAAA,EAElB;AAAA,EAET,GAEMZ,IAAuB,MAElB,CAAC,GADYW,EAAA,CACE,EAAE,KAAK,OAAQC,EAAK,UAAU,SAASlD,CAAe,CAAC,GAG3E2C,IAAsB,CAACD,MAAyB;AAIlD,QAHAA,EAAM,eAAA,GAGFS,EAAQvC,CAAO;AACf;AAGJ,UAAMwC,IAAQd,EAAA;AAEd,QAAIc,GAAO;AACP,YAAMC,IAAezC,EAAQ,KAAK,CAAA0C,MAAUA,EAAO,OAAOF,EAAM,aAAatD,CAAiB,CAAC;AAC/F,MAAAY,EAAS2C,CAAY;AAAA,IACzB;AAAA,EACJ,GAEME,IAAqB,CAACb,MAA+C;AACvE,IAAAA,EAAM,eAAA;AAEN,UAAMc,IAAWd,EAAM,cAAc,qBAAqB,OAAO,EAAE,CAAC,EAAE,OAChEW,IAAezC,EAAQ,KAAK,CAAA0C,MAAUA,EAAO,OAAOE,CAAQ;AAElE,IAAA9C,EAAS2C,CAAY;AAAA,EACzB,GAEMI,IAAsBC,EAAW,iBAAiBzB,EAAc,aAAa,cAAcb,CAAiB;AAGlH,SAAI+B,EAAQvC,CAAO,IACR,gBAAA+C,EAACC,IAAA,EAAc,eAAAzC,GAA8B,WAAWsC,EAAA,CAAqB,sBAInF,MAAA,EAAG,WAAWA,GAAqB,KAAK7B,GAAiB,MAAK,QAC1D,UAAA;AAAA,IAAAtB,uBACI,OAAA,EAAI,WAAU,kDACX,UAAA,gBAAAqD,EAACE,MAAQ,GACb;AAAA,IAEH,CAACvD,KACEM,EAAQ,IAAI,CAAC0C,GAAQQ,MAAU;AAC3B,UAAIR,EAAO;AACP,eAAO,gBAAAK,EAACI,MAA+B,MAAMT,EAAO,MAAM,OAAOA,EAAO,SAA5CA,EAAO,EAA4C;AAInF,YAAMU,IAAmBN;AAAA,QACrBlC,KAAgBH,MAAqByC,IAAQ9D,IAAkB;AAAA,QAC/DsD,EAAO,YAAY;AAAA,QACnB;AAAA,MAAA,GAGEW,IAAoBP;AAAA,QACtBJ,EAAO,YAAY;AAAA,QACnBtC,KAAkBsC,EAAO,YAAY;AAAA,MAAA;AAGzC,aACI,gBAAAK,EAAC,MAAA,EAAmB,WAAWM,GAAmB,MAAK,YACnD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,WAAWF;AAAA,UACX,gBAAcV,EAAO;AAAA,UACrB,mBAAiBQ;AAAA,UAGjB,SAASR,EAAO,WAAW,SAAYC;AAAA,UAEvC,UAAA;AAAA,YAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,iCACX,UAAA;AAAA,cAAAZ,EAAO,QAAQ,gBAAAK,EAAAQ,GAAA,EAAG,UAAAb,EAAO,MAAK;AAAA,cAC9BA,EAAO;AAAA,YAAA,GACZ;AAAA,8BACC,SAAA,EAAM,MAAK,UAAS,OAAOA,EAAO,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAC3C,GAfKA,EAAO,EAgBhB;AAAA,IAER,CAAC;AAAA,EAAA,GACT;AAER,GAEac,KAAgB,CACzBC,GACAC,GACA1D,MACC;AACD,QAAM2D,IAAoBF,EAAc,OAAO,CAAAnB,MAAQA,EAAK,KAAK,YAAA,EAAc,SAASoB,EAAY,YAAA,CAAa,CAAC;AAIlH,SAAO1D,EAAQ,OAAO,CAAA0C,MACXiB,EAAkB,KAAK,CAAAC,MAAYA,EAAS,OAAOlB,EAAO,EAAE,CACtE;AACL;"}
+{"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(\n                item =>\n                    ({\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 => filteredDOMValues.find(domValue => domValue.id === option.id));\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/Multiselect.d.ts

@@ -114,6 +114,12 @@ export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAnd
      * @default false
      */
     useFilter?: boolean;
+    /**
+     * Set to show a clear button.
+     *
+     * @default false
+     */
+    useClear?: boolean;
     /**
      * Text that shall be shown when not match was found when filtering.
      */

package/components/selects/Multiselect.js

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