@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.2

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

@@ -1,80 +0,0 @@
-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/lib/es/components/applicationHeader/ApplicationHeader.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApplicationHeader = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const AppMenu_1 = tslib_1.__importDefault(require("./AppMenu"));
-const ApplicationActionBar_1 = tslib_1.__importDefault(require("./ApplicationActionBar"));
-const MobileSubmoduleNavigation_1 = tslib_1.__importDefault(require("./MobileSubmoduleNavigation"));
-const MobileAppMenu_1 = tslib_1.__importDefault(require("./MobileAppMenu"));
-const useResizeObserver_1 = tslib_1.__importDefault(require("../../hooks/useResizeObserver"));
-const NavItems_1 = tslib_1.__importDefault(require("./NavItems"));
-const SCREEN_SM = 768; // @screen-sm: 768px;
-exports.ApplicationHeader = (0, react_1.forwardRef)((props, ref) => {
-    const { homeRoute = '', showHomeIcon = true, label, className, appNavigator, appNavigatorClassName, appMenuItems, navItems, actionBarItems = [], onToggleAppMenu = () => { }, ...remainingProps } = props;
-    const actionBarRef = (0, react_1.useRef)(null);
-    const [navRef, entry] = (0, useResizeObserver_1.default)();
-    const contentRect = entry?.contentRect;
-    (0, react_1.useImperativeHandle)(ref, () => navRef, [navRef]);
-    const getContentRect = (0, react_1.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 = !(0, isEmpty_1.default)(actionBarItems);
-    const wrapperClassNames = (0, classnames_1.default)('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
-    return ((0, jsx_runtime_1.jsxs)("nav", { ...remainingProps, className: wrapperClassNames, ref: navRef, children: [isMobileWidth && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MobileAppMenu_1.default, { showHomeIcon: showHomeIcon, homeRoute: homeRoute, appMenuItems: appMenuItems, appNavigator: appNavigator, onToggleAppMenu: onToggleAppMenu }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1-0 display-flex gap-10', children: [(0, jsx_runtime_1.jsx)(MobileSubmoduleNavigation_1.default, { className: 'flex-1-1', label: label, navItems: navItems }), hasActionBarItems && (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)(ApplicationActionBar_1.default, { className: 'mobile', nodeRef: actionBarRef, items: actionBarItems })] })] })), !isMobileWidth && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'navbar-header', children: (0, jsx_runtime_1.jsx)("span", { className: `navbar-brand ${showHomeIcon ? 'home-icon' : ''}`, children: homeRoute }) }), label && ((0, jsx_runtime_1.jsx)(AppMenu_1.default, { label: label, appMenuItems: appMenuItems, appNavigator: appNavigator, appNavigatorClassName: appNavigatorClassName, onToggleAppMenu: onToggleAppMenu }, 'AppMenu')), (0, isEmpty_1.default)(navItems) && (0, jsx_runtime_1.jsx)("ul", { className: 'SubmoduleNavigation nav' }), !(0, isEmpty_1.default)(navItems) && ((0, jsx_runtime_1.jsx)(NavItems_1.default, { navItems: navItems, containerWidth: containerWidth, actionBarItems: actionBarItems }, 'NavItems')), (0, jsx_runtime_1.jsx)(ApplicationActionBar_1.default, { nodeRef: actionBarRef, items: actionBarItems })] }))] }));
-});
-const Divider = () => ((0, jsx_runtime_1.jsx)("div", { className: 'divider display-flex align-items-center', children: (0, jsx_runtime_1.jsx)("div", { className: 'width-3 height-20 bg-lighter' }) }));
-exports.default = exports.ApplicationHeader;

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

@@ -1,11 +0,0 @@
-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/lib/es/components/applicationHeader/CollapsedNavItem.js

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

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

@@ -1,11 +0,0 @@
-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/lib/es/components/applicationHeader/MobileAppMenu.js

@@ -1,20 +0,0 @@
-"use strict";
-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 isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
-const MobileHeaderModal_1 = tslib_1.__importDefault(require("./MobileHeaderModal"));
-const MobileAppMenu = (props) => {
-    const { appMenuItems, appNavigator, showHomeIcon, homeRoute, onToggleAppMenu } = props;
-    const [isShown, setIsShown] = (0, react_1.useState)(false);
-    const handleToggleNavigation = () => {
-        const newState = !isShown;
-        setIsShown(newState);
-        onToggleAppMenu(newState);
-    };
-    const hasAppContent = !((0, isNil_1.default)(appMenuItems) && (0, isNil_1.default)(appNavigator));
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'navbar-header min-width-50 padding-5 ' +
-                    'overflow-hidden position-relative display-flex align-items-center', onClick: handleToggleNavigation, children: [(0, jsx_runtime_1.jsx)("span", { className: `navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}`, children: !hasAppContent && homeRoute }), hasAppContent && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute right-2 bottom-0 text-color-white rotate-45', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-triangle-right' }) }))] }), appNavigator && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, { show: isShown, modalClassName: 'padding-top-25', onClose: handleToggleNavigation, children: (0, jsx_runtime_1.jsx)("div", { className: 'width-100pct height-100pct', children: appNavigator }) })), appMenuItems && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, { show: isShown, modalClassName: 'padding-15', onClose: handleToggleNavigation, children: appMenuItems.map(module => ((0, jsx_runtime_1.jsx)("li", { role: 'presentation', children: module.route }, `link-icon-${module.key}`))) }))] }));
-};
-exports.default = MobileAppMenu;

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

