@rio-cloud/rio-uikit 1.11.0 → 1.12.0

package/src/components/applicationHeader/AppMenuDropdown.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+import useClickOutside from '../../hooks/useClickOutside';
+const ToggleButton = (props) => {
+    const { title, caret } = props;
+    const toggleClassName = classNames('ModuleNavigation-dropdown', 'dropdown-toggle justify-content-between', {
+        inactive: !caret,
+    });
+    return (_jsxs("a", { className: toggleClassName, role: 'button', id: 'basic-nav-dropdown', children: [_jsx("span", { children: title }), caret && _jsx("span", { className: 'caret' })] }));
+};
+const DropdownMenu = (props) => {
+    const { children } = props;
+    if (isEmpty(children)) {
+        return null;
+    }
+    return (_jsx("ul", { role: 'menu', className: 'dropdown-menu ModuleNavigation-dropdown-menu', children: children }));
+};
+const AppMenuDropdownOpener = forwardRef((props, ref) => {
+    const { open, children, onDropdownClick } = props;
+    return (_jsx("li", { ref: ref, className: classNames('dropdown', { open }), onClick: onDropdownClick, children: children }));
+});
+export const AppMenuDropdown = (props) => {
+    const { title, caret = false, onToggleAppMenu = noop, children } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapperRef = useClickOutside(() => setIsOpen(false));
+    const handleDropdownClick = () => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        onToggleAppMenu(newState);
+    };
+    const openWithChildren = !isEmpty(children) && isOpen;
+    return (_jsxs(AppMenuDropdownOpener, { open: openWithChildren, onDropdownClick: handleDropdownClick, ref: wrapperRef, children: [_jsx(ToggleButton, { title: title, caret: caret }), _jsx(DropdownMenu, { children: children })] }));
+};
+export default AppMenuDropdown;

package/src/components/applicationHeader/ApplicationActionBar.d.ts

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

package/src/components/applicationHeader/ApplicationActionBar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ApplicationActionBar = (props) => {
+    const { items, nodeRef, className = '', ...remainingProps } = props;
+    return (_jsx("ul", { ...remainingProps, className: `ApplicationActionBar nav navbar-nav navbar-right ${className}`, ref: nodeRef, children: items?.map((item, index) => {
+            return (_jsx("li", { role: 'presentation', className: 'navigationItem', children: item }, index));
+        }) }));
+};
+export default ApplicationActionBar;

package/src/components/applicationHeader/ApplicationHeader.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+export type ModulePropType = {
+    /**
+     * Unique key for the sub-module navigation component of an app.
+     */
+    key: string;
+    /**
+     * The navigation link component used for rendering the name and for routing.
+     *
+     * @example
+     *
+     * ```tsx
+     * <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>
+     * ```
+     */
+    route: React.ReactNode;
+};
+export type ApplicationHeaderProps = {
+    /**
+     * The service name shown as the navigator dropdown label.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The home URL that shall be used for the home button. Pass a `react-router-dom` `NavLink`
+     * as homeRoute into the header. For example:
+     *
+     * @example
+     *
+     * ```tsx
+     * <NavLink to='https://home.rio.cloud' />
+     * ```
+     */
+    homeRoute?: React.ReactNode;
+    /**
+     * Defines to either show the home icon or the RIO logo as brand logo.
+     */
+    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 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.
+     */
+    appNavigator?: React.ReactNode;
+    /**
+     * Additional class names that are added to the appNavigator.
+     */
+    appNavigatorClassName?: string;
+    /**
+     * List of application navigation link components.
+     */
+    appMenuItems?: ModulePropType[];
+    /**
+     * 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.
+     *
+     * 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 The new "open" state.
+     */
+    onToggleAppMenu?: (isOpen: boolean) => void;
+    /**
+     * Additional class names that are added to the wrapper component.
+     */
+    className?: string;
+};
+export declare const ApplicationHeader: React.ForwardRefExoticComponent<ApplicationHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationHeader;

