@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/components/actionBarItem/ActionBarItem.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, type MemoExoticComponent, type FC } from 'react';
 import ActionBarItemPopoverContent from './ActionBarItemPopoverContent';
 import ActionBarItemIcon from './ActionBarItemIcon';
 import ActionBarItemList from './ActionBarItemList';
@@ -49,9 +49,5 @@ export type ActionBarItemComponents = {
     ListSeparator: typeof ActionBarItemListSeparator;
 };
 type ActionBarItemPropsWithChildren = PropsWithChildren<ActionBarItemProps>;
-declare const ActionBarItem: ActionBarItemComponents & React.NamedExoticComponent<ActionBarItemProps & {
-    children?: React.ReactNode;
-}> & {
-    readonly type: React.FC<ActionBarItemPropsWithChildren>;
-};
+declare const ActionBarItem: ActionBarItemComponents & MemoExoticComponent<FC<ActionBarItemPropsWithChildren>>;
 export default ActionBarItem;

package/lib/es/components/actionBarItem/ActionBarItem.js

@@ -40,7 +40,7 @@ const checkIfSmallResolution = () => {
 const isActionBarItemPopover = (child) => child.type && child.type.displayName === ActionBarItemPopoverContent_1.default.displayName;
 const isActionBarItemIcon = (child) => child.type && child.type.displayName === ActionBarItemIcon_1.default.displayName;
 const ActionBarItemBase = (props) => {
-    const { id = getRandomString(), className, mobileDialogBodyClassName = '', children, popoverWidth = DEFAULT_POPOVER_WIDTH, hidePopoverOnClick = true } = props, remainingProps = tslib_1.__rest(props, ["id", "className", "mobileDialogBodyClassName", "children", "popoverWidth", "hidePopoverOnClick"]);
+    const { id = getRandomString(), className, mobileDialogBodyClassName = '', children, popoverWidth = DEFAULT_POPOVER_WIDTH, hidePopoverOnClick = true, ...remainingProps } = props;
     const [isShown, setIsShown] = (0, react_1.useState)(false);
     const clickOutsideRef = (0, react_1.useRef)(null);
     (0, react_1.useLayoutEffect)(() => {
@@ -89,17 +89,17 @@ const ActionBarItemBase = (props) => {
     const itemPopover = childrenAsList.find(isActionBarItemPopover);
     const itemIcon = childrenAsList.find(isActionBarItemIcon);
     if (!itemPopover) {
-        return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, { children: children }));
+        return (0, jsx_runtime_1.jsx)("div", { className: classes, children: children });
     }
     const { useOffscreen = false, title } = itemPopover.props;
     // Filter out the popover and icon component from the list of children as they are handled separately
     const childrenWithoutPopover = childrenAsList.filter(child => !isActionBarItemPopover(child));
     const childrenWithoutPopoverAndIcon = childrenWithoutPopover.filter(child => !isActionBarItemIcon(child));
     if (isSmallScreen) {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [react_1.default.cloneElement(itemIcon, { onClick: onToggle }), (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => setIsShown(false) }, { children: (0, jsx_runtime_1.jsx)(Dialog_1.default, { show: isShown, onClose: () => setIsShown(false), body: itemPopover, bodyClassName: mobileDialogBodyClassName, title: title }) })), childrenWithoutPopoverAndIcon] })));
+        return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: classes, ref: clickOutsideRef, children: [react_1.default.cloneElement(itemIcon, { onClick: onToggle }), (0, jsx_runtime_1.jsx)("div", { onClick: () => setIsShown(false), children: (0, jsx_runtime_1.jsx)(Dialog_1.default, { show: isShown, onClose: () => setIsShown(false), body: itemPopover, bodyClassName: mobileDialogBodyClassName, title: title }) }), childrenWithoutPopoverAndIcon] }));
     }
