@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

package/lib/es/components/animatedNumber/AnimatedNumber.d.ts

@@ -1,21 +1,78 @@
-import React from 'react';
-export type AnimatedNumberProps = {
-    /** The start value */
+import React, { type HTMLAttributes } from 'react';
+export type AnimatedNumberProps = HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The start value.
+     */
     start: number;
-    /** The end value. */
+    /**
+     * The end value.
+     */
     end: number;
-    /** A prefix to be added to the final string. */
+    /**
+     * A prefix to be added to the final string.
+     */
     prefix?: string;
-    /** A unit suffix to be added to the final string. */
+    /**
+     * A unit suffix to be added to the final string.
+     */
     unit?: string;
-    /** The speed in milliseconds to count up or down. @default 10 */
+    /**
+     * The speed in milliseconds to count up or down.
+     *
+     * @default 10
+     */
     speed?: number;
-    /** Enables to count backwards. @default false */
+    /**
+     * Enables to count backwards.
+     *
+     * @default false
+     */
     decreasing?: boolean;
-    /** Callback function to be invoked when the end value is reached. */
+    /**
+     * Callback function to be invoked when the end value is reached.
+     */
     onEnd?: VoidFunction;
-    /** Additional classes to be set on the wrapping element. */
+    /**
+     * Additional classes to be set on the wrapping element.
+     */
     className?: string;
 };
-export declare const AnimatedNumber: React.ForwardRefExoticComponent<AnimatedNumberProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const AnimatedNumber: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The start value.
+     */
+    start: number;
+    /**
+     * The end value.
+     */
+    end: number;
+    /**
+     * A prefix to be added to the final string.
+     */
+    prefix?: string | undefined;
+    /**
+     * A unit suffix to be added to the final string.
+     */
+    unit?: string | undefined;
+    /**
+     * The speed in milliseconds to count up or down.
+     *
+     * @default 10
+     */
+    speed?: number | undefined;
+    /**
+     * Enables to count backwards.
+     *
+     * @default false
+     */
+    decreasing?: boolean | undefined;
+    /**
+     * Callback function to be invoked when the end value is reached.
+     */
+    onEnd?: VoidFunction | undefined;
+    /**
+     * Additional classes to be set on the wrapping element.
+     */
+    className?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
 export default AnimatedNumber;

package/lib/es/components/applicationHeader/AppMenuDropdown.js

