@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/components/applicationHeader/ApplicationHeader.d.ts

@@ -1,19 +1,70 @@
-import React from 'react';
-export type ModulePropType = {
-    key: string;
-    route: React.ReactNode;
-};
-export type ApplicationHeaderProps = {
-    label?: string | React.ReactNode;
-    homeRoute?: React.ReactNode;
-    showHomeIcon?: boolean;
-    appNavigator?: React.ReactNode;
-    appNavigatorClassName?: string;
-    appMenuItems?: ModulePropType[];
-    navItems?: ModulePropType[];
-    actionBarItems: React.ReactNode[];
-    onToggleAppMenu?: (isOpen: boolean) => void;
-    className?: string;
-};
-export declare const ApplicationHeader: React.ForwardRefExoticComponent<ApplicationHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export default ApplicationHeader;
+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
+     * <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
+     * <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 other 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 sub-module 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`
+     */
+    actionBarItems?: React.ReactNode[];
+    /**
+     * Callback function triggered when the application menu is open or closed.
+     * @param isOpen
+     * @returns
+     */
+    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/components/applicationHeader/ApplicationHeader.js

@@ -1,32 +1,32 @@
-import { __rest } from "tslib";
-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 = () => { } } = props, remainingProps = __rest(props, ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"]);
-    const actionBarRef = useRef(null);
-    const [navRef, entry] = useResizeObserver();
-    const contentRect = entry === null || entry === void 0 ? void 0 : entry.contentRect;
-    useImperativeHandle(ref, () => navRef, [navRef]);
-    const getContentRect = useCallback((key) => {
-        if (contentRect) {
-            const value = contentRect[key];
-            return typeof value === 'number' && Math.round(value);
-        }
-    }, [contentRect]);
-    const containerWidth = getContentRect('width') || 0;
-    const isMobileWidth = containerWidth <= SCREEN_SM;
-    const hasActionBarItems = !isEmpty(actionBarItems);
-    const wrapperClassNames = classNames('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
-    return (_jsxs("nav", Object.assign({}, 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", Object.assign({ 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", Object.assign({ className: 'navbar-header' }, { children: _jsx("span", Object.assign({ 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", Object.assign({ className: 'divider display-flex align-items-center' }, { children: _jsx("div", { className: 'width-3 height-20 bg-lighter' }) })));
-export default ApplicationHeader;
+import { __rest } from "tslib";
+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 = () => { } } = props, remainingProps = __rest(props, ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"]);
+    const actionBarRef = useRef(null);
+    const [navRef, entry] = useResizeObserver();
+    const contentRect = entry === null || entry === void 0 ? void 0 : entry.contentRect;
+    useImperativeHandle(ref, () => navRef, [navRef]);
+    const getContentRect = useCallback((key) => {
+        if (contentRect) {
+            const value = contentRect[key];
+            return typeof value === 'number' && Math.round(value);
+        }
+    }, [contentRect]);
+    const containerWidth = getContentRect('width') || 0;
+    const isMobileWidth = containerWidth <= SCREEN_SM;
+    const hasActionBarItems = !isEmpty(actionBarItems);
+    const wrapperClassNames = classNames('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
+    return (_jsxs("nav", Object.assign({}, 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", Object.assign({ 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", Object.assign({ className: 'navbar-header' }, { children: _jsx("span", Object.assign({ 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", Object.assign({ className: 'divider display-flex align-items-center' }, { children: _jsx("div", { className: 'width-3 height-20 bg-lighter' }) })));
+export default ApplicationHeader;

package/components/applicationHeader/CollapsedNavItem.d.ts

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

@@ -1,14 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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", Object.assign({ className: `CollapsedDropdown dropdown ${collapsedDropdownClass}`, ref: ref }, { children: [_jsx("a", Object.assign({ 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", Object.assign({ className: 'dropdown-menu', role: 'menu', "aria-labelledby": 'basic-nav-dropdown' }, { children: navItems.map(navItem => {
-                    return (_jsx("li", Object.assign({ className: 'submodule', onClick: onItemClick, "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key));
-                }) }))] }), 'collapsed-dropdown'));
-});
-export default CollapsedNavItem;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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", Object.assign({ className: `CollapsedDropdown dropdown ${collapsedDropdownClass}`, ref: ref }, { children: [_jsx("a", Object.assign({ 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", Object.assign({ className: 'dropdown-menu', role: 'menu', "aria-labelledby": 'basic-nav-dropdown' }, { children: navItems.map(navItem => {
+                    return (_jsx("li", Object.assign({ className: 'submodule', onClick: onItemClick, "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key));
+                }) }))] }), 'collapsed-dropdown'));
+});
+export default CollapsedNavItem;

package/components/applicationHeader/MobileAppMenu.d.ts

@@ -1,11 +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) => JSX.Element;
-export default MobileAppMenu;
+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/components/applicationHeader/MobileAppMenu.js

@@ -1,17 +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", Object.assign({ className: 'navbar-header min-width-50 padding-5 ' +
-                    'overflow-hidden position-relative display-flex align-items-center', onClick: handleToggleNavigation }, { children: [_jsx("span", Object.assign({ className: `navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}` }, { children: !hasAppContent && homeRoute })), hasAppContent && (_jsx("div", Object.assign({ className: 'position-absolute right-2 bottom-0 text-color-white rotate-45' }, { children: _jsx("span", { className: 'rioglyph rioglyph-triangle-right' }) })))] })), appNavigator && (_jsx(MobileHeaderModal, Object.assign({ show: isShown, modalClassName: 'padding-top-25', onClose: handleToggleNavigation }, { children: _jsx("div", Object.assign({ className: 'width-100pct height-100pct' }, { children: appNavigator })) }))), appMenuItems && (_jsx(MobileHeaderModal, Object.assign({ show: isShown, modalClassName: 'padding-15', onClose: handleToggleNavigation }, { children: appMenuItems.map(module => (_jsx("li", Object.assign({ role: 'presentation' }, { children: module.route }), `link-icon-${module.key}`))) })))] }));
-};
-export default MobileAppMenu;
+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", Object.assign({ className: 'navbar-header min-width-50 padding-5 ' +
+                    'overflow-hidden position-relative display-flex align-items-center', onClick: handleToggleNavigation }, { children: [_jsx("span", Object.assign({ className: `navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}` }, { children: !hasAppContent && homeRoute })), hasAppContent && (_jsx("div", Object.assign({ className: 'position-absolute right-2 bottom-0 text-color-white rotate-45' }, { children: _jsx("span", { className: 'rioglyph rioglyph-triangle-right' }) })))] })), appNavigator && (_jsx(MobileHeaderModal, Object.assign({ show: isShown, modalClassName: 'padding-top-25', onClose: handleToggleNavigation }, { children: _jsx("div", Object.assign({ className: 'width-100pct height-100pct' }, { children: appNavigator })) }))), appMenuItems && (_jsx(MobileHeaderModal, Object.assign({ show: isShown, modalClassName: 'padding-15', onClose: handleToggleNavigation }, { children: appMenuItems.map(module => (_jsx("li", Object.assign({ role: 'presentation' }, { children: module.route }), `link-icon-${module.key}`))) })))] }));
+};
+export default MobileAppMenu;

package/components/applicationHeader/MobileHeaderModal.d.ts

@@ -1,10 +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>) => JSX.Element;
-export default MobileHeaderModal;
+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/components/applicationHeader/MobileHeaderModal.js

@@ -1,18 +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, Object.assign({ 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", Object.assign({ className: modalClasses, style: { height: `${pageHeight}px` } }, { children: children })), showClose && (_jsx("div", Object.assign({ 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;
+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, Object.assign({ 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", Object.assign({ className: modalClasses, style: { height: `${pageHeight}px` } }, { children: children })), showClose && (_jsx("div", Object.assign({ 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/components/applicationHeader/MobileSubmoduleNavigation.d.ts

@@ -1,9 +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) => JSX.Element;
-export default MobileSubmoduleNavigation;
+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/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -1,22 +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", Object.assign({ className: classes, onClick: handleToggleNavigation }, { children: [_jsxs("div", Object.assign({ className: 'flex-1-1 display-flex flex-column align-items-center width-0' }, { children: [_jsx("div", Object.assign({ className: labelClasses }, { children: label })), _jsx("div", Object.assign({ className: 'text-medium width-100pct' }, { children: navItems.map(navItem => (_jsx("div", Object.assign({ 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", Object.assign({ className: 'text-size-16 text-color-dark' }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-down' }) }))), hasNavItems && (_jsx(MobileHeaderModal, Object.assign({ show: isShown }, { children: navItems.map(navItem => (_jsx("div", Object.assign({ className: 'margin-y-15 font-size-20' }, { children: React.cloneElement(navItem.route, {
-                        className: 'text-size-20 text-color-darker',
-                    }) }), navItem.key))) })))] })));
-};
-export default MobileSubmoduleNavigation;
+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", Object.assign({ className: classes, onClick: handleToggleNavigation }, { children: [_jsxs("div", Object.assign({ className: 'flex-1-1 display-flex flex-column align-items-center width-0' }, { children: [_jsx("div", Object.assign({ className: labelClasses }, { children: label })), _jsx("div", Object.assign({ className: 'text-medium width-100pct' }, { children: navItems.map(navItem => (_jsx("div", Object.assign({ 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", Object.assign({ className: 'text-size-16 text-color-dark' }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-down' }) }))), hasNavItems && (_jsx(MobileHeaderModal, Object.assign({ show: isShown }, { children: navItems.map(navItem => (_jsx("div", Object.assign({ 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/components/applicationHeader/NavItems.d.ts

@@ -1,9 +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) => JSX.Element;
-export default NavItems;
+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;