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

package/components/selects/BaseSelectDropdown.js

@@ -1,168 +1,138 @@
-import { jsx as a, jsxs as l, Fragment as Q } from "react/jsx-runtime";
-import { useState as E, useRef as R, useEffect as b, useLayoutEffect as Y } from "react";
-import { isEmpty as _ } from "es-toolkit/compat";
-import { noop as D } from "es-toolkit/function";
-import h from "../../utils/classNames.js";
-import { useDropDirection as Z } from "../../utils/useDropDirection.js";
-import { DOWN as w, scrollItemIntoView as T, UP as g } from "../../utils/scrollItemIntoView.js";
-import $ from "../../hooks/useKey.js";
-import ee from "./DropdownHeader.js";
-import te from "./NoItemMessage.js";
-import se from "../spinner/Spinner.js";
-const B = "data-item-id", re = 0, H = "focus", L = w, Ie = (O) => {
-  const {
-    isOpen: s = !1,
-    isLoading: p = !1,
-    updateDOMValues: x = D,
-    onOpen: d = D,
-    onSelect: u = D,
-    onClose: y = D,
-    options: n = [],
-    autoDropDirection: V = !0,
-    dropup: j = !1,
-    pullRight: K = !1,
-    useActiveClass: G = !1,
-    focusedItemIndex: m,
-    keyboardUsed: f,
-    noItemMessage: P,
-    dropdownClassName: W
-  } = O, [o, k] = E(m || re), [X, A] = E(f), C = R(L), r = R(null);
-  b(() => {
-    s && r.current && (r.current.scrollTop = 0);
-  }, [s]), b(() => {
-    typeof m == "number" && k(m), typeof f == "boolean" && A(f), s || (C.current = L);
-  }, [m, f, s]);
-  const I = Z({ pullRight: K, dropup: j, autoDropDirection: V, dropdownMenuRef: r }, [s]);
-  Y(() => {
-    if (r.current) {
-      const e = r.current.parentElement;
-      I.dropup ? e?.classList.add("dropup") : e?.classList.remove("dropup");
-    }
-  }, [I, r]), b(() => {
-    x(q());
-  }, [n]), b(() => {
-    s && T(
-      C.current || L,
-      r.current,
-      N()
-    );
-  }, [o, s]);
-  const [v, U] = E(s);
-  s && !v ? (d(I.dropup), U(s)) : !s && v && (y(), U(s)), $((e) => {
-    if (s)
-      switch (e.key) {
-        case "Escape": {
-          y();
-          break;
-        }
-        case "Tab": {
-          y();
-          break;
-        }
-        case "Enter": {
-          z(e);
-          break;
-        }
-        case "ArrowUp": {
-          e.preventDefault(), S(g), T(g, r.current, N());
-          break;
-        }
-        case "ArrowDown": {
-          e.preventDefault(), S(w), T(w, r.current, N());
-          break;
-        }
-      }
-  });
-  const S = (e) => {
-    let t = 0;
-    switch (e) {
-      case g: {
-        t = o <= 0 ? o : o - 1;
-        break;
-      }
-      case w: {
-        t = o === n.length - 1 ? o : o + 1;
-        break;
-      }
-    }
-    C.current = e;
-    const c = e === g ? n.length - 1 : 0;
-    k(t < 0 ? c : t), A(!0);
-  }, F = () => r.current?.getElementsByTagName("a") || [], q = () => {
-    if (r.current)
-      return [...F()].map(
-        (t) => ({
-          id: t.getAttribute(B),
-          text: t.textContent
-        })
-      );
-  }, N = () => [...F()].find((t) => t.className.includes(H)), z = (e) => {
-    if (e.preventDefault(), _(n))
-      return;
-    const t = N();
-    if (t) {
-      const c = n.find((i) => i.id === t.getAttribute(B));
-      u(c);
-    }
-  }, J = (e) => {
-    e.preventDefault();
-    const t = e.currentTarget.getElementsByTagName("input")[0].value, c = n.find((i) => i.id === t);
-    u(c);
-  }, M = h("dropdown-menu", I.pullRight && "pull-right", W);
-  return _(n) ? /* @__PURE__ */ a(te, { noItemMessage: P, className: M }) : /* @__PURE__ */ l("ul", { className: M, ref: r, role: "menu", children: [
-    p && /* @__PURE__ */ a("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ a(se, {}) }),
-    !p && n.map((e, t) => {
-      if (e.header)
-        return /* @__PURE__ */ a(ee, { icon: e.icon, label: e.label }, e.id);
-      const c = h(
-        X && o === t ? H : "",
-        e.disabled && "pointer-events-none",
-        "display-flex align-items-center gap-3",
-        e.dropdownItemClassName
-      ), i = h(
-        e.disabled && "disabled",
-        G && e.selected && "active"
-      );
-      return /* @__PURE__ */ a("li", { className: i, role: "listitem", children: /* @__PURE__ */ l(
-        "a",
-        {
-          role: "menuitem",
-          className: c,
-          "data-item-id": e.id,
-          "data-item-index": t,
-          onClick: e.disabled ? void 0 : J,
-          children: [
-            /* @__PURE__ */ l(
-              "span",
-              {
-                className: h(
-                  "selected-option-dropdown-item",
-                  e.description && "selected-option-dropdown-item-with-description"
-                ),
-                children: [
-                  e.icon && /* @__PURE__ */ a(Q, { children: e.icon }),
-                  e.description ? /* @__PURE__ */ l("span", { className: "selected-option-dropdown-text", children: [
-                    /* @__PURE__ */ a("span", { className: "selected-option-dropdown-label", children: e.label }),
-                    /* @__PURE__ */ l("span", { className: "selected-option-dropdown-description", children: [
-                      " ",
-                      e.description
-                    ] })
-                  ] }) : e.label
-                ]
-              }
-            ),
-            /* @__PURE__ */ a("input", { type: "hidden", value: e.id })
-          ]
-        }
-      ) }, e.id);
-    })
-  ] });
-}, Ne = (O, s, p) => {
-  const x = O.filter((d) => d.text.toLowerCase().includes(s.toLowerCase()));
-  return p.filter((d) => x.find((u) => u.id === d.id));
+import e from "../../hooks/useKey.js";
+import "../../useKey.js";
+import t from "../../utils/classNames.js";
+import { usePopover as n } from "../../hooks/useAnchoredPopover.js";
+import r from "./DropdownHeader.js";
+import { DOWN as i, scrollItemIntoView as a } from "../../utils/scrollItemIntoView.js";
+import o from "./NoItemMessage.js";
+import s from "../spinner/Spinner.js";
+import { useEffect as c, useRef as l, useState as u } from "react";
+import { noop as d } from "es-toolkit/function";
+import { isEmpty as f } from "es-toolkit/compat";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/selects/BaseSelectDropdown.tsx
+var g = "data-item-id", _ = 0, v = "focus", y = i, b = (b) => {
+	let { isOpen: x = !1, isLoading: S = !1, updateDOMValues: C = d, onOpen: w = d, onSelect: T = d, onClose: E = d, options: D = [], dropup: O = !1, pullRight: k = !1, useActiveClass: A = !1, focusedItemIndex: j, keyboardUsed: M, noItemMessage: N, dropdownClassName: P, anchorName: F } = b, [I, L] = u(j || _), [R, z] = u(M), B = l(y), V = l(null), H = F ? { positionAnchor: F } : void 0;
+	n(V, x), c(() => {
+		x && V.current && (V.current.scrollTop = 0);
+	}, [x]), c(() => {
+		typeof j == "number" && L(j), typeof M == "boolean" && z(M), x || (B.current = y);
+	}, [
+		j,
+		M,
+		x
+	]), c(() => {
+		C(q());
+	}, [D]), c(() => {
+		x && a(B.current || y, V.current, J());
+	}, [I, x]);
+	let [U, W] = u(x);
+	x && !U ? (w(O), W(x)) : !x && U && (E(), W(x)), e((e) => {
+		if (x) switch (e.key) {
+			case "Escape":
+				E();
+				break;
+			case "Tab":
+				E();
+				break;
+			case "Enter":
+				Y(e);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), G("up"), a("up", V.current, J());
+				break;
+			case "ArrowDown":
+				e.preventDefault(), G(i), a(i, V.current, J());
+				break;
+			default: break;
+		}
+	});
+	let G = (e) => {
+		let t = 0;
+		switch (e) {
+			case "up":
+				t = I <= 0 ? I : I - 1;
+				break;
+			case i:
+				t = I === D.length - 1 ? I : I + 1;
+				break;
+			default: break;
+		}
+		B.current = e;
+		let n = e === "up" ? D.length - 1 : 0;
+		L(t < 0 ? n : t), z(!0);
+	}, K = () => V.current?.getElementsByTagName("a") || [], q = () => {
+		if (V.current) return [...K()].map((e) => ({
+			id: e.getAttribute(g),
+			text: e.textContent
+		}));
+	}, J = () => [...K()].find((e) => e.className.includes(v)), Y = (e) => {
+		if (e.preventDefault(), f(D)) return;
+		let t = J();
+		if (t) {
+			let e = D.find((e) => e.id === t.getAttribute(g));
+			T(e);
+		}
+	}, X = (e) => {
+		e.preventDefault();
+		let t = e.currentTarget.getElementsByTagName("input")[0].value, n = D.find((e) => e.id === t);
+		T(n);
+	}, Z = P?.split(/\s+/).some((e) => e.startsWith("width-") || e.startsWith("max-width-")), Q = t("dropdown-menu", !Z && "dropdown-menu-anchor-width", P, k && "pull-right"), $ = { popover: "manual" };
+	return f(D) ? /* @__PURE__ */ m(o, {
+		...$,
+		noItemMessage: N,
+		className: Q,
+		ref: V,
+		style: H
+	}) : /* @__PURE__ */ h("ul", {
+		...$,
+		className: Q,
+		ref: V,
+		role: "menu",
+		style: H,
+		children: [S && /* @__PURE__ */ m("div", {
+			className: "display-flex justify-content-center padding-10",
+			children: /* @__PURE__ */ m(s, {})
+		}), !S && D.map((e, n) => {
+			if (e.header) return /* @__PURE__ */ m(r, {
+				icon: e.icon,
+				label: e.label
+			}, e.id);
+			let i = t(R && I === n ? v : "", e.disabled && "pointer-events-none", "display-flex align-items-center gap-3", e.dropdownItemClassName);
+			return /* @__PURE__ */ m("li", {
+				className: t(e.disabled && "disabled", A && e.selected && "active"),
+				role: "listitem",
+				children: /* @__PURE__ */ h("a", {
+					role: "menuitem",
+					className: i,
+					"data-item-id": e.id,
+					"data-item-index": n,
+					onClick: e.disabled ? void 0 : X,
+					children: [/* @__PURE__ */ h("span", {
+						className: t("selected-option-dropdown-item", !!e.description && "selected-option-dropdown-item-with-description"),
+						children: [e.icon && /* @__PURE__ */ m(p, { children: e.icon }), e.description ? /* @__PURE__ */ h("span", {
+							className: "selected-option-dropdown-text",
+							children: [/* @__PURE__ */ m("span", {
+								className: "selected-option-dropdown-label",
+								children: e.label
+							}), /* @__PURE__ */ h("span", {
+								className: "selected-option-dropdown-description",
+								children: [" ", e.description]
+							})]
+						}) : e.label]
+					}), /* @__PURE__ */ m("input", {
+						type: "hidden",
+						value: e.id
+					})]
+				})
+			}, e.id);
+		})]
+	});
+}, x = (e, t, n) => {
+	let r = e.filter((e) => e.text.toLowerCase().includes(t.toLowerCase()));
+	return n.filter((e) => r.find((t) => t.id === e.id));
 };
-export {
-  Ie as default,
-  Ne as filterOptions
-};
-//# sourceMappingURL=BaseSelectDropdown.js.map
+//#endregion
+export { b as default, x 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 { 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 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     * Optional description shown below the option item text.\n     */\n    description?: string | React.ReactNode;\n\n    /**\n     * Additional classes to be set on the dropdown menu item.\n     */\n    dropdownItemClassName?: string;\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    // 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        // 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        updateDOMValues(updateItemDOMValues());\n    }, [options]);\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                        option.dropdownItemClassName\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\n                                    className={classNames(\n                                        'selected-option-dropdown-item',\n                                        option.description && 'selected-option-dropdown-item-with-description'\n                                    )}\n                                >\n                                    {option.icon && <>{option.icon}</>}\n                                    {option.description ? (\n                                        <span className='selected-option-dropdown-text'>\n                                            <span className='selected-option-dropdown-label'>{option.label}</span>\n                                            <span className='selected-option-dropdown-description'>\n                                                {' '}\n                                                {option.description}\n                                            </span>\n                                        </span>\n                                    ) : (\n                                        option.label\n                                    )}\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","dropDirection","useDropDirection","useLayoutEffect","parent","updateItemDOMValues","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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"}
+{"version":3,"file":"BaseSelectDropdown.js","names":[],"sources":["../../../src/components/selects/BaseSelectDropdown.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { DOWN, scrollItemIntoView, UP } from '../../utils/scrollItemIntoView';\nimport useKey from '../../useKey';\nimport DropdownHeader from './DropdownHeader';\nimport NoItemMessage from './NoItemMessage';\nimport Spinner from '../spinner/Spinner';\nimport { usePopover } from '../../hooks/useAnchoredPopover';\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     * Optional description shown below the option item text.\n     */\n    description?: string | React.ReactNode;\n\n    /**\n     * Additional classes to be set on the dropdown menu item.\n     */\n    dropdownItemClassName?: string;\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    noItemMessage?: string | React.ReactNode;\n    focusedItemIndex?: number;\n    dropdownClassName?: string;\n    keyboardUsed?: boolean;\n    useActiveClass?: boolean;\n    anchorName?: string;\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        dropup = false,\n        pullRight = false,\n        useActiveClass = false,\n        focusedItemIndex: externalFocusedItemIndex,\n        keyboardUsed: externalKeyboardUsed,\n        noItemMessage,\n        dropdownClassName,\n        anchorName,\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    const dropdownMenuStyle = anchorName\n        ? ({\n              positionAnchor: anchorName,\n          } as CSSProperties)\n        : undefined;\n\n    usePopover(dropdownMenuRef, isOpen);\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    useEffect(() => {\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        updateDOMValues(updateItemDOMValues());\n    }, [options]);\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(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 hasCustomMaxWidth = dropdownClassName\n        ?.split(/\\s+/)\n        .some(dropdownClass => dropdownClass.startsWith('width-') || dropdownClass.startsWith('max-width-'));\n\n    const dropdownMenuClasses = classNames(\n        'dropdown-menu',\n        !hasCustomMaxWidth && 'dropdown-menu-anchor-width',\n        dropdownClassName,\n        pullRight && 'pull-right'\n    );\n\n    const dropdownMenuPopoverProps = {\n        popover: 'manual',\n    } as React.HTMLAttributes<HTMLUListElement>;\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 (\n            <NoItemMessage\n                {...dropdownMenuPopoverProps}\n                noItemMessage={noItemMessage}\n                className={dropdownMenuClasses}\n                ref={dropdownMenuRef}\n                style={dropdownMenuStyle}\n            />\n        );\n    }\n\n    return (\n        <ul\n            {...dropdownMenuPopoverProps}\n            className={dropdownMenuClasses}\n            ref={dropdownMenuRef}\n            role='menu'\n            style={dropdownMenuStyle}\n        >\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                        option.dropdownItemClassName\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\n                                    className={classNames(\n                                        'selected-option-dropdown-item',\n                                        Boolean(option.description) && 'selected-option-dropdown-item-with-description'\n                                    )}\n                                >\n                                    {option.icon && <>{option.icon}</>}\n                                    {option.description ? (\n                                        <span className='selected-option-dropdown-text'>\n                                            <span className='selected-option-dropdown-label'>{option.label}</span>\n                                            <span className='selected-option-dropdown-description'>\n                                                {' '}\n                                                {option.description}\n                                            </span>\n                                        </span>\n                                    ) : (\n                                        option.label\n                                    )}\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"],"mappings":"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"}

package/components/selects/ClearButton.js

@@ -1,16 +1,18 @@
-import { jsx as e } from "react/jsx-runtime";
-import { isNil as r } from "es-toolkit/predicate";
-import c from "../../utils/classNames.js";
-const C = (o) => {
-  const { showClear: s, selectedItem: t, onClear: n } = o, a = c(
-    "clearButton",
-    (!s || r(t)) && "hide pointer-events-none"
-  );
-  return /* @__PURE__ */ e("span", { className: a, onClick: (l) => {
-    l.stopPropagation(), n();
-  }, children: /* @__PURE__ */ e("span", { className: "clearButtonIcon rioglyph rioglyph-remove-sign" }) });
+import e from "../../utils/classNames.js";
+import { isNil as t } from "es-toolkit/predicate";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/selects/ClearButton.tsx
+var r = (r) => {
+	let { showClear: i, selectedItem: a, onClear: o } = r;
+	return /* @__PURE__ */ n("span", {
+		className: e("clearButton", (!i || t(a)) && "hide pointer-events-none"),
+		onClick: (e) => {
+			e.stopPropagation(), o();
+		},
+		children: /* @__PURE__ */ n("span", { className: "clearButtonIcon uikit-icon icon-remove-sign" })
+	});
 };
-export {
-  C as default
-};
-//# sourceMappingURL=ClearButton.js.map
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=ClearButton.js.map

package/components/selects/ClearButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearButton.js","sources":["../../../src/components/selects/ClearButton.tsx"],"sourcesContent":["import { isNil } from 'es-toolkit/predicate';\nimport type React from 'react';\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    const handleClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n        event.stopPropagation();\n        onClear();\n    };\n\n    return (\n        <span className={clearButtonClassNames} onClick={handleClick}>\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","event"],"mappings":";;;AAYA,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;AAQ3C,SACI,gBAAAK,EAAC,QAAA,EAAK,WAAWH,GAAuB,SANxB,CAACI,MAA6C;AAC9D,IAAAA,EAAM,gBAAA,GACNL,EAAA;AAAA,EACJ,GAIQ,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,gDAAA,CAAgD,EAAA,CACpE;AAER;"}
+{"version":3,"file":"ClearButton.js","names":[],"sources":["../../../src/components/selects/ClearButton.tsx"],"sourcesContent":["import { isNil } from 'es-toolkit/predicate';\nimport type React from 'react';\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    const handleClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n        event.stopPropagation();\n        onClear();\n    };\n\n    return (\n        <span className={clearButtonClassNames} onClick={handleClick}>\n            <span className='clearButtonIcon uikit-icon icon-remove-sign' />\n        </span>\n    );\n};\n\nexport default ClearButton;\n"],"mappings":";;;;AAYA,IAAM,KAAe,MAA4B;CAC7C,IAAM,EAAE,cAAW,iBAAc,eAAY;CAY7C,OACI,kBAAC,QAAD;EAAM,WAXoB,EAC1B,gBACC,CAAC,KAAa,EAAM,CAAY,MAAM,0BAStB;EAAuB,UANvB,MAA6C;GAE9D,AADA,EAAM,gBAAgB,GACtB,EAAQ;EACZ;YAIQ,kBAAC,QAAD,EAAM,WAAU,8CAA+C,CAAA;CAC7D,CAAA;AAEd"}

package/components/selects/DropdownHeader.js

@@ -1,12 +1,19 @@
-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
-  ] }) });
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/selects/DropdownHeader.tsx
+var n = (n) => {
+	let { icon: r, label: i, center: a = !0, className: o = "" } = n;
+	return /* @__PURE__ */ e("li", {
+		className: `dropdown-header ${a ? "center" : ""} ${o}`,
+		children: /* @__PURE__ */ t("span", {
+			className: "dropdown-header-text",
+			children: [r && /* @__PURE__ */ e("span", {
+				className: "margin-right-5",
+				children: r
+			}), i]
+		})
+	});
 };
