@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

package/components/applicationHeader/NavItems.js

@@ -5,10 +5,10 @@ import q from "../../utils/classNames.js";
 import z from "../../hooks/useClickOutside.js";
 import B from "./CollapsedNavItem.js";
 const $ = 50, F = 15, Q = (C) => {
-  const { navItems: r = [], actionBarItems: d = [], containerWidth: k } = C, [n, a] = m(!1), [u, W] = m([]), [y, g] = m([]), w = z(() => a(!1)), f = b(null), t = b(!0);
+  const { navItems: n = [], actionBarItems: d = [], containerWidth: k } = C, [o, a] = m(!1), [u, W] = m([]), [y, g] = m([]), w = z(() => a(!1)), f = b(null), t = b(!0);
   L(() => {
     t.current = !0;
-  }, [r, d, k]), V(() => {
+  }, [n, d, k]), V(() => {
     t.current && E();
   });
   const D = (e) => e.scrollWidth - $ - F, E = () => {
@@ -18,22 +18,22 @@ const $ = 50, F = 15, Q = (C) => {
     const s = [...e.children || []], v = D(e);
     if (v < 0)
       return;
-    let o = 0;
+    let r = 0;
     const I = [], N = [];
     s.forEach((l) => {
       if (!l.className)
         return;
-      o = o + l.scrollWidth;
-      const c = r.find((A) => {
+      r = r + l.scrollWidth;
+      const c = n.find((A) => {
         const h = l.attributes.getNamedItem("data-nav-item-key");
         return h && A.key === h.value;
       });
-      c && (v > o ? I.push(c) : N.push(c));
+      c && (v > r ? I.push(c) : N.push(c));
     }), t.current = !1, g(I), W(N);
   }, O = () => {
-    a(!n);
+    a(!o);
   }, S = () => {
-    n && a(!1);
+    o && a(!1);
   }, p = (e, s) => /* @__PURE__ */ i(
     "li",
     {
@@ -48,7 +48,7 @@ const $ = 50, F = 15, Q = (C) => {
       B,
       {
         ref: w,
-        show: n,
+        show: o,
         navItems: u,
         actionBarItems: d,
         onDropdownClick: O,
@@ -56,7 +56,7 @@ const $ = 50, F = 15, Q = (C) => {
       },
       "CollapsedNavItem"
     )
-  ] : r.map((e) => p(e, t.current)), R = q("SubmoduleNavigation", "nav");
+  ] : n.map((e) => p(e, t.current)), R = q("SubmoduleNavigation", "nav");
   return /* @__PURE__ */ i("ul", { className: R, ref: f, children: x() });
 };
 export {

package/components/applicationHeader/NavItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItems.js","sources":["../../../src/components/applicationHeader/NavItems.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport CollapsedNavItem from './CollapsedNavItem';\nimport type { ModulePropType } from './ApplicationHeader';\n\nconst collapsedDropdownWidth = 50;\nconst paddingLeft = 15;\n\nexport type NavItemsProps = {\n    navItems?: ModulePropType[];\n    containerWidth: number;\n    actionBarItems?: React.ReactNode[];\n};\n\nexport const NavItems = (props: NavItemsProps) => {\n    const { navItems: externalNavItems = [], actionBarItems = [], containerWidth } = props;\n\n    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);\n    const [collapsedNavItems, setCollapsedNavItems] = useState<ModulePropType[]>([]);\n    const [visibleNavItems, setVisibleNavItems] = useState<ModulePropType[]>([]);\n\n    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));\n\n    const navigationRef = useRef(null);\n    const isOffscreen = useRef(true);\n\n    // console.log({ containerWidth });\n\n    // Before any new changes are applied\n    useEffect(() => {\n        // After the component received new props, every nav item has to be rendered offscreen\n        // again without collapsing them into the dropdown to measure its width\n        isOffscreen.current = true;\n    }, [externalNavItems, actionBarItems, containerWidth]);\n\n    // After the component has been rendered\n    useLayoutEffect(() => {\n        // After every nav item was rendered offscreen again we need to recalculate the width\n        // of the items again and render the result with possible collapsible dropdown.\n        if (isOffscreen.current) {\n            computeNavItems();\n        }\n    });\n\n    const getAvailableWidth = (element: HTMLElement) => {\n        // Get relevant elements\n        // const parent = element.parentNode;\n\n        // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));\n        // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;\n\n        // Since the collapsed dropdown has not been rendered yet,\n        // use the fixed with for it to compute available width\n        const availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;\n        return availableWidth;\n    };\n\n    const computeNavItems = () => {\n        const element: HTMLElement | null = navigationRef.current;\n\n        if (!element) {\n            return;\n        }\n\n        const navItems = [...((element as HTMLElement).children || [])];\n\n        const availableWidth = getAvailableWidth(element);\n\n        if (availableWidth < 0) {\n            return;\n        }\n\n        // Iterate over all rendered navItems to figure out their widths in order to figure out\n        // which navItems need to be rendered in the collapsed dropdown\n        let requiredNavItemsSize = 0;\n\n        const updatedVisibleItems: ModulePropType[] = [];\n        const updatedCollapsedItems: ModulePropType[] = [];\n\n        navItems.forEach(item => {\n            if (!item.className) {\n                return;\n            }\n\n            // Calculate the remaining width\n            requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;\n\n            // console.log({ requiredNavItemsSize });\n\n            // Use the navItems.key to find corresponding navItems for each DOM node\n            const matchedNavItem = externalNavItems.find(navItem => {\n                const dataAttr = item.attributes.getNamedItem('data-nav-item-key');\n                return dataAttr && navItem.key === dataAttr.value;\n            });\n\n            if (!matchedNavItem) {\n                return;\n            }\n\n            // Add navItems to the visible group until the available with exceeds.\n            // All other navItems will be added to the collapsed group\n            if (availableWidth > requiredNavItemsSize) {\n                updatedVisibleItems.push(matchedNavItem);\n            } else {\n                updatedCollapsedItems.push(matchedNavItem);\n            }\n        });\n\n        // Set the state to render the navItems again\n        isOffscreen.current = false;\n\n        setVisibleNavItems(updatedVisibleItems);\n        setCollapsedNavItems(updatedCollapsedItems);\n    };\n\n    const handleCollapsedDropdown = () => {\n        // When the dropdown is open, set showCollapsedNavItems to false so all submodule items\n        // are rendered and their size can be computed\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        } else {\n            // When the dropdown is closed, just set the flag to open is enough\n            setIsCollapsedNavItemOpen(true);\n        }\n    };\n\n    const handleCollapsedNavItemSelected = () => {\n        // Close collapsed dropdown on item select\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        }\n    };\n\n    const renderNavItem = (navItem: ModulePropType, isItemOffscreen: boolean) => {\n        return (\n            <li\n                key={navItem.key}\n                className={`submodule ${isItemOffscreen ? 'offscreen' : ''}`}\n                data-nav-item-key={navItem.key}\n            >\n                {navItem.route}\n            </li>\n        );\n    };\n\n    const renderNavItems = () => {\n        if (!isOffscreen.current && !isEmpty(collapsedNavItems)) {\n            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n\n            return [\n                ...visibleItems,\n                <CollapsedNavItem\n                    key='CollapsedNavItem'\n                    ref={collapsedDropdownRef}\n                    show={isCollapsedNavItemOpen}\n                    navItems={collapsedNavItems}\n                    actionBarItems={actionBarItems}\n                    onDropdownClick={handleCollapsedDropdown}\n                    onItemClick={handleCollapsedNavItemSelected}\n                />,\n            ];\n        }\n\n        return externalNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n    };\n\n    // As all navItems need to be added to the DOM first in order to get their real size\n    // the computation whether a navItem need to be shown under the collapsed dropdown or not\n    // needs to be done after the component did mount to the DOM.\n\n    const classes = classNames('SubmoduleNavigation', 'nav');\n\n    return (\n        <ul className={classes} ref={navigationRef}>\n            {renderNavItems()}\n        </ul>\n    );\n};\n\nexport default NavItems;\n"],"names":["collapsedDropdownWidth","paddingLeft","NavItems","props","externalNavItems","actionBarItems","containerWidth","isCollapsedNavItemOpen","setIsCollapsedNavItemOpen","useState","collapsedNavItems","setCollapsedNavItems","visibleNavItems","setVisibleNavItems","collapsedDropdownRef","useClickOutside","navigationRef","useRef","isOffscreen","useEffect","useLayoutEffect","computeNavItems","getAvailableWidth","element","navItems","availableWidth","requiredNavItemsSize","updatedVisibleItems","updatedCollapsedItems","item","matchedNavItem","navItem","dataAttr","handleCollapsedDropdown","handleCollapsedNavItemSelected","renderNavItem","isItemOffscreen","jsx","renderNavItems","isEmpty","CollapsedNavItem","classes","classNames"],"mappings":";;;;;;AASA,MAAMA,IAAyB,IACzBC,IAAc,IAQPC,IAAW,CAACC,MAAyB;AAC9C,QAAM,EAAE,UAAUC,IAAmB,CAAA,GAAI,gBAAAC,IAAiB,CAAA,GAAI,gBAAAC,EAAA,IAAmBH,GAE3E,CAACI,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GACpE,CAACC,GAAmBC,CAAoB,IAAIF,EAA2B,CAAA,CAAE,GACzE,CAACG,GAAiBC,CAAkB,IAAIJ,EAA2B,CAAA,CAAE,GAErEK,IAAuBC,EAAgB,MAAMP,EAA0B,EAAK,CAAC,GAE7EQ,IAAgBC,EAAO,IAAI,GAC3BC,IAAcD,EAAO,EAAI;AAK/B,EAAAE,EAAU,MAAM;AAGZ,IAAAD,EAAY,UAAU;AAAA,EAC1B,GAAG,CAACd,GAAkBC,GAAgBC,CAAc,CAAC,GAGrDc,EAAgB,MAAM;AAGlB,IAAIF,EAAY,WACZG,EAAA;AAAA,EAER,CAAC;AAED,QAAMC,IAAoB,CAACC,MASAA,EAAQ,cAAcvB,IAAyBC,GAIpEoB,IAAkB,MAAM;AAC1B,UAAME,IAA8BP,EAAc;AAElD,QAAI,CAACO;AACD;AAGJ,UAAMC,IAAW,CAAC,GAAKD,EAAwB,YAAY,CAAA,CAAG,GAExDE,IAAiBH,EAAkBC,CAAO;AAEhD,QAAIE,IAAiB;AACjB;AAKJ,QAAIC,IAAuB;AAE3B,UAAMC,IAAwC,CAAA,GACxCC,IAA0C,CAAA;AAEhD,IAAAJ,EAAS,QAAQ,CAAAK,MAAQ;AACrB,UAAI,CAACA,EAAK;AACN;AAIJ,MAAAH,IAAuBA,IAAuBG,EAAK;AAKnD,YAAMC,IAAiB1B,EAAiB,KAAK,CAAA2B,MAAW;AACpD,cAAMC,IAAWH,EAAK,WAAW,aAAa,mBAAmB;AACjE,eAAOG,KAAYD,EAAQ,QAAQC,EAAS;AAAA,MAChD,CAAC;AAED,MAAKF,MAMDL,IAAiBC,IACjBC,EAAoB,KAAKG,CAAc,IAEvCF,EAAsB,KAAKE,CAAc;AAAA,IAEjD,CAAC,GAGDZ,EAAY,UAAU,IAEtBL,EAAmBc,CAAmB,GACtChB,EAAqBiB,CAAqB;AAAA,EAC9C,GAEMK,IAA0B,MAAM;AAGlC,IACIzB,EADA,CAAAD,CAC+B;AAAA,EAKvC,GAEM2B,IAAiC,MAAM;AAEzC,IAAI3B,KACAC,EAA0B,EAAK;AAAA,EAEvC,GAEM2B,IAAgB,CAACJ,GAAyBK,MAExC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAW,aAAaD,IAAkB,cAAc,EAAE;AAAA,MAC1D,qBAAmBL,EAAQ;AAAA,MAE1B,UAAAA,EAAQ;AAAA,IAAA;AAAA,IAJJA,EAAQ;AAAA,EAAA,GASnBO,IAAiB,MACf,CAACpB,EAAY,WAAW,CAACqB,EAAQ7B,CAAiB,IAG3C;AAAA,IACH,GAHiBE,EAAgB,IAAI,CAAAmB,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC;AAAA,IAI3F,gBAAAmB;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,KAAK1B;AAAA,QACL,MAAMP;AAAA,QACN,UAAUG;AAAA,QACV,gBAAAL;AAAA,QACA,iBAAiB4B;AAAA,QACjB,aAAaC;AAAA,MAAA;AAAA,MANT;AAAA,IAAA;AAAA,EAOR,IAID9B,EAAiB,IAAI,CAAA2B,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC,GAOhFuB,IAAUC,EAAW,uBAAuB,KAAK;AAEvD,2BACK,MAAA,EAAG,WAAWD,GAAS,KAAKzB,GACxB,eACL;AAER;"}
+{"version":3,"file":"NavItems.js","sources":["../../../src/components/applicationHeader/NavItems.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport CollapsedNavItem from './CollapsedNavItem';\nimport type { ModulePropType } from './ApplicationHeader';\n\nconst collapsedDropdownWidth = 50;\nconst paddingLeft = 15;\n\nexport type NavItemsProps = {\n    navItems?: ModulePropType[];\n    containerWidth: number;\n    actionBarItems?: React.ReactNode[];\n};\n\nexport const NavItems = (props: NavItemsProps) => {\n    const { navItems: externalNavItems = [], actionBarItems = [], containerWidth } = props;\n\n    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);\n    const [collapsedNavItems, setCollapsedNavItems] = useState<ModulePropType[]>([]);\n    const [visibleNavItems, setVisibleNavItems] = useState<ModulePropType[]>([]);\n\n    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));\n\n    const navigationRef = useRef(null);\n    const isOffscreen = useRef(true);\n\n    // console.log({ containerWidth });\n\n    // Before any new changes are applied\n    useEffect(() => {\n        // After the component received new props, every nav item has to be rendered offscreen\n        // again without collapsing them into the dropdown to measure its width\n        isOffscreen.current = true;\n    }, [externalNavItems, actionBarItems, containerWidth]);\n\n    // After the component has been rendered\n    useLayoutEffect(() => {\n        // After every nav item was rendered offscreen again we need to recalculate the width\n        // of the items again and render the result with possible collapsible dropdown.\n        if (isOffscreen.current) {\n            computeNavItems();\n        }\n    });\n\n    const getAvailableWidth = (element: HTMLElement) => {\n        // Get relevant elements\n        // const parent = element.parentNode;\n\n        // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));\n        // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;\n\n        // Since the collapsed dropdown has not been rendered yet,\n        // use the fixed with for it to compute available width\n        const availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;\n        return availableWidth;\n    };\n\n    const computeNavItems = () => {\n        const element: HTMLElement | null = navigationRef.current;\n\n        if (!element) {\n            return;\n        }\n\n        const navItems = [...((element as HTMLElement).children || [])];\n\n        const availableWidth = getAvailableWidth(element);\n\n        if (availableWidth < 0) {\n            return;\n        }\n\n        // Iterate over all rendered navItems to figure out their widths in order to figure out\n        // which navItems need to be rendered in the collapsed dropdown\n        let requiredNavItemsSize = 0;\n\n        const updatedVisibleItems: ModulePropType[] = [];\n        const updatedCollapsedItems: ModulePropType[] = [];\n\n        navItems.forEach(item => {\n            if (!item.className) {\n                return;\n            }\n\n            // Calculate the remaining width\n            requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;\n\n            // console.log({ requiredNavItemsSize });\n\n            // Use the navItems.key to find corresponding navItems for each DOM node\n            const matchedNavItem = externalNavItems.find(navItem => {\n                const dataAttr = item.attributes.getNamedItem('data-nav-item-key');\n                return dataAttr && navItem.key === dataAttr.value;\n            });\n\n            if (!matchedNavItem) {\n                return;\n            }\n\n            // Add navItems to the visible group until the available with exceeds.\n            // All other navItems will be added to the collapsed group\n            if (availableWidth > requiredNavItemsSize) {\n                updatedVisibleItems.push(matchedNavItem);\n            } else {\n                updatedCollapsedItems.push(matchedNavItem);\n            }\n        });\n\n        // Set the state to render the navItems again\n        isOffscreen.current = false;\n\n        setVisibleNavItems(updatedVisibleItems);\n        setCollapsedNavItems(updatedCollapsedItems);\n    };\n\n    const handleCollapsedDropdown = () => {\n        // When the dropdown is open, set showCollapsedNavItems to false so all submodule items\n        // are rendered and their size can be computed\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        } else {\n            // When the dropdown is closed, just set the flag to open is enough\n            setIsCollapsedNavItemOpen(true);\n        }\n    };\n\n    const handleCollapsedNavItemSelected = () => {\n        // Close collapsed dropdown on item select\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        }\n    };\n\n    const renderNavItem = (navItem: ModulePropType, isItemOffscreen: boolean) => (\n        <li\n            key={navItem.key}\n            className={`submodule ${isItemOffscreen ? 'offscreen' : ''}`}\n            data-nav-item-key={navItem.key}\n        >\n            {navItem.route}\n        </li>\n    );\n\n    const renderNavItems = () => {\n        if (!isOffscreen.current && !isEmpty(collapsedNavItems)) {\n            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n\n            return [\n                ...visibleItems,\n                <CollapsedNavItem\n                    key='CollapsedNavItem'\n                    ref={collapsedDropdownRef}\n                    show={isCollapsedNavItemOpen}\n                    navItems={collapsedNavItems}\n                    actionBarItems={actionBarItems}\n                    onDropdownClick={handleCollapsedDropdown}\n                    onItemClick={handleCollapsedNavItemSelected}\n                />,\n            ];\n        }\n\n        return externalNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n    };\n\n    // As all navItems need to be added to the DOM first in order to get their real size\n    // the computation whether a navItem need to be shown under the collapsed dropdown or not\n    // needs to be done after the component did mount to the DOM.\n\n    const classes = classNames('SubmoduleNavigation', 'nav');\n\n    return (\n        <ul className={classes} ref={navigationRef}>\n            {renderNavItems()}\n        </ul>\n    );\n};\n\nexport default NavItems;\n"],"names":["collapsedDropdownWidth","paddingLeft","NavItems","props","externalNavItems","actionBarItems","containerWidth","isCollapsedNavItemOpen","setIsCollapsedNavItemOpen","useState","collapsedNavItems","setCollapsedNavItems","visibleNavItems","setVisibleNavItems","collapsedDropdownRef","useClickOutside","navigationRef","useRef","isOffscreen","useEffect","useLayoutEffect","computeNavItems","getAvailableWidth","element","navItems","availableWidth","requiredNavItemsSize","updatedVisibleItems","updatedCollapsedItems","item","matchedNavItem","navItem","dataAttr","handleCollapsedDropdown","handleCollapsedNavItemSelected","renderNavItem","isItemOffscreen","jsx","renderNavItems","isEmpty","CollapsedNavItem","classes","classNames"],"mappings":";;;;;;AASA,MAAMA,IAAyB,IACzBC,IAAc,IAQPC,IAAW,CAACC,MAAyB;AAC9C,QAAM,EAAE,UAAUC,IAAmB,CAAA,GAAI,gBAAAC,IAAiB,CAAA,GAAI,gBAAAC,EAAA,IAAmBH,GAE3E,CAACI,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GACpE,CAACC,GAAmBC,CAAoB,IAAIF,EAA2B,CAAA,CAAE,GACzE,CAACG,GAAiBC,CAAkB,IAAIJ,EAA2B,CAAA,CAAE,GAErEK,IAAuBC,EAAgB,MAAMP,EAA0B,EAAK,CAAC,GAE7EQ,IAAgBC,EAAO,IAAI,GAC3BC,IAAcD,EAAO,EAAI;AAK/B,EAAAE,EAAU,MAAM;AAGZ,IAAAD,EAAY,UAAU;AAAA,EAC1B,GAAG,CAACd,GAAkBC,GAAgBC,CAAc,CAAC,GAGrDc,EAAgB,MAAM;AAGlB,IAAIF,EAAY,WACZG,EAAA;AAAA,EAER,CAAC;AAED,QAAMC,IAAoB,CAACC,MASAA,EAAQ,cAAcvB,IAAyBC,GAIpEoB,IAAkB,MAAM;AAC1B,UAAME,IAA8BP,EAAc;AAElD,QAAI,CAACO;AACD;AAGJ,UAAMC,IAAW,CAAC,GAAKD,EAAwB,YAAY,CAAA,CAAG,GAExDE,IAAiBH,EAAkBC,CAAO;AAEhD,QAAIE,IAAiB;AACjB;AAKJ,QAAIC,IAAuB;AAE3B,UAAMC,IAAwC,CAAA,GACxCC,IAA0C,CAAA;AAEhD,IAAAJ,EAAS,QAAQ,CAAAK,MAAQ;AACrB,UAAI,CAACA,EAAK;AACN;AAIJ,MAAAH,IAAuBA,IAAuBG,EAAK;AAKnD,YAAMC,IAAiB1B,EAAiB,KAAK,CAAA2B,MAAW;AACpD,cAAMC,IAAWH,EAAK,WAAW,aAAa,mBAAmB;AACjE,eAAOG,KAAYD,EAAQ,QAAQC,EAAS;AAAA,MAChD,CAAC;AAED,MAAKF,MAMDL,IAAiBC,IACjBC,EAAoB,KAAKG,CAAc,IAEvCF,EAAsB,KAAKE,CAAc;AAAA,IAEjD,CAAC,GAGDZ,EAAY,UAAU,IAEtBL,EAAmBc,CAAmB,GACtChB,EAAqBiB,CAAqB;AAAA,EAC9C,GAEMK,IAA0B,MAAM;AAGlC,IACIzB,EADA,CAAAD,CAC+B;AAAA,EAKvC,GAEM2B,IAAiC,MAAM;AAEzC,IAAI3B,KACAC,EAA0B,EAAK;AAAA,EAEvC,GAEM2B,IAAgB,CAACJ,GAAyBK,MAC5C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAW,aAAaD,IAAkB,cAAc,EAAE;AAAA,MAC1D,qBAAmBL,EAAQ;AAAA,MAE1B,UAAAA,EAAQ;AAAA,IAAA;AAAA,IAJJA,EAAQ;AAAA,EAAA,GAQfO,IAAiB,MACf,CAACpB,EAAY,WAAW,CAACqB,EAAQ7B,CAAiB,IAG3C;AAAA,IACH,GAHiBE,EAAgB,IAAI,CAAAmB,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC;AAAA,IAI3F,gBAAAmB;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,KAAK1B;AAAA,QACL,MAAMP;AAAA,QACN,UAAUG;AAAA,QACV,gBAAAL;AAAA,QACA,iBAAiB4B;AAAA,QACjB,aAAaC;AAAA,MAAA;AAAA,MANT;AAAA,IAAA;AAAA,EAOR,IAID9B,EAAiB,IAAI,CAAA2B,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC,GAOhFuB,IAAUC,EAAW,uBAAuB,KAAK;AAEvD,2BACK,MAAA,EAAG,WAAWD,GAAS,KAAKzB,GACxB,eACL;AAER;"}

package/components/assetTree/AssetTree.js

@@ -1,44 +1,44 @@
 import { jsxs as A, jsx as d } from "react/jsx-runtime";
-import R, { memo as re, forwardRef as oe, useState as f, useRef as ne } from "react";
-import { noop as y, head as E, isArray as L } from "es-toolkit/compat";
+import R, { memo as oe, forwardRef as re, useState as f, useRef as ne } from "react";
+import { noop as T, head as E, isArray as L } from "es-toolkit/compat";
 import ie from "tiny-invariant";
 import g from "../../utils/classNames.js";
 import de from "./TreeCategory.js";
-import T from "../resizer/Resizer.js";
+import u from "../resizer/Resizer.js";
 import ae from "./TreeSidebar.js";
 import ce from "../../utils/getWidthInBoundaries.js";
 import le from "../../utils/mergeRefs.js";
 import fe from "../../hooks/usePrevious.js";
 import me from "../smoothScrollbars/SmoothScrollbars.js";
-const pe = 350, he = 100, ue = 0, m = {
+const pe = 350, he = 100, ye = 0, m = {
   MODE_FLY: "fly",
   MODE_FLUID: "fluid"
-}, b = (e) => E(e?.current?.getElementsByClassName("AssetTreeBody")), ye = (e, r) => L(e) ? e.find((t) => t && t.props.id === r) : e, Te = (e, r) => R.Children.map(e, (t) => {
+}, b = (e) => E(e?.current?.getElementsByClassName("AssetTreeBody")), Te = (e, o) => L(e) ? e.find((t) => t && t.props.id === o) : e, ue = (e, o) => R.Children.map(e, (t) => {
   const p = g(
     "TreeOffscreenWrapper",
-    t && t.props.id !== r && "position-offscreen pointer-events-none"
+    t && t.props.id !== o && "position-offscreen pointer-events-none"
   );
   return /* @__PURE__ */ d("div", { className: p, children: t });
-}), ge = (e) => R.isValidElement(e) && e.type === de, Re = re(
-  oe((e, r) => {
+}), ge = (e) => R.isValidElement(e) && e.type === de, Re = oe(
+  re((e, o) => {
     const {
       className: t,
       resizable: p = !0,
       width: a = pe,
       minWidth: M = he,
-      maxWidth: C = ue,
+      maxWidth: C = ye,
       height: D,
       bordered: I = !1,
-      currentCategoryId: o,
+      currentCategoryId: r,
       isOpen: n = !0,
       useOffscreen: O = !1,
       fly: i = !1,
-      onCategoryChange: S = y,
-      onToggleTree: N = y,
-      onResizeEnd: _ = y,
+      onCategoryChange: S = T,
+      onToggleTree: N = T,
+      onResizeEnd: _ = T,
       children: c = [],
       ...w
-    } = e, W = (s) => s ? m.MODE_FLY : m.MODE_FLUID, [F, z] = f(a), [x, v] = f(!1), [B, H] = f(W(i)), h = ne(null), P = le([r, h]);
+    } = e, W = (s) => s ? m.MODE_FLY : m.MODE_FLUID, [F, z] = f(a), [x, v] = f(!1), [B, H] = f(W(i)), h = ne(null), P = le([o, h]);
     fe(a) !== a && z(a);
     const [U, j] = f(i);
     U !== i && (H(W(i)), j(i));
@@ -50,11 +50,11 @@ const pe = 350, he = 100, ue = 0, m = {
       !n && "closed",
       I && "border",
       B === m.MODE_FLY ? "fly" : "fluid"
-    ), k = g("AssetTreeResizeLimit", x && "display-block"), G = { left: C || window.innerWidth * 0.5 }, V = E(l), X = o ? ye(l, o) : V, Z = {
+    ), k = g("AssetTreeResizeLimit", x && "display-block"), G = { left: C || window.innerWidth * 0.5 }, V = E(l), X = r ? Te(l, r) : V, Z = {
       width: F,
       height: D
-    }, u = () => N(!n), q = (s) => {
-      S(s), n ? n && o === s && u() : u();
+    }, y = () => N(!n), q = (s) => {
+      S(s), n ? n && r === s && y() : y();
     }, J = (s) => {
       const $ = window.innerWidth * 0.5, ee = C || $;
       z((se) => {
@@ -75,21 +75,21 @@ const pe = 350, he = 100, ue = 0, m = {
           ae,
           {
             onSelectCategory: q,
-            currentCategoryId: o,
-            onClick: u,
+            currentCategoryId: r,
+            onClick: y,
             children: L(c) ? c : [c]
           }
         ),
-        /* @__PURE__ */ d(me, { slideIn: !0, className: "AssetTreeBody", children: O ? Te(l, o) : X })
+        /* @__PURE__ */ d(me, { slideIn: !0, className: "AssetTreeBody", children: O ? ue(l, r) : X })
       ] }),
       p && n && /* @__PURE__ */ d(
-        T,
+        u,
         {
           onResizeStart: K,
           onResize: J,
           onResizeEnd: Q,
-          direction: T.HORIZONTAL,
-          position: T.RIGHT
+          direction: u.HORIZONTAL,
+          position: u.RIGHT
         }
       )
     ] });

package/components/assetTree/AssetTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetTree.js","sources":["../../../src/components/assetTree/AssetTree.tsx"],"sourcesContent":["import React, { memo, useState, useRef, forwardRef, type PropsWithChildren } from 'react';\nimport { head, isArray, noop } from 'es-toolkit/compat';\nimport invariant from 'tiny-invariant';\n\nimport classNames from '../../utils/classNames';\nimport TreeCategory, { type TreeCategoryProps } from './TreeCategory';\nimport Resizer from '../resizer/Resizer';\nimport TreeSidebar from './TreeSidebar';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport mergeRefs from '../../utils/mergeRefs';\nimport usePrevious from '../../usePrevious';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 0;\n\nconst TreeMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n} as const;\n\nconst getSidebarBodyRef = (sidebarRef: React.MutableRefObject<HTMLDivElement | null>) =>\n    head(sidebarRef?.current?.getElementsByClassName('AssetTreeBody'));\n\nconst getCurrentCategoryElement = (children: React.ReactElement[], currentCategoryId: string) => {\n    return isArray(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;\n};\n\nconst renderTreesOffscreen = (children: React.ReactElement[], categoryId: string | undefined) => {\n    return React.Children.map(children, child => {\n        const offscreenClasses = classNames(\n            'TreeOffscreenWrapper',\n            child && child.props.id !== categoryId && 'position-offscreen pointer-events-none'\n        );\n        return <div className={offscreenClasses}>{child}</div>;\n    });\n};\n\nexport type AssetTreeProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     *\n     * @default true\n     */\n    resizable?: boolean;\n\n    /**\n     * Defines whether the component has a border or not.\n     *\n     * @default false\n     */\n    bordered?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as inline style.\n     *\n     * Note: when component is resizable it will take the provided\n     * width in px only and convert it to number in case.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width of the component in px that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width of the component in px that will take effect when resizing.\n     *\n     * @default 0\n     */\n    maxWidth?: number;\n\n    /**\n     * Defines the height of the component in px.\n     */\n    height?: number;\n\n    /**\n     * Defines whether the component is open or not.\n     *\n     * @default true\n     */\n    isOpen?: boolean;\n\n    /**\n     * Callback for when the tree visibility is toggled.\n     *\n     * @default () => {}\n     * @param isOpen\n     * @returns\n     */\n    onToggleTree?: (isOpen: boolean) => void;\n\n    /**\n     * The id of the category which is currently active and shall be shown.\n     */\n    currentCategoryId?: string;\n\n    /**\n     * Callback for handling change of category.\n     *\n     * @default () => {}\n     * @param selectedCategoryId\n     * @returns\n     */\n    onCategoryChange?: (selectedCategoryId: string) => void;\n\n    /**\n     * Callback for when the resize is done.\n     *\n     * @default () => {}\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines whether the tree components are rendered offscreen and kept mounted in the DOM.\n     *\n     * @default false\n     */\n    useOffscreen?: boolean;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\n// Check if the child is a React element and if it has the type TreeCategory\nconst isTreeCategory = (child: React.ReactNode): child is React.ReactElement<TreeCategoryProps> => {\n    return React.isValidElement(child) && child.type === TreeCategory;\n};\n\nconst AssetTree = memo(\n    forwardRef<HTMLDivElement, PropsWithChildren<AssetTreeProps>>((props, ref) => {\n        const {\n            className,\n            resizable = true,\n            width = DEFAULT_WIDTH,\n            minWidth = DEFAULT_MIN_WIDTH,\n            maxWidth = DEFAULT_MAX_WIDTH,\n            height,\n            bordered = false,\n            currentCategoryId,\n            isOpen = true,\n            useOffscreen = false,\n            fly = false,\n            onCategoryChange = noop,\n            onToggleTree = noop,\n            onResizeEnd = noop,\n            children = [],\n            ...remainingProps\n        } = props;\n\n        const getSidebarMode = (isFly: boolean) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);\n\n        const [treeWidth, setTreeWidth] = useState(width);\n        const [isResize, setIsResize] = useState(false);\n        const [sidebarMode, setSidebarMode] = useState(getSidebarMode(fly));\n\n        const sidebarRef = useRef<HTMLDivElement>(null);\n\n        const mergedRefs = mergeRefs([ref, sidebarRef]);\n\n        // Update internal state when props change\n        const previousWidth = usePrevious(width);\n        if (previousWidth !== width) {\n            setTreeWidth(width);\n        }\n\n        const [previousMode, setPreviousMode] = useState(fly);\n        if (previousMode !== fly) {\n            setSidebarMode(getSidebarMode(fly));\n            setPreviousMode(fly);\n        }\n\n        const childrenArray = React.Children.toArray(children);\n\n        // check for children type of TreeCategory and throw error in case\n        invariant(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type \"TreeCategory\"');\n\n        const classes = classNames(\n            'AssetTree',\n            className,\n            !isOpen && 'closed',\n            bordered && 'border',\n            sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid'\n        );\n\n        const resizeLimitClasses = classNames('AssetTreeResizeLimit', isResize && 'display-block');\n\n        const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n        const resizeLimitStyle = { left: resizeIndicatorPosition };\n\n        const firstChild = head(childrenArray);\n\n        const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;\n\n        const style = {\n            width: treeWidth,\n            height,\n        };\n\n        const handleToggleTreeContent = () => onToggleTree(!isOpen);\n\n        const handleSelectCategory = (selectedCategoryId: string) => {\n            onCategoryChange(selectedCategoryId);\n\n            if (!isOpen) {\n                handleToggleTreeContent();\n            } else if (isOpen && currentCategoryId === selectedCategoryId) {\n                handleToggleTreeContent();\n            }\n        };\n\n        const handleResize = (diff: number) => {\n            const halfWindowWidth = window.innerWidth * 0.5;\n            const usedMaxWidth = maxWidth || halfWindowWidth;\n\n            // Check for sidebar width if it is half window size. If it was before but the sidebar was resized so it is\n            // no longer half window size, set the sidebar width to half the window size to avoid jumping sidebar\n            // to old width\n            setTreeWidth(oldWidth => {\n                const updatedWidth = oldWidth - diff;\n                return getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n            });\n        };\n\n        const handleResizeStart = () => {\n            const body = getSidebarBodyRef(sidebarRef);\n            if (body) {\n                body.classList.add('pointer-events-none');\n            }\n            setIsResize(true);\n        };\n\n        const handleResizeEnd = () => {\n            const body = getSidebarBodyRef(sidebarRef);\n            if (body) {\n                body.classList.remove('pointer-events-none');\n            }\n            setIsResize(false);\n            onResizeEnd();\n        };\n\n        return (\n            <div {...remainingProps} className={classes} style={style} ref={mergedRefs}>\n                <div className={resizeLimitClasses} style={resizeLimitStyle} />\n                <div className='AssetTreeContent'>\n                    <TreeSidebar\n                        onSelectCategory={handleSelectCategory}\n                        currentCategoryId={currentCategoryId}\n                        onClick={handleToggleTreeContent}\n                    >\n                        {isArray(children) ? children : [children]}\n                    </TreeSidebar>\n                    <SmoothScrollbars slideIn className='AssetTreeBody'>\n                        {useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category}\n                    </SmoothScrollbars>\n                </div>\n                {resizable && isOpen && (\n                    <Resizer\n                        onResizeStart={handleResizeStart}\n                        onResize={handleResize}\n                        onResizeEnd={handleResizeEnd}\n                        direction={Resizer.HORIZONTAL}\n                        position={Resizer.RIGHT}\n                    />\n                )}\n            </div>\n        );\n    })\n);\n\nObject.assign(AssetTree, TreeMode);\n\nexport default AssetTree;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","TreeMode","getSidebarBodyRef","sidebarRef","head","getCurrentCategoryElement","children","currentCategoryId","isArray","child","renderTreesOffscreen","categoryId","React","offscreenClasses","classNames","jsx","isTreeCategory","TreeCategory","AssetTree","memo","forwardRef","props","ref","className","resizable","width","minWidth","maxWidth","height","bordered","isOpen","useOffscreen","fly","onCategoryChange","noop","onToggleTree","onResizeEnd","remainingProps","getSidebarMode","isFly","treeWidth","setTreeWidth","useState","isResize","setIsResize","sidebarMode","setSidebarMode","useRef","mergedRefs","mergeRefs","usePrevious","previousMode","setPreviousMode","childrenArray","invariant","classes","resizeLimitClasses","resizeLimitStyle","firstChild","category","style","handleToggleTreeContent","handleSelectCategory","selectedCategoryId","handleResize","diff","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","getWidthInBoundaries","handleResizeStart","body","handleResizeEnd","jsxs","TreeSidebar","SmoothScrollbars","Resizer"],"mappings":"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"}
+{"version":3,"file":"AssetTree.js","sources":["../../../src/components/assetTree/AssetTree.tsx"],"sourcesContent":["import React, { memo, useState, useRef, forwardRef, type PropsWithChildren } from 'react';\nimport { head, isArray, noop } from 'es-toolkit/compat';\nimport invariant from 'tiny-invariant';\n\nimport classNames from '../../utils/classNames';\nimport TreeCategory, { type TreeCategoryProps } from './TreeCategory';\nimport Resizer from '../resizer/Resizer';\nimport TreeSidebar from './TreeSidebar';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport mergeRefs from '../../utils/mergeRefs';\nimport usePrevious from '../../usePrevious';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 0;\n\nconst TreeMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n} as const;\n\nconst getSidebarBodyRef = (sidebarRef: React.MutableRefObject<HTMLDivElement | null>) =>\n    head(sidebarRef?.current?.getElementsByClassName('AssetTreeBody'));\n\nconst getCurrentCategoryElement = (children: React.ReactElement[], currentCategoryId: string) =>\n    isArray(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;\n\nconst renderTreesOffscreen = (children: React.ReactElement[], categoryId: string | undefined) =>\n    React.Children.map(children, child => {\n        const offscreenClasses = classNames(\n            'TreeOffscreenWrapper',\n            child && child.props.id !== categoryId && 'position-offscreen pointer-events-none'\n        );\n        return <div className={offscreenClasses}>{child}</div>;\n    });\n\nexport type AssetTreeProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     *\n     * @default true\n     */\n    resizable?: boolean;\n\n    /**\n     * Defines whether the component has a border or not.\n     *\n     * @default false\n     */\n    bordered?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as inline style.\n     *\n     * Note: when component is resizable it will take the provided\n     * width in px only and convert it to number in case.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width of the component in px that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width of the component in px that will take effect when resizing.\n     *\n     * @default 0\n     */\n    maxWidth?: number;\n\n    /**\n     * Defines the height of the component in px.\n     */\n    height?: number;\n\n    /**\n     * Defines whether the component is open or not.\n     *\n     * @default true\n     */\n    isOpen?: boolean;\n\n    /**\n     * Callback for when the tree visibility is toggled.\n     *\n     * @default () => {}\n     * @param isOpen\n     * @returns\n     */\n    onToggleTree?: (isOpen: boolean) => void;\n\n    /**\n     * The id of the category which is currently active and shall be shown.\n     */\n    currentCategoryId?: string;\n\n    /**\n     * Callback for handling change of category.\n     *\n     * @default () => {}\n     * @param selectedCategoryId\n     * @returns\n     */\n    onCategoryChange?: (selectedCategoryId: string) => void;\n\n    /**\n     * Callback for when the resize is done.\n     *\n     * @default () => {}\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines whether the tree components are rendered offscreen and kept mounted in the DOM.\n     *\n     * @default false\n     */\n    useOffscreen?: boolean;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\n// Check if the child is a React element and if it has the type TreeCategory\nconst isTreeCategory = (child: React.ReactNode): child is React.ReactElement<TreeCategoryProps> =>\n    React.isValidElement(child) && child.type === TreeCategory;\n\nconst AssetTree = memo(\n    forwardRef<HTMLDivElement, PropsWithChildren<AssetTreeProps>>((props, ref) => {\n        const {\n            className,\n            resizable = true,\n            width = DEFAULT_WIDTH,\n            minWidth = DEFAULT_MIN_WIDTH,\n            maxWidth = DEFAULT_MAX_WIDTH,\n            height,\n            bordered = false,\n            currentCategoryId,\n            isOpen = true,\n            useOffscreen = false,\n            fly = false,\n            onCategoryChange = noop,\n            onToggleTree = noop,\n            onResizeEnd = noop,\n            children = [],\n            ...remainingProps\n        } = props;\n\n        const getSidebarMode = (isFly: boolean) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);\n\n        const [treeWidth, setTreeWidth] = useState(width);\n        const [isResize, setIsResize] = useState(false);\n        const [sidebarMode, setSidebarMode] = useState(getSidebarMode(fly));\n\n        const sidebarRef = useRef<HTMLDivElement>(null);\n\n        const mergedRefs = mergeRefs([ref, sidebarRef]);\n\n        // Update internal state when props change\n        const previousWidth = usePrevious(width);\n        if (previousWidth !== width) {\n            setTreeWidth(width);\n        }\n\n        const [previousMode, setPreviousMode] = useState(fly);\n        if (previousMode !== fly) {\n            setSidebarMode(getSidebarMode(fly));\n            setPreviousMode(fly);\n        }\n\n        const childrenArray = React.Children.toArray(children);\n\n        // check for children type of TreeCategory and throw error in case\n        invariant(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type \"TreeCategory\"');\n\n        const classes = classNames(\n            'AssetTree',\n            className,\n            !isOpen && 'closed',\n            bordered && 'border',\n            sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid'\n        );\n\n        const resizeLimitClasses = classNames('AssetTreeResizeLimit', isResize && 'display-block');\n\n        const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n        const resizeLimitStyle = { left: resizeIndicatorPosition };\n\n        const firstChild = head(childrenArray);\n\n        const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;\n\n        const style = {\n            width: treeWidth,\n            height,\n        };\n\n        const handleToggleTreeContent = () => onToggleTree(!isOpen);\n\n        const handleSelectCategory = (selectedCategoryId: string) => {\n            onCategoryChange(selectedCategoryId);\n\n            if (!isOpen) {\n                handleToggleTreeContent();\n            } else if (isOpen && currentCategoryId === selectedCategoryId) {\n                handleToggleTreeContent();\n            }\n        };\n\n        const handleResize = (diff: number) => {\n            const halfWindowWidth = window.innerWidth * 0.5;\n            const usedMaxWidth = maxWidth || halfWindowWidth;\n\n            // Check for sidebar width if it is half window size. If it was before but the sidebar was resized so it is\n            // no longer half window size, set the sidebar width to half the window size to avoid jumping sidebar\n            // to old width\n            setTreeWidth(oldWidth => {\n                const updatedWidth = oldWidth - diff;\n                return getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n            });\n        };\n\n        const handleResizeStart = () => {\n            const body = getSidebarBodyRef(sidebarRef);\n            if (body) {\n                body.classList.add('pointer-events-none');\n            }\n            setIsResize(true);\n        };\n\n        const handleResizeEnd = () => {\n            const body = getSidebarBodyRef(sidebarRef);\n            if (body) {\n                body.classList.remove('pointer-events-none');\n            }\n            setIsResize(false);\n            onResizeEnd();\n        };\n\n        return (\n            <div {...remainingProps} className={classes} style={style} ref={mergedRefs}>\n                <div className={resizeLimitClasses} style={resizeLimitStyle} />\n                <div className='AssetTreeContent'>\n                    <TreeSidebar\n                        onSelectCategory={handleSelectCategory}\n                        currentCategoryId={currentCategoryId}\n                        onClick={handleToggleTreeContent}\n                    >\n                        {isArray(children) ? children : [children]}\n                    </TreeSidebar>\n                    <SmoothScrollbars slideIn className='AssetTreeBody'>\n                        {useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category}\n                    </SmoothScrollbars>\n                </div>\n                {resizable && isOpen && (\n                    <Resizer\n                        onResizeStart={handleResizeStart}\n                        onResize={handleResize}\n                        onResizeEnd={handleResizeEnd}\n                        direction={Resizer.HORIZONTAL}\n                        position={Resizer.RIGHT}\n                    />\n                )}\n            </div>\n        );\n    })\n);\n\nObject.assign(AssetTree, TreeMode);\n\nexport default AssetTree;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","TreeMode","getSidebarBodyRef","sidebarRef","head","getCurrentCategoryElement","children","currentCategoryId","isArray","child","renderTreesOffscreen","categoryId","React","offscreenClasses","classNames","jsx","isTreeCategory","TreeCategory","AssetTree","memo","forwardRef","props","ref","className","resizable","width","minWidth","maxWidth","height","bordered","isOpen","useOffscreen","fly","onCategoryChange","noop","onToggleTree","onResizeEnd","remainingProps","getSidebarMode","isFly","treeWidth","setTreeWidth","useState","isResize","setIsResize","sidebarMode","setSidebarMode","useRef","mergedRefs","mergeRefs","usePrevious","previousMode","setPreviousMode","childrenArray","invariant","classes","resizeLimitClasses","resizeLimitStyle","firstChild","category","style","handleToggleTreeContent","handleSelectCategory","selectedCategoryId","handleResize","diff","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","getWidthInBoundaries","handleResizeStart","body","handleResizeEnd","jsxs","TreeSidebar","SmoothScrollbars","Resizer"],"mappings":"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"}

package/components/assetTree/Tree.js

@@ -1,6 +1,6 @@
 import { jsxs as R, jsx as n } from "react/jsx-runtime";
 import pt, { useReducer as mt, useRef as E, useCallback as pe, useEffect as F } from "react";
-import { noop as k, size as y, isEmpty as u, filter as H, cond as q, stubTrue as Z, map as Y, flow as ht, omit as ft, find as gt, without as St } from "es-toolkit/compat";
+import { noop as k, size as y, isEmpty as u, filter as H, cond as q, stubTrue as Z, map as Y, flow as ht, find as ft, without as gt, omit as St } from "es-toolkit/compat";
 import { isNil as It, isEqual as W } from "es-toolkit/predicate";
 import me from "../../utils/classNames.js";
 import Tt from "./TreeSearch.js";
@@ -13,15 +13,15 @@ import fe from "./TreeNothingFound.js";
 import Ct from "./TreeOptions.js";
 import At from "./TreeRoot.js";
 import xt from "./TypeCounter.js";
-import { notEmpty as S, notEqual as K, getTypeCounts as ge, debounceFn as Nt, filterOutByItemId as Q, filterAssetByType as Et, getMappedItemsToGroups as Ft, sortGroupsByName as vt, sortGroupItemsByName as bt, filterEmptyGroups as Lt, getFlatItems as Ot, containsItemById as Vt, addOrRemoveFromList as Rt, excludeFromList as kt, getListIds as Se } from "./treeUtils.js";
+import { notEqual as K, getTypeCounts as ge, debounceFn as Nt, filterOutByItemId as Q, filterAssetByType as Et, notEmpty as S, containsItemById as Ft, addOrRemoveFromList as vt, getMappedItemsToGroups as bt, sortGroupsByName as Lt, sortGroupItemsByName as Ot, filterEmptyGroups as Vt, getFlatItems as Rt, excludeFromList as kt, getListIds as Se } from "./treeUtils.js";
 import { getSubTypeCounts as xs } from "./treeUtils.js";
-import { treeReducer as Ht, assetCounted as Ie, allCheckedChanged as v, visibleTypeCountersChanged as wt, emptyGroupsChanged as zt, groupedItemsChanged as $t, flatItemsChanged as Pt, searchValueChanged as Bt, typeFilterChanged as jt } from "./treeReducer.js";
+import { treeReducer as Ht, assetCounted as Ie, allCheckedChanged as v, visibleTypeCountersChanged as wt, searchValueChanged as zt, typeFilterChanged as $t, emptyGroupsChanged as Pt, groupedItemsChanged as Bt, flatItemsChanged as jt } from "./treeReducer.js";
 import { useTreeVirtualization as Dt } from "./useTreeVirtualization.js";
 import { useTreeExpansion as Mt } from "./useTreeExpansion.js";
 import { useTreeHeight as Ut } from "./useTreeHeight.js";
 import { useTreeScrollPosition as _t } from "./useTreeScrollPosition.js";
 import qt from "../smoothScrollbars/SmoothScrollbars.js";
-const Te = (I) => ft(I, ["expandedGroups", "onExpandGroupsChange", "onSearchChange", "onSelectionChange", "treeOptions"]), Zt = (I, c) => W(Te(I), Te(c)), Yt = 50, Jt = 5, Gs = pt.memo((I) => {
+const Te = (I) => St(I, ["expandedGroups", "onExpandGroupsChange", "onSearchChange", "onSelectionChange", "treeOptions"]), Zt = (I, c) => W(Te(I), Te(c)), Yt = 50, Jt = 5, Gs = pt.memo((I) => {
   const {
     groups: c = [],
     items: m = [],
@@ -134,18 +134,18 @@ const Te = (I) => ft(I, ["expandedGroups", "onExpandGroupsChange", "onSearchChan
       groups: t
     });
   }, ae = (e, t) => {
-    const s = e.id, a = !i.includes(s) && !t ? [...i, s] : kt(i, s), h = gt(o.groupedItems, (_) => _.id === s), p = Y(h?.items, (_) => _.id), N = St(f, ...p), O = c.length, M = b ? 0 : o.emptyGroups.length, V = O - M === a.length;
+    const s = e.id, a = !i.includes(s) && !t ? [...i, s] : kt(i, s), h = ft(o.groupedItems, (_) => _.id === s), p = Y(h?.items, (_) => _.id), N = gt(f, ...p), O = c.length, M = b ? 0 : o.emptyGroups.length, V = O - M === a.length;
     d(v(V)), A(N, a);
   }, De = (e) => {
-    Fe(e), d(Bt(e)), g && setTimeout(() => {
+    Fe(e), d(zt(e)), g && setTimeout(() => {
       ke();
     }, 10);
   }, Me = (e, t) => {
-    const s = Ot(e, t);
-    d(Pt(s));
+    const s = Rt(e, t);
+    d(jt(s));
   }, Ue = (e, t, s) => {
-    const r = Ft(e, t), l = ht(vt, bt)(r), a = s ? l : Lt(l), h = H(l, (p) => u(p.items));
-    d(zt(h)), d(Ie(ge(m))), d($t(a));
+    const r = bt(e, t), l = ht(Lt, Ot)(r), a = s ? l : Vt(l), h = H(l, (p) => u(p.items));
+    d(Pt(h)), d(Ie(ge(m))), d(Bt(a));
   }, L = (e, t) => {
     const s = o.searchValue, r = o.typeFilter, l = e, a = t, h = (V) => V && S(V), p = () => u(s) && h(l), N = () => S(s) && h(l), O = u(r) ? a : Et(a, r), M = () => Ue(l, O, b), U = () => Me(O, s);
     q([
@@ -238,7 +238,7 @@ const Te = (I) => ft(I, ["expandedGroups", "onExpandGroupsChange", "onSearchChan
   }, qe = () => {
     const { groupedItems: e } = o;
     return u(e) ? /* @__PURE__ */ n(fe, {}) : D.length > te ? ie() : Y(e, (s) => {
-      const r = s.id, l = s.items, a = le?.includes(r) ?? !1, h = H(l, Vt(f)).length, p = i.includes(r), N = !p && h > 0;
+      const r = s.id, l = s.items, a = le?.includes(r) ?? !1, h = H(l, Ft(f)).length, p = i.includes(r), N = !p && h > 0;
       return /* @__PURE__ */ R(w, { groupId: r, isOpen: a, disableAnimation: x, children: [
         /* @__PURE__ */ n(
           he,
@@ -285,8 +285,8 @@ const Te = (I) => ft(I, ["expandedGroups", "onExpandGroupsChange", "onSearchChan
     [() => C() && !T(), () => qe()],
     [Z, () => Ze()]
   ])(), nt = (e) => {
-    const t = Rt(o.typeFilter, e);
-    d(jt(t)), Oe(t);
+    const t = vt(o.typeFilter, e);
+    d($t(t)), Oe(t);
   }, lt = y(o.visibleTypeCounters) !== 1, ct = S(o.typeFilter), at = !Ce, it = !et, dt = !Ge, ut = !Ne, ue = !It(X);
   return /* @__PURE__ */ R("div", { ...Re, className: st, ref: se, children: [
     /* @__PURE__ */ R("div", { className: "TreeHeader", children: [

package/components/assetTree/TreeNothingFound.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import e from "react";
-const r = e.memo(() => /* @__PURE__ */ t(
+const n = e.memo(() => /* @__PURE__ */ t(
   "div",
   {
     className: `TreeTreeNothingFound display-flex justify-content-center text-size-20
@@ -9,6 +9,6 @@ const r = e.memo(() => /* @__PURE__ */ t(
   }
 ));
 export {
-  r as default
+  n as default
 };
 //# sourceMappingURL=TreeNothingFound.js.map

package/components/assetTree/TreeNothingFound.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNothingFound.js","sources":["../../../src/components/assetTree/TreeNothingFound.tsx"],"sourcesContent":["import React from 'react';\n\nconst TreeNothingFound = React.memo(() => {\n    return (\n        <div\n            className={`TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25`}\n        >\n            <span className='rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light' />\n        </div>\n    );\n});\n\nexport default TreeNothingFound;\n"],"names":["TreeNothingFound","React","jsx"],"mappings":";;AAEA,MAAMA,IAAmBC,EAAM,KAAK,MAE5B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW;AAAA;AAAA,IAGX,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,wEAAA,CAAwE;AAAA,EAAA;AAAA,CAGnG;"}
+{"version":3,"file":"TreeNothingFound.js","sources":["../../../src/components/assetTree/TreeNothingFound.tsx"],"sourcesContent":["import React from 'react';\n\nconst TreeNothingFound = React.memo(() => (\n    <div\n        className={`TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25`}\n    >\n        <span className='rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light' />\n    </div>\n));\n\nexport default TreeNothingFound;\n"],"names":["TreeNothingFound","React","jsx"],"mappings":";;AAEA,MAAMA,IAAmBC,EAAM,KAAK,MAChC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW;AAAA;AAAA,IAGX,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,wEAAA,CAAwE;AAAA,EAAA;AAC5F,CACH;"}

package/components/assetTree/treeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeUtils.js","sources":["../../../src/components/assetTree/treeUtils.ts"],"sourcesContent":["import { countBy, debounce, filter, isEmpty, isObject, mapValues, negate } from 'es-toolkit/compat';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { orderBy } from 'es-toolkit/array';\n\nimport { searchNormalized } from '../../utils/searchNormalized';\nimport type { TreeItem, TreeGroup, TreeItemName, GroupedItems, GroupedItem } from './Tree';\n\nconst SEARCH_DEBOUNCE = 100;\n\nexport const notEqual = negate(isEqual);\nexport const notEmpty = negate(isEmpty);\n\nexport const filterOutByItemId = (list: string[]) => (item: TreeItem | TreeGroup) => !list.includes(item.id);\n\nexport const containsItemById = (list: string[]) => (item: TreeGroup) => list.includes(item.id);\n\nexport const getListIds = (list: TreeItem[] | TreeGroup[]) => list.map(listItem => listItem.id);\n\nexport const getTypeCounts = (items: TreeItem[]) => countBy(items, item => item.type);\nexport const getSubTypeCounts = (items: TreeItem[]) => countBy(items, item => item.subType);\n\n// biome-ignore lint/suspicious/noExplicitAny: we don't know the type\nexport const debounceFn = <T extends (...args: any[]) => any>(fn: T) => debounce(fn, SEARCH_DEBOUNCE);\n\nconst isNameObject = (item: TreeItem) => isObject(item.name);\n\nexport const getFullName = (item: TreeItem) =>\n    `${(item.name as TreeItemName).firstName} ${(item.name as TreeItemName).lastName}`;\n\nconst getName = (item: TreeItem) => (isNameObject(item) ? getFullName(item) : (item.name as string));\n\nconst orderTreeItemsByName = (items: TreeItem[]) =>\n    orderBy(\n        items,\n        [\n            (item: TreeItem) =>\n                isNameObject(item)\n                    ? (item.name as TreeItemName).lastName.toLowerCase()\n                    : ((item.name as string)?.toLowerCase() ?? ''),\n        ],\n        ['asc']\n    ) as TreeItem[];\n\nconst orderGroupedItemsByName = (groups: GroupedItems) => {\n    const groupArray = Object.values(groups);\n    const sortedArray = orderBy(\n        groupArray,\n        [\n            (group: GroupedItem) =>\n                (typeof group.name === 'string' ? group.name.toLowerCase() : String(group.name)) ?? '',\n        ],\n        ['asc']\n    ) as GroupedItem[];\n    const sortedGroups: GroupedItems = {};\n    for (const group of sortedArray) {\n        sortedGroups[group.id] = group;\n    }\n    return sortedGroups;\n};\n\n// TODO: extend to use provided external search function instead?\nconst filterByName =\n    (searchValue: string) =>\n    (item: TreeItem): boolean => {\n        if (searchValue) {\n            return searchNormalized(getName(item), searchValue);\n        }\n        return true;\n    };\n\nexport const getFlatItems = (items: TreeItem[], searchValue: string): TreeItem[] =>\n    filter(orderTreeItemsByName(items), filterByName(searchValue));\n\nexport const filterEmptyGroups = (groups: GroupedItems): GroupedItems => {\n    const result: GroupedItems = {};\n    Object.values(groups).forEach(group => {\n        if (notEmpty(group.items)) {\n            result[group.id] = group;\n        }\n    });\n    return result;\n};\n\nexport const filterAssetByType = (items: TreeItem[], types: string[] = []) =>\n    filter(items, (asset: TreeItem) => types.includes(asset.type));\n\nexport const excludeFromList = <T>(list: T[], itemId: T): T[] => list.filter(item => item !== itemId);\n\nexport const sortGroupsByName = (groups: GroupedItems) => {\n    const fixedGroups: GroupedItems = {};\n    const sortableGroups: GroupedItems = {};\n\n    mapValues(groups, (group: GroupedItem) => {\n        if (group.position === 'last') {\n            fixedGroups[group.id] = { ...group };\n        } else {\n            sortableGroups[group.id] = { ...group };\n        }\n    });\n\n    const sortedGroups = orderGroupedItemsByName(sortableGroups);\n\n    return isEmpty(fixedGroups) ? sortedGroups : { ...sortedGroups, ...fixedGroups };\n};\n\nexport const sortGroupItemsByName = (groups: GroupedItems): GroupedItems => {\n    return mapValues(groups, (group: GroupedItem) => ({\n        ...group,\n        items: orderTreeItemsByName(group.items) as TreeItem[],\n    }));\n};\n\nexport const getMappedItemsToGroups = (groups: TreeGroup[], items: TreeItem[]): GroupedItems => {\n    const mappedGroups: GroupedItems = {};\n\n    // build an object for listing the groups by id\n    groups.forEach(group => {\n        mappedGroups[group.id] = {\n            ...group,\n            items: [],\n        };\n    });\n\n    items.forEach(item => {\n        // add items to the respective group\n        const groupIds = item.groupIds || [];\n        groupIds.forEach(groupId => {\n            const mappedGroup = mappedGroups[groupId];\n            if (mappedGroup) {\n                mappedGroup.items.push(item);\n            }\n        });\n    });\n\n    return mappedGroups;\n};\n\nexport const addOrRemoveFromList = <T>(list: T[], item: T): T[] => {\n    const listSet = new Set(list);\n    if (listSet.has(item)) {\n        listSet.delete(item);\n    } else {\n        listSet.add(item);\n    }\n    return [...listSet];\n};\n\n// Add prefix `rioglyph-` if icon is given and does not start with the prefix\nexport const withRioglyphPrefix = (name?: string | null): string | null => {\n    if (!name) {\n        return null;\n    }\n    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;\n};\n"],"names":["SEARCH_DEBOUNCE","notEqual","negate","isEqual","notEmpty","isEmpty","filterOutByItemId","list","item","containsItemById","getListIds","listItem","getTypeCounts","items","countBy","getSubTypeCounts","debounceFn","fn","debounce","isNameObject","isObject","getFullName","getName","orderTreeItemsByName","orderBy","orderGroupedItemsByName","groups","groupArray","sortedArray","group","sortedGroups","filterByName","searchValue","searchNormalized","getFlatItems","filter","filterEmptyGroups","result","filterAssetByType","types","asset","excludeFromList","itemId","sortGroupsByName","fixedGroups","sortableGroups","mapValues","sortGroupItemsByName","getMappedItemsToGroups","mappedGroups","groupId","mappedGroup","addOrRemoveFromList","listSet","withRioglyphPrefix","name"],"mappings":"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"}
+{"version":3,"file":"treeUtils.js","sources":["../../../src/components/assetTree/treeUtils.ts"],"sourcesContent":["import { countBy, debounce, filter, isEmpty, isObject, mapValues, negate } from 'es-toolkit/compat';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { orderBy } from 'es-toolkit/array';\n\nimport { searchNormalized } from '../../utils/searchNormalized';\nimport type { TreeItem, TreeGroup, TreeItemName, GroupedItems, GroupedItem } from './Tree';\n\nconst SEARCH_DEBOUNCE = 100;\n\nexport const notEqual = negate(isEqual);\nexport const notEmpty = negate(isEmpty);\n\nexport const filterOutByItemId = (list: string[]) => (item: TreeItem | TreeGroup) => !list.includes(item.id);\n\nexport const containsItemById = (list: string[]) => (item: TreeGroup) => list.includes(item.id);\n\nexport const getListIds = (list: TreeItem[] | TreeGroup[]) => list.map(listItem => listItem.id);\n\nexport const getTypeCounts = (items: TreeItem[]) => countBy(items, item => item.type);\nexport const getSubTypeCounts = (items: TreeItem[]) => countBy(items, item => item.subType);\n\n// biome-ignore lint/suspicious/noExplicitAny: we don't know the type\nexport const debounceFn = <T extends (...args: any[]) => any>(fn: T) => debounce(fn, SEARCH_DEBOUNCE);\n\nconst isNameObject = (item: TreeItem) => isObject(item.name);\n\nexport const getFullName = (item: TreeItem) =>\n    `${(item.name as TreeItemName).firstName} ${(item.name as TreeItemName).lastName}`;\n\nconst getName = (item: TreeItem) => (isNameObject(item) ? getFullName(item) : (item.name as string));\n\nconst orderTreeItemsByName = (items: TreeItem[]) =>\n    orderBy(\n        items,\n        [\n            (item: TreeItem) =>\n                isNameObject(item)\n                    ? (item.name as TreeItemName).lastName.toLowerCase()\n                    : ((item.name as string)?.toLowerCase() ?? ''),\n        ],\n        ['asc']\n    ) as TreeItem[];\n\nconst orderGroupedItemsByName = (groups: GroupedItems) => {\n    const groupArray = Object.values(groups);\n    const sortedArray = orderBy(\n        groupArray,\n        [\n            (group: GroupedItem) =>\n                (typeof group.name === 'string' ? group.name.toLowerCase() : String(group.name)) ?? '',\n        ],\n        ['asc']\n    ) as GroupedItem[];\n    const sortedGroups: GroupedItems = {};\n    for (const group of sortedArray) {\n        sortedGroups[group.id] = group;\n    }\n    return sortedGroups;\n};\n\n// TODO: extend to use provided external search function instead?\nconst filterByName =\n    (searchValue: string) =>\n    (item: TreeItem): boolean => {\n        if (searchValue) {\n            return searchNormalized(getName(item), searchValue);\n        }\n        return true;\n    };\n\nexport const getFlatItems = (items: TreeItem[], searchValue: string): TreeItem[] =>\n    filter(orderTreeItemsByName(items), filterByName(searchValue));\n\nexport const filterEmptyGroups = (groups: GroupedItems): GroupedItems => {\n    const result: GroupedItems = {};\n    Object.values(groups).forEach(group => {\n        if (notEmpty(group.items)) {\n            result[group.id] = group;\n        }\n    });\n    return result;\n};\n\nexport const filterAssetByType = (items: TreeItem[], types: string[] = []) =>\n    filter(items, (asset: TreeItem) => types.includes(asset.type));\n\nexport const excludeFromList = <T>(list: T[], itemId: T): T[] => list.filter(item => item !== itemId);\n\nexport const sortGroupsByName = (groups: GroupedItems) => {\n    const fixedGroups: GroupedItems = {};\n    const sortableGroups: GroupedItems = {};\n\n    mapValues(groups, (group: GroupedItem) => {\n        if (group.position === 'last') {\n            fixedGroups[group.id] = { ...group };\n        } else {\n            sortableGroups[group.id] = { ...group };\n        }\n    });\n\n    const sortedGroups = orderGroupedItemsByName(sortableGroups);\n\n    return isEmpty(fixedGroups) ? sortedGroups : { ...sortedGroups, ...fixedGroups };\n};\n\nexport const sortGroupItemsByName = (groups: GroupedItems): GroupedItems =>\n    mapValues(groups, (group: GroupedItem) => ({\n        ...group,\n        items: orderTreeItemsByName(group.items) as TreeItem[],\n    }));\n\nexport const getMappedItemsToGroups = (groups: TreeGroup[], items: TreeItem[]): GroupedItems => {\n    const mappedGroups: GroupedItems = {};\n\n    // build an object for listing the groups by id\n    groups.forEach(group => {\n        mappedGroups[group.id] = {\n            ...group,\n            items: [],\n        };\n    });\n\n    items.forEach(item => {\n        // add items to the respective group\n        const groupIds = item.groupIds || [];\n        groupIds.forEach(groupId => {\n            const mappedGroup = mappedGroups[groupId];\n            if (mappedGroup) {\n                mappedGroup.items.push(item);\n            }\n        });\n    });\n\n    return mappedGroups;\n};\n\nexport const addOrRemoveFromList = <T>(list: T[], item: T): T[] => {\n    const listSet = new Set(list);\n    if (listSet.has(item)) {\n        listSet.delete(item);\n    } else {\n        listSet.add(item);\n    }\n    return [...listSet];\n};\n\n// Add prefix `rioglyph-` if icon is given and does not start with the prefix\nexport const withRioglyphPrefix = (name?: string | null): string | null => {\n    if (!name) {\n        return null;\n    }\n    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;\n};\n"],"names":["SEARCH_DEBOUNCE","notEqual","negate","isEqual","notEmpty","isEmpty","filterOutByItemId","list","item","containsItemById","getListIds","listItem","getTypeCounts","items","countBy","getSubTypeCounts","debounceFn","fn","debounce","isNameObject","isObject","getFullName","getName","orderTreeItemsByName","orderBy","orderGroupedItemsByName","groups","groupArray","sortedArray","group","sortedGroups","filterByName","searchValue","searchNormalized","getFlatItems","filter","filterEmptyGroups","result","filterAssetByType","types","asset","excludeFromList","itemId","sortGroupsByName","fixedGroups","sortableGroups","mapValues","sortGroupItemsByName","getMappedItemsToGroups","mappedGroups","groupId","mappedGroup","addOrRemoveFromList","listSet","withRioglyphPrefix","name"],"mappings":"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"}

package/components/autosuggest/AutoSuggest.js

@@ -49,8 +49,8 @@ const Ue = (U) => {
     noItemMessage: w,
     dropdownClassName: Z = "",
     className: ee = "",
-    ...ne
-  } = U, [l, N] = h(!1), [p, v] = h(r.value || ""), [u, m] = h(-1), [V, k] = h(B), oe = ve(() => P()), g = E(null), C = E(null), O = E([]), D = r.value;
+    ...oe
+  } = U, [l, N] = h(!1), [p, v] = h(r.value || ""), [u, m] = h(-1), [V, k] = h(B), ne = ve(() => P()), g = E(null), C = E(null), O = E([]), D = r.value;
   !fe(D) && p !== D && v(D ?? ""), F(() => S({ value: p }), []), F(() => {
     const e = se();
     Se(V, g.current, e);
@@ -67,14 +67,14 @@ const Ue = (U) => {
   }, re = (e) => {
     switch (e.key) {
       case "ArrowDown": {
-        const n = u + 1;
-        l && t.length > n && (m(n), f(Number(n)), k(B));
+        const o = u + 1;
+        l && t.length > o && (m(o), f(Number(o)), k(B));
         return;
       }
       case "ArrowUp":
         if (l && u > 0) {
-          const n = u - 1;
-          m(n), f(Number(n)), k(Ie);
+          const o = u - 1;
+          m(o), f(Number(o)), k(Ie);
         }
         return;
       case "Enter":
@@ -85,26 +85,26 @@ const Ue = (U) => {
         P();
         break;
     }
-  }, se = () => [...O.current].find((e) => e.className.includes("active")), le = (e, n) => {
-    p !== e && K(e, n);
-  }, K = (e, n, o = !1) => {
-    N(l ? o ? !1 : l : !0), v(e), m(-1), S({ value: e }), f(-1);
+  }, se = () => [...O.current].find((e) => e.className.includes("active")), le = (e, o) => {
+    p !== e && K(e, o);
+  }, K = (e, o, n = !1) => {
+    N(l ? n ? !1 : l : !0), v(e), m(-1), S({ value: e }), f(-1);
     const { value: i, onChange: c = () => {
     } } = r;
-    e !== i && c(n, { newValue: e });
+    e !== i && c(o, { newValue: e });
   }, f = (e) => {
-    const n = e === -1 ? null : t[e];
-    L(n);
+    const o = e === -1 ? null : t[e];
+    L(o);
   }, ue = (e) => {
     v(""), m(-1), C.current && C.current.focus(), S({ value: "" }), f(-1), r.onClear && r.onClear();
-  }, ae = (e) => e.label ?? e[b ?? ""] ?? "", T = (e, n) => {
-    const s = (x || ae)(n);
+  }, ae = (e) => e.label ?? e[b ?? ""] ?? "", T = (e, o) => {
+    const s = (x || ae)(o);
     K(s, e, Q), q(e, {
-      suggestion: n,
+      suggestion: o,
       suggestionValue: s
     });
   }, ie = () => {
-    const { id: e, icon: n, value: o, ...s } = r, i = { id: M ?? e, ...s }, c = /* @__PURE__ */ d(
+    const { id: e, icon: o, value: n, ...s } = r, i = { id: M ?? e, ...s }, c = /* @__PURE__ */ d(
       he,
       {
         ...i,
@@ -117,10 +117,10 @@ const Ue = (U) => {
         value: X ? p : ""
       }
     );
-    return n || A || R ? /* @__PURE__ */ d(
+    return o || A || R ? /* @__PURE__ */ d(
       Ce,
       {
-        icon: n,
+        icon: o,
         leadingInputAddons: A,
         trailingInputAddons: R,
         children: c
@@ -134,25 +134,25 @@ const Ue = (U) => {
     );
     if (G)
       return /* @__PURE__ */ d(De, { className: e });
-    const n = ge(t);
-    return n && !w ? null : /* @__PURE__ */ _("ul", { role: "menu", className: e, ref: g, children: [
-      n && w && /* @__PURE__ */ d(ye, { message: w }, "NoItemMessage"),
-      t.map((o, s) => {
-        if (I && !o.label && !b)
+    const o = ge(t);
+    return o && !w ? null : /* @__PURE__ */ _("ul", { role: "menu", className: e, ref: g, children: [
+      o && w && /* @__PURE__ */ d(ye, { message: w }, "NoItemMessage"),
+      t.map((n, s) => {
+        if (I && !n.label && !b)
           throw new Error(
             'The "customSuggestionKey" need to be set when using a custom renderer and not using the "label" prop for suggestions'
           );
-        const i = `index-${o.label ?? o[b ?? ""]}`;
-        if (o.header && o.label)
-          return /* @__PURE__ */ d(we, { label: o.label }, i);
+        const i = `index-${n.label ?? n[b ?? ""]}`;
+        if (n.header && n.label)
+          return /* @__PURE__ */ d(we, { label: n.label }, i);
         const c = I || ce;
         return /* @__PURE__ */ d(
           Ne,
           {
             active: s === u,
-            disabled: o.disabled,
-            value: o.customSuggestion ? o.customSuggestion : c(o),
-            onSelect: (Ee, me) => T(me, o),
+            disabled: n.disabled,
+            value: n.customSuggestion ? n.customSuggestion : c(n),
+            onSelect: (Ee, me) => T(me, n),
             index: s
           },
           i
@@ -166,7 +166,7 @@ const Ue = (U) => {
     H.dropup && "dropup",
     ee
   );
-  return /* @__PURE__ */ _("div", { ...ne, className: pe, onKeyDown: re, ref: oe, children: [
+  return /* @__PURE__ */ _("div", { ...oe, className: pe, onKeyDown: re, ref: ne, children: [
     ie(),
     de()
   ] });