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

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

@@ -1,25 +1,25 @@
-"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;
+"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

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

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

@@ -1,127 +1,127 @@
-"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;
+"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

@@ -1,16 +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 = {
-    className?: string;
-    layoutRef?: MutableRefObject<HTMLDivElement>;
-};
-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;
+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;

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

@@ -1,22 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable import/order */
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ApplicationLayoutHeader_1 = tslib_1.__importDefault(require("./ApplicationLayoutHeader"));
-const ApplicationLayoutSidebar_1 = tslib_1.__importDefault(require("./ApplicationLayoutSidebar"));
-const ApplicationLayoutBody_1 = tslib_1.__importDefault(require("./ApplicationLayoutBody"));
-// initializes document bootstrapping - keep the import to avoid being tree-shaken
-const init_1 = require("../../utils/init");
-init_1.initDocumentBootstrapping;
-const ApplicationLayout = (0, react_1.forwardRef)((props, ref) => {
-    const { className, layoutRef, children } = props, remainingProps = tslib_1.__rest(props, ["className", "layoutRef", "children"]);
-    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 })));
-});
-ApplicationLayout.Header = ApplicationLayoutHeader_1.default;
-ApplicationLayout.Sidebar = ApplicationLayoutSidebar_1.default;
-ApplicationLayout.Body = ApplicationLayoutBody_1.default;
-exports.default = ApplicationLayout;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable import/order */
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ApplicationLayoutHeader_1 = tslib_1.__importDefault(require("./ApplicationLayoutHeader"));
+const ApplicationLayoutSidebar_1 = tslib_1.__importDefault(require("./ApplicationLayoutSidebar"));
+const ApplicationLayoutBody_1 = tslib_1.__importDefault(require("./ApplicationLayoutBody"));
+// initializes document bootstrapping - keep the import to avoid being tree-shaken
+const init_1 = require("../../utils/init");
+init_1.initDocumentBootstrapping;
+const ApplicationLayout = (0, react_1.forwardRef)((props, ref) => {
+    const { className, layoutRef, children } = props, remainingProps = tslib_1.__rest(props, ["className", "layoutRef", "children"]);
+    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 })));
+});
+ApplicationLayout.Header = ApplicationLayoutHeader_1.default;
+ApplicationLayout.Sidebar = ApplicationLayoutSidebar_1.default;
+ApplicationLayout.Body = ApplicationLayoutBody_1.default;
+exports.default = ApplicationLayout;

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

@@ -1,15 +1,42 @@
-import React from 'react';
-export type ApplicationLayoutBodyProps = {
-    className?: string;
-    innerClassName?: string;
-    enableScrollToTop?: boolean;
-    forceScrollbar?: boolean;
-    banner?: React.ReactNode;
-    navigation?: React.ReactNode;
-    bottomBar?: React.ReactNode;
-    bottomBarHeight?: number;
-};
-declare const ApplicationLayoutBody: React.ForwardRefExoticComponent<ApplicationLayoutBodyProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-export default ApplicationLayoutBody;
+import React from 'react';
+export type ApplicationLayoutBodyProps = {
+    /**
+     * Show scroll to top button after scrolling the content.
+     * @default true
+     */
+    enableScrollToTop?: boolean;
+    /**
+     * Always show vertical scrollbar to prevent the content from jumping.
+     * @default false
+     */
+    forceScrollbar?: boolean;
+    /**
+     * The ApplicationLayoutBodyBanner component.
+     */
+    banner?: React.ReactNode;
+    /**
+     * The `ApplicationLayoutBodyNavigation` component.
+     */
+    navigation?: React.ReactNode;
+    /**
+     * Optional bottom bar component or a simple string.
+     */
+    bottomBar?: React.ReactNode;
+    /**
+     * Height of the bottomBar in pixel.
+     * @default 54
+     */
+    bottomBarHeight?: number;
+    /**
+     * Additional class names that are added to the inner module-content component.
+     */
+    innerClassName?: string;
+    /**
+     * Additional class names that are added to the respective component.
+     */
+    className?: string;
+};
+declare const ApplicationLayoutBody: React.ForwardRefExoticComponent<ApplicationLayoutBodyProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutBody;

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

