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

package/components/autosuggest/AutoSuggest.js

@@ -1,178 +1,147 @@
-import { jsxs as _, jsx as d } from "react/jsx-runtime";
-import { useState as h, useRef as E, useEffect as F } from "react";
-import { isEmpty as ge } from "es-toolkit/compat";
-import { noop as a } from "es-toolkit/function";
-import { isNil as fe } from "es-toolkit/predicate";
-import j from "../../utils/classNames.js";
-import he from "../clearableInput/ClearableInput.js";
-import { DOWN as B, scrollItemIntoView as Se, UP as Ie } from "../../utils/scrollItemIntoView.js";
-import { useDropDirection as be } from "../../utils/useDropDirection.js";
-import we from "../selects/DropdownHeader.js";
-import Ne from "../menuItems/MenuItem.js";
-import ve from "../../hooks/useClickOutside.js";
-import Ce from "./AutoSuggestAddons.js";
-import De from "./DropdownSpinner.js";
-import ye from "./NoItemMessage.js";
-const Ue = (U) => {
-  const {
-    id: M,
-    onSuggestionSelected: q = a,
-    onSuggestionsFetchRequested: S = a,
-    onSuggestionHighlighted: L = a,
-    renderSuggestion: I,
-    customSuggestionKey: b,
-    getSuggestionValue: x,
-    suggestions: t = [],
-    autoDropDirection: W = !0,
-    pullRight: $ = !1,
-    dropup: z = !1,
-    isLoading: G = !1,
-    openOnFocus: J = !1,
-    closeOnSelect: Q = !0,
-    showSelectedItemsInInput: X = !0,
-    autoComplete: Y = "off",
-    inputProps: r = {
-      id: M,
-      disabled: !1,
-      onChange: a,
-      onClear: a,
-      onBlur: a,
-      onFocus: a,
-      placeholder: "Start typing",
-      hasError: !1,
-      tabIndex: 0,
-      value: void 0,
-      icon: void 0
-    },
-    leadingInputAddons: A,
-    trailingInputAddons: R,
-    noItemMessage: w,
-    dropdownClassName: Z = "",
-    className: ee = "",
-    ...oe
-  } = U, [l, N] = h(!1), [p, v] = h(r.value || ""), [u, m] = h(-1), [V, k] = h(B), ne = ve(() => P()), g = E(null), C = E(null), O = E([]), D = r.value;
-  !fe(D) && p !== D && v(D ?? ""), F(() => S({ value: p }), []), F(() => {
-    const e = se();
-    Se(V, g.current, e);
-  }, [u, V]), F(() => {
-    const e = Array.from(g.current?.getElementsByTagName("li") || []);
-    O.current = e;
-  }, [t]);
-  const H = be({ pullRight: $, dropup: z, autoDropDirection: W, dropdownMenuRef: g }, [t]), y = () => {
-    l || N(!0);
-  }, P = () => {
-    N(!1);
-  }, te = (e) => {
-    J && y(), r.onFocus && r.onFocus();
-  }, re = (e) => {
-    switch (e.key) {
-      case "ArrowDown": {
-        const o = u + 1;
-        l && t.length > o && (m(o), f(Number(o)), k(B));
-        return;
-      }
-      case "ArrowUp":
-        if (l && u > 0) {
-          const o = u - 1;
-          m(o), f(Number(o)), k(Ie);
-        }
-        return;
-      case "Enter":
-        l && t[u] ? T(e, t[u]) : y();
-        break;
-      case "Escape":
-      case "Tab":
-        P();
-        break;
-    }
-  }, se = () => [...O.current].find((e) => e.className.includes("active")), le = (e, o) => {
-    p !== e && K(e, o);
-  }, K = (e, o, n = !1) => {
-    N(l ? n ? !1 : l : !0), v(e), m(-1), S({ value: e }), f(-1);
-    const { value: i, onChange: c = () => {
-    } } = r;
-    e !== i && c(o, { newValue: e });
-  }, f = (e) => {
-    const o = e === -1 ? null : t[e];
-    L(o);
-  }, ue = (e) => {
-    v(""), m(-1), C.current && C.current.focus(), S({ value: "" }), f(-1), r.onClear && r.onClear();
-  }, ae = (e) => e.label ?? e[b ?? ""] ?? "", T = (e, o) => {
-    const s = (x || ae)(o);
-    K(s, e, Q), q(e, {
-      suggestion: o,
-      suggestionValue: s
-    });
-  }, ie = () => {
-    const { id: e, icon: o, value: n, ...s } = r, i = { id: M ?? e, ...s }, c = /* @__PURE__ */ d(
-      he,
-      {
-        ...i,
-        ref: C,
-        autoComplete: Y,
-        onChange: le,
-        onClear: ue,
-        onFocus: te,
-        onClick: y,
-        value: X ? p : ""
-      }
-    );
-    return o || A || R ? /* @__PURE__ */ d(
-      Ce,
-      {
-        icon: o,
-        leadingInputAddons: A,
-        trailingInputAddons: R,
-        children: c
-      }
-    ) : c;
-  }, ce = (e) => e.label, de = () => {
-    const e = j(
-      "dropdown-menu",
-      H.pullRight && "pull-right",
-      Z
-    );
-    if (G)
-      return /* @__PURE__ */ d(De, { className: e });
-    const o = ge(t);
-    return o && !w ? null : /* @__PURE__ */ _("ul", { role: "menu", className: e, ref: g, children: [
-      o && w && /* @__PURE__ */ d(ye, { message: w }, "NoItemMessage"),
-      t.map((n, s) => {
-        if (I && !n.label && !b)
-          throw new Error(
-            'The "customSuggestionKey" need to be set when using a custom renderer and not using the "label" prop for suggestions'
-          );
-        const i = `index-${n.label ?? n[b ?? ""]}`;
-        if (n.header && n.label)
-          return /* @__PURE__ */ d(we, { label: n.label }, i);
-        const c = I || ce;
-        return /* @__PURE__ */ d(
-          Ne,
-          {
-            active: s === u,
-            disabled: n.disabled,
-            value: n.customSuggestion ? n.customSuggestion : c(n),
-            onSelect: (Ee, me) => T(me, n),
-            index: s
-          },
-          i
-        );
-      })
-    ] });
-  }, pe = j(
-    "AutoSuggest",
-    "dropdown",
-    l && "open",
-    H.dropup && "dropup",
-    ee
-  );
-  return /* @__PURE__ */ _("div", { ...oe, className: pe, onKeyDown: re, ref: ne, children: [
-    ie(),
-    de()
-  ] });
+import e from "../../hooks/useClickOutside.js";
+import t from "../../utils/classNames.js";
+import n from "../clearableInput/ClearableInput.js";
+import { useAnchorName as r, usePopover as i } from "../../hooks/useAnchoredPopover.js";
+import a from "../selects/DropdownHeader.js";
+import o from "../menuItems/MenuItem.js";
+import { DOWN as s, scrollItemIntoView as ee } from "../../utils/scrollItemIntoView.js";
+import te from "./AutoSuggestAddons.js";
+import c from "./DropdownSpinner.js";
+import l from "./NoItemMessage.js";
+import { useEffect as u, useRef as d, useState as f } from "react";
+import { noop as p } from "es-toolkit/function";
+import { isEmpty as ne } from "es-toolkit/compat";
+import { isNil as re } from "es-toolkit/predicate";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/autosuggest/AutoSuggest.tsx
+var g = (g) => {
+	let { id: _, onSuggestionSelected: ie = p, onSuggestionsFetchRequested: v = p, onSuggestionHighlighted: y = p, renderSuggestion: b, customSuggestionKey: x, getSuggestionValue: ae, suggestions: S = [], pullRight: C = !1, dropup: w = !1, isLoading: T = !1, openOnFocus: E = !1, closeOnSelect: D = !0, showSelectedItemsInInput: O = !0, autoComplete: oe = "off", inputProps: k = {
+		id: _,
+		disabled: !1,
+		onChange: p,
+		onClear: p,
+		onBlur: p,
+		onFocus: p,
+		placeholder: "Start typing",
+		hasError: !1,
+		tabIndex: 0,
+		value: void 0,
+		icon: void 0
+	}, leadingInputAddons: A, trailingInputAddons: j, noItemMessage: M, dropdownClassName: se = "", className: ce = "", ...le } = g, [N, P] = f(!1), [F, I] = f(k.value || ""), [L, R] = f(-1), [z, B] = f(s), V = e(() => Y()), H = d(null), U = d(null), W = d([]), G = r("autosuggest"), ue = { anchorName: G }, K = { positionAnchor: G }, q = k.value;
+	!re(q) && F !== q && I(q ?? ""), u(() => v({ value: F }), []), u(() => {
+		let e = fe();
+		ee(z, H.current, e);
+	}, [L, z]), u(() => {
+		let e = Array.from(H.current?.getElementsByTagName("li") || []);
+		W.current = e;
+	}, [S]), i(H, N, [
+		S,
+		T,
+		M
+	]);
+	let J = () => {
+		N || P(!0);
+	}, Y = () => {
+		P(!1);
+	}, X = (e) => {
+		E && J(), k.onFocus && k.onFocus();
+	}, de = (e) => {
+		switch (e.key) {
+			case "ArrowDown": {
+				let e = L + 1;
+				N && S.length > e && (R(e), Q(Number(e)), B(s));
+				return;
+			}
+			case "ArrowUp":
+				if (N && L > 0) {
+					let e = L - 1;
+					R(e), Q(Number(e)), B("up");
+				}
+				return;
+			case "Enter":
+				N && S[L] ? $(e, S[L]) : J();
+				break;
+			case "Escape":
+			case "Tab":
+				Y();
+				break;
+			default: break;
+		}
+	}, fe = () => [...W.current].find((e) => e.className.includes("active")), pe = (e, t) => {
+		F !== e && Z(e, t);
+	}, Z = (e, t, n = !1) => {
+		P(!N || !n && N), I(e), R(-1), v({ value: e }), Q(-1);
+		let { value: r, onChange: i = () => {} } = k;
+		e !== r && i(t, { newValue: e });
+	}, Q = (e) => {
+		let t = e === -1 ? null : S[e];
+		y(t);
+	}, me = (e) => {
+		I(""), R(-1), U.current && U.current.focus(), v({ value: "" }), Q(-1), k.onClear && k.onClear();
+	}, he = (e) => e.label ?? e[x ?? ""] ?? "", $ = (e, t) => {
+		let n = (ae || he)(t);
+		Z(n, e, D), ie(e, {
+			suggestion: t,
+			suggestionValue: n
+		});
+	}, ge = () => {
+		let { id: e, iconName: t, icon: r, value: i, ...a } = k, o = t ?? r, s = /* @__PURE__ */ m(n, {
+			id: _ ?? e,
+			...a,
+			ref: U,
+			autoComplete: oe,
+			onChange: pe,
+			onClear: me,
+			onFocus: X,
+			onClick: J,
+			value: O ? F : ""
+		});
+		return o || A || j ? /* @__PURE__ */ m(te, {
+			iconName: o,
+			leadingInputAddons: A,
+			trailingInputAddons: j,
+			children: s
+		}) : s;
+	}, _e = (e) => e.label, ve = () => {
+		let e = t("dropdown-menu", C && "pull-right", se), n = { popover: "manual" };
+		if (T) return /* @__PURE__ */ m(c, {
+			...n,
+			className: e,
+			ref: H,
+			style: K
+		});
+		let r = ne(S);
+		return r && !M ? null : /* @__PURE__ */ h("ul", {
+			...n,
+			role: "menu",
+			className: e,
+			ref: H,
+			style: K,
+			children: [r && M && /* @__PURE__ */ m(l, { message: M }, "NoItemMessage"), S.map((e, t) => {
+				if (b && !e.label && !x) throw Error("The \"customSuggestionKey\" need to be set when using a custom renderer and not using the \"label\" prop for suggestions");
+				let n = `index-${e.label ?? e[x ?? ""]}`;
+				if (e.header && e.label) return /* @__PURE__ */ m(a, { label: e.label }, n);
+				let r = b || _e;
+				return /* @__PURE__ */ m(o, {
+					active: t === L,
+					disabled: e.disabled,
+					value: e.customSuggestion ? e.customSuggestion : r(e),
+					onSelect: (t, n) => $(n, e),
+					index: t
+				}, n);
+			})]
+		});
+	}, ye = t("AutoSuggest", "dropdown", N && "open", w && "dropup", ce);
+	return /* @__PURE__ */ h("div", {
+		...le,
+		className: ye,
+		onKeyDown: de,
+		ref: V,
+		style: ue,
+		children: [ge(), ve()]
+	});
 };
-export {
-  Ue as AutoSuggest,
-  Ue as default
-};
-//# sourceMappingURL=AutoSuggest.js.map
+//#endregion
+export { g as AutoSuggest, g as default };
+
+//# sourceMappingURL=AutoSuggest.js.map

package/components/autosuggest/AutoSuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.js","sources":["../../../src/components/autosuggest/AutoSuggest.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport DropdownHeader from '../selects/DropdownHeader';\nimport MenuItem from '../menuItems/MenuItem';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport AutoSuggestAddons from './AutoSuggestAddons';\nimport DropdownSpinner from './DropdownSpinner';\nimport NoItemMessage from './NoItemMessage';\n\nexport type AutoSuggestSuggestion = {\n    /**\n     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.\n     */\n    label?: string;\n\n    /**\n     * Set to disable the suggestion and disallow selecting it.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager\n     * to render a placeholder with an icon next to it.\n     */\n    customSuggestion?: React.ReactNode;\n\n    /**\n     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.\n     */\n    [name: string]: string | React.ReactNode;\n};\n\nexport type SelectedSuggestion = {\n    suggestionValue: string | React.ReactElement;\n    suggestion: AutoSuggestSuggestion;\n};\n\nexport type AutoSuggestInputProps = {\n    /**\n     * A native input id attribute. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The value to be set for the input. Using this prop the input can be controlled from the outside.\n     */\n    value?: string;\n\n    /**\n     * String that will be displayed inside the input when nothing is typed in.\n     * @default `Start typing ...`\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Callback function which will be called when the input changes. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.'\n     * @deprecated please use `onSuggestionsFetchRequested` instead\n     * @param changeEvent\n     * @param changeProps\n     * @returns\n     */\n    onChange?: (changeEvent: React.SyntheticEvent, changeProps: { newValue: string }) => void;\n\n    /**\n     * Callback function which gets triggered when the input gaines focus.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function which will be called when the input is cleared. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.\n     */\n    onClear?: VoidFunction;\n\n    /**\n     * Boolean value that adds the class `has-error` to the input\n     * component. Use this for validation use cases. The Autosuggest component\n     * should be wrapped in a `form-group` element with the class `has-feedback`.\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Boolean value that disabled the input component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The React ref for the underlying input.\n     */\n    inputRef?: React.MutableRefObject<HTMLInputElement>;\n\n    /**\n     * Additional class names that are added to the input component.\n     */\n    className?: string;\n};\n\nexport type AutoSuggestProps<T = AutoSuggestSuggestion> = {\n    /**\n     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * Object to define properties for the input component. For the input, the ClearableInput\n     * component is used.\n     */\n    inputProps?: AutoSuggestInputProps;\n\n    /**\n     * Array of items which will be displayed. Items can be arbitrary objects as long as they\n     * have a label defined.\n     *\n     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you\n     * can pass our own object that does not need to have a label. In this case you may want to\n     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.\n     */\n    suggestions?: AutoSuggestSuggestion[];\n\n    /**\n     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu\n     * will not be rendered.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Callback function which will be called every time you need to recalculate suggestions e.i.\n     * when the filter is updates after each input. It will also be called when the input is\n     * cleared. The value would be an empty string in this case.\n     * @param result\n     * @returns\n     */\n    onSuggestionsFetchRequested?: (result: { value: string }) => void;\n\n    /**\n     * Callback function which will be called when a suggestion is selected from the dropdown menu.\n     * @param event\n     * @param selectedSuggestion\n     * @returns\n     */\n    onSuggestionSelected?: (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        selectedSuggestion: SelectedSuggestion\n    ) => void;\n\n    /**\n     * Callback function which will be called every time the highlighted selection changes.\n     * @param suggestion\n     * @returns\n     */\n    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;\n\n    /**\n     * Function that returns a string which will be displayed inside the input.\n     * This is required when a custom render function for suggestions is provided.\n     * Overwrite this function to provide the value to be used for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;\n\n    /**\n     * Function that defines how suggestions are rendered on the dropdown-menu.\n     * Use this to customize the appearance for instance when you want to show an icon\n     * for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;\n\n    /**\n     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify\n     * a unique value for each suggestion which will be used as a react key for the individual menu items.\n     */\n    customSuggestionKey?: string;\n\n    /**\n     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned or not.\n     * Set to true additionally disables autoDrop feature.\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Boolean that enables autoDrop feature.\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Boolean that enables opening the dropdown menu when gaining focus.\n     * @default false\n     */\n    openOnFocus?: boolean;\n\n    /**\n     * Boolean that enables the selection of an item to close the dropdown or not.\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Defines whether or not a selected item is shown in the input after it was selected.\n     * @default true\n     */\n    showSelectedItemsInInput?: boolean;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Adds a list of input-addons elements in front of the input.\n     */\n    leadingInputAddons?: React.ReactNode[];\n\n    /**\n     * Adds a list of input-addons elements after the input.\n     */\n    trailingInputAddons?: React.ReactNode[];\n\n    /**\n     * Additional class names that are added to the dropdown element.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional class names that are added to the wrapping element.\n     */\n    className?: string;\n};\n\nexport const AutoSuggest = (props: AutoSuggestProps) => {\n    const {\n        id,\n        onSuggestionSelected = noop,\n        onSuggestionsFetchRequested = noop,\n        onSuggestionHighlighted = noop,\n        renderSuggestion,\n        customSuggestionKey,\n        getSuggestionValue,\n        suggestions = [],\n        autoDropDirection = true,\n        pullRight = false,\n        dropup = false,\n        isLoading = false,\n        openOnFocus = false,\n        closeOnSelect = true,\n        showSelectedItemsInInput = true,\n        autoComplete = 'off',\n        inputProps = {\n            id,\n            disabled: false,\n            onChange: noop,\n            onClear: noop,\n            onBlur: noop,\n            onFocus: noop,\n            placeholder: 'Start typing',\n            hasError: false,\n            tabIndex: 0,\n            value: undefined,\n            icon: undefined,\n        },\n        leadingInputAddons,\n        trailingInputAddons,\n        noItemMessage,\n        dropdownClassName = '',\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [value, setValue] = useState(inputProps.value || '');\n    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);\n    const [direction, setDirection] = useState(DOWN);\n\n    const componentRef = useClickOutside(() => closeMenu());\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionNodesRef = useRef<HTMLLIElement[]>([]);\n\n    // Update internal value state from outside when external input value is given.\n    // This is important for when this component is used as a controlled component\n    const externalValue = inputProps.value;\n    if (!isNil(externalValue) && value !== externalValue) {\n        setValue(externalValue ?? '');\n    }\n\n    // Fetch suggestions on mounting the component by using the external\n    // fetch callback\n    useEffect(() => onSuggestionsFetchRequested({ value }), []);\n\n    // When a new suggestion is highlighted it may be not in view as the dropdown menu\n    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion\n    // so the user can see it\n    useEffect(() => {\n        const focusedItem = getFocusedOptionNode();\n        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);\n    }, [highlightedItemIndex, direction]);\n\n    // Used to store the list item reference to allow highlighting a single node.\n    // Update that list of nodes again when the suggestions change from the outside.\n    useEffect(() => {\n        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);\n        optionNodesRef.current = optionNodes;\n    }, [suggestions]);\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);\n\n    const openMenu = () => {\n        if (isOpen) {\n            return;\n        }\n        setIsOpen(true);\n    };\n\n    const closeMenu = () => {\n        setIsOpen(false);\n    };\n\n    const handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {\n        if (openOnFocus) {\n            openMenu();\n        }\n        if (inputProps.onFocus) {\n            inputProps.onFocus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (event.key) {\n            case 'ArrowDown': {\n                // select below on arrow down key\n                const newHighlightedIndex = highlightedItemIndex + 1;\n                if (isOpen && suggestions.length > newHighlightedIndex) {\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(DOWN);\n                }\n                return;\n            }\n            case 'ArrowUp':\n                // select above on arrow up key\n                if (isOpen && highlightedItemIndex > 0) {\n                    const newHighlightedIndex = highlightedItemIndex - 1;\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(UP);\n                }\n                return;\n            case 'Enter':\n                // select on enter\n                if (isOpen && suggestions[highlightedItemIndex]) {\n                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);\n                } else {\n                    openMenu();\n                }\n                break;\n            case 'Escape':\n            case 'Tab':\n                // close on esc key or on tab\n                closeMenu();\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getFocusedOptionNode = () =>\n        [...optionNodesRef.current].find((item: HTMLLIElement) => item.className.includes('active'));\n\n    const handleInputChange = (\n        newValue: string,\n        event: React.MouseEvent<HTMLSpanElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>\n    ) => {\n        if (value !== newValue) {\n            updateInputValue(newValue, event);\n        }\n    };\n\n    const updateInputValue = (\n        newValue: string,\n        event:\n            | React.MouseEvent<HTMLSpanElement, MouseEvent>\n            | React.ChangeEvent<HTMLInputElement>\n            | React.KeyboardEvent<HTMLDivElement>,\n        shouldCloseMenu = false\n    ) => {\n        const closeMenuEventually = shouldCloseMenu ? false : isOpen;\n\n        setIsOpen(!isOpen ? true : closeMenuEventually);\n        setValue(newValue);\n        setHighlightedItemIndex(-1);\n\n        // Fire callback so the parent component can filter the suggestions accordingly\n        onSuggestionsFetchRequested({ value: newValue });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Trigger onChange callback to notify usage component only when value has actually changed\n        const { value: newExternalValue, onChange = () => {} } = inputProps;\n        if (newValue !== newExternalValue) {\n            onChange(event, { newValue });\n        }\n    };\n\n    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex: number) => {\n        const currentHighlightedSuggestion =\n            currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];\n        onSuggestionHighlighted(currentHighlightedSuggestion);\n    };\n\n    const clearInputValue = (_event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        setValue('');\n        setHighlightedItemIndex(-1);\n\n        // Focus the input field after clearing it's value in order to allow\n        // entering new values right away\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        // Reset filter value so all suggestions are shown again\n        onSuggestionsFetchRequested({ value: '' });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Additionally, fire the onClear callback as the service may react on it\n        if (inputProps.onClear) {\n            inputProps.onClear();\n        }\n    };\n\n    const getDefaultSuggestionValue = (suggestion: AutoSuggestSuggestion): string =>\n        suggestion.label ?? (suggestion[customSuggestionKey ?? ''] as string) ?? '';\n\n    const onSuggestionClicked = (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        suggestion: AutoSuggestSuggestion\n    ) => {\n        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;\n\n        const suggestionValue = getSuggestionValueFunction(suggestion);\n\n        updateInputValue(suggestionValue, event, closeOnSelect);\n\n        // fire callback with the selected item\n        onSuggestionSelected(event, {\n            suggestion,\n            suggestionValue,\n        });\n    };\n\n    const renderInput = () => {\n        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;\n        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };\n\n        const input = (\n            <ClearableInput\n                {...clearableProps}\n                ref={inputRef}\n                autoComplete={autoComplete}\n                onChange={handleInputChange}\n                onClear={clearInputValue}\n                onFocus={handleFocus}\n                onClick={openMenu}\n                value={showSelectedItemsInInput ? value : ''}\n            />\n        );\n\n        if (icon || leadingInputAddons || trailingInputAddons) {\n            return (\n                <AutoSuggestAddons\n                    icon={icon}\n                    leadingInputAddons={leadingInputAddons}\n                    trailingInputAddons={trailingInputAddons}\n                >\n                    {input}\n                </AutoSuggestAddons>\n            );\n        }\n\n        return input;\n    };\n\n    const renderDefaultSuggestion = (suggestion: AutoSuggestSuggestion): React.ReactNode => suggestion.label;\n\n    const renderDropdownMenu = () => {\n        const dropdownMenuClasses = classNames(\n            'dropdown-menu',\n            dropDirection.pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        if (isLoading) {\n            return <DropdownSpinner className={dropdownMenuClasses} />;\n        }\n\n        const hasNoSuggestions = isEmpty(suggestions);\n\n        if (hasNoSuggestions && !noItemMessage) {\n            return null;\n        }\n\n        return (\n            <ul role='menu' className={dropdownMenuClasses} ref={dropdownMenuRef}>\n                {hasNoSuggestions && noItemMessage && <NoItemMessage key='NoItemMessage' message={noItemMessage} />}\n                {suggestions.map((suggestion, index) => {\n                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error\n                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {\n                        throw new Error(\n                            'The \"customSuggestionKey\" need to be set when using a custom renderer ' +\n                                'and not using the \"label\" prop for suggestions'\n                        );\n                    }\n\n                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;\n\n                    if (suggestion.header && suggestion.label) {\n                        return <DropdownHeader key={key} label={(suggestion as AutoSuggestSuggestion).label} />;\n                    }\n\n                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;\n\n                    return (\n                        <MenuItem\n                            key={key}\n                            active={index === highlightedItemIndex}\n                            disabled={suggestion.disabled}\n                            value={\n                                suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion)\n                            }\n                            onSelect={(_: number | undefined, event: React.MouseEvent<HTMLLIElement>) =>\n                                onSuggestionClicked(event, suggestion)\n                            }\n                            index={index}\n                        />\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    const classes = classNames(\n        'AutoSuggest',\n        'dropdown',\n        isOpen && 'open',\n        dropDirection.dropup && 'dropup',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} onKeyDown={handleKeyDown} ref={componentRef}>\n            {renderInput()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default AutoSuggest;\n"],"names":["AutoSuggest","props","id","onSuggestionSelected","noop","onSuggestionsFetchRequested","onSuggestionHighlighted","renderSuggestion","customSuggestionKey","getSuggestionValue","suggestions","autoDropDirection","pullRight","dropup","isLoading","openOnFocus","closeOnSelect","showSelectedItemsInInput","autoComplete","inputProps","leadingInputAddons","trailingInputAddons","noItemMessage","dropdownClassName","className","remainingProps","isOpen","setIsOpen","useState","value","setValue","highlightedItemIndex","setHighlightedItemIndex","direction","setDirection","DOWN","componentRef","useClickOutside","closeMenu","dropdownMenuRef","useRef","inputRef","optionNodesRef","externalValue","isNil","useEffect","focusedItem","getFocusedOptionNode","scrollItemIntoView","optionNodes","dropDirection","useDropDirection","openMenu","handleFocus","_event","handleKeyDown","event","newHighlightedIndex","handleHighlightedSuggestionChanged","UP","onSuggestionClicked","item","handleInputChange","newValue","updateInputValue","shouldCloseMenu","newExternalValue","onChange","currentHighlightedItemIndex","currentHighlightedSuggestion","clearInputValue","getDefaultSuggestionValue","suggestion","suggestionValue","renderInput","inputPropId","icon","ignoredExternalValue","remainingInputProps","clearableProps","input","jsx","ClearableInput","AutoSuggestAddons","renderDefaultSuggestion","renderDropdownMenu","dropdownMenuClasses","classNames","DropdownSpinner","hasNoSuggestions","isEmpty","NoItemMessage","index","key","DropdownHeader","renderFunction","MenuItem","_","classes","jsxs"],"mappings":"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"}
+{"version":3,"file":"AutoSuggest.js","names":[],"sources":["../../../src/components/autosuggest/AutoSuggest.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type CSSProperties, type HTMLAttributes } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';\nimport DropdownHeader from '../selects/DropdownHeader';\nimport MenuItem from '../menuItems/MenuItem';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport AutoSuggestAddons from './AutoSuggestAddons';\nimport DropdownSpinner from './DropdownSpinner';\nimport NoItemMessage from './NoItemMessage';\nimport { useAnchorName, usePopover } from '../../hooks/useAnchoredPopover';\nimport type { IconType } from '../icon/Icon';\n\nexport type AutoSuggestSuggestion = {\n    /**\n     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.\n     */\n    label?: string;\n\n    /**\n     * Set to disable the suggestion and disallow selecting it.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager\n     * to render a placeholder with an icon next to it.\n     */\n    customSuggestion?: React.ReactNode;\n\n    /**\n     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.\n     */\n    [name: string]: string | React.ReactNode;\n};\n\nexport type SelectedSuggestion = {\n    suggestionValue: string | React.ReactElement;\n    suggestion: AutoSuggestSuggestion;\n};\n\nexport type AutoSuggestInputProps = {\n    /**\n     * A native input id attribute. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The value to be set for the input. Using this prop the input can be controlled from the outside.\n     */\n    value?: string;\n\n    /**\n     * String that will be displayed inside the input when nothing is typed in.\n     * @default `Start typing ...`\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `icon-search`.\n     */\n    iconName?: IconType;\n\n    /**\n     * Legacy alias for `iconName`.\n     *\n     * @deprecated Use `iconName` instead.\n     */\n    icon?: IconType;\n\n    /**\n     * Callback function which will be called when the input changes. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.'\n     * @deprecated please use `onSuggestionsFetchRequested` instead\n     * @param changeEvent\n     * @param changeProps\n     * @returns\n     */\n    onChange?: (changeEvent: React.SyntheticEvent, changeProps: { newValue: string }) => void;\n\n    /**\n     * Callback function which gets triggered when the input gaines focus.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function which will be called when the input is cleared. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.\n     */\n    onClear?: VoidFunction;\n\n    /**\n     * Boolean value that adds the class `has-error` to the input\n     * component. Use this for validation use cases. The Autosuggest component\n     * should be wrapped in a `form-group` element with the class `has-feedback`.\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Boolean value that disabled the input component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The React ref for the underlying input.\n     */\n    inputRef?: React.MutableRefObject<HTMLInputElement>;\n\n    /**\n     * Additional class names that are added to the input component.\n     */\n    className?: string;\n};\n\nexport type AutoSuggestProps<T = AutoSuggestSuggestion> = {\n    /**\n     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * Object to define properties for the input component. For the input, the ClearableInput\n     * component is used.\n     */\n    inputProps?: AutoSuggestInputProps;\n\n    /**\n     * Array of items which will be displayed. Items can be arbitrary objects as long as they\n     * have a label defined.\n     *\n     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you\n     * can pass our own object that does not need to have a label. In this case you may want to\n     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.\n     */\n    suggestions?: AutoSuggestSuggestion[];\n\n    /**\n     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu\n     * will not be rendered.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Callback function which will be called every time you need to recalculate suggestions e.i.\n     * when the filter is updates after each input. It will also be called when the input is\n     * cleared. The value would be an empty string in this case.\n     * @param result\n     * @returns\n     */\n    onSuggestionsFetchRequested?: (result: { value: string }) => void;\n\n    /**\n     * Callback function which will be called when a suggestion is selected from the dropdown menu.\n     * @param event\n     * @param selectedSuggestion\n     * @returns\n     */\n    onSuggestionSelected?: (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        selectedSuggestion: SelectedSuggestion\n    ) => void;\n\n    /**\n     * Callback function which will be called every time the highlighted selection changes.\n     * @param suggestion\n     * @returns\n     */\n    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;\n\n    /**\n     * Function that returns a string which will be displayed inside the input.\n     * This is required when a custom render function for suggestions is provided.\n     * Overwrite this function to provide the value to be used for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;\n\n    /**\n     * Function that defines how suggestions are rendered on the dropdown-menu.\n     * Use this to customize the appearance for instance when you want to show an icon\n     * for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;\n\n    /**\n     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify\n     * a unique value for each suggestion which will be used as a react key for the individual menu items.\n     */\n    customSuggestionKey?: string;\n\n    /**\n     * Boolean that opens the dropdown-menu above the input.\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned or not.\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Boolean that enables opening the dropdown menu when gaining focus.\n     * @default false\n     */\n    openOnFocus?: boolean;\n\n    /**\n     * Boolean that enables the selection of an item to close the dropdown or not.\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Defines whether or not a selected item is shown in the input after it was selected.\n     * @default true\n     */\n    showSelectedItemsInInput?: boolean;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Adds a list of input-addons elements in front of the input.\n     */\n    leadingInputAddons?: React.ReactNode[];\n\n    /**\n     * Adds a list of input-addons elements after the input.\n     */\n    trailingInputAddons?: React.ReactNode[];\n\n    /**\n     * Additional class names that are added to the dropdown element.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional class names that are added to the wrapping element.\n     */\n    className?: string;\n};\n\nexport const AutoSuggest = (props: AutoSuggestProps) => {\n    const {\n        id,\n        onSuggestionSelected = noop,\n        onSuggestionsFetchRequested = noop,\n        onSuggestionHighlighted = noop,\n        renderSuggestion,\n        customSuggestionKey,\n        getSuggestionValue,\n        suggestions = [],\n        pullRight = false,\n        dropup = false,\n        isLoading = false,\n        openOnFocus = false,\n        closeOnSelect = true,\n        showSelectedItemsInInput = true,\n        autoComplete = 'off',\n        inputProps = {\n            id,\n            disabled: false,\n            onChange: noop,\n            onClear: noop,\n            onBlur: noop,\n            onFocus: noop,\n            placeholder: 'Start typing',\n            hasError: false,\n            tabIndex: 0,\n            value: undefined,\n            icon: undefined,\n        },\n        leadingInputAddons,\n        trailingInputAddons,\n        noItemMessage,\n        dropdownClassName = '',\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [value, setValue] = useState(inputProps.value || '');\n    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);\n    const [direction, setDirection] = useState(DOWN);\n\n    const componentRef = useClickOutside(() => closeMenu());\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionNodesRef = useRef<HTMLLIElement[]>([]);\n    const anchorName = useAnchorName('autosuggest');\n\n    const anchorStyle = {\n        anchorName,\n    } as CSSProperties;\n\n    const dropdownMenuStyle = {\n        positionAnchor: anchorName,\n    } as CSSProperties;\n\n    // Update internal value state from outside when external input value is given.\n    // This is important for when this component is used as a controlled component\n    const externalValue = inputProps.value;\n    if (!isNil(externalValue) && value !== externalValue) {\n        setValue(externalValue ?? '');\n    }\n\n    // Fetch suggestions on mounting the component by using the external\n    // fetch callback\n    useEffect(() => onSuggestionsFetchRequested({ value }), []);\n\n    // When a new suggestion is highlighted it may be not in view as the dropdown menu\n    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion\n    // so the user can see it\n    useEffect(() => {\n        const focusedItem = getFocusedOptionNode();\n        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);\n    }, [highlightedItemIndex, direction]);\n\n    // Used to store the list item reference to allow highlighting a single node.\n    // Update that list of nodes again when the suggestions change from the outside.\n    useEffect(() => {\n        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);\n        optionNodesRef.current = optionNodes;\n    }, [suggestions]);\n\n    usePopover(dropdownMenuRef, isOpen, [suggestions, isLoading, noItemMessage]);\n\n    const openMenu = () => {\n        if (isOpen) {\n            return;\n        }\n        setIsOpen(true);\n    };\n\n    const closeMenu = () => {\n        setIsOpen(false);\n    };\n\n    const handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {\n        if (openOnFocus) {\n            openMenu();\n        }\n        if (inputProps.onFocus) {\n            inputProps.onFocus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (event.key) {\n            case 'ArrowDown': {\n                // select below on arrow down key\n                const newHighlightedIndex = highlightedItemIndex + 1;\n                if (isOpen && suggestions.length > newHighlightedIndex) {\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(DOWN);\n                }\n                return;\n            }\n            case 'ArrowUp':\n                // select above on arrow up key\n                if (isOpen && highlightedItemIndex > 0) {\n                    const newHighlightedIndex = highlightedItemIndex - 1;\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(UP);\n                }\n                return;\n            case 'Enter':\n                // select on enter\n                if (isOpen && suggestions[highlightedItemIndex]) {\n                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);\n                } else {\n                    openMenu();\n                }\n                break;\n            case 'Escape':\n            case 'Tab':\n                // close on esc key or on tab\n                closeMenu();\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getFocusedOptionNode = () =>\n        [...optionNodesRef.current].find((item: HTMLLIElement) => item.className.includes('active'));\n\n    const handleInputChange = (\n        newValue: string,\n        event: React.MouseEvent<HTMLSpanElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>\n    ) => {\n        if (value !== newValue) {\n            updateInputValue(newValue, event);\n        }\n    };\n\n    const updateInputValue = (\n        newValue: string,\n        event:\n            | React.MouseEvent<HTMLSpanElement, MouseEvent>\n            | React.ChangeEvent<HTMLInputElement>\n            | React.KeyboardEvent<HTMLDivElement>,\n        shouldCloseMenu = false\n    ) => {\n        const closeMenuEventually = shouldCloseMenu ? false : isOpen;\n\n        setIsOpen(!isOpen ? true : closeMenuEventually);\n        setValue(newValue);\n        setHighlightedItemIndex(-1);\n\n        // Fire callback so the parent component can filter the suggestions accordingly\n        onSuggestionsFetchRequested({ value: newValue });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Trigger onChange callback to notify usage component only when value has actually changed\n        const { value: newExternalValue, onChange = () => {} } = inputProps;\n        if (newValue !== newExternalValue) {\n            onChange(event, { newValue });\n        }\n    };\n\n    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex: number) => {\n        const currentHighlightedSuggestion =\n            currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];\n        onSuggestionHighlighted(currentHighlightedSuggestion);\n    };\n\n    const clearInputValue = (_event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        setValue('');\n        setHighlightedItemIndex(-1);\n\n        // Focus the input field after clearing it's value in order to allow\n        // entering new values right away\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        // Reset filter value so all suggestions are shown again\n        onSuggestionsFetchRequested({ value: '' });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Additionally, fire the onClear callback as the service may react on it\n        if (inputProps.onClear) {\n            inputProps.onClear();\n        }\n    };\n\n    const getDefaultSuggestionValue = (suggestion: AutoSuggestSuggestion): string =>\n        suggestion.label ?? (suggestion[customSuggestionKey ?? ''] as string) ?? '';\n\n    const onSuggestionClicked = (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        suggestion: AutoSuggestSuggestion\n    ) => {\n        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;\n\n        const suggestionValue = getSuggestionValueFunction(suggestion);\n\n        updateInputValue(suggestionValue, event, closeOnSelect);\n\n        // fire callback with the selected item\n        onSuggestionSelected(event, {\n            suggestion,\n            suggestionValue,\n        });\n    };\n\n    const renderInput = () => {\n        const {\n            id: inputPropId,\n            iconName,\n            icon: legacyIcon,\n            value: ignoredExternalValue,\n            ...remainingInputProps\n        } = inputProps;\n        const resolvedIconName = iconName ?? legacyIcon;\n        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };\n\n        const input = (\n            <ClearableInput\n                {...clearableProps}\n                ref={inputRef}\n                autoComplete={autoComplete}\n                onChange={handleInputChange}\n                onClear={clearInputValue}\n                onFocus={handleFocus}\n                onClick={openMenu}\n                value={showSelectedItemsInInput ? value : ''}\n            />\n        );\n\n        if (resolvedIconName || leadingInputAddons || trailingInputAddons) {\n            return (\n                <AutoSuggestAddons\n                    iconName={resolvedIconName}\n                    leadingInputAddons={leadingInputAddons}\n                    trailingInputAddons={trailingInputAddons}\n                >\n                    {input}\n                </AutoSuggestAddons>\n            );\n        }\n\n        return input;\n    };\n\n    const renderDefaultSuggestion = (suggestion: AutoSuggestSuggestion): React.ReactNode => suggestion.label;\n\n    const renderDropdownMenu = () => {\n        const dropdownMenuClasses = classNames('dropdown-menu', pullRight && 'pull-right', dropdownClassName);\n        const dropdownMenuPopoverProps = {\n            popover: 'manual',\n        } as HTMLAttributes<HTMLUListElement>;\n\n        if (isLoading) {\n            return (\n                <DropdownSpinner\n                    {...dropdownMenuPopoverProps}\n                    className={dropdownMenuClasses}\n                    ref={dropdownMenuRef}\n                    style={dropdownMenuStyle}\n                />\n            );\n        }\n\n        const hasNoSuggestions = isEmpty(suggestions);\n\n        if (hasNoSuggestions && !noItemMessage) {\n            return null;\n        }\n\n        return (\n            <ul\n                {...dropdownMenuPopoverProps}\n                role='menu'\n                className={dropdownMenuClasses}\n                ref={dropdownMenuRef}\n                style={dropdownMenuStyle}\n            >\n                {hasNoSuggestions && noItemMessage && <NoItemMessage key='NoItemMessage' message={noItemMessage} />}\n                {suggestions.map((suggestion, index) => {\n                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error\n                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {\n                        throw new Error(\n                            'The \"customSuggestionKey\" need to be set when using a custom renderer ' +\n                                'and not using the \"label\" prop for suggestions'\n                        );\n                    }\n\n                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;\n\n                    if (suggestion.header && suggestion.label) {\n                        return <DropdownHeader key={key} label={(suggestion as AutoSuggestSuggestion).label} />;\n                    }\n\n                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;\n\n                    return (\n                        <MenuItem\n                            key={key}\n                            active={index === highlightedItemIndex}\n                            disabled={suggestion.disabled}\n                            value={\n                                suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion)\n                            }\n                            onSelect={(_: number | undefined, event: React.MouseEvent<HTMLLIElement>) =>\n                                onSuggestionClicked(event, suggestion)\n                            }\n                            index={index}\n                        />\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    const classes = classNames('AutoSuggest', 'dropdown', isOpen && 'open', dropup && 'dropup', className);\n\n    return (\n        <div {...remainingProps} className={classes} onKeyDown={handleKeyDown} ref={componentRef} style={anchorStyle}>\n            {renderInput()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default AutoSuggest;\n"],"mappings":"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"}

package/components/autosuggest/AutoSuggestAddons.d.ts

@@ -1,8 +1,15 @@
 import { default as React, PropsWithChildren } from 'react';
+import { IconType } from '../icon/Icon';
 export type AutoSuggestAddonsProps = {
-    icon?: string;
+    iconName?: IconType;
+    /**
+     * Legacy alias for `iconName`.
+     *
+     * @deprecated Use `iconName` instead.
+     */
+    icon?: IconType;
     leadingInputAddons?: React.ReactNode[];
     trailingInputAddons?: React.ReactNode[];
 };
-declare const AutoSuggestAddons: ({ icon, leadingInputAddons, trailingInputAddons, children, }: PropsWithChildren<AutoSuggestAddonsProps>) => import("react/jsx-runtime").JSX.Element;
+declare const AutoSuggestAddons: ({ iconName, icon: legacyIcon, leadingInputAddons, trailingInputAddons, children, }: PropsWithChildren<AutoSuggestAddonsProps>) => import("react/jsx-runtime").JSX.Element;
 export default AutoSuggestAddons;

package/components/autosuggest/AutoSuggestAddons.js

@@ -1,16 +1,22 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-const c = ({
-  icon: s,
-  leadingInputAddons: a,
-  trailingInputAddons: e,
-  children: p
-}) => /* @__PURE__ */ t("div", { className: "input-group width-100pct", children: [
-  a && a,
-  s && /* @__PURE__ */ r("span", { className: "input-group-addon", children: /* @__PURE__ */ r("span", { className: `rioglyph ${s}`, "aria-hidden": "true" }) }),
-  p,
-  e && e
-] });
-export {
-  c as default
-};
-//# sourceMappingURL=AutoSuggestAddons.js.map
+import { normalizeIconName as e } from "../../utils/iconNames.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/autosuggest/AutoSuggestAddons.tsx
+var r = ({ iconName: r, icon: i, leadingInputAddons: a, trailingInputAddons: o, children: s }) => /* @__PURE__ */ n("div", {
+	className: "input-group width-100pct",
+	children: [
+		a && a,
+		r ?? i ? /* @__PURE__ */ t("span", {
+			className: "input-group-addon",
+			children: /* @__PURE__ */ t("span", {
+				className: `uikit-icon ${e(r ?? i ?? "")}`,
+				"aria-hidden": "true"
+			})
+		}) : null,
+		s,
+		o && o
+	]
+});
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=AutoSuggestAddons.js.map

package/components/autosuggest/AutoSuggestAddons.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggestAddons.js","sources":["../../../src/components/autosuggest/AutoSuggestAddons.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nexport type AutoSuggestAddonsProps = {\n    icon?: string;\n    leadingInputAddons?: React.ReactNode[];\n    trailingInputAddons?: React.ReactNode[];\n};\n\nconst AutoSuggestAddons = ({\n    icon,\n    leadingInputAddons,\n    trailingInputAddons,\n    children,\n}: PropsWithChildren<AutoSuggestAddonsProps>) => (\n    <div className='input-group width-100pct'>\n        {leadingInputAddons && leadingInputAddons}\n        {icon && (\n            <span className='input-group-addon'>\n                <span className={`rioglyph ${icon}`} aria-hidden='true' />\n            </span>\n        )}\n        {children}\n        {trailingInputAddons && trailingInputAddons}\n    </div>\n);\n\nexport default AutoSuggestAddons;\n"],"names":["AutoSuggestAddons","icon","leadingInputAddons","trailingInputAddons","children","jsxs","jsx"],"mappings":";AASA,MAAMA,IAAoB,CAAC;AAAA,EACvB,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AACJ,MACI,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACV,UAAA;AAAA,EAAAH,KAAsBA;AAAA,EACtBD,KACG,gBAAAK,EAAC,QAAA,EAAK,WAAU,qBACZ,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAW,YAAYL,CAAI,IAAI,eAAY,QAAO,GAC5D;AAAA,EAEHG;AAAA,EACAD,KAAuBA;AAAA,EAAA,CAC5B;"}
+{"version":3,"file":"AutoSuggestAddons.js","names":[],"sources":["../../../src/components/autosuggest/AutoSuggestAddons.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport { normalizeIconName } from '../../utils/iconNames';\nimport type { IconType } from '../icon/Icon';\n\nexport type AutoSuggestAddonsProps = {\n    iconName?: IconType;\n    /**\n     * Legacy alias for `iconName`.\n     *\n     * @deprecated Use `iconName` instead.\n     */\n    icon?: IconType;\n    leadingInputAddons?: React.ReactNode[];\n    trailingInputAddons?: React.ReactNode[];\n};\n\nconst AutoSuggestAddons = ({\n    iconName,\n    icon: legacyIcon,\n    leadingInputAddons,\n    trailingInputAddons,\n    children,\n}: PropsWithChildren<AutoSuggestAddonsProps>) => (\n    <div className='input-group width-100pct'>\n        {leadingInputAddons && leadingInputAddons}\n        {(iconName ?? legacyIcon) ? (\n            <span className='input-group-addon'>\n                <span className={`uikit-icon ${normalizeIconName(iconName ?? legacyIcon ?? '')}`} aria-hidden='true' />\n            </span>\n        ) : null}\n        {children}\n        {trailingInputAddons && trailingInputAddons}\n    </div>\n);\n\nexport default AutoSuggestAddons;\n"],"mappings":";;;AAkBA,IAAM,KAAqB,EACvB,aACA,MAAM,GACN,uBACA,wBACA,kBAEA,kBAAC,OAAD;CAAK,WAAU;WAAf;EACK,KAAsB;EACrB,KAAY,IACV,kBAAC,QAAD;GAAM,WAAU;aACZ,kBAAC,QAAD;IAAM,WAAW,cAAc,EAAkB,KAAY,KAAc,EAAE;IAAK,eAAY;GAAQ,CAAA;EACpG,CAAA,IACN;EACH;EACA,KAAuB;CACvB"}

package/components/autosuggest/DropdownSpinner.d.ts

@@ -1,4 +1,8 @@
-declare const DropdownSpinner: ({ className }: {
+import { default as React } from 'react';
+export type DropdownSpinnerProps = React.HTMLAttributes<HTMLUListElement> & {
     className: string;
-}) => import("react/jsx-runtime").JSX.Element;
+};
+declare const DropdownSpinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & {
+    className: string;
+} & React.RefAttributes<HTMLUListElement>>;
 export default DropdownSpinner;

package/components/autosuggest/DropdownSpinner.js

@@ -1,7 +1,17 @@
+import e from "../spinner/Spinner.js";
+import { forwardRef as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
-import r from "../spinner/Spinner.js";
-const t = ({ className: e }) => /* @__PURE__ */ n("ul", { className: e, children: /* @__PURE__ */ n("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ n(r, {}) }) });
-export {
-  t as default
-};
-//# sourceMappingURL=DropdownSpinner.js.map
+//#region src/components/autosuggest/DropdownSpinner.tsx
+var r = t(({ className: t, ...r }, i) => /* @__PURE__ */ n("ul", {
+	...r,
+	className: t,
+	ref: i,
+	children: /* @__PURE__ */ n("div", {
+		className: "display-flex justify-content-center padding-10",
+		children: /* @__PURE__ */ n(e, {})
+	})
+}));
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=DropdownSpinner.js.map

package/components/autosuggest/DropdownSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownSpinner.js","sources":["../../../src/components/autosuggest/DropdownSpinner.tsx"],"sourcesContent":["import Spinner from '../spinner/Spinner';\n\nconst DropdownSpinner = ({ className }: { className: string }) => (\n    <ul className={className}>\n        <div className='display-flex justify-content-center padding-10'>\n            <Spinner />\n        </div>\n    </ul>\n);\n\nexport default DropdownSpinner;\n"],"names":["DropdownSpinner","className","jsx","Spinner"],"mappings":";;AAEA,MAAMA,IAAkB,CAAC,EAAE,WAAAC,EAAA,MACvB,gBAAAC,EAAC,MAAA,EAAG,WAAAD,GACA,UAAA,gBAAAC,EAAC,SAAI,WAAU,kDACX,UAAA,gBAAAA,EAACC,GAAA,CAAA,CAAQ,GACb,EAAA,CACJ;"}
+{"version":3,"file":"DropdownSpinner.js","names":[],"sources":["../../../src/components/autosuggest/DropdownSpinner.tsx"],"sourcesContent":["import type React from 'react';\nimport { forwardRef } from 'react';\n\nimport Spinner from '../spinner/Spinner';\n\nexport type DropdownSpinnerProps = React.HTMLAttributes<HTMLUListElement> & {\n    className: string;\n};\n\nconst DropdownSpinner = forwardRef<HTMLUListElement, DropdownSpinnerProps>(({ className, ...remainingProps }, ref) => (\n    <ul {...remainingProps} className={className} ref={ref}>\n        <div className='display-flex justify-content-center padding-10'>\n            <Spinner />\n        </div>\n    </ul>\n));\n\nexport default DropdownSpinner;\n"],"mappings":";;;;AASA,IAAM,IAAkB,GAAoD,EAAE,cAAW,GAAG,KAAkB,MAC1G,kBAAC,MAAD;CAAI,GAAI;CAA2B;CAAgB;WAC/C,kBAAC,OAAD;EAAK,WAAU;YACX,kBAAC,GAAD,CAAU,CAAA;CACT,CAAA;AACL,CAAA,CACP"}

package/components/autosuggest/NoItemMessage.js

@@ -1,6 +1,14 @@
 import { jsx as e } from "react/jsx-runtime";
-const o = ({ message: n }) => /* @__PURE__ */ e("li", { className: "no-item-message disabled pointer-events-none", children: /* @__PURE__ */ e("a", { role: "button", href: "any", children: /* @__PURE__ */ e("i", { children: n }) }) });
-export {
-  o as default
-};
-//# sourceMappingURL=NoItemMessage.js.map
+//#region src/components/autosuggest/NoItemMessage.tsx
+var t = ({ message: t }) => /* @__PURE__ */ e("li", {
+	className: "no-item-message disabled pointer-events-none",
+	children: /* @__PURE__ */ e("a", {
+		role: "button",
+		href: "any",
+		children: /* @__PURE__ */ e("i", { children: t })
+	})
+});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=NoItemMessage.js.map

package/components/autosuggest/NoItemMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoItemMessage.js","sources":["../../../src/components/autosuggest/NoItemMessage.tsx"],"sourcesContent":["import type React from 'react';\n\nconst NoItemMessage = ({ message }: { message: React.ReactNode }) => (\n    <li className='no-item-message disabled pointer-events-none'>\n        <a role='button' href='any'>\n            <i>{message}</i>\n        </a>\n    </li>\n);\n\nexport default NoItemMessage;\n"],"names":["NoItemMessage","message","jsx"],"mappings":";AAEA,MAAMA,IAAgB,CAAC,EAAE,SAAAC,QACrB,gBAAAC,EAAC,QAAG,WAAU,gDACV,4BAAC,KAAA,EAAE,MAAK,UAAS,MAAK,OAClB,4BAAC,KAAA,EAAG,UAAAD,EAAA,CAAQ,GAChB,EAAA,CACJ;"}
+{"version":3,"file":"NoItemMessage.js","names":[],"sources":["../../../src/components/autosuggest/NoItemMessage.tsx"],"sourcesContent":["import type React from 'react';\n\nconst NoItemMessage = ({ message }: { message: React.ReactNode }) => (\n    <li className='no-item-message disabled pointer-events-none'>\n        <a role='button' href='any'>\n            <i>{message}</i>\n        </a>\n    </li>\n);\n\nexport default NoItemMessage;\n"],"mappings":";;AAEA,IAAM,KAAiB,EAAE,iBACrB,kBAAC,MAAD;CAAI,WAAU;WACV,kBAAC,KAAD;EAAG,MAAK;EAAS,MAAK;YAClB,kBAAC,KAAD,EAAA,UAAI,EAAW,CAAA;CAChB,CAAA;AACH,CAAA"}