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

package/lib/es/components/applicationHeader/AppMenuDropdown.js

@@ -1,89 +1,42 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.AppMenuDropdown = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var ToggleButton = function ToggleButton(props) {
-  var title = props.title,
-    caret = props.caret;
-  return /*#__PURE__*/_react["default"].createElement("a", {
-    className: (0, _classnames["default"])('ModuleNavigation-dropdown dropdown-toggle justify-content-between', {
-      inactive: !caret
-    }),
-    role: "button",
-    id: "basic-nav-dropdown"
-  }, /*#__PURE__*/_react["default"].createElement("span", null, title), caret && /*#__PURE__*/_react["default"].createElement("span", {
-    className: "caret"
-  }));
-};
-var DropdownMenu = function DropdownMenu(props) {
-  var children = props.children;
-  if ((0, _isEmpty["default"])(children)) {
-    return null;
-  }
-  return /*#__PURE__*/_react["default"].createElement("ul", {
-    role: "menu",
-    className: "dropdown-menu"
-  }, children);
-};
-var AppMenuDropdownOpener = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var open = props.open,
-    children = props.children,
-    onDropdownClick = props.onDropdownClick;
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    ref: ref,
-    className: (0, _classnames["default"])('dropdown', {
-      open: open
-    }),
-    onClick: onDropdownClick
-  }, children);
-});
-var AppMenuDropdown = function AppMenuDropdown(props) {
-  var title = props.title,
-    caret = props.caret,
-    onToggleAppMenu = props.onToggleAppMenu,
-    children = props.children;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var wrapperRef = (0, _useClickOutside["default"])(function () {
-    return setIsOpen(false);
-  });
-  var handleDropdownClick = function handleDropdownClick() {
-    var newState = !isOpen;
-    setIsOpen(newState);
-    onToggleAppMenu(newState);
-  };
-  var openWithChildren = !(0, _isEmpty["default"])(children) && isOpen;
-  return /*#__PURE__*/_react["default"].createElement(AppMenuDropdownOpener, {
-    open: openWithChildren,
-    onDropdownClick: handleDropdownClick,
-    ref: wrapperRef
-  }, /*#__PURE__*/_react["default"].createElement(ToggleButton, {
-    title: title,
-    caret: caret
-  }), /*#__PURE__*/_react["default"].createElement(DropdownMenu, null, children));
-};
-exports.AppMenuDropdown = AppMenuDropdown;
-var _default = AppMenuDropdown;
-exports["default"] = _default;
-AppMenuDropdown.defaultProps = {
-  caret: false
-};
-AppMenuDropdown.propTypes = {
-  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired,
-  caret: _propTypes["default"].bool,
-  onToggleAppMenu: _propTypes["default"].func
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppMenuDropdown = 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 noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const useClickOutside_1 = tslib_1.__importDefault(require("../../hooks/useClickOutside"));
+const ToggleButton = (props) => {
+    const { title, caret } = props;
+    const toggleClassName = (0, classnames_1.default)('ModuleNavigation-dropdown', 'dropdown-toggle justify-content-between', {
+        inactive: !caret,
+    });
+    return ((0, jsx_runtime_1.jsxs)("a", Object.assign({ className: toggleClassName, role: 'button', id: 'basic-nav-dropdown' }, { children: [(0, jsx_runtime_1.jsx)("span", { children: title }), caret && (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
+};
+const DropdownMenu = (props) => {
+    const { children } = props;
+    if ((0, isEmpty_1.default)(children)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ role: 'menu', className: 'dropdown-menu' }, { children: children })));
+};
+const AppMenuDropdownOpener = (0, react_1.forwardRef)((props, ref) => {
+    const { open, children, onDropdownClick } = props;
+    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ ref: ref, className: (0, classnames_1.default)('dropdown', { open }), onClick: onDropdownClick }, { children: children })));
+});
+const AppMenuDropdown = (props) => {
+    const { title, caret = false, onToggleAppMenu = noop_1.default, children } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const wrapperRef = (0, useClickOutside_1.default)(() => setIsOpen(false));
+    const handleDropdownClick = () => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        onToggleAppMenu(newState);
+    };
+    const openWithChildren = !(0, isEmpty_1.default)(children) && isOpen;
+    return ((0, jsx_runtime_1.jsxs)(AppMenuDropdownOpener, Object.assign({ open: openWithChildren, onDropdownClick: handleDropdownClick, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, { title: title, caret: caret }), (0, jsx_runtime_1.jsx)(DropdownMenu, { children: children })] })));
+};
+exports.AppMenuDropdown = AppMenuDropdown;
+exports.default = exports.AppMenuDropdown;

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

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

package/lib/es/components/applicationHeader/ApplicationActionBar.js