@@ -1,10 +0,0 @@
-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/lib/es/components/applicationHeader/MobileHeaderModal.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const portalRoot_1 = require("../../utils/portalRoot");
-const OFFSET_POSITION = -1000;
-const MobileHeaderModal = (props) => {
-    const { show = false, showClose = true, modalClassName, className, onClose = () => { }, children } = props;
-    const wrapperClasses = (0, classnames_1.default)('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
-    const modalClasses = (0, classnames_1.default)('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
-    const modalRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
-    const pageHeight = window.innerHeight - 30;
-    const offset = OFFSET_POSITION - window.innerHeight;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsxs)(framer_motion_1.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: [(0, jsx_runtime_1.jsx)("div", { className: modalClasses, style: { height: `${pageHeight}px` }, children: children }), showClose && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' +
-                                    'text-size-20 text-color-dark', onClick: onClose, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }))] })) }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: 'bottom-sheet-backdrop', initial: { opacity: 0 }, animate: { opacity: 0.5 }, exit: { opacity: 0 } })) })] }), modalRoot) }));
-};
-exports.default = MobileHeaderModal;

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

@@ -1,9 +0,0 @@
-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/lib/es/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -1,25 +0,0 @@
-"use strict";
-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 classnames_1 = tslib_1.__importDefault(require("classnames"));
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const MobileHeaderModal_1 = tslib_1.__importDefault(require("./MobileHeaderModal"));
-const MobileSubmoduleNavigation = (props) => {
-    const { navItems = [], label, className } = props;
-    const [isShown, setIsShown] = (0, react_1.useState)(false);
-    const handleToggleNavigation = () => setIsShown(!isShown);
-    const hasNavItems = !(0, isEmpty_1.default)(navItems);
-    const classes = (0, classnames_1.default)('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
-    const labelClasses = (0, classnames_1.default)(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 ((0, jsx_runtime_1.jsxs)("div", { className: classes, onClick: handleToggleNavigation, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 display-flex flex-column align-items-center width-0', children: [(0, jsx_runtime_1.jsx)("div", { className: labelClasses, children: label }), (0, jsx_runtime_1.jsx)("div", { className: 'text-medium width-100pct', children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("div", { className: 'ellipsis-1', children: react_1.default.cloneElement(navItem.route, {
-                                className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
-                                onClick: (event) => event.preventDefault(),
-                            }) }, navItem.key))) })] }), hasNavItems && ((0, jsx_runtime_1.jsx)("div", { className: 'text-size-16 text-color-dark', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-down' }) })), hasNavItems && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, { show: isShown, children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("div", { className: 'margin-y-15 font-size-20', children: react_1.default.cloneElement(navItem.route, {
-                        className: 'text-size-20 text-color-darker',
-                    }) }, navItem.key))) }))] }));
-};
-exports.default = MobileSubmoduleNavigation;

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

@@ -1,9 +0,0 @@
-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/lib/es/components/applicationHeader/NavItems.js