package/src/components/applicationHeader/ApplicationHeader.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
+import isEmpty from 'lodash/fp/isEmpty';
+import classNames from 'classnames';
+import AppMenu from './AppMenu';
+import ApplicationActionBar from './ApplicationActionBar';
+import MobileSubmoduleNavigation from './MobileSubmoduleNavigation';
+import MobileAppMenu from './MobileAppMenu';
+import useResizeObserver from '../../hooks/useResizeObserver';
+import NavItems from './NavItems';
+const SCREEN_SM = 768; // @screen-sm: 768px;
+export const ApplicationHeader = forwardRef((props, ref) => {
+    const { homeRoute = '', showHomeIcon = true, label, className, appNavigator, appNavigatorClassName, appMenuItems, navItems, actionBarItems = [], onToggleAppMenu = () => { }, ...remainingProps } = props;
+    const actionBarRef = useRef(null);
+    const [navRef, entry] = useResizeObserver();
+    const contentRect = entry?.contentRect;
+    useImperativeHandle(ref, () => navRef, [navRef]);
+    const getContentRect = useCallback((key) => {
+        if (contentRect) {
+            const value = contentRect[key];
+            return typeof value === 'number' && Math.round(value);
+        }
+    }, [contentRect]);
+    // If container width cannot be properly read initially, fall back to window width.
+    // This fixes ugly jumping on mobile header and desktop header on mount.
+    const containerWidth = getContentRect('width') || window.innerWidth;
+    const isMobileWidth = containerWidth <= SCREEN_SM;
+    const hasActionBarItems = !isEmpty(actionBarItems);
+    const wrapperClassNames = classNames('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
+    return (_jsxs("nav", { ...remainingProps, className: wrapperClassNames, ref: navRef, children: [isMobileWidth && (_jsxs(React.Fragment, { children: [_jsx(MobileAppMenu, { showHomeIcon: showHomeIcon, homeRoute: homeRoute, appMenuItems: appMenuItems, appNavigator: appNavigator, onToggleAppMenu: onToggleAppMenu }), _jsxs("div", { className: 'flex-1-1-0 display-flex gap-10', children: [_jsx(MobileSubmoduleNavigation, { className: 'flex-1-1', label: label, navItems: navItems }), hasActionBarItems && _jsx(Divider, {}), _jsx(ApplicationActionBar, { className: 'mobile', nodeRef: actionBarRef, items: actionBarItems })] })] })), !isMobileWidth && (_jsxs(React.Fragment, { children: [_jsx("div", { className: 'navbar-header', children: _jsx("span", { className: `navbar-brand ${showHomeIcon ? 'home-icon' : ''}`, children: homeRoute }) }), label && (_jsx(AppMenu, { label: label, appMenuItems: appMenuItems, appNavigator: appNavigator, appNavigatorClassName: appNavigatorClassName, onToggleAppMenu: onToggleAppMenu }, 'AppMenu')), isEmpty(navItems) && _jsx("ul", { className: 'SubmoduleNavigation nav' }), !isEmpty(navItems) && (_jsx(NavItems, { navItems: navItems, containerWidth: containerWidth, actionBarItems: actionBarItems }, 'NavItems')), _jsx(ApplicationActionBar, { nodeRef: actionBarRef, items: actionBarItems })] }))] }));
+});
+const Divider = () => (_jsx("div", { className: 'divider display-flex align-items-center', children: _jsx("div", { className: 'width-3 height-20 bg-lighter' }) }));
+export default ApplicationHeader;

package/src/components/applicationHeader/CollapsedNavItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+type CollapsedNavItemProps = {
+    show: boolean;
+    navItems: ModulePropType[];
+    actionBarItems: React.ReactNode[];
+    onDropdownClick: () => void;
+    onItemClick: () => void;
+};
+declare const CollapsedNavItem: React.ForwardRefExoticComponent<CollapsedNavItemProps & React.RefAttributes<HTMLLIElement>>;
+export default CollapsedNavItem;

package/src/components/applicationHeader/CollapsedNavItem.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { forwardRef } from 'react';
+import isEmpty from 'lodash/fp/isEmpty';
+const CollapsedNavItem = forwardRef((props, ref) => {
+    const { show = false, navItems, actionBarItems, onDropdownClick, onItemClick } = props;
+    if (isEmpty(navItems) && isEmpty(actionBarItems)) {
+        return null;
+    }
+    const collapsedDropdownClass = show ? 'open' : '';
+    return (_jsxs("li", { className: `CollapsedDropdown dropdown ${collapsedDropdownClass}`, ref: ref, children: [_jsx("a", { id: 'basic-nav-dropdown', role: 'button', className: 'dropdown-toggle text-color-gray', "aria-haspopup": 'true', "aria-expanded": 'true', onClick: onDropdownClick, children: _jsx("span", { className: 'rioglyph rioglyph-option-horizontal', "aria-hidden": 'true' }) }), _jsx("ul", { className: 'dropdown-menu', role: 'menu', "aria-labelledby": 'basic-nav-dropdown', children: navItems.map(navItem => {
+                    return (_jsx("li", { className: 'submodule', onClick: onItemClick, "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key));
+                }) })] }, 'collapsed-dropdown'));
+});
+export default CollapsedNavItem;

package/src/components/applicationHeader/MobileAppMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+export type MobileAppMenuProps = {
+    homeRoute: React.ReactNode;
+    showHomeIcon: boolean;
+    appMenuItems?: ModulePropType[];
+    appNavigator?: React.ReactNode;
+    onToggleAppMenu: (isShown: boolean) => void;
+};
+declare const MobileAppMenu: (props: MobileAppMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default MobileAppMenu;

package/src/components/applicationHeader/MobileAppMenu.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import isNil from 'lodash/fp/isNil';
+import MobileHeaderModal from './MobileHeaderModal';
+const MobileAppMenu = (props) => {
+    const { appMenuItems, appNavigator, showHomeIcon, homeRoute, onToggleAppMenu } = props;
+    const [isShown, setIsShown] = useState(false);
+    const handleToggleNavigation = () => {
+        const newState = !isShown;
+        setIsShown(newState);
+        onToggleAppMenu(newState);
+    };
+    const hasAppContent = !(isNil(appMenuItems) && isNil(appNavigator));
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: 'navbar-header min-width-50 padding-5 ' +
+                    'overflow-hidden position-relative display-flex align-items-center', onClick: handleToggleNavigation, children: [_jsx("span", { className: `navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}`, children: !hasAppContent && homeRoute }), hasAppContent && (_jsx("div", { className: 'position-absolute right-2 bottom-0 text-color-white rotate-45', children: _jsx("span", { className: 'rioglyph rioglyph-triangle-right' }) }))] }), appNavigator && (_jsx(MobileHeaderModal, { show: isShown, modalClassName: 'padding-top-25', onClose: handleToggleNavigation, children: _jsx("div", { className: 'width-100pct height-100pct', children: appNavigator }) })), appMenuItems && (_jsx(MobileHeaderModal, { show: isShown, modalClassName: 'padding-15', onClose: handleToggleNavigation, children: appMenuItems.map(module => (_jsx("li", { role: 'presentation', children: module.route }, `link-icon-${module.key}`))) }))] }));
+};
+export default MobileAppMenu;

