@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/applicationHeader/ApplicationActionBar.js

@@ -1,21 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["items", "nodeRef", "className"];
-import React from 'react';
-export var ApplicationActionBar = function ApplicationActionBar(_ref) {
-  var items = _ref.items,
-    nodeRef = _ref.nodeRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    remainigProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("ul", _extends({}, remainigProps, {
-    className: "ApplicationActionBar nav navbar-nav navbar-right ".concat(className),
-    ref: nodeRef
-  }), items && items.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: index,
-      role: "presentation",
-      className: "navigationItem"
-    }, item);
-  }));
-};
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+const ApplicationActionBar = (props) => {
+    const { items, nodeRef, className = '' } = props, remainingProps = __rest(props, ["items", "nodeRef", "className"]);
+    return (_jsx("ul", Object.assign({}, remainingProps, { className: `ApplicationActionBar nav navbar-nav navbar-right ${className}`, ref: nodeRef }, { children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+            return (_jsx("li", Object.assign({ role: 'presentation', className: 'navigationItem' }, { children: item }), index));
+        }) })));
+};
+export default ApplicationActionBar;

package/components/applicationHeader/ApplicationHeader.d.ts

@@ -0,0 +1,70 @@
+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,113 +1,32 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"];
-import React, { useState, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash/fp/debounce';
-import isEmpty from 'lodash/fp/isEmpty';
-import classname from 'classnames';
-import { AppMenu } from './AppMenu';
-import { ApplicationActionBar } from './ApplicationActionBar';
-import { MobileSubmoduleNavigation } from './MobileSubmoduleNavigation';
-import useResizeObserver from '../../hooks/useResizeObserver';
-import NavItems from './NavItems';
-import modulePropTypes from './modulePropTypes';
-import { MobileAppMenu } from './MobileAppMenu';
-var SCREEN_SM = 768; // @screen-sm: 768px;
-
-export var ApplicationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
-  var homeRoute = props.homeRoute,
-    showHomeIcon = props.showHomeIcon,
-    label = props.label,
-    className = props.className,
-    appNavigator = props.appNavigator,
-    appNavigatorClassName = props.appNavigatorClassName,
-    appMenuItems = props.appMenuItems,
-    navItems = props.navItems,
-    actionBarItems = props.actionBarItems,
-    onToggleAppMenu = props.onToggleAppMenu,
-    remainigProps = _objectWithoutProperties(props, _excluded);
-  var actionBarRef = useRef();
-  var _useResizeObserver = useResizeObserver(),
-    _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
-    navRef = _useResizeObserver2[0],
-    contentRect = _useResizeObserver2[1].contentRect;
-  useImperativeHandle(ref, function () {
-    return navRef;
-  }, []);
-  var getContentRect = useCallback(function (key) {
-    return contentRect && Math.round(contentRect[key]);
-  }, [contentRect]);
-  var containerWidth = getContentRect('width') || 0;
-  var isMobileWidth = containerWidth <= SCREEN_SM;
-  var hasActionBarItems = !isEmpty(actionBarItems);
-  var classNames = classname('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
-  return /*#__PURE__*/React.createElement("nav", _extends({}, remainigProps, {
-    className: classNames,
-    ref: navRef
-  }), isMobileWidth && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileAppMenu, {
-    showHomeIcon: showHomeIcon,
-    homeRoute: homeRoute,
-    appMenuItems: appMenuItems,
-    appNavigator: appNavigator,
-    onToggleAppMenu: onToggleAppMenu
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex-1-1-0 display-flex gap-10"
-  }, /*#__PURE__*/React.createElement(MobileSubmoduleNavigation, {
-    className: "flex-1-1",
-    label: label,
-    navItems: navItems,
-    actionBarItems: actionBarItems
-  }), hasActionBarItems && /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ApplicationActionBar, {
-    className: "mobile",
-    items: actionBarItems
-  }))), !isMobileWidth && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "navbar-header"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "navbar-brand ".concat(showHomeIcon ? 'home-icon' : '')
-  }, homeRoute)), label && /*#__PURE__*/React.createElement(AppMenu, {
-    label: label,
-    key: "AppMenu",
-    appMenuItems: appMenuItems,
-    appNavigator: appNavigator,
-    appNavigatorClassName: appNavigatorClassName,
-    onToggleAppMenu: onToggleAppMenu
-  }), isEmpty(navItems) && /*#__PURE__*/React.createElement("ul", {
-    className: "SubmoduleNavigation nav"
-  }), !isEmpty(navItems) && /*#__PURE__*/React.createElement(NavItems, {
-    key: "NavItems",
-    navItems: navItems,
-    containerWidth: containerWidth,
-    actionBarItems: actionBarItems
-  }), /*#__PURE__*/React.createElement(ApplicationActionBar, {
-    nodeRef: actionBarRef,
-    items: actionBarItems
-  })));
-});
-var Divider = function Divider() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "divider display-flex align-items-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "width-3 height-20 bg-lighter"
-  }));
-};
-export default ApplicationHeader;
-ApplicationHeader.defaultProps = {
-  homeRoute: '',
-  showHomeIcon: true,
-  actionBarItems: [],
-  onToggleAppMenu: function onToggleAppMenu() {}
-};
-ApplicationHeader.propTypes = {
-  label: PropTypes.node,
-  className: PropTypes.string,
-  homeRoute: PropTypes.node.isRequired,
-  showHomeIcon: PropTypes.bool,
-  appMenuItems: PropTypes.arrayOf(modulePropTypes),
-  appNavigator: PropTypes.node,
-  appNavigatorClassName: PropTypes.string,
-  navItems: PropTypes.arrayOf(modulePropTypes),
-  actionBarItems: PropTypes.arrayOf(PropTypes.node),
-  onToggleAppMenu: PropTypes.func
-};
+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

