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

package/components/selects/BaseSelectDropdown.js

@@ -1,182 +1,143 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { isEmpty } from 'es-toolkit/compat';
-import { noop } from 'es-toolkit/function';
-import { useDropDirection } from "../../utils/useDropDirection.js";
-import { DOWN, scrollItemIntoView, UP } from "../../utils/scrollItemIntoView.js";
-import useEffectOnce from "../../hooks/useEffectOnce.js";
-import useKey from "../../useKey.js";
-import DropdownHeader from "./DropdownHeader.js";
-import NoItemMessage from "./NoItemMessage.js";
-import Spinner from "../spinner/Spinner.js";
-const DATA_ATTRIBUTE_ID = 'data-item-id';
-const DEFAULT_FOCUSED_ITEM_INDEX = 0;
-const HIGHLIGHT_CLASS = 'focus';
-const BaseSelectDropdown = (props) => {
-    const { isOpen = false, isLoading = false, updateDOMValues = noop, onOpen = noop, onSelect = noop, onClose = noop, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
-    const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
-    const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);
-    const dropdownMenuRef = useRef(null);
-    useEffectOnce(() => {
-        // all available items need to be rendered in order to know their DOM value
-        // which will be used for filtering in the parent component
-        const currentItemDOMValues = updateItemDOMValues();
-        updateDOMValues(currentItemDOMValues);
-    });
-    // Overwrite position of dropdown menu in case auto drop is enabled
-    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [isOpen]);
-    // Add or remove the "dropup" class from the parent Select/Multiselect component to position
-    // the dropdown element accordingly via CSS
-    useLayoutEffect(() => {
-        if (dropdownMenuRef.current) {
-            const parent = dropdownMenuRef.current.parentElement;
-            if (dropDirection.dropup) {
-                parent?.classList.add('dropup');
-            }
-            else {
-                parent?.classList.remove('dropup');
-            }
-        }
-    }, [dropDirection, dropdownMenuRef]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-    useEffect(() => {
-        if (dropdownMenuRef.current) {
-            updateDOMValues(updateItemDOMValues());
-        }
-    }, [dropdownMenuRef.current]);
-    // update internal state for isOpen
-    const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);
-    if (isOpen && !previousIsOpen) {
-        onOpen(dropDirection.dropup);
-        setPreviousIsOpen(isOpen);
-    }
-    else if (!isOpen && previousIsOpen) {
-        onClose();
-        setPreviousIsOpen(isOpen);
+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) => {
+  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();
+    u(e);
+  });
+  const p = Q({ pullRight: S, dropup: F, autoDropDirection: U, dropdownMenuRef: s }, [r]);
+  z(() => {
+    if (s.current) {
+      const e = s.current.parentElement;
+      p.dropup ? e?.classList.add("dropup") : e?.classList.remove("dropup");
     }
-    useKey(event => {
-        if (isOpen) {
-            switch (event.key) {
-                case 'Escape': {
-                    // close dropdown on esc
-                    onClose();
-                    break;
-                }
-                case 'Tab': {
-                    // close dropdown on tab
-                    onClose();
-                    break;
-                }
-                case 'Enter': {
-                    // select item on enter
-                    selectOptionOnEnter(event);
-                    break;
-                }
-                case 'ArrowUp': {
-                    // prevent scrolling the page when dropdown menu is open
-                    event.preventDefault();
-                    // select item above on arrow up key
-                    focusOption(UP);
-                    scrollItemIntoView(UP, dropdownMenuRef.current, getFocusedOptionNode());
-                    break;
-                }
-                case 'ArrowDown': {
-                    // prevent scrolling the page when dropdown menu is open
-                    event.preventDefault();
-                    // select item below on arrow down key
-                    focusOption(DOWN);
-                    scrollItemIntoView(DOWN, dropdownMenuRef.current, getFocusedOptionNode());
-                    break;
-                }
-                default:
-                    break;
-            }
+  }, [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) => {
+    if (r)
+      switch (e.key) {
+        case "Escape": {
+          D();
+          break;
         }
-    });
-    const focusOption = (direction) => {
-        let nextFocusedItem = 0;
-        switch (direction) {
-            case UP: {
-                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;
-                break;
-            }
-            case DOWN: {
-                nextFocusedItem = focusedItemIndex === options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;
-                break;
-            }
-            default:
-                break;
+        case "Tab": {
+          D();
+          break;
         }
-        // In case the next item index is negative, means outside the bounds of the items,
-        // reset it depending on the current direction
-        const indexLimit = direction === UP ? options.length - 1 : 0;
-        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);
-        setKeyboardUsed(true);
-    };
-    const getOptionNodes = () => {
-        const node = dropdownMenuRef.current;
-        return node?.getElementsByTagName('a') || [];
-    };
-    const updateItemDOMValues = () => {
-        if (dropdownMenuRef.current) {
-            const optionNodes = getOptionNodes();
-            return [...optionNodes].map(item => {
-                return {
-                    id: item.getAttribute(DATA_ATTRIBUTE_ID),
-                    text: item.textContent,
-                };
-            });
+        case "Enter": {
+          P(e);
+          break;
         }
-    };
-    const getFocusedOptionNode = () => {
-        const optionNodes = getOptionNodes();
-        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));
-    };
-    const selectOptionOnEnter = (event) => {
-        event.preventDefault();
-        // When no filter result was found, avoid selecting anything
-        if (isEmpty(options)) {
-            return;
+        case "ArrowUp": {
+          e.preventDefault(), y(I), A(I, s.current, N());
+          break;
         }
-        const match = getFocusedOptionNode();
-        if (match) {
-            const selectedItem = options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));
-            onSelect(selectedItem);
+        case "ArrowDown": {
+          e.preventDefault(), y(w), A(w, s.current, N());
+          break;
         }
-    };
-    const handleOptionChange = (event) => {
-        event.preventDefault();
-        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;
-        const selectedItem = options.find(option => option.id === optionId);
-        onSelect(selectedItem);
-    };
-    const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
-    // Don't show the dropdown, when no match are found when filtering unless there is a not found message
-    if (isEmpty(options)) {
-        return _jsx(NoItemMessage, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
+      }
+  });
+  const y = (e) => {
+    let t = 0;
+    switch (e) {
+      case I: {
+        t = o <= 0 ? o : o - 1;
+        break;
+      }
+      case w: {
+        t = o === n.length - 1 ? o : o + 1;
+        break;
+      }
     }
-    return (_jsxs("ul", { className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu', children: [isLoading && (_jsx("div", { className: 'display-flex justify-content-center padding-10', children: _jsx(Spinner, {}) })), !isLoading &&
-                options.map((option, index) => {
-                    if (option.header) {
-                        return _jsx(DropdownHeader, { icon: option.icon, label: option.label }, option.id);
-                    }
-                    // Show focused style only when keyboard is in use
-                    const anchorClassNames = classNames(keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none', 'display-flex align-items-center gap-3');
-                    const wrapperClassNames = classNames(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
-                    return (_jsx("li", { className: wrapperClassNames, role: 'listitem', children: _jsxs("a", { role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
-                            // Note, we need to assign the click callback only when it's not disabled
-                            // otherwise the functions is still triggered
-                            // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility
-                            onClick: option.disabled ? undefined : handleOptionChange, children: [_jsxs("span", { className: 'selected-option-dropdown-item', children: [option.icon && _jsx(_Fragment, { children: option.icon }), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] }) }, option.id));
-                })] }));
+    const a = e === I ? n.length - 1 : 0;
+    j(t < 0 ? a : t), G(!0);
+  }, C = () => s.current?.getElementsByTagName("a") || [], k = () => {
+    if (s.current)
+      return [...C()].map((t) => ({
+        id: t.getAttribute(L),
+        text: t.textContent
+      }));
+  }, N = () => [...C()].find((t) => t.className.includes(M)), P = (e) => {
+    if (e.preventDefault(), v(n))
+      return;
+    const t = N();
+    if (t) {
+      const a = n.find((d) => d.id === t.getAttribute(L));
+      m(a);
+    }
+  }, W = (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) => {
+      if (e.header)
+        return /* @__PURE__ */ i($, { icon: e.icon, label: e.label }, e.id);
+      const a = O(
+        K && o === t ? M : "",
+        e.disabled && "pointer-events-none",
+        "display-flex align-items-center gap-3"
+      ), d = O(
+        e.disabled && "disabled",
+        _ && e.selected && "active"
+      );
+      return /* @__PURE__ */ i("li", { className: d, role: "listitem", children: /* @__PURE__ */ b(
+        "a",
+        {
+          role: "menuitem",
+          className: a,
+          "data-item-id": e.id,
+          "data-item-index": t,
+          onClick: e.disabled ? void 0 : W,
+          children: [
+            /* @__PURE__ */ b("span", { className: "selected-option-dropdown-item", children: [
+              e.icon && /* @__PURE__ */ i(X, { children: e.icon }),
+              e.label
+            ] }),
+            /* @__PURE__ */ i("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));
 };
-export const filterOptions = (itemDOMValues, filterValue, options) => {
-    const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));
-    // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
-    // on the options itself as they might contain arbitrary components
-    return options.filter(option => {
-        return filteredDOMValues.find(domValue => domValue.id === option.id);
-    });
+export {
+  Ie as default,
+  ge as filterOptions
 };
-export default BaseSelectDropdown;
+//# sourceMappingURL=BaseSelectDropdown.js.map

package/components/selects/BaseSelectDropdown.js.map

@@ -0,0 +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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"}

package/components/selects/ClearButton.d.ts

@@ -1,4 +1,4 @@
-import type { SelectOption } from './Select';
+import { SelectOption } from './Select';
 export type ClearButtonProps = {
     showClear: boolean;
     selectedItem: SelectOption | null;

package/components/selects/ClearButton.js

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

package/components/selects/ClearButton.js.map

@@ -0,0 +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;"}

package/components/selects/DropdownHeader.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type DropdownHeaderProps = {
     icon?: React.ReactNode;
     center?: boolean;

package/components/selects/DropdownHeader.js

@@ -1,6 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DropdownHeader = (props) => {
-    const { icon, label, center = true, className = '' } = props;
-    return (_jsx("li", { className: `dropdown-header ${center ? 'center' : ''} ${className}`, children: _jsxs("span", { className: 'dropdown-header-text', children: [icon && _jsx("span", { className: 'margin-right-5', children: icon }), label] }) }));
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+const t = (a) => {
+  const { icon: e, label: s, center: n = !0, className: c = "" } = a;
+  return /* @__PURE__ */ r("li", { className: `dropdown-header ${n ? "center" : ""} ${c}`, children: /* @__PURE__ */ d("span", { className: "dropdown-header-text", children: [
+    e && /* @__PURE__ */ r("span", { className: "margin-right-5", children: e }),
+    s
+  ] }) });
 };
-export default DropdownHeader;
+export {
+  t as default
+};
+//# sourceMappingURL=DropdownHeader.js.map

package/components/selects/DropdownHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownHeader.js","sources":["../../../src/components/selects/DropdownHeader.tsx"],"sourcesContent":["import type React from 'react';\n\nexport type DropdownHeaderProps = {\n    icon?: React.ReactNode;\n    center?: boolean;\n    label: string | React.ReactNode;\n    className?: string;\n};\n\nconst DropdownHeader = (props: DropdownHeaderProps) => {\n    const { icon, label, center = true, className = '' } = props;\n    return (\n        <li className={`dropdown-header ${center ? 'center' : ''} ${className}`}>\n            <span className='dropdown-header-text'>\n                {icon && <span className='margin-right-5'>{icon}</span>}\n                {label}\n            </span>\n        </li>\n    );\n};\n\nexport default DropdownHeader;\n"],"names":["DropdownHeader","props","icon","label","center","className","jsx","jsxs"],"mappings":";AASA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,QAAAC,IAAS,IAAM,WAAAC,IAAY,OAAOJ;AACvD,SACI,gBAAAK,EAAC,MAAA,EAAG,WAAW,mBAAmBF,IAAS,WAAW,EAAE,IAAIC,CAAS,IACjE,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,wBACX,UAAA;AAAA,IAAAL,KAAQ,gBAAAI,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAJ,GAAK;AAAA,IAC/CC;AAAA,EAAA,EAAA,CACL,EAAA,CACJ;AAER;"}

package/components/selects/Multiselect.d.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
-import { type SelectOption } from './BaseSelectDropdown';
-import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
+import { default as React } from 'react';
+import { SelectOption } from './BaseSelectDropdown';
+import { WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
 export type MultiselectCounterMessage = {
     /**
      * Text that will be used when a single item is selected.