package/src/components/applicationHeader/MobileHeaderModal.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+export type MobileHeaderModalProps = {
+    show?: boolean;
+    showClose?: boolean;
+    modalClassName?: string;
+    onClose?: () => void;
+    className?: string;
+};
+declare const MobileHeaderModal: (props: PropsWithChildren<MobileHeaderModalProps>) => import("react/jsx-runtime").JSX.Element;
+export default MobileHeaderModal;

package/src/components/applicationHeader/MobileHeaderModal.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
+import { getOrCreatePortalRoot } from '../../utils/portalRoot';
+const OFFSET_POSITION = -1000;
+const MobileHeaderModal = (props) => {
+    const { show = false, showClose = true, modalClassName, className, onClose = () => { }, children } = props;
+    const wrapperClasses = classNames('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
+    const modalClasses = classNames('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
+    const modalRoot = getOrCreatePortalRoot();
+    const pageHeight = window.innerHeight - 30;
+    const offset = OFFSET_POSITION - window.innerHeight;
+    return (_jsx(_Fragment, { children: ReactDOM.createPortal(_jsxs(React.Fragment, { children: [_jsx(AnimatePresence, { children: show && (_jsxs(motion.div, { className: wrapperClasses, initial: { opacity: 0, top: offset }, animate: { opacity: 1, y: 0, top: 0 }, exit: { opacity: 0, transition: { duration: 0.3 }, top: offset }, children: [_jsx("div", { className: modalClasses, style: { height: `${pageHeight}px` }, children: children }), showClose && (_jsx("div", { className: 'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' +
+                                    'text-size-20 text-color-dark', onClick: onClose, children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }))] })) }), _jsx(AnimatePresence, { children: show && (_jsx(motion.div, { className: 'bottom-sheet-backdrop', initial: { opacity: 0 }, animate: { opacity: 0.5 }, exit: { opacity: 0 } })) })] }), modalRoot) }));
+};
+export default MobileHeaderModal;

package/src/components/applicationHeader/MobileSubmoduleNavigation.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+export type MobileSubmoduleNavigationProps = {
+    label: React.ReactNode;
+    navItems?: ModulePropType[];
+    className?: string;
+};
+declare const MobileSubmoduleNavigation: (props: MobileSubmoduleNavigationProps) => import("react/jsx-runtime").JSX.Element;
+export default MobileSubmoduleNavigation;

package/src/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import MobileHeaderModal from './MobileHeaderModal';
+const MobileSubmoduleNavigation = (props) => {
+    const { navItems = [], label, className } = props;
+    const [isShown, setIsShown] = useState(false);
+    const handleToggleNavigation = () => setIsShown(!isShown);
+    const hasNavItems = !isEmpty(navItems);
+    const classes = classNames('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
+    const labelClasses = classNames(hasNavItems
+        ? 'text-size-12 text-color-dark line-height-14'
+        : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase', 'width-100pct ellipsis-1');
+    return (_jsxs("div", { className: classes, onClick: handleToggleNavigation, children: [_jsxs("div", { className: 'flex-1-1 display-flex flex-column align-items-center width-0', children: [_jsx("div", { className: labelClasses, children: label }), _jsx("div", { className: 'text-medium width-100pct', children: navItems.map(navItem => (_jsx("div", { className: 'ellipsis-1', children: React.cloneElement(navItem.route, {
+                                className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
+                                onClick: (event) => event.preventDefault(),
+                            }) }, navItem.key))) })] }), hasNavItems && (_jsx("div", { className: 'text-size-16 text-color-dark', children: _jsx("span", { className: 'rioglyph rioglyph-chevron-down' }) })), hasNavItems && (_jsx(MobileHeaderModal, { show: isShown, children: navItems.map(navItem => (_jsx("div", { className: 'margin-y-15 font-size-20', children: React.cloneElement(navItem.route, {
+                        className: 'text-size-20 text-color-darker',
+                    }) }, navItem.key))) }))] }));
+};
+export default MobileSubmoduleNavigation;

package/src/components/applicationHeader/NavItems.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+export type NavItemsProps = {
+    navItems?: ModulePropType[];
+    containerWidth: number;
+    actionBarItems?: React.ReactNode[];
+};
+export declare const NavItems: (props: NavItemsProps) => import("react/jsx-runtime").JSX.Element;
+export default NavItems;

package/src/components/applicationHeader/NavItems.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useLayoutEffect, useRef } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import useClickOutside from '../../hooks/useClickOutside';
+import CollapsedNavItem from './CollapsedNavItem';
+const collapsedDropdownWidth = 50;
+const paddingLeft = 15;
+export const NavItems = (props) => {
+    const { navItems: externalNavItems = [], actionBarItems = [], containerWidth } = props;
+    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);
+    const [collapsedNavItems, setCollapsedNavItems] = useState([]);
+    const [visibleNavItems, setVisibleNavItems] = useState([]);
+    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));
+    const navigationRef = useRef(null);
+    const isOffscreen = useRef(true);
+    // console.log({ containerWidth });
+    // Before any new changes are applied
+    useEffect(() => {
+        // After the component received new props, every nav item has to be rendered offscreen
+        // again without collapsing them into the dropdown to measure its width
+        isOffscreen.current = true;
+    }, [externalNavItems, actionBarItems, containerWidth]);
+    // After the component has been rendered
+    useLayoutEffect(() => {
+        // After every nav item was rendered offscreen again we need to recalculate the width
+        // of the items again and render the result with possible collapsible dropdown.
+        if (isOffscreen.current) {
+            computeNavItems();
+        }
+    });
+    const getAvailableWidth = (element) => {
+        // Get relevant elements
+        // const parent = element.parentNode;
+        // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));
+        // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;
+        // Since the collapsed dropdown has not been rendered yet,
+        // use the fixed with for it to compute available width
+        const availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;
+        return availableWidth;
+    };
+    const computeNavItems = () => {
+        const element = navigationRef.current;
+        if (!element) {
+            return;
+        }
+        const navItems = [...(element.children || [])];
+        const availableWidth = getAvailableWidth(element);
+        if (availableWidth < 0) {
+            return;
+        }
+        // Iterate over all rendered navItems to figure out their widths in order to figure out
+        // which navItems need to be rendered in the collapsed dropdown
+        let requiredNavItemsSize = 0;
+        const updatedVisibleItems = [];
+        const updatedCollapsedItems = [];
+        navItems.forEach(item => {
+            if (!item.className) {
+                return;
+            }
+            // Calculate the remaining width
+            requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;
+            // console.log({ requiredNavItemsSize });
+            // Use the navItems.key to find corresponding navItems for each DOM node
+            const matchedNavItem = externalNavItems.find(navItem => {
+                const dataAttr = item.attributes.getNamedItem('data-nav-item-key');
+                return dataAttr && navItem.key === dataAttr.value;
+            });
+            if (!matchedNavItem) {
+                return;
+            }
+            // Add navItems to the visible group until the available with exceeds.
+            // All other navItems will be added to the collapsed group
+            if (availableWidth > requiredNavItemsSize) {
+                updatedVisibleItems.push(matchedNavItem);
+            }
+            else {
+                updatedCollapsedItems.push(matchedNavItem);
+            }
+        });
+        // Set the state to render the navItems again
+        isOffscreen.current = false;
+        setVisibleNavItems(updatedVisibleItems);
+        setCollapsedNavItems(updatedCollapsedItems);
+    };
+    const handleCollapsedDropdown = () => {
+        // When the dropdown is open, set showCollapsedNavItems to false so all submodule items
+        // are rendered and their size can be computed
+        if (isCollapsedNavItemOpen) {
+            setIsCollapsedNavItemOpen(false);
+        }
+        else {
+            // When the dropdown is closed, just set the flag to open is enough
+            setIsCollapsedNavItemOpen(true);
+        }
+    };
+    const handleCollapsedNavItemSelected = () => {
+        // Close collapsed dropdown on item select
+        if (isCollapsedNavItemOpen) {
+            setIsCollapsedNavItemOpen(false);
+        }
+    };
+    const renderNavItem = (navItem, isItemOffscreen) => {
+        return (_jsx("li", { className: `submodule ${isItemOffscreen ? 'offscreen' : ''}`, "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key));
+    };
+    const renderNavItems = () => {
+        if (!isOffscreen.current && !isEmpty(collapsedNavItems)) {
+            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));
+            return [
+                ...visibleItems,
+                _jsx(CollapsedNavItem, { ref: collapsedDropdownRef, show: isCollapsedNavItemOpen, navItems: collapsedNavItems, actionBarItems: actionBarItems, onDropdownClick: handleCollapsedDropdown, onItemClick: handleCollapsedNavItemSelected }, 'CollapsedNavItem'),
+            ];
+        }
+        return externalNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));
+    };
+    // As all navItems need to be added to the DOM first in order to get their real size
+    // the computation whether a navItem need to be shown under the collapsed dropdown or not
+    // needs to be done after the component did mount to the DOM.
+    const classes = classNames('SubmoduleNavigation', 'nav');
+    return (_jsx("ul", { className: classes, ref: navigationRef, children: renderNavItems() }));
+};
+export default NavItems;