@@ -1,44 +1,44 @@
-"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 debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const RESIZE_THROTTLING = 200;
-const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
-const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
-    const { className, innerClassName, forceScrollbar = false, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
-    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, []);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (((_a = layoutBodyRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) instanceof HTMLElement) {
-            layoutBodyRef.current.parentNode.style.setProperty('--ApplicationLayoutBodyBottomBarHeight', `${bottomBarHeight}px`);
-        }
-    }, [bottomBarHeight]);
-    const handleScroll = (0, debounce_1.default)(RESIZE_THROTTLING)(() => {
-        if (moduleContentRef.current) {
-            setOffset(moduleContentRef.current.scrollTop);
-        }
-    });
-    const handleToTop = () => {
-        if (!moduleContentRef.current) {
-            return;
-        }
-        const currentScroll = moduleContentRef.current.scrollTop;
-        if (currentScroll > 0) {
-            window.requestAnimationFrame(handleToTop);
-            moduleContentRef.current.scrollTo(0, currentScroll - currentScroll / 5);
-            setOffset(currentScroll);
-        }
-    };
-    const classes = (0, classnames_1.default)('ApplicationLayoutBody', bottomBar && 'has-footer', className);
-    const innerClasses = (0, classnames_1.default)('module-content', forceScrollbar && 'overflow-y-scroll', 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)("div", Object.assign({ className: innerClasses, onScroll: handleScroll, ref: moduleContentRef }, { 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] }));
-});
-exports.default = ApplicationLayoutBody;
+"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 debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const RESIZE_THROTTLING = 200;
+const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
+const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
+    const { className, innerClassName, forceScrollbar = false, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
+    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, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (((_a = layoutBodyRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) instanceof HTMLElement) {
+            layoutBodyRef.current.parentNode.style.setProperty('--ApplicationLayoutBodyBottomBarHeight', `${bottomBarHeight}px`);
+        }
+    }, [bottomBarHeight]);
+    const handleScroll = (0, debounce_1.default)(RESIZE_THROTTLING)(() => {
+        if (moduleContentRef.current) {
+            setOffset(moduleContentRef.current.scrollTop);
+        }
+    });
+    const handleToTop = () => {
+        if (!moduleContentRef.current) {
+            return;
+        }
+        const currentScroll = moduleContentRef.current.scrollTop;
+        if (currentScroll > 0) {
+            window.requestAnimationFrame(handleToTop);
+            moduleContentRef.current.scrollTo(0, currentScroll - currentScroll / 5);
+            setOffset(currentScroll);
+        }
+    };
+    const classes = (0, classnames_1.default)('ApplicationLayoutBody', bottomBar && 'has-footer', className);
+    const innerClasses = (0, classnames_1.default)('module-content', forceScrollbar && 'overflow-y-scroll', 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)("div", Object.assign({ className: innerClasses, onScroll: handleScroll, ref: moduleContentRef }, { 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] }));
+});
+exports.default = ApplicationLayoutBody;

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

@@ -1,11 +1,26 @@
-import React from 'react';
-export type ApplicationLayoutBodyBannerProps = {
-    textColor?: string;
-    backgroundColor?: string;
-    isSticky?: boolean;
-    className?: string;
-};
-declare const ApplicationLayoutBodyBanner: React.ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-export default ApplicationLayoutBodyBanner;
+import React from 'react';
+export type ApplicationLayoutBodyBannerProps = {
+    /**
+     * One of the `text-color` utility classes.
+     * @default `text-color-white`
+     */
+    textColor?: string;
+    /**
+     * One of the `bg-color` utility classes.
+     * @default `bg-primary`
+     */
+    backgroundColor?: string;
+    /**
+     * Allows sticky banner while scrolling.
+     * @default false
+     */
+    isSticky?: boolean;
+    /**
+     * Additional class names that are added to the respective component.
+     */
+    className?: string;
+};
+declare const ApplicationLayoutBodyBanner: React.ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutBodyBanner;