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

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

@@ -1,80 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MobileHeaderModal = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _framerMotion = require("framer-motion");
-var _portalRoot = require("../../utils/portalRoot");
-var OFFSET_POSITION = -1000;
-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 = (0, _classnames["default"])('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
-  var modalClasses = (0, _classnames["default"])('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
-  var modalRoot = (0, _portalRoot.getOrCreatePortalRoot)();
-  var pageHeight = window.innerHeight - 30;
-  var offset = OFFSET_POSITION - window.innerHeight;
-  return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, show && /*#__PURE__*/_react["default"].createElement(_framerMotion.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["default"].createElement("div", {
-    className: modalClasses,
-    style: {
-      height: "".concat(pageHeight, "px")
-    }
-  }, children), showClose && /*#__PURE__*/_react["default"].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["default"].createElement("span", {
-    className: "rioglyph rioglyph-remove"
-  })))), /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, show && /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
-    className: "bottom-sheet-backdrop",
-    initial: {
-      opacity: 0
-    },
-    animate: {
-      opacity: 0.5
-    },
-    exit: {
-      opacity: 0
-    }
-  }))), modalRoot);
-};
-exports.MobileHeaderModal = MobileHeaderModal;
-MobileHeaderModal.defaultProps = {
-  show: false,
-  showClose: true,
-  onClose: function onClose() {}
-};
-MobileHeaderModal.propTypes = {
-  show: _propTypes["default"].bool,
-  showClose: _propTypes["default"].bool,
-  modalClassName: _propTypes["default"].string,
-  onClose: _propTypes["default"].func,
-  className: _propTypes["default"].string
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const portalRoot_1 = require("../../utils/portalRoot");
+const OFFSET_POSITION = -1000;
+const MobileHeaderModal = (props) => {
+    const { show = false, showClose = true, modalClassName, className, onClose = () => { }, children } = props;
+    const wrapperClasses = (0, classnames_1.default)('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
+    const modalClasses = (0, classnames_1.default)('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
+    const modalRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
+    const pageHeight = window.innerHeight - 30;
+    const offset = OFFSET_POSITION - window.innerHeight;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, 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: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: modalClasses, style: { height: `${pageHeight}px` } }, { children: children })), showClose && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })))] }))) }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: 'bottom-sheet-backdrop', initial: { opacity: 0 }, animate: { opacity: 0.5 }, exit: { opacity: 0 } })) })] }), modalRoot) }));
+};
+exports.default = MobileHeaderModal;

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

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

@@ -1,74 +1,25 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MobileSubmoduleNavigation = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
-var _MobileHeaderModal = require("./MobileHeaderModal");
-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 MobileSubmoduleNavigation = function MobileSubmoduleNavigation(props) {
-  var navItems = props.navItems,
-    label = props.label,
-    className = props.className;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isShown = _useState2[0],
-    setIsShown = _useState2[1];
-  var handleToggleNavigation = function handleToggleNavigation() {
-    return setIsShown(!isShown);
-  };
-  var hasNavItems = !(0, _isEmpty["default"])(navItems);
-  var classes = (0, _classnames["default"])('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
-  var labelClasses = (0, _classnames["default"])(hasNavItems ? 'text-size-12 text-color-dark line-height-14' : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase', 'width-100pct ellipsis-1');
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes,
-    onClick: handleToggleNavigation
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "flex-1-1 display-flex flex-column align-items-center width-0"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: labelClasses
-  }, label), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "text-medium width-100pct"
-  }, navItems.map(function (navItem) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: navItem.key,
-      className: "ellipsis-1"
-    }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
-    className: "text-size-16 text-color-dark"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph rioglyph-chevron-down"
-  })), hasNavItems && /*#__PURE__*/_react["default"].createElement(_MobileHeaderModal.MobileHeaderModal, {
-    show: isShown
-  }, navItems.map(function (navItem) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: navItem.key,
-      className: "margin-y-15 font-size-20"
-    }, /*#__PURE__*/_react["default"].cloneElement(navItem.route, {
-      className: 'text-size-20 text-color-darker'
-    }));
-  })));
-};
-exports.MobileSubmoduleNavigation = MobileSubmoduleNavigation;
-MobileSubmoduleNavigation.defaultProps = {
-  navItems: []
-};
-MobileSubmoduleNavigation.propTypes = {
-  label: _propTypes["default"].node,
-  navItems: _propTypes["default"].arrayOf(_modulePropTypes["default"]),
-  className: _propTypes["default"].string
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const MobileHeaderModal_1 = tslib_1.__importDefault(require("./MobileHeaderModal"));
+const MobileSubmoduleNavigation = (props) => {
+    const { navItems = [], label, className } = props;
+    const [isShown, setIsShown] = (0, react_1.useState)(false);
+    const handleToggleNavigation = () => setIsShown(!isShown);
+    const hasNavItems = !(0, isEmpty_1.default)(navItems);
+    const classes = (0, classnames_1.default)('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
+    const labelClasses = (0, classnames_1.default)(hasNavItems
+        ? 'text-size-12 text-color-dark line-height-14'
+        : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase', 'width-100pct ellipsis-1');
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, onClick: handleToggleNavigation }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex-1-1 display-flex flex-column align-items-center width-0' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: labelClasses }, { children: label })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-medium width-100pct' }, { children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'ellipsis-1' }, { children: react_1.default.cloneElement(navItem.route, {
+                                className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
+                                onClick: (event) => event.preventDefault(),
+                            }) }), navItem.key))) }))] })), hasNavItems && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-size-16 text-color-dark' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-down' }) }))), hasNavItems && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, Object.assign({ show: isShown }, { children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'margin-y-15 font-size-20' }, { children: react_1.default.cloneElement(navItem.route, {
+                        className: 'text-size-20 text-color-darker',
+                    }) }), navItem.key))) })))] })));
+};
+exports.default = MobileSubmoduleNavigation;

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

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

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