package/src/components/applicationLayout/ApplicationLayout.d.ts

@@ -0,0 +1,22 @@
+import { type PropsWithChildren, type MutableRefObject, type RefAttributes, type ForwardRefExoticComponent } from 'react';
+import ApplicationLayoutHeader from './ApplicationLayoutHeader';
+import ApplicationLayoutSidebar from './ApplicationLayoutSidebar';
+import ApplicationLayoutBody from './ApplicationLayoutBody';
+export type ApplicationLayoutProps = {
+    /**
+     * A React ref function assigned to the wrapper element.
+     */
+    layoutRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Additional class names that are added to the respective component
+     */
+    className?: string;
+};
+type Props = PropsWithChildren<ApplicationLayoutProps>;
+type ApplicationLayoutType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {
+    Header: typeof ApplicationLayoutHeader;
+    Sidebar: typeof ApplicationLayoutSidebar;
+    Body: typeof ApplicationLayoutBody;
+};
+declare const ApplicationLayout: ApplicationLayoutType;
+export default ApplicationLayout;

package/src/components/applicationLayout/ApplicationLayout.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable import/order */
+import { forwardRef, } from 'react';
+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
+// noinspection JSIgnoredPromiseFromCall
+initDocumentBootstrapping();
+const ApplicationLayout = forwardRef((props, ref) => {
+    const { className, layoutRef, children, ...remainingProps } = props;
+    const classes = classNames('ApplicationLayout', className);
+    return (_jsx("div", { ...remainingProps, ref: ref || layoutRef, className: classes, children: children }));
+});
+ApplicationLayout.Header = ApplicationLayoutHeader;
+ApplicationLayout.Sidebar = ApplicationLayoutSidebar;
+ApplicationLayout.Body = ApplicationLayoutBody;
+export default ApplicationLayout;