@@ -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/components/applicationHeader/CollapsedNavItem.js

@@ -0,0 +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;

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

@@ -1,55 +1,17 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import isNil from 'lodash/fp/isNil';
-import { MobileHeaderModal } from './MobileHeaderModal';
-import modulePropTypes from './modulePropTypes';
-export var MobileAppMenu = function MobileAppMenu(props) {
-  var appMenuItems = props.appMenuItems,
-    appNavigator = props.appNavigator,
-    showHomeIcon = props.showHomeIcon,
-    homeRoute = props.homeRoute,
-    onToggleAppMenu = props.onToggleAppMenu;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isShown = _useState2[0],
-    setIsShown = _useState2[1];
-  var handleToggleNavigation = function handleToggleNavigation() {
-    var newState = !isShown;
-    setIsShown(newState);
-    onToggleAppMenu(newState);
-  };
-  var hasAppContent = !(isNil(appMenuItems) && isNil(appNavigator));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative display-flex align-items-center",
-    onClick: handleToggleNavigation
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "navbar-brand height-40 width-40 ".concat(showHomeIcon ? 'home-icon' : '')
-  }, !hasAppContent && homeRoute), hasAppContent && /*#__PURE__*/React.createElement("div", {
-    className: "position-absolute right-2 bottom-0 text-color-white rotate-45"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph rioglyph-triangle-right"
-  }))), appNavigator && /*#__PURE__*/React.createElement(MobileHeaderModal, {
-    show: isShown,
-    modalClassName: "padding-top-25",
-    onClose: handleToggleNavigation
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "width-100pct height-100pct"
-  }, appNavigator)), appMenuItems && /*#__PURE__*/React.createElement(MobileHeaderModal, {
-    show: isShown,
-    modalClassName: "padding-15",
-    onClose: handleToggleNavigation
-  }, appMenuItems.map(function (module) {
-    return /*#__PURE__*/React.createElement("li", {
-      role: "presentation",
-      key: "link-icon-".concat(module.key)
-    }, module.route);
-  })));
-};
-MobileAppMenu.propTypes = {
-  homeRoute: PropTypes.node,
-  showHomeIcon: PropTypes.bool,
-  appMenuItems: PropTypes.arrayOf(modulePropTypes),
-  appNavigator: PropTypes.element,
-  onToggleAppMenu: PropTypes.func
-};
+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