@@ -20,7 +20,7 @@ const DropdownMenu = (props) => {
     if ((0, isEmpty_1.default)(children)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ role: 'menu', className: 'dropdown-menu' }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ role: 'menu', className: 'dropdown-menu ModuleNavigation-dropdown-menu' }, { children: children })));
 };
 const AppMenuDropdownOpener = (0, react_1.forwardRef)((props, ref) => {
     const { open, children, onDropdownClick } = props;

package/lib/es/components/applicationHeader/ApplicationActionBar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export type ApplicationActionBarProps = {
     items?: React.ReactNode[];
-    nodeRef: React.MutableRefObject<HTMLUListElement | null> | undefined;
+    nodeRef?: React.MutableRefObject<HTMLUListElement | null> | undefined;
     className?: string;
 };
 declare const ApplicationActionBar: (props: ApplicationActionBarProps) => import("react/jsx-runtime").JSX.Element;

package/lib/es/components/applicationHeader/ApplicationHeader.d.ts

@@ -8,7 +8,10 @@ export type ModulePropType = {
      * The navigation link component used for rendering the name and for routing.
      *
      * @example
+     *
+     * ```tsx
      * <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>
+     * ```
      */
     route: React.ReactNode;
 };
@@ -22,7 +25,10 @@ export type ApplicationHeaderProps = {
      * as homeRoute into the header. For example:
      *
      * @example
+     *
+     * ```tsx
      * <NavLink to='https://home.rio.cloud' />
+     * ```
      */
     homeRoute?: React.ReactNode;
     /**
@@ -31,8 +37,9 @@ export type ApplicationHeaderProps = {
     showHomeIcon?: boolean;
     /**
      * The component for the navigation between apps which will be shown inside the main dropdown.
-     * Platform apps may use the default AppNavigator but there are also other cases like support apps
-     * where it's just a simple list In this case, use the prop `appMenuItems`.
+     *
+     * Platform apps may use the default AppNavigator, but there are also cases like support apps where it's just a
+     * simple list In this case, use the prop `appMenuItems`.
      *
      * If no appNavigator is defined, the dropdown menu will not be rendered.
      */
@@ -46,19 +53,22 @@ export type ApplicationHeaderProps = {
      */
     appMenuItems?: ModulePropType[];
     /**
-     * List of sub-module navigation component of an app. Items collapse into a dropdown if remaining
-     * space in the header is not sufficient.
+     * List of submodule navigation component of an app.
+     *
+     * Items collapse into a dropdown if remaining space in the header is not sufficient.
      */
     navItems?: ModulePropType[];
     /**
-     * List of external smart components like the rio-accountmenu or application owned components
-     * such as a ServiceInfo icon. These components are based on the `ActionBarItem`
+     * List of external smart components.
+     *
+     * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components
+     * are based on the `ActionBarItem`.
      */
     actionBarItems?: React.ReactNode[];
     /**
      * Callback function triggered when the application menu is open or closed.
-     * @param isOpen
-     * @returns
+     *
+     * @param isOpen The new "open" state.
      */
     onToggleAppMenu?: (isOpen: boolean) => void;
     /**

package/lib/es/components/applicationLayout/ApplicationLayout.d.ts

@@ -6,7 +6,7 @@ export type ApplicationLayoutProps = {
     /**
      * A React ref function assigned to the wrapper element.
      */
-    layoutRef?: MutableRefObject<HTMLDivElement>;
+    layoutRef?: MutableRefObject<HTMLDivElement | null>;
     /**
      * Additional class names that are added to the respective component
      */

package/lib/es/components/applicationLayout/ApplicationLayout.js

@@ -8,9 +8,10 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ApplicationLayoutHeader_1 = tslib_1.__importDefault(require("./ApplicationLayoutHeader"));
 const ApplicationLayoutSidebar_1 = tslib_1.__importDefault(require("./ApplicationLayoutSidebar"));
 const ApplicationLayoutBody_1 = tslib_1.__importDefault(require("./ApplicationLayoutBody"));
+const initDocumentBootstrapping_1 = require("../../utils/init/initDocumentBootstrapping");
 // initializes document bootstrapping - keep the import to avoid being tree-shaken
-const init_1 = require("../../utils/init");
-init_1.initDocumentBootstrapping;
+// noinspection JSIgnoredPromiseFromCall
+(0, initDocumentBootstrapping_1.initDocumentBootstrapping)();
 const ApplicationLayout = (0, react_1.forwardRef)((props, ref) => {
     const { className, layoutRef, children } = props, remainingProps = tslib_1.__rest(props, ["className", "layoutRef", "children"]);
     const classes = (0, classnames_1.default)('ApplicationLayout', className);

package/lib/es/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -2,12 +2,14 @@ import React from 'react';
 export type ApplicationLayoutBodyProps = {
     /**
      * Show scroll to top button after scrolling the content.
+     *
      * @default true
      */
     enableScrollToTop?: boolean;
     /**
      * Always show vertical scrollbar to prevent the content from jumping.
-     * @default false
+     *
+     * @default true
      */
     forceScrollbar?: boolean;
     /**
@@ -24,6 +26,7 @@ export type ApplicationLayoutBodyProps = {
     bottomBar?: React.ReactNode;
     /**
      * Height of the bottomBar in pixel.
+     *
      * @default 54
      */
     bottomBarHeight?: number;

package/lib/es/components/applicationLayout/ApplicationLayoutBody.js

@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SmoothScrollbars_1 = tslib_1.__importDefault(require("../smoothScrollbars/SmoothScrollbars"));
 const RESIZE_THROTTLING = 200;
 const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
 const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
-    const { className, innerClassName, forceScrollbar = false, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
+    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
     const [offset, setOffset] = (0, react_1.useState)(0);
     const moduleContentRef = (0, react_1.useRef)(null);
     const layoutBodyRef = (0, react_1.useRef)(null);
@@ -21,24 +22,31 @@ const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
     }, [bottomBarHeight]);
     const handleScroll = (0, debounce_1.default)(RESIZE_THROTTLING)(() => {
         if (moduleContentRef.current) {
-            setOffset(moduleContentRef.current.scrollTop);
+            setOffset(moduleContentRef.current.getScrollTop());
         }
     });
     const handleToTop = () => {
+        var _a;
         if (!moduleContentRef.current) {
             return;
         }
-        const currentScroll = moduleContentRef.current.scrollTop;
+        const scrollWrapper = moduleContentRef.current.container;
+        const scrollingElement = scrollWrapper.firstElementChild;
+        const currentScroll = (_a = scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.scrollTop) !== null && _a !== void 0 ? _a : 0;
         if (currentScroll > 0) {
             window.requestAnimationFrame(handleToTop);
-            moduleContentRef.current.scrollTo(0, currentScroll - currentScroll / 5);
+            scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.scrollTo(0, currentScroll - currentScroll / 5);
+            scrollWrapper.classList.add('is-scrolling-to-top');
             setOffset(currentScroll);
         }
+        else {
+            scrollWrapper.classList.remove('is-scrolling-to-top');
+        }
     };
     const classes = (0, classnames_1.default)('ApplicationLayoutBody', bottomBar && 'has-footer', className);
-    const innerClasses = (0, classnames_1.default)('module-content', forceScrollbar && 'overflow-y-scroll', innerClassName && innerClassName);
+    const innerClasses = (0, classnames_1.default)('module-content', innerClassName && innerClassName);
     const offsetThreshold = window.innerHeight * 0.1;
     const scrollToTopClasses = (0, classnames_1.default)('scroll-to-top', offset > offsetThreshold && 'in');
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { ref: layoutBodyRef, className: classes }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'module-content-wrapper' }, { children: [navigation && navigation, banner && banner, (0, jsx_runtime_1.jsx)("div", Object.assign({ className: innerClasses, onScroll: handleScroll, ref: moduleContentRef }, { children: children }))] })), enableScrollToTop && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: scrollToTopClasses }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-up' }) })) })))] })), bottomBar && bottomBar] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { ref: layoutBodyRef, className: classes }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'module-content-wrapper' }, { children: [navigation && navigation, banner && banner, (0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, Object.assign({ ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll }, { children: children }))] })), enableScrollToTop && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: scrollToTopClasses }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-up' }) })) })))] })), bottomBar && bottomBar] }));
 });
 exports.default = ApplicationLayoutBody;