@@ -1,127 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavItems = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const useClickOutside_1 = tslib_1.__importDefault(require("../../hooks/useClickOutside"));
-const CollapsedNavItem_1 = tslib_1.__importDefault(require("./CollapsedNavItem"));
-const collapsedDropdownWidth = 50;
-const paddingLeft = 15;
-const NavItems = (props) => {
-    const { navItems: externalNavItems = [], actionBarItems = [], containerWidth } = props;
-    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = (0, react_1.useState)(false);
-    const [collapsedNavItems, setCollapsedNavItems] = (0, react_1.useState)([]);
-    const [visibleNavItems, setVisibleNavItems] = (0, react_1.useState)([]);
-    const collapsedDropdownRef = (0, useClickOutside_1.default)(() => setIsCollapsedNavItemOpen(false));
-    const navigationRef = (0, react_1.useRef)(null);
-    const isOffscreen = (0, react_1.useRef)(true);
-    // console.log({ containerWidth });
-    // Before any new changes are applied
-    (0, react_1.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
-    (0, react_1.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 ((0, jsx_runtime_1.jsx)("li", { className: `submodule ${isItemOffscreen ? 'offscreen' : ''}`, "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key));
-    };
-    const renderNavItems = () => {
-        if (!isOffscreen.current && !(0, isEmpty_1.default)(collapsedNavItems)) {
-            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));
-            return [
-                ...visibleItems,
-                (0, jsx_runtime_1.jsx)(CollapsedNavItem_1.default, { 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 = (0, classnames_1.default)('SubmoduleNavigation', 'nav');
-    return ((0, jsx_runtime_1.jsx)("ul", { className: classes, ref: navigationRef, children: renderNavItems() }));
-};
-exports.NavItems = NavItems;
-exports.default = exports.NavItems;

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

@@ -1,22 +0,0 @@
-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/lib/es/components/applicationLayout/ApplicationLayout.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable import/order */
-const react_1 = require("react");
-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
-// noinspection JSIgnoredPromiseFromCall
-(0, initDocumentBootstrapping_1.initDocumentBootstrapping)();
-const ApplicationLayout = (0, react_1.forwardRef)((props, ref) => {
-    const { className, layoutRef, children, ...remainingProps } = props;
-    const classes = (0, classnames_1.default)('ApplicationLayout', className);
-    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, ref: ref || layoutRef, className: classes, children: children }));
-});
-ApplicationLayout.Header = ApplicationLayoutHeader_1.default;
-ApplicationLayout.Sidebar = ApplicationLayoutSidebar_1.default;
-ApplicationLayout.Body = ApplicationLayoutBody_1.default;
-exports.default = ApplicationLayout;

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

@@ -1,50 +0,0 @@
-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/lib/es/components/applicationLayout/ApplicationLayoutBody.js

@@ -1,63 +0,0 @@
-"use strict";
-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 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 = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, scrollResetTrigger, children, ...remainingProps } = props;
-    const [offset, setOffset] = (0, react_1.useState)(0);
-    const moduleContentRef = (0, react_1.useRef)(null);
-    const layoutBodyRef = (0, react_1.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()
-    (0, react_1.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>
-    (0, react_1.useEffect)(() => {
-        if (moduleContentRef.current) {
-            moduleContentRef.current.scrollTop(0);
-            setOffset(0);
-        }
-    }, [scrollResetTrigger]);
-    (0, react_1.useEffect)(() => {
-        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {
-            layoutBodyRef.current.parentNode.style.setProperty('--ApplicationLayoutBodyBottomBarHeight', `${bottomBarHeight}px`);
-        }
-    }, [bottomBarHeight]);
-    const handleScroll = (0, debounce_1.default)(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 = (0, classnames_1.default)('ApplicationLayoutBody', bottomBar && 'has-footer', className);
-    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", { ...remainingProps, ref: layoutBodyRef, className: classes, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'module-content-wrapper', children: [navigation && navigation, banner && banner, (0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, { ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll, children: (0, jsx_runtime_1.jsx)("div", { className: 'scrollbar-content', children: children }) })] }), enableScrollToTop && ((0, jsx_runtime_1.jsx)("span", { className: scrollToTopClasses, children: (0, jsx_runtime_1.jsx)("button", { 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/ApplicationLayoutBodyBanner.d.ts

@@ -1,26 +0,0 @@
-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/lib/es/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const DEFAULT_TEXT_COLOR = 'text-color-white';
-const DEFAULT_BACKGROUND_COLOR = 'bg-primary';
-const ApplicationLayoutBodyBanner = (0, react_1.forwardRef)((props, ref) => {
-    const { textColor = DEFAULT_TEXT_COLOR, backgroundColor = DEFAULT_BACKGROUND_COLOR, isSticky = true, className, children, ...remainingProps } = props;
-    const bannerClasses = (0, classnames_1.default)('ApplicationLayoutBodyBanner', textColor, backgroundColor, isSticky && 'position-sticky top-0 z-index-3', className);
-    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, ref: ref, className: bannerClasses, children: children }));
-});
-exports.default = ApplicationLayoutBodyBanner;

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

@@ -1,30 +0,0 @@
-import { type PropsWithChildren, type ForwardRefExoticComponent, type RefAttributes } from 'react';
-type ButtonAlignmentLeft = 'left';
-type ButtonAlignmentRight = 'right';
-export type ApplicationLayoutBodyBottomBarProps = {
-    /**
-     * Additional class names that are added to the respective component
-     */
-    className?: string;
-    /**
-     * Use same paddings (left and right) as the ApplicationLayoutBody.
-     * @default false
-     */
-    useBodyPaddings?: boolean;
-    /**
-     * Tells the buttons if they are left or right aligned.
-     * Default behavior is: 1st button left and 2nd button right.
-     *
-     * Possible values are:
-     * `ApplicationLayoutBodyBottomBar.LEFT`, `ApplicationLayoutBodyBottomBar.RIGHT` or
-     * `left`, `right`
-     */
-    buttonAlignment?: ButtonAlignmentLeft | ButtonAlignmentRight;
-};
-type Props = PropsWithChildren<ApplicationLayoutBodyBottomBarProps>;
-type ApplicationLayoutBodyBottomBarType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {
-    LEFT: ButtonAlignmentLeft;
-    RIGHT: ButtonAlignmentRight;
-};
-declare const ApplicationLayoutBodyBottomBar: ApplicationLayoutBodyBottomBarType;
-export default ApplicationLayoutBodyBottomBar;