@@ -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/components/applicationHeader/MobileHeaderModal.js

@@ -1,72 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import { getOrCreatePortalRoot } from '../../utils/portalRoot';
-var OFFSET_POSITION = -1000;
-export var MobileHeaderModal = function MobileHeaderModal(props) {
-  var show = props.show,
-    showClose = props.showClose,
-    modalClassName = props.modalClassName,
-    className = props.className,
-    onClose = props.onClose,
-    children = props.children;
-  var wrapperClasses = classNames('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
-  var modalClasses = classNames('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
-  var modalRoot = getOrCreatePortalRoot();
-  var pageHeight = window.innerHeight - 30;
-  var offset = OFFSET_POSITION - window.innerHeight;
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatePresence, null, show && /*#__PURE__*/React.createElement(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
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: modalClasses,
-    style: {
-      height: "".concat(pageHeight, "px")
-    }
-  }, children), showClose && /*#__PURE__*/React.createElement("div", {
-    className: 'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' + 'text-size-20 text-color-dark',
-    onClick: onClose
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph rioglyph-remove"
-  })))), /*#__PURE__*/React.createElement(AnimatePresence, null, show && /*#__PURE__*/React.createElement(motion.div, {
-    className: "bottom-sheet-backdrop",
-    initial: {
-      opacity: 0
-    },
-    animate: {
-      opacity: 0.5
-    },
-    exit: {
-      opacity: 0
-    }
-  }))), modalRoot);
-};
-MobileHeaderModal.defaultProps = {
-  show: false,
-  showClose: true,
-  onClose: function onClose() {}
-};
-MobileHeaderModal.propTypes = {
-  show: PropTypes.bool,
-  showClose: PropTypes.bool,
-  modalClassName: PropTypes.string,
-  onClose: PropTypes.func,
-  className: PropTypes.string
-};
+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

@@ -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/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -1,63 +1,22 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
-import modulePropTypes from './modulePropTypes';
-import { MobileHeaderModal } from './MobileHeaderModal';
-export var MobileSubmoduleNavigation = function MobileSubmoduleNavigation(props) {
-  var navItems = props.navItems,
-    label = props.label,
-    className = props.className;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isShown = _useState2[0],
-    setIsShown = _useState2[1];
-  var handleToggleNavigation = function handleToggleNavigation() {
-    return setIsShown(!isShown);
-  };
-  var hasNavItems = !isEmpty(navItems);
-  var classes = classNames('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
-  var 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 /*#__PURE__*/React.createElement("div", {
-    className: classes,
-    onClick: handleToggleNavigation
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-1-1 display-flex flex-column align-items-center width-0"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: labelClasses
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: "text-medium width-100pct"
-  }, navItems.map(function (navItem) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: navItem.key,
-      className: "ellipsis-1"
-    }, /*#__PURE__*/React.cloneElement(navItem.route, {
-      className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
-      onClick: function onClick(event) {
-        return event.preventDefault();
-      }
-    }));
-  }))), hasNavItems && /*#__PURE__*/React.createElement("div", {
-    className: "text-size-16 text-color-dark"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph rioglyph-chevron-down"
-  })), hasNavItems && /*#__PURE__*/React.createElement(MobileHeaderModal, {
-    show: isShown
-  }, navItems.map(function (navItem) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: navItem.key,
-      className: "margin-y-15 font-size-20"
-    }, /*#__PURE__*/React.cloneElement(navItem.route, {
-      className: 'text-size-20 text-color-darker'
-    }));
-  })));
-};
-MobileSubmoduleNavigation.defaultProps = {
-  navItems: []
-};
-MobileSubmoduleNavigation.propTypes = {
-  label: PropTypes.node,
-  navItems: PropTypes.arrayOf(modulePropTypes),
-  className: PropTypes.string
-};
+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

@@ -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;