package/lib/es/components/applicationLayout/SubNavigation.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const SubNavigation = (0, react_1.forwardRef)((props, ref) => {
     const { className, navItems = [] } = props, remainingProps = tslib_1.__rest(props, ["className", "navItems"]);
-    const navigationClasses = (0, classnames_1.default)('SubNavigation', 'width-100pct display-flex align-items-center justify-content-between overflow-auto', className);
+    const navigationClasses = (0, classnames_1.default)('SubNavigation', 'width-100pct overflow-auto', className);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: navigationClasses }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'SubmoduleNavigation nav' }, { children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'submodule', "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key))) })) })));
 });
 exports.default = SubNavigation;

package/lib/es/components/assetTree/AssetTree.d.ts

@@ -1,3 +1,85 @@
+import React from 'react';
+export type AssetTreeProps = {
+    /**
+     * Defines if the component will overlap the body content.
+     *
+     * @default false
+     */
+    fly?: boolean;
+    /**
+     * Defines whether or not the sidebar is resizable.
+     *
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Defines whether the component has a border or not.
+     *
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Defines the width of the component. The value is set as inline style.
+     * Note: when component is resizable it will take the provided
+     * width in px only and convert it to number in case.
+     *
+     * @default 350
+     */
+    width?: number;
+    /**
+     * Defines the minimum width of the component in px that will take effect when resizing.
+     *
+     * @default 100
+     */
+    minWidth?: number;
+    /**
+     * Defines the maximum width of the component in px that will take effect when resizing.
+     *
+     * @default 0
+     */
+    maxWidth?: number;
+    /**
+     * Defines the height of the component in px.
+     */
+    height?: number;
+    /**
+     * Defines whether the component is open or not.
+     *
+     * @default true
+     */
+    isOpen?: boolean;
+    /**
+     * Callback for when the tree visibility is toggled.
+     * @param isOpen
+     * @returns
+     */
+    onToggleTree?: (isOpen: boolean) => void;
+    /**
+     * The id of the category which is currently active and shall be shown.
+     */
+    currentCategoryId?: string;
+    /**
+     * Callback for handling change of category.
+     * @param selectedCategoryId
+     * @returns
+     */
+    onCategoryChange?: (selectedCategoryId: string) => void;
+    /**
+     * Callback for when the resize is done.
+     */
+    onResizeEnd?: VoidFunction;
+    /**
+     * Defines whether the tree components are rendered offscreen and kept mounted in the DOM.
+     *
+     * @default false
+     */
+    useOffscreen?: boolean;
+    /**
+     * Additional classes added on the wrapper element.
+     */
+    className?: string;
+};
+declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<AssetTreeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>>;
 export default AssetTree;
-declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<any>>>;
-import React from "react";