-    const overlay = ((0, jsx_runtime_1.jsx)(ActionBarOverlay_1.default, Object.assign({ id: id, title: title, width: popoverWidth, preRender: useOffscreen, show: isShown }, { children: itemPopover }), 'child'));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [(0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger_1.default.BOTTOM_END, overlay: overlay, rootClose: false, trigger: 'click', popperConfig: {
+    const overlay = ((0, jsx_runtime_1.jsx)(ActionBarOverlay_1.default, { id: id, title: title, width: popoverWidth, preRender: useOffscreen, show: isShown, children: itemPopover }, 'child'));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: classes, ref: clickOutsideRef, children: [(0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger_1.default.BOTTOM_END, overlay: overlay, rootClose: false, trigger: 'click', popperConfig: {
                     modifiers: [
                         {
                             name: 'offset',
@@ -112,7 +112,7 @@ const ActionBarItemBase = (props) => {
                             options: {},
                         },
                     ],
-                } }, { children: itemIcon })), childrenWithoutPopoverAndIcon] })));
+                }, children: itemIcon }), childrenWithoutPopoverAndIcon] }));
 };
 const ActionBarItem = (0, react_1.memo)(ActionBarItemBase);
 // Define static variables on the component type

package/lib/es/components/actionBarItem/ActionBarItemIcon.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const ActionBarItemIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    className?: string | undefined;
+    className?: string;
 } & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ActionBarItemIcon;

package/lib/es/components/actionBarItem/ActionBarItemIcon.js

@@ -6,9 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ActionBarItemIcon = (0, react_1.forwardRef)((props, ref) => {
-    const { className, children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
+    const { className, children, ...remainingProps } = props;
     const classes = (0, classnames_1.default)('ActionBarItemIcon', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes, ref: ref }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, ref: ref, children: children }));
 });
 // The displayName is used in ActionBarItem for checking the component "isActionBarItemIcon"
 ActionBarItemIcon.displayName = 'ActionBarItemIcon';

package/lib/es/components/actionBarItem/ActionBarItemList.js

@@ -2,12 +2,9 @@
 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ActionBarItemList = (_a) => {
-    var { className, children } = _a, remainingProps = tslib_1.__rest(_a, ["className", "children"]);
+const ActionBarItemList = ({ className, children, ...remainingProps }) => {
     const classes = (0, classnames_1.default)('ActionBarItemList', className);
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({}, remainingProps, { className: classes }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("ul", { ...remainingProps, className: classes, children: children }));
 };
 exports.default = ActionBarItemList;

package/lib/es/components/actionBarItem/ActionBarItemListItem.js

@@ -2,14 +2,12 @@
 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ActionBarItemListItem = (props) => {
-    const { hasLink, icon, onClick, className, children } = props, remainingProps = tslib_1.__rest(props, ["hasLink", "icon", "onClick", "className", "children"]);
+    const { hasLink, icon, onClick, className, children, ...remainingProps } = props;
     const classes = (0, classnames_1.default)('ActionBarItemListItem', hasLink && 'has-link', className);
     const iconClasses = (0, classnames_1.default)('ActionBarItemListItemIcon', 'rioglyph', icon);
     const btnClasses = (0, classnames_1.default)('ActionBarItemListItemButton');
-    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, remainingProps, { className: classes, onClick: onClick }, { children: [icon && (0, jsx_runtime_1.jsx)("span", { className: iconClasses }), hasLink && !onClick && (0, jsx_runtime_1.jsx)("span", { children: children }), onClick && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: btnClasses }, { children: children })), !hasLink && !onClick && children] })));
+    return ((0, jsx_runtime_1.jsxs)("li", { ...remainingProps, className: classes, onClick: onClick, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: iconClasses }), hasLink && !onClick && (0, jsx_runtime_1.jsx)("span", { children: children }), onClick && (0, jsx_runtime_1.jsx)("div", { className: btnClasses, children: children }), !hasLink && !onClick && children] }));
 };
 exports.default = ActionBarItemListItem;

package/lib/es/components/actionBarItem/ActionBarItemListSeparator.js

