@rio-cloud/rio-uikit 2.4.2 → 2.5.0

package/components/selects/Select.js

@@ -1,24 +1,24 @@
-import { jsxs as F, jsx as i } from "react/jsx-runtime";
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
 import { useState as o, useRef as U } from "react";
 import { isEqual as V } from "es-toolkit/predicate";
-import { noop as Oe, isEmpty as ve } from "es-toolkit/compat";
+import { noop as ve, isEmpty as xe } from "es-toolkit/compat";
 import K from "../../utils/classNames.js";
-import xe, { filterOptions as we } from "./BaseSelectDropdown.js";
-import De from "../../hooks/useClickOutside.js";
-import Me from "../../hooks/useEffectOnce.js";
-import Ne from "../../hooks/useMergeRefs.js";
-import Ee from "./ClearButton.js";
-import ke from "./SelectFilter.js";
-import Ae from "./SelectedOption.js";
-import Te from "./WithFeedbackAndAddon.js";
-const u = -1, Xe = (R) => {
+import we, { filterOptions as De } from "./BaseSelectDropdown.js";
+import Me from "../../hooks/useClickOutside.js";
+import Ne from "../../hooks/useEffectOnce.js";
+import Ee from "../../hooks/useMergeRefs.js";
+import ke from "./ClearButton.js";
+import Ae from "./SelectFilter.js";
+import Te from "./SelectedOption.js";
+import ye from "./WithFeedbackAndAddon.js";
+const f = -1, Ge = (R) => {
   const {
-    name: b,
-    id: B = b,
+    name: F,
+    id: B = F,
     label: _,
     options: t = [],
     value: n,
-    onChange: O = Oe,
+    onChange: O = ve,
     placeholder: j,
     isLoading: L = !1,
     dropup: W = !1,
@@ -38,26 +38,27 @@ const u = -1, Xe = (R) => {
     dropdownClassName: ee,
     btnClassName: w,
     className: D,
+    trackingAttributes: te,
     inputAddon: M,
     errorMessage: N,
     warningMessage: E,
-    messageWhiteSpace: te = "normal",
-    ...se
-  } = R, [l, k] = o(!1), [h, p] = o(null), [I, c] = o(!1), [A, d] = o(""), [oe, r] = o(t), [T, ne] = o([]), [le, m] = o(u), [y, f] = o(!1), re = U(), P = U(null), ae = De(() => S()), ie = Ne(re, ae), C = (e, s) => {
-    s && !ve(s) ? p(e.find((a) => a.id === s[0]) || null) : e && p(e.find((a) => a.selected) || null);
+    messageWhiteSpace: se = "normal",
+    ...oe
+  } = R, [r, k] = o(!1), [h, p] = o(null), [I, c] = o(!1), [A, d] = o(""), [ne, l] = o(t), [T, re] = o([]), [le, m] = o(f), [y, u] = o(!1), ae = U(), P = U(null), ie = Me(() => S()), ce = Ee(ae, ie), C = (e, s) => {
+    s && !xe(s) ? p(e.find((a) => a.id === s[0]) || null) : e && p(e.find((a) => a.selected) || null);
   };
-  Me(() => {
+  Ne(() => {
     C(t, n);
   });
-  const [ce, de] = o(t);
-  V(t, ce) || (C(t, n), r(t), de(t));
-  const [fe, ue] = o(n);
-  V(n, fe) || (C(t, n), ue(n));
-  const pe = (e = []) => {
-    !e.length || (I || A) && T.length > 0 || ne(e);
-  }, me = () => {
-    p(null), c(!1), d(""), r(t), f(!1), m(u), O(void 0);
+  const [de, ue] = o(t);
+  V(t, de) || (C(t, n), l(t), ue(t));
+  const [fe, pe] = o(n);
+  V(n, fe) || (C(t, n), pe(n));
+  const me = (e = []) => {
+    !e.length || (I || A) && T.length > 0 || re(e);
   }, ge = () => {
+    p(null), c(!1), d(""), l(t), u(!1), m(f), O(void 0);
+  }, he = () => {
     const e = K(
       "dropdown-toggle",
       "form-control",
@@ -66,30 +67,31 @@ const u = -1, Xe = (R) => {
       g === "sm" && "input-sm",
       g === "lg" && "input-lg",
       v && "disabled"
-    ), s = /* @__PURE__ */ F(
+    ), s = /* @__PURE__ */ b(
       "button",
       {
         type: "button",
         id: B,
-        name: b,
+        name: F,
         className: e,
+        ...te,
         "data-toggle": "dropdown",
         tabIndex: G,
         "aria-haspopup": "true",
-        "aria-expanded": l,
-        onClick: Se,
+        "aria-expanded": r,
+        onClick: be,
         ref: P,
         children: [
-          J && l && /* @__PURE__ */ i(
-            ke,
+          J && r && /* @__PURE__ */ i(
+            Ae,
             {
               isFilterActive: I,
               filterValue: A,
-              onChange: Ie
+              onChange: Ce
             }
           ),
           x || /* @__PURE__ */ i(
-            Ae,
+            Te,
             {
               label: _,
               placeholder: j,
@@ -99,36 +101,36 @@ const u = -1, Xe = (R) => {
               showUnselectedItemIcons: $
             }
           ),
-          /* @__PURE__ */ F("span", { className: "select-toggle-actions", children: [
-            /* @__PURE__ */ i(Ee, { showClear: Q, selectedItem: h, onClear: me }),
+          /* @__PURE__ */ b("span", { className: "select-toggle-actions", children: [
+            /* @__PURE__ */ i(ke, { showClear: Q, selectedItem: h, onClear: ge }),
             /* @__PURE__ */ i("span", { className: "caret" })
           ] })
         ]
       }
     );
     return !M && !N && !E ? s : /* @__PURE__ */ i(
-      Te,
+      ye,
       {
         bsSize: g,
         inputAddon: M,
         errorMessage: N,
         warningMessage: E,
-        messageWhiteSpace: te,
+        messageWhiteSpace: se,
         children: s
       }
     );
-  }, he = () => {
+  }, Ie = () => {
     let e = le;
     return y && !h && (e = 0), /* @__PURE__ */ i(
-      xe,
+      we,
       {
-        isOpen: l,
+        isOpen: r,
         isLoading: L,
-        options: oe,
+        options: ne,
         focusedItemIndex: e,
         keyboardUsed: y,
-        updateDOMValues: pe,
-        onSelect: Ce,
+        updateDOMValues: me,
+        onSelect: Se,
         onClose: S,
         noItemMessage: Y,
         pullRight: q,
@@ -137,38 +139,38 @@ const u = -1, Xe = (R) => {
         dropdownClassName: ee
       }
     );
-  }, Ie = (e) => {
+  }, Ce = (e) => {
     e.preventDefault();
     const s = e.currentTarget.value;
     if (s === "") {
-      c(!1), d(""), r(t), f(!1), m(u);
+      c(!1), d(""), l(t), u(!1), m(f);
       return;
     }
-    const a = we(T, s, t), be = a.length > 0 ? 0 : u;
-    c(!0), d(s), r(a), f(!0), m(be);
-  }, Ce = (e) => {
-    p(e || null), c(!1), d(""), r(t), O(e), S();
+    const a = De(T, s, t), Oe = a.length > 0 ? 0 : f;
+    c(!0), d(s), l(a), u(!0), m(Oe);
   }, Se = (e) => {
+    p(e || null), c(!1), d(""), l(t), O(e), S();
+  }, be = (e) => {
     if (v || I)
       return;
     const s = e.detail === 0;
-    k(!l), f(s);
+    k(!r), u(s);
   }, S = () => {
-    l && (k(!1), c(!1), d(""), r(t), f(!1), m(u), P.current?.focus());
+    r && (k(!1), c(!1), d(""), l(t), u(!1), m(f), P.current?.focus());
   }, Fe = K(
     "select",
     "dropdown",
-    l && "open",
+    r && "open",
     H && "has-error",
     X === "blank" && "select-blank",
     D && D
   );
-  return /* @__PURE__ */ F("div", { ...se, className: Fe, ref: ie, children: [
-    ge(),
-    he()
+  return /* @__PURE__ */ b("div", { ...oe, className: Fe, ref: ce, children: [
+    he(),
+    Ie()
   ] });
 };
 export {
-  Xe as default
+  Ge as default
 };
 //# sourceMappingURL=Select.js.map

package/components/selects/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/selects/Select.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\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\n/**\n * Note: Even with a pre-selected item, when it first opens the dropdown it renders the full options list,\n * not just the selected one. The filter is only usable while the dropdown is open.\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     * Defines the visual variant of the select.\n     *\n     * @default 'default'\n     */\n    variant?: 'default' | 'blank';\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     *\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        variant = 'default',\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        // Skip updates when we have nothing new, or when filtering is active and we already hold a full snapshot.\n        if (!itemDOMValuesToUpdated.length) {\n            return;\n        }\n\n        const shouldKeepPreviousSnapshot = (isFilterActive || filterValue) && itemDOMValues.length > 0;\n        if (shouldKeepPreviousSnapshot) {\n            return;\n        }\n\n        setItemDOMValues(itemDOMValuesToUpdated);\n    };\n\n    const handleClearSelectedItem = () => {\n        setSelectedItem(null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n        setKeyboardUsed(false);\n        setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\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                <span className='select-toggle-actions'>\n                    <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                    <span className='caret' />\n                </span>\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        // Start from the last tracked focus; only default to the first item when opened via keyboard and nothing is selected.\n        let currentFocusedItemIndex = focusedItemIndex;\n\n        // Do not auto-highlight a selected item on open; let keyboard navigation start from \"no focus\".\n        // Only default to the first item when opened via keyboard and nothing was selected.\n        if (keyboardUsed && !selectedItem) {\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(\n        'select',\n        'dropdown',\n        isOpen && 'open',\n        hasError && 'has-error',\n        variant === 'blank' && 'select-blank',\n        className && className\n    );\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","variant","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","handleClearSelectedItem","renderToggle","toggleClasses","classNames","toggleButton","jsxs","onToggle","jsx","SelectFilter","handleFilterChange","SelectedOption","ClearButton","WithFeedbackAndAddon","renderDropdownMenu","currentFocusedItemIndex","BaseSelectDropdown","onOptionChange","event","targetFilterValue","currentFilteredOptions","filterOptions","newFocusedItemIndex","currentSelectedItem","isKeyboardUsed","classes"],"mappings":";;;;;;;;;;;;;AAiBA,MAAMA,IAA6B,IAmL7BC,KAAS,CAAyBC,MAA0B;AAC9D,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,IAAAC,IAAKD;AAAA,IACL,OAAAE;AAAA,IACA,SAAAC,IAAU,CAAA;AAAA,IACV,OAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,yBAAAC,IAA0B;AAAA,IAC1B,mBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IAEA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC,KAAoB;AAAA,IAEpB,GAAGC;AAAA,EAAA,IACH/B,GAEE,CAACgC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAcC,CAAe,IAAIF,EAA8B,IAAI,GACpE,CAACG,GAAgBC,CAAiB,IAAIJ,EAAS,EAAK,GACpD,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAE,GAC3C,CAACO,IAAiBC,CAAkB,IAAIR,EAAS9B,CAAO,GACxD,CAACuC,GAAeC,EAAgB,IAAIV,EAA2B,CAAA,CAAE,GACjE,CAACW,IAAkBC,CAAmB,IAAIZ,EAASpC,CAA0B,GAC7E,CAACiD,GAAcC,CAAe,IAAId,EAAS,EAAK,GAEhDe,KAAYC,EAAA,GACZC,IAAYD,EAA0B,IAAI,GAE1CE,KAAMC,GAAgB,MAAMC,GAAW,GACvCC,KAAmBC,GAAaP,IAAWG,EAAG,GAE9CK,IAAqB,CAACC,GAA+BC,MAAuC;AAC9F,IAAIA,KAAgB,CAACC,GAAQD,CAAY,IACrCvB,EAAgBsB,EAAc,KAAK,CAAAG,MAAQA,EAAK,OAAOF,EAAa,CAAC,CAAC,KAAK,IAAI,IACxED,KACPtB,EAAgBsB,EAAc,KAAK,CAAAG,MAAQA,EAAK,QAAQ,KAAK,IAAI;AAAA,EAEzE;AAEA,EAAAC,GAAc,MAAM;AAChB,IAAAL,EAAmBrD,GAASC,CAAK;AAAA,EACrC,CAAC;AAED,QAAM,CAAC0D,IAAiBC,EAAkB,IAAI9B,EAAS9B,CAAO;AAC9D,EAAK6D,EAAQ7D,GAAS2D,EAAe,MACjCN,EAAmBrD,GAASC,CAAK,GACjCqC,EAAmBtC,CAAO,GAC1B4D,GAAmB5D,CAAO;AAG9B,QAAM,CAAC8D,IAAeC,EAAgB,IAAIjC,EAAS7B,CAAK;AACxD,EAAK4D,EAAQ5D,GAAO6D,EAAa,MAC7BT,EAAmBrD,GAASC,CAAK,GACjC8D,GAAiB9D,CAAK;AAG1B,QAAM+D,KAAkB,CAACC,IAA2C,OAAO;AAOvE,IALI,CAACA,EAAuB,WAIQhC,KAAkBE,MAAgBI,EAAc,SAAS,KAK7FC,GAAiByB,CAAsB;AAAA,EAC3C,GAEMC,KAA0B,MAAM;AAClC,IAAAlC,EAAgB,IAAI,GACpBE,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBtC,CAAO,GAC1B4C,EAAgB,EAAK,GACrBF,EAAoBhD,CAA0B,GAE9CQ,EAAS,MAAS;AAAA,EACtB,GAEMiE,KAAe,MAAM;AACvB,UAAMC,IAAgBC;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACAhD,KAAgBA;AAAA,MAChBZ,MAAW,QAAQ;AAAA,MACnBA,MAAW,QAAQ;AAAA,MACnBE,KAAY;AAAA,IAAA,GAGV2D,IACF,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,IAAAzE;AAAA,QACA,MAAAD;AAAA,QACA,WAAWuE;AAAA,QACX,eAAY;AAAA,QACZ,UAAAxD;AAAA,QACA,iBAAc;AAAA,QACd,iBAAegB;AAAA,QACf,SAAS4C;AAAA,QACT,KAAKzB;AAAA,QAEJ,UAAA;AAAA,UAAAjC,KAAac,KACV,gBAAA6C;AAAA,YAACC;AAAA,YAAA;AAAA,cACG,gBAAAzC;AAAA,cACA,aAAAE;AAAA,cACA,UAAUwC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGjB1D,KAGG,gBAAAwD;AAAA,YAACG;AAAA,YAAA;AAAA,cACG,OAAA7E;AAAA,cACA,aAAAK;AAAA,cACA,cAAA2B;AAAA,cACA,SAAA/B;AAAA,cACA,sBAAAkB;AAAA,cACA,yBAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGR,gBAAAoD,EAAC,QAAA,EAAK,WAAU,yBACZ,UAAA;AAAA,YAAA,gBAAAE,EAACI,IAAA,EAAY,WAAW9D,GAAU,cAAAgB,GAA4B,SAASmC,IAAyB;AAAA,YAChG,gBAAAO,EAAC,QAAA,EAAK,WAAU,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIR,WAAI,CAAClD,KAAc,CAACC,KAAgB,CAACC,IAC1B6C,IAIP,gBAAAG;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,QAAArE;AAAA,QACA,YAAAc;AAAA,QACA,cAAAC;AAAA,QACA,gBAAAC;AAAA,QACA,mBAAAC;AAAA,QAEC,UAAA4C;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb,GAEMS,KAAqB,MAAM;AAE7B,QAAIC,IAA0BvC;AAI9B,WAAIE,KAAgB,CAACZ,MACjBiD,IAA0B,IAI1B,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QACG,QAAArD;AAAA,QACA,WAAAvB;AAAA,QACA,SAASgC;AAAA,QACT,kBAAkB2C;AAAA,QAClB,cAAArC;AAAA,QACA,iBAAAqB;AAAA,QACA,UAAUkB;AAAA,QACV,SAAShC;AAAA,QACT,eAAAlC;AAAA,QACA,WAAAT;AAAA,QACA,QAAAD;AAAA,QACA,mBAAAE;AAAA,QACA,mBAAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ,GAEMuD,KAAqB,CAACQ,MAA+C;AACvE,IAAAA,EAAM,eAAA;AAEN,UAAMC,IAAoBD,EAAM,cAAc;AAG9C,QAAIC,MAAsB,IAAI;AAC1B,MAAAlD,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBtC,CAAO,GAC1B4C,EAAgB,EAAK,GACrBF,EAAoBhD,CAA0B;AAC9C;AAAA,IACJ;AAGA,UAAM2F,IAAyBC,GAAc/C,GAAe6C,GAAmBpF,CAAO,GAGhFuF,KAAsBF,EAAuB,SAAS,IAAI,IAAI3F;AAEpE,IAAAwC,EAAkB,EAAI,GACtBE,EAAegD,CAAiB,GAChC9C,EAAmB+C,CAAsB,GACzCzC,EAAgB,EAAI,GACpBF,EAAoB6C,EAAmB;AAAA,EAC3C,GAEML,KAAiB,CAACM,MAAuC;AAC3D,IAAAxD,EAAgBwD,KAAuB,IAAI,GAC3CtD,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBtC,CAAO,GAE1BE,EAASsF,CAAmB,GAE5BtC,EAAA;AAAA,EACJ,GAEMsB,KAAW,CAACW,MAA+C;AAI7D,QAAIxE,KAAYsB;AACZ;AAMJ,UAAMwD,IAAiBN,EAAM,WAAW;AAExC,IAAAtD,EAAU,CAACD,CAAM,GACjBgB,EAAgB6C,CAAc;AAAA,EAClC,GAEMvC,IAAY,MAAM;AACpB,IAAItB,MACAC,EAAU,EAAK,GACfK,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBtC,CAAO,GAC1B4C,EAAgB,EAAK,GACrBF,EAAoBhD,CAA0B,GAC9CqD,EAAU,SAAS,MAAA;AAAA,EAE3B,GAEM2C,KAAUrB;AAAA,IACZ;AAAA,IACA;AAAA,IACAzC,KAAU;AAAA,IACVf,KAAY;AAAA,IACZH,MAAY,WAAW;AAAA,IACvBY,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAK,GAAGK,IAAgB,WAAW+D,IAAS,KAAKvC,IAC7C,UAAA;AAAA,IAAAgB,GAAA;AAAA,IACAY,GAAA;AAAA,EAAmB,GACxB;AAER;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/selects/Select.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\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\n/**\n * Note: Even with a pre-selected item, when it first opens the dropdown it renders the full options list,\n * not just the selected one. The filter is only usable while the dropdown is open.\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     * Defines the visual variant of the select.\n     *\n     * @default 'default'\n     */\n    variant?: 'default' | 'blank';\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     *\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    /**\n     * Optional tracking attributes added to the toggle button.\n     */\n    trackingAttributes?: TrackingAttributes;\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        variant = 'default',\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        trackingAttributes,\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        // Skip updates when we have nothing new, or when filtering is active and we already hold a full snapshot.\n        if (!itemDOMValuesToUpdated.length) {\n            return;\n        }\n\n        const shouldKeepPreviousSnapshot = (isFilterActive || filterValue) && itemDOMValues.length > 0;\n        if (shouldKeepPreviousSnapshot) {\n            return;\n        }\n\n        setItemDOMValues(itemDOMValuesToUpdated);\n    };\n\n    const handleClearSelectedItem = () => {\n        setSelectedItem(null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n        setKeyboardUsed(false);\n        setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\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                {...trackingAttributes}\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                <span className='select-toggle-actions'>\n                    <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                    <span className='caret' />\n                </span>\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        // Start from the last tracked focus; only default to the first item when opened via keyboard and nothing is selected.\n        let currentFocusedItemIndex = focusedItemIndex;\n\n        // Do not auto-highlight a selected item on open; let keyboard navigation start from \"no focus\".\n        // Only default to the first item when opened via keyboard and nothing was selected.\n        if (keyboardUsed && !selectedItem) {\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(\n        'select',\n        'dropdown',\n        isOpen && 'open',\n        hasError && 'has-error',\n        variant === 'blank' && 'select-blank',\n        className && className\n    );\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","variant","disabled","tabIndex","hasError","useFilter","useClear","noItemMessage","selectedOptionText","showSelectedItemIcon","showUnselectedItemIcons","dropdownClassName","btnClassName","className","trackingAttributes","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","handleClearSelectedItem","renderToggle","toggleClasses","classNames","toggleButton","jsxs","onToggle","jsx","SelectFilter","handleFilterChange","SelectedOption","ClearButton","WithFeedbackAndAddon","renderDropdownMenu","currentFocusedItemIndex","BaseSelectDropdown","onOptionChange","event","targetFilterValue","currentFilteredOptions","filterOptions","newFocusedItemIndex","currentSelectedItem","isKeyboardUsed","classes"],"mappings":";;;;;;;;;;;;;AAkBA,MAAMA,IAA6B,IAwL7BC,KAAS,CAAyBC,MAA0B;AAC9D,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,IAAAC,IAAKD;AAAA,IACL,OAAAE;AAAA,IACA,SAAAC,IAAU,CAAA;AAAA,IACV,OAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,yBAAAC,IAA0B;AAAA,IAC1B,mBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAAAC;AAAA,IAEA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC,KAAoB;AAAA,IAEpB,GAAGC;AAAA,EAAA,IACHhC,GAEE,CAACiC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAcC,CAAe,IAAIF,EAA8B,IAAI,GACpE,CAACG,GAAgBC,CAAiB,IAAIJ,EAAS,EAAK,GACpD,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAE,GAC3C,CAACO,IAAiBC,CAAkB,IAAIR,EAAS/B,CAAO,GACxD,CAACwC,GAAeC,EAAgB,IAAIV,EAA2B,CAAA,CAAE,GACjE,CAACW,IAAkBC,CAAmB,IAAIZ,EAASrC,CAA0B,GAC7E,CAACkD,GAAcC,CAAe,IAAId,EAAS,EAAK,GAEhDe,KAAYC,EAAA,GACZC,IAAYD,EAA0B,IAAI,GAE1CE,KAAMC,GAAgB,MAAMC,GAAW,GACvCC,KAAmBC,GAAaP,IAAWG,EAAG,GAE9CK,IAAqB,CAACC,GAA+BC,MAAuC;AAC9F,IAAIA,KAAgB,CAACC,GAAQD,CAAY,IACrCvB,EAAgBsB,EAAc,KAAK,CAAAG,MAAQA,EAAK,OAAOF,EAAa,CAAC,CAAC,KAAK,IAAI,IACxED,KACPtB,EAAgBsB,EAAc,KAAK,CAAAG,MAAQA,EAAK,QAAQ,KAAK,IAAI;AAAA,EAEzE;AAEA,EAAAC,GAAc,MAAM;AAChB,IAAAL,EAAmBtD,GAASC,CAAK;AAAA,EACrC,CAAC;AAED,QAAM,CAAC2D,IAAiBC,EAAkB,IAAI9B,EAAS/B,CAAO;AAC9D,EAAK8D,EAAQ9D,GAAS4D,EAAe,MACjCN,EAAmBtD,GAASC,CAAK,GACjCsC,EAAmBvC,CAAO,GAC1B6D,GAAmB7D,CAAO;AAG9B,QAAM,CAAC+D,IAAeC,EAAgB,IAAIjC,EAAS9B,CAAK;AACxD,EAAK6D,EAAQ7D,GAAO8D,EAAa,MAC7BT,EAAmBtD,GAASC,CAAK,GACjC+D,GAAiB/D,CAAK;AAG1B,QAAMgE,KAAkB,CAACC,IAA2C,OAAO;AAOvE,IALI,CAACA,EAAuB,WAIQhC,KAAkBE,MAAgBI,EAAc,SAAS,KAK7FC,GAAiByB,CAAsB;AAAA,EAC3C,GAEMC,KAA0B,MAAM;AAClC,IAAAlC,EAAgB,IAAI,GACpBE,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBvC,CAAO,GAC1B6C,EAAgB,EAAK,GACrBF,EAAoBjD,CAA0B,GAE9CQ,EAAS,MAAS;AAAA,EACtB,GAEMkE,KAAe,MAAM;AACvB,UAAMC,IAAgBC;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACAjD,KAAgBA;AAAA,MAChBZ,MAAW,QAAQ;AAAA,MACnBA,MAAW,QAAQ;AAAA,MACnBE,KAAY;AAAA,IAAA,GAGV4D,IACF,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,IAAA1E;AAAA,QACA,MAAAD;AAAA,QACA,WAAWwE;AAAA,QACV,GAAG9C;AAAA,QACJ,eAAY;AAAA,QACZ,UAAAX;AAAA,QACA,iBAAc;AAAA,QACd,iBAAeiB;AAAA,QACf,SAAS4C;AAAA,QACT,KAAKzB;AAAA,QAEJ,UAAA;AAAA,UAAAlC,KAAae,KACV,gBAAA6C;AAAA,YAACC;AAAA,YAAA;AAAA,cACG,gBAAAzC;AAAA,cACA,aAAAE;AAAA,cACA,UAAUwC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGjB3D,KAGG,gBAAAyD;AAAA,YAACG;AAAA,YAAA;AAAA,cACG,OAAA9E;AAAA,cACA,aAAAK;AAAA,cACA,cAAA4B;AAAA,cACA,SAAAhC;AAAA,cACA,sBAAAkB;AAAA,cACA,yBAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGR,gBAAAqD,EAAC,QAAA,EAAK,WAAU,yBACZ,UAAA;AAAA,YAAA,gBAAAE,EAACI,IAAA,EAAY,WAAW/D,GAAU,cAAAiB,GAA4B,SAASmC,IAAyB;AAAA,YAChG,gBAAAO,EAAC,QAAA,EAAK,WAAU,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIR,WAAI,CAAClD,KAAc,CAACC,KAAgB,CAACC,IAC1B6C,IAIP,gBAAAG;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,QAAAtE;AAAA,QACA,YAAAe;AAAA,QACA,cAAAC;AAAA,QACA,gBAAAC;AAAA,QACA,mBAAAC;AAAA,QAEC,UAAA4C;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb,GAEMS,KAAqB,MAAM;AAE7B,QAAIC,IAA0BvC;AAI9B,WAAIE,KAAgB,CAACZ,MACjBiD,IAA0B,IAI1B,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QACG,QAAArD;AAAA,QACA,WAAAxB;AAAA,QACA,SAASiC;AAAA,QACT,kBAAkB2C;AAAA,QAClB,cAAArC;AAAA,QACA,iBAAAqB;AAAA,QACA,UAAUkB;AAAA,QACV,SAAShC;AAAA,QACT,eAAAnC;AAAA,QACA,WAAAT;AAAA,QACA,QAAAD;AAAA,QACA,mBAAAE;AAAA,QACA,mBAAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ,GAEMwD,KAAqB,CAACQ,MAA+C;AACvE,IAAAA,EAAM,eAAA;AAEN,UAAMC,IAAoBD,EAAM,cAAc;AAG9C,QAAIC,MAAsB,IAAI;AAC1B,MAAAlD,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBvC,CAAO,GAC1B6C,EAAgB,EAAK,GACrBF,EAAoBjD,CAA0B;AAC9C;AAAA,IACJ;AAGA,UAAM4F,IAAyBC,GAAc/C,GAAe6C,GAAmBrF,CAAO,GAGhFwF,KAAsBF,EAAuB,SAAS,IAAI,IAAI5F;AAEpE,IAAAyC,EAAkB,EAAI,GACtBE,EAAegD,CAAiB,GAChC9C,EAAmB+C,CAAsB,GACzCzC,EAAgB,EAAI,GACpBF,EAAoB6C,EAAmB;AAAA,EAC3C,GAEML,KAAiB,CAACM,MAAuC;AAC3D,IAAAxD,EAAgBwD,KAAuB,IAAI,GAC3CtD,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBvC,CAAO,GAE1BE,EAASuF,CAAmB,GAE5BtC,EAAA;AAAA,EACJ,GAEMsB,KAAW,CAACW,MAA+C;AAI7D,QAAIzE,KAAYuB;AACZ;AAMJ,UAAMwD,IAAiBN,EAAM,WAAW;AAExC,IAAAtD,EAAU,CAACD,CAAM,GACjBgB,EAAgB6C,CAAc;AAAA,EAClC,GAEMvC,IAAY,MAAM;AACpB,IAAItB,MACAC,EAAU,EAAK,GACfK,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBvC,CAAO,GAC1B6C,EAAgB,EAAK,GACrBF,EAAoBjD,CAA0B,GAC9CsD,EAAU,SAAS,MAAA;AAAA,EAE3B,GAEM2C,KAAUrB;AAAA,IACZ;AAAA,IACA;AAAA,IACAzC,KAAU;AAAA,IACVhB,KAAY;AAAA,IACZH,MAAY,WAAW;AAAA,IACvBY,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAK,GAAGM,IAAgB,WAAW+D,IAAS,KAAKvC,IAC7C,UAAA;AAAA,IAAAgB,GAAA;AAAA,IACAY,GAAA;AAAA,EAAmB,GACxB;AAER;"}

package/components/sidebars/Sidebar.js

@@ -1,8 +1,8 @@
-import { jsxs as c, Fragment as G, jsx as s } from "react/jsx-runtime";
-import { useState as i, useRef as P, useEffect as b } from "react";
+import { jsxs as c, Fragment as P, jsx as s } from "react/jsx-runtime";
+import { useState as i, useRef as V, useEffect as b } from "react";
 import { motion as We } from "motion/react";
 import { noop as p } from "es-toolkit/function";
-import { toNumber as V } from "es-toolkit/compat";
+import { toNumber as j } from "es-toolkit/compat";
 import m from "../../utils/classNames.js";
 import Oe from "./SidebarFooter.js";
 import ge from "./SidebarBackdrop.js";
@@ -13,7 +13,7 @@ import He from "../../hooks/useWindowResize.js";
 import Be from "../../hooks/useEsc.js";
 import ke from "../../utils/getWidthInBoundaries.js";
 import xe from "../smoothScrollbars/SmoothScrollbars.js";
-const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 500, C = {
+const Ue = 350, Ae = 100, Ye = 800, X = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 500, C = {
   LEFT: "left",
   RIGHT: "right"
 }, D = {
@@ -37,13 +37,13 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
   const {
     fly: r = !1,
     closed: o = !1,
-    title: X = "",
+    title: F = "",
     footer: Z,
     resizable: q = !1,
-    position: F,
+    position: R,
     width: l = Ue,
     minWidth: K = Ae,
-    maxWidth: R = Ye,
+    maxWidth: M = Ye,
     hasBackdrop: J = !1,
     hasSmoothScrollbar: Q = !1,
     makeBackdropVisible: $ = !1,
@@ -51,13 +51,13 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     fullscreenToggleTooltip: ee,
     openInFullscreen: se = !1,
     showHeaderBorder: te = !1,
-    disableClose: M = !1,
-    bodyRef: _,
-    headerButtons: w,
-    switchModeBreakpoint: y = j,
+    disableClose: _ = !1,
+    bodyRef: w,
+    headerButtons: y,
+    switchModeBreakpoint: W = X,
     onClose: oe = p,
     onResizeEnd: ie = p,
-    onFullScreenChange: W = p,
+    onFullScreenChange: O = p,
     onBackdropClick: ne = p,
     disableEsc: re = !1,
     titleClassName: ae = "",
@@ -66,49 +66,49 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     footerClassName: ce = "",
     backdropClassName: me = "",
     className: fe = "",
-    children: O,
+    children: g,
     ...ue
-  } = n, [he, g] = i(V(l)), [S, v] = i(r ? t.MODE_FLY : t.MODE_FLUID), [a, z] = i(se), [be, H] = i(!1), [I, pe] = i(!1), [N, Ee] = i(F === C.RIGHT), f = P(null), B = P(null);
+  } = n, [he, v] = i(j(l)), [S, z] = i(r ? t.MODE_FLY : t.MODE_FLUID), [a, H] = i(se), [be, B] = i(!1), [I, pe] = i(!1), [N, Ee] = i(R === C.RIGHT), f = V(null), k = V(null);
   b(() => {
     f.current && S === t.MODE_FLY && f.current.parentNode?.className.includes("right") && Ee(!0);
   }, [f.current, S]);
-  const [k, Te] = i(o);
-  k !== o && Te(o);
+  const [x, Te] = i(o);
+  x !== o && Te(o);
   const [Se, Ie] = i(l);
-  Se !== l && (console.log("update internal width"), g(V(l)), Ie(l)), He(() => u(), je), b(() => u(), []), b(() => {
+  Se !== l && (console.log("update internal width"), v(j(l)), Ie(l)), He(() => u(), je), b(() => u(), []), b(() => {
     o || setTimeout(() => u());
   }, [o]), b(() => {
     const e = document.querySelector(".module-content");
-    e && (B.current = e);
+    e && (k.current = e);
   }, []), Be(() => {
-    !re && T && a && (z(!1), W(!1));
+    !re && T && a && (H(!1), O(!1));
   });
   const u = () => {
-    const e = B.current?.clientWidth;
-    if (r || y === j)
+    const e = k.current?.clientWidth;
+    if (r || W === X)
       return;
-    const L = e && e <= Ge, d = e && e > Pe, h = window.innerWidth <= y;
+    const L = e && e <= Ge, d = e && e > Pe, h = window.innerWidth <= W;
     if (L || h) {
-      v(t.MODE_FLY);
+      z(t.MODE_FLY);
       return;
     }
     if (d && !h) {
-      v(t.MODE_FLUID);
+      z(t.MODE_FLUID);
       return;
     }
   }, Ne = (e) => {
-    const L = I, d = window.innerWidth * 0.5, h = R || d;
-    g((A) => {
-      const ye = F === t.RIGHT ? A + e : A - e, Y = ke(K, h, ye);
-      return pe(Y === d), L && !I ? d : Y;
+    const L = I, d = window.innerWidth * 0.5, h = M || d;
+    v((Y) => {
+      const ye = R === t.RIGHT ? Y + e : Y - e, G = ke(K, h, ye);
+      return pe(G === d), L && !I ? d : G;
     }), u();
   }, Le = () => {
-    document.body?.classList.add("pointer-events-none"), H(!0);
+    document.body?.classList.add("pointer-events-none"), B(!0);
   }, Ce = () => {
-    document.body?.classList.remove("pointer-events-none"), H(!1), ie();
+    document.body?.classList.remove("pointer-events-none"), B(!1), ie();
   }, De = () => {
     const e = !a;
-    z(e), W(e);
+    H(e), O(e);
   }, Fe = m(
     "Sidebar",
     fe,
@@ -116,13 +116,13 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     a && "width-100vw sidebar-fullscreen",
     I && !a && "max-width-50vw width-50vw",
     S === D.MODE_FLY || a ? "fly" : "fluid"
-  ), Re = m("SidebarHeader", de, te && "show-border"), Me = m("SidebarTitle", ae), x = m("SidebarBody", le), _e = m("SidebarResizeLimit", be && "display-block"), U = R || window.innerWidth * 0.5, we = /* @__PURE__ */ c(G, { children: [
-    /* @__PURE__ */ s("div", { className: _e, style: N ? { right: U } : { left: U } }),
+  ), Re = m("SidebarHeader", de, te && "show-border"), Me = m("SidebarTitle", ae), U = m("SidebarBody", le), _e = m("SidebarResizeLimit", be && "display-block"), A = M || window.innerWidth * 0.5, we = /* @__PURE__ */ c(P, { children: [
+    /* @__PURE__ */ s("div", { className: _e, style: N ? { right: A } : { left: A } }),
     /* @__PURE__ */ c("div", { className: "SidebarContent", children: [
       /* @__PURE__ */ c("div", { className: Re, children: [
-        /* @__PURE__ */ s("div", { className: Me, children: X }),
+        /* @__PURE__ */ s("div", { className: Me, children: F }),
         /* @__PURE__ */ c("div", { className: "SidebarButtons non-printable close", children: [
-          w,
+          y,
           T && /* @__PURE__ */ s(
             ve,
             {
@@ -131,11 +131,11 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
               tooltip: ee
             }
           ),
-          !M && (w || T) && /* @__PURE__ */ s("div", { className: "SidebarButtons-spacer" }),
-          !M && /* @__PURE__ */ s(ze, { onClick: oe })
+          !_ && (y || T) && /* @__PURE__ */ s("div", { className: "SidebarButtons-spacer" }),
+          !_ && /* @__PURE__ */ s(ze, { title: F, onClick: oe })
         ] })
       ] }),
-      Q ? /* @__PURE__ */ s(xe, { slideIn: !0, className: x, ref: _, children: O }) : /* @__PURE__ */ s("div", { className: x, ref: _, children: O }),
+      Q ? /* @__PURE__ */ s(xe, { slideIn: !0, className: U, ref: w, children: g }) : /* @__PURE__ */ s("div", { className: U, ref: w, children: g }),
       /* @__PURE__ */ s(Oe, { footer: Z, className: ce })
     ] }),
     q && /* @__PURE__ */ s(
@@ -149,12 +149,12 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
       }
     )
   ] });
-  return /* @__PURE__ */ c(G, { children: [
+  return /* @__PURE__ */ c(P, { children: [
     /* @__PURE__ */ s(
       We.div,
       {
         ...ue,
-        initial: k && "sidebarEnter",
+        initial: x && "sidebarEnter",
         animate: "sidebarVisible",
         exit: "sidebarExit",
         variants: Xe,