@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/applicationHeader/AppMenuDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppMenuDropdown.js","sources":["../../../src/components/applicationHeader/AppMenuDropdown.tsx"],"sourcesContent":["import React, { useState, forwardRef, type ForwardedRef, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport useClickOutside from '../../hooks/useClickOutside';\n\ntype ToggleButtonProps = {\n    title: string | React.ReactNode;\n    caret: boolean;\n};\n\nconst ToggleButton = (props: ToggleButtonProps) => {\n    const { title, caret } = props;\n    const toggleClassName = classNames('ModuleNavigation-dropdown', 'dropdown-toggle justify-content-between', {\n        inactive: !caret,\n    });\n\n    return (\n        <a className={toggleClassName} role='button' id='basic-nav-dropdown'>\n            <span>{title}</span>\n            {caret && <span className='caret' />}\n        </a>\n    );\n};\n\nconst DropdownMenu = (props: PropsWithChildren) => {\n    const { children } = props;\n\n    if (isEmpty(children)) {\n        return null;\n    }\n\n    return (\n        <ul role='menu' className='dropdown-menu ModuleNavigation-dropdown-menu'>\n            {children}\n        </ul>\n    );\n};\n\ntype AppMenuDropdownOpenerProps = {\n    open: boolean;\n    onDropdownClick: () => void;\n};\n\ntype Ref = ForwardedRef<HTMLLIElement>;\ntype Props = PropsWithChildren<AppMenuDropdownOpenerProps>;\n\nconst AppMenuDropdownOpener = forwardRef((props: Props, ref: Ref) => {\n    const { open, children, onDropdownClick } = props;\n    return (\n        <li ref={ref} className={classNames('dropdown', { open })} onClick={onDropdownClick}>\n            {children}\n        </li>\n    );\n});\n\nexport type AppMenuDropdownProps = {\n    title: string | React.ReactNode;\n    caret?: boolean;\n    onToggleAppMenu?: (isOpen: boolean) => void;\n};\n\nexport const AppMenuDropdown = (props: PropsWithChildren<AppMenuDropdownProps>) => {\n    const { title, caret = false, onToggleAppMenu = noop, children } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const wrapperRef = useClickOutside(() => setIsOpen(false));\n\n    const handleDropdownClick = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggleAppMenu(newState);\n    };\n\n    const openWithChildren = !isEmpty(children) && isOpen;\n\n    return (\n        <AppMenuDropdownOpener open={openWithChildren} onDropdownClick={handleDropdownClick} ref={wrapperRef}>\n            <ToggleButton title={title} caret={caret} />\n            <DropdownMenu>{children}</DropdownMenu>\n        </AppMenuDropdownOpener>\n    );\n};\n\nexport default AppMenuDropdown;\n"],"names":["ToggleButton","props","title","caret","toggleClassName","classNames","jsx","DropdownMenu","children","isEmpty","AppMenuDropdownOpener","forwardRef","ref","open","onDropdownClick","AppMenuDropdown","onToggleAppMenu","noop","isOpen","setIsOpen","useState","wrapperRef","useClickOutside","handleDropdownClick","newState","openWithChildren"],"mappings":";;;;;AAWA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,OAAAC,EAAA,IAAUF,GACnBG,IAAkBC,EAAW,6BAA6B,2CAA2C;AAAA,IACvG,UAAU,CAACF;AAAA,EAAA,CACd;AAED,2BACK,KAAA,EAAE,WAAWC,GAAiB,MAAK,UAAS,IAAG,sBAC5C,UAAA;AAAA,IAAA,gBAAAE,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,IACZC,KAAS,gBAAAG,EAAC,QAAA,EAAK,WAAU,QAAA,CAAQ;AAAA,EAAA,GACtC;AAER,GAEMC,IAAe,CAACN,MAA6B;AAC/C,QAAM,EAAE,UAAAO,MAAaP;AAErB,SAAIQ,EAAQD,CAAQ,IACT,yBAIN,MAAA,EAAG,MAAK,QAAO,WAAU,gDACrB,UAAAA,GACL;AAER,GAUME,IAAwBC,EAAW,CAACV,GAAcW,MAAa;AACjE,QAAM,EAAE,MAAAC,GAAM,UAAAL,GAAU,iBAAAM,EAAA,IAAoBb;AAC5C,SACI,gBAAAK,EAAC,MAAA,EAAG,KAAAM,GAAU,WAAWP,EAAW,YAAY,EAAE,MAAAQ,EAAA,CAAM,GAAG,SAASC,GAC/D,UAAAN,EAAA,CACL;AAER,CAAC,GAQYO,IAAkB,CAACd,MAAmD;AAC/E,QAAM,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,iBAAAa,IAAkBC,GAAM,UAAAT,MAAaP,GAE7D,CAACiB,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAaC,EAAgB,MAAMH,EAAU,EAAK,CAAC,GAEnDI,IAAsB,MAAM;AAC9B,UAAMC,IAAW,CAACN;AAClB,IAAAC,EAAUK,CAAQ,GAClBR,EAAgBQ,CAAQ;AAAA,EAC5B,GAEMC,IAAmB,CAAChB,EAAQD,CAAQ,KAAKU;AAE/C,2BACKR,GAAA,EAAsB,MAAMe,GAAkB,iBAAiBF,GAAqB,KAAKF,GACtF,UAAA;AAAA,IAAA,gBAAAf,EAACN,GAAA,EAAa,OAAAE,GAAc,OAAAC,EAAA,CAAc;AAAA,IAC1C,gBAAAG,EAACC,KAAc,UAAAC,EAAA,CAAS;AAAA,EAAA,GAC5B;AAER;"}
+{"version":3,"file":"AppMenuDropdown.js","sources":["../../../src/components/applicationHeader/AppMenuDropdown.tsx"],"sourcesContent":["import React, { useState, forwardRef, type ForwardedRef, type PropsWithChildren } from 'react';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useClickOutside from '../../hooks/useClickOutside';\n\ntype ToggleButtonProps = {\n    title: string | React.ReactNode;\n    caret: boolean;\n};\n\nconst ToggleButton = (props: ToggleButtonProps) => {\n    const { title, caret } = props;\n    const toggleClassName = classNames(\n        'ModuleNavigation-dropdown',\n        'dropdown-toggle justify-content-between',\n        !caret && 'inactive'\n    );\n\n    return (\n        <a className={toggleClassName} role='button' id='basic-nav-dropdown'>\n            <span>{title}</span>\n            {caret && <span className='caret' />}\n        </a>\n    );\n};\n\nconst DropdownMenu = (props: PropsWithChildren) => {\n    const { children } = props;\n\n    if (isEmpty(children)) {\n        return null;\n    }\n\n    return (\n        <ul role='menu' className='dropdown-menu ModuleNavigation-dropdown-menu'>\n            {children}\n        </ul>\n    );\n};\n\ntype AppMenuDropdownOpenerProps = {\n    open: boolean;\n    onDropdownClick: () => void;\n};\n\ntype Ref = ForwardedRef<HTMLLIElement>;\ntype Props = PropsWithChildren<AppMenuDropdownOpenerProps>;\n\nconst AppMenuDropdownOpener = forwardRef((props: Props, ref: Ref) => {\n    const { open, children, onDropdownClick } = props;\n    return (\n        <li ref={ref} className={classNames('dropdown', open && 'open')} onClick={onDropdownClick}>\n            {children}\n        </li>\n    );\n});\n\nexport type AppMenuDropdownProps = {\n    title: string | React.ReactNode;\n    caret?: boolean;\n    onToggleAppMenu?: (isOpen: boolean) => void;\n};\n\nexport const AppMenuDropdown = (props: PropsWithChildren<AppMenuDropdownProps>) => {\n    const { title, caret = false, onToggleAppMenu = noop, children } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const wrapperRef = useClickOutside(() => setIsOpen(false));\n\n    const handleDropdownClick = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggleAppMenu(newState);\n    };\n\n    const openWithChildren = !isEmpty(children) && isOpen;\n\n    return (\n        <AppMenuDropdownOpener open={openWithChildren} onDropdownClick={handleDropdownClick} ref={wrapperRef}>\n            <ToggleButton title={title} caret={caret} />\n            <DropdownMenu>{children}</DropdownMenu>\n        </AppMenuDropdownOpener>\n    );\n};\n\nexport default AppMenuDropdown;\n"],"names":["ToggleButton","props","title","caret","toggleClassName","classNames","jsx","DropdownMenu","children","isEmpty","AppMenuDropdownOpener","forwardRef","ref","open","onDropdownClick","AppMenuDropdown","onToggleAppMenu","noop","isOpen","setIsOpen","useState","wrapperRef","useClickOutside","handleDropdownClick","newState","openWithChildren"],"mappings":";;;;;AAWA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,OAAAC,EAAA,IAAUF,GACnBG,IAAkBC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,CAACF,KAAS;AAAA,EAAA;AAGd,2BACK,KAAA,EAAE,WAAWC,GAAiB,MAAK,UAAS,IAAG,sBAC5C,UAAA;AAAA,IAAA,gBAAAE,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,IACZC,KAAS,gBAAAG,EAAC,QAAA,EAAK,WAAU,QAAA,CAAQ;AAAA,EAAA,GACtC;AAER,GAEMC,IAAe,CAACN,MAA6B;AAC/C,QAAM,EAAE,UAAAO,MAAaP;AAErB,SAAIQ,EAAQD,CAAQ,IACT,yBAIN,MAAA,EAAG,MAAK,QAAO,WAAU,gDACrB,UAAAA,GACL;AAER,GAUME,IAAwBC,EAAW,CAACV,GAAcW,MAAa;AACjE,QAAM,EAAE,MAAAC,GAAM,UAAAL,GAAU,iBAAAM,EAAA,IAAoBb;AAC5C,SACI,gBAAAK,EAAC,MAAA,EAAG,KAAAM,GAAU,WAAWP,EAAW,YAAYQ,KAAQ,MAAM,GAAG,SAASC,GACrE,UAAAN,EAAA,CACL;AAER,CAAC,GAQYO,IAAkB,CAACd,MAAmD;AAC/E,QAAM,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,iBAAAa,IAAkBC,GAAM,UAAAT,MAAaP,GAE7D,CAACiB,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAaC,EAAgB,MAAMH,EAAU,EAAK,CAAC,GAEnDI,IAAsB,MAAM;AAC9B,UAAMC,IAAW,CAACN;AAClB,IAAAC,EAAUK,CAAQ,GAClBR,EAAgBQ,CAAQ;AAAA,EAC5B,GAEMC,IAAmB,CAAChB,EAAQD,CAAQ,KAAKU;AAE/C,2BACKR,GAAA,EAAsB,MAAMe,GAAkB,iBAAiBF,GAAqB,KAAKF,GACtF,UAAA;AAAA,IAAA,gBAAAf,EAACN,GAAA,EAAa,OAAAE,GAAc,OAAAC,EAAA,CAAc;AAAA,IAC1C,gBAAAG,EAACC,KAAc,UAAAC,EAAA,CAAS;AAAA,EAAA,GAC5B;AAER;"}

package/components/applicationHeader/ApplicationHeader.d.ts

@@ -8,10 +8,7 @@ export type ModulePropType = {
      * The navigation link component used for rendering the name and for routing.
      *
      * @example
-     *
-     * ```tsx
-     * <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>
-     * ```
+     * <NavLink to='/app/ipsum'>Lorem ipsum</NavLink>
      */
     route: React.ReactNode;
 };