@@ -2,12 +2,9 @@
 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ActionBarItemListSeparator = (_a) => {
-    var { className } = _a, remainingProps = tslib_1.__rest(_a, ["className"]);
+const ActionBarItemListSeparator = ({ className, ...remainingProps }) => {
     const classes = (0, classnames_1.default)('ActionBarItemListSeparator', className);
-    return (0, jsx_runtime_1.jsx)("hr", Object.assign({}, remainingProps, { className: classes }));
+    return (0, jsx_runtime_1.jsx)("hr", { ...remainingProps, className: classes });
 };
 exports.default = ActionBarItemListSeparator;

package/lib/es/components/actionBarItem/ActionBarItemPopoverContent.js

@@ -2,15 +2,12 @@
 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
 const omit_1 = tslib_1.__importDefault(require("lodash/fp/omit"));
-const ActionBarItemPopoverContent = (_a) => {
-    var { className, children } = _a, remainingProps = tslib_1.__rest(_a, ["className", "children"]);
+const ActionBarItemPopoverContent = ({ className, children, ...remainingProps }) => {
     const classes = (0, classnames_1.default)('ActionBarItemPopoverContent', className);
     const filterProps = (0, omit_1.default)(['title', 'useOffscreen'])(remainingProps);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, filterProps, { className: classes }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...filterProps, className: classes, children: children }));
 };
 // The displayName is used in ActionBarItem for checking the component "isActionBarItemPopover"
 ActionBarItemPopoverContent.displayName = 'ActionBarItemPopoverContent';

package/lib/es/components/actionBarItem/ActionBarOverlay.d.ts

@@ -14,6 +14,6 @@ export type ActionBarOverlayProps = {
     className?: string;
 };
 declare const ActionBarOverlay: React.ForwardRefExoticComponent<ActionBarOverlayProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ActionBarOverlay;

package/lib/es/components/actionBarItem/ActionBarOverlay.js

@@ -10,11 +10,11 @@ const Popover_1 = tslib_1.__importStar(require("../popover/Popover"));
 const DEFAULT_PLACEMENT = Popover_1.PLACEMENT_MAP.BOTTOM;
 const DEFAULT_WIDTH = 250;
 const ActionBarOverlay = (0, react_1.forwardRef)((props, ref) => {
-    const { children, show, preRender, id, title, onClick = noop_1.default, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT } = props, remainingProps = tslib_1.__rest(props, ["children", "show", "preRender", "id", "title", "onClick", "width", "style", "className", "placement"]);
-    const adjustedStyles = Object.assign(Object.assign({}, style), { width });
+    const { children, show, preRender, id, title, onClick = noop_1.default, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT, ...remainingProps } = props;
+    const adjustedStyles = { ...style, width };
     const adjustedClassName = preRender && !show ? (0, classnames_1.default)(className, 'position-offscreen') : className;
     const popoverTitleClasses = (0, classnames_1.default)('ActionBarItemPopover text-color-dark', className);
     const popoverContentClasses = (0, classnames_1.default)('ActionBarItemPopover', className);
-    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref, id: id, onClick: onClick, placement: placement }, remainingProps, { style: adjustedStyles, className: adjustedClassName }, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: popoverTitleClasses }, { children: title })), (0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: popoverContentClasses }, { children: children }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, { ref: ref, id: id, onClick: onClick, placement: placement, ...remainingProps, style: adjustedStyles, className: adjustedClassName, children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, { className: popoverTitleClasses, children: title }), (0, jsx_runtime_1.jsx)(Popover_1.default.Content, { className: popoverContentClasses, children: children })] }));
 });
 exports.default = ActionBarOverlay;

package/lib/es/components/activity/Activity.js

