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

package/components/assetTree/AssetTree.js

@@ -1,102 +1,83 @@
-import { jsxs as A, jsx as d } from "react/jsx-runtime";
-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 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, ye = 0, m = {
-  MODE_FLY: "fly",
-  MODE_FLUID: "fluid"
-}, 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 !== o && "position-offscreen pointer-events-none"
-  );
-  return /* @__PURE__ */ d("div", { className: p, children: t });
-}), 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 = ye,
-      height: D,
-      bordered: I = !1,
-      currentCategoryId: r,
-      isOpen: n = !0,
-      useOffscreen: O = !1,
-      fly: i = !1,
-      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([o, h]);
-    fe(a) !== a && z(a);
-    const [U, j] = f(i);
-    U !== i && (H(W(i)), j(i));
-    const l = R.Children.toArray(c);
-    ie(l.every(ge), 'AssetTree only excepts children of type "TreeCategory"');
-    const Y = g(
-      "AssetTree",
-      t,
-      !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 = r ? Te(l, r) : V, Z = {
-      width: F,
-      height: D
-    }, y = () => N(!n), q = (s) => {
-      S(s), n ? n && r === s && y() : y();
-    }, J = (s) => {
-      const $ = window.innerWidth * 0.5, ee = C || $;
-      z((se) => {
-        const te = se - s;
-        return ce(M, ee, te);
-      });
-    }, K = () => {
-      const s = b(h);
-      s && s.classList.add("pointer-events-none"), v(!0);
-    }, Q = () => {
-      const s = b(h);
-      s && s.classList.remove("pointer-events-none"), v(!1), _();
-    };
-    return /* @__PURE__ */ A("div", { ...w, className: Y, style: Z, ref: P, children: [
-      /* @__PURE__ */ d("div", { className: k, style: G }),
-      /* @__PURE__ */ A("div", { className: "AssetTreeContent", children: [
-        /* @__PURE__ */ d(
-          ae,
-          {
-            onSelectCategory: q,
-            currentCategoryId: r,
-            onClick: y,
-            children: L(c) ? c : [c]
-          }
-        ),
-        /* @__PURE__ */ d(me, { slideIn: !0, className: "AssetTreeBody", children: O ? ue(l, r) : X })
-      ] }),
-      p && n && /* @__PURE__ */ d(
-        u,
-        {
-          onResizeStart: K,
-          onResize: J,
-          onResizeEnd: Q,
-          direction: u.HORIZONTAL,
-          position: u.RIGHT
-        }
-      )
-    ] });
-  })
-);
-Object.assign(Re, m);
-export {
-  Re as default
-};
-//# sourceMappingURL=AssetTree.js.map
+import e from "../../hooks/usePrevious.js";
+import "../../usePrevious.js";
+import t from "../../utils/classNames.js";
+import n from "../../utils/mergeRefs.js";
+import r from "./TreeCategory.js";
+import i from "../smoothScrollbars/SmoothScrollbars.js";
+import a from "../resizer/Resizer.js";
+import o from "../../utils/getWidthInBoundaries.js";
+import s from "./TreeSidebar.js";
+import c, { forwardRef as l, memo as u, useRef as d, useState as f } from "react";
+import { head as p, isArray as m, noop as h } from "es-toolkit/compat";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import v from "tiny-invariant";
+//#region src/components/assetTree/AssetTree.tsx
+var y = 350, b = 100, x = 0, S = {
+	MODE_FLY: "fly",
+	MODE_FLUID: "fluid"
+}, C = (e) => p(e?.current?.getElementsByClassName("AssetTreeBody")), w = (e, t) => m(e) ? e.find((e) => e && e.props.id === t) : e, T = (e, n) => c.Children.map(e, (e) => /* @__PURE__ */ g("div", {
+	className: t("TreeOffscreenWrapper", e && e.props.id !== n && "position-offscreen pointer-events-none"),
+	children: e
+})), ee = (e) => c.isValidElement(e) && e.type === r, E = u(l((r, l) => {
+	let { className: u, resizable: E = !0, width: D = y, minWidth: te = b, maxWidth: O = x, height: k, bordered: A = !1, currentCategoryId: j, isOpen: M = !0, useOffscreen: N = !1, fly: P = !1, onCategoryChange: F = h, onToggleTree: I = h, onResizeEnd: L = h, children: R = [], ...z } = r, B = (e) => e ? S.MODE_FLY : S.MODE_FLUID, [V, H] = f(D), [U, W] = f(!1), [G, K] = f(B(P)), q = d(null), J = n([l, q]);
+	e(D) !== D && H(D);
+	let [Y, X] = f(P);
+	Y !== P && (K(B(P)), X(P));
+	let Z = c.Children.toArray(R);
+	v(Z.every(ee), "AssetTree only excepts children of type \"TreeCategory\"");
+	let Q = t("AssetTree", u, !M && "closed", A && "border", G === S.MODE_FLY ? "fly" : "fluid"), ne = t("AssetTreeResizeLimit", U && "display-block"), re = { left: O || window.innerWidth * .5 }, ie = p(Z), ae = j ? w(Z, j) : ie, oe = {
+		width: V,
+		height: k
+	}, $ = () => I(!M), se = (e) => {
+		F(e), M ? M && j === e && $() : $();
+	}, ce = (e) => {
+		let t = window.innerWidth * .5, n = O || t;
+		H((t) => {
+			let r = t - e;
+			return o(te, n, r);
+		});
+	}, le = () => {
+		let e = C(q);
+		e && e.classList.add("pointer-events-none"), W(!0);
+	}, ue = () => {
+		let e = C(q);
+		e && e.classList.remove("pointer-events-none"), W(!1), L();
+	};
+	return /* @__PURE__ */ _("div", {
+		...z,
+		className: Q,
+		style: oe,
+		ref: J,
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: ne,
+				style: re
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "AssetTreeContent",
+				children: [/* @__PURE__ */ g(s, {
+					onSelectCategory: se,
+					currentCategoryId: j,
+					onClick: $,
+					children: m(R) ? R : [R]
+				}), /* @__PURE__ */ g(i, {
+					slideIn: !0,
+					className: "AssetTreeBody",
+					children: N ? T(Z, j) : ae
+				})]
+			}),
+			E && M && /* @__PURE__ */ g(a, {
+				onResizeStart: le,
+				onResize: ce,
+				onResizeEnd: ue,
+				direction: a.HORIZONTAL,
+				position: a.RIGHT
+			})
+		]
+	});
+}));
+Object.assign(E, S);
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=AssetTree.js.map

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    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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"}
+{"version":3,"file":"AssetTree.js","names":[],"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\ntype AssetTreeChildProps = {\n    id?: string;\n};\n\nconst getCurrentCategoryElement = (children: React.ReactElement<AssetTreeChildProps>[], currentCategoryId: string) =>\n    isArray(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;\n\nconst renderTreesOffscreen = (children: React.ReactElement<AssetTreeChildProps>[], 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"],"mappings":"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"}