@@ -1,207 +1,127 @@
-"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.NavItems = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _head = _interopRequireDefault(require("lodash/fp/head"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
-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 collapsedDropdownWidth = 50;
-var paddingLeft = 15;
-var NavItems = function NavItems(props) {
-  var externalNavItems = props.navItems,
-    actionBarItems = props.actionBarItems,
-    containerWidth = props.containerWidth;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isCollapsedNavItemOpen = _useState2[0],
-    setIsCollapsedNavItemOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    collapsedNavItems = _useState4[0],
-    setCollapsedNavItems = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    visibleNavItems = _useState6[0],
-    setVisibleNavItems = _useState6[1];
-  var collapsedDropdownRef = (0, _useClickOutside["default"])(function () {
-    return setIsCollapsedNavItemOpen(false);
-  });
-  var navigationRef = (0, _react.useRef)();
-  var isOffscreen = (0, _react.useRef)(true);
-
-  // console.log({ containerWidth });
-
-  // Before any new changes are applied
-  (0, _react.useEffect)(function () {
-    // After the component received new props, every nav item has to be rendered offscreen
-    // again without collapsing them into the dropdown to measure its width
-    isOffscreen.current = true;
-  }, [externalNavItems, actionBarItems, containerWidth]);
-
-  // After the component has been rendered
-  (0, _react.useLayoutEffect)(function () {
-    // After every nav item was rendered offscreen again we need to recalculate the width
-    // of the items again and render the result with possible collapsible dropdown.
-    if (isOffscreen.current) {
-      computeNavItems();
-    }
-  });
-  var getAvailableWidth = function getAvailableWidth(element) {
-    // Get relevant elements
-    // const parent = element.parentNode;
-
-    // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));
-    // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;
-
-    // Since the collapsed dropdown has not been rendered yet,
-    // use the fixed with for it to compute available width
-    var availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;
-    return availableWidth;
-  };
-  var computeNavItems = function computeNavItems() {
-    var element = navigationRef.current;
-    var navItems = (0, _toConsumableArray2["default"])(element.children);
-    var availableWidth = getAvailableWidth(element);
-    if (availableWidth < 0) {
-      return;
-    }
-
-    // Iterate over all rendered navItems to figure out their widths in order to figure out
-    // which navItems need to be rendered in the collapsed dropdown
-    var requiredNavItemsSize = 0;
-    var updatedVisibleItems = [];
-    var updatedCollapsedItems = [];
-    navItems.forEach(function (item) {
-      if (!item.className) {
-        return;
-      }
-
-      // Calculate the remaining width
-      requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;
-
-      // console.log({ requiredNavItemsSize });
-
-      // Use the navItems.key to find corresponding navItems for each DOM node
-      var matchedNavItem = externalNavItems.find(function (navItem) {
-        var dataAttr = item.attributes['data-nav-item-key'];
-        return dataAttr && navItem.key === dataAttr.value;
-      });
-      if (!matchedNavItem) {
-        return;
-      }
-
-      // Add navItems to the visible group until the available with exceeds.
-      // All other navItems will be added to the collapsed group
-      if (availableWidth > requiredNavItemsSize) {
-        updatedVisibleItems.push(matchedNavItem);
-      } else {
-        updatedCollapsedItems.push(matchedNavItem);
-      }
-    });
-
-    // Set the state to render the navItems again
-    isOffscreen.current = false;
-    setVisibleNavItems(updatedVisibleItems);
-    setCollapsedNavItems(updatedCollapsedItems);
-  };
-  var handleCollapsedDropdown = function handleCollapsedDropdown() {
-    // When the dropdown is open, set showCollapsedNavItems to false so all submodule items
-    // are rendered and their size can be computed
-    if (isCollapsedNavItemOpen) {
-      setIsCollapsedNavItemOpen(false);
-    } else {
-      // When the dropdown is closed, just set the flag to open is enough
-      setIsCollapsedNavItemOpen(true);
-    }
-  };
-  var handleCollapsedNavItemSelected = function handleCollapsedNavItemSelected() {
-    // Close collapsed dropdown on item select
-    if (isCollapsedNavItemOpen) {
-      setIsCollapsedNavItemOpen(false);
-    }
-  };
-  var renderCollapsedNavItem = function renderCollapsedNavItem(navItems) {
-    var collapsedDropdownClass = isCollapsedNavItemOpen ? 'open' : '';
-    if ((0, _isEmpty["default"])(navItems) && (0, _isEmpty["default"])(actionBarItems)) {
-      return null;
-    }
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      className: "CollapsedDropdown dropdown ".concat(collapsedDropdownClass),
-      key: "collapsed-dropdown",
-      ref: collapsedDropdownRef
-    }, /*#__PURE__*/_react["default"].createElement("a", {
-      id: "basic-nav-dropdown",
-      role: "button",
-      className: "dropdown-toggle text-color-gray",
-      "aria-haspopup": "true",
-      "aria-expanded": "true",
-      onClick: handleCollapsedDropdown
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "rioglyph rioglyph-option-horizontal",
-      "aria-hidden": "true"
-    })), /*#__PURE__*/_react["default"].createElement("ul", {
-      className: "dropdown-menu",
-      role: "menu",
-      "aria-labelledby": "basic-nav-dropdown"
-    }, navItems.map(function (navItem) {
-      return /*#__PURE__*/_react["default"].createElement("li", {
-        key: navItem.key,
-        className: "submodule",
-        onClick: handleCollapsedNavItemSelected,
-        "data-nav-item-key": navItem.key
-      }, navItem.route);
-    })));
-  };
-  var renderNavItem = function renderNavItem(navItem, isItemOffscreen) {
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      key: navItem.key,
-      className: "submodule ".concat(isItemOffscreen ? 'offscreen' : ''),
-      "data-nav-item-key": navItem.key
-    }, navItem.route);
-  };
-  var renderNavItems = function renderNavItems() {
-    if (!isOffscreen.current && !(0, _isEmpty["default"])(collapsedNavItems)) {
-      var visibleItems = visibleNavItems.map(function (navItem) {
-        return renderNavItem(navItem, isOffscreen.current);
-      });
-      return [].concat((0, _toConsumableArray2["default"])(visibleItems), [renderCollapsedNavItem(collapsedNavItems)]);
-    }
-    return externalNavItems.map(function (navItem) {
-      return renderNavItem(navItem, isOffscreen.current);
-    });
-  };
-
-  // As all navItems need to be added to the DOM first in order to get their real size
-  // the computation wheather a navItem need to be shown under the collapsed dropdown or not
-  // needs to be done after the component did mount to the DOM.
-
-  var classes = (0, _classnames["default"])('SubmoduleNavigation', 'nav');
-  return /*#__PURE__*/_react["default"].createElement("ul", {
-    className: classes,
-    ref: navigationRef
-  }, renderNavItems());
-};
-exports.NavItems = NavItems;
-var _default = NavItems;
-exports["default"] = _default;
-NavItems.defaultProps = {
-  navItems: [],
-  actionBarItems: []
-};
-NavItems.propTypes = {
-  navItems: _propTypes["default"].arrayOf(_modulePropTypes["default"]),
-  containerWidth: _propTypes["default"].number.isRequired,
-  actionBarItems: _propTypes["default"].arrayOf(_propTypes["default"].node)
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavItems = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const useClickOutside_1 = tslib_1.__importDefault(require("../../hooks/useClickOutside"));
+const CollapsedNavItem_1 = tslib_1.__importDefault(require("./CollapsedNavItem"));
+const collapsedDropdownWidth = 50;
+const paddingLeft = 15;
+const NavItems = (props) => {
+    const { navItems: externalNavItems = [], actionBarItems = [], containerWidth } = props;
+    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = (0, react_1.useState)(false);
+    const [collapsedNavItems, setCollapsedNavItems] = (0, react_1.useState)([]);
+    const [visibleNavItems, setVisibleNavItems] = (0, react_1.useState)([]);
+    const collapsedDropdownRef = (0, useClickOutside_1.default)(() => setIsCollapsedNavItemOpen(false));
+    const navigationRef = (0, react_1.useRef)(null);
+    const isOffscreen = (0, react_1.useRef)(true);
+    // console.log({ containerWidth });
+    // Before any new changes are applied
+    (0, react_1.useEffect)(() => {
+        // After the component received new props, every nav item has to be rendered offscreen
+        // again without collapsing them into the dropdown to measure its width
+        isOffscreen.current = true;
+    }, [externalNavItems, actionBarItems, containerWidth]);
+    // After the component has been rendered
+    (0, react_1.useLayoutEffect)(() => {
+        // After every nav item was rendered offscreen again we need to recalculate the width
+        // of the items again and render the result with possible collapsible dropdown.
+        if (isOffscreen.current) {
+            computeNavItems();
+        }
+    });
+    const getAvailableWidth = (element) => {
+        // Get relevant elements
+        // const parent = element.parentNode;
+        // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));
+        // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;
+        // Since the collapsed dropdown has not been rendered yet,
+        // use the fixed with for it to compute available width
+        const availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;
+        return availableWidth;
+    };
+    const computeNavItems = () => {
+        const element = navigationRef.current;
+        if (!element) {
+            return;
+        }
+        const navItems = [...(element.children || [])];
+        const availableWidth = getAvailableWidth(element);
+        if (availableWidth < 0) {
+            return;
+        }
+        // Iterate over all rendered navItems to figure out their widths in order to figure out
+        // which navItems need to be rendered in the collapsed dropdown
+        let requiredNavItemsSize = 0;
+        const updatedVisibleItems = [];
+        const updatedCollapsedItems = [];
+        navItems.forEach(item => {
+            if (!item.className) {
+                return;
+            }
+            // Calculate the remaining width
+            requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;
+            // console.log({ requiredNavItemsSize });
+            // Use the navItems.key to find corresponding navItems for each DOM node
+            const matchedNavItem = externalNavItems.find(navItem => {
+                const dataAttr = item.attributes.getNamedItem('data-nav-item-key');
+                return dataAttr && navItem.key === dataAttr.value;
+            });
+            if (!matchedNavItem) {
+                return;
+            }
+            // Add navItems to the visible group until the available with exceeds.
+            // All other navItems will be added to the collapsed group
+            if (availableWidth > requiredNavItemsSize) {
+                updatedVisibleItems.push(matchedNavItem);
+            }
+            else {
+                updatedCollapsedItems.push(matchedNavItem);
+            }
+        });
+        // Set the state to render the navItems again
+        isOffscreen.current = false;
+        setVisibleNavItems(updatedVisibleItems);
+        setCollapsedNavItems(updatedCollapsedItems);
+    };
+    const handleCollapsedDropdown = () => {
+        // When the dropdown is open, set showCollapsedNavItems to false so all submodule items
+        // are rendered and their size can be computed
+        if (isCollapsedNavItemOpen) {
+            setIsCollapsedNavItemOpen(false);
+        }
+        else {
+            // When the dropdown is closed, just set the flag to open is enough
+            setIsCollapsedNavItemOpen(true);
+        }
+    };
+    const handleCollapsedNavItemSelected = () => {
+        // Close collapsed dropdown on item select
+        if (isCollapsedNavItemOpen) {
+            setIsCollapsedNavItemOpen(false);
+        }
+    };
+    const renderNavItem = (navItem, isItemOffscreen) => {
+        return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `submodule ${isItemOffscreen ? 'offscreen' : ''}`, "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key));
+    };
+    const renderNavItems = () => {
+        if (!isOffscreen.current && !(0, isEmpty_1.default)(collapsedNavItems)) {
+            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));
+            return [
+                ...visibleItems,
+                (0, jsx_runtime_1.jsx)(CollapsedNavItem_1.default, { ref: collapsedDropdownRef, show: isCollapsedNavItemOpen, navItems: collapsedNavItems, actionBarItems: actionBarItems, onDropdownClick: handleCollapsedDropdown, onItemClick: handleCollapsedNavItemSelected }, 'CollapsedNavItem'),
+            ];
+        }
+        return externalNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));
+    };
+    // As all navItems need to be added to the DOM first in order to get their real size
+    // the computation whether a navItem need to be shown under the collapsed dropdown or not
+    // needs to be done after the component did mount to the DOM.
+    const classes = (0, classnames_1.default)('SubmoduleNavigation', 'nav');
+    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: classes, ref: navigationRef }, { children: renderNavItems() })));
+};
+exports.NavItems = NavItems;
+exports.default = exports.NavItems;

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

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