@@ -25,14 +22,13 @@ export type ApplicationHeaderProps = {
      * as homeRoute into the header. For example:
      *
      * @example
-     *
-     * ```tsx
      * <NavLink to='https://home.rio.cloud' />
-     * ```
      */
     homeRoute?: React.ReactNode;
     /**
      * Defines to either show the home icon or the RIO logo as brand logo.
+     *
+     * @default true
      */
     showHomeIcon?: boolean;
     /**
@@ -63,11 +59,14 @@ export type ApplicationHeaderProps = {
      *
      * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components
      * are based on the `ActionBarItem`.
+     *
+     * @default []
      */
     actionBarItems?: React.ReactNode[];
     /**
      * Callback function triggered when the application menu is open or closed.
      *
+     * @default () => {}
      * @param isOpen The new "open" state.
      */
     onToggleAppMenu?: (isOpen: boolean) => void;

package/components/applicationHeader/ApplicationHeader.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import g, { forwardRef as B, useRef as H, useImperativeHandle as S, useCallback as E } from "react";
 import { isEmpty as m } from "es-toolkit/compat";
-import W from "classnames";
+import W from "../../utils/classNames.js";
 import j from "./AppMenu.js";
 import b from "./ApplicationActionBar.js";
 import F from "./MobileSubmoduleNavigation.js";

package/components/applicationHeader/ApplicationHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationHeader.js","sources":["../../../src/components/applicationHeader/ApplicationHeader.tsx"],"sourcesContent":["import React, { useRef, forwardRef, useCallback, useImperativeHandle, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport classNames from 'classnames';\n\nimport AppMenu from './AppMenu';\nimport ApplicationActionBar from './ApplicationActionBar';\nimport MobileSubmoduleNavigation from './MobileSubmoduleNavigation';\nimport MobileAppMenu from './MobileAppMenu';\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport NavItems from './NavItems';\n\nconst SCREEN_SM = 768; // @screen-sm: 768px;\n\nexport type ModulePropType = {\n    /**\n     * Unique key for the sub-module navigation component of an app.\n     */\n    key: string;\n\n    /**\n     * The navigation link component used for rendering the name and for routing.\n     *\n     * @example\n     *\n     * ```tsx\n     * <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>\n     * ```\n     */\n    route: React.ReactNode;\n};\n\nexport type ApplicationHeaderProps = {\n    /**\n     * The service name shown as the navigator dropdown label.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * The home URL that shall be used for the home button. Pass a `react-router-dom` `NavLink`\n     * as homeRoute into the header. For example:\n     *\n     * @example\n     *\n     * ```tsx\n     * <NavLink to='https://home.rio.cloud' />\n     * ```\n     */\n    homeRoute?: React.ReactNode;\n\n    /**\n     * Defines to either show the home icon or the RIO logo as brand logo.\n     */\n    showHomeIcon?: boolean;\n\n    /**\n     * The component for the navigation between apps which will be shown inside the main dropdown.\n     *\n     * Platform apps may use the default AppNavigator, but there are also cases like support apps where it's just a\n     * simple list In this case, use the prop `appMenuItems`.\n     *\n     * If no appNavigator is defined, the dropdown menu will not be rendered.\n     */\n    appNavigator?: React.ReactNode;\n\n    /**\n     * Additional class names that are added to the appNavigator.\n     */\n    appNavigatorClassName?: string;\n\n    /**\n     * List of application navigation link components.\n     */\n    appMenuItems?: ModulePropType[];\n\n    /**\n     * List of submodule navigation component of an app.\n     *\n     * Items collapse into a dropdown if remaining space in the header is not sufficient.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * List of external smart components.\n     *\n     * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components\n     * are based on the `ActionBarItem`.\n     */\n    actionBarItems?: React.ReactNode[];\n\n    /**\n     * Callback function triggered when the application menu is open or closed.\n     *\n     * @param isOpen The new \"open\" state.\n     */\n    onToggleAppMenu?: (isOpen: boolean) => void;\n\n    /**\n     * Additional class names that are added to the wrapper component.\n     */\n    className?: string;\n};\n\nexport const ApplicationHeader = forwardRef((props: ApplicationHeaderProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        homeRoute = '',\n        showHomeIcon = true,\n        label,\n        className,\n        appNavigator,\n        appNavigatorClassName,\n        appMenuItems,\n        navItems,\n        actionBarItems = [],\n        onToggleAppMenu = () => {},\n        ...remainingProps\n    } = props;\n\n    const actionBarRef = useRef(null);\n\n    const [navRef, entry] = useResizeObserver();\n\n    const contentRect = entry?.contentRect;\n\n    useImperativeHandle<HTMLDivElement, any>(ref, () => navRef, [navRef]);\n\n    const getContentRect = useCallback(\n        (key: keyof DOMRectReadOnly) => {\n            if (contentRect) {\n                const value = contentRect[key];\n                return typeof value === 'number' && Math.round(value);\n            }\n        },\n        [contentRect]\n    );\n\n    // If container width cannot be properly read initially, fall back to window width.\n    // This fixes ugly jumping on mobile header and desktop header on mount.\n    const containerWidth = getContentRect('width') || window.innerWidth;\n\n    const isMobileWidth = containerWidth <= SCREEN_SM;\n\n    const hasActionBarItems = !isEmpty(actionBarItems);\n\n    const wrapperClassNames = classNames(\n        'ApplicationHeader',\n        'user-select-none',\n        isMobileWidth && 'mobile',\n        className && className\n    );\n\n    return (\n        <nav {...remainingProps} className={wrapperClassNames} ref={navRef}>\n            {isMobileWidth && (\n                <React.Fragment>\n                    <MobileAppMenu\n                        showHomeIcon={showHomeIcon}\n                        homeRoute={homeRoute}\n                        appMenuItems={appMenuItems}\n                        appNavigator={appNavigator}\n                        onToggleAppMenu={onToggleAppMenu}\n                    />\n                    <div className='flex-1-1-0 display-flex gap-10'>\n                        <MobileSubmoduleNavigation className='flex-1-1' label={label} navItems={navItems} />\n                        {hasActionBarItems && <Divider />}\n                        <ApplicationActionBar className='mobile' nodeRef={actionBarRef} items={actionBarItems} />\n                    </div>\n                </React.Fragment>\n            )}\n            {!isMobileWidth && (\n                <React.Fragment>\n                    <div className='navbar-header'>\n                        <span className={`navbar-brand ${showHomeIcon ? 'home-icon' : ''}`}>{homeRoute}</span>\n                    </div>\n                    {label && (\n                        <AppMenu\n                            label={label}\n                            key='AppMenu'\n                            appMenuItems={appMenuItems}\n                            appNavigator={appNavigator}\n                            appNavigatorClassName={appNavigatorClassName}\n                            onToggleAppMenu={onToggleAppMenu}\n                        />\n                    )}\n                    {isEmpty(navItems) && <ul className='SubmoduleNavigation nav' />}\n                    {!isEmpty(navItems) && (\n                        <NavItems\n                            key='NavItems'\n                            navItems={navItems}\n                            containerWidth={containerWidth}\n                            actionBarItems={actionBarItems}\n                        />\n                    )}\n                    <ApplicationActionBar nodeRef={actionBarRef} items={actionBarItems} />\n                </React.Fragment>\n            )}\n        </nav>\n    );\n});\n\nconst Divider = () => (\n    <div className='divider display-flex align-items-center'>\n        <div className='width-3 height-20 bg-lighter' />\n    </div>\n);\n\nexport default ApplicationHeader;\n"],"names":["SCREEN_SM","ApplicationHeader","forwardRef","props","ref","homeRoute","showHomeIcon","label","className","appNavigator","appNavigatorClassName","appMenuItems","navItems","actionBarItems","onToggleAppMenu","remainingProps","actionBarRef","useRef","navRef","entry","useResizeObserver","contentRect","useImperativeHandle","containerWidth","useCallback","key","value","isMobileWidth","hasActionBarItems","isEmpty","wrapperClassNames","classNames","jsxs","React","jsx","MobileAppMenu","MobileSubmoduleNavigation","Divider","ApplicationActionBar","AppMenu","NavItems"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAY,KA2FLC,IAAoBC,EAAW,CAACC,GAA+BC,MAAsC;AAC9G,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,cAAAC,IAAe;AAAA,IACf,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC,IAAiB,CAAA;AAAA,IACjB,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,GAAGC;AAAA,EAAA,IACHZ,GAEEa,IAAeC,EAAO,IAAI,GAE1B,CAACC,GAAQC,CAAK,IAAIC,EAAA,GAElBC,IAAcF,GAAO;AAE3B,EAAAG,EAAyClB,GAAK,MAAMc,GAAQ,CAACA,CAAM,CAAC;AAcpE,QAAMK,IAZiBC;AAAA,IACnB,CAACC,MAA+B;AAC5B,UAAIJ,GAAa;AACb,cAAMK,IAAQL,EAAYI,CAAG;AAC7B,eAAO,OAAOC,KAAU,YAAY,KAAK,MAAMA,CAAK;AAAA,MACxD;AAAA,IACJ;AAAA,IACA,CAACL,CAAW;AAAA,EAAA,EAKsB,OAAO,KAAK,OAAO,YAEnDM,IAAgBJ,KAAkBvB,GAElC4B,IAAoB,CAACC,EAAQhB,CAAc,GAE3CiB,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACAJ,KAAiB;AAAA,IACjBnB,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAK,GAAGO,GAAgB,WAAWe,GAAmB,KAAKZ,GACvD,UAAA;AAAA,IAAAS,KACG,gBAAAK,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,cAAA7B;AAAA,UACA,WAAAD;AAAA,UACA,cAAAM;AAAA,UACA,cAAAF;AAAA,UACA,iBAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAkB,EAAC,OAAA,EAAI,WAAU,kCACX,UAAA;AAAA,QAAA,gBAAAE,EAACE,GAAA,EAA0B,WAAU,YAAW,OAAA7B,GAAc,UAAAK,GAAoB;AAAA,QACjFgB,uBAAsBS,GAAA,EAAQ;AAAA,0BAC9BC,GAAA,EAAqB,WAAU,UAAS,SAAStB,GAAc,OAAOH,EAAA,CAAgB;AAAA,MAAA,EAAA,CAC3F;AAAA,IAAA,GACJ;AAAA,IAEH,CAACc,KACE,gBAAAK,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAW,gBAAgB5B,IAAe,cAAc,EAAE,IAAK,UAAAD,EAAA,CAAU,GACnF;AAAA,MACCE,KACG,gBAAA2B;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,OAAAhC;AAAA,UAEA,cAAAI;AAAA,UACA,cAAAF;AAAA,UACA,uBAAAC;AAAA,UACA,iBAAAI;AAAA,QAAA;AAAA,QAJI;AAAA,MAAA;AAAA,MAOXe,EAAQjB,CAAQ,KAAK,gBAAAsB,EAAC,MAAA,EAAG,WAAU,2BAA0B;AAAA,MAC7D,CAACL,EAAQjB,CAAQ,KACd,gBAAAsB;AAAA,QAACM;AAAA,QAAA;AAAA,UAEG,UAAA5B;AAAA,UACA,gBAAAW;AAAA,UACA,gBAAAV;AAAA,QAAA;AAAA,QAHI;AAAA,MAAA;AAAA,MAMZ,gBAAAqB,EAACI,GAAA,EAAqB,SAAStB,GAAc,OAAOH,EAAA,CAAgB;AAAA,IAAA,EAAA,CACxE;AAAA,EAAA,GAER;AAER,CAAC,GAEKwB,IAAU,MACZ,gBAAAH,EAAC,OAAA,EAAI,WAAU,2CACX,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BAAA,CAA+B,EAAA,CAClD;"}
+{"version":3,"file":"ApplicationHeader.js","sources":["../../../src/components/applicationHeader/ApplicationHeader.tsx"],"sourcesContent":["import React, { useRef, forwardRef, useCallback, useImperativeHandle, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport AppMenu from './AppMenu';\nimport ApplicationActionBar from './ApplicationActionBar';\nimport MobileSubmoduleNavigation from './MobileSubmoduleNavigation';\nimport MobileAppMenu from './MobileAppMenu';\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport NavItems from './NavItems';\n\nconst SCREEN_SM = 768; // @screen-sm: 768px;\n\nexport type ModulePropType = {\n    /**\n     * Unique key for the sub-module navigation component of an app.\n     */\n    key: string;\n\n    /**\n     * The navigation link component used for rendering the name and for routing.\n     *\n     * @example\n     * <NavLink to='/app/ipsum'>Lorem ipsum</NavLink>\n     */\n    route: React.ReactNode;\n};\n\nexport type ApplicationHeaderProps = {\n    /**\n     * The service name shown as the navigator dropdown label.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * The home URL that shall be used for the home button. Pass a `react-router-dom` `NavLink`\n     * as homeRoute into the header. For example:\n     *\n     * @example\n     * <NavLink to='https://home.rio.cloud' />\n     */\n    homeRoute?: React.ReactNode;\n\n    /**\n     * Defines to either show the home icon or the RIO logo as brand logo.\n     *\n     * @default true\n     */\n    showHomeIcon?: boolean;\n\n    /**\n     * The component for the navigation between apps which will be shown inside the main dropdown.\n     *\n     * Platform apps may use the default AppNavigator, but there are also cases like support apps where it's just a\n     * simple list In this case, use the prop `appMenuItems`.\n     *\n     * If no appNavigator is defined, the dropdown menu will not be rendered.\n     */\n    appNavigator?: React.ReactNode;\n\n    /**\n     * Additional class names that are added to the appNavigator.\n     */\n    appNavigatorClassName?: string;\n\n    /**\n     * List of application navigation link components.\n     */\n    appMenuItems?: ModulePropType[];\n\n    /**\n     * List of submodule navigation component of an app.\n     *\n     * Items collapse into a dropdown if remaining space in the header is not sufficient.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * List of external smart components.\n     *\n     * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components\n     * are based on the `ActionBarItem`.\n     *\n     * @default []\n     */\n    actionBarItems?: React.ReactNode[];\n\n    /**\n     * Callback function triggered when the application menu is open or closed.\n     *\n     * @default () => {}\n     * @param isOpen The new \"open\" state.\n     */\n    onToggleAppMenu?: (isOpen: boolean) => void;\n\n    /**\n     * Additional class names that are added to the wrapper component.\n     */\n    className?: string;\n};\n\nexport const ApplicationHeader = forwardRef((props: ApplicationHeaderProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        homeRoute = '',\n        showHomeIcon = true,\n        label,\n        className,\n        appNavigator,\n        appNavigatorClassName,\n        appMenuItems,\n        navItems,\n        actionBarItems = [],\n        onToggleAppMenu = () => {},\n        ...remainingProps\n    } = props;\n\n    const actionBarRef = useRef(null);\n\n    const [navRef, entry] = useResizeObserver();\n\n    const contentRect = entry?.contentRect;\n\n    useImperativeHandle<HTMLDivElement, any>(ref, () => navRef, [navRef]);\n\n    const getContentRect = useCallback(\n        (key: keyof DOMRectReadOnly) => {\n            if (contentRect) {\n                const value = contentRect[key];\n                return typeof value === 'number' && Math.round(value);\n            }\n        },\n        [contentRect]\n    );\n\n    // If container width cannot be properly read initially, fall back to window width.\n    // This fixes ugly jumping on mobile header and desktop header on mount.\n    const containerWidth = getContentRect('width') || window.innerWidth;\n\n    const isMobileWidth = containerWidth <= SCREEN_SM;\n\n    const hasActionBarItems = !isEmpty(actionBarItems);\n\n    const wrapperClassNames = classNames(\n        'ApplicationHeader',\n        'user-select-none',\n        isMobileWidth && 'mobile',\n        className && className\n    );\n\n    return (\n        <nav {...remainingProps} className={wrapperClassNames} ref={navRef}>\n            {isMobileWidth && (\n                <React.Fragment>\n                    <MobileAppMenu\n                        showHomeIcon={showHomeIcon}\n                        homeRoute={homeRoute}\n                        appMenuItems={appMenuItems}\n                        appNavigator={appNavigator}\n                        onToggleAppMenu={onToggleAppMenu}\n                    />\n                    <div className='flex-1-1-0 display-flex gap-10'>\n                        <MobileSubmoduleNavigation className='flex-1-1' label={label} navItems={navItems} />\n                        {hasActionBarItems && <Divider />}\n                        <ApplicationActionBar className='mobile' nodeRef={actionBarRef} items={actionBarItems} />\n                    </div>\n                </React.Fragment>\n            )}\n            {!isMobileWidth && (\n                <React.Fragment>\n                    <div className='navbar-header'>\n                        <span className={`navbar-brand ${showHomeIcon ? 'home-icon' : ''}`}>{homeRoute}</span>\n                    </div>\n                    {label && (\n                        <AppMenu\n                            label={label}\n                            key='AppMenu'\n                            appMenuItems={appMenuItems}\n                            appNavigator={appNavigator}\n                            appNavigatorClassName={appNavigatorClassName}\n                            onToggleAppMenu={onToggleAppMenu}\n                        />\n                    )}\n                    {isEmpty(navItems) && <ul className='SubmoduleNavigation nav' />}\n                    {!isEmpty(navItems) && (\n                        <NavItems\n                            key='NavItems'\n                            navItems={navItems}\n                            containerWidth={containerWidth}\n                            actionBarItems={actionBarItems}\n                        />\n                    )}\n                    <ApplicationActionBar nodeRef={actionBarRef} items={actionBarItems} />\n                </React.Fragment>\n            )}\n        </nav>\n    );\n});\n\nconst Divider = () => (\n    <div className='divider display-flex align-items-center'>\n        <div className='width-3 height-20 bg-lighter' />\n    </div>\n);\n\nexport default ApplicationHeader;\n"],"names":["SCREEN_SM","ApplicationHeader","forwardRef","props","ref","homeRoute","showHomeIcon","label","className","appNavigator","appNavigatorClassName","appMenuItems","navItems","actionBarItems","onToggleAppMenu","remainingProps","actionBarRef","useRef","navRef","entry","useResizeObserver","contentRect","useImperativeHandle","containerWidth","useCallback","key","value","isMobileWidth","hasActionBarItems","isEmpty","wrapperClassNames","classNames","jsxs","React","jsx","MobileAppMenu","MobileSubmoduleNavigation","Divider","ApplicationActionBar","AppMenu","NavItems"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAY,KA0FLC,IAAoBC,EAAW,CAACC,GAA+BC,MAAsC;AAC9G,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,cAAAC,IAAe;AAAA,IACf,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC,IAAiB,CAAA;AAAA,IACjB,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,GAAGC;AAAA,EAAA,IACHZ,GAEEa,IAAeC,EAAO,IAAI,GAE1B,CAACC,GAAQC,CAAK,IAAIC,EAAA,GAElBC,IAAcF,GAAO;AAE3B,EAAAG,EAAyClB,GAAK,MAAMc,GAAQ,CAACA,CAAM,CAAC;AAcpE,QAAMK,IAZiBC;AAAA,IACnB,CAACC,MAA+B;AAC5B,UAAIJ,GAAa;AACb,cAAMK,IAAQL,EAAYI,CAAG;AAC7B,eAAO,OAAOC,KAAU,YAAY,KAAK,MAAMA,CAAK;AAAA,MACxD;AAAA,IACJ;AAAA,IACA,CAACL,CAAW;AAAA,EAAA,EAKsB,OAAO,KAAK,OAAO,YAEnDM,IAAgBJ,KAAkBvB,GAElC4B,IAAoB,CAACC,EAAQhB,CAAc,GAE3CiB,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACAJ,KAAiB;AAAA,IACjBnB,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAK,GAAGO,GAAgB,WAAWe,GAAmB,KAAKZ,GACvD,UAAA;AAAA,IAAAS,KACG,gBAAAK,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,cAAA7B;AAAA,UACA,WAAAD;AAAA,UACA,cAAAM;AAAA,UACA,cAAAF;AAAA,UACA,iBAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAkB,EAAC,OAAA,EAAI,WAAU,kCACX,UAAA;AAAA,QAAA,gBAAAE,EAACE,GAAA,EAA0B,WAAU,YAAW,OAAA7B,GAAc,UAAAK,GAAoB;AAAA,QACjFgB,uBAAsBS,GAAA,EAAQ;AAAA,0BAC9BC,GAAA,EAAqB,WAAU,UAAS,SAAStB,GAAc,OAAOH,EAAA,CAAgB;AAAA,MAAA,EAAA,CAC3F;AAAA,IAAA,GACJ;AAAA,IAEH,CAACc,KACE,gBAAAK,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAW,gBAAgB5B,IAAe,cAAc,EAAE,IAAK,UAAAD,EAAA,CAAU,GACnF;AAAA,MACCE,KACG,gBAAA2B;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,OAAAhC;AAAA,UAEA,cAAAI;AAAA,UACA,cAAAF;AAAA,UACA,uBAAAC;AAAA,UACA,iBAAAI;AAAA,QAAA;AAAA,QAJI;AAAA,MAAA;AAAA,MAOXe,EAAQjB,CAAQ,KAAK,gBAAAsB,EAAC,MAAA,EAAG,WAAU,2BAA0B;AAAA,MAC7D,CAACL,EAAQjB,CAAQ,KACd,gBAAAsB;AAAA,QAACM;AAAA,QAAA;AAAA,UAEG,UAAA5B;AAAA,UACA,gBAAAW;AAAA,UACA,gBAAAV;AAAA,QAAA;AAAA,QAHI;AAAA,MAAA;AAAA,MAMZ,gBAAAqB,EAACI,GAAA,EAAqB,SAAStB,GAAc,OAAOH,EAAA,CAAgB;AAAA,IAAA,EAAA,CACxE;AAAA,EAAA,GAER;AAER,CAAC,GAEKwB,IAAU,MACZ,gBAAAH,EAAC,OAAA,EAAI,WAAU,2CACX,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BAAA,CAA+B,EAAA,CAClD;"}

package/components/applicationHeader/MobileHeaderModal.js

@@ -1,17 +1,17 @@
 import { jsx as t, Fragment as y, jsxs as i } from "react/jsx-runtime";
 import w from "react";
 import u from "react-dom";
-import a from "classnames";
-import { AnimatePresence as r, motion as s } from "motion/react";
+import { AnimatePresence as a, motion as r } from "motion/react";
+import s from "../../utils/classNames.js";
 import { getOrCreatePortalRoot as N } from "../../utils/portalRoot.js";
 const b = -1e3, P = (n) => {
   const { show: e = !1, showClose: l = !0, modalClassName: c, className: m, onClose: d = () => {
-  }, children: p } = n, h = a(
+  }, children: p } = n, h = s(
     "MobileHeaderModal",
     "position-fixed left-0 right-0 bottom-0",
     "z-index-max",
     m
-  ), g = a(
+  ), g = s(
     "display-flex flex-column justify-content-center",
     "margin-15",
     "text-center",
@@ -23,8 +23,8 @@ const b = -1e3, P = (n) => {
   ), f = N(), x = window.innerHeight - 30, o = b - window.innerHeight;
   return /* @__PURE__ */ t(y, { children: u.createPortal(
     /* @__PURE__ */ i(w.Fragment, { children: [
-      /* @__PURE__ */ t(r, { children: e && /* @__PURE__ */ i(
-        s.div,
+      /* @__PURE__ */ t(a, { children: e && /* @__PURE__ */ i(
+        r.div,
         {
           className: h,
           initial: { opacity: 0, top: o },
@@ -43,8 +43,8 @@ const b = -1e3, P = (n) => {
           ]
         }
       ) }),
-      /* @__PURE__ */ t(r, { children: e && /* @__PURE__ */ t(
-        s.div,
+      /* @__PURE__ */ t(a, { children: e && /* @__PURE__ */ t(
+        r.div,
         {
           className: "bottom-sheet-backdrop",
           initial: { opacity: 0 },

package/components/applicationHeader/MobileHeaderModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileHeaderModal.js","sources":["../../../src/components/applicationHeader/MobileHeaderModal.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\n\nexport type MobileHeaderModalProps = {\n    show?: boolean;\n    showClose?: boolean;\n    modalClassName?: string;\n    onClose?: () => void;\n    className?: string;\n};\n\nconst MobileHeaderModal = (props: PropsWithChildren<MobileHeaderModalProps>) => {\n    const { show = false, showClose = true, modalClassName, className, onClose = () => {}, children } = props;\n\n    const wrapperClasses = classNames(\n        'MobileHeaderModal',\n        'position-fixed left-0 right-0 bottom-0',\n        'z-index-max',\n        className\n    );\n\n    const modalClasses = classNames(\n        'display-flex flex-column justify-content-center',\n        'margin-15',\n        'text-center',\n        'rounded',\n        'bg-white',\n        'shadow-hard',\n        'overflow-auto',\n        modalClassName\n    );\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const pageHeight = window.innerHeight - 30;\n    const offset = OFFSET_POSITION - window.innerHeight;\n\n    return (\n        <>\n            {ReactDOM.createPortal(\n                <React.Fragment>\n                    <AnimatePresence>\n                        {show && (\n                            <motion.div\n                                className={wrapperClasses}\n                                initial={{ opacity: 0, top: offset }}\n                                animate={{ opacity: 1, y: 0, top: 0 }}\n                                exit={{ opacity: 0, transition: { duration: 0.3 }, top: offset }}\n                            >\n                                <div className={modalClasses} style={{ height: `${pageHeight}px` }}>\n                                    {children}\n                                </div>\n                                {showClose && (\n                                    <div\n                                        className={\n                                            'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' +\n                                            'text-size-20 text-color-dark'\n                                        }\n                                        onClick={onClose}\n                                    >\n                                        <span className='rioglyph rioglyph-remove' />\n                                    </div>\n                                )}\n                            </motion.div>\n                        )}\n                    </AnimatePresence>\n                    <AnimatePresence>\n                        {show && (\n                            <motion.div\n                                className='bottom-sheet-backdrop'\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 0.5 }}\n                                exit={{ opacity: 0 }}\n                            />\n                        )}\n                    </AnimatePresence>\n                </React.Fragment>,\n                modalRoot\n            )}\n        </>\n    );\n};\n\nexport default MobileHeaderModal;\n"],"names":["OFFSET_POSITION","MobileHeaderModal","props","show","showClose","modalClassName","className","onClose","children","wrapperClasses","classNames","modalClasses","modalRoot","getOrCreatePortalRoot","pageHeight","offset","ReactDOM","jsxs","React","jsx","AnimatePresence","motion"],"mappings":";;;;;;AAOA,MAAMA,IAAkB,MAUlBC,IAAoB,CAACC,MAAqD;AAC5E,QAAM,EAAE,MAAAC,IAAO,IAAO,WAAAC,IAAY,IAAM,gBAAAC,GAAgB,WAAAC,GAAW,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,UAAAC,MAAaN,GAE9FO,IAAiBC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACAJ;AAAA,EAAA,GAGEK,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAL;AAAA,EAAA,GAGEO,IAAYC,EAAA,GAEZC,IAAa,OAAO,cAAc,IAClCC,IAASf,IAAkB,OAAO;AAExC,gCAES,UAAAgB,EAAS;AAAA,IACN,gBAAAC,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC,EAACC,KACI,UAAAjB,KACG,gBAAAc;AAAA,QAACI,EAAO;AAAA,QAAP;AAAA,UACG,WAAWZ;AAAA,UACX,SAAS,EAAE,SAAS,GAAG,KAAKM,EAAA;AAAA,UAC5B,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,KAAK,EAAA;AAAA,UAClC,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,IAAA,GAAO,KAAKA,EAAA;AAAA,UAExD,UAAA;AAAA,YAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWR,GAAc,OAAO,EAAE,QAAQ,GAAGG,CAAU,KAAA,GACvD,UAAAN,EAAA,CACL;AAAA,YACCJ,KACG,gBAAAe;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WACI;AAAA,gBAGJ,SAASZ;AAAA,gBAET,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/C;AAAA,QAAA;AAAA,MAAA,GAIhB;AAAA,MACA,gBAAAA,EAACC,KACI,UAAAjB,KACG,gBAAAgB;AAAA,QAACE,EAAO;AAAA,QAAP;AAAA,UACG,WAAU;AAAA,UACV,SAAS,EAAE,SAAS,EAAA;AAAA,UACpB,SAAS,EAAE,SAAS,IAAA;AAAA,UACpB,MAAM,EAAE,SAAS,EAAA;AAAA,QAAE;AAAA,MAAA,EACvB,CAER;AAAA,IAAA,GACJ;AAAA,IACAT;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"MobileHeaderModal.js","sources":["../../../src/components/applicationHeader/MobileHeaderModal.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\n\nexport type MobileHeaderModalProps = {\n    show?: boolean;\n    showClose?: boolean;\n    modalClassName?: string;\n    onClose?: () => void;\n    className?: string;\n};\n\nconst MobileHeaderModal = (props: PropsWithChildren<MobileHeaderModalProps>) => {\n    const { show = false, showClose = true, modalClassName, className, onClose = () => {}, children } = props;\n\n    const wrapperClasses = classNames(\n        'MobileHeaderModal',\n        'position-fixed left-0 right-0 bottom-0',\n        'z-index-max',\n        className\n    );\n\n    const modalClasses = classNames(\n        'display-flex flex-column justify-content-center',\n        'margin-15',\n        'text-center',\n        'rounded',\n        'bg-white',\n        'shadow-hard',\n        'overflow-auto',\n        modalClassName\n    );\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const pageHeight = window.innerHeight - 30;\n    const offset = OFFSET_POSITION - window.innerHeight;\n\n    return (\n        <>\n            {ReactDOM.createPortal(\n                <React.Fragment>\n                    <AnimatePresence>\n                        {show && (\n                            <motion.div\n                                className={wrapperClasses}\n                                initial={{ opacity: 0, top: offset }}\n                                animate={{ opacity: 1, y: 0, top: 0 }}\n                                exit={{ opacity: 0, transition: { duration: 0.3 }, top: offset }}\n                            >\n                                <div className={modalClasses} style={{ height: `${pageHeight}px` }}>\n                                    {children}\n                                </div>\n                                {showClose && (\n                                    <div\n                                        className={\n                                            'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' +\n                                            'text-size-20 text-color-dark'\n                                        }\n                                        onClick={onClose}\n                                    >\n                                        <span className='rioglyph rioglyph-remove' />\n                                    </div>\n                                )}\n                            </motion.div>\n                        )}\n                    </AnimatePresence>\n                    <AnimatePresence>\n                        {show && (\n                            <motion.div\n                                className='bottom-sheet-backdrop'\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 0.5 }}\n                                exit={{ opacity: 0 }}\n                            />\n                        )}\n                    </AnimatePresence>\n                </React.Fragment>,\n                modalRoot\n            )}\n        </>\n    );\n};\n\nexport default MobileHeaderModal;\n"],"names":["OFFSET_POSITION","MobileHeaderModal","props","show","showClose","modalClassName","className","onClose","children","wrapperClasses","classNames","modalClasses","modalRoot","getOrCreatePortalRoot","pageHeight","offset","ReactDOM","jsxs","React","jsx","AnimatePresence","motion"],"mappings":";;;;;;AAOA,MAAMA,IAAkB,MAUlBC,IAAoB,CAACC,MAAqD;AAC5E,QAAM,EAAE,MAAAC,IAAO,IAAO,WAAAC,IAAY,IAAM,gBAAAC,GAAgB,WAAAC,GAAW,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,UAAAC,MAAaN,GAE9FO,IAAiBC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACAJ;AAAA,EAAA,GAGEK,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAL;AAAA,EAAA,GAGEO,IAAYC,EAAA,GAEZC,IAAa,OAAO,cAAc,IAClCC,IAASf,IAAkB,OAAO;AAExC,gCAES,UAAAgB,EAAS;AAAA,IACN,gBAAAC,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC,EAACC,KACI,UAAAjB,KACG,gBAAAc;AAAA,QAACI,EAAO;AAAA,QAAP;AAAA,UACG,WAAWZ;AAAA,UACX,SAAS,EAAE,SAAS,GAAG,KAAKM,EAAA;AAAA,UAC5B,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,KAAK,EAAA;AAAA,UAClC,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,IAAA,GAAO,KAAKA,EAAA;AAAA,UAExD,UAAA;AAAA,YAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWR,GAAc,OAAO,EAAE,QAAQ,GAAGG,CAAU,KAAA,GACvD,UAAAN,EAAA,CACL;AAAA,YACCJ,KACG,gBAAAe;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WACI;AAAA,gBAGJ,SAASZ;AAAA,gBAET,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/C;AAAA,QAAA;AAAA,MAAA,GAIhB;AAAA,MACA,gBAAAA,EAACC,KACI,UAAAjB,KACG,gBAAAgB;AAAA,QAACE,EAAO;AAAA,QAAP;AAAA,UACG,WAAU;AAAA,UACV,SAAS,EAAE,SAAS,EAAA;AAAA,UACpB,SAAS,EAAE,SAAS,IAAA;AAAA,UACpB,MAAM,EAAE,SAAS,EAAA;AAAA,QAAE;AAAA,MAAA,EACvB,CAER;AAAA,IAAA,GACJ;AAAA,IACAT;AAAA,EAAA,GAER;AAER;"}

package/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -1,7 +1,7 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import o, { useState as g } from "react";
-import c from "classnames";
 import { isEmpty as u } from "es-toolkit/compat";
+import c from "../../utils/classNames.js";
 import f from "./MobileHeaderModal.js";
 const z = (r) => {
   const { navItems: s = [], label: n, className: d } = r, [l, m] = g(!1), h = () => m(!l), i = !u(s), p = c(

package/components/applicationHeader/MobileSubmoduleNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileSubmoduleNavigation.js","sources":["../../../src/components/applicationHeader/MobileSubmoduleNavigation.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport MobileHeaderModal from './MobileHeaderModal';\nimport type { ModulePropType } from './ApplicationHeader';\n\nexport type MobileSubmoduleNavigationProps = {\n    label: React.ReactNode;\n    navItems?: ModulePropType[];\n    className?: string;\n};\n\nconst MobileSubmoduleNavigation = (props: MobileSubmoduleNavigationProps) => {\n    const { navItems = [], label, className } = props;\n\n    const [isShown, setIsShown] = useState(false);\n\n    const handleToggleNavigation = () => setIsShown(!isShown);\n\n    const hasNavItems = !isEmpty(navItems);\n\n    const classes = classNames(\n        'MobileSubmoduleNavigation',\n        'display-flex gap-10 align-items-center',\n        'padding-x-10',\n        'cursor-pointer',\n        className\n    );\n\n    const labelClasses = classNames(\n        hasNavItems\n            ? 'text-size-12 text-color-dark line-height-14'\n            : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase',\n        'width-100pct ellipsis-1'\n    );\n\n    return (\n        <div className={classes} onClick={handleToggleNavigation}>\n            <div className='flex-1-1 display-flex flex-column align-items-center width-0'>\n                <div className={labelClasses}>{label}</div>\n                <div className='text-medium width-100pct'>\n                    {navItems.map(navItem => (\n                        <div key={navItem.key} className='ellipsis-1'>\n                            {React.cloneElement(navItem.route as React.ReactElement, {\n                                className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',\n                                onClick: (event: MouseEvent) => event.preventDefault(),\n                            })}\n                        </div>\n                    ))}\n                </div>\n            </div>\n            {hasNavItems && (\n                <div className='text-size-16 text-color-dark'>\n                    <span className='rioglyph rioglyph-chevron-down' />\n                </div>\n            )}\n            {hasNavItems && (\n                <MobileHeaderModal show={isShown}>\n                    {navItems.map(navItem => (\n                        <div key={navItem.key} className='margin-y-15 font-size-20'>\n                            {React.cloneElement(navItem.route as React.ReactElement, {\n                                className: 'text-size-20 text-color-darker',\n                            })}\n                        </div>\n                    ))}\n                </MobileHeaderModal>\n            )}\n        </div>\n    );\n};\n\nexport default MobileSubmoduleNavigation;\n"],"names":["MobileSubmoduleNavigation","props","navItems","label","className","isShown","setIsShown","useState","handleToggleNavigation","hasNavItems","isEmpty","classes","classNames","labelClasses","jsxs","jsx","navItem","React","event","MobileHeaderModal"],"mappings":";;;;;AAaA,MAAMA,IAA4B,CAACC,MAA0C;AACzE,QAAM,EAAE,UAAAC,IAAW,CAAA,GAAI,OAAAC,GAAO,WAAAC,MAAcH,GAEtC,CAACI,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAyB,MAAMF,EAAW,CAACD,CAAO,GAElDI,IAAc,CAACC,EAAQR,CAAQ,GAE/BS,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAR;AAAA,EAAA,GAGES,IAAeD;AAAA,IACjBH,IACM,gDACA;AAAA,IACN;AAAA,EAAA;AAGJ,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAAS,SAASH,GAC9B,UAAA;AAAA,IAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,gEACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAAe,UAAAV,GAAM;AAAA,MACrC,gBAAAY,EAAC,OAAA,EAAI,WAAU,4BACV,YAAS,IAAI,CAAAC,MACV,gBAAAD,EAAC,OAAA,EAAsB,WAAU,cAC5B,UAAAE,EAAM,aAAaD,EAAQ,OAA6B;AAAA,QACrD,WAAW;AAAA,QACX,SAAS,CAACE,MAAsBA,EAAM,eAAA;AAAA,MAAe,CACxD,KAJKF,EAAQ,GAKlB,CACH,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,IACCP,uBACI,OAAA,EAAI,WAAU,gCACX,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,iCAAA,CAAiC,EAAA,CACrD;AAAA,IAEHN,KACG,gBAAAM,EAACI,GAAA,EAAkB,MAAMd,GACpB,UAAAH,EAAS,IAAI,CAAAc,MACV,gBAAAD,EAAC,SAAsB,WAAU,4BAC5B,UAAAE,EAAM,aAAaD,EAAQ,OAA6B;AAAA,MACrD,WAAW;AAAA,IAAA,CACd,KAHKA,EAAQ,GAIlB,CACH,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"MobileSubmoduleNavigation.js","sources":["../../../src/components/applicationHeader/MobileSubmoduleNavigation.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport MobileHeaderModal from './MobileHeaderModal';\nimport type { ModulePropType } from './ApplicationHeader';\n\nexport type MobileSubmoduleNavigationProps = {\n    label: React.ReactNode;\n    navItems?: ModulePropType[];\n    className?: string;\n};\n\nconst MobileSubmoduleNavigation = (props: MobileSubmoduleNavigationProps) => {\n    const { navItems = [], label, className } = props;\n\n    const [isShown, setIsShown] = useState(false);\n\n    const handleToggleNavigation = () => setIsShown(!isShown);\n\n    const hasNavItems = !isEmpty(navItems);\n\n    const classes = classNames(\n        'MobileSubmoduleNavigation',\n        'display-flex gap-10 align-items-center',\n        'padding-x-10',\n        'cursor-pointer',\n        className\n    );\n\n    const labelClasses = classNames(\n        hasNavItems\n            ? 'text-size-12 text-color-dark line-height-14'\n            : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase',\n        'width-100pct ellipsis-1'\n    );\n\n    return (\n        <div className={classes} onClick={handleToggleNavigation}>\n            <div className='flex-1-1 display-flex flex-column align-items-center width-0'>\n                <div className={labelClasses}>{label}</div>\n                <div className='text-medium width-100pct'>\n                    {navItems.map(navItem => (\n                        <div key={navItem.key} className='ellipsis-1'>\n                            {React.cloneElement(navItem.route as React.ReactElement, {\n                                className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',\n                                onClick: (event: MouseEvent) => event.preventDefault(),\n                            })}\n                        </div>\n                    ))}\n                </div>\n            </div>\n            {hasNavItems && (\n                <div className='text-size-16 text-color-dark'>\n                    <span className='rioglyph rioglyph-chevron-down' />\n                </div>\n            )}\n            {hasNavItems && (\n                <MobileHeaderModal show={isShown}>\n                    {navItems.map(navItem => (\n                        <div key={navItem.key} className='margin-y-15 font-size-20'>\n                            {React.cloneElement(navItem.route as React.ReactElement, {\n                                className: 'text-size-20 text-color-darker',\n                            })}\n                        </div>\n                    ))}\n                </MobileHeaderModal>\n            )}\n        </div>\n    );\n};\n\nexport default MobileSubmoduleNavigation;\n"],"names":["MobileSubmoduleNavigation","props","navItems","label","className","isShown","setIsShown","useState","handleToggleNavigation","hasNavItems","isEmpty","classes","classNames","labelClasses","jsxs","jsx","navItem","React","event","MobileHeaderModal"],"mappings":";;;;;AAaA,MAAMA,IAA4B,CAACC,MAA0C;AACzE,QAAM,EAAE,UAAAC,IAAW,CAAA,GAAI,OAAAC,GAAO,WAAAC,MAAcH,GAEtC,CAACI,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAyB,MAAMF,EAAW,CAACD,CAAO,GAElDI,IAAc,CAACC,EAAQR,CAAQ,GAE/BS,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAR;AAAA,EAAA,GAGES,IAAeD;AAAA,IACjBH,IACM,gDACA;AAAA,IACN;AAAA,EAAA;AAGJ,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAAS,SAASH,GAC9B,UAAA;AAAA,IAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,gEACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAAe,UAAAV,GAAM;AAAA,MACrC,gBAAAY,EAAC,OAAA,EAAI,WAAU,4BACV,YAAS,IAAI,CAAAC,MACV,gBAAAD,EAAC,OAAA,EAAsB,WAAU,cAC5B,UAAAE,EAAM,aAAaD,EAAQ,OAA6B;AAAA,QACrD,WAAW;AAAA,QACX,SAAS,CAACE,MAAsBA,EAAM,eAAA;AAAA,MAAe,CACxD,KAJKF,EAAQ,GAKlB,CACH,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,IACCP,uBACI,OAAA,EAAI,WAAU,gCACX,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,iCAAA,CAAiC,EAAA,CACrD;AAAA,IAEHN,KACG,gBAAAM,EAACI,GAAA,EAAkB,MAAMd,GACpB,UAAAH,EAAS,IAAI,CAAAc,MACV,gBAAAD,EAAC,SAAsB,WAAU,4BAC5B,UAAAE,EAAM,aAAaD,EAAQ,OAA6B;AAAA,MACrD,WAAW;AAAA,IAAA,CACd,KAHKA,EAAQ,GAIlB,CACH,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}

package/components/applicationHeader/NavItems.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useState as m, useRef as b, useEffect as L, useLayoutEffect as V } from "react";
-import j from "classnames";
-import { isEmpty as q } from "es-toolkit/compat";
+import { isEmpty as j } from "es-toolkit/compat";
+import q from "../../utils/classNames.js";
 import z from "../../hooks/useClickOutside.js";
 import B from "./CollapsedNavItem.js";
 const $ = 50, F = 15, Q = (C) => {
@@ -42,7 +42,7 @@ const $ = 50, F = 15, Q = (C) => {
       children: e.route
     },
     e.key
-  ), x = () => !t.current && !q(u) ? [
+  ), x = () => !t.current && !j(u) ? [
     ...y.map((s) => p(s, t.current)),
     /* @__PURE__ */ i(
       B,
@@ -56,7 +56,7 @@ const $ = 50, F = 15, Q = (C) => {
       },
       "CollapsedNavItem"
     )
-  ] : r.map((e) => p(e, t.current)), R = j("SubmoduleNavigation", "nav");
+  ] : r.map((e) => p(e, t.current)), R = q("SubmoduleNavigation", "nav");
   return /* @__PURE__ */ i("ul", { className: R, ref: f, children: x() });
 };
 export {

package/components/applicationHeader/NavItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItems.js","sources":["../../../src/components/applicationHeader/NavItems.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport useClickOutside from '../../hooks/useClickOutside';\nimport CollapsedNavItem from './CollapsedNavItem';\nimport type { ModulePropType } from './ApplicationHeader';\n\nconst collapsedDropdownWidth = 50;\nconst paddingLeft = 15;\n\nexport type NavItemsProps = {\n    navItems?: ModulePropType[];\n    containerWidth: number;\n    actionBarItems?: React.ReactNode[];\n};\n\nexport const NavItems = (props: NavItemsProps) => {\n    const { navItems: externalNavItems = [], actionBarItems = [], containerWidth } = props;\n\n    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);\n    const [collapsedNavItems, setCollapsedNavItems] = useState<ModulePropType[]>([]);\n    const [visibleNavItems, setVisibleNavItems] = useState<ModulePropType[]>([]);\n\n    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));\n\n    const navigationRef = useRef(null);\n    const isOffscreen = useRef(true);\n\n    // console.log({ containerWidth });\n\n    // Before any new changes are applied\n    useEffect(() => {\n        // After the component received new props, every nav item has to be rendered offscreen\n        // again without collapsing them into the dropdown to measure its width\n        isOffscreen.current = true;\n    }, [externalNavItems, actionBarItems, containerWidth]);\n\n    // After the component has been rendered\n    useLayoutEffect(() => {\n        // After every nav item was rendered offscreen again we need to recalculate the width\n        // of the items again and render the result with possible collapsible dropdown.\n        if (isOffscreen.current) {\n            computeNavItems();\n        }\n    });\n\n    const getAvailableWidth = (element: HTMLElement) => {\n        // Get relevant elements\n        // const parent = element.parentNode;\n\n        // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));\n        // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;\n\n        // Since the collapsed dropdown has not been rendered yet,\n        // use the fixed with for it to compute available width\n        const availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;\n        return availableWidth;\n    };\n\n    const computeNavItems = () => {\n        const element: HTMLElement | null = navigationRef.current;\n\n        if (!element) {\n            return;\n        }\n\n        const navItems = [...((element as HTMLElement).children || [])];\n\n        const availableWidth = getAvailableWidth(element);\n\n        if (availableWidth < 0) {\n            return;\n        }\n\n        // Iterate over all rendered navItems to figure out their widths in order to figure out\n        // which navItems need to be rendered in the collapsed dropdown\n        let requiredNavItemsSize = 0;\n\n        const updatedVisibleItems: ModulePropType[] = [];\n        const updatedCollapsedItems: ModulePropType[] = [];\n\n        navItems.forEach(item => {\n            if (!item.className) {\n                return;\n            }\n\n            // Calculate the remaining width\n            requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;\n\n            // console.log({ requiredNavItemsSize });\n\n            // Use the navItems.key to find corresponding navItems for each DOM node\n            const matchedNavItem = externalNavItems.find(navItem => {\n                const dataAttr = item.attributes.getNamedItem('data-nav-item-key');\n                return dataAttr && navItem.key === dataAttr.value;\n            });\n\n            if (!matchedNavItem) {\n                return;\n            }\n\n            // Add navItems to the visible group until the available with exceeds.\n            // All other navItems will be added to the collapsed group\n            if (availableWidth > requiredNavItemsSize) {\n                updatedVisibleItems.push(matchedNavItem);\n            } else {\n                updatedCollapsedItems.push(matchedNavItem);\n            }\n        });\n\n        // Set the state to render the navItems again\n        isOffscreen.current = false;\n\n        setVisibleNavItems(updatedVisibleItems);\n        setCollapsedNavItems(updatedCollapsedItems);\n    };\n\n    const handleCollapsedDropdown = () => {\n        // When the dropdown is open, set showCollapsedNavItems to false so all submodule items\n        // are rendered and their size can be computed\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        } else {\n            // When the dropdown is closed, just set the flag to open is enough\n            setIsCollapsedNavItemOpen(true);\n        }\n    };\n\n    const handleCollapsedNavItemSelected = () => {\n        // Close collapsed dropdown on item select\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        }\n    };\n\n    const renderNavItem = (navItem: ModulePropType, isItemOffscreen: boolean) => {\n        return (\n            <li\n                key={navItem.key}\n                className={`submodule ${isItemOffscreen ? 'offscreen' : ''}`}\n                data-nav-item-key={navItem.key}\n            >\n                {navItem.route}\n            </li>\n        );\n    };\n\n    const renderNavItems = () => {\n        if (!isOffscreen.current && !isEmpty(collapsedNavItems)) {\n            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n\n            return [\n                ...visibleItems,\n                <CollapsedNavItem\n                    key='CollapsedNavItem'\n                    ref={collapsedDropdownRef}\n                    show={isCollapsedNavItemOpen}\n                    navItems={collapsedNavItems}\n                    actionBarItems={actionBarItems}\n                    onDropdownClick={handleCollapsedDropdown}\n                    onItemClick={handleCollapsedNavItemSelected}\n                />,\n            ];\n        }\n\n        return externalNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n    };\n\n    // As all navItems need to be added to the DOM first in order to get their real size\n    // the computation whether a navItem need to be shown under the collapsed dropdown or not\n    // needs to be done after the component did mount to the DOM.\n\n    const classes = classNames('SubmoduleNavigation', 'nav');\n\n    return (\n        <ul className={classes} ref={navigationRef}>\n            {renderNavItems()}\n        </ul>\n    );\n};\n\nexport default NavItems;\n"],"names":["collapsedDropdownWidth","paddingLeft","NavItems","props","externalNavItems","actionBarItems","containerWidth","isCollapsedNavItemOpen","setIsCollapsedNavItemOpen","useState","collapsedNavItems","setCollapsedNavItems","visibleNavItems","setVisibleNavItems","collapsedDropdownRef","useClickOutside","navigationRef","useRef","isOffscreen","useEffect","useLayoutEffect","computeNavItems","getAvailableWidth","element","navItems","availableWidth","requiredNavItemsSize","updatedVisibleItems","updatedCollapsedItems","item","matchedNavItem","navItem","dataAttr","handleCollapsedDropdown","handleCollapsedNavItemSelected","renderNavItem","isItemOffscreen","jsx","renderNavItems","isEmpty","CollapsedNavItem","classes","classNames"],"mappings":";;;;;;AASA,MAAMA,IAAyB,IACzBC,IAAc,IAQPC,IAAW,CAACC,MAAyB;AAC9C,QAAM,EAAE,UAAUC,IAAmB,CAAA,GAAI,gBAAAC,IAAiB,CAAA,GAAI,gBAAAC,EAAA,IAAmBH,GAE3E,CAACI,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GACpE,CAACC,GAAmBC,CAAoB,IAAIF,EAA2B,CAAA,CAAE,GACzE,CAACG,GAAiBC,CAAkB,IAAIJ,EAA2B,CAAA,CAAE,GAErEK,IAAuBC,EAAgB,MAAMP,EAA0B,EAAK,CAAC,GAE7EQ,IAAgBC,EAAO,IAAI,GAC3BC,IAAcD,EAAO,EAAI;AAK/B,EAAAE,EAAU,MAAM;AAGZ,IAAAD,EAAY,UAAU;AAAA,EAC1B,GAAG,CAACd,GAAkBC,GAAgBC,CAAc,CAAC,GAGrDc,EAAgB,MAAM;AAGlB,IAAIF,EAAY,WACZG,EAAA;AAAA,EAER,CAAC;AAED,QAAMC,IAAoB,CAACC,MASAA,EAAQ,cAAcvB,IAAyBC,GAIpEoB,IAAkB,MAAM;AAC1B,UAAME,IAA8BP,EAAc;AAElD,QAAI,CAACO;AACD;AAGJ,UAAMC,IAAW,CAAC,GAAKD,EAAwB,YAAY,CAAA,CAAG,GAExDE,IAAiBH,EAAkBC,CAAO;AAEhD,QAAIE,IAAiB;AACjB;AAKJ,QAAIC,IAAuB;AAE3B,UAAMC,IAAwC,CAAA,GACxCC,IAA0C,CAAA;AAEhD,IAAAJ,EAAS,QAAQ,CAAAK,MAAQ;AACrB,UAAI,CAACA,EAAK;AACN;AAIJ,MAAAH,IAAuBA,IAAuBG,EAAK;AAKnD,YAAMC,IAAiB1B,EAAiB,KAAK,CAAA2B,MAAW;AACpD,cAAMC,IAAWH,EAAK,WAAW,aAAa,mBAAmB;AACjE,eAAOG,KAAYD,EAAQ,QAAQC,EAAS;AAAA,MAChD,CAAC;AAED,MAAKF,MAMDL,IAAiBC,IACjBC,EAAoB,KAAKG,CAAc,IAEvCF,EAAsB,KAAKE,CAAc;AAAA,IAEjD,CAAC,GAGDZ,EAAY,UAAU,IAEtBL,EAAmBc,CAAmB,GACtChB,EAAqBiB,CAAqB;AAAA,EAC9C,GAEMK,IAA0B,MAAM;AAGlC,IACIzB,EADA,CAAAD,CAC+B;AAAA,EAKvC,GAEM2B,IAAiC,MAAM;AAEzC,IAAI3B,KACAC,EAA0B,EAAK;AAAA,EAEvC,GAEM2B,IAAgB,CAACJ,GAAyBK,MAExC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAW,aAAaD,IAAkB,cAAc,EAAE;AAAA,MAC1D,qBAAmBL,EAAQ;AAAA,MAE1B,UAAAA,EAAQ;AAAA,IAAA;AAAA,IAJJA,EAAQ;AAAA,EAAA,GASnBO,IAAiB,MACf,CAACpB,EAAY,WAAW,CAACqB,EAAQ7B,CAAiB,IAG3C;AAAA,IACH,GAHiBE,EAAgB,IAAI,CAAAmB,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC;AAAA,IAI3F,gBAAAmB;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,KAAK1B;AAAA,QACL,MAAMP;AAAA,QACN,UAAUG;AAAA,QACV,gBAAAL;AAAA,QACA,iBAAiB4B;AAAA,QACjB,aAAaC;AAAA,MAAA;AAAA,MANT;AAAA,IAAA;AAAA,EAOR,IAID9B,EAAiB,IAAI,CAAA2B,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC,GAOhFuB,IAAUC,EAAW,uBAAuB,KAAK;AAEvD,2BACK,MAAA,EAAG,WAAWD,GAAS,KAAKzB,GACxB,eACL;AAER;"}
+{"version":3,"file":"NavItems.js","sources":["../../../src/components/applicationHeader/NavItems.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport CollapsedNavItem from './CollapsedNavItem';\nimport type { ModulePropType } from './ApplicationHeader';\n\nconst collapsedDropdownWidth = 50;\nconst paddingLeft = 15;\n\nexport type NavItemsProps = {\n    navItems?: ModulePropType[];\n    containerWidth: number;\n    actionBarItems?: React.ReactNode[];\n};\n\nexport const NavItems = (props: NavItemsProps) => {\n    const { navItems: externalNavItems = [], actionBarItems = [], containerWidth } = props;\n\n    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);\n    const [collapsedNavItems, setCollapsedNavItems] = useState<ModulePropType[]>([]);\n    const [visibleNavItems, setVisibleNavItems] = useState<ModulePropType[]>([]);\n\n    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));\n\n    const navigationRef = useRef(null);\n    const isOffscreen = useRef(true);\n\n    // console.log({ containerWidth });\n\n    // Before any new changes are applied\n    useEffect(() => {\n        // After the component received new props, every nav item has to be rendered offscreen\n        // again without collapsing them into the dropdown to measure its width\n        isOffscreen.current = true;\n    }, [externalNavItems, actionBarItems, containerWidth]);\n\n    // After the component has been rendered\n    useLayoutEffect(() => {\n        // After every nav item was rendered offscreen again we need to recalculate the width\n        // of the items again and render the result with possible collapsible dropdown.\n        if (isOffscreen.current) {\n            computeNavItems();\n        }\n    });\n\n    const getAvailableWidth = (element: HTMLElement) => {\n        // Get relevant elements\n        // const parent = element.parentNode;\n\n        // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));\n        // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;\n\n        // Since the collapsed dropdown has not been rendered yet,\n        // use the fixed with for it to compute available width\n        const availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;\n        return availableWidth;\n    };\n\n    const computeNavItems = () => {\n        const element: HTMLElement | null = navigationRef.current;\n\n        if (!element) {\n            return;\n        }\n\n        const navItems = [...((element as HTMLElement).children || [])];\n\n        const availableWidth = getAvailableWidth(element);\n\n        if (availableWidth < 0) {\n            return;\n        }\n\n        // Iterate over all rendered navItems to figure out their widths in order to figure out\n        // which navItems need to be rendered in the collapsed dropdown\n        let requiredNavItemsSize = 0;\n\n        const updatedVisibleItems: ModulePropType[] = [];\n        const updatedCollapsedItems: ModulePropType[] = [];\n\n        navItems.forEach(item => {\n            if (!item.className) {\n                return;\n            }\n\n            // Calculate the remaining width\n            requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;\n\n            // console.log({ requiredNavItemsSize });\n\n            // Use the navItems.key to find corresponding navItems for each DOM node\n            const matchedNavItem = externalNavItems.find(navItem => {\n                const dataAttr = item.attributes.getNamedItem('data-nav-item-key');\n                return dataAttr && navItem.key === dataAttr.value;\n            });\n\n            if (!matchedNavItem) {\n                return;\n            }\n\n            // Add navItems to the visible group until the available with exceeds.\n            // All other navItems will be added to the collapsed group\n            if (availableWidth > requiredNavItemsSize) {\n                updatedVisibleItems.push(matchedNavItem);\n            } else {\n                updatedCollapsedItems.push(matchedNavItem);\n            }\n        });\n\n        // Set the state to render the navItems again\n        isOffscreen.current = false;\n\n        setVisibleNavItems(updatedVisibleItems);\n        setCollapsedNavItems(updatedCollapsedItems);\n    };\n\n    const handleCollapsedDropdown = () => {\n        // When the dropdown is open, set showCollapsedNavItems to false so all submodule items\n        // are rendered and their size can be computed\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        } else {\n            // When the dropdown is closed, just set the flag to open is enough\n            setIsCollapsedNavItemOpen(true);\n        }\n    };\n\n    const handleCollapsedNavItemSelected = () => {\n        // Close collapsed dropdown on item select\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        }\n    };\n\n    const renderNavItem = (navItem: ModulePropType, isItemOffscreen: boolean) => {\n        return (\n            <li\n                key={navItem.key}\n                className={`submodule ${isItemOffscreen ? 'offscreen' : ''}`}\n                data-nav-item-key={navItem.key}\n            >\n                {navItem.route}\n            </li>\n        );\n    };\n\n    const renderNavItems = () => {\n        if (!isOffscreen.current && !isEmpty(collapsedNavItems)) {\n            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n\n            return [\n                ...visibleItems,\n                <CollapsedNavItem\n                    key='CollapsedNavItem'\n                    ref={collapsedDropdownRef}\n                    show={isCollapsedNavItemOpen}\n                    navItems={collapsedNavItems}\n                    actionBarItems={actionBarItems}\n                    onDropdownClick={handleCollapsedDropdown}\n                    onItemClick={handleCollapsedNavItemSelected}\n                />,\n            ];\n        }\n\n        return externalNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n    };\n\n    // As all navItems need to be added to the DOM first in order to get their real size\n    // the computation whether a navItem need to be shown under the collapsed dropdown or not\n    // needs to be done after the component did mount to the DOM.\n\n    const classes = classNames('SubmoduleNavigation', 'nav');\n\n    return (\n        <ul className={classes} ref={navigationRef}>\n            {renderNavItems()}\n        </ul>\n    );\n};\n\nexport default NavItems;\n"],"names":["collapsedDropdownWidth","paddingLeft","NavItems","props","externalNavItems","actionBarItems","containerWidth","isCollapsedNavItemOpen","setIsCollapsedNavItemOpen","useState","collapsedNavItems","setCollapsedNavItems","visibleNavItems","setVisibleNavItems","collapsedDropdownRef","useClickOutside","navigationRef","useRef","isOffscreen","useEffect","useLayoutEffect","computeNavItems","getAvailableWidth","element","navItems","availableWidth","requiredNavItemsSize","updatedVisibleItems","updatedCollapsedItems","item","matchedNavItem","navItem","dataAttr","handleCollapsedDropdown","handleCollapsedNavItemSelected","renderNavItem","isItemOffscreen","jsx","renderNavItems","isEmpty","CollapsedNavItem","classes","classNames"],"mappings":";;;;;;AASA,MAAMA,IAAyB,IACzBC,IAAc,IAQPC,IAAW,CAACC,MAAyB;AAC9C,QAAM,EAAE,UAAUC,IAAmB,CAAA,GAAI,gBAAAC,IAAiB,CAAA,GAAI,gBAAAC,EAAA,IAAmBH,GAE3E,CAACI,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GACpE,CAACC,GAAmBC,CAAoB,IAAIF,EAA2B,CAAA,CAAE,GACzE,CAACG,GAAiBC,CAAkB,IAAIJ,EAA2B,CAAA,CAAE,GAErEK,IAAuBC,EAAgB,MAAMP,EAA0B,EAAK,CAAC,GAE7EQ,IAAgBC,EAAO,IAAI,GAC3BC,IAAcD,EAAO,EAAI;AAK/B,EAAAE,EAAU,MAAM;AAGZ,IAAAD,EAAY,UAAU;AAAA,EAC1B,GAAG,CAACd,GAAkBC,GAAgBC,CAAc,CAAC,GAGrDc,EAAgB,MAAM;AAGlB,IAAIF,EAAY,WACZG,EAAA;AAAA,EAER,CAAC;AAED,QAAMC,IAAoB,CAACC,MASAA,EAAQ,cAAcvB,IAAyBC,GAIpEoB,IAAkB,MAAM;AAC1B,UAAME,IAA8BP,EAAc;AAElD,QAAI,CAACO;AACD;AAGJ,UAAMC,IAAW,CAAC,GAAKD,EAAwB,YAAY,CAAA,CAAG,GAExDE,IAAiBH,EAAkBC,CAAO;AAEhD,QAAIE,IAAiB;AACjB;AAKJ,QAAIC,IAAuB;AAE3B,UAAMC,IAAwC,CAAA,GACxCC,IAA0C,CAAA;AAEhD,IAAAJ,EAAS,QAAQ,CAAAK,MAAQ;AACrB,UAAI,CAACA,EAAK;AACN;AAIJ,MAAAH,IAAuBA,IAAuBG,EAAK;AAKnD,YAAMC,IAAiB1B,EAAiB,KAAK,CAAA2B,MAAW;AACpD,cAAMC,IAAWH,EAAK,WAAW,aAAa,mBAAmB;AACjE,eAAOG,KAAYD,EAAQ,QAAQC,EAAS;AAAA,MAChD,CAAC;AAED,MAAKF,MAMDL,IAAiBC,IACjBC,EAAoB,KAAKG,CAAc,IAEvCF,EAAsB,KAAKE,CAAc;AAAA,IAEjD,CAAC,GAGDZ,EAAY,UAAU,IAEtBL,EAAmBc,CAAmB,GACtChB,EAAqBiB,CAAqB;AAAA,EAC9C,GAEMK,IAA0B,MAAM;AAGlC,IACIzB,EADA,CAAAD,CAC+B;AAAA,EAKvC,GAEM2B,IAAiC,MAAM;AAEzC,IAAI3B,KACAC,EAA0B,EAAK;AAAA,EAEvC,GAEM2B,IAAgB,CAACJ,GAAyBK,MAExC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAW,aAAaD,IAAkB,cAAc,EAAE;AAAA,MAC1D,qBAAmBL,EAAQ;AAAA,MAE1B,UAAAA,EAAQ;AAAA,IAAA;AAAA,IAJJA,EAAQ;AAAA,EAAA,GASnBO,IAAiB,MACf,CAACpB,EAAY,WAAW,CAACqB,EAAQ7B,CAAiB,IAG3C;AAAA,IACH,GAHiBE,EAAgB,IAAI,CAAAmB,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC;AAAA,IAI3F,gBAAAmB;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,KAAK1B;AAAA,QACL,MAAMP;AAAA,QACN,UAAUG;AAAA,QACV,gBAAAL;AAAA,QACA,iBAAiB4B;AAAA,QACjB,aAAaC;AAAA,MAAA;AAAA,MANT;AAAA,IAAA;AAAA,EAOR,IAID9B,EAAiB,IAAI,CAAA2B,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC,GAOhFuB,IAAUC,EAAW,uBAAuB,KAAK;AAEvD,2BACK,MAAA,EAAG,WAAWD,GAAS,KAAKzB,GACxB,eACL;AAER;"}

package/components/applicationLayout/ApplicationLayout.js

@@ -1,18 +1,18 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import c from "classnames";
-import f from "./ApplicationLayoutHeader.js";
-import l from "./ApplicationLayoutSidebar.js";
-import d from "./ApplicationLayoutBody.js";
-import { initDocumentBootstrapping as u } from "../../utils/init/initDocumentBootstrapping.js";
-u();
+import c from "./ApplicationLayoutHeader.js";
+import f from "./ApplicationLayoutSidebar.js";
+import l from "./ApplicationLayoutBody.js";
+import { initDocumentBootstrapping as d } from "../../utils/init/initDocumentBootstrapping.js";
+import u from "../../utils/classNames.js";
+d();
 const o = n((r, t) => {
-  const { className: a, layoutRef: i, children: p, ...e } = r, m = c("ApplicationLayout", a);
+  const { className: a, layoutRef: i, children: p, ...e } = r, m = u("ApplicationLayout", a);
   return /* @__PURE__ */ s("div", { ...e, ref: t || i, className: m, children: p });
 });
-o.Header = f;
-o.Sidebar = l;
-o.Body = d;
+o.Header = c;
+o.Sidebar = f;
+o.Body = l;
 export {
   o as default
 };

package/components/applicationLayout/ApplicationLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayout.js","sources":["../../../src/components/applicationLayout/ApplicationLayout.tsx"],"sourcesContent":["/* eslint-disable import/order */\nimport {\n    forwardRef,\n    type PropsWithChildren,\n    type ForwardedRef,\n    type MutableRefObject,\n    type RefAttributes,\n    type ForwardRefExoticComponent,\n} from 'react';\nimport classNames from 'classnames';\n\nimport ApplicationLayoutHeader from './ApplicationLayoutHeader';\nimport ApplicationLayoutSidebar from './ApplicationLayoutSidebar';\nimport ApplicationLayoutBody from './ApplicationLayoutBody';\nimport { initDocumentBootstrapping } from '../../utils/init/initDocumentBootstrapping';\n\n// initializes document bootstrapping - keep the import to avoid being tree-shaken\n// noinspection JSIgnoredPromiseFromCall\ninitDocumentBootstrapping();\n\nexport type ApplicationLayoutProps = {\n    /**\n     * A React ref function assigned to the wrapper element.\n     */\n    layoutRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutProps>;\n\ntype ApplicationLayoutType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {\n    Header: typeof ApplicationLayoutHeader;\n    Sidebar: typeof ApplicationLayoutSidebar;\n    Body: typeof ApplicationLayoutBody;\n};\n\nconst ApplicationLayout = forwardRef((props: Props, ref: Ref) => {\n    const { className, layoutRef, children, ...remainingProps } = props;\n\n    const classes = classNames('ApplicationLayout', className);\n\n    return (\n        <div {...remainingProps} ref={ref || layoutRef} className={classes}>\n            {children}\n        </div>\n    );\n}) as ApplicationLayoutType;\n\nApplicationLayout.Header = ApplicationLayoutHeader;\nApplicationLayout.Sidebar = ApplicationLayoutSidebar;\nApplicationLayout.Body = ApplicationLayoutBody;\n\nexport default ApplicationLayout;\n"],"names":["initDocumentBootstrapping","ApplicationLayout","forwardRef","props","ref","className","layoutRef","children","remainingProps","classes","classNames","jsx","ApplicationLayoutHeader","ApplicationLayoutSidebar","ApplicationLayoutBody"],"mappings":";;;;;;;AAkBAA,EAAA;AAuBA,MAAMC,IAAoBC,EAAW,CAACC,GAAcC,MAAa;AAC7D,QAAM,EAAE,WAAAC,GAAW,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBL,GAExDM,IAAUC,EAAW,qBAAqBL,CAAS;AAEzD,SACI,gBAAAM,EAAC,SAAK,GAAGH,GAAgB,KAAKJ,KAAOE,GAAW,WAAWG,GACtD,UAAAF,EAAA,CACL;AAER,CAAC;AAEDN,EAAkB,SAASW;AAC3BX,EAAkB,UAAUY;AAC5BZ,EAAkB,OAAOa;"}
+{"version":3,"file":"ApplicationLayout.js","sources":["../../../src/components/applicationLayout/ApplicationLayout.tsx"],"sourcesContent":["/* eslint-disable import/order */\nimport {\n    forwardRef,\n    type PropsWithChildren,\n    type ForwardedRef,\n    type MutableRefObject,\n    type RefAttributes,\n    type ForwardRefExoticComponent,\n} from 'react';\n\nimport ApplicationLayoutHeader from './ApplicationLayoutHeader';\nimport ApplicationLayoutSidebar from './ApplicationLayoutSidebar';\nimport ApplicationLayoutBody from './ApplicationLayoutBody';\nimport { initDocumentBootstrapping } from '../../utils/init/initDocumentBootstrapping';\nimport classNames from '../../utils/classNames';\n\n// initializes document bootstrapping - keep the import to avoid being tree-shaken\n// noinspection JSIgnoredPromiseFromCall\ninitDocumentBootstrapping();\n\nexport type ApplicationLayoutProps = {\n    /**\n     * A React ref function assigned to the wrapper element.\n     */\n    layoutRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutProps>;\n\ntype ApplicationLayoutType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {\n    Header: typeof ApplicationLayoutHeader;\n    Sidebar: typeof ApplicationLayoutSidebar;\n    Body: typeof ApplicationLayoutBody;\n};\n\nconst ApplicationLayout = forwardRef((props: Props, ref: Ref) => {\n    const { className, layoutRef, children, ...remainingProps } = props;\n\n    const classes = classNames('ApplicationLayout', className);\n\n    return (\n        <div {...remainingProps} ref={ref || layoutRef} className={classes}>\n            {children}\n        </div>\n    );\n}) as ApplicationLayoutType;\n\nApplicationLayout.Header = ApplicationLayoutHeader;\nApplicationLayout.Sidebar = ApplicationLayoutSidebar;\nApplicationLayout.Body = ApplicationLayoutBody;\n\nexport default ApplicationLayout;\n"],"names":["initDocumentBootstrapping","ApplicationLayout","forwardRef","props","ref","className","layoutRef","children","remainingProps","classes","classNames","jsx","ApplicationLayoutHeader","ApplicationLayoutSidebar","ApplicationLayoutBody"],"mappings":";;;;;;;AAkBAA,EAAA;AAuBA,MAAMC,IAAoBC,EAAW,CAACC,GAAcC,MAAa;AAC7D,QAAM,EAAE,WAAAC,GAAW,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBL,GAExDM,IAAUC,EAAW,qBAAqBL,CAAS;AAEzD,SACI,gBAAAM,EAAC,SAAK,GAAGH,GAAgB,KAAKJ,KAAOE,GAAW,WAAWG,GACtD,UAAAF,EAAA,CACL;AAER,CAAC;AAEDN,EAAkB,SAASW;AAC3BX,EAAkB,UAAUY;AAC5BZ,EAAkB,OAAOa;"}

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -1,7 +1,7 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import I, { forwardRef as O, useState as x, useRef as h, useImperativeHandle as _, useEffect as T } from "react";
 import { debounce as k } from "es-toolkit/compat";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 import F from "../smoothScrollbars/SmoothScrollbars.js";
 const j = 200, G = 54, Z = O((g, y) => {
   const {
@@ -32,7 +32,7 @@ const j = 200, G = 54, Z = O((g, y) => {
       return;
     const l = o.current.container, f = l.firstElementChild, t = f?.scrollTop ?? 0;
     t > 10 ? (window.requestAnimationFrame(d), f?.scrollTo(0, t - t / 5), l.classList.add("is-scrolling-to-top"), n(t)) : l.classList.remove("is-scrolling-to-top");
-  }, w = a("ApplicationLayoutBody", s && "has-footer", b), v = a(
+  }, w = a("ApplicationLayoutBody", s ? "has-footer" : "", b), v = a(
     "module-content",
     i && i
   ), A = window.innerHeight * 0.1, C = a("scroll-to-top", H > A && "in");

package/components/applicationLayout/ApplicationLayoutBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBody.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBody.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    forwardRef,\n    useImperativeHandle,\n    type PropsWithChildren,\n    type ForwardedRef,\n} from 'react';\nimport { debounce } from 'es-toolkit/compat';\nimport classNames from 'classnames';\n\nimport type Scrollbars from 'react-custom-scrollbars-4';\n\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst RESIZE_THROTTLING = 200;\nconst DEFAULT_BOTTOM_BAR_HEIGHT = 54;\n\nexport type ApplicationLayoutBodyProps = {\n    /**\n     * Show scroll to top button after scrolling the content.\n     *\n     * @default true\n     */\n    enableScrollToTop?: boolean;\n\n    /**\n     * Always show vertical scrollbar to prevent the content from jumping.\n     *\n     * @default true\n     */\n    forceScrollbar?: boolean;\n\n    /**\n     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content\n     * and to reset the scrolling like when the pathname changes from an body internal menu.\n     */\n    scrollResetTrigger?: any;\n\n    /**\n     * The ApplicationLayoutBodyBanner component.\n     */\n    banner?: React.ReactNode;\n\n    /**\n     * The `ApplicationLayoutBodyNavigation` component.\n     */\n    navigation?: React.ReactNode;\n\n    /**\n     * Optional bottom bar component or a simple string.\n     */\n    bottomBar?: React.ReactNode;\n\n    /**\n     * Height of the bottomBar in pixel.\n     *\n     * @default 54\n     */\n    bottomBarHeight?: number;\n\n    /**\n     * Additional class names that are added to the inner module-content component.\n     */\n    innerClassName?: string;\n\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyProps>;\n\nconst ApplicationLayoutBody = forwardRef((props: Props, ref: Ref) => {\n    const {\n        className,\n        innerClassName,\n        forceScrollbar = true,\n        enableScrollToTop = true,\n        banner,\n        navigation,\n        bottomBar,\n        bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT,\n        scrollResetTrigger,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [offset, setOffset] = useState(0);\n    const moduleContentRef = useRef<Scrollbars>(null);\n    const layoutBodyRef = useRef<HTMLDivElement | null>(null);\n\n    // Use imperative handle to expose the internal layout ref. Usually this is used to\n    // expose internal function without exposing the underlying DOM element.\n    // In this case however, we want access to the element to trigger functions like scrollIntoView()\n    useImperativeHandle<HTMLDivElement, any>(ref, () => layoutBodyRef?.current, []);\n\n    // Reset scroll position when children are different. This fixes the issue of\n    // changing body content (like in another route) and still having the same scroll position\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (moduleContentRef.current) {\n            moduleContentRef.current.scrollTop(0);\n            setOffset(0);\n        }\n    }, [scrollResetTrigger]);\n\n    useEffect(() => {\n        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {\n            layoutBodyRef.current.parentNode.style.setProperty(\n                '--ApplicationLayoutBodyBottomBarHeight',\n                `${bottomBarHeight}px`\n            );\n        }\n    }, [bottomBarHeight]);\n\n    const handleScroll = debounce(() => {\n        if (moduleContentRef.current) {\n            setOffset(moduleContentRef.current.getScrollTop());\n        }\n    }, RESIZE_THROTTLING);\n\n    const handleToTop = () => {\n        if (!moduleContentRef.current) {\n            return;\n        }\n\n        const scrollWrapper = moduleContentRef.current.container;\n        const scrollingElement = scrollWrapper.firstElementChild;\n        const currentScroll = scrollingElement?.scrollTop ?? 0;\n        const scrollThreshold = 10;\n\n        if (currentScroll > scrollThreshold) {\n            window.requestAnimationFrame(handleToTop);\n            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);\n            scrollWrapper.classList.add('is-scrolling-to-top');\n            setOffset(currentScroll);\n        } else {\n            scrollWrapper.classList.remove('is-scrolling-to-top');\n        }\n    };\n\n    const classes = classNames('ApplicationLayoutBody', bottomBar && 'has-footer', className);\n\n    const innerClasses = classNames(\n        'module-content',\n\n        innerClassName && innerClassName\n    );\n\n    const offsetThreshold = window.innerHeight * 0.1;\n\n    const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');\n\n    return (\n        <React.Fragment>\n            <div {...remainingProps} ref={layoutBodyRef} className={classes}>\n                <div className='module-content-wrapper'>\n                    {navigation && navigation}\n                    {banner && banner}\n\n                    <SmoothScrollbars\n                        ref={moduleContentRef}\n                        slideIn={!forceScrollbar}\n                        largeTrack\n                        trackOffset\n                        className={innerClasses}\n                        onScroll={handleScroll}\n                    >\n                        <div className='scrollbar-content'>{children}</div>\n                    </SmoothScrollbars>\n                </div>\n\n                {enableScrollToTop && (\n                    <span className={scrollToTopClasses}>\n                        <button type='button' className='btn btn-primary btn-icon-only' onClick={handleToTop}>\n                            <span className='rioglyph rioglyph-arrow-up' />\n                        </button>\n                    </span>\n                )}\n            </div>\n\n            {bottomBar && bottomBar}\n        </React.Fragment>\n    );\n});\n\nexport default ApplicationLayoutBody;\n"],"names":["RESIZE_THROTTLING","DEFAULT_BOTTOM_BAR_HEIGHT","ApplicationLayoutBody","forwardRef","props","ref","className","innerClassName","forceScrollbar","enableScrollToTop","banner","navigation","bottomBar","bottomBarHeight","scrollResetTrigger","children","remainingProps","offset","setOffset","useState","moduleContentRef","useRef","layoutBodyRef","useImperativeHandle","useEffect","handleScroll","debounce","handleToTop","scrollWrapper","scrollingElement","currentScroll","classes","classNames","innerClasses","offsetThreshold","scrollToTopClasses","jsxs","React","jsx","SmoothScrollbars"],"mappings":";;;;;AAgBA,MAAMA,IAAoB,KACpBC,IAA4B,IA2D5BC,IAAwBC,EAAW,CAACC,GAAcC,MAAa;AACjE,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,mBAAAC,IAAoB;AAAA,IACpB,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC,IAAkBZ;AAAA,IAClB,oBAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAS,CAAC,GAChCC,IAAmBC,EAAmB,IAAI,GAC1CC,IAAgBD,EAA8B,IAAI;AAKxD,EAAAE,EAAyClB,GAAK,MAAMiB,GAAe,SAAS,CAAA,CAAE,GAK9EE,EAAU,MAAM;AACZ,IAAIJ,EAAiB,YACjBA,EAAiB,QAAQ,UAAU,CAAC,GACpCF,EAAU,CAAC;AAAA,EAEnB,GAAG,CAACJ,CAAkB,CAAC,GAEvBU,EAAU,MAAM;AACZ,IAAIF,EAAc,SAAS,sBAAsB,eAC7CA,EAAc,QAAQ,WAAW,MAAM;AAAA,MACnC;AAAA,MACA,GAAGT,CAAe;AAAA,IAAA;AAAA,EAG9B,GAAG,CAACA,CAAe,CAAC;AAEpB,QAAMY,IAAeC,EAAS,MAAM;AAChC,IAAIN,EAAiB,WACjBF,EAAUE,EAAiB,QAAQ,cAAc;AAAA,EAEzD,GAAGpB,CAAiB,GAEd2B,IAAc,MAAM;AACtB,QAAI,CAACP,EAAiB;AAClB;AAGJ,UAAMQ,IAAgBR,EAAiB,QAAQ,WACzCS,IAAmBD,EAAc,mBACjCE,IAAgBD,GAAkB,aAAa;AAGrD,IAAIC,IAFoB,MAGpB,OAAO,sBAAsBH,CAAW,GACxCE,GAAkB,SAAS,GAAGC,IAAgBA,IAAgB,CAAC,GAC/DF,EAAc,UAAU,IAAI,qBAAqB,GACjDV,EAAUY,CAAa,KAEvBF,EAAc,UAAU,OAAO,qBAAqB;AAAA,EAE5D,GAEMG,IAAUC,EAAW,yBAAyBpB,KAAa,cAAcN,CAAS,GAElF2B,IAAeD;AAAA,IACjB;AAAA,IAEAzB,KAAkBA;AAAA,EAAA,GAGhB2B,IAAkB,OAAO,cAAc,KAEvCC,IAAqBH,EAAW,iBAAiBf,IAASiB,KAAmB,IAAI;AAEvF,SACI,gBAAAE,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,SAAK,GAAGpB,GAAgB,KAAKM,GAAe,WAAWS,GACpD,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,QAAAzB,KAAcA;AAAA,QACdD,KAAUA;AAAA,QAEX,gBAAA4B;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,KAAKnB;AAAA,YACL,SAAS,CAACZ;AAAA,YACV,YAAU;AAAA,YACV,aAAW;AAAA,YACX,WAAWyB;AAAA,YACX,UAAUR;AAAA,YAEV,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAvB,EAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACjD,GACJ;AAAA,MAECN,KACG,gBAAA6B,EAAC,QAAA,EAAK,WAAWH,GACb,UAAA,gBAAAG,EAAC,YAAO,MAAK,UAAS,WAAU,iCAAgC,SAASX,GACrE,UAAA,gBAAAW,EAAC,UAAK,WAAU,8BAA6B,GACjD,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,IAEC1B,KAAaA;AAAA,EAAA,GAClB;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutBody.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBody.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    forwardRef,\n    useImperativeHandle,\n    type PropsWithChildren,\n    type ForwardedRef,\n} from 'react';\nimport { debounce } from 'es-toolkit/compat';\n\nimport type Scrollbars from 'react-custom-scrollbars-4';\n\nimport classNames from '../../utils/classNames';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst RESIZE_THROTTLING = 200;\nconst DEFAULT_BOTTOM_BAR_HEIGHT = 54;\n\nexport type ApplicationLayoutBodyProps = {\n    /**\n     * Show scroll to top button after scrolling the content.\n     *\n     * @default true\n     */\n    enableScrollToTop?: boolean;\n\n    /**\n     * Always show vertical scrollbar to prevent the content from jumping.\n     *\n     * @default true\n     */\n    forceScrollbar?: boolean;\n\n    /**\n     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content\n     * and to reset the scrolling like when the pathname changes from an body internal menu.\n     */\n    scrollResetTrigger?: any;\n\n    /**\n     * The ApplicationLayoutBodyBanner component.\n     */\n    banner?: React.ReactNode;\n\n    /**\n     * The `ApplicationLayoutBodyNavigation` component.\n     */\n    navigation?: React.ReactNode;\n\n    /**\n     * Optional bottom bar component or a simple string.\n     */\n    bottomBar?: React.ReactNode;\n\n    /**\n     * Height of the bottomBar in pixel.\n     *\n     * @default 54\n     */\n    bottomBarHeight?: number;\n\n    /**\n     * Additional class names that are added to the inner module-content component.\n     */\n    innerClassName?: string;\n\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyProps>;\n\nconst ApplicationLayoutBody = forwardRef((props: Props, ref: Ref) => {\n    const {\n        className,\n        innerClassName,\n        forceScrollbar = true,\n        enableScrollToTop = true,\n        banner,\n        navigation,\n        bottomBar,\n        bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT,\n        scrollResetTrigger,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [offset, setOffset] = useState(0);\n    const moduleContentRef = useRef<Scrollbars>(null);\n    const layoutBodyRef = useRef<HTMLDivElement | null>(null);\n\n    // Use imperative handle to expose the internal layout ref. Usually this is used to\n    // expose internal function without exposing the underlying DOM element.\n    // In this case however, we want access to the element to trigger functions like scrollIntoView()\n    useImperativeHandle<HTMLDivElement, any>(ref, () => layoutBodyRef?.current, []);\n\n    // Reset scroll position when children are different. This fixes the issue of\n    // changing body content (like in another route) and still having the same scroll position\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (moduleContentRef.current) {\n            moduleContentRef.current.scrollTop(0);\n            setOffset(0);\n        }\n    }, [scrollResetTrigger]);\n\n    useEffect(() => {\n        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {\n            layoutBodyRef.current.parentNode.style.setProperty(\n                '--ApplicationLayoutBodyBottomBarHeight',\n                `${bottomBarHeight}px`\n            );\n        }\n    }, [bottomBarHeight]);\n\n    const handleScroll = debounce(() => {\n        if (moduleContentRef.current) {\n            setOffset(moduleContentRef.current.getScrollTop());\n        }\n    }, RESIZE_THROTTLING);\n\n    const handleToTop = () => {\n        if (!moduleContentRef.current) {\n            return;\n        }\n\n        const scrollWrapper = moduleContentRef.current.container;\n        const scrollingElement = scrollWrapper.firstElementChild;\n        const currentScroll = scrollingElement?.scrollTop ?? 0;\n        const scrollThreshold = 10;\n\n        if (currentScroll > scrollThreshold) {\n            window.requestAnimationFrame(handleToTop);\n            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);\n            scrollWrapper.classList.add('is-scrolling-to-top');\n            setOffset(currentScroll);\n        } else {\n            scrollWrapper.classList.remove('is-scrolling-to-top');\n        }\n    };\n\n    const classes = classNames('ApplicationLayoutBody', bottomBar ? 'has-footer' : '', className);\n\n    const innerClasses = classNames(\n        'module-content',\n\n        innerClassName && innerClassName\n    );\n\n    const offsetThreshold = window.innerHeight * 0.1;\n\n    const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');\n\n    return (\n        <React.Fragment>\n            <div {...remainingProps} ref={layoutBodyRef} className={classes}>\n                <div className='module-content-wrapper'>\n                    {navigation && navigation}\n                    {banner && banner}\n\n                    <SmoothScrollbars\n                        ref={moduleContentRef}\n                        slideIn={!forceScrollbar}\n                        largeTrack\n                        trackOffset\n                        className={innerClasses}\n                        onScroll={handleScroll}\n                    >\n                        <div className='scrollbar-content'>{children}</div>\n                    </SmoothScrollbars>\n                </div>\n\n                {enableScrollToTop && (\n                    <span className={scrollToTopClasses}>\n                        <button type='button' className='btn btn-primary btn-icon-only' onClick={handleToTop}>\n                            <span className='rioglyph rioglyph-arrow-up' />\n                        </button>\n                    </span>\n                )}\n            </div>\n\n            {bottomBar && bottomBar}\n        </React.Fragment>\n    );\n});\n\nexport default ApplicationLayoutBody;\n"],"names":["RESIZE_THROTTLING","DEFAULT_BOTTOM_BAR_HEIGHT","ApplicationLayoutBody","forwardRef","props","ref","className","innerClassName","forceScrollbar","enableScrollToTop","banner","navigation","bottomBar","bottomBarHeight","scrollResetTrigger","children","remainingProps","offset","setOffset","useState","moduleContentRef","useRef","layoutBodyRef","useImperativeHandle","useEffect","handleScroll","debounce","handleToTop","scrollWrapper","scrollingElement","currentScroll","classes","classNames","innerClasses","offsetThreshold","scrollToTopClasses","jsxs","React","jsx","SmoothScrollbars"],"mappings":";;;;;AAgBA,MAAMA,IAAoB,KACpBC,IAA4B,IA2D5BC,IAAwBC,EAAW,CAACC,GAAcC,MAAa;AACjE,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,mBAAAC,IAAoB;AAAA,IACpB,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC,IAAkBZ;AAAA,IAClB,oBAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAS,CAAC,GAChCC,IAAmBC,EAAmB,IAAI,GAC1CC,IAAgBD,EAA8B,IAAI;AAKxD,EAAAE,EAAyClB,GAAK,MAAMiB,GAAe,SAAS,CAAA,CAAE,GAK9EE,EAAU,MAAM;AACZ,IAAIJ,EAAiB,YACjBA,EAAiB,QAAQ,UAAU,CAAC,GACpCF,EAAU,CAAC;AAAA,EAEnB,GAAG,CAACJ,CAAkB,CAAC,GAEvBU,EAAU,MAAM;AACZ,IAAIF,EAAc,SAAS,sBAAsB,eAC7CA,EAAc,QAAQ,WAAW,MAAM;AAAA,MACnC;AAAA,MACA,GAAGT,CAAe;AAAA,IAAA;AAAA,EAG9B,GAAG,CAACA,CAAe,CAAC;AAEpB,QAAMY,IAAeC,EAAS,MAAM;AAChC,IAAIN,EAAiB,WACjBF,EAAUE,EAAiB,QAAQ,cAAc;AAAA,EAEzD,GAAGpB,CAAiB,GAEd2B,IAAc,MAAM;AACtB,QAAI,CAACP,EAAiB;AAClB;AAGJ,UAAMQ,IAAgBR,EAAiB,QAAQ,WACzCS,IAAmBD,EAAc,mBACjCE,IAAgBD,GAAkB,aAAa;AAGrD,IAAIC,IAFoB,MAGpB,OAAO,sBAAsBH,CAAW,GACxCE,GAAkB,SAAS,GAAGC,IAAgBA,IAAgB,CAAC,GAC/DF,EAAc,UAAU,IAAI,qBAAqB,GACjDV,EAAUY,CAAa,KAEvBF,EAAc,UAAU,OAAO,qBAAqB;AAAA,EAE5D,GAEMG,IAAUC,EAAW,yBAAyBpB,IAAY,eAAe,IAAIN,CAAS,GAEtF2B,IAAeD;AAAA,IACjB;AAAA,IAEAzB,KAAkBA;AAAA,EAAA,GAGhB2B,IAAkB,OAAO,cAAc,KAEvCC,IAAqBH,EAAW,iBAAiBf,IAASiB,KAAmB,IAAI;AAEvF,SACI,gBAAAE,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,SAAK,GAAGpB,GAAgB,KAAKM,GAAe,WAAWS,GACpD,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,QAAAzB,KAAcA;AAAA,QACdD,KAAUA;AAAA,QAEX,gBAAA4B;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,KAAKnB;AAAA,YACL,SAAS,CAACZ;AAAA,YACV,YAAU;AAAA,YACV,aAAW;AAAA,YACX,WAAWyB;AAAA,YACX,UAAUR;AAAA,YAEV,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAvB,EAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACjD,GACJ;AAAA,MAECN,KACG,gBAAA6B,EAAC,QAAA,EAAK,WAAWH,GACb,UAAA,gBAAAG,EAAC,YAAO,MAAK,UAAS,WAAU,iCAAgC,SAASX,GACrE,UAAA,gBAAAW,EAAC,UAAK,WAAU,8BAA6B,GACjD,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,IAEC1B,KAAaA;AAAA,EAAA,GAClB;AAER,CAAC;"}

package/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -1,6 +1,6 @@
 import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
-import m from "classnames";
+import m from "../../utils/classNames.js";
 const d = "text-color-white", y = "bg-primary", L = l((o, t) => {
   const {
     textColor: r = d,

package/components/applicationLayout/ApplicationLayoutBodyBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBodyBanner.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyBanner.tsx"],"sourcesContent":["import { type PropsWithChildren, type ForwardedRef, forwardRef } from 'react';\nimport classNames from 'classnames';\n\nconst DEFAULT_TEXT_COLOR = 'text-color-white';\nconst DEFAULT_BACKGROUND_COLOR = 'bg-primary';\n\nexport type ApplicationLayoutBodyBannerProps = {\n    /**\n     * One of the `text-color` utility classes.\n     * @default `text-color-white`\n     */\n    textColor?: string;\n    /**\n     * One of the `bg-color` utility classes.\n     * @default `bg-primary`\n     */\n    backgroundColor?: string;\n    /**\n     * Allows sticky banner while scrolling.\n     * @default false\n     */\n    isSticky?: boolean;\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyBannerProps>;\n\nconst ApplicationLayoutBodyBanner = forwardRef((props: Props, ref: Ref) => {\n    const {\n        textColor = DEFAULT_TEXT_COLOR,\n        backgroundColor = DEFAULT_BACKGROUND_COLOR,\n        isSticky = true,\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const bannerClasses = classNames(\n        'ApplicationLayoutBodyBanner',\n        textColor,\n        backgroundColor,\n        isSticky && 'position-sticky top-0 z-index-3',\n        className\n    );\n\n    return (\n        <div {...remainingProps} ref={ref} className={bannerClasses}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutBodyBanner;\n"],"names":["DEFAULT_TEXT_COLOR","DEFAULT_BACKGROUND_COLOR","ApplicationLayoutBodyBanner","forwardRef","props","ref","textColor","backgroundColor","isSticky","className","children","remainingProps","bannerClasses","classNames"],"mappings":";;;AAGA,MAAMA,IAAqB,oBACrBC,IAA2B,cA2B3BC,IAA8BC,EAAW,CAACC,GAAcC,MAAa;AACvE,QAAM;AAAA,IACF,WAAAC,IAAYN;AAAA,IACZ,iBAAAO,IAAkBN;AAAA,IAClB,UAAAO,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP,GAEEQ,IAAgBC;AAAA,IAClB;AAAA,IACAP;AAAA,IACAC;AAAA,IACAC,KAAY;AAAA,IACZC;AAAA,EAAA;AAGJ,2BACK,OAAA,EAAK,GAAGE,GAAgB,KAAAN,GAAU,WAAWO,GACzC,UAAAF,GACL;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutBodyBanner.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyBanner.tsx"],"sourcesContent":["import { type PropsWithChildren, type ForwardedRef, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst DEFAULT_TEXT_COLOR = 'text-color-white';\nconst DEFAULT_BACKGROUND_COLOR = 'bg-primary';\n\nexport type ApplicationLayoutBodyBannerProps = {\n    /**\n     * One of the `text-color` utility classes.\n     * @default `text-color-white`\n     */\n    textColor?: string;\n    /**\n     * One of the `bg-color` utility classes.\n     * @default `bg-primary`\n     */\n    backgroundColor?: string;\n    /**\n     * Allows sticky banner while scrolling.\n     * @default false\n     */\n    isSticky?: boolean;\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyBannerProps>;\n\nconst ApplicationLayoutBodyBanner = forwardRef((props: Props, ref: Ref) => {\n    const {\n        textColor = DEFAULT_TEXT_COLOR,\n        backgroundColor = DEFAULT_BACKGROUND_COLOR,\n        isSticky = true,\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const bannerClasses = classNames(\n        'ApplicationLayoutBodyBanner',\n        textColor,\n        backgroundColor,\n        isSticky && 'position-sticky top-0 z-index-3',\n        className\n    );\n\n    return (\n        <div {...remainingProps} ref={ref} className={bannerClasses}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutBodyBanner;\n"],"names":["DEFAULT_TEXT_COLOR","DEFAULT_BACKGROUND_COLOR","ApplicationLayoutBodyBanner","forwardRef","props","ref","textColor","backgroundColor","isSticky","className","children","remainingProps","bannerClasses","classNames"],"mappings":";;;AAIA,MAAMA,IAAqB,oBACrBC,IAA2B,cA2B3BC,IAA8BC,EAAW,CAACC,GAAcC,MAAa;AACvE,QAAM;AAAA,IACF,WAAAC,IAAYN;AAAA,IACZ,iBAAAO,IAAkBN;AAAA,IAClB,UAAAO,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP,GAEEQ,IAAgBC;AAAA,IAClB;AAAA,IACAP;AAAA,IACAC;AAAA,IACAC,KAAY;AAAA,IACZC;AAAA,EAAA;AAGJ,2BACK,OAAA,EAAK,GAAGE,GAAgB,KAAAN,GAAU,WAAWO,GACzC,UAAAF,GACL;AAER,CAAC;"}

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import l from "classnames";
+import l from "../../utils/classNames.js";
 const e = f((s, n) => {
   const { className: o, buttonAlignment: t, useBodyPaddings: a = !1, children: i, ...r } = s, c = l(
     "ApplicationLayoutBodyBottomBar",

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBodyBottomBar.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyBottomBar.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type PropsWithChildren,\n    type ForwardedRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n} from 'react';\nimport classNames from 'classnames';\n\ntype ButtonAlignmentLeft = 'left';\ntype ButtonAlignmentRight = 'right';\n\nexport type ApplicationLayoutBodyBottomBarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n    /**\n     * Use same paddings (left and right) as the ApplicationLayoutBody.\n     * @default false\n     */\n    useBodyPaddings?: boolean;\n    /**\n     * Tells the buttons if they are left or right aligned.\n     * Default behavior is: 1st button left and 2nd button right.\n     *\n     * Possible values are:\n     * `ApplicationLayoutBodyBottomBar.LEFT`, `ApplicationLayoutBodyBottomBar.RIGHT` or\n     * `left`, `right`\n     */\n    buttonAlignment?: ButtonAlignmentLeft | ButtonAlignmentRight;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyBottomBarProps>;\n\ntype ApplicationLayoutBodyBottomBarType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {\n    LEFT: ButtonAlignmentLeft;\n    RIGHT: ButtonAlignmentRight;\n};\n\nconst ApplicationLayoutBodyBottomBar = forwardRef((props: Props, ref: Ref) => {\n    const { className, buttonAlignment, useBodyPaddings = false, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        'ApplicationLayoutBodyBottomBar',\n        buttonAlignment === 'left' && 'justify-content-start',\n        buttonAlignment === 'right' && 'justify-content-end',\n        buttonAlignment !== 'left' && buttonAlignment !== 'right' && 'justify-content-between',\n        useBodyPaddings && 'use-body-padding',\n        className && className\n    );\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n}) as ApplicationLayoutBodyBottomBarType;\n\nApplicationLayoutBodyBottomBar.LEFT = 'left';\nApplicationLayoutBodyBottomBar.RIGHT = 'right';\n\nexport default ApplicationLayoutBodyBottomBar;\n"],"names":["ApplicationLayoutBodyBottomBar","forwardRef","props","ref","className","buttonAlignment","useBodyPaddings","children","remainingProps","classes","classNames"],"mappings":";;;AAyCA,MAAMA,IAAiCC,EAAW,CAACC,GAAcC,MAAa;AAC1E,QAAM,EAAE,WAAAC,GAAW,iBAAAC,GAAiB,iBAAAC,IAAkB,IAAO,UAAAC,GAAU,GAAGC,MAAmBN,GAEvFO,IAAUC;AAAA,IACZ;AAAA,IACAL,MAAoB,UAAU;AAAA,IAC9BA,MAAoB,WAAW;AAAA,IAC/BA,MAAoB,UAAUA,MAAoB,WAAW;AAAA,IAC7DC,KAAmB;AAAA,IACnBF,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGK,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;AAEDP,EAA+B,OAAO;AACtCA,EAA+B,QAAQ;"}
+{"version":3,"file":"ApplicationLayoutBodyBottomBar.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyBottomBar.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type PropsWithChildren,\n    type ForwardedRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\n\ntype ButtonAlignmentLeft = 'left';\ntype ButtonAlignmentRight = 'right';\n\nexport type ApplicationLayoutBodyBottomBarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n    /**\n     * Use same paddings (left and right) as the ApplicationLayoutBody.\n     * @default false\n     */\n    useBodyPaddings?: boolean;\n    /**\n     * Tells the buttons if they are left or right aligned.\n     * Default behavior is: 1st button left and 2nd button right.\n     *\n     * Possible values are:\n     * `ApplicationLayoutBodyBottomBar.LEFT`, `ApplicationLayoutBodyBottomBar.RIGHT` or\n     * `left`, `right`\n     */\n    buttonAlignment?: ButtonAlignmentLeft | ButtonAlignmentRight;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyBottomBarProps>;\n\ntype ApplicationLayoutBodyBottomBarType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {\n    LEFT: ButtonAlignmentLeft;\n    RIGHT: ButtonAlignmentRight;\n};\n\nconst ApplicationLayoutBodyBottomBar = forwardRef((props: Props, ref: Ref) => {\n    const { className, buttonAlignment, useBodyPaddings = false, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        'ApplicationLayoutBodyBottomBar',\n        buttonAlignment === 'left' && 'justify-content-start',\n        buttonAlignment === 'right' && 'justify-content-end',\n        buttonAlignment !== 'left' && buttonAlignment !== 'right' && 'justify-content-between',\n        useBodyPaddings && 'use-body-padding',\n        className && className\n    );\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n}) as ApplicationLayoutBodyBottomBarType;\n\nApplicationLayoutBodyBottomBar.LEFT = 'left';\nApplicationLayoutBodyBottomBar.RIGHT = 'right';\n\nexport default ApplicationLayoutBodyBottomBar;\n"],"names":["ApplicationLayoutBodyBottomBar","forwardRef","props","ref","className","buttonAlignment","useBodyPaddings","children","remainingProps","classes","classNames"],"mappings":";;;AA0CA,MAAMA,IAAiCC,EAAW,CAACC,GAAcC,MAAa;AAC1E,QAAM,EAAE,WAAAC,GAAW,iBAAAC,GAAiB,iBAAAC,IAAkB,IAAO,UAAAC,GAAU,GAAGC,MAAmBN,GAEvFO,IAAUC;AAAA,IACZ;AAAA,IACAL,MAAoB,UAAU;AAAA,IAC9BA,MAAoB,WAAW;AAAA,IAC/BA,MAAoB,UAAUA,MAAoB,WAAW;AAAA,IAC7DC,KAAmB;AAAA,IACnBF,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGK,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;AAEDP,EAA+B,OAAO;AACtCA,EAA+B,QAAQ;"}

package/components/applicationLayout/ApplicationLayoutBodyNavigation.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as e } from "react";
-import m from "classnames";
+import m from "../../utils/classNames.js";
 const d = e((a, o) => {
   const { className: i, children: s, ...t } = a, r = m("ApplicationLayoutBodyNavigation", i);
   return /* @__PURE__ */ n("div", { ref: o, ...t, className: r, children: s });

package/components/applicationLayout/ApplicationLayoutBodyNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBodyNavigation.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyNavigation.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\nimport classNames from 'classnames';\n\nexport type ApplicationLayoutBodyNavigationProps = {\n    /**\n     * Additional class names that are added to the respective component. Example: `has-offset`.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyNavigationProps>;\n\nconst ApplicationLayoutBodyNavigation = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const navigationClasses = classNames('ApplicationLayoutBodyNavigation', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutBodyNavigation;\n"],"names":["ApplicationLayoutBodyNavigation","forwardRef","props","ref","className","children","remainingProps","navigationClasses","classNames"],"mappings":";;;AAaA,MAAMA,IAAkCC,EAAW,CAACC,GAAcC,MAAa;AAC3E,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAoBC,EAAW,mCAAmCJ,CAAS;AAEjF,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGG,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutBodyNavigation.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyNavigation.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutBodyNavigationProps = {\n    /**\n     * Additional class names that are added to the respective component. Example: `has-offset`.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyNavigationProps>;\n\nconst ApplicationLayoutBodyNavigation = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const navigationClasses = classNames('ApplicationLayoutBodyNavigation', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutBodyNavigation;\n"],"names":["ApplicationLayoutBodyNavigation","forwardRef","props","ref","className","children","remainingProps","navigationClasses","classNames"],"mappings":";;;AAcA,MAAMA,IAAkCC,EAAW,CAACC,GAAcC,MAAa;AAC3E,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAoBC,EAAW,mCAAmCJ,CAAS;AAEjF,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGG,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;"}

package/components/applicationLayout/ApplicationLayoutHeader.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import p from "classnames";
+import p from "../../utils/classNames.js";
 const d = c((a, o) => {
   const { className: r, children: e, ...s } = a, t = p("ApplicationLayoutHeader", r);
   return /* @__PURE__ */ i("div", { ref: o, ...s, className: t, id: "ApplicationLayoutHeader", children: e });

package/components/applicationLayout/ApplicationLayoutHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutHeader.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutHeader.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\nimport classNames from 'classnames';\n\nexport type ApplicationLayoutHeaderProps = {\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutHeaderProps>;\n\nconst ApplicationLayoutHeader = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const classes = classNames('ApplicationLayoutHeader', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes} id='ApplicationLayoutHeader'>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutHeader;\n"],"names":["ApplicationLayoutHeader","forwardRef","props","ref","className","children","remainingProps","classes","classNames","jsx"],"mappings":";;;AAaA,MAAMA,IAA0BC,EAAW,CAACC,GAAcC,MAAa;AACnE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAUC,EAAW,2BAA2BJ,CAAS;AAE/D,SACI,gBAAAK,EAAC,SAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAAS,IAAG,2BACrD,UAAAF,EAAA,CACL;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutHeader.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutHeader.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutHeaderProps = {\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutHeaderProps>;\n\nconst ApplicationLayoutHeader = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const classes = classNames('ApplicationLayoutHeader', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes} id='ApplicationLayoutHeader'>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutHeader;\n"],"names":["ApplicationLayoutHeader","forwardRef","props","ref","className","children","remainingProps","classes","classNames","jsx"],"mappings":";;;AAcA,MAAMA,IAA0BC,EAAW,CAACC,GAAcC,MAAa;AACnE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAUC,EAAW,2BAA2BJ,CAAS;AAE/D,SACI,gBAAAK,EAAC,SAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAAS,IAAG,2BACrD,UAAAF,EAAA,CACL;AAER,CAAC;"}

package/components/applicationLayout/ApplicationLayoutSidebar.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import m from "classnames";
+import m from "../../utils/classNames.js";
 const d = c((a, o) => {
   const { className: r, children: s, ...i } = a, t = m("ApplicationLayoutSidebar", r);
   return /* @__PURE__ */ e("div", { ref: o, ...i, className: t, children: s });

package/components/applicationLayout/ApplicationLayoutSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutSidebar.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutSidebar.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\nimport classNames from 'classnames';\n\nexport type ApplicationLayoutSidebarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutSidebarProps>;\n\nconst ApplicationLayoutSidebar = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n    const classes = classNames('ApplicationLayoutSidebar', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutSidebar;\n"],"names":["ApplicationLayoutSidebar","forwardRef","props","ref","className","children","remainingProps","classes","classNames"],"mappings":";;;AAaA,MAAMA,IAA2BC,EAAW,CAACC,GAAcC,MAAa;AACpE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAC7CK,IAAUC,EAAW,4BAA4BJ,CAAS;AAEhE,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGG,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutSidebar.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutSidebar.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutSidebarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutSidebarProps>;\n\nconst ApplicationLayoutSidebar = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n    const classes = classNames('ApplicationLayoutSidebar', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutSidebar;\n"],"names":["ApplicationLayoutSidebar","forwardRef","props","ref","className","children","remainingProps","classes","classNames"],"mappings":";;;AAcA,MAAMA,IAA2BC,EAAW,CAACC,GAAcC,MAAa;AACpE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAC7CK,IAAUC,EAAW,4BAA4BJ,CAAS;AAEhE,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGG,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;"}

package/components/applicationLayout/SubNavigation.d.ts

@@ -1,6 +1,13 @@
 import { ModulePropType } from '../applicationHeader/ApplicationHeader';
 export type SubNavigationProps = {
+    /**
+     * List of navigation items with key and route prop.
+     * The route prop is a react-router NavLink component with an `active` style.
+     */
     navItems?: ModulePropType[];
+    /**
+     * Additional classes for the wrapper element.
+     */
     className?: string;
 };
 declare const SubNavigation: import('react').ForwardRefExoticComponent<SubNavigationProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/applicationLayout/SubNavigation.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import n from "classnames";
+import n from "../../utils/classNames.js";
 const N = m((s, e) => {
   const { className: i, navItems: r = [], ...t } = s, l = n("SubNavigation", "width-100pct overflow-auto", i);
   return /* @__PURE__ */ o("div", { ref: e, ...t, className: l, children: /* @__PURE__ */ o("ul", { className: "SubmoduleNavigation nav", children: r.map((a) => /* @__PURE__ */ o("li", { className: "submodule", "data-nav-item-key": a.key, children: a.route }, a.key)) }) });

package/components/applicationLayout/SubNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubNavigation.js","sources":["../../../src/components/applicationLayout/SubNavigation.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef } from 'react';\nimport classNames from 'classnames';\n\nimport type { ModulePropType } from '../applicationHeader/ApplicationHeader';\n\nexport type SubNavigationProps = {\n    navItems?: ModulePropType[];\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\n\nconst SubNavigation = forwardRef((props: SubNavigationProps, ref: Ref) => {\n    const { className, navItems = [], ...remainingProps } = props;\n\n    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <ul className='SubmoduleNavigation nav'>\n                {navItems.map(navItem => (\n                    <li className='submodule' key={navItem.key} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n});\n\nexport default SubNavigation;\n"],"names":["SubNavigation","forwardRef","props","ref","className","navItems","remainingProps","navigationClasses","classNames","jsx","navItem"],"mappings":";;;AAYA,MAAMA,IAAgBC,EAAW,CAACC,GAA2BC,MAAa;AACtE,QAAM,EAAE,WAAAC,GAAW,UAAAC,IAAW,CAAA,GAAI,GAAGC,MAAmBJ,GAElDK,IAAoBC,EAAW,iBAAiB,8BAA8BJ,CAAS;AAE7F,SACI,gBAAAK,EAAC,OAAA,EAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAC1C,UAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,2BACT,UAAAJ,EAAS,IAAI,CAAAK,MACV,gBAAAD,EAAC,MAAA,EAAG,WAAU,aAA8B,qBAAmBC,EAAQ,KAClE,UAAAA,EAAQ,SADkBA,EAAQ,GAEvC,CACH,EAAA,CACL,GACJ;AAER,CAAC;"}
+{"version":3,"file":"SubNavigation.js","sources":["../../../src/components/applicationLayout/SubNavigation.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nimport type { ModulePropType } from '../applicationHeader/ApplicationHeader';\n\nexport type SubNavigationProps = {\n    /**\n     * List of navigation items with key and route prop.\n     * The route prop is a react-router NavLink component with an `active` style.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\n\nconst SubNavigation = forwardRef((props: SubNavigationProps, ref: Ref) => {\n    const { className, navItems = [], ...remainingProps } = props;\n\n    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <ul className='SubmoduleNavigation nav'>\n                {navItems.map(navItem => (\n                    <li className='submodule' key={navItem.key} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n});\n\nexport default SubNavigation;\n"],"names":["SubNavigation","forwardRef","props","ref","className","navItems","remainingProps","navigationClasses","classNames","jsx","navItem"],"mappings":";;;AAqBA,MAAMA,IAAgBC,EAAW,CAACC,GAA2BC,MAAa;AACtE,QAAM,EAAE,WAAAC,GAAW,UAAAC,IAAW,CAAA,GAAI,GAAGC,MAAmBJ,GAElDK,IAAoBC,EAAW,iBAAiB,8BAA8BJ,CAAS;AAE7F,SACI,gBAAAK,EAAC,OAAA,EAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAC1C,UAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,2BACT,UAAAJ,EAAS,IAAI,CAAAK,MACV,gBAAAD,EAAC,MAAA,EAAG,WAAU,aAA8B,qBAAmBC,EAAQ,KAClE,UAAAA,EAAQ,SADkBA,EAAQ,GAEvC,CACH,EAAA,CACL,GACJ;AAER,CAAC;"}