package/lib/es/components/assetTree/AssetTree.js

@@ -3,59 +3,72 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const head_1 = tslib_1.__importDefault(require("lodash/fp/head"));
 const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const tiny_invariant_1 = tslib_1.__importDefault(require("tiny-invariant"));
+const TreeCategory_1 = tslib_1.__importDefault(require("./TreeCategory"));
 const Resizer_1 = tslib_1.__importDefault(require("../resizer/Resizer"));
 const TreeSidebar_1 = tslib_1.__importDefault(require("./TreeSidebar"));
-const TreeCategory_1 = tslib_1.__importDefault(require("./TreeCategory"));
-const getSidebarBodyRef = sidebarRef => (0, head_1.default)(sidebarRef.current.getElementsByClassName('AssetTreeBody'));
-const getWidthInBoundaries = (minWidth, maxWidth, width) => {
-    if (width > 0 && width < minWidth) {
-        return minWidth;
-    }
-    if (width > 0 && width > maxWidth) {
-        return maxWidth;
-    }
-    if (width > 0 && width > maxWidth) {
-        return maxWidth;
-    }
-    return width;
+const getWidthInBoundaries_1 = tslib_1.__importDefault(require("../../utils/getWidthInBoundaries"));
+const mergeRefs_1 = tslib_1.__importDefault(require("../../utils/mergeRefs"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../usePrevious"));
+const SmoothScrollbars_1 = tslib_1.__importDefault(require("../smoothScrollbars/SmoothScrollbars"));
+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) => { var _a; return (0, head_1.default)((_a = sidebarRef === null || sidebarRef === void 0 ? void 0 : sidebarRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('AssetTreeBody')); };
 const getCurrentCategoryElement = (children, currentCategoryId) => {
     return (0, isArray_1.default)(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;
 };
 const renderTreesOffscreen = (children, categoryId) => {
     return react_1.default.Children.map(children, child => {
-        const offscreenClasses = (0, classnames_1.default)('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen');
+        const offscreenClasses = (0, classnames_1.default)('TreeOffscreenWrapper', 'height-100pct', child && child.props.id !== categoryId && 'position-offscreen pointer-events-none');
         return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: offscreenClasses }, { children: child }));
     });
 };
+// Check if the child is a React element and if it has the type TreeCategory
+const isTreeCategory = (child) => {
+    return react_1.default.isValidElement(child) && child.type === TreeCategory_1.default;
+};
 const AssetTree = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
-    const { className, resizable, width, maxWidth, minWidth, height, bordered, currentCategoryId, isOpen, useOffscreen, fly, onCategoryChange, onToggleTree, onResizeEnd, children } = props, remainingProps = tslib_1.__rest(props, ["className", "resizable", "width", "maxWidth", "minWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"]);
-    const getSidebarMode = isFly => (isFly ? AssetTree.MODE_FLY : AssetTree.MODE_FLUID);
-    const [treeWidth, setTreeWidth] = (0, react_1.useState)(parseInt(width, 10));
+    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_1.default, onToggleTree = noop_1.default, onResizeEnd = noop_1.default, children = [] } = props, remainingProps = tslib_1.__rest(props, ["className", "resizable", "width", "minWidth", "maxWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"]);
+    const getSidebarMode = (isFly) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);
+    const [treeWidth, setTreeWidth] = (0, react_1.useState)(width);
     const [isResize, setIsResize] = (0, react_1.useState)(false);
     const [sidebarMode, setSidebarMode] = (0, react_1.useState)(getSidebarMode(fly));
-    const sidebarRef = (0, react_1.useRef)();
-    (0, react_1.useImperativeHandle)(ref, () => sidebarRef, []);
+    const sidebarRef = (0, react_1.useRef)(null);
+    const mergedRefs = (0, mergeRefs_1.default)([ref, sidebarRef]);
     // Update internal state when props change
