@rio-cloud/rio-uikit 2.5.0 → 3.0.0-beta.1

package/components/applicationHeader/MobileAppMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileAppMenu.js","sources":["../../../src/components/applicationHeader/MobileAppMenu.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { isNil } from 'es-toolkit/compat';\n\nimport MobileHeaderModal from './MobileHeaderModal';\nimport type { ModulePropType } from './ApplicationHeader';\n\nexport type MobileAppMenuProps = {\n    homeRoute: React.ReactNode;\n    showHomeIcon: boolean;\n    appMenuItems?: ModulePropType[];\n    appNavigator?: React.ReactNode;\n    onToggleAppMenu: (isShown: boolean) => void;\n};\n\nconst MobileAppMenu = (props: MobileAppMenuProps) => {\n    const { appMenuItems, appNavigator, showHomeIcon, homeRoute, onToggleAppMenu } = props;\n\n    const [isShown, setIsShown] = useState(false);\n\n    const handleToggleNavigation = () => {\n        const newState = !isShown;\n        setIsShown(newState);\n        onToggleAppMenu(newState);\n    };\n\n    const hasAppContent = !(isNil(appMenuItems) && isNil(appNavigator));\n\n    return (\n        <React.Fragment>\n            <div\n                className={\n                    'navbar-header min-width-50 padding-5 ' +\n                    'overflow-hidden position-relative display-flex align-items-center'\n                }\n                onClick={handleToggleNavigation}\n            >\n                <span className={`navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}`}>\n                    {!hasAppContent && homeRoute}\n                </span>\n                {hasAppContent && (\n                    <div className='position-absolute right-2 bottom-0 text-color-white rotate-45'>\n                        <span className='rioglyph rioglyph-triangle-right' />\n                    </div>\n                )}\n            </div>\n            {appNavigator && (\n                <MobileHeaderModal show={isShown} modalClassName='padding-top-25' onClose={handleToggleNavigation}>\n                    <div className='width-100pct height-100pct'>{appNavigator}</div>\n                </MobileHeaderModal>\n            )}\n            {appMenuItems && (\n                <MobileHeaderModal show={isShown} modalClassName='padding-15' onClose={handleToggleNavigation}>\n                    {appMenuItems.map(module => (\n                        <li role='presentation' key={`link-icon-${module.key}`}>\n                            {module.route}\n                        </li>\n                    ))}\n                </MobileHeaderModal>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default MobileAppMenu;\n"],"names":["MobileAppMenu","props","appMenuItems","appNavigator","showHomeIcon","homeRoute","onToggleAppMenu","isShown","setIsShown","useState","handleToggleNavigation","newState","hasAppContent","isNil","jsxs","React","jsx","MobileHeaderModal","module"],"mappings":";;;;AAcA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,cAAAC,GAAc,cAAAC,GAAc,cAAAC,GAAc,WAAAC,GAAW,iBAAAC,MAAoBL,GAE3E,CAACM,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAyB,MAAM;AACjC,UAAMC,IAAW,CAACJ;AAClB,IAAAC,EAAWG,CAAQ,GACnBL,EAAgBK,CAAQ;AAAA,EAC5B,GAEMC,IAAgB,EAAEC,EAAMX,CAAY,KAAKW,EAAMV,CAAY;AAEjE,SACI,gBAAAW,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WACI;AAAA,QAGJ,SAASJ;AAAA,QAET,UAAA;AAAA,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAW,mCAAmCZ,IAAe,cAAc,EAAE,IAC9E,UAAA,CAACQ,KAAiBP,EAAA,CACvB;AAAA,UACCO,uBACI,OAAA,EAAI,WAAU,iEACX,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,mCAAA,CAAmC,EAAA,CACvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGPb,KACG,gBAAAa,EAACC,GAAA,EAAkB,MAAMV,GAAS,gBAAe,kBAAiB,SAASG,GACvE,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BAA8B,aAAa,GAC9D;AAAA,IAEHd,uBACIe,GAAA,EAAkB,MAAMV,GAAS,gBAAe,cAAa,SAASG,GAClE,UAAAR,EAAa,IAAI,OACd,gBAAAc,EAAC,MAAA,EAAG,MAAK,gBACJ,UAAAE,EAAO,MAAA,GADiB,aAAaA,EAAO,GAAG,EAEpD,CACH,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"MobileAppMenu.js","names":[],"sources":["../../../src/components/applicationHeader/MobileAppMenu.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { isNil } from 'es-toolkit/compat';\n\nimport MobileHeaderModal from './MobileHeaderModal';\nimport type { ModulePropType } from './ApplicationHeader';\n\nexport type MobileAppMenuProps = {\n    homeRoute: React.ReactNode;\n    showHomeIcon: boolean;\n    appMenuItems?: ModulePropType[];\n    appNavigator?: React.ReactNode;\n    onToggleAppMenu: (isShown: boolean) => void;\n};\n\nconst MobileAppMenu = (props: MobileAppMenuProps) => {\n    const { appMenuItems, appNavigator, showHomeIcon, homeRoute, onToggleAppMenu } = props;\n\n    const [isShown, setIsShown] = useState(false);\n\n    const handleToggleNavigation = () => {\n        const newState = !isShown;\n        setIsShown(newState);\n        onToggleAppMenu(newState);\n    };\n\n    const hasAppContent = !(isNil(appMenuItems) && isNil(appNavigator));\n\n    return (\n        <React.Fragment>\n            <div\n                className={\n                    'navbar-header min-width-50 padding-5 ' +\n                    'overflow-hidden position-relative display-flex align-items-center'\n                }\n                onClick={handleToggleNavigation}\n            >\n                <span className={`navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}`}>\n                    {!hasAppContent && homeRoute}\n                </span>\n                {hasAppContent && (\n                    <div className='position-absolute right-2 bottom-0 text-color-white rotate-45'>\n                        <span className='uikit-icon icon-triangle-right' />\n                    </div>\n                )}\n            </div>\n            {appNavigator && (\n                <MobileHeaderModal show={isShown} modalClassName='padding-top-25' onClose={handleToggleNavigation}>\n                    <div className='width-100pct height-100pct'>{appNavigator}</div>\n                </MobileHeaderModal>\n            )}\n            {appMenuItems && (\n                <MobileHeaderModal show={isShown} modalClassName='padding-15' onClose={handleToggleNavigation}>\n                    {appMenuItems.map(module => (\n                        <li role='presentation' key={`link-icon-${module.key}`}>\n                            {module.route}\n                        </li>\n                    ))}\n                </MobileHeaderModal>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default MobileAppMenu;\n"],"mappings":";;;;;AAcA,IAAM,KAAiB,MAA8B;CACjD,IAAM,EAAE,iBAAc,iBAAc,iBAAc,cAAW,uBAAoB,GAE3E,CAAC,GAAS,KAAc,EAAS,EAAK,GAEtC,UAA+B;EACjC,IAAM,IAAW,CAAC;EAElB,AADA,EAAW,CAAQ,GACnB,EAAgB,CAAQ;CAC5B,GAEM,IAAgB,EAAE,EAAM,CAAY,KAAK,EAAM,CAAY;CAEjE,OACI,kBAAC,EAAM,UAAP,EAAA,UAAA;EACI,kBAAC,OAAD;GACI,WACI;GAGJ,SAAS;aALb,CAOI,kBAAC,QAAD;IAAM,WAAW,mCAAmC,IAAe,cAAc;cAC5E,CAAC,KAAiB;GACjB,CAAA,GACL,KACG,kBAAC,OAAD;IAAK,WAAU;cACX,kBAAC,QAAD,EAAM,WAAU,iCAAkC,CAAA;GACjD,CAAA,CAER;;EACJ,KACG,kBAAC,GAAD;GAAmB,MAAM;GAAS,gBAAe;GAAiB,SAAS;aACvE,kBAAC,OAAD;IAAK,WAAU;cAA8B;GAAkB,CAAA;EAChD,CAAA;EAEtB,KACG,kBAAC,GAAD;GAAmB,MAAM;GAAS,gBAAe;GAAa,SAAS;aAClE,EAAa,KAAI,MACd,kBAAC,MAAD;IAAI,MAAK;cACJ,EAAO;GACR,GAFyB,aAAa,EAAO,KAE7C,CACP;EACc,CAAA;CAEX,EAAA,CAAA;AAExB"}

package/components/applicationHeader/MobileHeaderModal.js

@@ -1,62 +1,45 @@
-import { jsx as t, Fragment as y, jsxs as i } from "react/jsx-runtime";
-import w from "react";
-import u from "react-dom";
-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 = s(
-    "MobileHeaderModal",
-    "position-fixed left-0 right-0 bottom-0",
-    "z-index-max",
-    m
-  ), g = s(
-    "display-flex flex-column justify-content-center",
-    "margin-15",
-    "text-center",
-    "rounded",
-    "bg-white",
-    "shadow-hard",
-    "overflow-auto",
-    c
-  ), f = N(), x = window.innerHeight - 30, o = b - window.innerHeight;
-  return /* @__PURE__ */ t(y, { children: u.createPortal(
-    /* @__PURE__ */ i(w.Fragment, { children: [
-      /* @__PURE__ */ t(a, { children: e && /* @__PURE__ */ i(
-        r.div,
-        {
-          className: h,
-          initial: { opacity: 0, top: o },
-          animate: { opacity: 1, y: 0, top: 0 },
-          exit: { opacity: 0, transition: { duration: 0.3 }, top: o },
-          children: [
-            /* @__PURE__ */ t("div", { className: g, style: { height: `${x}px` }, children: p }),
-            l && /* @__PURE__ */ t(
-              "div",
-              {
-                className: "position-absolute top-15 right-15 margin-top-15 margin-right-15 text-size-20 text-color-dark",
-                onClick: d,
-                children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-remove" })
-              }
-            )
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ t(a, { children: e && /* @__PURE__ */ t(
-        r.div,
-        {
-          className: "bottom-sheet-backdrop",
-          initial: { opacity: 0 },
-          animate: { opacity: 0.5 },
-          exit: { opacity: 0 }
-        }
-      ) })
-    ] }),
-    f
-  ) });
+import e from "../../utils/classNames.js";
+import { getOrCreatePortalRoot as t } from "../../utils/portalRoot.js";
+import n from "react";
+import { AnimatePresence as r, motion as i } from "motion/react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "react-dom";
+//#region src/components/applicationHeader/MobileHeaderModal.tsx
+var l = -1e3, u = (u) => {
+	let { show: d = !1, showClose: f = !0, modalClassName: p, className: m, onClose: h = () => {}, children: g } = u, _ = e("MobileHeaderModal", "position-fixed left-0 right-0 bottom-0", "z-index-max", m), v = e("display-flex flex-column justify-content-center", "margin-15", "text-center", "rounded", "bg-white", "shadow-hard", "overflow-auto", p), y = t(), b = window.innerHeight - 30, x = l - window.innerHeight;
+	return /* @__PURE__ */ o(a, { children: c.createPortal(/* @__PURE__ */ s(n.Fragment, { children: [/* @__PURE__ */ o(r, { children: d && /* @__PURE__ */ s(i.div, {
+		className: _,
+		initial: {
+			opacity: 0,
+			top: x
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			top: 0
+		},
+		exit: {
+			opacity: 0,
+			transition: { duration: .3 },
+			top: x
+		},
+		children: [/* @__PURE__ */ o("div", {
+			className: v,
+			style: { height: `${b}px` },
+			children: g
+		}), f && /* @__PURE__ */ o("div", {
+			className: "position-absolute top-15 right-15 margin-top-15 margin-right-15 text-size-20 text-color-dark",
+			onClick: h,
+			children: /* @__PURE__ */ o("span", { className: "uikit-icon icon-remove" })
+		})]
+	}) }), /* @__PURE__ */ o(r, { children: d && /* @__PURE__ */ o(i.div, {
+		className: "bottom-sheet-backdrop",
+		initial: { opacity: 0 },
+		animate: { opacity: .5 },
+		exit: { opacity: 0 }
+	}) })] }), y) });
 };
-export {
-  P as default
-};
-//# sourceMappingURL=MobileHeaderModal.js.map
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=MobileHeaderModal.js.map

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 { 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;"}
+{"version":3,"file":"MobileHeaderModal.js","names":[],"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='uikit-icon icon-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"],"mappings":";;;;;;;AAOA,IAAM,IAAkB,MAUlB,KAAqB,MAAqD;CAC5E,IAAM,EAAE,UAAO,IAAO,eAAY,IAAM,mBAAgB,cAAW,mBAAgB,CAAC,GAAG,gBAAa,GAE9F,IAAiB,EACnB,qBACA,0CACA,eACA,CACJ,GAEM,IAAe,EACjB,mDACA,aACA,eACA,WACA,YACA,eACA,iBACA,CACJ,GAEM,IAAY,EAAsB,GAElC,IAAa,OAAO,cAAc,IAClC,IAAS,IAAkB,OAAO;CAExC,OACI,kBAAA,GAAA,EAAA,UACK,EAAS,aACN,kBAAC,EAAM,UAAP,EAAA,UAAA,CACI,kBAAC,GAAD,EAAA,UACK,KACG,kBAAC,EAAO,KAAR;EACI,WAAW;EACX,SAAS;GAAE,SAAS;GAAG,KAAK;EAAO;EACnC,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG,KAAK;EAAE;EACpC,MAAM;GAAE,SAAS;GAAG,YAAY,EAAE,UAAU,GAAI;GAAG,KAAK;EAAO;YAJnE,CAMI,kBAAC,OAAD;GAAK,WAAW;GAAc,OAAO,EAAE,QAAQ,GAAG,EAAW,IAAI;GAC5D;EACA,CAAA,GACJ,KACG,kBAAC,OAAD;GACI,WACI;GAGJ,SAAS;aAET,kBAAC,QAAD,EAAM,WAAU,yBAA0B,CAAA;EACzC,CAAA,CAED;IAEH,CAAA,GACjB,kBAAC,GAAD,EAAA,UACK,KACG,kBAAC,EAAO,KAAR;EACI,WAAU;EACV,SAAS,EAAE,SAAS,EAAE;EACtB,SAAS,EAAE,SAAS,GAAI;EACxB,MAAM,EAAE,SAAS,EAAE;CACtB,CAAA,EAEQ,CAAA,CACL,EAAA,CAAA,GAChB,CACJ,EACF,CAAA;AAEV"}

package/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -1,34 +1,46 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import o, { useState as g } from "react";
-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(
-    "MobileSubmoduleNavigation",
-    "display-flex gap-10 align-items-center",
-    "padding-x-10",
-    "cursor-pointer",
-    d
-  ), x = c(
-    i ? "text-size-12 text-color-dark line-height-14" : "text-size-16 line-height-16 text-color-darkest text-medium text-uppercase",
-    "width-100pct ellipsis-1"
-  );
-  return /* @__PURE__ */ a("div", { className: p, onClick: h, children: [
-    /* @__PURE__ */ a("div", { className: "flex-1-1 display-flex flex-column align-items-center width-0", children: [
-      /* @__PURE__ */ e("div", { className: x, children: n }),
-      /* @__PURE__ */ e("div", { className: "text-medium width-100pct", children: s.map((t) => /* @__PURE__ */ e("div", { className: "ellipsis-1", children: o.cloneElement(t.route, {
-        className: "text-size-16 line-height-16 text-color-darkest text-decoration-none",
-        onClick: (N) => N.preventDefault()
-      }) }, t.key)) })
-    ] }),
-    i && /* @__PURE__ */ e("div", { className: "text-size-16 text-color-dark", children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-chevron-down" }) }),
-    i && /* @__PURE__ */ e(f, { show: l, children: s.map((t) => /* @__PURE__ */ e("div", { className: "margin-y-15 font-size-20", children: o.cloneElement(t.route, {
-      className: "text-size-20 text-color-darker"
-    }) }, t.key)) })
-  ] });
+import e from "../../utils/classNames.js";
+import t from "./MobileHeaderModal.js";
+import n, { useState as r } from "react";
+import { isEmpty as i } from "es-toolkit/compat";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/applicationHeader/MobileSubmoduleNavigation.tsx
+var s = (s) => {
+	let { navItems: c = [], label: l, className: u } = s, [d, f] = r(!1), p = () => f(!d), m = !i(c);
+	return /* @__PURE__ */ o("div", {
+		className: e("MobileSubmoduleNavigation", "display-flex gap-10 align-items-center", "padding-x-10", "cursor-pointer", u),
+		onClick: p,
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex-1-1 display-flex flex-column align-items-center width-0",
+				children: [/* @__PURE__ */ a("div", {
+					className: e(m ? "text-size-12 text-color-dark line-height-14" : "text-size-16 line-height-16 text-color-darkest text-medium text-uppercase", "width-100pct ellipsis-1"),
+					children: l
+				}), /* @__PURE__ */ a("div", {
+					className: "text-medium width-100pct",
+					children: c.map((e) => /* @__PURE__ */ a("div", {
+						className: "ellipsis-1",
+						children: n.cloneElement(e.route, {
+							className: "text-size-16 line-height-16 text-color-darkest text-decoration-none",
+							onClick: (e) => e.preventDefault()
+						})
+					}, e.key))
+				})]
+			}),
+			m && /* @__PURE__ */ a("div", {
+				className: "text-size-16 text-color-dark",
+				children: /* @__PURE__ */ a("span", { className: "uikit-icon icon-chevron-down" })
+			}),
+			m && /* @__PURE__ */ a(t, {
+				show: d,
+				children: c.map((e) => /* @__PURE__ */ a("div", {
+					className: "margin-y-15 font-size-20",
+					children: n.cloneElement(e.route, { className: "text-size-20 text-color-darker" })
+				}, e.key))
+			})
+		]
+	});
 };
-export {
-  z as default
-};
-//# sourceMappingURL=MobileSubmoduleNavigation.js.map
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=MobileSubmoduleNavigation.js.map

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 { 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;"}
+{"version":3,"file":"MobileSubmoduleNavigation.js","names":[],"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(\n                                navItem.route as React.ReactElement<{\n                                    className?: string;\n                                    onClick?: (event: MouseEvent) => void;\n                                }>,\n                                {\n                                    className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',\n                                    onClick: (event: MouseEvent) => event.preventDefault(),\n                                }\n                            )}\n                        </div>\n                    ))}\n                </div>\n            </div>\n            {hasNavItems && (\n                <div className='text-size-16 text-color-dark'>\n                    <span className='uikit-icon icon-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<{ className?: string }>, {\n                                className: 'text-size-20 text-color-darker',\n                            })}\n                        </div>\n                    ))}\n                </MobileHeaderModal>\n            )}\n        </div>\n    );\n};\n\nexport default MobileSubmoduleNavigation;\n"],"mappings":";;;;;;AAaA,IAAM,KAA6B,MAA0C;CACzE,IAAM,EAAE,cAAW,CAAC,GAAG,UAAO,iBAAc,GAEtC,CAAC,GAAS,KAAc,EAAS,EAAK,GAEtC,UAA+B,EAAW,CAAC,CAAO,GAElD,IAAc,CAAC,EAAQ,CAAQ;CAiBrC,OACI,kBAAC,OAAD;EAAK,WAhBO,EACZ,6BACA,0CACA,gBACA,kBACA,CAWgB;EAAS,SAAS;YAAlC;GACI,kBAAC,OAAD;IAAK,WAAU;cAAf,CACI,kBAAC,OAAD;KAAK,WAVI,EACjB,IACM,gDACA,6EACN,yBAMwB;eAAe;IAAW,CAAA,GAC1C,kBAAC,OAAD;KAAK,WAAU;eACV,EAAS,KAAI,MACV,kBAAC,OAAD;MAAuB,WAAU;gBAC5B,EAAM,aACH,EAAQ,OAIR;OACI,WAAW;OACX,UAAU,MAAsB,EAAM,eAAe;MACzD,CACJ;KACC,GAXK,EAAQ,GAWb,CACR;IACA,CAAA,CACJ;;GACJ,KACG,kBAAC,OAAD;IAAK,WAAU;cACX,kBAAC,QAAD,EAAM,WAAU,+BAAgC,CAAA;GAC/C,CAAA;GAER,KACG,kBAAC,GAAD;IAAmB,MAAM;cACpB,EAAS,KAAI,MACV,kBAAC,OAAD;KAAuB,WAAU;eAC5B,EAAM,aAAa,EAAQ,OAAqD,EAC7E,WAAW,iCACf,CAAC;IACA,GAJK,EAAQ,GAIb,CACR;GACc,CAAA;EAEtB;;AAEb"}

package/components/applicationHeader/NavItems.js

@@ -1,78 +1,69 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useState as o, useRef as p, useLayoutEffect as v } from "react";
-import { isEmpty as V } from "es-toolkit/compat";
-import j from "../../utils/classNames.js";
-import z from "../../hooks/useClickOutside.js";
-import $ from "./CollapsedNavItem.js";
-const G = 50, H = 15, J = [], K = [], Z = (M) => {
-  const {
-    navItems: n = J,
-    actionBarItems: I = K,
-    containerWidth: S
-  } = M, [i, r] = o(!1), [N, h] = o([]), [D, b] = o([]), [l, s] = o(!0), F = z(() => r(!1)), C = p(null), a = p(null), c = p(1), w = () => {
-    a.current !== null && (window.cancelAnimationFrame(a.current), a.current = null);
-  };
-  v(() => {
-    w(), c.current = 1, s(!0);
-  }, [n, I, S]), v(() => () => w(), []), v(() => {
-    l && (x(), c.current > 0 && (c.current -= 1, a.current = window.requestAnimationFrame(() => {
-      a.current = null, s(!0);
-    })));
-  });
-  const R = (e) => e.scrollWidth - G - H, x = () => {
-    const e = C.current;
-    if (!e) {
-      s(!1);
-      return;
-    }
-    const t = [...e.children || []], k = R(e);
-    if (k < 0) {
-      b([]), h(n), s(!1);
-      return;
-    }
-    let m = 0;
-    const y = [], W = [];
-    t.forEach((u) => {
-      if (!u.className)
-        return;
-      m = m + u.scrollWidth;
-      const d = n.find((B) => {
-        const A = u.attributes.getNamedItem("data-nav-item-key");
-        return A && B.key === A.value;
-      });
-      d && (k > m ? y.push(d) : W.push(d));
-    }), b(y), h(W), s(!1);
-  }, E = () => {
-    r(!i);
-  }, L = () => {
-    i && r(!1);
-  }, g = (e, t) => /* @__PURE__ */ f(
-    "li",
-    {
-      className: `submodule ${t ? "offscreen" : ""}`,
-      "data-nav-item-key": e.key,
-      children: e.route
-    },
-    e.key
-  ), O = () => !l && !V(N) ? [
-    ...D.map((t) => g(t, l)),
-    /* @__PURE__ */ f(
-      $,
-      {
-        ref: F,
-        show: i,
-        navItems: N,
-        actionBarItems: I,
-        onDropdownClick: E,
-        onItemClick: L
-      },
-      "CollapsedNavItem"
-    )
-  ] : n.map((e) => g(e, l)), q = j("SubmoduleNavigation", "nav");
-  return /* @__PURE__ */ f("ul", { className: q, ref: C, children: O() });
+import e from "../../hooks/useClickOutside.js";
+import t from "../../utils/classNames.js";
+import n from "./CollapsedNavItem.js";
+import { useLayoutEffect as r, useRef as i, useState as a } from "react";
+import { isEmpty as o } from "es-toolkit/compat";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/applicationHeader/NavItems.tsx
+var c = 50, l = 15, u = [], d = [], f = (f) => {
+	let { navItems: p = u, actionBarItems: m = d, containerWidth: h } = f, [g, _] = a(!1), [v, y] = a([]), [b, x] = a([]), [S, C] = a(!0), w = e(() => _(!1)), T = i(null), E = i(null), D = i(1), O = () => {
+		E.current !== null && (window.cancelAnimationFrame(E.current), E.current = null);
+	};
+	r(() => {
+		O(), D.current = 1, C(!0);
+	}, [
+		p,
+		m,
+		h
+	]), r(() => () => O(), []), r(() => {
+		S && (A(), D.current > 0 && (--D.current, E.current = window.requestAnimationFrame(() => {
+			E.current = null, C(!0);
+		})));
+	});
+	let k = (e) => e.scrollWidth - c - l, A = () => {
+		let e = T.current;
+		if (!e) {
+			C(!1);
+			return;
+		}
+		let t = [...e.children || []], n = k(e);
+		if (n < 0) {
+			x([]), y(p), C(!1);
+			return;
+		}
+		let r = 0, i = [], a = [];
+		t.forEach((e) => {
+			if (!e.className) return;
+			r += e.scrollWidth;
+			let t = p.find((t) => {
+				let n = e.attributes.getNamedItem("data-nav-item-key");
+				return n && t.key === n.value;
+			});
+			t && (n > r ? i.push(t) : a.push(t));
+		}), x(i), y(a), C(!1);
+	}, j = () => {
+		_(!g);
+	}, M = () => {
+		g && _(!1);
+	}, N = (e, t) => /* @__PURE__ */ s("li", {
+		className: `submodule ${t ? "offscreen" : ""}`,
+		"data-nav-item-key": e.key,
+		children: e.route
+	}, e.key);
+	return /* @__PURE__ */ s("ul", {
+		className: t("SubmoduleNavigation", "nav"),
+		ref: T,
+		children: !S && !o(v) ? [...b.map((e) => N(e, S)), /* @__PURE__ */ s(n, {
+			ref: w,
+			show: g,
+			navItems: v,
+			actionBarItems: m,
+			onDropdownClick: j,
+			onItemClick: M
+		}, "CollapsedNavItem")] : p.map((e) => N(e, S))
+	});
 };
-export {
-  Z as NavItems,
-  Z as default
-};
-//# sourceMappingURL=NavItems.js.map
+//#endregion
+export { f as NavItems, f as default };
+
+//# sourceMappingURL=NavItems.js.map

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, 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;\nconst defaultNavItems: ModulePropType[] = [];\nconst defaultActionBarItems: React.ReactNode[] = [];\n\nexport type NavItemsProps = {\n    navItems?: ModulePropType[];\n    containerWidth: number;\n    actionBarItems?: React.ReactNode[];\n};\n\nexport const NavItems = (props: NavItemsProps) => {\n    const {\n        navItems: externalNavItems = defaultNavItems,\n        actionBarItems = defaultActionBarItems,\n        containerWidth,\n    } = props;\n\n    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);\n    const [collapsedNavItems, setCollapsedNavItems] = useState<ModulePropType[]>([]);\n    const [visibleNavItems, setVisibleNavItems] = useState<ModulePropType[]>([]);\n    const [isMeasuring, setIsMeasuring] = useState(true);\n\n    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));\n\n    const navigationRef = useRef(null);\n    const scheduledMeasurementFrame = useRef<number | null>(null);\n    const postLayoutMeasurementsRemaining = useRef(1);\n\n    const cancelScheduledMeasurementFrame = () => {\n        if (scheduledMeasurementFrame.current !== null) {\n            window.cancelAnimationFrame(scheduledMeasurementFrame.current);\n            scheduledMeasurementFrame.current = null;\n        }\n    };\n\n    // Before any new changes are applied\n    useLayoutEffect(() => {\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        cancelScheduledMeasurementFrame();\n        postLayoutMeasurementsRemaining.current = 1;\n        setIsMeasuring(true);\n    }, [externalNavItems, actionBarItems, containerWidth]);\n\n    useLayoutEffect(() => () => cancelScheduledMeasurementFrame(), []);\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 (isMeasuring) {\n            computeNavItems();\n\n            if (postLayoutMeasurementsRemaining.current > 0) {\n                postLayoutMeasurementsRemaining.current -= 1;\n                scheduledMeasurementFrame.current = window.requestAnimationFrame(() => {\n                    scheduledMeasurementFrame.current = null;\n                    setIsMeasuring(true);\n                });\n            }\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            setIsMeasuring(false);\n            return;\n        }\n\n        const navItems = [...((element as HTMLElement).children || [])];\n\n        const availableWidth = getAvailableWidth(element);\n\n        if (availableWidth < 0) {\n            setVisibleNavItems([]);\n            setCollapsedNavItems(externalNavItems);\n            setIsMeasuring(false);\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        setVisibleNavItems(updatedVisibleItems);\n        setCollapsedNavItems(updatedCollapsedItems);\n        setIsMeasuring(false);\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        <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    const renderNavItems = () => {\n        if (!isMeasuring && !isEmpty(collapsedNavItems)) {\n            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isMeasuring));\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, isMeasuring));\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","defaultNavItems","defaultActionBarItems","NavItems","props","externalNavItems","actionBarItems","containerWidth","isCollapsedNavItemOpen","setIsCollapsedNavItemOpen","useState","collapsedNavItems","setCollapsedNavItems","visibleNavItems","setVisibleNavItems","isMeasuring","setIsMeasuring","collapsedDropdownRef","useClickOutside","navigationRef","useRef","scheduledMeasurementFrame","postLayoutMeasurementsRemaining","cancelScheduledMeasurementFrame","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,IACdC,IAAoC,CAAA,GACpCC,IAA2C,CAAA,GAQpCC,IAAW,CAACC,MAAyB;AAC9C,QAAM;AAAA,IACF,UAAUC,IAAmBJ;AAAA,IAC7B,gBAAAK,IAAiBJ;AAAA,IACjB,gBAAAK;AAAA,EAAA,IACAH,GAEE,CAACI,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GACpE,CAACC,GAAmBC,CAAoB,IAAIF,EAA2B,CAAA,CAAE,GACzE,CAACG,GAAiBC,CAAkB,IAAIJ,EAA2B,CAAA,CAAE,GACrE,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAI,GAE7CO,IAAuBC,EAAgB,MAAMT,EAA0B,EAAK,CAAC,GAE7EU,IAAgBC,EAAO,IAAI,GAC3BC,IAA4BD,EAAsB,IAAI,GACtDE,IAAkCF,EAAO,CAAC,GAE1CG,IAAkC,MAAM;AAC1C,IAAIF,EAA0B,YAAY,SACtC,OAAO,qBAAqBA,EAA0B,OAAO,GAC7DA,EAA0B,UAAU;AAAA,EAE5C;AAGA,EAAAG,EAAgB,MAAM;AAGlB,IAAAD,EAAA,GACAD,EAAgC,UAAU,GAC1CN,EAAe,EAAI;AAAA,EACvB,GAAG,CAACX,GAAkBC,GAAgBC,CAAc,CAAC,GAErDiB,EAAgB,MAAM,MAAMD,EAAA,GAAmC,EAAE,GAGjEC,EAAgB,MAAM;AAGlB,IAAIT,MACAU,EAAA,GAEIH,EAAgC,UAAU,MAC1CA,EAAgC,WAAW,GAC3CD,EAA0B,UAAU,OAAO,sBAAsB,MAAM;AACnE,MAAAA,EAA0B,UAAU,MACpCL,EAAe,EAAI;AAAA,IACvB,CAAC;AAAA,EAGb,CAAC;AAED,QAAMU,IAAoB,CAACC,MASAA,EAAQ,cAAc5B,IAAyBC,GAIpEyB,IAAkB,MAAM;AAC1B,UAAME,IAA8BR,EAAc;AAElD,QAAI,CAACQ,GAAS;AACV,MAAAX,EAAe,EAAK;AACpB;AAAA,IACJ;AAEA,UAAMY,IAAW,CAAC,GAAKD,EAAwB,YAAY,CAAA,CAAG,GAExDE,IAAiBH,EAAkBC,CAAO;AAEhD,QAAIE,IAAiB,GAAG;AACpB,MAAAf,EAAmB,CAAA,CAAE,GACrBF,EAAqBP,CAAgB,GACrCW,EAAe,EAAK;AACpB;AAAA,IACJ;AAIA,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,IAAiB7B,EAAiB,KAAK,CAAA8B,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,GAGDpB,EAAmBiB,CAAmB,GACtCnB,EAAqBoB,CAAqB,GAC1ChB,EAAe,EAAK;AAAA,EACxB,GAEMqB,IAA0B,MAAM;AAGlC,IACI5B,EADA,CAAAD,CAC+B;AAAA,EAKvC,GAEM8B,IAAiC,MAAM;AAEzC,IAAI9B,KACAC,EAA0B,EAAK;AAAA,EAEvC,GAEM8B,IAAgB,CAACJ,GAAyBK,MAC5C,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,GAQfO,IAAiB,MACf,CAAC3B,KAAe,CAAC4B,EAAQhC,CAAiB,IAGnC;AAAA,IACH,GAHiBE,EAAgB,IAAI,OAAW0B,EAAcJ,GAASpB,CAAW,CAAC;AAAA,IAInF,gBAAA0B;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,KAAK3B;AAAA,QACL,MAAMT;AAAA,QACN,UAAUG;AAAA,QACV,gBAAAL;AAAA,QACA,iBAAiB+B;AAAA,QACjB,aAAaC;AAAA,MAAA;AAAA,MANT;AAAA,IAAA;AAAA,EAOR,IAIDjC,EAAiB,IAAI,CAAA8B,MAAWI,EAAcJ,GAASpB,CAAW,CAAC,GAOxE8B,IAAUC,EAAW,uBAAuB,KAAK;AAEvD,2BACK,MAAA,EAAG,WAAWD,GAAS,KAAK1B,GACxB,eACL;AAER;"}
+{"version":3,"file":"NavItems.js","names":[],"sources":["../../../src/components/applicationHeader/NavItems.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, 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;\nconst defaultNavItems: ModulePropType[] = [];\nconst defaultActionBarItems: React.ReactNode[] = [];\n\nexport type NavItemsProps = {\n    navItems?: ModulePropType[];\n    containerWidth: number;\n    actionBarItems?: React.ReactNode[];\n};\n\nexport const NavItems = (props: NavItemsProps) => {\n    const {\n        navItems: externalNavItems = defaultNavItems,\n        actionBarItems = defaultActionBarItems,\n        containerWidth,\n    } = props;\n\n    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);\n    const [collapsedNavItems, setCollapsedNavItems] = useState<ModulePropType[]>([]);\n    const [visibleNavItems, setVisibleNavItems] = useState<ModulePropType[]>([]);\n    const [isMeasuring, setIsMeasuring] = useState(true);\n\n    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));\n\n    const navigationRef = useRef(null);\n    const scheduledMeasurementFrame = useRef<number | null>(null);\n    const postLayoutMeasurementsRemaining = useRef(1);\n\n    const cancelScheduledMeasurementFrame = () => {\n        if (scheduledMeasurementFrame.current !== null) {\n            window.cancelAnimationFrame(scheduledMeasurementFrame.current);\n            scheduledMeasurementFrame.current = null;\n        }\n    };\n\n    // Before any new changes are applied\n    useLayoutEffect(() => {\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        cancelScheduledMeasurementFrame();\n        postLayoutMeasurementsRemaining.current = 1;\n        setIsMeasuring(true);\n    }, [externalNavItems, actionBarItems, containerWidth]);\n\n    useLayoutEffect(() => () => cancelScheduledMeasurementFrame(), []);\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 (isMeasuring) {\n            computeNavItems();\n\n            if (postLayoutMeasurementsRemaining.current > 0) {\n                postLayoutMeasurementsRemaining.current -= 1;\n                scheduledMeasurementFrame.current = window.requestAnimationFrame(() => {\n                    scheduledMeasurementFrame.current = null;\n                    setIsMeasuring(true);\n                });\n            }\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            setIsMeasuring(false);\n            return;\n        }\n\n        const navItems = [...((element as HTMLElement).children || [])];\n\n        const availableWidth = getAvailableWidth(element);\n\n        if (availableWidth < 0) {\n            setVisibleNavItems([]);\n            setCollapsedNavItems(externalNavItems);\n            setIsMeasuring(false);\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        setVisibleNavItems(updatedVisibleItems);\n        setCollapsedNavItems(updatedCollapsedItems);\n        setIsMeasuring(false);\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        <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    const renderNavItems = () => {\n        if (!isMeasuring && !isEmpty(collapsedNavItems)) {\n            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isMeasuring));\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, isMeasuring));\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"],"mappings":";;;;;;;AASA,IAAM,IAAyB,IACzB,IAAc,IACd,IAAoC,CAAC,GACrC,IAA2C,CAAC,GAQrC,KAAY,MAAyB;CAC9C,IAAM,EACF,UAAU,IAAmB,GAC7B,oBAAiB,GACjB,sBACA,GAEE,CAAC,GAAwB,KAA6B,EAAS,EAAK,GACpE,CAAC,GAAmB,KAAwB,EAA2B,CAAC,CAAC,GACzE,CAAC,GAAiB,KAAsB,EAA2B,CAAC,CAAC,GACrE,CAAC,GAAa,KAAkB,EAAS,EAAI,GAE7C,IAAuB,QAAsB,EAA0B,EAAK,CAAC,GAE7E,IAAgB,EAAO,IAAI,GAC3B,IAA4B,EAAsB,IAAI,GACtD,IAAkC,EAAO,CAAC,GAE1C,UAAwC;EAC1C,AAAI,EAA0B,YAAY,SACtC,OAAO,qBAAqB,EAA0B,OAAO,GAC7D,EAA0B,UAAU;CAE5C;CAcA,AAXA,QAAsB;EAKlB,AAFA,EAAgC,GAChC,EAAgC,UAAU,GAC1C,EAAe,EAAI;CACvB,GAAG;EAAC;EAAkB;EAAgB;CAAc,CAAC,GAErD,cAA4B,EAAgC,GAAG,CAAC,CAAC,GAGjE,QAAsB;EAGlB,AAAI,MACA,EAAgB,GAEZ,EAAgC,UAAU,MAC1C,IAAgC,SAChC,EAA0B,UAAU,OAAO,4BAA4B;GAEnE,AADA,EAA0B,UAAU,MACpC,EAAe,EAAI;EACvB,CAAC;CAGb,CAAC;CAED,IAAM,KAAqB,MASA,EAAQ,cAAc,IAAyB,GAIpE,UAAwB;EAC1B,IAAM,IAA8B,EAAc;EAElD,IAAI,CAAC,GAAS;GACV,EAAe,EAAK;GACpB;EACJ;EAEA,IAAM,IAAW,CAAC,GAAK,EAAwB,YAAY,CAAC,CAAE,GAExD,IAAiB,EAAkB,CAAO;EAEhD,IAAI,IAAiB,GAAG;GAGpB,AAFA,EAAmB,CAAC,CAAC,GACrB,EAAqB,CAAgB,GACrC,EAAe,EAAK;GACpB;EACJ;EAIA,IAAI,IAAuB,GAErB,IAAwC,CAAC,GACzC,IAA0C,CAAC;EAkCjD,AAhCA,EAAS,SAAQ,MAAQ;GACrB,IAAI,CAAC,EAAK,WACN;GAIJ,KAA8C,EAAK;GAKnD,IAAM,IAAiB,EAAiB,MAAK,MAAW;IACpD,IAAM,IAAW,EAAK,WAAW,aAAa,mBAAmB;IACjE,OAAO,KAAY,EAAQ,QAAQ,EAAS;GAChD,CAAC;GAEI,MAMD,IAAiB,IACjB,EAAoB,KAAK,CAAc,IAEvC,EAAsB,KAAK,CAAc;EAEjD,CAAC,GAGD,EAAmB,CAAmB,GACtC,EAAqB,CAAqB,GAC1C,EAAe,EAAK;CACxB,GAEM,UAAgC;EAGlC,AACI,EADA,EAI8B;CAEtC,GAEM,UAAuC;EAEzC,AAAI,KACA,EAA0B,EAAK;CAEvC,GAEM,KAAiB,GAAyB,MAC5C,kBAAC,MAAD;EAEI,WAAW,aAAa,IAAkB,cAAc;EACxD,qBAAmB,EAAQ;YAE1B,EAAQ;CACT,GALK,EAAQ,GAKb;CA8BR,OACI,kBAAC,MAAD;EAAI,WAHQ,EAAW,uBAAuB,KAG/B;EAAS,KAAK;YA3BzB,CAAC,KAAe,CAAC,EAAQ,CAAiB,IAGnC,CACH,GAHiB,EAAgB,KAAI,MAAW,EAAc,GAAS,CAAW,CAG/E,GACH,kBAAC,GAAD;GAEI,KAAK;GACL,MAAM;GACN,UAAU;GACM;GAChB,iBAAiB;GACjB,aAAa;EAChB,GAPO,kBAOP,CACL,IAGG,EAAiB,KAAI,MAAW,EAAc,GAAS,CAAW,CAAC;CAYtE,CAAA;AAEZ"}

package/components/applicationLayout/ApplicationLayout.js

@@ -1,19 +1,23 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-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 = u("ApplicationLayout", a);
-  return /* @__PURE__ */ s("div", { ...e, ref: t || i, className: m, children: p });
+import e from "../../utils/classNames.js";
+import t from "./ApplicationLayoutHeader.js";
+import n from "./ApplicationLayoutSidebar.js";
+import r from "./ApplicationLayoutBody.js";
+import { initDocumentBootstrapping as i } from "../../utils/init/initDocumentBootstrapping.js";
+import { forwardRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/applicationLayout/ApplicationLayout.tsx
+i();
+var s = a((t, n) => {
+	let { className: r, layoutRef: i, children: a, ...s } = t, c = e("ApplicationLayout", r);
+	return /* @__PURE__ */ o("div", {
+		...s,
+		ref: n || i,
+		className: c,
+		children: a
+	});
 });
-o.Header = c;
-o.Sidebar = f;
-o.Body = l;
-export {
-  o as default
-};
-//# sourceMappingURL=ApplicationLayout.js.map
+s.Header = t, s.Sidebar = n, s.Body = r;
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=ApplicationLayout.js.map

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';\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;"}
+{"version":3,"file":"ApplicationLayout.js","names":[],"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"],"mappings":";;;;;;;;AAkBA,EAA0B;AAuB1B,IAAM,IAAoB,GAAY,GAAc,MAAa;CAC7D,IAAM,EAAE,cAAW,cAAW,aAAU,GAAG,MAAmB,GAExD,IAAU,EAAW,qBAAqB,CAAS;CAEzD,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,KAAK,KAAO;EAAW,WAAW;EACtD;CACA,CAAA;AAEb,CAAC;AAED,EAAkB,SAAS,GAC3B,EAAkB,UAAU,GAC5B,EAAkB,OAAO"}