@rio-cloud/rio-uikit 2.2.0 → 2.3.0-beta.1

package/components/selects/BaseSelectDropdown.js

@@ -8,11 +8,11 @@ import { DOWN as O, scrollItemIntoView as T, UP as g } from "../../utils/scrollI
 import $ from "../../hooks/useEffectOnce.js";
 import ee from "../../hooks/useKey.js";
 import te from "./DropdownHeader.js";
-import re from "./NoItemMessage.js";
-import se from "../spinner/Spinner.js";
+import se from "./NoItemMessage.js";
+import re from "../spinner/Spinner.js";
 const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
   const {
-    isOpen: r = !1,
+    isOpen: s = !1,
     isLoading: l = !1,
     updateDOMValues: u = N,
     onOpen: i = N,
@@ -27,33 +27,33 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
     keyboardUsed: f,
     noItemMessage: W,
     dropdownClassName: X
-  } = h, [n, k] = y(m || ne), [q, A] = y(f), w = _(L), s = _(null);
+  } = h, [n, k] = y(m || ne), [q, A] = y(f), w = _(L), r = _(null);
   b(() => {
-    r && s.current && (s.current.scrollTop = 0);
-  }, [r]), b(() => {
-    typeof m == "number" && k(m), typeof f == "boolean" && A(f), r || (w.current = L);
-  }, [m, f, r]), $(() => {
+    s && r.current && (r.current.scrollTop = 0);
+  }, [s]), b(() => {
+    typeof m == "number" && k(m), typeof f == "boolean" && A(f), s || (w.current = L);
+  }, [m, f, s]), $(() => {
     const e = F();
     u(e);
   });
