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

package/components/actionBarItem/ActionBarItem.d.ts

@@ -7,26 +7,33 @@ import ActionBarItemListSeparator from './ActionBarItemListSeparator';
 export type ActionBarItemPopoverWidth = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
 export type ActionBarItemProps = {
     /**
-     * The id is used to identify the item in the DOM. If not provided, a random id is used instead.
+     * The id is used to identify the item in the DOM.
+     *
+     * If not provided, a random id is used instead.
      */
     id?: string;
     /**
      * The title property for the subcomponent ActionBarItem.Popover.
+     *
      * This can be a String or another component as well as a React-Intl component.
      */
     title?: string | React.ReactNode;
     /**
      * Additional class names that are added to the respective component.
+     *
      * It can be defined for the parent and all subcomponents.
      */
     className?: string;
     /**
-     * Defined if the popover should close when any child element is being clicked.
+     * Defines if the popover should close when any child element is being clicked.
+     *
+     * @default true
      */
     hidePopoverOnClick?: boolean;
     /**
-     * Possible values are:
-     * `100`, `150`, `200`, `250`, `300`, `350`, `400`, `450`, `500`
+     * Possible values are `100`, `150`, `200`, `250`, `300`, `350`, `400`, `450` or `500`.
+     *
+     * @default 250
      */
     popoverWidth?: ActionBarItemPopoverWidth;
     /**

package/components/actionBarItem/ActionBarItem.js

@@ -94,7 +94,7 @@ const ActionBarItemBase = (props) => {
     const childrenWithoutPopover = childrenAsList.filter(child => !isActionBarItemPopover(child));
     const childrenWithoutPopoverAndIcon = childrenWithoutPopover.filter(child => !isActionBarItemIcon(child));
     if (isSmallScreen) {
-        return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [React.cloneElement(itemIcon, { onClick: onToggle }), _jsx("div", Object.assign({ onClick: () => setIsShown(false) }, { children: _jsx(Dialog, { show: isShown, onHide: () => setIsShown(false), body: itemPopover, bodyClassName: mobileDialogBodyClassName, title: title }) })), childrenWithoutPopoverAndIcon] })));
+        return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [React.cloneElement(itemIcon, { onClick: onToggle }), _jsx("div", Object.assign({ onClick: () => setIsShown(false) }, { children: _jsx(Dialog, { show: isShown, onClose: () => setIsShown(false), body: itemPopover, bodyClassName: mobileDialogBodyClassName, title: title }) })), childrenWithoutPopoverAndIcon] })));
     }
     const overlay = (_jsx(ActionBarOverlay, Object.assign({ id: id, title: title, width: popoverWidth, preRender: useOffscreen, show: isShown }, { children: itemPopover }), 'child'));
     return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [_jsx(OverlayTrigger, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger.BOTTOM_END, overlay: overlay, trigger: 'click', rootClose: false, popperConfig: {

package/components/actionBarItem/ActionBarItemIcon.d.ts

@@ -1,5 +1,5 @@
-import { type PropsWithChildren } from 'react';
-type ActionBarItemIconProps = {
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+type ActionBarItemIconProps = HTMLAttributes<HTMLDivElement> & {
     className?: string;
 };
 declare const ActionBarItemIcon: {

package/components/actionBarItem/ActionBarItemIcon.js

@@ -8,5 +8,6 @@ const ActionBarItemIcon = (props) => {
     const classes = classNames('ActionBarItemIcon', className);
     return (_jsx("div", Object.assign({}, remainingProps, { className: classes }, { children: children })));
 };
+// The displayName is used in ActionBarItem for checking the component "isActionBarItemIcon"
 ActionBarItemIcon.displayName = 'ActionBarItemIcon';
 export default ActionBarItemIcon;

package/components/actionBarItem/ActionBarItemList.d.ts

@@ -1,12 +1,9 @@
-import { type PropsWithChildren } from 'react';
-export type ActionBarItemListProps = {
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type ActionBarItemListProps = HTMLAttributes<HTMLUListElement> & {
     /**
      * Additional class names that are added to the wrapping list item component.
      */
     className?: string;
 };