@@ -1,29 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ApplicationActionBar = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _excluded = ["items", "nodeRef", "className"];
-var ApplicationActionBar = function ApplicationActionBar(_ref) {
-  var items = _ref.items,
-    nodeRef = _ref.nodeRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    remainigProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement("ul", (0, _extends2["default"])({}, remainigProps, {
-    className: "ApplicationActionBar nav navbar-nav navbar-right ".concat(className),
-    ref: nodeRef
-  }), items && items.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      key: index,
-      role: "presentation",
-      className: "navigationItem"
-    }, item);
-  }));
-};
-exports.ApplicationActionBar = ApplicationActionBar;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const ApplicationActionBar = (props) => {
+    const { items, nodeRef, className = '' } = props, remainingProps = tslib_1.__rest(props, ["items", "nodeRef", "className"]);
+    return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: 'presentation', className: 'navigationItem' }, { children: item }), index));
+        }) })));
+};
+exports.default = ApplicationActionBar;

package/lib/es/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/lib/es/components/applicationHeader/ApplicationHeader.js

@@ -1,125 +1,35 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.ApplicationHeader = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _AppMenu = require("./AppMenu");
-var _ApplicationActionBar = require("./ApplicationActionBar");
-var _MobileSubmoduleNavigation = require("./MobileSubmoduleNavigation");
-var _useResizeObserver3 = _interopRequireDefault(require("../../hooks/useResizeObserver"));
-var _NavItems = _interopRequireDefault(require("./NavItems"));
-var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
-var _MobileAppMenu = require("./MobileAppMenu");
-var _excluded = ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var SCREEN_SM = 768; // @screen-sm: 768px;
-
-var ApplicationHeader = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var actionBarRef = (0, _react.useRef)();
-  var _useResizeObserver = (0, _useResizeObserver3["default"])(),
-    _useResizeObserver2 = (0, _slicedToArray2["default"])(_useResizeObserver, 2),
-    navRef = _useResizeObserver2[0],
-    contentRect = _useResizeObserver2[1].contentRect;
-  (0, _react.useImperativeHandle)(ref, function () {
-    return navRef;
-  }, []);
-  var getContentRect = (0, _react.useCallback)(function (key) {
-    return contentRect && Math.round(contentRect[key]);
-  }, [contentRect]);
-  var containerWidth = getContentRect('width') || 0;
-  var isMobileWidth = containerWidth <= SCREEN_SM;
-  var hasActionBarItems = !(0, _isEmpty["default"])(actionBarItems);
-  var classNames = (0, _classnames["default"])('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
-  return /*#__PURE__*/_react["default"].createElement("nav", (0, _extends2["default"])({}, remainigProps, {
-    className: classNames,
-    ref: navRef
-  }), isMobileWidth && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MobileAppMenu.MobileAppMenu, {
-    showHomeIcon: showHomeIcon,
-    homeRoute: homeRoute,
-    appMenuItems: appMenuItems,
-    appNavigator: appNavigator,
-    onToggleAppMenu: onToggleAppMenu
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "flex-1-1-0 display-flex gap-10"
-  }, /*#__PURE__*/_react["default"].createElement(_MobileSubmoduleNavigation.MobileSubmoduleNavigation, {
-    className: "flex-1-1",
-    label: label,
-    navItems: navItems,
-    actionBarItems: actionBarItems
-  }), hasActionBarItems && /*#__PURE__*/_react["default"].createElement(Divider, null), /*#__PURE__*/_react["default"].createElement(_ApplicationActionBar.ApplicationActionBar, {
-    className: "mobile",
-    items: actionBarItems
-  }))), !isMobileWidth && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "navbar-header"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "navbar-brand ".concat(showHomeIcon ? 'home-icon' : '')
-  }, homeRoute)), label && /*#__PURE__*/_react["default"].createElement(_AppMenu.AppMenu, {
-    label: label,
-    key: "AppMenu",
-    appMenuItems: appMenuItems,
-    appNavigator: appNavigator,
-    appNavigatorClassName: appNavigatorClassName,
-    onToggleAppMenu: onToggleAppMenu
-  }), (0, _isEmpty["default"])(navItems) && /*#__PURE__*/_react["default"].createElement("ul", {
-    className: "SubmoduleNavigation nav"
-  }), !(0, _isEmpty["default"])(navItems) && /*#__PURE__*/_react["default"].createElement(_NavItems["default"], {
-    key: "NavItems",
-    navItems: navItems,
-    containerWidth: containerWidth,
-    actionBarItems: actionBarItems
-  }), /*#__PURE__*/_react["default"].createElement(_ApplicationActionBar.ApplicationActionBar, {
-    nodeRef: actionBarRef,
-    items: actionBarItems
-  })));
-});
-exports.ApplicationHeader = ApplicationHeader;
-var Divider = function Divider() {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "divider display-flex align-items-center"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "width-3 height-20 bg-lighter"
-  }));
-};
-var _default = ApplicationHeader;
-exports["default"] = _default;
-ApplicationHeader.defaultProps = {
-  homeRoute: '',
-  showHomeIcon: true,
-  actionBarItems: [],
-  onToggleAppMenu: function onToggleAppMenu() {}
-};
-ApplicationHeader.propTypes = {
-  label: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  homeRoute: _propTypes["default"].node.isRequired,
-  showHomeIcon: _propTypes["default"].bool,
-  appMenuItems: _propTypes["default"].arrayOf(_modulePropTypes["default"]),
-  appNavigator: _propTypes["default"].node,
-  appNavigatorClassName: _propTypes["default"].string,
-  navItems: _propTypes["default"].arrayOf(_modulePropTypes["default"]),
-  actionBarItems: _propTypes["default"].arrayOf(_propTypes["default"].node),
-  onToggleAppMenu: _propTypes["default"].func
-};
+"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 = () => { } } = props, remainingProps = tslib_1.__rest(props, ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"]);
+    const actionBarRef = (0, react_1.useRef)(null);
+    const [navRef, entry] = (0, useResizeObserver_1.default)();
+    const contentRect = entry === null || entry === void 0 ? void 0 : 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]);
+    const containerWidth = getContentRect('width') || 0;
+    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", Object.assign({}, 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", Object.assign({ 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", Object.assign({ className: 'navbar-header' }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ 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", Object.assign({ 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

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

@@ -0,0 +1,17 @@
+"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 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", Object.assign({ className: `CollapsedDropdown dropdown ${collapsedDropdownClass}`, ref: ref }, { children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-horizontal', "aria-hidden": 'true' }) })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'dropdown-menu', role: 'menu', "aria-labelledby": 'basic-nav-dropdown' }, { children: navItems.map(navItem => {
+                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ 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

@@ -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/lib/es/components/applicationHeader/MobileAppMenu.js

@@ -1,66 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MobileAppMenu = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
-var _MobileHeaderModal = require("./MobileHeaderModal");
-var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var MobileAppMenu = function MobileAppMenu(props) {
-  var appMenuItems = props.appMenuItems,
-    appNavigator = props.appNavigator,
-    showHomeIcon = props.showHomeIcon,
-    homeRoute = props.homeRoute,
-    onToggleAppMenu = props.onToggleAppMenu;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isShown = _useState2[0],
-    setIsShown = _useState2[1];
-  var handleToggleNavigation = function handleToggleNavigation() {
-    var newState = !isShown;
-    setIsShown(newState);
-    onToggleAppMenu(newState);
-  };
-  var hasAppContent = !((0, _isNil["default"])(appMenuItems) && (0, _isNil["default"])(appNavigator));
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative display-flex align-items-center",
-    onClick: handleToggleNavigation
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "navbar-brand height-40 width-40 ".concat(showHomeIcon ? 'home-icon' : '')
-  }, !hasAppContent && homeRoute), hasAppContent && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "position-absolute right-2 bottom-0 text-color-white rotate-45"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph rioglyph-triangle-right"
-  }))), appNavigator && /*#__PURE__*/_react["default"].createElement(_MobileHeaderModal.MobileHeaderModal, {
-    show: isShown,
-    modalClassName: "padding-top-25",
-    onClose: handleToggleNavigation
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "width-100pct height-100pct"
-  }, appNavigator)), appMenuItems && /*#__PURE__*/_react["default"].createElement(_MobileHeaderModal.MobileHeaderModal, {
-    show: isShown,
-    modalClassName: "padding-15",
-    onClose: handleToggleNavigation
-  }, appMenuItems.map(function (module) {
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      role: "presentation",
-      key: "link-icon-".concat(module.key)
-    }, module.route);
-  })));
-};
-exports.MobileAppMenu = MobileAppMenu;
-MobileAppMenu.propTypes = {
-  homeRoute: _propTypes["default"].node,
-  showHomeIcon: _propTypes["default"].bool,
-  appMenuItems: _propTypes["default"].arrayOf(_modulePropTypes["default"]),
-  appNavigator: _propTypes["default"].element,
-  onToggleAppMenu: _propTypes["default"].func
-};
+"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", Object.assign({ 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", Object.assign({ className: `navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}` }, { children: !hasAppContent && homeRoute })), hasAppContent && ((0, jsx_runtime_1.jsx)("div", Object.assign({ 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, Object.assign({ show: isShown, modalClassName: 'padding-top-25', onClose: handleToggleNavigation }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'width-100pct height-100pct' }, { children: appNavigator })) }))), appMenuItems && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, Object.assign({ show: isShown, modalClassName: 'padding-15', onClose: handleToggleNavigation }, { children: appMenuItems.map(module => ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: 'presentation' }, { children: module.route }), `link-icon-${module.key}`))) })))] }));
+};
+exports.default = MobileAppMenu;

package/lib/es/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;