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

package/components/selects/MultiselectToggleSelection.js

@@ -1,26 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { isEmpty } from 'es-toolkit/compat';
-const MultiselectToggleSelection = (props) => {
-    const { options, selectedItemIds, showSelectedItemIcon, showUnselectedItemIcons, multiline, hasInputAddon, hasFilter, onRemoveItem, children, } = props;
-    if (!options || isEmpty(options)) {
-        return null;
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import r from "classnames";
+import { isEmpty as v } from "es-toolkit/compat";
+const y = (d) => {
+  const {
+    options: n,
+    selectedItemIds: m,
+    showSelectedItemIcon: c,
+    showUnselectedItemIcons: i,
+    multiline: p,
+    hasInputAddon: h,
+    hasFilter: I,
+    onRemoveItem: f,
+    children: g
+  } = d;
+  if (!n || v(n))
+    return null;
+  const o = (e) => m.indexOf(e.id) !== -1, u = (e, l) => {
+    if (c) {
+      const t = r("margin-right-5", !o(e) && "inactiveIcon");
+      return /* @__PURE__ */ s("span", { className: t, children: e.icon }, e.id);
     }
-    const isItemSelected = (item) => {
-        return selectedItemIds.indexOf(item.id) !== -1;
-    };
-    const renderSelectionItem = (item, index) => {
-        if (showSelectedItemIcon) {
-            const inactiveClassNames = classNames('margin-right-5', !isItemSelected(item) && 'inactiveIcon');
-            return (_jsx("span", { className: inactiveClassNames, children: item.icon }, item.id));
+    return /* @__PURE__ */ a("span", { className: "selected-option", children: [
+      /* @__PURE__ */ a("span", { className: "selected-label", children: [
+        e.icon && /* @__PURE__ */ s("span", { className: "margin-right-5", children: e.icon }),
+        e.label
+      ] }),
+      /* @__PURE__ */ s(
+        "span",
+        {
+          className: "removeIcon",
+          onClick: (t) => {
+            f(t, e.id);
+          },
+          children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-remove" })
         }
-        return (_jsxs("span", { className: 'selected-option', children: [_jsxs("span", { className: 'selected-label', children: [item.icon && _jsx("span", { className: 'margin-right-5', children: item.icon }), item.label] }), _jsx("span", { className: 'removeIcon', onClick: event => {
-                        onRemoveItem(event, item.id);
-                    }, children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })] }, index));
-    };
-    const optionListClassNames = classNames(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list', multiline && 'flex-wrap', hasInputAddon && 'margin-left-0', hasFilter && 'padding-left-1');
-    return (_jsxs("span", { className: optionListClassNames, children: [options
-                .filter(option => (showUnselectedItemIcons ? !option.header : isItemSelected(option)))
-                .map((option, index) => renderSelectionItem(option, index)), children] }));
+      )
+    ] }, l);
+  }, N = r(
+    !c && !i && "selected-option-list",
+    p && "flex-wrap",
+    h && "margin-left-0",
+    I && "padding-left-1"
+  );
+  return /* @__PURE__ */ a("span", { className: N, children: [
+    n.filter((e) => i ? !e.header : o(e)).map((e, l) => u(e, l)),
+    g
+  ] });
 };
-export default MultiselectToggleSelection;
+export {
+  y as default
+};
+//# sourceMappingURL=MultiselectToggleSelection.js.map

package/components/selects/MultiselectToggleSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiselectToggleSelection.js","sources":["../../../src/components/selects/MultiselectToggleSelection.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport type { SelectOption } from './BaseSelectDropdown';\n\nexport type MultiselectToggleSelectionProps = {\n    options: SelectOption[];\n    selectedItemIds: string[];\n    showSelectedItemIcon: boolean;\n    showUnselectedItemIcons: boolean;\n    multiline: boolean;\n    hasInputAddon: boolean;\n    hasFilter: boolean;\n    onRemoveItem: (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => void;\n};\n\nconst MultiselectToggleSelection = (props: PropsWithChildren<MultiselectToggleSelectionProps>) => {\n    const {\n        options,\n        selectedItemIds,\n        showSelectedItemIcon,\n        showUnselectedItemIcons,\n        multiline,\n        hasInputAddon,\n        hasFilter,\n        onRemoveItem,\n        children,\n    } = props;\n\n    if (!options || isEmpty(options)) {\n        return null;\n    }\n\n    const isItemSelected = (item: SelectOption) => {\n        return selectedItemIds.indexOf(item.id) !== -1;\n    };\n\n    const renderSelectionItem = (item: SelectOption, index: number) => {\n        if (showSelectedItemIcon) {\n            const inactiveClassNames = classNames('margin-right-5', !isItemSelected(item) && 'inactiveIcon');\n\n            return (\n                <span key={item.id} className={inactiveClassNames}>\n                    {item.icon}\n                </span>\n            );\n        }\n\n        return (\n            <span key={index} className='selected-option'>\n                <span className='selected-label'>\n                    {item.icon && <span className='margin-right-5'>{item.icon}</span>}\n                    {item.label}\n                </span>\n                <span\n                    className='removeIcon'\n                    onClick={event => {\n                        onRemoveItem(event, item.id);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-remove' />\n                </span>\n            </span>\n        );\n    };\n\n    const optionListClassNames = classNames(\n        !showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list',\n        multiline && 'flex-wrap',\n        hasInputAddon && 'margin-left-0',\n        hasFilter && 'padding-left-1'\n    );\n\n    return (\n        <span className={optionListClassNames}>\n            {options\n                .filter(option => (showUnselectedItemIcons ? !option.header : isItemSelected(option)))\n                .map((option, index) => renderSelectionItem(option, index))}\n            {children}\n        </span>\n    );\n};\n\nexport default MultiselectToggleSelection;\n"],"names":["MultiselectToggleSelection","props","options","selectedItemIds","showSelectedItemIcon","showUnselectedItemIcons","multiline","hasInputAddon","hasFilter","onRemoveItem","children","isEmpty","isItemSelected","item","renderSelectionItem","index","inactiveClassNames","classNames","jsxs","jsx","event","optionListClassNames","option"],"mappings":";;;AAkBA,MAAMA,IAA6B,CAACC,MAA8D;AAC9F,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACAT;AAEJ,MAAI,CAACC,KAAWS,EAAQT,CAAO;AAC3B,WAAO;AAGX,QAAMU,IAAiB,CAACC,MACbV,EAAgB,QAAQU,EAAK,EAAE,MAAM,IAG1CC,IAAsB,CAACD,GAAoBE,MAAkB;AAC/D,QAAIX,GAAsB;AACtB,YAAMY,IAAqBC,EAAW,kBAAkB,CAACL,EAAeC,CAAI,KAAK,cAAc;AAE/F,+BACK,QAAA,EAAmB,WAAWG,GAC1B,UAAAH,EAAK,KAAA,GADCA,EAAK,EAEhB;AAAA,IAER;AAEA,WACI,gBAAAK,EAAC,QAAA,EAAiB,WAAU,mBACxB,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,kBACX,UAAA;AAAA,QAAAL,EAAK,QAAQ,gBAAAM,EAAC,QAAA,EAAK,WAAU,kBAAkB,YAAK,MAAK;AAAA,QACzDN,EAAK;AAAA,MAAA,GACV;AAAA,MACA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,SAAS,CAAAC,MAAS;AACd,YAAAX,EAAaW,GAAOP,EAAK,EAAE;AAAA,UAC/B;AAAA,UAEA,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C,EAAA,GAZOJ,CAaX;AAAA,EAER,GAEMM,IAAuBJ;AAAA,IACzB,CAACb,KAAwB,CAACC,KAA2B;AAAA,IACrDC,KAAa;AAAA,IACbC,KAAiB;AAAA,IACjBC,KAAa;AAAA,EAAA;AAGjB,SACI,gBAAAU,EAAC,QAAA,EAAK,WAAWG,GACZ,UAAA;AAAA,IAAAnB,EACI,OAAO,CAAAoB,MAAWjB,IAA0B,CAACiB,EAAO,SAASV,EAAeU,CAAM,CAAE,EACpF,IAAI,CAACA,GAAQP,MAAUD,EAAoBQ,GAAQP,CAAK,CAAC;AAAA,IAC7DL;AAAA,EAAA,GACL;AAER;"}

package/components/selects/NoItemMessage.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type NoItemMessageProps = {
     noItemMessage: string | React.ReactNode;
     className?: string;

package/components/selects/NoItemMessage.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const NoItemMessage = (props) => {
-    const { noItemMessage, className } = props;
-    if (!noItemMessage) {
-        return null;
-    }
-    return (_jsx("ul", { className: className, role: 'menu', children: _jsx("li", { className: 'no-item-message disabled', role: 'presentation', children: _jsx("a", { role: 'menuitem', children: _jsx("i", { children: noItemMessage }) }) }) }));
+import { jsx as e } from "react/jsx-runtime";
+const t = (l) => {
+  const { noItemMessage: s, className: n } = l;
+  return s ? /* @__PURE__ */ e("ul", { className: n, role: "menu", children: /* @__PURE__ */ e("li", { className: "no-item-message disabled", role: "presentation", children: /* @__PURE__ */ e("a", { role: "menuitem", children: /* @__PURE__ */ e("i", { children: s }) }) }) }) : null;
 };
-export default NoItemMessage;
+export {
+  t as default
+};
+//# sourceMappingURL=NoItemMessage.js.map

package/components/selects/NoItemMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoItemMessage.js","sources":["../../../src/components/selects/NoItemMessage.tsx"],"sourcesContent":["import type React from 'react';\n\nexport type NoItemMessageProps = {\n    noItemMessage: string | React.ReactNode;\n    className?: string;\n};\n\nconst NoItemMessage = (props: NoItemMessageProps) => {\n    const { noItemMessage, className } = props;\n\n    if (!noItemMessage) {\n        return null;\n    }\n\n    return (\n        <ul className={className} role='menu'>\n            <li className='no-item-message disabled' role='presentation'>\n                {/* biome-ignore lint/a11y/useValidAnchor: common structure to use anchor tags without links */}\n                <a role='menuitem'>\n                    <i>{noItemMessage}</i>\n                </a>\n            </li>\n        </ul>\n    );\n};\n\nexport default NoItemMessage;\n"],"names":["NoItemMessage","props","noItemMessage","className","jsx"],"mappings":";AAOA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,eAAAC,GAAe,WAAAC,EAAA,IAAcF;AAErC,SAAKC,IAKD,gBAAAE,EAAC,QAAG,WAAAD,GAAsB,MAAK,QAC3B,UAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,4BAA2B,MAAK,gBAE1C,UAAA,gBAAAA,EAAC,KAAA,EAAE,MAAK,YACJ,UAAA,gBAAAA,EAAC,OAAG,UAAAF,EAAA,CAAc,EAAA,CACtB,GACJ,EAAA,CACJ,IAXO;AAaf;"}

package/components/selects/Select.d.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
-import { type SelectOption } from './BaseSelectDropdown';
-import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
+import { default as React } from 'react';
+import { SelectOption } from './BaseSelectDropdown';
+import { WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
 export type { SelectOption } from './BaseSelectDropdown';
 export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {
     /**

package/components/selects/Select.js

@@ -1,141 +1,164 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import classNames from 'classnames';
-import { isEqual } from 'es-toolkit/predicate';
-import { isEmpty, noop } from 'es-toolkit/compat';
-import BaseSelectDropdown, { filterOptions } from "./BaseSelectDropdown.js";
-import useClickOutside from "../../useClickOutside.js";
-import useEffectOnce from "../../hooks/useEffectOnce.js";
-import useMergeRefs from "../../hooks/useMergeRefs.js";
-import ClearButton from "./ClearButton.js";
-import SelectFilter from "./SelectFilter.js";
-import SelectedOption from "./SelectedOption.js";
-import WithFeedbackAndAddon from "./WithFeedbackAndAddon.js";
-const DEFAULT_FOCUSED_ITEM_INDEX = -1;
-const Select = (props) => {
-    const { name, id = name, label, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', ...remainingProps } = props;
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedItem, setSelectedItem] = useState(null);
-    const [isFilterActive, setIsFilterActive] = useState(false);
-    const [filterValue, setFilterValue] = useState('');
-    const [filteredOptions, setFilteredOptions] = useState(options);
-    const [itemDOMValues, setItemDOMValues] = useState([]);
-    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);
-    const [keyboardUsed, setKeyboardUsed] = useState(false);
-    const refSelect = useRef();
-    const refToggle = useRef(null);
-    const ref = useClickOutside(() => closeMenu());
-    const mergedSelectRefs = useMergeRefs(refSelect, ref);
-    const updateSelectedItem = (selectOptions, updatedValue) => {
-        if (updatedValue && !isEmpty(updatedValue)) {
-            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);
-        }
-        else if (selectOptions) {
-            setSelectedItem(selectOptions.find(item => item.selected) || null);
-        }
-    };
-    useEffectOnce(() => {
-        updateSelectedItem(options, value);
-    });
-    const [previousOptions, setPreviousOptions] = useState(options);
-    if (!isEqual(options, previousOptions)) {
-        updateSelectedItem(options, value);
-        setFilteredOptions(options);
-        setPreviousOptions(options);
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { useState as o, useRef as U } from "react";
+import V from "classnames";
+import { isEqual as k } from "es-toolkit/predicate";
+import { noop as Se, isEmpty as xe } from "es-toolkit/compat";
+import be, { filterOptions as we } from "./BaseSelectDropdown.js";
+import ve from "../../hooks/useClickOutside.js";
+import De from "../../hooks/useEffectOnce.js";
+import Me from "../../hooks/useMergeRefs.js";
+import Ee from "./ClearButton.js";
+import Ne from "./SelectFilter.js";
+import Ae from "./SelectedOption.js";
+import Te from "./WithFeedbackAndAddon.js";
+const p = -1, ze = (R) => {
+  const {
+    name: F,
+    id: B = F,
+    label: P,
+    options: s = [],
+    value: n,
+    onChange: O = Se,
+    placeholder: _,
+    isLoading: j = !1,
+    dropup: K = !1,
+    pullRight: L = !1,
+    autoDropDirection: W = !0,
+    bsSize: g = "md",
+    disabled: S = !1,
+    tabIndex: q = 0,
+    hasError: z = !1,
+    useFilter: X = !1,
+    useClear: G = !1,
+    noItemMessage: H,
+    selectedOptionText: x,
+    showSelectedItemIcon: J = !1,
+    showUnselectedItemIcons: Q = !1,
+    dropdownClassName: Y,
+    btnClassName: b,
+    className: w,
+    inputAddon: v,
+    errorMessage: D,
+    warningMessage: M,
+    messageWhiteSpace: Z = "normal",
+    ...$
+  } = R, [r, E] = o(!1), [f, u] = o(null), [N, i] = o(!1), [ee, c] = o(""), [te, d] = o(s), [se, oe] = o([]), [ne, I] = o(p), [A, m] = o(!1), re = U(), T = U(null), le = ve(() => C()), ae = Me(re, le), h = (e, t) => {
+    t && !xe(t) ? u(e.find((l) => l.id === t[0]) || null) : e && u(e.find((l) => l.selected) || null);
+  };
+  De(() => {
+    h(s, n);
+  });
+  const [ie, ce] = o(s);
+  k(s, ie) || (h(s, n), d(s), ce(s));
+  const [de, fe] = o(n);
+  k(n, de) || (h(s, n), fe(n));
+  const ue = (e = []) => {
+    oe((t) => e.length ? e : t);
+  }, me = () => {
+    u(null), i(!1), c(""), O(void 0);
+  }, pe = () => {
+    const e = V(
+      "dropdown-toggle",
+      "form-control",
+      "text-left",
+      b && b,
+      g === "sm" && "input-sm",
+      g === "lg" && "input-lg",
+      S && "disabled"
+    ), t = /* @__PURE__ */ y(
+      "button",
+      {
+        type: "button",
+        id: B,
+        name: F,
+        className: e,
+        "data-toggle": "dropdown",
+        tabIndex: q,
+        "aria-haspopup": "true",
+        "aria-expanded": r,
+        onClick: Ce,
+        ref: T,
+        children: [
+          X && r && /* @__PURE__ */ a(
+            Ne,
+            {
+              isFilterActive: N,
+              filterValue: ee,
+              onChange: Ie
+            }
+          ),
+          x || /* @__PURE__ */ a(
+            Ae,
+            {
+              label: P,
+              placeholder: _,
+              selectedItem: f,
+              options: s,
+              showSelectedItemIcon: J,
+              showUnselectedItemIcons: Q
+            }
+          ),
+          /* @__PURE__ */ a(Ee, { showClear: G, selectedItem: f, onClear: me }),
+          /* @__PURE__ */ a("span", { className: "caret" })
+        ]
+      }
+    );
+    return !v && !D && !M ? t : /* @__PURE__ */ a(
+      Te,
+      {
+        bsSize: g,
+        inputAddon: v,
+        errorMessage: D,
+        warningMessage: M,
+        messageWhiteSpace: Z,
+        children: t
+      }
+    );
+  }, ge = () => {
+    let e = ne;
+    return f ? e = s.findIndex((t) => t.id === f.id) : A && (e = 0), /* @__PURE__ */ a(
+      be,
+      {
+        isOpen: r,
+        isLoading: j,
+        options: te,
+        focusedItemIndex: e,
+        keyboardUsed: A,
+        updateDOMValues: ue,
+        onSelect: he,
+        onClose: C,
+        noItemMessage: H,
+        pullRight: L,
+        dropup: K,
+        autoDropDirection: W,
+        dropdownClassName: Y
+      }
+    );
+  }, Ie = (e) => {
+    e.preventDefault();
+    const t = e.currentTarget.value;
+    if (t === "") {
+      i(!1), c(""), d(s), m(!1), I(p);
+      return;
     }
-    const [previousValue, setPreviousValue] = useState(value);
-    if (!isEqual(value, previousValue)) {
-        updateSelectedItem(options, value);
-        setPreviousValue(value);
-    }
-    const updateDOMValues = (itemDOMValuesToUpdated = []) => {
-        // preserve previous DOM values when empty
-        setItemDOMValues(prev => (itemDOMValuesToUpdated.length ? itemDOMValuesToUpdated : prev));
-    };
-    const handleClearSelectedItem = () => {
-        setSelectedItem(null);
-        setIsFilterActive(false);
-        setFilterValue('');
-        onChange(undefined);
-    };
-    const renderToggle = () => {
-        const toggleClasses = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
-        const toggleButton = (_jsxs("button", { type: 'button', id: id, name: name, className: toggleClasses, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, ref: refToggle, children: [useFilter && isOpen && (_jsx(SelectFilter, { isFilterActive: isFilterActive, filterValue: filterValue, onChange: handleFilterChange })), selectedOptionText ? (selectedOptionText) : (_jsx(SelectedOption, { label: label, placeholder: placeholder, selectedItem: selectedItem, options: options, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons })), _jsx(ClearButton, { showClear: useClear, selectedItem: selectedItem, onClear: handleClearSelectedItem }), _jsx("span", { className: 'caret' })] }));
-        if (!inputAddon && !errorMessage && !warningMessage) {
-            return toggleButton;
-        }
-        return (_jsx(WithFeedbackAndAddon, { bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, children: toggleButton }));
-    };
-    const renderDropdownMenu = () => {
-        // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.
-        // In case there was nothing preselected, set the focusedItemIndex to the first item if keyboard was used.
-        let currentFocusedItemIndex = focusedItemIndex;
-        if (selectedItem) {
-            currentFocusedItemIndex = options.findIndex(option => {
-                return option.id === selectedItem.id;
-            });
-        }
-        else if (keyboardUsed) {
-            currentFocusedItemIndex = 0;
-        }
-        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName }));
-    };
-    const handleFilterChange = (event) => {
-        event.preventDefault();
-        const targetFilterValue = event.currentTarget.value;
-        // if cleared: reset to defaults and bail early
-        if (targetFilterValue === '') {
-            setIsFilterActive(false);
-            setFilterValue('');
-            setFilteredOptions(options);
-            setKeyboardUsed(false);
-            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
-            return;
-        }
-        // otherwise: filter against the last known non-empty DOM snapshot
-        const currentFilteredOptions = filterOptions(itemDOMValues, targetFilterValue, options);
-        // highlight the first item of the search result if at least one item was found
-        const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;
-        setIsFilterActive(true);
-        setFilterValue(targetFilterValue);
-        setFilteredOptions(currentFilteredOptions);
-        setKeyboardUsed(true);
-        setFocusedItemIndex(newFocusedItemIndex);
-    };
-    const onOptionChange = (currentSelectedItem) => {
-        setSelectedItem(currentSelectedItem || null);
-        setIsFilterActive(false);
-        setFilterValue('');
-        setFilteredOptions(options);
-        onChange(currentSelectedItem);
-        closeMenu();
-    };
-    const onToggle = (event) => {
-        // Don't toggle when component is disabled or
-        // when filter is active, means entering some filter value
-        // in order to avoid closing menu on space but allow to use it for filtering
-        if (disabled || isFilterActive) {
-            return;
-        }
-        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
-        // type submit by default in HTML. In order to differentiate between real click and a synthetic event
-        // caused by they keyboard, use the event details. A synthetic event is always 0.
-        const isKeyboardUsed = event.detail === 0;
-        setIsOpen(!isOpen);
-        setKeyboardUsed(isKeyboardUsed);
-    };
-    const closeMenu = () => {
-        if (isOpen) {
-            setIsOpen(false);
-            setIsFilterActive(false);
-            setFilterValue('');
-            setFilteredOptions(options);
-            setKeyboardUsed(false);
-            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
-            refToggle.current?.focus();
-        }
-    };
-    const classes = classNames('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
-    return (_jsxs("div", { ...remainingProps, className: classes, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
+    const l = we(se, t, s), Oe = l.length > 0 ? 0 : p;
+    i(!0), c(t), d(l), m(!0), I(Oe);
+  }, he = (e) => {
+    u(e || null), i(!1), c(""), d(s), O(e), C();
+  }, Ce = (e) => {
+    if (S || N)
+      return;
+    const t = e.detail === 0;
+    E(!r), m(t);
+  }, C = () => {
+    r && (E(!1), i(!1), c(""), d(s), m(!1), I(p), T.current?.focus());
+  }, Fe = V("select", "dropdown", r && "open", z && "has-error", w && w);
+  return /* @__PURE__ */ y("div", { ...$, className: Fe, ref: ae, children: [
+    pe(),
+    ge()
+  ] });
+};
+export {
+  ze as default
 };
-export default Select;
+//# sourceMappingURL=Select.js.map

package/components/selects/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/selects/Select.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport ClearButton from './ClearButton';\nimport SelectFilter from './SelectFilter';\nimport SelectedOption from './SelectedOption';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nexport type { SelectOption } from './BaseSelectDropdown';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\nexport type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     */\n    name?: string;\n\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     *\n     * @default Uses the value given to `name` if not provided explicitly.\n     */\n    id?: string;\n\n    /**\n     * The toggle label in front of the selected text.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown menu.\n     *\n     * @default []\n     */\n    options?: T[];\n\n    /**\n     * Sets the ids of the selected options when the component is already mounted.\n     */\n    value?: string[];\n\n    /**\n     * Callback function triggered when an item is selected.\n     *\n     * @param selectedOption The option that was selected (or undefined if none was).\n     *\n     * @default () => {}\n     */\n    onChange?: (selectOption: T | undefined) => void;\n\n    /**\n     * Text to display when nothing is selected.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines whether the dropdown opens upwards.\n     *\n     * Set to `true` additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown toggle.\n     *\n     * Set to 'true' additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Enables or disables the autoDrop positioning feature.\n     *\n     * When enabled, the option list opens below or above the input depending on the surrounding space.\n     *\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Defines the size of the select to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Option to disable the opening of the option list.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Sets the input's tabindex attribute.\n     *\n     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being\n     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for\n     * sequential focus navigation.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defines whether the Bootstrap error classes shall be added to the toggle element.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines whether the component should be filterable.\n     *\n     * @default false\n     */\n    useFilter?: boolean;\n\n    /**\n     * Set to show a clear button.\n     *\n     * @default false\n     */\n    useClear?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the menu items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Text that shall be shown when not match was found when filtering.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Text or node to be rendered on the toggle select instead of the selected item label.\n     */\n    selectedOptionText?: string | React.ReactNode;\n\n    /**\n     * Set to show only the icon and not the label of selected item.\n     *\n     * @default false\n     */\n    showSelectedItemIcon?: boolean;\n\n    /**\n     * Set to show all item icons within the toggle element.\n     *\n     * Selected items are highlighted and unselected items are shown as inactive.\n     *\n     * @default false\n     */\n    showUnselectedItemIcons?: boolean;\n\n    /**\n     * Additional classes to be set to the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the select/input.\n     */\n    btnClassName?: string;\n\n    /**\n     * Additional classes to be set to the select wrapper.\n     */\n    className?: string;\n};\n\nconst Select = <T extends SelectOption>(props: SelectProps<T>) => {\n    const {\n        name,\n        id = name,\n        label,\n        options = [],\n        value,\n        onChange = noop,\n        placeholder,\n        isLoading = false,\n        dropup = false,\n        pullRight = false,\n        autoDropDirection = true,\n        bsSize = 'md',\n        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        useClear = false,\n        noItemMessage,\n        selectedOptionText,\n        showSelectedItemIcon = false,\n        showUnselectedItemIcons = false,\n        dropdownClassName,\n        btnClassName,\n        className,\n\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [selectedItem, setSelectedItem] = useState<SelectOption | null>(null);\n    const [isFilterActive, setIsFilterActive] = useState(false);\n    const [filterValue, setFilterValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState(options);\n    const [itemDOMValues, setItemDOMValues] = useState<OptionDOMValue[]>([]);\n    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(false);\n\n    const refSelect = useRef();\n    const refToggle = useRef<HTMLButtonElement>(null);\n\n    const ref = useClickOutside(() => closeMenu());\n    const mergedSelectRefs = useMergeRefs(refSelect, ref);\n\n    const updateSelectedItem = (selectOptions: SelectOption[], updatedValue: string[] | undefined) => {\n        if (updatedValue && !isEmpty(updatedValue)) {\n            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);\n        } else if (selectOptions) {\n            setSelectedItem(selectOptions.find(item => item.selected) || null);\n        }\n    };\n\n    useEffectOnce(() => {\n        updateSelectedItem(options, value);\n    });\n\n    const [previousOptions, setPreviousOptions] = useState(options);\n    if (!isEqual(options, previousOptions)) {\n        updateSelectedItem(options, value);\n        setFilteredOptions(options);\n        setPreviousOptions(options);\n    }\n\n    const [previousValue, setPreviousValue] = useState(value);\n    if (!isEqual(value, previousValue)) {\n        updateSelectedItem(options, value);\n        setPreviousValue(value);\n    }\n\n    const updateDOMValues = (itemDOMValuesToUpdated: OptionDOMValue[] = []) => {\n        // preserve previous DOM values when empty\n        setItemDOMValues(prev => (itemDOMValuesToUpdated.length ? itemDOMValuesToUpdated : prev));\n    };\n\n    const handleClearSelectedItem = () => {\n        setSelectedItem(null);\n        setIsFilterActive(false);\n        setFilterValue('');\n\n        onChange(undefined);\n    };\n\n    const renderToggle = () => {\n        const toggleClasses = classNames(\n            'dropdown-toggle',\n            'form-control',\n            'text-left',\n            btnClassName && btnClassName,\n            bsSize === 'sm' && 'input-sm',\n            bsSize === 'lg' && 'input-lg',\n            disabled && 'disabled'\n        );\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={toggleClasses}\n                data-toggle='dropdown'\n                tabIndex={tabIndex}\n                aria-haspopup='true'\n                aria-expanded={isOpen}\n                onClick={onToggle}\n                ref={refToggle}\n            >\n                {useFilter && isOpen && (\n                    <SelectFilter\n                        isFilterActive={isFilterActive}\n                        filterValue={filterValue}\n                        onChange={handleFilterChange}\n                    />\n                )}\n                {selectedOptionText ? (\n                    selectedOptionText\n                ) : (\n                    <SelectedOption\n                        label={label}\n                        placeholder={placeholder}\n                        selectedItem={selectedItem}\n                        options={options}\n                        showSelectedItemIcon={showSelectedItemIcon}\n                        showUnselectedItemIcons={showUnselectedItemIcons}\n                    />\n                )}\n                <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                <span className='caret' />\n            </button>\n        );\n\n        if (!inputAddon && !errorMessage && !warningMessage) {\n            return toggleButton;\n        }\n\n        return (\n            <WithFeedbackAndAddon\n                bsSize={bsSize}\n                inputAddon={inputAddon}\n                errorMessage={errorMessage}\n                warningMessage={warningMessage}\n                messageWhiteSpace={messageWhiteSpace}\n            >\n                {toggleButton}\n            </WithFeedbackAndAddon>\n        );\n    };\n\n    const renderDropdownMenu = () => {\n        // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.\n        // In case there was nothing preselected, set the focusedItemIndex to the first item if keyboard was used.\n        let currentFocusedItemIndex = focusedItemIndex;\n        if (selectedItem) {\n            currentFocusedItemIndex = options.findIndex(option => {\n                return option.id === selectedItem.id;\n            });\n        } else if (keyboardUsed) {\n            currentFocusedItemIndex = 0;\n        }\n\n        return (\n            <BaseSelectDropdown\n                isOpen={isOpen}\n                isLoading={isLoading}\n                options={filteredOptions}\n                focusedItemIndex={currentFocusedItemIndex}\n                keyboardUsed={keyboardUsed}\n                updateDOMValues={updateDOMValues}\n                onSelect={onOptionChange}\n                onClose={closeMenu}\n                noItemMessage={noItemMessage}\n                pullRight={pullRight}\n                dropup={dropup}\n                autoDropDirection={autoDropDirection}\n                dropdownClassName={dropdownClassName}\n            />\n        );\n    };\n\n    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const targetFilterValue = event.currentTarget.value;\n\n        // if cleared: reset to defaults and bail early\n        if (targetFilterValue === '') {\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            return;\n        }\n\n        // otherwise: filter against the last known non-empty DOM snapshot\n        const currentFilteredOptions = filterOptions(itemDOMValues, targetFilterValue, options);\n\n        // highlight the first item of the search result if at least one item was found\n        const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;\n\n        setIsFilterActive(true);\n        setFilterValue(targetFilterValue);\n        setFilteredOptions(currentFilteredOptions);\n        setKeyboardUsed(true);\n        setFocusedItemIndex(newFocusedItemIndex);\n    };\n\n    const onOptionChange = (currentSelectedItem: T | undefined) => {\n        setSelectedItem(currentSelectedItem || null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n\n        onChange(currentSelectedItem);\n\n        closeMenu();\n    };\n\n    const onToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\n        // Don't toggle when component is disabled or\n        // when filter is active, means entering some filter value\n        // in order to avoid closing menu on space but allow to use it for filtering\n        if (disabled || isFilterActive) {\n            return;\n        }\n\n        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of\n        // type submit by default in HTML. In order to differentiate between real click and a synthetic event\n        // caused by they keyboard, use the event details. A synthetic event is always 0.\n        const isKeyboardUsed = event.detail === 0;\n\n        setIsOpen(!isOpen);\n        setKeyboardUsed(isKeyboardUsed);\n    };\n\n    const closeMenu = () => {\n        if (isOpen) {\n            setIsOpen(false);\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            refToggle.current?.focus();\n        }\n    };\n\n    const classes = classNames('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);\n\n    return (\n        <div {...remainingProps} className={classes} ref={mergedSelectRefs}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Select;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Select","props","name","id","label","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","disabled","tabIndex","hasError","useFilter","useClear","noItemMessage","selectedOptionText","showSelectedItemIcon","showUnselectedItemIcons","dropdownClassName","btnClassName","className","inputAddon","errorMessage","warningMessage","messageWhiteSpace","remainingProps","isOpen","setIsOpen","useState","selectedItem","setSelectedItem","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refSelect","useRef","refToggle","ref","useClickOutside","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItem","selectOptions","updatedValue","isEmpty","item","useEffectOnce","previousOptions","setPreviousOptions","isEqual","previousValue","setPreviousValue","updateDOMValues","itemDOMValuesToUpdated","prev","handleClearSelectedItem","renderToggle","toggleClasses","classNames","toggleButton","jsxs","onToggle","jsx","SelectFilter","handleFilterChange","SelectedOption","ClearButton","WithFeedbackAndAddon","renderDropdownMenu","currentFocusedItemIndex","option","BaseSelectDropdown","onOptionChange","event","targetFilterValue","currentFilteredOptions","filterOptions","newFocusedItemIndex","currentSelectedItem","isKeyboardUsed","classes"],"mappings":"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"}

package/components/selects/SelectFilter.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type SelectFilterProps = {
     isFilterActive: boolean;
     filterValue: string;

package/components/selects/SelectFilter.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-const SelectFilter = (props) => {
-    const { isFilterActive, filterValue, onChange } = props;
-    const inputClasses = classNames('select-filter-input', (isFilterActive || filterValue) && 'select-filter-input-active');
-    // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
-    return _jsx("input", { type: 'text', className: inputClasses, autoFocus: true, onChange: onChange, value: filterValue });
+import { jsx as r } from "react/jsx-runtime";
+import a from "classnames";
+const u = (e) => {
+  const { isFilterActive: s, filterValue: t, onChange: i } = e, l = a(
+    "select-filter-input",
+    (s || t) && "select-filter-input-active"
+  );
+  return /* @__PURE__ */ r("input", { type: "text", className: l, autoFocus: !0, onChange: i, value: t });
 };
-export default SelectFilter;
+export {
+  u as default
+};
+//# sourceMappingURL=SelectFilter.js.map

package/components/selects/SelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFilter.js","sources":["../../../src/components/selects/SelectFilter.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\n\nexport type SelectFilterProps = {\n    isFilterActive: boolean;\n    filterValue: string;\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst SelectFilter = (props: SelectFilterProps) => {\n    const { isFilterActive, filterValue, onChange } = props;\n\n    const inputClasses = classNames(\n        'select-filter-input',\n        (isFilterActive || filterValue) && 'select-filter-input-active'\n    );\n\n    // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter\n    return <input type='text' className={inputClasses} autoFocus onChange={onChange} value={filterValue} />;\n};\n\nexport default SelectFilter;\n"],"names":["SelectFilter","props","isFilterActive","filterValue","onChange","inputClasses","classNames","jsx"],"mappings":";;AASA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,EAAA,IAAaH,GAE5CI,IAAeC;AAAA,IACjB;AAAA,KACCJ,KAAkBC,MAAgB;AAAA,EAAA;AAIvC,SAAO,gBAAAI,EAAC,SAAA,EAAM,MAAK,QAAO,WAAWF,GAAc,WAAS,IAAC,UAAAD,GAAoB,OAAOD,EAAA,CAAa;AACzG;"}

package/components/selects/SelectedOption.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import type { SelectOption } from './Select';
+import { default as React } from 'react';
+import { SelectOption } from './Select';
 export type SelectedOptionProps = {
     label: string | React.ReactNode;
     placeholder?: string | React.ReactNode;

package/components/selects/SelectedOption.js

@@ -1,22 +1,28 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const SelectedOption = (props) => {
-    const { label, placeholder, selectedItem, options, showSelectedItemIcon, showUnselectedItemIcons } = props;
-    const renderUnselectedItemIcons = (optionsToRender, currentSelectedItem) => {
-        const optionSpans = optionsToRender
-            .filter(option => !option.header)
-            .map(option => (_jsx("span", { className: `${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}`, children: option.icon }, option.id)));
-        return _jsx(_Fragment, { children: optionSpans });
-    };
-    const getSelectedItemLabel = (item, placeholderValue) => {
-        if (showUnselectedItemIcons) {
-            return renderUnselectedItemIcons(options, item);
-        }
-        if (!item) {
-            // render a placeholder or if there is none render a non-breaking space " "
-            return placeholderValue ? _jsx("span", { className: 'placeholder', children: placeholderValue }) : '\u00a0';
-        }
-        return (_jsxs(_Fragment, { children: [item.icon && _jsx("span", { children: item.icon }), !showSelectedItemIcon && item.label] }));
-    };
-    return (_jsxs("span", { className: 'selected-option-text', children: [label && _jsxs("span", { className: 'selected-option-text-label', children: [label, ":"] }), getSelectedItemLabel(selectedItem, placeholder)] }));
+import { jsxs as c, jsx as t, Fragment as a } from "react/jsx-runtime";
+const x = (r) => {
+  const { label: l, placeholder: o, selectedItem: d, options: i, showSelectedItemIcon: p, showUnselectedItemIcons: h } = r, m = (e, n) => {
+    const I = e.filter((s) => !s.header).map((s) => /* @__PURE__ */ t(
+      "span",
+      {
+        className: `${n && n.id === s.id ? "" : "inactiveIcon"}`,
+        children: s.icon
+      },
+      s.id
+    ));
+    return /* @__PURE__ */ t(a, { children: I });
+  };
+  return /* @__PURE__ */ c("span", { className: "selected-option-text", children: [
+    l && /* @__PURE__ */ c("span", { className: "selected-option-text-label", children: [
+      l,
+      ":"
+    ] }),
+    ((e, n) => h ? m(i, e) : e ? /* @__PURE__ */ c(a, { children: [
+      e.icon && /* @__PURE__ */ t("span", { children: e.icon }),
+      !p && e.label
+    ] }) : n ? /* @__PURE__ */ t("span", { className: "placeholder", children: n }) : " ")(d, o)
+  ] });
 };
-export default SelectedOption;
+export {
+  x as default
+};
+//# sourceMappingURL=SelectedOption.js.map

package/components/selects/SelectedOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedOption.js","sources":["../../../src/components/selects/SelectedOption.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { SelectOption } from './Select';\n\nexport type SelectedOptionProps = {\n    label: string | React.ReactNode;\n    placeholder?: string | React.ReactNode;\n    selectedItem: SelectOption | null;\n    showSelectedItemIcon: boolean;\n    showUnselectedItemIcons: boolean;\n    options: SelectOption[];\n};\n\nconst SelectedOption = (props: SelectedOptionProps) => {\n    const { label, placeholder, selectedItem, options, showSelectedItemIcon, showUnselectedItemIcons } = props;\n\n    const renderUnselectedItemIcons = (optionsToRender: SelectOption[], currentSelectedItem: SelectOption | null) => {\n        const optionSpans = optionsToRender\n            .filter(option => !option.header)\n            .map(option => (\n                <span\n                    key={option.id}\n                    className={`${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}`}\n                >\n                    {option.icon}\n                </span>\n            ));\n\n        return <>{optionSpans}</>;\n    };\n\n    const getSelectedItemLabel = (\n        item: SelectOption | null,\n        placeholderValue: string | React.ReactNode | undefined\n    ) => {\n        if (showUnselectedItemIcons) {\n            return renderUnselectedItemIcons(options, item);\n        }\n\n        if (!item) {\n            // render a placeholder or if there is none render a non-breaking space \"&nbsp;\"\n            return placeholderValue ? <span className='placeholder'>{placeholderValue}</span> : '\\u00a0';\n        }\n\n        return (\n            <>\n                {item.icon && <span>{item.icon}</span>}\n                {!showSelectedItemIcon && item.label}\n            </>\n        );\n    };\n\n    return (\n        <span className='selected-option-text'>\n            {label && <span className='selected-option-text-label'>{label}:</span>}\n            {getSelectedItemLabel(selectedItem, placeholder)}\n        </span>\n    );\n};\n\nexport default SelectedOption;\n"],"names":["SelectedOption","props","label","placeholder","selectedItem","options","showSelectedItemIcon","showUnselectedItemIcons","renderUnselectedItemIcons","optionsToRender","currentSelectedItem","optionSpans","option","jsx","jsxs","item","placeholderValue","Fragment"],"mappings":";AAaA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,OAAAC,GAAO,aAAAC,GAAa,cAAAC,GAAc,SAAAC,GAAS,sBAAAC,GAAsB,yBAAAC,MAA4BN,GAE/FO,IAA4B,CAACC,GAAiCC,MAA6C;AAC7G,UAAMC,IAAcF,EACf,OAAO,CAAAG,MAAU,CAACA,EAAO,MAAM,EAC/B,IAAI,CAAAA,MACD,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAW,GAAGH,KAAuBA,EAAoB,OAAOE,EAAO,KAAK,KAAK,cAAc;AAAA,QAE9F,UAAAA,EAAO;AAAA,MAAA;AAAA,MAHHA,EAAO;AAAA,IAAA,CAKnB;AAEL,kCAAU,UAAAD,EAAA,CAAY;AAAA,EAC1B;AAuBA,SACI,gBAAAG,EAAC,QAAA,EAAK,WAAU,wBACX,UAAA;AAAA,IAAAZ,KAAS,gBAAAY,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAA;AAAA,MAAAZ;AAAA,MAAM;AAAA,IAAA,GAAC;AAAA,KAvB1C,CACzBa,GACAC,MAEIT,IACOC,EAA0BH,GAASU,CAAI,IAG7CA,IAMD,gBAAAD,EAAAG,GAAA,EACK,UAAA;AAAA,MAAAF,EAAK,QAAQ,gBAAAF,EAAC,QAAA,EAAM,UAAAE,EAAK,MAAK;AAAA,MAC9B,CAACT,KAAwBS,EAAK;AAAA,IAAA,GACnC,IAPOC,IAAmB,gBAAAH,EAAC,QAAA,EAAK,WAAU,eAAe,aAAiB,IAAU,KAc9DT,GAAcD,CAAW;AAAA,EAAA,GACnD;AAER;"}

package/components/selects/WithFeedbackAndAddon.d.ts

@@ -1,5 +1,4 @@
-import type React from 'react';
-import type { PropsWithChildren } from 'react';
+import { default as React, PropsWithChildren } from 'react';
 export type WithFeedbackAndAddonProps = {
     /**
      * Defines the size of the select to be rendered.