-declare const ActionBarItemList: {
-    ({ className, children, ...remainingProps }: PropsWithChildren<ActionBarItemListProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const ActionBarItemList: ({ className, children, ...remainingProps }: PropsWithChildren<ActionBarItemListProps>) => import("react/jsx-runtime").JSX.Element;
 export default ActionBarItemList;

package/components/actionBarItem/ActionBarItemList.js

@@ -8,5 +8,4 @@ const ActionBarItemList = (_a) => {
     const classes = classNames('ActionBarItemList', className);
     return (_jsx("ul", Object.assign({}, remainingProps, { className: classes }, { children: children })));
 };
-ActionBarItemList.displayName = 'ActionBarItemList';
 export default ActionBarItemList;

package/components/actionBarItem/ActionBarItemListItem.d.ts

@@ -1,9 +1,10 @@
-import { type PropsWithChildren } from 'react';
-export type ActionBarItemListItemProps = {
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type ActionBarItemListItemProps = Omit<HTMLAttributes<HTMLLIElement>, 'onClick'> & {
     /**
      * Set it to true when you want to use the item as link item.
-     * In case, please use the `Link` component from `react-router-dom`
-     * instead of an anchor tag to prevent side effects when automatically closing the popover.
+     *
+     * In this case, please use the `Link` component from `react-router-dom` instead of an anchor tag to prevent side
+     * effects when automatically closing the popover.
      */
     hasLink?: boolean;
     /**
@@ -13,8 +14,7 @@ export type ActionBarItemListItemProps = {
     /**
      * Callback function to be triggered when the internal button of a list item is clicked.
      *
-     * Note: When no callback function is provided, the children are rendered as is without
-     * wrapping them in a button.
+     * Note: When no callback function is provided, the children are rendered as is without wrapping them in a button.
      */
     onClick?: VoidFunction;
     /**
@@ -22,8 +22,5 @@ export type ActionBarItemListItemProps = {
      */
     className?: string;
 };
-declare const ActionBarItemListItem: {
-    (props: PropsWithChildren<ActionBarItemListItemProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const ActionBarItemListItem: (props: PropsWithChildren<ActionBarItemListItemProps>) => import("react/jsx-runtime").JSX.Element;
 export default ActionBarItemListItem;

package/components/actionBarItem/ActionBarItemListItem.js

@@ -5,10 +5,9 @@ import 'react';
 import classNames from 'classnames';
 const ActionBarItemListItem = (props) => {
     const { hasLink, icon, onClick, className, children } = props, remainingProps = __rest(props, ["hasLink", "icon", "onClick", "className", "children"]);
-    const classes = classNames('ActionBarItemListItem', className);
+    const classes = classNames('ActionBarItemListItem', hasLink && 'has-link', className);
     const iconClasses = classNames('ActionBarItemListItemIcon', 'rioglyph', icon);
     const btnClasses = classNames('ActionBarItemListItemButton');
-    return (_jsxs("li", Object.assign({}, remainingProps, { className: classes }, { children: [icon && _jsx("span", { className: iconClasses }), hasLink && !onClick && _jsx("span", { children: children }), onClick && (_jsx("div", Object.assign({ className: btnClasses, onClick: onClick }, { children: children }))), !hasLink && !onClick && children] })));
+    return (_jsxs("li", Object.assign({}, remainingProps, { className: classes, onClick: onClick }, { children: [icon && _jsx("span", { className: iconClasses }), hasLink && !onClick && _jsx("span", { children: children }), onClick && _jsx("div", Object.assign({ className: btnClasses }, { children: children })), !hasLink && !onClick && children] })));
 };
-ActionBarItemListItem.displayName = 'ActionBarItemListItem';
 export default ActionBarItemListItem;

package/components/actionBarItem/ActionBarItemListSeparator.d.ts

@@ -1,11 +1,9 @@
-export type ActionBarItemListSeparatorProps = {
+import { type HTMLAttributes } from 'react';
+export type ActionBarItemListSeparatorProps = HTMLAttributes<HTMLHRElement> & {
     /**
      * Additional class names that are added to the wrapping list item component.
      */
     className?: string;
 };
-declare const ActionBarItemListSeparator: {
-    ({ className, ...remainingProps }: ActionBarItemListSeparatorProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const ActionBarItemListSeparator: ({ className, ...remainingProps }: ActionBarItemListSeparatorProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionBarItemListSeparator;

package/components/actionBarItem/ActionBarItemListSeparator.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line: importsNotUsedAsValues
 import 'react';
 import classNames from 'classnames';
 const ActionBarItemListSeparator = (_a) => {
@@ -7,5 +8,4 @@ const ActionBarItemListSeparator = (_a) => {
     const classes = classNames('ActionBarItemListSeparator', className);
     return _jsx("hr", Object.assign({}, remainingProps, { className: classes }));
 };
-ActionBarItemListSeparator.displayName = 'ActionBarItemListSeparator';
 export default ActionBarItemListSeparator;

package/components/actionBarItem/ActionBarItemPopoverContent.d.ts

@@ -1,13 +1,18 @@
-import React, { type PropsWithChildren } from 'react';
-export type ActionBarItemPopoverProps = {
-    /** The popover title. */
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type ActionBarItemPopoverProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'useOffscreen'> & {
+    /**
+     * The popover title.
+     */
     title?: string | React.ReactNode;
     /**
-     * Define whether the popover content shall be rendered behind the scene
-     * to pre-load content or to avoid unmounting the content component
+     * Define whether the popover content shall be rendered behind the scene.
+     *
+     * This allows to preload content or to avoid unmounting the content component.
      */
     useOffscreen?: boolean;
-    /** Additional class names that are added to the popover content. */
+    /**
+     * Additional class names that are added to the popover content.
+     */
     className?: string;
 };
 declare const ActionBarItemPopoverContent: {

package/components/actionBarItem/ActionBarItemPopoverContent.js

@@ -10,5 +10,6 @@ const ActionBarItemPopoverContent = (_a) => {
     const filterProps = omit(['title', 'useOffscreen'])(remainingProps);
     return (_jsx("div", Object.assign({}, filterProps, { className: classes }, { children: children })));
 };
+// The displayName is used in ActionBarItem for checking the component "isActionBarItemPopover"
 ActionBarItemPopoverContent.displayName = 'ActionBarItemPopoverContent';
 export default ActionBarItemPopoverContent;

package/components/activity/Activity.d.ts

@@ -18,17 +18,13 @@ export type ActivityProps = {
     /**
      * Defines the type of activity.
      *
-     * Possible values are:
-     * `Activity.AVAILABLE`, `Activity.DRIVING`, `Activity.RESTING`, `Activity.WORKING` or
-     * `available`, `driving`, `resting`, `working`
+     * Possible values are `Activity.AVAILABLE`, `Activity.DRIVING`, `Activity.RESTING` or `Activity.WORKING`.
      */
     activity: ActivityStatus;
     /**
      * Define how large the component should be rendered.
      *
-     * Possible values are:
-     * `Activity.SIZE_SM`, `Activity.SIZE_LG`, `Activity.SIZE_XL` or
-     * `sm`, `lg`, `xl`.
+     * Possible values are `Activity.SIZE_SM`, `Activity.SIZE_LG` or `Activity.SIZE_XL`.
      */
     bsSize?: ActivitySize;
     /**
@@ -36,7 +32,8 @@ export type ActivityProps = {
      */
     duration?: string | ReactNode;
     /**
-     * Indicated whether the activity is outdated.
+     * Indicates whether the activity is outdated.
+     *
      * @default false
      */
     isOutdated?: boolean;

package/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/components/applicationHeader/AppMenuDropdown.js

@@ -16,7 +16,7 @@ const DropdownMenu = (props) => {
     if (isEmpty(children)) {
         return null;
     }
-    return (_jsx("ul", Object.assign({ role: 'menu', className: 'dropdown-menu' }, { children: children })));
+    return (_jsx("ul", Object.assign({ role: 'menu', className: 'dropdown-menu ModuleNavigation-dropdown-menu' }, { children: children })));
 };
 const AppMenuDropdownOpener = forwardRef((props, ref) => {
     const { open, children, onDropdownClick } = props;

package/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/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/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/components/applicationLayout/ApplicationLayout.js

@@ -6,9 +6,10 @@ import classNames from 'classnames';
 import ApplicationLayoutHeader from './ApplicationLayoutHeader';
 import ApplicationLayoutSidebar from './ApplicationLayoutSidebar';
 import ApplicationLayoutBody from './ApplicationLayoutBody';
+import { initDocumentBootstrapping } from '../../utils/init/initDocumentBootstrapping';
 // initializes document bootstrapping - keep the import to avoid being tree-shaken
-import { initDocumentBootstrapping } from '../../utils/init';
-initDocumentBootstrapping;
+// noinspection JSIgnoredPromiseFromCall
+initDocumentBootstrapping();
 const ApplicationLayout = forwardRef((props, ref) => {
     const { className, layoutRef, children } = props, remainingProps = __rest(props, ["className", "layoutRef", "children"]);
     const classes = classNames('ApplicationLayout', className);

package/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/components/applicationLayout/ApplicationLayoutBody.js

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, } from 'react';
 import debounce from 'lodash/fp/debounce';
 import classNames from 'classnames';
+import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
 const RESIZE_THROTTLING = 200;
 const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
 const ApplicationLayoutBody = forwardRef((props, ref) => {
-    const { className, innerClassName, forceScrollbar = false, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = __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 = __rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
     const [offset, setOffset] = useState(0);
     const moduleContentRef = useRef(null);
     const layoutBodyRef = useRef(null);
@@ -19,24 +20,31 @@ const ApplicationLayoutBody = forwardRef((props, ref) => {
     }, [bottomBarHeight]);
     const handleScroll = debounce(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 = classNames('ApplicationLayoutBody', bottomBar && 'has-footer', className);
-    const innerClasses = classNames('module-content', forceScrollbar && 'overflow-y-scroll', innerClassName && innerClassName);
+    const innerClasses = classNames('module-content', innerClassName && innerClassName);
     const offsetThreshold = window.innerHeight * 0.1;
     const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({}, remainingProps, { ref: layoutBodyRef, className: classes }, { children: [_jsxs("div", Object.assign({ className: 'module-content-wrapper' }, { children: [navigation && navigation, banner && banner, _jsx("div", Object.assign({ className: innerClasses, onScroll: handleScroll, ref: moduleContentRef }, { children: children }))] })), enableScrollToTop && (_jsx("span", Object.assign({ className: scrollToTopClasses }, { children: _jsx("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop }, { children: _jsx("span", { className: 'rioglyph rioglyph-arrow-up' }) })) })))] })), bottomBar && bottomBar] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({}, remainingProps, { ref: layoutBodyRef, className: classes }, { children: [_jsxs("div", Object.assign({ className: 'module-content-wrapper' }, { children: [navigation && navigation, banner && banner, _jsx(SmoothScrollbars, Object.assign({ ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll }, { children: children }))] })), enableScrollToTop && (_jsx("span", Object.assign({ className: scrollToTopClasses }, { children: _jsx("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop }, { children: _jsx("span", { className: 'rioglyph rioglyph-arrow-up' }) })) })))] })), bottomBar && bottomBar] }));
 });
 export default ApplicationLayoutBody;

package/components/applicationLayout/SubNavigation.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import classNames from 'classnames';
 const SubNavigation = forwardRef((props, ref) => {
     const { className, navItems = [] } = props, remainingProps = __rest(props, ["className", "navItems"]);
-    const navigationClasses = classNames('SubNavigation', 'width-100pct display-flex align-items-center justify-content-between overflow-auto', className);
+    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);
     return (_jsx("div", Object.assign({ ref: ref }, remainingProps, { className: navigationClasses }, { children: _jsx("ul", Object.assign({ className: 'SubmoduleNavigation nav' }, { children: navItems.map(navItem => (_jsx("li", Object.assign({ className: 'submodule', "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key))) })) })));
 });
 export default SubNavigation;

package/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";