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

package/components/applicationHeader/AppMenuDropdown.js

@@ -1,36 +1,58 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as f, useState as g } from "react";
-import { noop as h, isEmpty as i } from "es-toolkit/compat";
-import d from "../../utils/classNames.js";
-import N from "../../hooks/useClickOutside.js";
-const C = (n) => {
-  const { title: o, caret: e } = n, r = d(
-    "ModuleNavigation-dropdown",
-    "dropdown-toggle justify-content-between",
-    !e && "inactive"
-  );
-  return /* @__PURE__ */ a("a", { className: r, role: "button", id: "basic-nav-dropdown", children: [
-    /* @__PURE__ */ t("span", { children: o }),
-    e && /* @__PURE__ */ t("span", { className: "caret" })
-  ] });
-}, D = (n) => {
-  const { children: o } = n;
-  return i(o) ? null : /* @__PURE__ */ t("ul", { role: "menu", className: "dropdown-menu ModuleNavigation-dropdown-menu", children: o });
-}, M = f((n, o) => {
-  const { open: e, children: r, onDropdownClick: s } = n;
-  return /* @__PURE__ */ t("li", { ref: o, className: d("dropdown", e && "open"), onClick: s, children: r });
-}), x = (n) => {
-  const { title: o, caret: e = !1, onToggleAppMenu: r = h, children: s } = n, [l, p] = g(!1), u = N(() => p(!1)), m = () => {
-    const c = !l;
-    p(c), r(c);
-  }, w = !i(s) && l;
-  return /* @__PURE__ */ a(M, { open: w, onDropdownClick: m, ref: u, children: [
-    /* @__PURE__ */ t(C, { title: o, caret: e }),
-    /* @__PURE__ */ t(D, { children: s })
-  ] });
+import e from "../../hooks/useClickOutside.js";
+import t from "../../utils/classNames.js";
+import { useAnchorName as n, usePopover as r } from "../../hooks/useAnchoredPopover.js";
+import { forwardRef as i, useRef as a, useState as o } from "react";
+import { isEmpty as s, noop as c } from "es-toolkit/compat";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/applicationHeader/AppMenuDropdown.tsx
+var d = (e) => {
+	let { title: n, caret: r } = e;
+	return /* @__PURE__ */ u("a", {
+		className: t("ModuleNavigation-dropdown", "dropdown-toggle justify-content-between", !r && "inactive"),
+		role: "button",
+		id: "basic-nav-dropdown",
+		children: [/* @__PURE__ */ l("span", { children: n }), r && /* @__PURE__ */ l("span", { className: "caret" })]
+	});
+}, f = (e) => {
+	let { children: t, open: n, anchorName: i } = e, o = a(null);
+	return r(o, n), s(t) ? null : /* @__PURE__ */ l("ul", {
+		popover: "manual",
+		role: "menu",
+		className: "dropdown-menu ModuleNavigation-dropdown-menu",
+		ref: o,
+		style: { positionAnchor: i },
+		children: t
+	});
+}, p = i((e, n) => {
+	let { open: r, anchorName: i, children: a, onDropdownClick: o } = e, s = { anchorName: i };
+	return /* @__PURE__ */ l("li", {
+		ref: n,
+		className: t("dropdown", r && "open"),
+		onClick: o,
+		style: s,
+		children: a
+	});
+}), m = (t) => {
+	let { title: r, caret: i = !1, onToggleAppMenu: a = c, children: m } = t, [h, g] = o(!1), _ = n("application-header-menu"), v = e(() => g(!1)), y = () => {
+		let e = !h;
+		g(e), a(e);
+	}, b = !s(m) && h;
+	return /* @__PURE__ */ u(p, {
+		open: b,
+		anchorName: _,
+		onDropdownClick: y,
+		ref: v,
+		children: [/* @__PURE__ */ l(d, {
+			title: r,
+			caret: i
+		}), /* @__PURE__ */ l(f, {
+			open: b,
+			anchorName: _,
+			children: m
+		})]
+	});
 };
-export {
-  x as AppMenuDropdown,
-  x as default
-};
-//# sourceMappingURL=AppMenuDropdown.js.map
+//#endregion
+export { m as AppMenuDropdown, m as default };
+
+//# sourceMappingURL=AppMenuDropdown.js.map

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 { 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;"}
+{"version":3,"file":"AppMenuDropdown.js","names":[],"sources":["../../../src/components/applicationHeader/AppMenuDropdown.tsx"],"sourcesContent":["import React, {\n    useRef,\n    useState,\n    forwardRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type HTMLAttributes,\n    type PropsWithChildren,\n} from 'react';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport { useAnchorName, usePopover } from '../../hooks/useAnchoredPopover';\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\ntype DropdownMenuProps = PropsWithChildren<{\n    open: boolean;\n    anchorName: string;\n}>;\n\nconst DropdownMenu = (props: DropdownMenuProps) => {\n    const { children, open, anchorName } = props;\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n\n    usePopover(dropdownMenuRef, open);\n\n    if (isEmpty(children)) {\n        return null;\n    }\n\n    const dropdownMenuStyle = {\n        positionAnchor: anchorName,\n    } as CSSProperties;\n    const dropdownMenuPopoverProps = {\n        popover: 'manual',\n    } as HTMLAttributes<HTMLUListElement>;\n\n    return (\n        <ul\n            {...dropdownMenuPopoverProps}\n            role='menu'\n            className='dropdown-menu ModuleNavigation-dropdown-menu'\n            ref={dropdownMenuRef}\n            style={dropdownMenuStyle}\n        >\n            {children}\n        </ul>\n    );\n};\n\ntype AppMenuDropdownOpenerProps = {\n    open: boolean;\n    anchorName: string;\n    onDropdownClick: () => void;\n};\n\ntype Ref = ForwardedRef<HTMLLIElement>;\ntype Props = PropsWithChildren<AppMenuDropdownOpenerProps>;\n\nconst AppMenuDropdownOpener = forwardRef((props: Props, ref: Ref) => {\n    const { open, anchorName, children, onDropdownClick } = props;\n    const anchorStyle = {\n        anchorName,\n    } as CSSProperties;\n\n    return (\n        <li ref={ref} className={classNames('dropdown', open && 'open')} onClick={onDropdownClick} style={anchorStyle}>\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    const anchorName = useAnchorName('application-header-menu');\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\n            open={openWithChildren}\n            anchorName={anchorName}\n            onDropdownClick={handleDropdownClick}\n            ref={wrapperRef}\n        >\n            <ToggleButton title={title} caret={caret} />\n            <DropdownMenu open={openWithChildren} anchorName={anchorName}>\n                {children}\n            </DropdownMenu>\n        </AppMenuDropdownOpener>\n    );\n};\n\nexport default AppMenuDropdown;\n"],"mappings":";;;;;;;AAoBA,IAAM,KAAgB,MAA6B;CAC/C,IAAM,EAAE,UAAO,aAAU;CAOzB,OACI,kBAAC,KAAD;EAAG,WAPiB,EACpB,6BACA,2CACA,CAAC,KAAS,UAII;EAAiB,MAAK;EAAS,IAAG;YAAhD,CACI,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,GAClB,KAAS,kBAAC,QAAD,EAAM,WAAU,QAAS,CAAA,CACpC;;AAEX,GAOM,KAAgB,MAA6B;CAC/C,IAAM,EAAE,aAAU,SAAM,kBAAe,GACjC,IAAkB,EAAyB,IAAI;CAerD,OAbA,EAAW,GAAiB,CAAI,GAE5B,EAAQ,CAAQ,IACT,OAWP,kBAAC,MAAD;EAJA,SAAS;EAML,MAAK;EACL,WAAU;EACV,KAAK;EACL,OAAO,EAZX,gBAAgB,EAYL;EAEN;CACD,CAAA;AAEZ,GAWM,IAAwB,GAAY,GAAc,MAAa;CACjE,IAAM,EAAE,SAAM,eAAY,aAAU,uBAAoB,GAClD,IAAc,EAChB,cACJ;CAEA,OACI,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAW,YAAY,KAAQ,MAAM;EAAG,SAAS;EAAiB,OAAO;EAC7F;CACD,CAAA;AAEZ,CAAC,GAQY,KAAmB,MAAmD;CAC/E,IAAM,EAAE,UAAO,WAAQ,IAAO,qBAAkB,GAAM,gBAAa,GAE7D,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAa,EAAc,yBAAyB,GAEpD,IAAa,QAAsB,EAAU,EAAK,CAAC,GAEnD,UAA4B;EAC9B,IAAM,IAAW,CAAC;EAElB,AADA,EAAU,CAAQ,GAClB,EAAgB,CAAQ;CAC5B,GAEM,IAAmB,CAAC,EAAQ,CAAQ,KAAK;CAE/C,OACI,kBAAC,GAAD;EACI,MAAM;EACM;EACZ,iBAAiB;EACjB,KAAK;YAJT,CAMI,kBAAC,GAAD;GAAqB;GAAc;EAAQ,CAAA,GAC3C,kBAAC,GAAD;GAAc,MAAM;GAA8B;GAC7C;EACS,CAAA,CACK;;AAE/B"}

package/components/applicationHeader/ApplicationActionBar.js

@@ -1,17 +1,19 @@
-import { jsx as a } from "react/jsx-runtime";
-const l = (n) => {
-  const { items: e, nodeRef: i, className: r = "", ...t } = n;
-  return /* @__PURE__ */ a(
-    "ul",
-    {
-      ...t,
-      className: `ApplicationActionBar nav navbar-nav navbar-right ${r}`,
-      ref: i,
-      children: e?.map((o, s) => /* @__PURE__ */ a("li", { role: "presentation", className: "navigationItem", children: o }, s))
-    }
-  );
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/applicationHeader/ApplicationActionBar.tsx
+var t = (t) => {
+	let { items: n, nodeRef: r, className: i = "", ...a } = t;
+	return /* @__PURE__ */ e("ul", {
+		...a,
+		className: `ApplicationActionBar nav navbar-nav navbar-right ${i}`,
+		ref: r,
+		children: n?.map((t, n) => /* @__PURE__ */ e("li", {
+			role: "presentation",
+			className: "navigationItem",
+			children: t
+		}, n))
+	});
 };
-export {
-  l as default
-};
-//# sourceMappingURL=ApplicationActionBar.js.map
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ApplicationActionBar.js.map

package/components/applicationHeader/ApplicationActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationActionBar.js","sources":["../../../src/components/applicationHeader/ApplicationActionBar.tsx"],"sourcesContent":["import type React from 'react';\n\nexport type ApplicationActionBarProps = {\n    items?: React.ReactNode[];\n    nodeRef?: React.MutableRefObject<HTMLUListElement | null> | undefined;\n    className?: string;\n};\n\nconst ApplicationActionBar = (props: ApplicationActionBarProps) => {\n    const { items, nodeRef, className = '', ...remainingProps } = props;\n\n    return (\n        <ul\n            {...remainingProps}\n            className={`ApplicationActionBar nav navbar-nav navbar-right ${className}`}\n            ref={nodeRef}\n        >\n            {items?.map((item, index) => (\n                <li key={index} role='presentation' className='navigationItem'>\n                    {item}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nexport default ApplicationActionBar;\n"],"names":["ApplicationActionBar","props","items","nodeRef","className","remainingProps","jsx","item","index"],"mappings":";AAQA,MAAMA,IAAuB,CAACC,MAAqC;AAC/D,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,WAAAC,IAAY,IAAI,GAAGC,MAAmBJ;AAE9D,SACI,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGD;AAAA,MACJ,WAAW,oDAAoDD,CAAS;AAAA,MACxE,KAAKD;AAAA,MAEJ,UAAAD,GAAO,IAAI,CAACK,GAAMC,MACf,gBAAAF,EAAC,MAAA,EAAe,MAAK,gBAAe,WAAU,kBACzC,UAAAC,EAAA,GADIC,CAET,CACH;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"ApplicationActionBar.js","names":[],"sources":["../../../src/components/applicationHeader/ApplicationActionBar.tsx"],"sourcesContent":["import type React from 'react';\n\nexport type ApplicationActionBarProps = {\n    items?: React.ReactNode[];\n    nodeRef?: React.MutableRefObject<HTMLUListElement | null> | undefined;\n    className?: string;\n};\n\nconst ApplicationActionBar = (props: ApplicationActionBarProps) => {\n    const { items, nodeRef, className = '', ...remainingProps } = props;\n\n    return (\n        <ul\n            {...remainingProps}\n            className={`ApplicationActionBar nav navbar-nav navbar-right ${className}`}\n            ref={nodeRef}\n        >\n            {items?.map((item, index) => (\n                <li key={index} role='presentation' className='navigationItem'>\n                    {item}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nexport default ApplicationActionBar;\n"],"mappings":";;AAQA,IAAM,KAAwB,MAAqC;CAC/D,IAAM,EAAE,UAAO,YAAS,eAAY,IAAI,GAAG,MAAmB;CAE9D,OACI,kBAAC,MAAD;EACI,GAAI;EACJ,WAAW,oDAAoD;EAC/D,KAAK;YAEJ,GAAO,KAAK,GAAM,MACf,kBAAC,MAAD;GAAgB,MAAK;GAAe,WAAU;aACzC;EACD,GAFK,CAEL,CACP;CACD,CAAA;AAEZ"}

package/components/applicationHeader/ApplicationHeader.d.ts

@@ -18,7 +18,7 @@ export type ApplicationHeaderProps = {
      */
     label?: string | React.ReactNode;
     /**
-     * The home URL that shall be used for the home button. Pass a `react-router-dom` `NavLink`
+     * The home URL that shall be used for the home button. Pass a `react-router` `NavLink`
      * as homeRoute into the header. For example:
      *
      * @example

package/components/applicationHeader/ApplicationHeader.js

@@ -1,90 +1,80 @@
-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 "../../utils/classNames.js";
-import j from "./AppMenu.js";
-import b from "./ApplicationActionBar.js";
-import F from "./MobileSubmoduleNavigation.js";
-import k from "./MobileAppMenu.js";
-import z from "../../hooks/useResizeObserver.js";
-import { NavItems as D } from "./NavItems.js";
-const O = 768, X = B((R, M) => {
-  const {
-    homeRoute: c = "",
-    showHomeIcon: l = !0,
-    label: o,
-    className: p,
-    appNavigator: d,
-    appNavigatorClassName: A,
-    appMenuItems: f,
-    navItems: a,
-    actionBarItems: t = [],
-    onToggleAppMenu: u = () => {
-    },
-    ...I
-  } = R, h = H(null), [i, w] = z(), s = w?.contentRect;
-  S(M, () => i, [i]);
-  const v = E(
-    (y) => {
-      if (s) {
-        const N = s[y];
-        return typeof N == "number" && Math.round(N);
-      }
-    },
-    [s]
-  )("width") || window.innerWidth, r = v <= O, x = !m(t), C = W(
-    "ApplicationHeader",
-    "user-select-none",
-    r && "mobile",
-    p && p
-  );
-  return /* @__PURE__ */ n("nav", { ...I, className: C, ref: i, children: [
-    r && /* @__PURE__ */ n(g.Fragment, { children: [
-      /* @__PURE__ */ e(
-        k,
-        {
-          showHomeIcon: l,
-          homeRoute: c,
-          appMenuItems: f,
-          appNavigator: d,
-          onToggleAppMenu: u
-        }
-      ),
-      /* @__PURE__ */ n("div", { className: "flex-1-1-0 display-flex gap-10", children: [
-        /* @__PURE__ */ e(F, { className: "flex-1-1", label: o, navItems: a }),
-        x && /* @__PURE__ */ e(P, {}),
-        /* @__PURE__ */ e(b, { className: "mobile", nodeRef: h, items: t })
-      ] })
-    ] }),
-    !r && /* @__PURE__ */ n(g.Fragment, { children: [
-      /* @__PURE__ */ e("div", { className: "navbar-header", children: /* @__PURE__ */ e("span", { className: `navbar-brand ${l ? "home-icon" : ""}`, children: c }) }),
-      o && /* @__PURE__ */ e(
-        j,
-        {
-          label: o,
-          appMenuItems: f,
-          appNavigator: d,
-          appNavigatorClassName: A,
-          onToggleAppMenu: u
-        },
-        "AppMenu"
-      ),
-      m(a) && /* @__PURE__ */ e("ul", { className: "SubmoduleNavigation nav" }),
-      !m(a) && /* @__PURE__ */ e(
-        D,
-        {
-          navItems: a,
-          containerWidth: v,
-          actionBarItems: t
-        },
-        "NavItems"
-      ),
-      /* @__PURE__ */ e(b, { nodeRef: h, items: t })
-    ] })
-  ] });
-}), P = () => /* @__PURE__ */ e("div", { className: "divider display-flex align-items-center", children: /* @__PURE__ */ e("div", { className: "width-3 height-20 bg-lighter" }) });
-export {
-  X as ApplicationHeader,
-  X as default
-};
-//# sourceMappingURL=ApplicationHeader.js.map
+import e from "../../hooks/useResizeObserver.js";
+import t from "../../utils/classNames.js";
+import n from "./ApplicationActionBar.js";
+import r from "./AppMenu.js";
+import i from "./MobileSubmoduleNavigation.js";
+import a from "./MobileAppMenu.js";
+import { NavItems as o } from "./NavItems.js";
+import s, { forwardRef as c, useCallback as l, useImperativeHandle as u, useRef as d } from "react";
+import { isEmpty as f } from "es-toolkit/compat";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/applicationHeader/ApplicationHeader.tsx
+var h = 768, g = c((c, g) => {
+	let { homeRoute: v = "", showHomeIcon: y = !0, label: b, className: x, appNavigator: S, appNavigatorClassName: C, appMenuItems: w, navItems: T, actionBarItems: E = [], onToggleAppMenu: D = () => {}, ...O } = c, k = d(null), [A, j] = e(), M = j?.contentRect;
+	u(g, () => A, [A]);
+	let N = l((e) => {
+		if (M) {
+			let t = M[e];
+			return typeof t == "number" && Math.round(t);
+		}
+	}, [M])("width") || window.innerWidth, P = N <= h, F = !f(E), I = t("ApplicationHeader", "user-select-none", P && "mobile", x && x);
+	return /* @__PURE__ */ m("nav", {
+		...O,
+		className: I,
+		ref: A,
+		children: [P && /* @__PURE__ */ m(s.Fragment, { children: [/* @__PURE__ */ p(a, {
+			showHomeIcon: y,
+			homeRoute: v,
+			appMenuItems: w,
+			appNavigator: S,
+			onToggleAppMenu: D
+		}), /* @__PURE__ */ m("div", {
+			className: "flex-1-1-0 display-flex gap-10",
+			children: [
+				/* @__PURE__ */ p(i, {
+					className: "flex-1-1",
+					label: b,
+					navItems: T
+				}),
+				F && /* @__PURE__ */ p(_, {}),
+				/* @__PURE__ */ p(n, {
+					className: "mobile",
+					nodeRef: k,
+					items: E
+				})
+			]
+		})] }), !P && /* @__PURE__ */ m(s.Fragment, { children: [
+			/* @__PURE__ */ p("div", {
+				className: "navbar-header",
+				children: /* @__PURE__ */ p("span", {
+					className: `navbar-brand ${y ? "home-icon" : ""}`,
+					children: v
+				})
+			}),
+			b && /* @__PURE__ */ p(r, {
+				label: b,
+				appMenuItems: w,
+				appNavigator: S,
+				appNavigatorClassName: C,
+				onToggleAppMenu: D
+			}, "AppMenu"),
+			f(T) && /* @__PURE__ */ p("ul", { className: "SubmoduleNavigation nav" }),
+			!f(T) && /* @__PURE__ */ p(o, {
+				navItems: T,
+				containerWidth: N,
+				actionBarItems: E
+			}, "NavItems"),
+			/* @__PURE__ */ p(n, {
+				nodeRef: k,
+				items: E
+			})
+		] })]
+	});
+}), _ = () => /* @__PURE__ */ p("div", {
+	className: "divider display-flex align-items-center",
+	children: /* @__PURE__ */ p("div", { className: "width-3 height-20 bg-lighter" })
+});
+//#endregion
+export { g as ApplicationHeader, g as default };
+
+//# sourceMappingURL=ApplicationHeader.js.map

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';\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;"}
+{"version":3,"file":"ApplicationHeader.js","names":[],"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` `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"],"mappings":";;;;;;;;;;;AAWA,IAAM,IAAY,KA0FL,IAAoB,GAAY,GAA+B,MAAsC;CAC9G,IAAM,EACF,eAAY,IACZ,kBAAe,IACf,UACA,cACA,iBACA,0BACA,iBACA,aACA,oBAAiB,CAAC,GAClB,2BAAwB,CAAC,GACzB,GAAG,MACH,GAEE,IAAe,EAAO,IAAI,GAE1B,CAAC,GAAQ,KAAS,EAAkB,GAEpC,IAAc,GAAO;CAE3B,EAAyC,SAAW,GAAQ,CAAC,CAAM,CAAC;CAcpE,IAAM,IAZiB,GAClB,MAA+B;EAC5B,IAAI,GAAa;GACb,IAAM,IAAQ,EAAY;GAC1B,OAAO,OAAO,KAAU,YAAY,KAAK,MAAM,CAAK;EACxD;CACJ,GACA,CAAC,CAAW,CAKO,CAAA,CAAe,OAAO,KAAK,OAAO,YAEnD,IAAgB,KAAkB,GAElC,IAAoB,CAAC,EAAQ,CAAc,GAE3C,IAAoB,EACtB,qBACA,oBACA,KAAiB,UACjB,KAAa,CACjB;CAEA,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;EAAmB,KAAK;YAA5D,CACK,KACG,kBAAC,EAAM,UAAP,EAAA,UAAA,CACI,kBAAC,GAAD;GACkB;GACH;GACG;GACA;GACG;EACpB,CAAA,GACD,kBAAC,OAAD;GAAK,WAAU;aAAf;IACI,kBAAC,GAAD;KAA2B,WAAU;KAAkB;KAAiB;IAAW,CAAA;IAClF,KAAqB,kBAAC,GAAD,CAAU,CAAA;IAChC,kBAAC,GAAD;KAAsB,WAAU;KAAS,SAAS;KAAc,OAAO;IAAiB,CAAA;GACvF;IACO,EAAA,CAAA,GAEnB,CAAC,KACE,kBAAC,EAAM,UAAP,EAAA,UAAA;GACI,kBAAC,OAAD;IAAK,WAAU;cACX,kBAAC,QAAD;KAAM,WAAW,gBAAgB,IAAe,cAAc;eAAO;IAAgB,CAAA;GACpF,CAAA;GACJ,KACG,kBAAC,GAAD;IACW;IAEO;IACA;IACS;IACN;GACpB,GALO,SAKP;GAEJ,EAAQ,CAAQ,KAAK,kBAAC,MAAD,EAAI,WAAU,0BAA2B,CAAA;GAC9D,CAAC,EAAQ,CAAQ,KACd,kBAAC,GAAD;IAEc;IACM;IACA;GACnB,GAJO,UAIP;GAEL,kBAAC,GAAD;IAAsB,SAAS;IAAc,OAAO;GAAiB,CAAA;EACzD,EAAA,CAAA,CAEnB;;AAEb,CAAC,GAEK,UACF,kBAAC,OAAD;CAAK,WAAU;WACX,kBAAC,OAAD,EAAK,WAAU,+BAAgC,CAAA;AAC9C,CAAA"}

package/components/applicationHeader/CollapsedNavItem.js

@@ -1,25 +1,44 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { isEmpty as l } from "es-toolkit/compat";
-const f = c((r, n) => {
-  const { show: s = !1, navItems: e, actionBarItems: d, onDropdownClick: p, onItemClick: i } = r;
-  return l(e) && l(d) ? null : /* @__PURE__ */ t("li", { className: `CollapsedDropdown dropdown ${s ? "open" : ""}`, ref: n, children: [
-    /* @__PURE__ */ o(
-      "a",
-      {
-        id: "basic-nav-dropdown",
-        role: "button",
-        className: "dropdown-toggle text-color-gray",
-        "aria-haspopup": "true",
-        "aria-expanded": "true",
-        onClick: p,
-        children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-option-horizontal", "aria-hidden": "true" })
-      }
-    ),
-    /* @__PURE__ */ o("ul", { className: "dropdown-menu", role: "menu", "aria-labelledby": "basic-nav-dropdown", children: e.map((a) => /* @__PURE__ */ o("li", { className: "submodule", onClick: i, "data-nav-item-key": a.key, children: a.route }, a.key)) })
-  ] }, "collapsed-dropdown");
+import { useAnchorName as e, usePopover as t } from "../../hooks/useAnchoredPopover.js";
+import { forwardRef as n, useRef 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/CollapsedNavItem.tsx
+var s = n((n, s) => {
+	let { show: c = !1, navItems: l, actionBarItems: u, onDropdownClick: d, onItemClick: f } = n, p = r(null), m = e("application-header-collapsed");
+	if (t(p, c), i(l) && i(u)) return null;
+	let h = c ? "open" : "", g = { anchorName: m }, _ = { positionAnchor: m };
+	return /* @__PURE__ */ o("li", {
+		className: `CollapsedDropdown dropdown ${h}`,
+		ref: s,
+		style: g,
+		children: [/* @__PURE__ */ a("a", {
+			id: "basic-nav-dropdown",
+			role: "button",
+			className: "dropdown-toggle text-color-gray",
+			"aria-haspopup": "true",
+			"aria-expanded": "true",
+			onClick: d,
+			children: /* @__PURE__ */ a("span", {
+				className: "uikit-icon icon-option-horizontal",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ a("ul", {
+			popover: "manual",
+			className: "dropdown-menu",
+			role: "menu",
+			"aria-labelledby": "basic-nav-dropdown",
+			ref: p,
+			style: _,
+			children: l.map((e) => /* @__PURE__ */ a("li", {
+				className: "submodule",
+				onClick: f,
+				"data-nav-item-key": e.key,
+				children: e.route
+			}, e.key))
+		})]
+	}, "collapsed-dropdown");
 });
-export {
-  f as default
-};
-//# sourceMappingURL=CollapsedNavItem.js.map
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=CollapsedNavItem.js.map

package/components/applicationHeader/CollapsedNavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsedNavItem.js","sources":["../../../src/components/applicationHeader/CollapsedNavItem.tsx"],"sourcesContent":["import React, { forwardRef, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport type { ModulePropType } from './ApplicationHeader';\n\ntype CollapsedNavItemProps = {\n    show: boolean;\n    navItems: ModulePropType[];\n    actionBarItems: React.ReactNode[];\n    onDropdownClick: () => void;\n    onItemClick: () => void;\n};\n\ntype Ref = ForwardedRef<HTMLLIElement>;\n\nconst CollapsedNavItem = forwardRef((props: CollapsedNavItemProps, ref: Ref) => {\n    const { show = false, navItems, actionBarItems, onDropdownClick, onItemClick } = props;\n\n    if (isEmpty(navItems) && isEmpty(actionBarItems)) {\n        return null;\n    }\n\n    const collapsedDropdownClass = show ? 'open' : '';\n\n    return (\n        <li className={`CollapsedDropdown dropdown ${collapsedDropdownClass}`} key='collapsed-dropdown' ref={ref}>\n            <a\n                id='basic-nav-dropdown'\n                role='button'\n                className='dropdown-toggle text-color-gray'\n                aria-haspopup='true'\n                aria-expanded='true'\n                onClick={onDropdownClick}\n            >\n                <span className='rioglyph rioglyph-option-horizontal' aria-hidden='true' />\n            </a>\n\n            <ul className='dropdown-menu' role='menu' aria-labelledby='basic-nav-dropdown'>\n                {navItems.map(navItem => (\n                    <li key={navItem.key} className='submodule' onClick={onItemClick} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </li>\n    );\n});\n\nexport default CollapsedNavItem;\n"],"names":["CollapsedNavItem","forwardRef","props","ref","show","navItems","actionBarItems","onDropdownClick","onItemClick","isEmpty","jsx","navItem"],"mappings":";;;AAeA,MAAMA,IAAmBC,EAAW,CAACC,GAA8BC,MAAa;AAC5E,QAAM,EAAE,MAAAC,IAAO,IAAO,UAAAC,GAAU,gBAAAC,GAAgB,iBAAAC,GAAiB,aAAAC,MAAgBN;AAEjF,SAAIO,EAAQJ,CAAQ,KAAKI,EAAQH,CAAc,IACpC,yBAMN,MAAA,EAAG,WAAW,8BAHYF,IAAO,SAAS,EAGwB,IAA6B,KAAAD,GAC5F,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,MAAK;AAAA,QACL,WAAU;AAAA,QACV,iBAAc;AAAA,QACd,iBAAc;AAAA,QACd,SAASH;AAAA,QAET,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,uCAAsC,eAAY,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAG7E,gBAAAA,EAAC,MAAA,EAAG,WAAU,iBAAgB,MAAK,QAAO,mBAAgB,sBACrD,UAAAL,EAAS,IAAI,CAAAM,MACV,gBAAAD,EAAC,QAAqB,WAAU,aAAY,SAASF,GAAa,qBAAmBG,EAAQ,KACxF,UAAAA,EAAQ,MAAA,GADJA,EAAQ,GAEjB,CACH,EAAA,CACL;AAAA,EAAA,EAAA,GAlBuE,oBAmB3E;AAER,CAAC;"}
+{"version":3,"file":"CollapsedNavItem.js","names":[],"sources":["../../../src/components/applicationHeader/CollapsedNavItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, type CSSProperties, type ForwardedRef, type HTMLAttributes } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport type { ModulePropType } from './ApplicationHeader';\nimport { useAnchorName, usePopover } from '../../hooks/useAnchoredPopover';\n\ntype CollapsedNavItemProps = {\n    show: boolean;\n    navItems: ModulePropType[];\n    actionBarItems: React.ReactNode[];\n    onDropdownClick: () => void;\n    onItemClick: () => void;\n};\n\ntype Ref = ForwardedRef<HTMLLIElement>;\n\nconst CollapsedNavItem = forwardRef((props: CollapsedNavItemProps, ref: Ref) => {\n    const { show = false, navItems, actionBarItems, onDropdownClick, onItemClick } = props;\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const anchorName = useAnchorName('application-header-collapsed');\n\n    usePopover(dropdownMenuRef, show);\n\n    if (isEmpty(navItems) && isEmpty(actionBarItems)) {\n        return null;\n    }\n\n    const collapsedDropdownClass = show ? 'open' : '';\n\n    const anchorStyle = {\n        anchorName,\n    } as CSSProperties;\n\n    const dropdownMenuStyle = {\n        positionAnchor: anchorName,\n    } as CSSProperties;\n\n    const dropdownMenuPopoverProps = {\n        popover: 'manual',\n    } as HTMLAttributes<HTMLUListElement>;\n\n    return (\n        <li\n            className={`CollapsedDropdown dropdown ${collapsedDropdownClass}`}\n            key='collapsed-dropdown'\n            ref={ref}\n            style={anchorStyle}\n        >\n            <a\n                id='basic-nav-dropdown'\n                role='button'\n                className='dropdown-toggle text-color-gray'\n                aria-haspopup='true'\n                aria-expanded='true'\n                onClick={onDropdownClick}\n            >\n                <span className='uikit-icon icon-option-horizontal' aria-hidden='true' />\n            </a>\n\n            <ul\n                {...dropdownMenuPopoverProps}\n                className='dropdown-menu'\n                role='menu'\n                aria-labelledby='basic-nav-dropdown'\n                ref={dropdownMenuRef}\n                style={dropdownMenuStyle}\n            >\n                {navItems.map(navItem => (\n                    <li key={navItem.key} className='submodule' onClick={onItemClick} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </li>\n    );\n});\n\nexport default CollapsedNavItem;\n"],"mappings":";;;;;AAgBA,IAAM,IAAmB,GAAY,GAA8B,MAAa;CAC5E,IAAM,EAAE,UAAO,IAAO,aAAU,mBAAgB,oBAAiB,mBAAgB,GAC3E,IAAkB,EAAyB,IAAI,GAC/C,IAAa,EAAc,8BAA8B;CAI/D,IAFA,EAAW,GAAiB,CAAI,GAE5B,EAAQ,CAAQ,KAAK,EAAQ,CAAc,GAC3C,OAAO;CAGX,IAAM,IAAyB,IAAO,SAAS,IAEzC,IAAc,EAChB,cACJ,GAEM,IAAoB,EACtB,gBAAgB,EACpB;CAMA,OACI,kBAAC,MAAD;EACI,WAAW,8BAA8B;EAEpC;EACL,OAAO;YAJX,CAMI,kBAAC,KAAD;GACI,IAAG;GACH,MAAK;GACL,WAAU;GACV,iBAAc;GACd,iBAAc;GACd,SAAS;aAET,kBAAC,QAAD;IAAM,WAAU;IAAoC,eAAY;GAAQ,CAAA;EACzE,CAAA,GAEH,kBAAC,MAAD;GArBJ,SAAS;GAuBD,WAAU;GACV,MAAK;GACL,mBAAgB;GAChB,KAAK;GACL,OAAO;aAEN,EAAS,KAAI,MACV,kBAAC,MAAD;IAAsB,WAAU;IAAY,SAAS;IAAa,qBAAmB,EAAQ;cACxF,EAAQ;GACT,GAFK,EAAQ,GAEb,CACP;EACD,CAAA,CACJ;IA7BI,oBA6BJ;AAEZ,CAAC"}

package/components/applicationHeader/MobileAppMenu.js

@@ -1,29 +1,46 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import w, { useState as N } from "react";
+import e from "./MobileHeaderModal.js";
+import t, { useState as n } from "react";
 import { isNil as r } from "es-toolkit/compat";
-import h from "./MobileHeaderModal.js";
-const C = (d) => {
-  const { appMenuItems: i, appNavigator: t, showHomeIcon: p, homeRoute: c, onToggleAppMenu: m } = d, [a, g] = N(!1), n = () => {
-    const o = !a;
-    g(o), m(o);
-  }, s = !(r(i) && r(t));
-  return /* @__PURE__ */ l(w.Fragment, { children: [
-    /* @__PURE__ */ l(
-      "div",
-      {
-        className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative display-flex align-items-center",
-        onClick: n,
-        children: [
-          /* @__PURE__ */ e("span", { className: `navbar-brand height-40 width-40 ${p ? "home-icon" : ""}`, children: !s && c }),
-          s && /* @__PURE__ */ e("div", { className: "position-absolute right-2 bottom-0 text-color-white rotate-45", children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-triangle-right" }) })
-        ]
-      }
-    ),
-    t && /* @__PURE__ */ e(h, { show: a, modalClassName: "padding-top-25", onClose: n, children: /* @__PURE__ */ e("div", { className: "width-100pct height-100pct", children: t }) }),
-    i && /* @__PURE__ */ e(h, { show: a, modalClassName: "padding-15", onClose: n, children: i.map((o) => /* @__PURE__ */ e("li", { role: "presentation", children: o.route }, `link-icon-${o.key}`)) })
-  ] });
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/applicationHeader/MobileAppMenu.tsx
+var o = (o) => {
+	let { appMenuItems: s, appNavigator: c, showHomeIcon: l, homeRoute: u, onToggleAppMenu: d } = o, [f, p] = n(!1), m = () => {
+		let e = !f;
+		p(e), d(e);
+	}, h = !(r(s) && r(c));
+	return /* @__PURE__ */ a(t.Fragment, { children: [
+		/* @__PURE__ */ a("div", {
+			className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative display-flex align-items-center",
+			onClick: m,
+			children: [/* @__PURE__ */ i("span", {
+				className: `navbar-brand height-40 width-40 ${l ? "home-icon" : ""}`,
+				children: !h && u
+			}), h && /* @__PURE__ */ i("div", {
+				className: "position-absolute right-2 bottom-0 text-color-white rotate-45",
+				children: /* @__PURE__ */ i("span", { className: "uikit-icon icon-triangle-right" })
+			})]
+		}),
+		c && /* @__PURE__ */ i(e, {
+			show: f,
+			modalClassName: "padding-top-25",
+			onClose: m,
+			children: /* @__PURE__ */ i("div", {
+				className: "width-100pct height-100pct",
+				children: c
+			})
+		}),
+		s && /* @__PURE__ */ i(e, {
+			show: f,
+			modalClassName: "padding-15",
+			onClose: m,
+			children: s.map((e) => /* @__PURE__ */ i("li", {
+				role: "presentation",
+				children: e.route
+			}, `link-icon-${e.key}`))
+		})
+	] });
 };
-export {
-  C as default
-};
-//# sourceMappingURL=MobileAppMenu.js.map
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=MobileAppMenu.js.map