@@ -18,12 +18,12 @@ const icons = {
 };
 const SIZE_MAP = { SIZE_SM: 'sm', SIZE_LG: 'lg', SIZE_XL: 'xl' };
 const Activity = (0, react_1.forwardRef)((props, ref) => {
-    const { activity, duration, isOutdated = false, bsSize, onClick = () => { }, className = '' } = props, remainingProps = tslib_1.__rest(props, ["activity", "duration", "isOutdated", "bsSize", "onClick", "className"]);
+    const { activity, duration, isOutdated = false, bsSize, onClick = () => { }, className = '', ...remainingProps } = props;
     if (!activity) {
         return null;
     }
     const wrapperClassNames = (0, classnames_1.default)('activity', `activity-${activity}`, isOutdated && 'opacity-50', bsSize && `activity-${bsSize}`, className && className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref }, remainingProps, { className: wrapperClassNames, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'activity-icon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icons[activity]}` }) })), duration && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'activity-text' }, { children: duration }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, ...remainingProps, className: wrapperClassNames, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("span", { className: 'activity-icon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icons[activity]}` }) }), duration && (0, jsx_runtime_1.jsx)("span", { className: 'activity-text', children: duration })] }));
 });
 // statics
 Object.assign(Activity, STATUS_MAP);

package/lib/es/components/animatedNumber/AnimatedNumber.d.ts

@@ -49,30 +49,30 @@ export declare const AnimatedNumber: React.ForwardRefExoticComponent<React.HTMLA
     /**
      * A prefix to be added to the final string.
      */
-    prefix?: string | undefined;
+    prefix?: string;
     /**
      * A unit suffix to be added to the final string.
      */
-    unit?: string | undefined;
+    unit?: string;
     /**
      * The speed in milliseconds to count up or down.
      *
      * @default 10
      */
-    speed?: number | undefined;
+    speed?: number;
     /**
      * Enables to count backwards.
      *
      * @default false
      */
-    decreasing?: boolean | undefined;
+    decreasing?: boolean;
     /**
      * Callback function to be invoked when the end value is reached.
      */
-    onEnd?: VoidFunction | undefined;
+    onEnd?: VoidFunction;
     /**
      * Additional classes to be set on the wrapping element.
      */
-    className?: string | undefined;
+    className?: string;
 } & React.RefAttributes<HTMLSpanElement>>;
 export default AnimatedNumber;

package/lib/es/components/animatedNumber/AnimatedNumber.js

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const useInterval_1 = tslib_1.__importDefault(require("../../hooks/useInterval"));
 const TIMER = 10;
 exports.AnimatedNumber = (0, react_1.forwardRef)((props, ref) => {
-    const { start, end, prefix = '', unit = '', speed = TIMER, decreasing = false, onEnd = () => { }, className = '' } = props, remainingProps = tslib_1.__rest(props, ["start", "end", "prefix", "unit", "speed", "decreasing", "onEnd", "className"]);
+    const { start, end, prefix = '', unit = '', speed = TIMER, decreasing = false, onEnd = () => { }, className = '', ...remainingProps } = props;
     const [value, setValue] = (0, react_1.useState)(start);
     const shallContinueRunning = decreasing ? value > end : value < end;
     (0, useInterval_1.default)(() => {
@@ -18,6 +18,6 @@ exports.AnimatedNumber = (0, react_1.forwardRef)((props, ref) => {
             onEnd();
         }
     });
-    return (0, jsx_runtime_1.jsx)("span", Object.assign({ ref: ref }, remainingProps, { className: className }, { children: `${prefix}${value}${unit}` }));
+    return (0, jsx_runtime_1.jsx)("span", { ref: ref, ...remainingProps, className: className, children: `${prefix}${value}${unit}` });
 });
 exports.default = exports.AnimatedNumber;

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

@@ -2,15 +2,13 @@
 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
 const AppMenuDropdown_1 = tslib_1.__importDefault(require("./AppMenuDropdown"));
 const AppMenuContent_1 = tslib_1.__importDefault(require("./AppMenuContent"));
 const AppMenu = (props) => {
-    const { label = 'Unknown', appMenuItems = [], appNavigatorClassName, appNavigator, onToggleAppMenu } = props, remainingProps = tslib_1.__rest(props, ["label", "appMenuItems", "appNavigatorClassName", "appNavigator", "onToggleAppMenu"]);
-    const hasItems = !!((appMenuItems === null || appMenuItems === void 0 ? void 0 : appMenuItems.length) || appNavigator);
+    const { label = 'Unknown', appMenuItems = [], appNavigatorClassName, appNavigator, onToggleAppMenu, ...remainingProps } = props;
+    const hasItems = !!(appMenuItems?.length || appNavigator);
     const wrapperClassNames = (0, classnames_1.default)('ModuleNavigation AppMenu', 'user-select-none', { hasModules: hasItems }, !appNavigator && 'pointer-events-none', appNavigatorClassName && appNavigatorClassName);
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: (0, jsx_runtime_1.jsx)(AppMenuDropdown_1.default, Object.assign({ title: label, caret: hasItems, onToggleAppMenu: onToggleAppMenu }, { children: appNavigator && (0, jsx_runtime_1.jsx)(AppMenuContent_1.default, { appMenuItems: appMenuItems, appNavigator: appNavigator }) })) })));
+    return ((0, jsx_runtime_1.jsx)("ul", { ...remainingProps, className: wrapperClassNames, children: (0, jsx_runtime_1.jsx)(AppMenuDropdown_1.default, { title: label, caret: hasItems, onToggleAppMenu: onToggleAppMenu, children: appNavigator && (0, jsx_runtime_1.jsx)(AppMenuContent_1.default, { appMenuItems: appMenuItems, appNavigator: appNavigator }) }) }));
 };
 exports.default = AppMenu;

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

@@ -1,18 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const AppMenuContent = (props) => {
     const { appMenuItems, appNavigator } = props;
     // In case there is a navigation component injected into the header,
     // render this component
     if (appNavigator) {
-        return ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: 'presentation' }, { children: appNavigator }), 'app-navigator'));
+        return ((0, jsx_runtime_1.jsx)("li", { role: 'presentation', children: appNavigator }, 'app-navigator'));
     }
     // If there is a list of appMenuItems given, render them as a list
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: appMenuItems.map(module => {
-            return ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: 'presentation' }, { children: module.route }), `link-icon-${module.key}`));
+            return ((0, jsx_runtime_1.jsx)("li", { role: 'presentation', children: module.route }, `link-icon-${module.key}`));
         }) }));
 };
 exports.default = AppMenuContent;

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

@@ -13,18 +13,18 @@ const ToggleButton = (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' })] })));
+    return ((0, jsx_runtime_1.jsxs)("a", { 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 ModuleNavigation-dropdown-menu' }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("ul", { role: 'menu', className: 'dropdown-menu ModuleNavigation-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 })));
+    return ((0, jsx_runtime_1.jsx)("li", { 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;
@@ -36,7 +36,7 @@ const AppMenuDropdown = (props) => {
         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 })] })));
+    return ((0, jsx_runtime_1.jsxs)(AppMenuDropdownOpener, { 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.js

@@ -1,13 +1,10 @@
 "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));
-        }) })));
+    const { items, nodeRef, className = '', ...remainingProps } = props;
+    return ((0, jsx_runtime_1.jsx)("ul", { ...remainingProps, className: `ApplicationActionBar nav navbar-nav navbar-right ${className}`, ref: nodeRef, children: items?.map((item, index) => {
+            return ((0, jsx_runtime_1.jsx)("li", { role: 'presentation', className: 'navigationItem', children: item }, index));
+        }) }));
 };
 exports.default = ApplicationActionBar;

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

@@ -14,10 +14,10 @@ const useResizeObserver_1 = tslib_1.__importDefault(require("../../hooks/useResi
 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 { homeRoute = '', showHomeIcon = true, label, className, appNavigator, appNavigatorClassName, appMenuItems, navItems, actionBarItems = [], onToggleAppMenu = () => { }, ...remainingProps } = props;
     const actionBarRef = (0, react_1.useRef)(null);
     const [navRef, entry] = (0, useResizeObserver_1.default)();
-    const contentRect = entry === null || entry === void 0 ? void 0 : entry.contentRect;
+    const contentRect = entry?.contentRect;
     (0, react_1.useImperativeHandle)(ref, () => navRef, [navRef]);
     const getContentRect = (0, react_1.useCallback)((key) => {
         if (contentRect) {
@@ -29,7 +29,7 @@ exports.ApplicationHeader = (0, react_1.forwardRef)((props, ref) => {
     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 })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("nav", { ...remainingProps, className: wrapperClassNames, ref: navRef, children: [isMobileWidth && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MobileAppMenu_1.default, { showHomeIcon: showHomeIcon, homeRoute: homeRoute, appMenuItems: appMenuItems, appNavigator: appNavigator, onToggleAppMenu: onToggleAppMenu }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1-0 display-flex gap-10', children: [(0, jsx_runtime_1.jsx)(MobileSubmoduleNavigation_1.default, { className: 'flex-1-1', label: label, navItems: navItems }), hasActionBarItems && (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)(ApplicationActionBar_1.default, { className: 'mobile', nodeRef: actionBarRef, items: actionBarItems })] })] })), !isMobileWidth && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'navbar-header', children: (0, jsx_runtime_1.jsx)("span", { className: `navbar-brand ${showHomeIcon ? 'home-icon' : ''}`, children: homeRoute }) }), label && ((0, jsx_runtime_1.jsx)(AppMenu_1.default, { label: label, appMenuItems: appMenuItems, appNavigator: appNavigator, appNavigatorClassName: appNavigatorClassName, onToggleAppMenu: onToggleAppMenu }, 'AppMenu')), (0, isEmpty_1.default)(navItems) && (0, jsx_runtime_1.jsx)("ul", { className: 'SubmoduleNavigation nav' }), !(0, isEmpty_1.default)(navItems) && ((0, jsx_runtime_1.jsx)(NavItems_1.default, { navItems: navItems, containerWidth: containerWidth, actionBarItems: actionBarItems }, 'NavItems')), (0, jsx_runtime_1.jsx)(ApplicationActionBar_1.default, { nodeRef: actionBarRef, items: actionBarItems })] }))] }));
 });
-const Divider = () => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'divider display-flex align-items-center' }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'width-3 height-20 bg-lighter' }) })));
+const Divider = () => ((0, jsx_runtime_1.jsx)("div", { className: 'divider display-flex align-items-center', children: (0, jsx_runtime_1.jsx)("div", { className: 'width-3 height-20 bg-lighter' }) }));
 exports.default = exports.ApplicationHeader;

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

@@ -10,8 +10,8 @@ const CollapsedNavItem = (0, react_1.forwardRef)((props, ref) => {
         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'));
+    return ((0, jsx_runtime_1.jsxs)("li", { className: `CollapsedDropdown dropdown ${collapsedDropdownClass}`, ref: ref, children: [(0, jsx_runtime_1.jsx)("a", { id: 'basic-nav-dropdown', role: 'button', className: 'dropdown-toggle text-color-gray', "aria-haspopup": 'true', "aria-expanded": 'true', onClick: onDropdownClick, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-horizontal', "aria-hidden": 'true' }) }), (0, jsx_runtime_1.jsx)("ul", { className: 'dropdown-menu', role: 'menu', "aria-labelledby": 'basic-nav-dropdown', children: navItems.map(navItem => {
+                    return ((0, jsx_runtime_1.jsx)("li", { className: 'submodule', onClick: onItemClick, "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key));
+                }) })] }, 'collapsed-dropdown'));
 });
 exports.default = CollapsedNavItem;

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

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

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

@@ -15,7 +15,7 @@ const MobileHeaderModal = (props) => {
     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) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { className: wrapperClasses, initial: { opacity: 0, top: offset }, animate: { opacity: 1, y: 0, top: 0 }, exit: { opacity: 0, transition: { duration: 0.3 }, top: offset }, children: [(0, jsx_runtime_1.jsx)("div", { className: modalClasses, style: { height: `${pageHeight}px` }, children: children }), showClose && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' +
+                                    'text-size-20 text-color-dark', onClick: onClose, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }))] })) }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: 'bottom-sheet-backdrop', initial: { opacity: 0 }, animate: { opacity: 0.5 }, exit: { opacity: 0 } })) })] }), modalRoot) }));
 };
 exports.default = MobileHeaderModal;

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

@@ -15,11 +15,11 @@ const MobileSubmoduleNavigation = (props) => {
     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, {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, onClick: handleToggleNavigation, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 display-flex flex-column align-items-center width-0', children: [(0, jsx_runtime_1.jsx)("div", { className: labelClasses, children: label }), (0, jsx_runtime_1.jsx)("div", { className: 'text-medium width-100pct', children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("div", { className: 'ellipsis-1', children: react_1.default.cloneElement(navItem.route, {
                                 className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
                                 onClick: (event) => event.preventDefault(),
-                            }) }), navItem.key))) }))] })), hasNavItems && ((0, jsx_runtime_1.jsx)("div", 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, {
+                            }) }, navItem.key))) })] }), hasNavItems && ((0, jsx_runtime_1.jsx)("div", { className: 'text-size-16 text-color-dark', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-down' }) })), hasNavItems && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, { show: isShown, children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("div", { className: 'margin-y-15 font-size-20', children: react_1.default.cloneElement(navItem.route, {
                         className: 'text-size-20 text-color-darker',
-                    }) }), navItem.key))) })))] })));
+                    }) }, navItem.key))) }))] }));
 };
 exports.default = MobileSubmoduleNavigation;

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

@@ -105,7 +105,7 @@ const NavItems = (props) => {
         }
     };
     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));
+        return ((0, jsx_runtime_1.jsx)("li", { className: `submodule ${isItemOffscreen ? 'offscreen' : ''}`, "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key));
     };
     const renderNavItems = () => {
         if (!isOffscreen.current && !(0, isEmpty_1.default)(collapsedNavItems)) {
@@ -121,7 +121,7 @@ const NavItems = (props) => {
     // 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() })));
+    return ((0, jsx_runtime_1.jsx)("ul", { className: classes, ref: navigationRef, children: renderNavItems() }));
 };
 exports.NavItems = NavItems;
 exports.default = exports.NavItems;

package/lib/es/components/applicationLayout/ApplicationLayout.js

@@ -9,14 +9,13 @@ const ApplicationLayoutHeader_1 = tslib_1.__importDefault(require("./Application
 const ApplicationLayoutSidebar_1 = tslib_1.__importDefault(require("./ApplicationLayoutSidebar"));
 const ApplicationLayoutBody_1 = tslib_1.__importDefault(require("./ApplicationLayoutBody"));
 const initDocumentBootstrapping_1 = require("../../utils/init/initDocumentBootstrapping");
-require("../../utils/init/initConfig");
 // initializes document bootstrapping - keep the import to avoid being tree-shaken
 // noinspection JSIgnoredPromiseFromCall
 (0, initDocumentBootstrapping_1.initDocumentBootstrapping)();
 const ApplicationLayout = (0, react_1.forwardRef)((props, ref) => {
-    const { className, layoutRef, children } = props, remainingProps = tslib_1.__rest(props, ["className", "layoutRef", "children"]);
+    const { className, layoutRef, children, ...remainingProps } = props;
     const classes = (0, classnames_1.default)('ApplicationLayout', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { ref: ref || layoutRef, className: classes }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, ref: ref || layoutRef, className: classes, children: children }));
 });
 ApplicationLayout.Header = ApplicationLayoutHeader_1.default;
 ApplicationLayout.Sidebar = ApplicationLayoutSidebar_1.default;

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

@@ -45,6 +45,6 @@ export type ApplicationLayoutBodyProps = {
     className?: string;
 };
 declare const ApplicationLayoutBody: React.ForwardRefExoticComponent<ApplicationLayoutBodyProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutBody;

package/lib/es/components/applicationLayout/ApplicationLayoutBody.js

@@ -9,11 +9,14 @@ const SmoothScrollbars_1 = tslib_1.__importDefault(require("../smoothScrollbars/
 const RESIZE_THROTTLING = 200;
 const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
 const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
-    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, scrollResetTrigger, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "scrollResetTrigger", "children"]);
+    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, scrollResetTrigger, children, ...remainingProps } = props;
     const [offset, setOffset] = (0, react_1.useState)(0);
     const moduleContentRef = (0, react_1.useRef)(null);
     const layoutBodyRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => layoutBodyRef, []);
+    // Use imperative handle to expose the internal layout ref. Usually this is used to
+    // expose internal function without exposing the underlying DOM element.
+    // In this case however, we want access to the element to trigger functions like scrollIntoView()
+    (0, react_1.useImperativeHandle)(ref, () => layoutBodyRef?.current, []);
     // Reset scroll position when children are different. This fixes the issue of
     // changing body content (like in another route) and still having the same scroll position
     // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
@@ -24,8 +27,7 @@ const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
         }
     }, [scrollResetTrigger]);
     (0, react_1.useEffect)(() => {
-        var _a;
-        if (((_a = layoutBodyRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) instanceof HTMLElement) {
+        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {
             layoutBodyRef.current.parentNode.style.setProperty('--ApplicationLayoutBodyBottomBarHeight', `${bottomBarHeight}px`);
         }
     }, [bottomBarHeight]);
@@ -35,16 +37,15 @@ const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
         }
     });
     const handleToTop = () => {
-        var _a;
         if (!moduleContentRef.current) {
             return;
         }
         const scrollWrapper = moduleContentRef.current.container;
         const scrollingElement = scrollWrapper.firstElementChild;
-        const currentScroll = (_a = scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.scrollTop) !== null && _a !== void 0 ? _a : 0;
+        const currentScroll = scrollingElement?.scrollTop ?? 0;
         if (currentScroll > 0) {
             window.requestAnimationFrame(handleToTop);
-            scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.scrollTo(0, currentScroll - currentScroll / 5);
+            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);
             scrollWrapper.classList.add('is-scrolling-to-top');
             setOffset(currentScroll);
         }
@@ -56,6 +57,6 @@ const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
     const innerClasses = (0, classnames_1.default)('module-content', innerClassName && innerClassName);
     const offsetThreshold = window.innerHeight * 0.1;
     const scrollToTopClasses = (0, classnames_1.default)('scroll-to-top', offset > offsetThreshold && 'in');
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { ref: layoutBodyRef, className: classes }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'module-content-wrapper' }, { children: [navigation && navigation, banner && banner, (0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, Object.assign({ ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll }, { children: children }))] })), enableScrollToTop && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: scrollToTopClasses }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-up' }) })) })))] })), bottomBar && bottomBar] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...remainingProps, ref: layoutBodyRef, className: classes, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'module-content-wrapper', children: [navigation && navigation, banner && banner, (0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, { ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll, children: (0, jsx_runtime_1.jsx)("div", { className: 'scrollbar-content', children: children }) })] }), enableScrollToTop && ((0, jsx_runtime_1.jsx)("span", { className: scrollToTopClasses, children: (0, jsx_runtime_1.jsx)("button", { type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-up' }) }) }))] }), bottomBar && bottomBar] }));
 });
 exports.default = ApplicationLayoutBody;

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

@@ -21,6 +21,6 @@ export type ApplicationLayoutBodyBannerProps = {
     className?: string;
 };
 declare const ApplicationLayoutBodyBanner: React.ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutBodyBanner;

package/lib/es/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -7,8 +7,8 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const DEFAULT_TEXT_COLOR = 'text-color-white';
 const DEFAULT_BACKGROUND_COLOR = 'bg-primary';
 const ApplicationLayoutBodyBanner = (0, react_1.forwardRef)((props, ref) => {
-    const { textColor = DEFAULT_TEXT_COLOR, backgroundColor = DEFAULT_BACKGROUND_COLOR, isSticky = true, className, children } = props, remainingProps = tslib_1.__rest(props, ["textColor", "backgroundColor", "isSticky", "className", "children"]);
+    const { textColor = DEFAULT_TEXT_COLOR, backgroundColor = DEFAULT_BACKGROUND_COLOR, isSticky = true, className, children, ...remainingProps } = props;
     const bannerClasses = (0, classnames_1.default)('ApplicationLayoutBodyBanner', textColor, backgroundColor, isSticky && 'position-sticky top-0 z-index-3', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { ref: ref, className: bannerClasses }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, ref: ref, className: bannerClasses, children: children }));
 });
 exports.default = ApplicationLayoutBodyBanner;