-  const I = Z({ pullRight: G, dropup: K, autoDropDirection: j, dropdownMenuRef: s }, [r]);
+  const I = Z({ pullRight: G, dropup: K, autoDropDirection: j, dropdownMenuRef: r }, [s]);
   Y(() => {
-    if (s.current) {
-      const e = s.current.parentElement;
+    if (r.current) {
+      const e = r.current.parentElement;
       I.dropup ? e?.classList.add("dropup") : e?.classList.remove("dropup");
     }
-  }, [I, s]), b(() => {
-    s.current && u(F());
-  }, [s.current]), b(() => {
-    r && T(
+  }, [I, r]), b(() => {
+    r.current && u(F());
+  }, [r.current]), b(() => {
+    s && T(
       w.current || L,
-      s.current,
+      r.current,
       D()
     );
-  }, [n, r]);
-  const [v, U] = y(r);
-  r && !v ? (i(I.dropup), U(r)) : !r && v && (E(), U(r)), ee((e) => {
-    if (r)
+  }, [n, s]);
+  const [v, U] = y(s);
+  s && !v ? (i(I.dropup), U(s)) : !s && v && (E(), U(s)), ee((e) => {
+    if (s)
       switch (e.key) {
         case "Escape": {
           E();
@@ -68,11 +68,11 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
           break;
         }
         case "ArrowUp": {
-          e.preventDefault(), M(g), T(g, s.current, D());
+          e.preventDefault(), M(g), T(g, r.current, D());
           break;
         }
         case "ArrowDown": {
-          e.preventDefault(), M(O), T(O, s.current, D());
+          e.preventDefault(), M(O), T(O, r.current, D());
           break;
         }
       }
@@ -92,12 +92,14 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
     w.current = e;
     const a = e === g ? o.length - 1 : 0;
     k(t < 0 ? a : t), A(!0);
-  }, S = () => s.current?.getElementsByTagName("a") || [], F = () => {
-    if (s.current)
-      return [...S()].map((t) => ({
-        id: t.getAttribute(B),
-        text: t.textContent
-      }));
+  }, S = () => r.current?.getElementsByTagName("a") || [], F = () => {
+    if (r.current)
+      return [...S()].map(
+        (t) => ({
+          id: t.getAttribute(B),
+          text: t.textContent
+        })
+      );
   }, D = () => [...S()].find((t) => t.className.includes(H)), z = (e) => {
     if (e.preventDefault(), V(o))
       return;
@@ -111,8 +113,8 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
     const t = e.currentTarget.getElementsByTagName("input")[0].value, a = o.find((d) => d.id === t);
     p(a);
   }, R = C("dropdown-menu", I.pullRight && "pull-right", X);
-  return V(o) ? /* @__PURE__ */ c(re, { noItemMessage: W, className: R }) : /* @__PURE__ */ x("ul", { className: R, ref: s, role: "menu", children: [
-    l && /* @__PURE__ */ c("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ c(se, {}) }),
+  return V(o) ? /* @__PURE__ */ c(se, { noItemMessage: W, className: R }) : /* @__PURE__ */ x("ul", { className: R, ref: r, role: "menu", children: [
+    l && /* @__PURE__ */ c("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ c(re, {}) }),
     !l && o.map((e, t) => {
       if (e.header)
         return /* @__PURE__ */ c(te, { icon: e.icon, label: e.label }, e.id);
@@ -143,8 +145,8 @@ const B = "data-item-id", ne = 0, H = "focus", L = O, be = (h) => {
       ) }, e.id);
     })
   ] });
-}, Ne = (h, r, l) => {
-  const u = h.filter((i) => i.text.toLowerCase().includes(r.toLowerCase()));
+}, Ne = (h, s, l) => {
+  const u = h.filter((i) => i.text.toLowerCase().includes(s.toLowerCase()));
   return l.filter((i) => u.find((p) => p.id === i.id));
 };
 export {

package/components/selects/BaseSelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSelectDropdown.js","sources":["../../../src/components/selects/BaseSelectDropdown.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport { DOWN, scrollItemIntoView, UP } from '../../utils/scrollItemIntoView';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useKey from '../../useKey';\nimport DropdownHeader from './DropdownHeader';\nimport NoItemMessage from './NoItemMessage';\nimport Spinner from '../spinner/Spinner';\n\nconst DATA_ATTRIBUTE_ID = 'data-item-id';\nconst DEFAULT_FOCUSED_ITEM_INDEX = 0;\nconst HIGHLIGHT_CLASS = 'focus';\nconst DEFAULT_SCROLL_DIRECTION = DOWN;\n\nexport type OptionDOMValue = {\n    id: string;\n    text: string;\n};\n\nexport type SelectOption = {\n    /**\n     * Used to identify an option.\n     */\n    id: string;\n\n    /**\n     * The option item text.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Icon to be displayed in front of the label.\n     */\n    icon?: React.ReactNode;\n\n    /**\n     * Defines whether the menu item is selected.\n     *\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Setting \"disabled\" to true will disable the respective item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Will treat the given value as a menu header\n     */\n    header?: boolean;\n};\n\nexport type BaseSelectDropdownProps<T extends SelectOption> = {\n    options?: T[];\n    isOpen?: boolean;\n    isLoading?: boolean;\n    updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;\n    onOpen?: (hasDropup: boolean) => void;\n    onSelect?: (selectedItem: T | undefined) => void;\n    onClose?: () => void;\n    placeholder?: string | React.ReactNode;\n    dropup?: boolean;\n    pullRight?: boolean;\n    autoDropDirection?: boolean;\n    noItemMessage?: string | React.ReactNode;\n    focusedItemIndex?: number;\n    dropdownClassName?: string;\n    keyboardUsed?: boolean;\n    useActiveClass?: boolean;\n};\n\nconst BaseSelectDropdown = <T extends SelectOption>(props: BaseSelectDropdownProps<T>) => {\n    const {\n        isOpen = false,\n        isLoading = false,\n        updateDOMValues = noop,\n        onOpen = noop,\n        onSelect = noop,\n        onClose = noop,\n        options = [],\n        autoDropDirection = true,\n        dropup = false,\n        pullRight = false,\n        useActiveClass = false,\n        focusedItemIndex: externalFocusedItemIndex,\n        keyboardUsed: externalKeyboardUsed,\n        noItemMessage,\n        dropdownClassName,\n    } = props;\n\n    const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);\n    const lastScrollDirectionRef = useRef<typeof UP | typeof DOWN>(DEFAULT_SCROLL_DIRECTION);\n\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n\n    // Reset scroll position whenever the menu opens to avoid retaining old scroll offsets\n    useEffect(() => {\n        if (isOpen && dropdownMenuRef.current) {\n            dropdownMenuRef.current.scrollTop = 0;\n        }\n    }, [isOpen]);\n\n    // Keep internal focus state in sync when the dropdown opens/closes or when parent-controlled values change\n    useEffect(() => {\n        if (typeof externalFocusedItemIndex === 'number') {\n            setFocusedItemIndex(externalFocusedItemIndex);\n        }\n\n        if (typeof externalKeyboardUsed === 'boolean') {\n            setKeyboardUsed(externalKeyboardUsed);\n        }\n\n        if (!isOpen) {\n            lastScrollDirectionRef.current = DEFAULT_SCROLL_DIRECTION;\n        }\n    }, [externalFocusedItemIndex, externalKeyboardUsed, isOpen]);\n\n    useEffectOnce(() => {\n        // all available items need to be rendered in order to know their DOM value\n        // which will be used for filtering in the parent component\n        const currentItemDOMValues = updateItemDOMValues();\n        updateDOMValues(currentItemDOMValues);\n    });\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [isOpen]);\n\n    // Add or remove the \"dropup\" class from the parent Select/Multiselect component to position\n    // the dropdown element accordingly via CSS\n    useLayoutEffect(() => {\n        if (dropdownMenuRef.current) {\n            const parent = dropdownMenuRef.current.parentElement;\n            if (dropDirection.dropup) {\n                parent?.classList.add('dropup');\n            } else {\n                parent?.classList.remove('dropup');\n            }\n        }\n    }, [dropDirection, dropdownMenuRef]);\n\n    useEffect(() => {\n        if (dropdownMenuRef.current) {\n            updateDOMValues(updateItemDOMValues());\n        }\n    }, [dropdownMenuRef.current]);\n\n    // Scroll the focused item into view whenever focus changes\n    useEffect(() => {\n        if (!isOpen) {\n            return;\n        }\n\n        scrollItemIntoView(\n            lastScrollDirectionRef.current || DEFAULT_SCROLL_DIRECTION,\n            dropdownMenuRef.current,\n            getFocusedOptionNode()\n        );\n    }, [focusedItemIndex, isOpen]);\n\n    // update internal state for isOpen\n    const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);\n    if (isOpen && !previousIsOpen) {\n        onOpen(dropDirection.dropup);\n        setPreviousIsOpen(isOpen);\n    } else if (!isOpen && previousIsOpen) {\n        onClose();\n        setPreviousIsOpen(isOpen);\n    }\n\n    useKey(event => {\n        if (isOpen) {\n            switch (event.key) {\n                case 'Escape': {\n                    // close dropdown on esc\n                    onClose();\n                    break;\n                }\n                case 'Tab': {\n                    // close dropdown on tab\n                    onClose();\n                    break;\n                }\n                case 'Enter': {\n                    // select item on enter\n                    selectOptionOnEnter(event);\n                    break;\n                }\n                case 'ArrowUp': {\n                    // prevent scrolling the page when dropdown menu is open\n                    event.preventDefault();\n\n                    // select item above on arrow up key\n                    focusOption(UP);\n                    scrollItemIntoView(UP, dropdownMenuRef.current, getFocusedOptionNode());\n                    break;\n                }\n                case 'ArrowDown': {\n                    // prevent scrolling the page when dropdown menu is open\n                    event.preventDefault();\n\n                    // select item below on arrow down key\n                    focusOption(DOWN);\n                    scrollItemIntoView(DOWN, dropdownMenuRef.current, getFocusedOptionNode());\n                    break;\n                }\n                default:\n                    break;\n            }\n        }\n    });\n\n    const focusOption = (direction: typeof UP | typeof DOWN) => {\n        let nextFocusedItem = 0;\n\n        switch (direction) {\n            case UP: {\n                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;\n                break;\n            }\n            case DOWN: {\n                nextFocusedItem = focusedItemIndex === options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;\n                break;\n            }\n            default:\n                break;\n        }\n\n        lastScrollDirectionRef.current = direction;\n\n        // In case the next item index is negative, means outside the bounds of the items,\n        // reset it depending on the current direction\n        const indexLimit = direction === UP ? options.length - 1 : 0;\n\n        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);\n        setKeyboardUsed(true);\n    };\n\n    const getOptionNodes = () => {\n        const node = dropdownMenuRef.current;\n        return node?.getElementsByTagName('a') || [];\n    };\n\n    const updateItemDOMValues = () => {\n        if (dropdownMenuRef.current) {\n            const optionNodes = getOptionNodes();\n            return [...optionNodes].map(item => {\n                return {\n                    id: item.getAttribute(DATA_ATTRIBUTE_ID),\n                    text: item.textContent,\n                } as OptionDOMValue;\n            });\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        const optionNodes = getOptionNodes();\n        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));\n    };\n\n    const selectOptionOnEnter = (event: KeyboardEvent) => {\n        event.preventDefault();\n\n        // When no filter result was found, avoid selecting anything\n        if (isEmpty(options)) {\n            return;\n        }\n\n        const match = getFocusedOptionNode();\n\n        if (match) {\n            const selectedItem = options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));\n            onSelect(selectedItem);\n        }\n    };\n\n    const handleOptionChange = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        event.preventDefault();\n\n        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;\n        const selectedItem = options.find(option => option.id === optionId);\n\n        onSelect(selectedItem);\n    };\n\n    const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);\n\n    // Don't show the dropdown, when no match are found when filtering unless there is a not found message\n    if (isEmpty(options)) {\n        return <NoItemMessage noItemMessage={noItemMessage} className={dropdownMenuClasses} />;\n    }\n\n    return (\n        <ul className={dropdownMenuClasses} ref={dropdownMenuRef} role='menu'>\n            {isLoading && (\n                <div className='display-flex justify-content-center padding-10'>\n                    <Spinner />\n                </div>\n            )}\n            {!isLoading &&\n                options.map((option, index) => {\n                    if (option.header) {\n                        return <DropdownHeader key={option.id} icon={option.icon} label={option.label} />;\n                    }\n\n                    // Show focused style only when keyboard is in use\n                    const anchorClassNames = classNames(\n                        keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '',\n                        option.disabled && 'pointer-events-none',\n                        'display-flex align-items-center gap-3'\n                    );\n\n                    const wrapperClassNames = classNames(\n                        option.disabled && 'disabled',\n                        useActiveClass && option.selected && 'active'\n                    );\n\n                    return (\n                        <li key={option.id} className={wrapperClassNames} role='listitem'>\n                            <a\n                                role='menuitem'\n                                className={anchorClassNames}\n                                data-item-id={option.id}\n                                data-item-index={index}\n                                // Note, we need to assign the click callback only when it's not disabled\n                                // otherwise the functions is still triggered\n                                onClick={option.disabled ? undefined : handleOptionChange}\n                            >\n                                <span className='selected-option-dropdown-item'>\n                                    {option.icon && <>{option.icon}</>}\n                                    {option.label}\n                                </span>\n                                <input type='hidden' value={option.id} />\n                            </a>\n                        </li>\n                    );\n                })}\n        </ul>\n    );\n};\n\nexport const filterOptions = <T extends SelectOption>(\n    itemDOMValues: OptionDOMValue[],\n    filterValue: string,\n    options: T[]\n) => {\n    const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));\n\n    // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done\n    // on the options itself as they might contain arbitrary components\n    return options.filter(option => {\n        return filteredDOMValues.find(domValue => domValue.id === option.id);\n    });\n};\n\nexport default BaseSelectDropdown;\n"],"names":["DATA_ATTRIBUTE_ID","DEFAULT_FOCUSED_ITEM_INDEX","HIGHLIGHT_CLASS","DEFAULT_SCROLL_DIRECTION","DOWN","BaseSelectDropdown","props","isOpen","isLoading","updateDOMValues","noop","onOpen","onSelect","onClose","options","autoDropDirection","dropup","pullRight","useActiveClass","externalFocusedItemIndex","externalKeyboardUsed","noItemMessage","dropdownClassName","focusedItemIndex","setFocusedItemIndex","useState","keyboardUsed","setKeyboardUsed","lastScrollDirectionRef","useRef","dropdownMenuRef","useEffect","useEffectOnce","currentItemDOMValues","updateItemDOMValues","dropDirection","useDropDirection","useLayoutEffect","parent","scrollItemIntoView","getFocusedOptionNode","previousIsOpen","setPreviousIsOpen","useKey","event","selectOptionOnEnter","focusOption","UP","direction","nextFocusedItem","indexLimit","getOptionNodes","item","isEmpty","match","selectedItem","option","handleOptionChange","optionId","dropdownMenuClasses","classNames","jsx","NoItemMessage","Spinner","index","DropdownHeader","anchorClassNames","wrapperClassNames","jsxs","Fragment","filterOptions","itemDOMValues","filterValue","filteredDOMValues","domValue"],"mappings":"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"}
+{"version":3,"file":"BaseSelectDropdown.js","sources":["../../../src/components/selects/BaseSelectDropdown.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport { DOWN, scrollItemIntoView, UP } from '../../utils/scrollItemIntoView';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useKey from '../../useKey';\nimport DropdownHeader from './DropdownHeader';\nimport NoItemMessage from './NoItemMessage';\nimport Spinner from '../spinner/Spinner';\n\nconst DATA_ATTRIBUTE_ID = 'data-item-id';\nconst DEFAULT_FOCUSED_ITEM_INDEX = 0;\nconst HIGHLIGHT_CLASS = 'focus';\nconst DEFAULT_SCROLL_DIRECTION = DOWN;\n\nexport type OptionDOMValue = {\n    id: string;\n    text: string;\n};\n\nexport type SelectOption = {\n    /**\n     * Used to identify an option.\n     */\n    id: string;\n\n    /**\n     * The option item text.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Icon to be displayed in front of the label.\n     */\n    icon?: React.ReactNode;\n\n    /**\n     * Defines whether the menu item is selected.\n     *\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Setting \"disabled\" to true will disable the respective item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Will treat the given value as a menu header\n     */\n    header?: boolean;\n};\n\nexport type BaseSelectDropdownProps<T extends SelectOption> = {\n    options?: T[];\n    isOpen?: boolean;\n    isLoading?: boolean;\n    updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;\n    onOpen?: (hasDropup: boolean) => void;\n    onSelect?: (selectedItem: T | undefined) => void;\n    onClose?: () => void;\n    placeholder?: string | React.ReactNode;\n    dropup?: boolean;\n    pullRight?: boolean;\n    autoDropDirection?: boolean;\n    noItemMessage?: string | React.ReactNode;\n    focusedItemIndex?: number;\n    dropdownClassName?: string;\n    keyboardUsed?: boolean;\n    useActiveClass?: boolean;\n};\n\nconst BaseSelectDropdown = <T extends SelectOption>(props: BaseSelectDropdownProps<T>) => {\n    const {\n        isOpen = false,\n        isLoading = false,\n        updateDOMValues = noop,\n        onOpen = noop,\n        onSelect = noop,\n        onClose = noop,\n        options = [],\n        autoDropDirection = true,\n        dropup = false,\n        pullRight = false,\n        useActiveClass = false,\n        focusedItemIndex: externalFocusedItemIndex,\n        keyboardUsed: externalKeyboardUsed,\n        noItemMessage,\n        dropdownClassName,\n    } = props;\n\n    const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);\n    const lastScrollDirectionRef = useRef<typeof UP | typeof DOWN>(DEFAULT_SCROLL_DIRECTION);\n\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n\n    // Reset scroll position whenever the menu opens to avoid retaining old scroll offsets\n    useEffect(() => {\n        if (isOpen && dropdownMenuRef.current) {\n            dropdownMenuRef.current.scrollTop = 0;\n        }\n    }, [isOpen]);\n\n    // Keep internal focus state in sync when the dropdown opens/closes or when parent-controlled values change\n    useEffect(() => {\n        if (typeof externalFocusedItemIndex === 'number') {\n            setFocusedItemIndex(externalFocusedItemIndex);\n        }\n\n        if (typeof externalKeyboardUsed === 'boolean') {\n            setKeyboardUsed(externalKeyboardUsed);\n        }\n\n        if (!isOpen) {\n            lastScrollDirectionRef.current = DEFAULT_SCROLL_DIRECTION;\n        }\n    }, [externalFocusedItemIndex, externalKeyboardUsed, isOpen]);\n\n    useEffectOnce(() => {\n        // all available items need to be rendered in order to know their DOM value\n        // which will be used for filtering in the parent component\n        const currentItemDOMValues = updateItemDOMValues();\n        updateDOMValues(currentItemDOMValues);\n    });\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [isOpen]);\n\n    // Add or remove the \"dropup\" class from the parent Select/Multiselect component to position\n    // the dropdown element accordingly via CSS\n    useLayoutEffect(() => {\n        if (dropdownMenuRef.current) {\n            const parent = dropdownMenuRef.current.parentElement;\n            if (dropDirection.dropup) {\n                parent?.classList.add('dropup');\n            } else {\n                parent?.classList.remove('dropup');\n            }\n        }\n    }, [dropDirection, dropdownMenuRef]);\n\n    useEffect(() => {\n        if (dropdownMenuRef.current) {\n            updateDOMValues(updateItemDOMValues());\n        }\n    }, [dropdownMenuRef.current]);\n\n    // Scroll the focused item into view whenever focus changes\n    useEffect(() => {\n        if (!isOpen) {\n            return;\n        }\n\n        scrollItemIntoView(\n            lastScrollDirectionRef.current || DEFAULT_SCROLL_DIRECTION,\n            dropdownMenuRef.current,\n            getFocusedOptionNode()\n        );\n    }, [focusedItemIndex, isOpen]);\n\n    // update internal state for isOpen\n    const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);\n    if (isOpen && !previousIsOpen) {\n        onOpen(dropDirection.dropup);\n        setPreviousIsOpen(isOpen);\n    } else if (!isOpen && previousIsOpen) {\n        onClose();\n        setPreviousIsOpen(isOpen);\n    }\n\n    useKey(event => {\n        if (isOpen) {\n            switch (event.key) {\n                case 'Escape': {\n                    // close dropdown on esc\n                    onClose();\n                    break;\n                }\n                case 'Tab': {\n                    // close dropdown on tab\n                    onClose();\n                    break;\n                }\n                case 'Enter': {\n                    // select item on enter\n                    selectOptionOnEnter(event);\n                    break;\n                }\n                case 'ArrowUp': {\n                    // prevent scrolling the page when dropdown menu is open\n                    event.preventDefault();\n\n                    // select item above on arrow up key\n                    focusOption(UP);\n                    scrollItemIntoView(UP, dropdownMenuRef.current, getFocusedOptionNode());\n                    break;\n                }\n                case 'ArrowDown': {\n                    // prevent scrolling the page when dropdown menu is open\n                    event.preventDefault();\n\n                    // select item below on arrow down key\n                    focusOption(DOWN);\n                    scrollItemIntoView(DOWN, dropdownMenuRef.current, getFocusedOptionNode());\n                    break;\n                }\n                default:\n                    break;\n            }\n        }\n    });\n\n    const focusOption = (direction: typeof UP | typeof DOWN) => {\n        let nextFocusedItem = 0;\n\n        switch (direction) {\n            case UP: {\n                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;\n                break;\n            }\n            case DOWN: {\n                nextFocusedItem = focusedItemIndex === options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;\n                break;\n            }\n            default:\n                break;\n        }\n\n        lastScrollDirectionRef.current = direction;\n\n        // In case the next item index is negative, means outside the bounds of the items,\n        // reset it depending on the current direction\n        const indexLimit = direction === UP ? options.length - 1 : 0;\n\n        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);\n        setKeyboardUsed(true);\n    };\n\n    const getOptionNodes = () => {\n        const node = dropdownMenuRef.current;\n        return node?.getElementsByTagName('a') || [];\n    };\n\n    const updateItemDOMValues = () => {\n        if (dropdownMenuRef.current) {\n            const optionNodes = getOptionNodes();\n            return [...optionNodes].map(\n                item =>\n                    ({\n                        id: item.getAttribute(DATA_ATTRIBUTE_ID),\n                        text: item.textContent,\n                    }) as OptionDOMValue\n            );\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        const optionNodes = getOptionNodes();\n        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));\n    };\n\n    const selectOptionOnEnter = (event: KeyboardEvent) => {\n        event.preventDefault();\n\n        // When no filter result was found, avoid selecting anything\n        if (isEmpty(options)) {\n            return;\n        }\n\n        const match = getFocusedOptionNode();\n\n        if (match) {\n            const selectedItem = options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));\n            onSelect(selectedItem);\n        }\n    };\n\n    const handleOptionChange = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        event.preventDefault();\n\n        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;\n        const selectedItem = options.find(option => option.id === optionId);\n\n        onSelect(selectedItem);\n    };\n\n    const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);\n\n    // Don't show the dropdown, when no match are found when filtering unless there is a not found message\n    if (isEmpty(options)) {\n        return <NoItemMessage noItemMessage={noItemMessage} className={dropdownMenuClasses} />;\n    }\n\n    return (\n        <ul className={dropdownMenuClasses} ref={dropdownMenuRef} role='menu'>\n            {isLoading && (\n                <div className='display-flex justify-content-center padding-10'>\n                    <Spinner />\n                </div>\n            )}\n            {!isLoading &&\n                options.map((option, index) => {\n                    if (option.header) {\n                        return <DropdownHeader key={option.id} icon={option.icon} label={option.label} />;\n                    }\n\n                    // Show focused style only when keyboard is in use\n                    const anchorClassNames = classNames(\n                        keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '',\n                        option.disabled && 'pointer-events-none',\n                        'display-flex align-items-center gap-3'\n                    );\n\n                    const wrapperClassNames = classNames(\n                        option.disabled && 'disabled',\n                        useActiveClass && option.selected && 'active'\n                    );\n\n                    return (\n                        <li key={option.id} className={wrapperClassNames} role='listitem'>\n                            <a\n                                role='menuitem'\n                                className={anchorClassNames}\n                                data-item-id={option.id}\n                                data-item-index={index}\n                                // Note, we need to assign the click callback only when it's not disabled\n                                // otherwise the functions is still triggered\n                                onClick={option.disabled ? undefined : handleOptionChange}\n                            >\n                                <span className='selected-option-dropdown-item'>\n                                    {option.icon && <>{option.icon}</>}\n                                    {option.label}\n                                </span>\n                                <input type='hidden' value={option.id} />\n                            </a>\n                        </li>\n                    );\n                })}\n        </ul>\n    );\n};\n\nexport const filterOptions = <T extends SelectOption>(\n    itemDOMValues: OptionDOMValue[],\n    filterValue: string,\n    options: T[]\n) => {\n    const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));\n\n    // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done\n    // on the options itself as they might contain arbitrary components\n    return options.filter(option => filteredDOMValues.find(domValue => domValue.id === option.id));\n};\n\nexport default BaseSelectDropdown;\n"],"names":["DATA_ATTRIBUTE_ID","DEFAULT_FOCUSED_ITEM_INDEX","HIGHLIGHT_CLASS","DEFAULT_SCROLL_DIRECTION","DOWN","BaseSelectDropdown","props","isOpen","isLoading","updateDOMValues","noop","onOpen","onSelect","onClose","options","autoDropDirection","dropup","pullRight","useActiveClass","externalFocusedItemIndex","externalKeyboardUsed","noItemMessage","dropdownClassName","focusedItemIndex","setFocusedItemIndex","useState","keyboardUsed","setKeyboardUsed","lastScrollDirectionRef","useRef","dropdownMenuRef","useEffect","useEffectOnce","currentItemDOMValues","updateItemDOMValues","dropDirection","useDropDirection","useLayoutEffect","parent","scrollItemIntoView","getFocusedOptionNode","previousIsOpen","setPreviousIsOpen","useKey","event","selectOptionOnEnter","focusOption","UP","direction","nextFocusedItem","indexLimit","getOptionNodes","item","isEmpty","match","selectedItem","option","handleOptionChange","optionId","dropdownMenuClasses","classNames","jsx","NoItemMessage","Spinner","index","DropdownHeader","anchorClassNames","wrapperClassNames","jsxs","Fragment","filterOptions","itemDOMValues","filterValue","filteredDOMValues","domValue"],"mappings":"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"}

package/components/selects/MultiselectTogglePlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiselectTogglePlaceholder.js","sources":["../../../src/components/selects/MultiselectTogglePlaceholder.tsx"],"sourcesContent":["import type React from 'react';\n\nexport type MultiselectTogglePlaceholderProps = {\n    placeholder: string | React.ReactNode;\n};\n\nconst MultiselectTogglePlaceholder = ({ placeholder }: MultiselectTogglePlaceholderProps) => {\n    return placeholder ? <span className='placeholder'>{placeholder}</span> : <span />;\n};\n\nexport default MultiselectTogglePlaceholder;\n"],"names":["MultiselectTogglePlaceholder","placeholder"],"mappings":";AAMA,MAAMA,IAA+B,CAAC,EAAE,aAAAC,QAC7BA,sBAAe,QAAA,EAAK,WAAU,eAAe,UAAAA,EAAA,CAAY,sBAAW,QAAA,CAAA,CAAK;"}
+{"version":3,"file":"MultiselectTogglePlaceholder.js","sources":["../../../src/components/selects/MultiselectTogglePlaceholder.tsx"],"sourcesContent":["import type React from 'react';\n\nexport type MultiselectTogglePlaceholderProps = {\n    placeholder: string | React.ReactNode;\n};\n\nconst MultiselectTogglePlaceholder = ({ placeholder }: MultiselectTogglePlaceholderProps) =>\n    placeholder ? <span className='placeholder'>{placeholder}</span> : <span />;\n\nexport default MultiselectTogglePlaceholder;\n"],"names":["MultiselectTogglePlaceholder","placeholder","jsx"],"mappings":";AAMA,MAAMA,IAA+B,CAAC,EAAE,aAAAC,EAAA,MACpCA,IAAc,gBAAAC,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAD,EAAA,CAAY,sBAAW,QAAA,CAAA,CAAK;"}

package/components/selects/MultiselectToggleSelection.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
 import { isEmpty as v } from "es-toolkit/compat";
 import r from "../../utils/classNames.js";
 const y = (d) => {
@@ -15,13 +15,13 @@ const y = (d) => {
   } = d;
   if (!n || v(n))
     return null;
-  const o = (e) => m.indexOf(e.id) !== -1, u = (e, l) => {
+  const o = (e) => m.indexOf(e.id) !== -1, N = (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 a = r("margin-right-5", !o(e) && "inactiveIcon");
+      return /* @__PURE__ */ s("span", { className: a, children: e.icon }, e.id);
     }
-    return /* @__PURE__ */ a("span", { className: "selected-option", children: [
-      /* @__PURE__ */ a("span", { className: "selected-label", children: [
+    return /* @__PURE__ */ t("span", { className: "selected-option", children: [
+      /* @__PURE__ */ t("span", { className: "selected-label", children: [
         e.icon && /* @__PURE__ */ s("span", { className: "margin-right-5", children: e.icon }),
         e.label
       ] }),
@@ -29,21 +29,21 @@ const y = (d) => {
         "span",
         {
           className: "removeIcon",
-          onClick: (t) => {
-            f(t, e.id);
+          onClick: (a) => {
+            f(a, e.id);
           },
           children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-remove" })
         }
       )
     ] }, l);
-  }, N = r(
+  }, u = 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)),
+  return /* @__PURE__ */ t("span", { className: u, children: [
+    n.filter((e) => i ? !e.header : o(e)).map((e, l) => N(e, l)),
     g
   ] });
 };

package/components/selects/MultiselectToggleSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiselectToggleSelection.js","sources":["../../../src/components/selects/MultiselectToggleSelection.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\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;"}
+{"version":3,"file":"MultiselectToggleSelection.js","sources":["../../../src/components/selects/MultiselectToggleSelection.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\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) => selectedItemIds.indexOf(item.id) !== -1;\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,MAAuBV,EAAgB,QAAQU,EAAK,EAAE,MAAM,IAE9EC,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/sidebars/Sidebar.js

@@ -65,25 +65,25 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     headerClassName: de = "",
     footerClassName: ce = "",
     backdropClassName: me = "",
-    className: ue = "",
+    className: fe = "",
     children: O,
-    ...fe
-  } = 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), u = P(null), B = P(null);
+    ...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);
   b(() => {
-    u.current && S === t.MODE_FLY && u.current.parentNode?.className.includes("right") && Ee(!0);
-  }, [u.current, S]);
+    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 [Se, Ie] = i(l);
-  Se !== l && (console.log("update internal width"), g(V(l)), Ie(l)), He(() => f(), je), b(() => f(), []), b(() => {
-    o || setTimeout(() => f());
+  Se !== l && (console.log("update internal width"), g(V(l)), Ie(l)), He(() => u(), je), b(() => u(), []), b(() => {
+    o || setTimeout(() => u());
   }, [o]), b(() => {
     const e = document.querySelector(".module-content");
     e && (B.current = e);
   }, []), Be(() => {
     !re && T && a && (z(!1), W(!1));
   });
-  const f = () => {
+  const u = () => {
     const e = B.current?.clientWidth;
     if (r || y === j)
       return;
@@ -101,7 +101,7 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     g((A) => {
       const ye = F === t.RIGHT ? A + e : A - e, Y = ke(K, h, ye);
       return pe(Y === d), L && !I ? d : Y;
-    }), f();
+    }), u();
   }, Le = () => {
     document.body?.classList.add("pointer-events-none"), H(!0);
   }, Ce = () => {
@@ -111,7 +111,7 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     z(e), W(e);
   }, Fe = m(
     "Sidebar",
-    ue,
+    fe,
     o && "closed",
     a && "width-100vw sidebar-fullscreen",
     I && !a && "max-width-50vw width-50vw",
@@ -153,7 +153,7 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     /* @__PURE__ */ s(
       We.div,
       {
-        ...fe,
+        ...ue,
         initial: k && "sidebarEnter",
         animate: "sidebarVisible",
         exit: "sidebarExit",
@@ -162,7 +162,7 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
         transition: { duration: Ve },
         className: Fe,
         style: { width: he },
-        ref: u,
+        ref: f,
         children: we
       }
     ),

package/components/sidebars/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebars/Sidebar.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { toNumber } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport SidebarFooter from './SidebarFooter';\nimport SidebarBackdrop from './SidebarBackdrop';\nimport SidebarFullscreenToggle from './SidebarFullscreenToggle';\nimport SidebarCloseButton from './SidebarCloseButton';\nimport Resizer from '../resizer/Resizer';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useEsc from '../../hooks/useEsc';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 800;\nconst DEFAULT_SWITCH_MODE_BREAKPOINT = 0;\n\n// Values define the min and max width for the module-content\n// where the fluid sidebar automatically changes to \"fly\" and back.\nconst MIN_MODULE_CONTENT_WIDTH = 400;\nconst MAX_MODULE_CONTENT_WIDTH = 800;\n\nconst ANIMATION_DURATION = 0.14;\nconst RESIZE_THROTTLE = 500;\n\nconst SidebarPosition = {\n    LEFT: 'left',\n    RIGHT: 'right',\n} as const;\n\nconst SidebarMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n};\n\ntype AnimationVariantProps = {\n    fromRight: boolean;\n    closed?: boolean;\n};\n\nconst animationVariants = {\n    sidebarEnter: ({ fromRight }: AnimationVariantProps) => {\n        return {\n            x: fromRight ? '100%' : '-100%',\n            opacity: 0,\n        };\n    },\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => {\n        return {\n            x: !closed ? 0 : fromRight ? '100%' : '-100%',\n            opacity: closed ? 0 : 1,\n            display: closed ? 'none' : 'block',\n        };\n    },\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => {\n        return {\n            x: fromRight ? '100%' : '-100%',\n            opacity: 0,\n        };\n    },\n};\n\nexport type SidebarProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether the component is hidden or not.\n     *\n     * @default false\n     */\n    closed?: boolean;\n\n    /**\n     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.\n     *\n     * @default false\n     */\n    disableClose?: boolean;\n\n    /**\n     * Callback function triggered when clicking the close icon.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * The Footer content. For example a save button.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar footer.\n     */\n    footerClassName?: string;\n\n    /**\n     * Additional buttons to be rendered in the header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Shows a sidebar header border\n     */\n    showHeaderBorder?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as pixel value as inline style.\n     * Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not\n     * possible anymore due to internal width calculations. To be backwards compatible for non\n     * Typescript projects, the width is converted to a number.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width in px of the component that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width in px of the component that will take effect when resizing.\n     *\n     * @default 800\n     */\n    maxWidth?: number;\n\n    /**\n     * Opens Sidebar in fullscreen, means 100vw.\n     *\n     * @default false\n     */\n    openInFullscreen?: boolean;\n\n    /**\n     * Callback for when the fullscreen is toggled.\n     */\n    onFullScreenChange?: (newFullscreenState: boolean) => void;\n\n    /**\n     * Enables the fullscreen functionality and shows the fullscreen toggle.\n     *\n     * @default false\n     */\n    enableFullscreenToggle?: boolean;\n\n    /**\n     * Translated tooltip text for the fullscreen toggle button.\n     */\n    fullscreenToggleTooltip?: string;\n\n    /**\n     * Tells the sidebar where it is positioned. This will affect the resizing behavior\n     * respectively. Note: the position need to be set properly whe using the resize\n     * functionality to know on which side of the sidebar to attach the resizer handle.\n     *\n     * It is also relevant when the sidebar mode is set to `fly` to properly animate\n     * the sidebar into the view.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'right'`\n     * - `Sidebar.LEFT`\n     * - `Sidebar.RIGHT`\n     *\n     * @default 'left'\n     */\n    position?: ObjectValues<typeof SidebarPosition>;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     * @default false\n     */\n    resizable?: boolean;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower\n     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set\n     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint\n     * higher than 0.\n     */\n    switchModeBreakpoint?: number;\n\n    /**\n     * By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defined whether or not the UIKIT SmoothScrollbar is active.\n     *\n     * @default false\n     */\n    hasSmoothScrollbar?: boolean;\n\n    /**\n     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.\n     *\n     * @default false\n     */\n    makeBackdropVisible?: boolean;\n\n    /**\n     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from\n     * the sidebar which need to be saved first and handle clicks outside.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * Additional ref added to the Sidebar body.\n     */\n    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Content that will be displayed in the components header.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar backdrop.\n     */\n    backdropClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Sidebar = (props: PropsWithChildren<SidebarProps>) => {\n    const {\n        fly = false,\n        closed = false,\n        title = '',\n        footer,\n        resizable = false,\n        position,\n        width = DEFAULT_WIDTH,\n        minWidth = DEFAULT_MIN_WIDTH,\n        maxWidth = DEFAULT_MAX_WIDTH,\n        hasBackdrop = false,\n        hasSmoothScrollbar = false,\n        makeBackdropVisible = false,\n        enableFullscreenToggle = false,\n        fullscreenToggleTooltip,\n        openInFullscreen = false,\n        showHeaderBorder = false,\n        disableClose = false,\n        bodyRef,\n        headerButtons,\n        switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT,\n        onClose = noop,\n        onResizeEnd = noop,\n        onFullScreenChange = noop,\n        onBackdropClick = noop,\n        disableEsc = false,\n        titleClassName = '',\n        bodyClassName = '',\n        headerClassName = '',\n        footerClassName = '',\n        backdropClassName = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalWidth, setInternalWidth] = useState(toNumber(width));\n    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);\n    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);\n    const [isResize, setIsResize] = useState(false);\n    const [isSplit, setIsSplit] = useState(false);\n    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);\n\n    const sidebarRef = useRef<HTMLDivElement>(null);\n\n    // Used to keep the external reference to the module-content to avoid querying the DOM\n    // periodically on window resize\n    const moduleContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);\n\n    // Position fallback in case the position property is not defined but the sidebar mode is fly\n    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.\n    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned\n    // or not and us this value instead.\n    // Note: the position need to be set properly whe using the resize functionality to know on which\n    // side of the sidebar to attach the resizer handle.\n    useEffect(() => {\n        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {\n            const sidebarLayout = sidebarRef.current.parentNode as HTMLDivElement;\n            if (sidebarLayout?.className.includes('right')) {\n                setIsRight(true);\n            }\n        }\n    }, [sidebarRef.current, sidebarMode]);\n\n    // Keep the previous closed state in order to prevent animation when switching sidebar mode\n    const [previousClosed, setPreviousClosed] = useState(closed);\n    if (previousClosed !== closed) {\n        setPreviousClosed(closed);\n    }\n\n    // Update internal width from outside\n    const [previousWidth, setPreviousWidth] = useState(width);\n    if (previousWidth !== width) {\n        console.log('update internal width');\n        setInternalWidth(toNumber(width));\n        setPreviousWidth(width);\n    }\n\n    // Switch between mode \"fly\" and \"fluid\"\n    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);\n\n    // Initially check breakpoint after mounting the component\n    useEffect(() => adaptSidebarMode(), []);\n\n    // When Sidebar opens, check for available module-content width and\n    // switch sidebar mode to fly in case\n    useEffect(() => {\n        if (!closed) {\n            setTimeout(() => adaptSidebarMode());\n        }\n    }, [closed]);\n\n    useEffect(() => {\n        const moduleContent = document.querySelector('.module-content');\n        if (moduleContent) {\n            moduleContentRef.current = moduleContent as HTMLDivElement;\n        }\n    }, []);\n\n    // Close the fullscreen with \"esc\"\n    useEsc(() => {\n        if (!disableEsc && enableFullscreenToggle && isFullscreen) {\n            setIsFullscreen(false);\n            onFullScreenChange(false);\n        }\n    });\n\n    const adaptSidebarMode = () => {\n        const moduleContentWidth = moduleContentRef.current?.clientWidth;\n\n        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {\n            return;\n        }\n\n        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;\n        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;\n\n        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;\n\n        // switch to fly when module-content is less than x pixel and back if it is bigger\n        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLY);\n            return;\n        }\n\n        // if module-content is bigger and is initially fluid set back to initial fluid state\n        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLUID);\n            return;\n        }\n    };\n\n    const handleResize = (diff: number) => {\n        const wasSplit = isSplit;\n        const halfWindowWidth = window.innerWidth * 0.5;\n        const usedMaxWidth = maxWidth || halfWindowWidth;\n\n        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is\n        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width\n        setInternalWidth(oldWidth => {\n            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;\n            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n\n            const newIsSplit = newWidth === halfWindowWidth;\n            setIsSplit(newIsSplit);\n\n            return wasSplit && !isSplit ? halfWindowWidth : newWidth;\n        });\n\n        adaptSidebarMode();\n    };\n\n    const handleResizeStart = () => {\n        const body = document.body;\n        body?.classList.add('pointer-events-none');\n        setIsResize(true);\n    };\n\n    const handleResizeEnd = () => {\n        const body = document.body;\n        body?.classList.remove('pointer-events-none');\n        setIsResize(false);\n        onResizeEnd();\n    };\n\n    const handleFullscreenChange = () => {\n        const newFullscreenState = !isFullscreen;\n        setIsFullscreen(newFullscreenState);\n        onFullScreenChange(newFullscreenState);\n    };\n\n    const wrapperClasses = classNames(\n        'Sidebar',\n        className,\n        closed && 'closed',\n        isFullscreen && 'width-100vw sidebar-fullscreen',\n        isSplit && !isFullscreen && 'max-width-50vw width-50vw',\n        sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid'\n    );\n\n    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');\n    const titleClassNames = classNames('SidebarTitle', titleClassName);\n    const bodyClassNames = classNames('SidebarBody', bodyClassName);\n\n    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');\n\n    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };\n\n    const sidebarContent = (\n        <>\n            <div className={resizeLimitClasses} style={resizeLimitStyle} />\n            <div className='SidebarContent'>\n                <div className={headerClassNames}>\n                    <div className={titleClassNames}>{title}</div>\n                    <div className='SidebarButtons non-printable close'>\n                        {headerButtons}\n                        {enableFullscreenToggle && (\n                            <SidebarFullscreenToggle\n                                isFullscreen={isFullscreen}\n                                onClick={handleFullscreenChange}\n                                tooltip={fullscreenToggleTooltip}\n                            />\n                        )}\n                        {!disableClose && (headerButtons || enableFullscreenToggle) && (\n                            <div className='SidebarButtons-spacer' />\n                        )}\n                        {!disableClose && <SidebarCloseButton onClick={onClose} />}\n                    </div>\n                </div>\n                {hasSmoothScrollbar ? (\n                    <SmoothScrollbars slideIn className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </SmoothScrollbars>\n                ) : (\n                    <div className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </div>\n                )}\n\n                <SidebarFooter footer={footer} className={footerClassName} />\n            </div>\n            {resizable && (\n                <Resizer\n                    onResizeStart={handleResizeStart}\n                    onResize={handleResize}\n                    onResizeEnd={handleResizeEnd}\n                    direction={Resizer.HORIZONTAL}\n                    position={isRight ? Resizer.LEFT : Resizer.RIGHT}\n                />\n            )}\n        </>\n    );\n\n    return (\n        <>\n            <motion.div\n                {...remainingProps}\n                initial={previousClosed && 'sidebarEnter'}\n                animate='sidebarVisible'\n                // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted\n                exit='sidebarExit'\n                variants={animationVariants}\n                custom={{ fromRight: isRight, closed }}\n                transition={{ duration: ANIMATION_DURATION }}\n                className={wrapperClasses}\n                style={{ width: internalWidth }}\n                ref={sidebarRef}\n            >\n                {sidebarContent}\n            </motion.div>\n            {hasBackdrop && !closed && (\n                <SidebarBackdrop\n                    className={backdropClassName}\n                    makeBackdropVisible={makeBackdropVisible}\n                    onClick={onBackdropClick}\n                />\n            )}\n        </>\n    );\n};\n\nSidebar.LEFT = SidebarPosition.LEFT;\nSidebar.RIGHT = SidebarPosition.RIGHT;\n\nSidebar.MODE_FLY = SidebarMode.MODE_FLY;\nSidebar.MODE_FLUID = SidebarMode.MODE_FLUID;\n\nexport default Sidebar;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","DEFAULT_SWITCH_MODE_BREAKPOINT","MIN_MODULE_CONTENT_WIDTH","MAX_MODULE_CONTENT_WIDTH","ANIMATION_DURATION","RESIZE_THROTTLE","SidebarPosition","SidebarMode","animationVariants","fromRight","closed","Sidebar","props","fly","title","footer","resizable","position","width","minWidth","maxWidth","hasBackdrop","hasSmoothScrollbar","makeBackdropVisible","enableFullscreenToggle","fullscreenToggleTooltip","openInFullscreen","showHeaderBorder","disableClose","bodyRef","headerButtons","switchModeBreakpoint","onClose","noop","onResizeEnd","onFullScreenChange","onBackdropClick","disableEsc","titleClassName","bodyClassName","headerClassName","footerClassName","backdropClassName","className","children","remainingProps","internalWidth","setInternalWidth","useState","toNumber","sidebarMode","setSidebarMode","isFullscreen","setIsFullscreen","isResize","setIsResize","isSplit","setIsSplit","isRight","setIsRight","sidebarRef","useRef","moduleContentRef","useEffect","previousClosed","setPreviousClosed","previousWidth","setPreviousWidth","useWindowResize","adaptSidebarMode","moduleContent","useEsc","moduleContentWidth","isModuleContentTooSmall","isModuleContentBigEnough","isWindowSmallerThanBreakpoint","handleResize","diff","wasSplit","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","newWidth","getWidthInBoundaries","handleResizeStart","handleResizeEnd","handleFullscreenChange","newFullscreenState","wrapperClasses","classNames","headerClassNames","titleClassNames","bodyClassNames","resizeLimitClasses","resizeIndicatorPosition","sidebarContent","jsxs","Fragment","jsx","SidebarFullscreenToggle","SidebarCloseButton","SmoothScrollbars","SidebarFooter","Resizer","motion","SidebarBackdrop"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebars/Sidebar.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { toNumber } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport SidebarFooter from './SidebarFooter';\nimport SidebarBackdrop from './SidebarBackdrop';\nimport SidebarFullscreenToggle from './SidebarFullscreenToggle';\nimport SidebarCloseButton from './SidebarCloseButton';\nimport Resizer from '../resizer/Resizer';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useEsc from '../../hooks/useEsc';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 800;\nconst DEFAULT_SWITCH_MODE_BREAKPOINT = 0;\n\n// Values define the min and max width for the module-content\n// where the fluid sidebar automatically changes to \"fly\" and back.\nconst MIN_MODULE_CONTENT_WIDTH = 400;\nconst MAX_MODULE_CONTENT_WIDTH = 800;\n\nconst ANIMATION_DURATION = 0.14;\nconst RESIZE_THROTTLE = 500;\n\nconst SidebarPosition = {\n    LEFT: 'left',\n    RIGHT: 'right',\n} as const;\n\nconst SidebarMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n};\n\ntype AnimationVariantProps = {\n    fromRight: boolean;\n    closed?: boolean;\n};\n\nconst animationVariants = {\n    sidebarEnter: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => ({\n        x: !closed ? 0 : fromRight ? '100%' : '-100%',\n        opacity: closed ? 0 : 1,\n        display: closed ? 'none' : 'block',\n    }),\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n};\n\nexport type SidebarProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether the component is hidden or not.\n     *\n     * @default false\n     */\n    closed?: boolean;\n\n    /**\n     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.\n     *\n     * @default false\n     */\n    disableClose?: boolean;\n\n    /**\n     * Callback function triggered when clicking the close icon.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * The Footer content. For example a save button.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar footer.\n     */\n    footerClassName?: string;\n\n    /**\n     * Additional buttons to be rendered in the header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Shows a sidebar header border\n     */\n    showHeaderBorder?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as pixel value as inline style.\n     * Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not\n     * possible anymore due to internal width calculations. To be backwards compatible for non\n     * Typescript projects, the width is converted to a number.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width in px of the component that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width in px of the component that will take effect when resizing.\n     *\n     * @default 800\n     */\n    maxWidth?: number;\n\n    /**\n     * Opens Sidebar in fullscreen, means 100vw.\n     *\n     * @default false\n     */\n    openInFullscreen?: boolean;\n\n    /**\n     * Callback for when the fullscreen is toggled.\n     */\n    onFullScreenChange?: (newFullscreenState: boolean) => void;\n\n    /**\n     * Enables the fullscreen functionality and shows the fullscreen toggle.\n     *\n     * @default false\n     */\n    enableFullscreenToggle?: boolean;\n\n    /**\n     * Translated tooltip text for the fullscreen toggle button.\n     */\n    fullscreenToggleTooltip?: string;\n\n    /**\n     * Tells the sidebar where it is positioned. This will affect the resizing behavior\n     * respectively. Note: the position need to be set properly whe using the resize\n     * functionality to know on which side of the sidebar to attach the resizer handle.\n     *\n     * It is also relevant when the sidebar mode is set to `fly` to properly animate\n     * the sidebar into the view.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'right'`\n     * - `Sidebar.LEFT`\n     * - `Sidebar.RIGHT`\n     *\n     * @default 'left'\n     */\n    position?: ObjectValues<typeof SidebarPosition>;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     * @default false\n     */\n    resizable?: boolean;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower\n     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set\n     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint\n     * higher than 0.\n     */\n    switchModeBreakpoint?: number;\n\n    /**\n     * By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defined whether or not the UIKIT SmoothScrollbar is active.\n     *\n     * @default false\n     */\n    hasSmoothScrollbar?: boolean;\n\n    /**\n     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.\n     *\n     * @default false\n     */\n    makeBackdropVisible?: boolean;\n\n    /**\n     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from\n     * the sidebar which need to be saved first and handle clicks outside.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * Additional ref added to the Sidebar body.\n     */\n    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Content that will be displayed in the components header.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar backdrop.\n     */\n    backdropClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Sidebar = (props: PropsWithChildren<SidebarProps>) => {\n    const {\n        fly = false,\n        closed = false,\n        title = '',\n        footer,\n        resizable = false,\n        position,\n        width = DEFAULT_WIDTH,\n        minWidth = DEFAULT_MIN_WIDTH,\n        maxWidth = DEFAULT_MAX_WIDTH,\n        hasBackdrop = false,\n        hasSmoothScrollbar = false,\n        makeBackdropVisible = false,\n        enableFullscreenToggle = false,\n        fullscreenToggleTooltip,\n        openInFullscreen = false,\n        showHeaderBorder = false,\n        disableClose = false,\n        bodyRef,\n        headerButtons,\n        switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT,\n        onClose = noop,\n        onResizeEnd = noop,\n        onFullScreenChange = noop,\n        onBackdropClick = noop,\n        disableEsc = false,\n        titleClassName = '',\n        bodyClassName = '',\n        headerClassName = '',\n        footerClassName = '',\n        backdropClassName = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalWidth, setInternalWidth] = useState(toNumber(width));\n    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);\n    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);\n    const [isResize, setIsResize] = useState(false);\n    const [isSplit, setIsSplit] = useState(false);\n    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);\n\n    const sidebarRef = useRef<HTMLDivElement>(null);\n\n    // Used to keep the external reference to the module-content to avoid querying the DOM\n    // periodically on window resize\n    const moduleContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);\n\n    // Position fallback in case the position property is not defined but the sidebar mode is fly\n    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.\n    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned\n    // or not and us this value instead.\n    // Note: the position need to be set properly whe using the resize functionality to know on which\n    // side of the sidebar to attach the resizer handle.\n    useEffect(() => {\n        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {\n            const sidebarLayout = sidebarRef.current.parentNode as HTMLDivElement;\n            if (sidebarLayout?.className.includes('right')) {\n                setIsRight(true);\n            }\n        }\n    }, [sidebarRef.current, sidebarMode]);\n\n    // Keep the previous closed state in order to prevent animation when switching sidebar mode\n    const [previousClosed, setPreviousClosed] = useState(closed);\n    if (previousClosed !== closed) {\n        setPreviousClosed(closed);\n    }\n\n    // Update internal width from outside\n    const [previousWidth, setPreviousWidth] = useState(width);\n    if (previousWidth !== width) {\n        console.log('update internal width');\n        setInternalWidth(toNumber(width));\n        setPreviousWidth(width);\n    }\n\n    // Switch between mode \"fly\" and \"fluid\"\n    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);\n\n    // Initially check breakpoint after mounting the component\n    useEffect(() => adaptSidebarMode(), []);\n\n    // When Sidebar opens, check for available module-content width and\n    // switch sidebar mode to fly in case\n    useEffect(() => {\n        if (!closed) {\n            setTimeout(() => adaptSidebarMode());\n        }\n    }, [closed]);\n\n    useEffect(() => {\n        const moduleContent = document.querySelector('.module-content');\n        if (moduleContent) {\n            moduleContentRef.current = moduleContent as HTMLDivElement;\n        }\n    }, []);\n\n    // Close the fullscreen with \"esc\"\n    useEsc(() => {\n        if (!disableEsc && enableFullscreenToggle && isFullscreen) {\n            setIsFullscreen(false);\n            onFullScreenChange(false);\n        }\n    });\n\n    const adaptSidebarMode = () => {\n        const moduleContentWidth = moduleContentRef.current?.clientWidth;\n\n        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {\n            return;\n        }\n\n        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;\n        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;\n\n        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;\n\n        // switch to fly when module-content is less than x pixel and back if it is bigger\n        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLY);\n            return;\n        }\n\n        // if module-content is bigger and is initially fluid set back to initial fluid state\n        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLUID);\n            return;\n        }\n    };\n\n    const handleResize = (diff: number) => {\n        const wasSplit = isSplit;\n        const halfWindowWidth = window.innerWidth * 0.5;\n        const usedMaxWidth = maxWidth || halfWindowWidth;\n\n        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is\n        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width\n        setInternalWidth(oldWidth => {\n            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;\n            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n\n            const newIsSplit = newWidth === halfWindowWidth;\n            setIsSplit(newIsSplit);\n\n            return wasSplit && !isSplit ? halfWindowWidth : newWidth;\n        });\n\n        adaptSidebarMode();\n    };\n\n    const handleResizeStart = () => {\n        const body = document.body;\n        body?.classList.add('pointer-events-none');\n        setIsResize(true);\n    };\n\n    const handleResizeEnd = () => {\n        const body = document.body;\n        body?.classList.remove('pointer-events-none');\n        setIsResize(false);\n        onResizeEnd();\n    };\n\n    const handleFullscreenChange = () => {\n        const newFullscreenState = !isFullscreen;\n        setIsFullscreen(newFullscreenState);\n        onFullScreenChange(newFullscreenState);\n    };\n\n    const wrapperClasses = classNames(\n        'Sidebar',\n        className,\n        closed && 'closed',\n        isFullscreen && 'width-100vw sidebar-fullscreen',\n        isSplit && !isFullscreen && 'max-width-50vw width-50vw',\n        sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid'\n    );\n\n    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');\n    const titleClassNames = classNames('SidebarTitle', titleClassName);\n    const bodyClassNames = classNames('SidebarBody', bodyClassName);\n\n    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');\n\n    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };\n\n    const sidebarContent = (\n        <>\n            <div className={resizeLimitClasses} style={resizeLimitStyle} />\n            <div className='SidebarContent'>\n                <div className={headerClassNames}>\n                    <div className={titleClassNames}>{title}</div>\n                    <div className='SidebarButtons non-printable close'>\n                        {headerButtons}\n                        {enableFullscreenToggle && (\n                            <SidebarFullscreenToggle\n                                isFullscreen={isFullscreen}\n                                onClick={handleFullscreenChange}\n                                tooltip={fullscreenToggleTooltip}\n                            />\n                        )}\n                        {!disableClose && (headerButtons || enableFullscreenToggle) && (\n                            <div className='SidebarButtons-spacer' />\n                        )}\n                        {!disableClose && <SidebarCloseButton onClick={onClose} />}\n                    </div>\n                </div>\n                {hasSmoothScrollbar ? (\n                    <SmoothScrollbars slideIn className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </SmoothScrollbars>\n                ) : (\n                    <div className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </div>\n                )}\n\n                <SidebarFooter footer={footer} className={footerClassName} />\n            </div>\n            {resizable && (\n                <Resizer\n                    onResizeStart={handleResizeStart}\n                    onResize={handleResize}\n                    onResizeEnd={handleResizeEnd}\n                    direction={Resizer.HORIZONTAL}\n                    position={isRight ? Resizer.LEFT : Resizer.RIGHT}\n                />\n            )}\n        </>\n    );\n\n    return (\n        <>\n            <motion.div\n                {...remainingProps}\n                initial={previousClosed && 'sidebarEnter'}\n                animate='sidebarVisible'\n                // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted\n                exit='sidebarExit'\n                variants={animationVariants}\n                custom={{ fromRight: isRight, closed }}\n                transition={{ duration: ANIMATION_DURATION }}\n                className={wrapperClasses}\n                style={{ width: internalWidth }}\n                ref={sidebarRef}\n            >\n                {sidebarContent}\n            </motion.div>\n            {hasBackdrop && !closed && (\n                <SidebarBackdrop\n                    className={backdropClassName}\n                    makeBackdropVisible={makeBackdropVisible}\n                    onClick={onBackdropClick}\n                />\n            )}\n        </>\n    );\n};\n\nSidebar.LEFT = SidebarPosition.LEFT;\nSidebar.RIGHT = SidebarPosition.RIGHT;\n\nSidebar.MODE_FLY = SidebarMode.MODE_FLY;\nSidebar.MODE_FLUID = SidebarMode.MODE_FLUID;\n\nexport default Sidebar;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","DEFAULT_SWITCH_MODE_BREAKPOINT","MIN_MODULE_CONTENT_WIDTH","MAX_MODULE_CONTENT_WIDTH","ANIMATION_DURATION","RESIZE_THROTTLE","SidebarPosition","SidebarMode","animationVariants","fromRight","closed","Sidebar","props","fly","title","footer","resizable","position","width","minWidth","maxWidth","hasBackdrop","hasSmoothScrollbar","makeBackdropVisible","enableFullscreenToggle","fullscreenToggleTooltip","openInFullscreen","showHeaderBorder","disableClose","bodyRef","headerButtons","switchModeBreakpoint","onClose","noop","onResizeEnd","onFullScreenChange","onBackdropClick","disableEsc","titleClassName","bodyClassName","headerClassName","footerClassName","backdropClassName","className","children","remainingProps","internalWidth","setInternalWidth","useState","toNumber","sidebarMode","setSidebarMode","isFullscreen","setIsFullscreen","isResize","setIsResize","isSplit","setIsSplit","isRight","setIsRight","sidebarRef","useRef","moduleContentRef","useEffect","previousClosed","setPreviousClosed","previousWidth","setPreviousWidth","useWindowResize","adaptSidebarMode","moduleContent","useEsc","moduleContentWidth","isModuleContentTooSmall","isModuleContentBigEnough","isWindowSmallerThanBreakpoint","handleResize","diff","wasSplit","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","newWidth","getWidthInBoundaries","handleResizeStart","handleResizeEnd","handleFullscreenChange","newFullscreenState","wrapperClasses","classNames","headerClassNames","titleClassNames","bodyClassNames","resizeLimitClasses","resizeIndicatorPosition","sidebarContent","jsxs","Fragment","jsx","SidebarFullscreenToggle","SidebarCloseButton","SmoothScrollbars","SidebarFooter","Resizer","motion","SidebarBackdrop"],"mappings":"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"}

package/components/sidebars/SidebarCloseButton.js

@@ -1,8 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
 import { noop as e } from "es-toolkit/function";
 import t from "../button/Button.js";
-const a = ({ onClick: r = e }) => /* @__PURE__ */ o(t, { bsStyle: t.MUTED, iconOnly: !0, onClick: r, "data-testid": "sidebarCloseButton", children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-remove" }) });
+const l = ({ onClick: r = e }) => /* @__PURE__ */ o(t, { bsStyle: t.MUTED, iconOnly: !0, onClick: r, "data-testid": "sidebarCloseButton", children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-remove" }) });
 export {
-  a as default
+  l as default
 };
 //# sourceMappingURL=SidebarCloseButton.js.map

package/components/sidebars/SidebarCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarCloseButton.js","sources":["../../../src/components/sidebars/SidebarCloseButton.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\n\nexport type SidebarCloseButtonProps = {\n    onClick?: VoidFunction;\n};\n\nconst SidebarCloseButton = ({ onClick = noop }: SidebarCloseButtonProps) => {\n    return (\n        <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarCloseButton'>\n            <span className='rioglyph rioglyph-remove' />\n        </Button>\n    );\n};\n\nexport default SidebarCloseButton;\n"],"names":["SidebarCloseButton","onClick","noop","jsx","Button"],"mappings":";;;AAQA,MAAMA,IAAqB,CAAC,EAAE,SAAAC,IAAUC,QAEhC,gBAAAC,EAACC,GAAA,EAAO,SAASA,EAAO,OAAO,UAAQ,IAAC,SAAAH,GAAkB,eAAY,sBAClE,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,4BAA2B,GAC/C;"}
+{"version":3,"file":"SidebarCloseButton.js","sources":["../../../src/components/sidebars/SidebarCloseButton.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\n\nexport type SidebarCloseButtonProps = {\n    onClick?: VoidFunction;\n};\n\nconst SidebarCloseButton = ({ onClick = noop }: SidebarCloseButtonProps) => (\n    <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarCloseButton'>\n        <span className='rioglyph rioglyph-remove' />\n    </Button>\n);\n\nexport default SidebarCloseButton;\n"],"names":["SidebarCloseButton","onClick","noop","jsx","Button"],"mappings":";;;AAQA,MAAMA,IAAqB,CAAC,EAAE,SAAAC,IAAUC,QACpC,gBAAAC,EAACC,KAAO,SAASA,EAAO,OAAO,UAAQ,IAAC,SAAAH,GAAkB,eAAY,sBAClE,4BAAC,QAAA,EAAK,WAAU,4BAA2B,EAAA,CAC/C;"}

package/components/smoothScrollbars/SmoothScrollbars.d.ts

@@ -1,5 +1,6 @@
-import { default as React } from 'react';
+import { default as React, AriaRole } from 'react';
 export type SmoothScrollbarsProps = {
+    role?: AriaRole;
     /**
      * Defines whether the scrollbars should slide in on hover.
      *
@@ -39,13 +40,13 @@ export type SmoothScrollbarsProps = {
      *
      * @default 0
      */
-    autoHeightMin?: number;
+    autoHeightMin?: number | string;
     /**
      * Maximum height when auto-height is enabled.
      *
      * @default 200
      */
-    autoHeightMax?: number;
+    autoHeightMax?: number | string;
     /**
      * Scroll callback, forwarded to the underlying scrollbars instance.
      */

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -6,10 +6,10 @@ import s from "../../utils/classNames.js";
 const E = 100, P = R(
   (i, m) => {
     const {
-      slideIn: u = !1,
+      slideIn: b = !1,
       largeTrack: l = !1,
-      trackOffset: c = !1,
-      className: b = "",
+      trackOffset: t = !1,
+      className: u = "",
       onScroll: d = O,
       tagName: f = "div",
       autoHeight: h = !1,
@@ -18,28 +18,28 @@ const E = 100, P = R(
       children: v,
       style: y,
       ...k
-    } = i, a = n(null), t = n(null);
-    S(m, () => a.current), V(() => {
-      if (!t.current || !a.current)
+    } = i, a = n(null), c = n(null);
+    S(m, () => a.current, []), V(() => {
+      if (!c.current || !a.current)
         return;
       const r = x(() => {
         a.current && a.current.update();
       }, E), o = new ResizeObserver(r);
-      return o.observe(t.current), () => {
+      return o.observe(c.current), () => {
         o.disconnect(), r.cancel();
       };
     }, []);
-    const T = s(b, u && "scrollbar-fly-in", "smooth-scrollbar-wrapper"), z = s(
+    const T = s(u, b && "scrollbar-fly-in", "smooth-scrollbar-wrapper"), z = s(
       "scrollbar-track-vertical",
       l && "scrollbar-track-size-large",
-      c && "scrollbar-track-offset"
+      t && "scrollbar-track-offset"
     ), g = s(
       "scrollbar-thumb-vertical",
       l && "scrollbar-thumb-size-large"
     ), H = s(
       "scrollbar-track-horizontal",
       l && "scrollbar-track-size-large",
-      c && "scrollbar-track-offset"
+      t && "scrollbar-track-offset"
     ), w = s(
       "scrollbar-thumb-horizontal",
       l && "scrollbar-thumb-size-large"
@@ -61,7 +61,7 @@ const E = 100, P = R(
         renderThumbVertical: (r) => /* @__PURE__ */ e("div", { ...r, className: g }),
         renderTrackHorizontal: (r) => /* @__PURE__ */ e("div", { ...r, className: H }),
         renderThumbHorizontal: (r) => /* @__PURE__ */ e("div", { ...r, className: w }),
-        children: /* @__PURE__ */ e("div", { className: "scrollbar-content-wrapper", ref: t, children: v })
+        children: /* @__PURE__ */ e("div", { className: "scrollbar-content-wrapper", ref: c, children: v })
       }
     );
   }