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

package/components/applicationLayout/ApplicationLayoutHeader.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-const ApplicationLayoutHeader = forwardRef((props, ref) => {
-    const { className, children, ...remainingProps } = props;
-    const classes = classNames('ApplicationLayoutHeader', className);
-    return (_jsx("div", { ref: ref, ...remainingProps, className: classes, id: 'ApplicationLayoutHeader', children: children }));
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import p from "classnames";
+const d = c((a, o) => {
+  const { className: r, children: e, ...s } = a, t = p("ApplicationLayoutHeader", r);
+  return /* @__PURE__ */ i("div", { ref: o, ...s, className: t, id: "ApplicationLayoutHeader", children: e });
 });
-export default ApplicationLayoutHeader;
+export {
+  d as default
+};
+//# sourceMappingURL=ApplicationLayoutHeader.js.map

package/components/applicationLayout/ApplicationLayoutHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationLayoutHeader.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutHeader.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\nimport classNames from 'classnames';\n\nexport type ApplicationLayoutHeaderProps = {\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutHeaderProps>;\n\nconst ApplicationLayoutHeader = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const classes = classNames('ApplicationLayoutHeader', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes} id='ApplicationLayoutHeader'>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutHeader;\n"],"names":["ApplicationLayoutHeader","forwardRef","props","ref","className","children","remainingProps","classes","classNames","jsx"],"mappings":";;;AAaA,MAAMA,IAA0BC,EAAW,CAACC,GAAcC,MAAa;AACnE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAUC,EAAW,2BAA2BJ,CAAS;AAE/D,SACI,gBAAAK,EAAC,SAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAAS,IAAG,2BACrD,UAAAF,EAAA,CACL;AAER,CAAC;"}

package/components/applicationLayout/ApplicationLayoutSidebar.d.ts

@@ -4,7 +4,7 @@ export type ApplicationLayoutSidebarProps = {
      */
     className?: string;
 };
-declare const ApplicationLayoutSidebar: import("react").ForwardRefExoticComponent<ApplicationLayoutSidebarProps & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare const ApplicationLayoutSidebar: import('react').ForwardRefExoticComponent<ApplicationLayoutSidebarProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutSidebar;

package/components/applicationLayout/ApplicationLayoutSidebar.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-const ApplicationLayoutSidebar = forwardRef((props, ref) => {
-    const { className, children, ...remainingProps } = props;
-    const classes = classNames('ApplicationLayoutSidebar', className);
-    return (_jsx("div", { ref: ref, ...remainingProps, className: classes, children: children }));
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import m from "classnames";
+const d = c((a, o) => {
+  const { className: r, children: s, ...i } = a, t = m("ApplicationLayoutSidebar", r);
+  return /* @__PURE__ */ e("div", { ref: o, ...i, className: t, children: s });
 });
-export default ApplicationLayoutSidebar;
+export {
+  d as default
+};
+//# sourceMappingURL=ApplicationLayoutSidebar.js.map

package/components/applicationLayout/ApplicationLayoutSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationLayoutSidebar.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutSidebar.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\nimport classNames from 'classnames';\n\nexport type ApplicationLayoutSidebarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutSidebarProps>;\n\nconst ApplicationLayoutSidebar = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n    const classes = classNames('ApplicationLayoutSidebar', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutSidebar;\n"],"names":["ApplicationLayoutSidebar","forwardRef","props","ref","className","children","remainingProps","classes","classNames"],"mappings":";;;AAaA,MAAMA,IAA2BC,EAAW,CAACC,GAAcC,MAAa;AACpE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAC7CK,IAAUC,EAAW,4BAA4BJ,CAAS;AAEhE,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGG,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;"}

package/components/applicationLayout/SubNavigation.d.ts

@@ -1,7 +1,7 @@
-import type { ModulePropType } from '../applicationHeader/ApplicationHeader';
+import { ModulePropType } from '../applicationHeader/ApplicationHeader';
 export type SubNavigationProps = {
     navItems?: ModulePropType[];
     className?: string;
 };
-declare const SubNavigation: import("react").ForwardRefExoticComponent<SubNavigationProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SubNavigation: import('react').ForwardRefExoticComponent<SubNavigationProps & import('react').RefAttributes<HTMLDivElement>>;
 export default SubNavigation;

package/components/applicationLayout/SubNavigation.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-const SubNavigation = forwardRef((props, ref) => {
-    const { className, navItems = [], ...remainingProps } = props;
-    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);
-    return (_jsx("div", { ref: ref, ...remainingProps, className: navigationClasses, children: _jsx("ul", { className: 'SubmoduleNavigation nav', children: navItems.map(navItem => (_jsx("li", { className: 'submodule', "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key))) }) }));
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import n from "classnames";
+const N = m((s, e) => {
+  const { className: i, navItems: r = [], ...t } = s, l = n("SubNavigation", "width-100pct overflow-auto", i);
+  return /* @__PURE__ */ o("div", { ref: e, ...t, className: l, children: /* @__PURE__ */ o("ul", { className: "SubmoduleNavigation nav", children: r.map((a) => /* @__PURE__ */ o("li", { className: "submodule", "data-nav-item-key": a.key, children: a.route }, a.key)) }) });
 });
-export default SubNavigation;
+export {
+  N as default
+};
+//# sourceMappingURL=SubNavigation.js.map

package/components/applicationLayout/SubNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubNavigation.js","sources":["../../../src/components/applicationLayout/SubNavigation.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef } from 'react';\nimport classNames from 'classnames';\n\nimport type { ModulePropType } from '../applicationHeader/ApplicationHeader';\n\nexport type SubNavigationProps = {\n    navItems?: ModulePropType[];\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\n\nconst SubNavigation = forwardRef((props: SubNavigationProps, ref: Ref) => {\n    const { className, navItems = [], ...remainingProps } = props;\n\n    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <ul className='SubmoduleNavigation nav'>\n                {navItems.map(navItem => (\n                    <li className='submodule' key={navItem.key} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n});\n\nexport default SubNavigation;\n"],"names":["SubNavigation","forwardRef","props","ref","className","navItems","remainingProps","navigationClasses","classNames","jsx","navItem"],"mappings":";;;AAYA,MAAMA,IAAgBC,EAAW,CAACC,GAA2BC,MAAa;AACtE,QAAM,EAAE,WAAAC,GAAW,UAAAC,IAAW,CAAA,GAAI,GAAGC,MAAmBJ,GAElDK,IAAoBC,EAAW,iBAAiB,8BAA8BJ,CAAS;AAE7F,SACI,gBAAAK,EAAC,OAAA,EAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAC1C,UAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,2BACT,UAAAJ,EAAS,IAAI,CAAAK,MACV,gBAAAD,EAAC,MAAA,EAAG,WAAU,aAA8B,qBAAmBC,EAAQ,KAClE,UAAAA,EAAQ,SADkBA,EAAQ,GAEvC,CACH,EAAA,CACL,GACJ;AAER,CAAC;"}

package/components/aspectRatioPlaceholder/AspectRatioPlaceholder.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 export type AspectRatioPlaceholderProps = {
     /** Defines the aspect ratio width. @default 16 */
     height?: number;

package/components/aspectRatioPlaceholder/AspectRatioPlaceholder.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const AspectRatioPlaceholder = (props) => {
-    const { width = 16, height = 9, className = '', children } = props;
-    return (_jsx("div", { className: `position-relative ${className}`, style: { aspectRatio: `${width} / ${height}` }, children: children }));
+import { jsx as o } from "react/jsx-runtime";
+const l = (t) => {
+  const { width: e = 16, height: s = 9, className: a = "", children: i } = t;
+  return /* @__PURE__ */ o("div", { className: `position-relative ${a}`, style: { aspectRatio: `${e} / ${s}` }, children: i });
 };
-export default AspectRatioPlaceholder;
+export {
+  l as default
+};
+//# sourceMappingURL=AspectRatioPlaceholder.js.map

package/components/aspectRatioPlaceholder/AspectRatioPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatioPlaceholder.js","sources":["../../../src/components/aspectRatioPlaceholder/AspectRatioPlaceholder.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type AspectRatioPlaceholderProps = {\n    /** Defines the aspect ratio width. @default 16 */\n    height?: number;\n    /** Defines the aspect ratio height. @default 9 */\n    width?: number;\n    /** Additional class names that are added to the wrapping element. */\n    className?: string;\n};\n\nconst AspectRatioPlaceholder = (props: AspectRatioPlaceholderProps & PropsWithChildren) => {\n    const { width = 16, height = 9, className = '', children } = props;\n\n    return (\n        <div className={`position-relative ${className}`} style={{ aspectRatio: `${width} / ${height}` }}>\n            {children}\n        </div>\n    );\n};\n\nexport default AspectRatioPlaceholder;\n"],"names":["AspectRatioPlaceholder","props","width","height","className","children","jsx"],"mappings":";AAWA,MAAMA,IAAyB,CAACC,MAA2D;AACvF,QAAM,EAAE,OAAAC,IAAQ,IAAI,QAAAC,IAAS,GAAG,WAAAC,IAAY,IAAI,UAAAC,MAAaJ;AAE7D,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAW,qBAAqBF,CAAS,IAAI,OAAO,EAAE,aAAa,GAAGF,CAAK,MAAMC,CAAM,GAAA,GACvF,UAAAE,GACL;AAER;"}

package/components/assetTree/AssetTree.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type AssetTreeProps = {
     /**
      * Defines if the component will overlap the body content.

package/components/assetTree/AssetTree.js

@@ -1,104 +1,102 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { memo, useState, useRef, forwardRef } from 'react';
-import classNames from 'classnames';
-import { head, isArray, noop } from 'es-toolkit/compat';
-import invariant from 'tiny-invariant';
-import TreeCategory from "./TreeCategory.js";
-import Resizer from "../resizer/Resizer.js";
-import TreeSidebar from "./TreeSidebar.js";
-import getWidthInBoundaries from "../../utils/getWidthInBoundaries.js";
-import mergeRefs from "../../utils/mergeRefs.js";
-import usePrevious from "../../usePrevious.js";
-import SmoothScrollbars from "../smoothScrollbars/SmoothScrollbars.js";
-const DEFAULT_WIDTH = 350;
-const DEFAULT_MIN_WIDTH = 100;
-const DEFAULT_MAX_WIDTH = 0;
-const TreeMode = {
-    MODE_FLY: 'fly',
-    MODE_FLUID: 'fluid',
-};
-const getSidebarBodyRef = (sidebarRef) => head(sidebarRef?.current?.getElementsByClassName('AssetTreeBody'));
-const getCurrentCategoryElement = (children, currentCategoryId) => {
-    return isArray(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;
-};
-const renderTreesOffscreen = (children, categoryId) => {
-    return React.Children.map(children, child => {
-        const offscreenClasses = classNames('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen pointer-events-none');
-        return _jsx("div", { className: offscreenClasses, children: child });
-    });
-};
-// Check if the child is a React element and if it has the type TreeCategory
-const isTreeCategory = (child) => {
-    return React.isValidElement(child) && child.type === TreeCategory;
-};
-const AssetTree = memo(forwardRef((props, ref) => {
-    const { className, resizable = true, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, height, bordered = false, currentCategoryId, isOpen = true, useOffscreen = false, fly = false, onCategoryChange = noop, onToggleTree = noop, onResizeEnd = noop, children = [], ...remainingProps } = props;
-    const getSidebarMode = (isFly) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);
-    const [treeWidth, setTreeWidth] = useState(width);
-    const [isResize, setIsResize] = useState(false);
-    const [sidebarMode, setSidebarMode] = useState(getSidebarMode(fly));
-    const sidebarRef = useRef(null);
-    const mergedRefs = mergeRefs([ref, sidebarRef]);
-    // Update internal state when props change
-    const previousWidth = usePrevious(width);
-    if (previousWidth !== width) {
-        setTreeWidth(width);
-    }
-    const [previousMode, setPreviousMode] = useState(fly);
-    if (previousMode !== fly) {
-        setSidebarMode(getSidebarMode(fly));
-        setPreviousMode(fly);
-    }
-    const childrenArray = React.Children.toArray(children);
-    // check for children type of TreeCategory and throw error in case
-    invariant(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type "TreeCategory"');
-    const classes = classNames('AssetTree', className, !isOpen && 'closed', bordered && 'border', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
-    const resizeLimitClasses = classNames('AssetTreeResizeLimit', isResize && 'display-block');
-    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
-    const resizeLimitStyle = { left: resizeIndicatorPosition };
-    const firstChild = head(childrenArray);
-    const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;
-    const style = {
-        width: treeWidth,
-        height,
-    };
-    const handleToggleTreeContent = () => onToggleTree(!isOpen);
-    const handleSelectCategory = (selectedCategoryId) => {
-        onCategoryChange(selectedCategoryId);
-        if (!isOpen) {
-            handleToggleTreeContent();
-        }
-        else if (isOpen && currentCategoryId === selectedCategoryId) {
-            handleToggleTreeContent();
-        }
-    };
-    const handleResize = (diff) => {
-        const halfWindowWidth = window.innerWidth * 0.5;
-        const usedMaxWidth = maxWidth || halfWindowWidth;
-        // Check for sidebar width if it is half window size. If it was before but the sidebar was resized so it is
-        // no longer half window size, set the sidebar width to half the window size to avoid jumping sidebar
-        // to old width
-        setTreeWidth(oldWidth => {
-            const updatedWidth = oldWidth - diff;
-            return getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
-        });
-    };
-    const handleResizeStart = () => {
-        const body = getSidebarBodyRef(sidebarRef);
-        if (body) {
-            body.classList.add('pointer-events-none');
-        }
-        setIsResize(true);
+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 g from "classnames";
+import { noop as y, head as E, isArray as L } from "es-toolkit/compat";
+import ie from "tiny-invariant";
+import de from "./TreeCategory.js";
+import T 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 = {
+  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) => {
+  const p = g(
+    "TreeOffscreenWrapper",
+    t && t.props.id !== r && "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) => {
+    const {
+      className: t,
+      resizable: p = !0,
+      width: a = pe,
+      minWidth: M = he,
+      maxWidth: C = ue,
+      height: D,
+      bordered: I = !1,
+      currentCategoryId: o,
+      isOpen: n = !0,
+      useOffscreen: O = !1,
+      fly: i = !1,
+      onCategoryChange: S = y,
+      onToggleTree: N = y,
+      onResizeEnd: _ = y,
+      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]);
+    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 = o ? ye(l, o) : V, Z = {
+      width: F,
+      height: D
+    }, u = () => N(!n), q = (s) => {
+      S(s), n ? n && o === s && u() : u();
+    }, 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), _();
     };
-    const handleResizeEnd = () => {
-        const body = getSidebarBodyRef(sidebarRef);
-        if (body) {
-            body.classList.remove('pointer-events-none');
+    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: o,
+            onClick: u,
+            children: L(c) ? c : [c]
+          }
+        ),
+        /* @__PURE__ */ d(me, { slideIn: !0, className: "AssetTreeBody", children: O ? Te(l, o) : X })
+      ] }),
+      p && n && /* @__PURE__ */ d(
+        T,
+        {
+          onResizeStart: K,
+          onResize: J,
+          onResizeEnd: Q,
+          direction: T.HORIZONTAL,
+          position: T.RIGHT
         }
-        setIsResize(false);
-        onResizeEnd();
-    };
-    return (_jsxs("div", { ...remainingProps, className: classes, style: style, ref: mergedRefs, children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", { className: 'AssetTreeContent', children: [_jsx(TreeSidebar, { onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent, children: isArray(children) ? children : [children] }), _jsx(SmoothScrollbars, { slideIn: true, className: 'AssetTreeBody', children: useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category })] }), resizable && isOpen && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: Resizer.RIGHT }))] }));
-}));
-Object.assign(AssetTree, TreeMode);
-export default AssetTree;
+      )
+    ] });
+  })
+);
+Object.assign(Re, m);
+export {
+  Re as default
+};
+//# sourceMappingURL=AssetTree.js.map

package/components/assetTree/AssetTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetTree.js","sources":["../../../src/components/assetTree/AssetTree.tsx"],"sourcesContent":["import React, { memo, useState, useRef, forwardRef, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { head, isArray, noop } from 'es-toolkit/compat';\nimport invariant from 'tiny-invariant';\n\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     * 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     * @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     * @param selectedCategoryId\n     * @returns\n     */\n    onCategoryChange?: (selectedCategoryId: string) => void;\n\n    /**\n     * Callback for when the resize is done.\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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"}

package/components/assetTree/Tree.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export { getTypeCounts, getSubTypeCounts } from './treeUtils';
 export type TreeItemName = {
     firstName?: string;