-export {
-  t as default
-};
-//# sourceMappingURL=DropdownHeader.js.map
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=DropdownHeader.js.map

package/components/selects/DropdownHeader.js.map

@@ -1 +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;"}
+{"version":3,"file":"DropdownHeader.js","names":[],"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"],"mappings":";;AASA,IAAM,KAAkB,MAA+B;CACnD,IAAM,EAAE,SAAM,UAAO,YAAS,IAAM,eAAY,OAAO;CACvD,OACI,kBAAC,MAAD;EAAI,WAAW,mBAAmB,IAAS,WAAW,GAAG,GAAG;YACxD,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACK,KAAQ,kBAAC,QAAD;IAAM,WAAU;cAAkB;GAAW,CAAA,GACrD,CACC;;CACN,CAAA;AAEZ"}

package/components/selects/Multiselect.d.ts

@@ -49,7 +49,7 @@ export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAnd
     /**
      * Defines whether the dropdown opens upwards.
      *
-     * Set to `true` additionally disables autoDrop feature.
+     * The dropdown can still fall back to another position when there is not enough space.
      *
      * @default false
      */
@@ -57,19 +57,9 @@ export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAnd
     /**
      * Defines whether the dropdown opens right aligned to the dropdown toggle.
      *
-     * Set to 'true' additionally disables autoDrop feature.
-     *
      * @default false
      */
     pullRight?: boolean;
-    /**
-     * Enables or disables the autoDrop positioning feature.
-     *
-     * When enabled, the option list opens below or above the input depending on the surrounding space.
-     *
-     * @default true
-     */
-    autoDropDirection?: boolean;
     /**
      * Shows a loading spinner instead of the menu items if set to true.
      * @default false