package/src/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -0,0 +1,50 @@
+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 true
+     */
+    forceScrollbar?: boolean;
+    /**
+     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content
+     * and to reset the scrolling like when the pathname changes from an body internal menu.
+     */
+    scrollResetTrigger?: any;
+    /**
+     * The ApplicationLayoutBodyBanner component.
+     */
+    banner?: React.ReactNode;
+    /**
+     * The `ApplicationLayoutBodyNavigation` component.
+     */
+    navigation?: React.ReactNode;
+    /**
+     * Optional bottom bar component or a simple string.
+     */
+    bottomBar?: React.ReactNode;
+    /**
+     * Height of the bottomBar in pixel.
+     *
+     * @default 54
+     */
+    bottomBarHeight?: number;
+    /**
+     * Additional class names that are added to the inner module-content component.
+     */
+    innerClassName?: string;
+    /**
+     * Additional class names that are added to the respective component.
+     */
+    className?: string;
+};
+declare const ApplicationLayoutBody: React.ForwardRefExoticComponent<ApplicationLayoutBodyProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutBody;

package/src/components/applicationLayout/ApplicationLayoutBody.js

@@ -0,0 +1,60 @@
+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 = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, scrollResetTrigger, children, ...remainingProps } = props;
+    const [offset, setOffset] = useState(0);
+    const moduleContentRef = useRef(null);
+    const layoutBodyRef = useRef(null);
+    // Use imperative handle to expose the internal layout ref. Usually this is used to
+    // expose internal function without exposing the underlying DOM element.
+    // In this case however, we want access to the element to trigger functions like scrollIntoView()
+    useImperativeHandle(ref, () => layoutBodyRef?.current, []);
+    // Reset scroll position when children are different. This fixes the issue of
+    // changing body content (like in another route) and still having the same scroll position
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (moduleContentRef.current) {
+            moduleContentRef.current.scrollTop(0);
+            setOffset(0);
+        }
+    }, [scrollResetTrigger]);
+    useEffect(() => {
+        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {
+            layoutBodyRef.current.parentNode.style.setProperty('--ApplicationLayoutBodyBottomBarHeight', `${bottomBarHeight}px`);
+        }
+    }, [bottomBarHeight]);
+    const handleScroll = debounce(RESIZE_THROTTLING)(() => {
+        if (moduleContentRef.current) {
+            setOffset(moduleContentRef.current.getScrollTop());
+        }
+    });
+    const handleToTop = () => {
+        if (!moduleContentRef.current) {
+            return;
+        }
+        const scrollWrapper = moduleContentRef.current.container;
+        const scrollingElement = scrollWrapper.firstElementChild;
+        const currentScroll = scrollingElement?.scrollTop ?? 0;
+        const scrollThreshold = 10;
+        if (currentScroll > scrollThreshold) {
+            window.requestAnimationFrame(handleToTop);
+            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', innerClassName && innerClassName);
+    const offsetThreshold = window.innerHeight * 0.1;
+    const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { ...remainingProps, ref: layoutBodyRef, className: classes, children: [_jsxs("div", { className: 'module-content-wrapper', children: [navigation && navigation, banner && banner, _jsx(SmoothScrollbars, { ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll, children: _jsx("div", { className: 'scrollbar-content', children: children }) })] }), enableScrollToTop && (_jsx("span", { className: scrollToTopClasses, children: _jsx("button", { 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/src/components/applicationLayout/ApplicationLayoutBodyBanner.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type ApplicationLayoutBodyBannerProps = {
+    /**
+     * One of the `text-color` utility classes.
+     * @default `text-color-white`
+     */
+    textColor?: string;
+    /**
+     * One of the `bg-color` utility classes.
+     * @default `bg-primary`
+     */
+    backgroundColor?: string;
+    /**
+     * Allows sticky banner while scrolling.
+     * @default false
+     */
+    isSticky?: boolean;
+    /**
+     * Additional class names that are added to the respective component.
+     */
+    className?: string;
+};
+declare const ApplicationLayoutBodyBanner: React.ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutBodyBanner;

package/src/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+const DEFAULT_TEXT_COLOR = 'text-color-white';
+const DEFAULT_BACKGROUND_COLOR = 'bg-primary';
+const ApplicationLayoutBodyBanner = forwardRef((props, ref) => {
+    const { textColor = DEFAULT_TEXT_COLOR, backgroundColor = DEFAULT_BACKGROUND_COLOR, isSticky = true, className, children, ...remainingProps } = props;
+    const bannerClasses = classNames('ApplicationLayoutBodyBanner', textColor, backgroundColor, isSticky && 'position-sticky top-0 z-index-3', className);
+    return (_jsx("div", { ...remainingProps, ref: ref, className: bannerClasses, children: children }));
+});
+export default ApplicationLayoutBodyBanner;