package/components/assetTree/Tree.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { IconType } from '../icon/Icon';
 export { getTypeCounts, getSubTypeCounts } from './treeUtils';
 export type TreeItemName = {
     firstName?: string;
@@ -22,25 +23,37 @@ export type TreeGroup = {
      */
     disabled?: boolean;
     /**
-     * The rioglyph icon name for a group.
+     * The uikit-icon icon name for a group.
      *
-     * The prefix `rioglyph-` can be omitted.
+     * The prefix `icon-` can be omitted.
      *
      * For custom icons and logos, provide an image URL with one of these extensions:
      * `.png`, `.webp`, `.jpg`, `.jpeg`, `.svg`.
-     * In this case, an img tag is rendered instead of the rioglyph.
+     * In this case, an img tag is rendered instead of the uikit-icon.
      */
-    icon?: string;
+    iconName?: IconType;
     /**
-     * The rioglyph icon name for a expanded group.
+     * Legacy alias for `iconName`.
      *
-     * The prefix `rioglyph-` can be omitted.
+     * @deprecated Use `iconName` instead.
+     */
+    icon?: IconType;
+    /**
+     * The uikit-icon icon name for a expanded group.
+     *
+     * The prefix `icon-` can be omitted.
      *
      * For custom icons and logos, provide an image URL with one of these extensions:
      * `.png`, `.webp`, `.jpg`, `.jpeg`, `.svg`.
-     * In this case, an img tag is rendered instead of the rioglyph.
+     * In this case, an img tag is rendered instead of the uikit-icon.
+     */
+    expandedIconName?: IconType;
+    /**
+     * Legacy alias for `expandedIconName`.
+     *
+     * @deprecated Use `expandedIconName` instead.
      */
-    expandedIcon?: string;
+    expandedIcon?: IconType;
     /**
      * Additional classes added to the group element.
      */
@@ -64,9 +77,9 @@ export type TreeItem = {
      * The primary type of the item.
      *
      * This is also used as the fallback icon name and refers to the name of the respective
-     * rioglyph icon (excluding the `rioglyph-` prefix).
+     * uikit-icon icon (excluding the `icon-` prefix).
      */
-    type: string;
+    type: IconType;
     /**
      * Optional icon override for the item.
      *
@@ -78,16 +91,22 @@ export type TreeItem = {
      *
      * For custom icons and logos, provide an image URL with one of these extensions:
      * `.png`, `.webp`, `.jpg`, `.jpeg`, `.svg`.
-     * In this case, an img tag is rendered instead of the rioglyph.
+     * In this case, an img tag is rendered instead of the uikit-icon.
      */
-    icon?: string | null;
+    iconName?: IconType | null;
+    /**
+     * Legacy alias for `iconName`.
+     *
+     * @deprecated Use `iconName` instead.
+     */
+    icon?: IconType | null;
     /**
      * Optional sub-type of the item.
      *
-     * This refers to the name of an additional rioglyph icon (excluding the `rioglyph-` prefix),
+     * This refers to the name of an additional uikit-icon icon (excluding the `icon-` prefix),
      * typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop).
      */
-    subType?: string;
+    subType?: IconType;
     /**
      * Optional pair icon override for the subType.
      *
@@ -97,7 +116,13 @@ export type TreeItem = {
      *
      * This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons.
      */
-    pairIcon?: string | null | undefined;
+    pairIconName?: IconType | null | undefined;
+    /**
+     * Legacy alias for `pairIconName`.
+     *
+     * @deprecated Use `pairIconName` instead.
+     */
+    pairIcon?: IconType | null | undefined;
     /**
      * List of group ids the items is associated with.
      *