-    (0, react_1.useEffect)(() => setTreeWidth(width), [width]);
-    (0, react_1.useEffect)(() => setSidebarMode(getSidebarMode(fly)), [fly]);
-    const classes = (0, classnames_1.default)('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
+    const previousWidth = (0, usePrevious_1.default)(width);
+    if (previousWidth !== width) {
+        setTreeWidth(width);
+    }
+    const [previousMode, setPreviousMode] = (0, react_1.useState)(fly);
+    if (previousMode !== fly) {
+        setSidebarMode(getSidebarMode(fly));
+        setPreviousMode(fly);
+    }
+    const childrenArray = react_1.default.Children.toArray(children);
+    // check for children type of TreeCategory and throw error in case
+    (0, tiny_invariant_1.default)(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type "TreeCategory"');
+    const classes = (0, classnames_1.default)('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
     const resizeLimitClasses = (0, classnames_1.default)('AssetTreeResizeLimit', isResize && 'display-block');
     const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
     const resizeLimitStyle = { left: resizeIndicatorPosition };
-    const categoryId = currentCategoryId || 0;
-    const firstChild = (0, head_1.default)(children);
-    const category = currentCategoryId ? getCurrentCategoryElement(children, currentCategoryId) : firstChild;
+    const firstChild = (0, head_1.default)(childrenArray);
+    const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;
     const style = {
         width: treeWidth,
         height,
     };
     const handleToggleTreeContent = () => onToggleTree(!isOpen);
-    const handleSelectCategory = selectedCategoryId => {
+    const handleSelectCategory = (selectedCategoryId) => {
         onCategoryChange(selectedCategoryId);
         if (!isOpen) {
             handleToggleTreeContent();
@@ -64,14 +77,16 @@ const AssetTree = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
             handleToggleTreeContent();
         }
     };
-    const handleResize = diff => {
+    const handleResize = (diff) => {
         const halfWindowWidth = window.innerWidth * 0.5;
         const usedMaxWidth = maxWidth || halfWindowWidth;
-        const updatedWidth = treeWidth - diff;
-        const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
-        // Check for sidebar with if it is half window size. If it was before but the sidebar was resized so it is
-        // no longer walf window size, set the sidebar with to hals window size to avoid jumping sidebar to old width
-        setTreeWidth(newWidth);
+        // 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 (0, getWidthInBoundaries_1.default)(minWidth, usedMaxWidth, updatedWidth);
+        });
     };
     const handleResizeStart = () => {
         const body = getSidebarBodyRef(sidebarRef);
@@ -88,50 +103,7 @@ const AssetTree = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
         setIsResize(false);
         onResizeEnd();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: sidebarRef }, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'AssetTreeContent' }, { children: [(0, jsx_runtime_1.jsx)(TreeSidebar_1.default, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: (0, isArray_1.default)(children) ? children : [children] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'AssetTreeBody' }, { children: useOffscreen ? renderTreesOffscreen(children, categoryId) : category }))] })), resizable && isOpen && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: Resizer_1.default.RIGHT }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: mergedRefs }, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'AssetTreeContent' }, { children: [(0, jsx_runtime_1.jsx)(TreeSidebar_1.default, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: (0, isArray_1.default)(children) ? children : [children] })), (0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, Object.assign({ slideIn: true, className: 'AssetTreeBody' }, { children: useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category }))] })), resizable && isOpen && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: Resizer_1.default.RIGHT }))] })));
 }));
-AssetTree.displayName = 'AssetTree';
-AssetTree.MODE_FLY = 'fly';
-AssetTree.MODE_FLUID = 'fluid';
-AssetTree.defaultProps = {
-    width: 350,
-    minWidth: 100,
-    maxWidth: 0,
-    resizable: true,
-    bordered: false,
-    fly: false,
-    isOpen: true,
-    onToggleTree: () => { },
-    children: [],
-    onCategoryChange: () => { },
-    onResizeEnd: () => { },
-    useOffscreen: false,
-};
-AssetTree.propTypes = {
-    fly: prop_types_1.default.bool,
-    resizable: prop_types_1.default.bool,
-    bordered: prop_types_1.default.bool,
-    // When sidebar is resizable it will take the provided width in px only
-    width: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    minWidth: prop_types_1.default.number,
-    maxWidth: prop_types_1.default.number,
-    height: prop_types_1.default.number,
-    isOpen: prop_types_1.default.bool,
-    onToggleTree: prop_types_1.default.func,
-    currentCategoryId: prop_types_1.default.string.isRequired,
-    onCategoryChange: prop_types_1.default.func,
-    className: prop_types_1.default.string,
-    onResizeEnd: prop_types_1.default.func,
-    useOffscreen: prop_types_1.default.bool,
-    children: (props, propName, componentName) => {
-        const prop = props[propName];
-        let error = null;
-        react_1.default.Children.forEach(prop, child => {
-            if (child.type !== TreeCategory_1.default) {
-                error = new Error(`\`${componentName}\` children should be of type \`TreeCategory\`.`);
-            }
-        });
-        return error;
-    },
-};
+Object.assign(AssetTree, TreeMode);
 exports.default = AssetTree;