@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.1

package/AnalyticsAnalysisOverlay.d.ts

@@ -0,0 +1 @@
+export * from './components/analyticsAnalysisOverlay/AnalyticsAnalysisOverlay';

package/AnalyticsAnalysisOverlay.js

@@ -0,0 +1,5 @@
+import { AnalyticsAnalysisOverlay as r } from "./components/analyticsAnalysisOverlay/AnalyticsAnalysisOverlay.js";
+export {
+  r as AnalyticsAnalysisOverlay
+};
+//# sourceMappingURL=AnalyticsAnalysisOverlay.js.map

package/AnalyticsAnalysisOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsAnalysisOverlay.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/Table.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/table/Table';
+export * from './components/table/Table';

package/Table.js

@@ -0,0 +1,23 @@
+import { TableBatchDropdown as a, TableBody as l, TableColumn as b, TableColumnFilter as T, TableColumnsDropdown as r, TableExpandedContentRow as d, TableExpandedRow as n, TableExpanderButton as t, TableFooter as p, TableGroupFooterRow as u, TableGroupRow as w, TableHeader as R, TableHeaderColumn as m, TableHeaderRow as x, TableRow as C, TableSpacerRow as f, default as c } from "./components/table/Table.js";
+import { default as B } from "./components/table/selection/useTableSelection.js";
+export {
+  a as TableBatchDropdown,
+  l as TableBody,
+  b as TableColumn,
+  T as TableColumnFilter,
+  r as TableColumnsDropdown,
+  d as TableExpandedContentRow,
+  n as TableExpandedRow,
+  t as TableExpanderButton,
+  p as TableFooter,
+  u as TableGroupFooterRow,
+  w as TableGroupRow,
+  R as TableHeader,
+  m as TableHeaderColumn,
+  x as TableHeaderRow,
+  C as TableRow,
+  f as TableSpacerRow,
+  c as default,
+  B as useTableSelection
+};
+//# sourceMappingURL=Table.js.map

package/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/TableCol.d.ts

@@ -1,2 +1,2 @@
-export { default } from './components/table/TableCol';
-export * from './components/table/TableCol';
+export { default } from './components/table/native/TableCol';
+export * from './components/table/native/TableCol';

package/TableCol.js

@@ -1,4 +1,4 @@
-import { default as o } from "./components/table/TableCol.js";
+import { default as o } from "./components/table/native/TableCol.js";
 export {
   o as default
 };

package/TableHead.d.ts

@@ -1,2 +1,2 @@
-export { default } from './components/table/TableHead';
-export * from './components/table/TableHead';
+export { default } from './components/table/native/TableHead';
+export * from './components/table/native/TableHead';

package/TableHead.js

@@ -1,4 +1,4 @@
-import { default as o } from "./components/table/TableHead.js";
+import { default as o } from "./components/table/native/TableHead.js";
 export {
   o as default
 };

package/TableSettingsDialog.d.ts

@@ -1,2 +1,2 @@
-export { default } from './components/table/TableSettingsDialog';
-export * from './components/table/TableSettingsDialog';
+export { default } from './components/table/native/TableSettingsDialog';
+export * from './components/table/native/TableSettingsDialog';

package/TableSettingsDialog.js

@@ -1,4 +1,4 @@
-import { default as o } from "./components/table/TableSettingsDialog.js";
+import { default as o } from "./components/table/native/TableSettingsDialog.js";
 export {
   o as default
 };

package/TableToolbar.js

@@ -1,5 +1,6 @@
-import { default as o } from "./components/table/TableToolbar.js";
+import { TableToolbarColumn as a, default as e } from "./components/table/TableToolbar.js";
 export {
-  o as default
+  a as TableToolbarColumn,
+  e as default
 };
 //# sourceMappingURL=TableToolbar.js.map

package/analyticsAnalysisUtils.d.ts

@@ -0,0 +1 @@
+export * from './utils/analytics/analyticsAnalysisUtils';

package/analyticsAnalysisUtils.js

@@ -0,0 +1,13 @@
+import { ANALYTICS_OVERLAY_SELECTOR as E, EVENT_TYPE_ICON_CLASS as a, LOOKUP_MAX_LENGTH as t, REQUIRED_ANALYTICS_HEADER_ROW as _, buildAnalyticsAnalysisData as s, createAnalyticsLookupKey as R, hasRequiredAnalyticsHeaderRow as L, parseAnalyticsReportCsv as i, toEventType as o } from "./utils/analytics/analyticsAnalysisUtils.js";
+export {
+  E as ANALYTICS_OVERLAY_SELECTOR,
+  a as EVENT_TYPE_ICON_CLASS,
+  t as LOOKUP_MAX_LENGTH,
+  _ as REQUIRED_ANALYTICS_HEADER_ROW,
+  s as buildAnalyticsAnalysisData,
+  R as createAnalyticsLookupKey,
+  L as hasRequiredAnalyticsHeaderRow,
+  i as parseAnalyticsReportCsv,
+  o as toEventType
+};
+//# sourceMappingURL=analyticsAnalysisUtils.js.map

package/analyticsAnalysisUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analyticsAnalysisUtils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/analyticsAnalysisOverlay/AnalyticsAnalysisBanner.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, PointerEvent as ReactPointerEvent, RefObject } from 'react';
+type AnalyticsAnalysisBannerProps = {
+    host: HTMLDivElement | null;
+    bannerRef: RefObject<HTMLDivElement>;
+    bannerStyle: CSSProperties;
+    analyticsDateRangeLabel: string | null;
+    loadedCsvName: string | null;
+    showOverlayDetails: boolean;
+    showOverlayLabelText: boolean;
+    isDragging: boolean;
+    onCsvPick: (files: File[]) => void;
+    onToggleOverlayDetails: () => void;
+    onToggleOverlayLabelText: () => void;
+    onClearCsv: () => void;
+    onDragHandlePointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+};
+export declare const AnalyticsAnalysisBanner: (props: AnalyticsAnalysisBannerProps) => import('react').ReactPortal | null;
+export type { AnalyticsAnalysisBannerProps };

package/components/analyticsAnalysisOverlay/AnalyticsAnalysisBanner.js

@@ -0,0 +1,128 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
+import c from "../filepicker/FilePicker.js";
+import r from "../button/Button.js";
+const S = (d) => {
+  const {
+    host: n,
+    bannerRef: p,
+    bannerStyle: y,
+    analyticsDateRangeLabel: o,
+    loadedCsvName: i,
+    showOverlayDetails: t,
+    showOverlayLabelText: s,
+    isDragging: g,
+    onCsvPick: h,
+    onToggleOverlayDetails: m,
+    onToggleOverlayLabelText: x,
+    onClearCsv: b,
+    onDragHandlePointerDown: v
+  } = d;
+  return n ? u(
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: p,
+        className: "position-fixed rounded padding-x-10 padding-y-10 text-color-white bg-secondary shadow-focused pointer-events-all z-index-max",
+        style: y,
+        children: /* @__PURE__ */ l("div", { className: "display-flex align-items-center gap-10", children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Drag analytics overlay banner",
+              className: "rioglyph rioglyph-drag-n-drop text-size-20 margin-top-2",
+              style: {
+                cursor: g ? "grabbing" : "grab",
+                touchAction: "none"
+              },
+              onPointerDown: v
+            }
+          ),
+          /* @__PURE__ */ l("div", { children: [
+            !i && /* @__PURE__ */ e(
+              c,
+              {
+                displayMode: c.DISPLAY_MODE_DROPZONE,
+                onPick: h,
+                accept: {
+                  "text/csv": [".csv"],
+                  "application/vnd.ms-excel": [".csv"]
+                },
+                children: ({ isDragActive: a }) => /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "rounded border border-style-dashed border-color-white bg-transparent text-center text-color-white padding-y-10 padding-x-15 cursor-pointer",
+                    children: a ? "Drop analytics CSV here ..." : "Drop analytics CSV here, or click to select"
+                  }
+                )
+              }
+            ),
+            i && /* @__PURE__ */ l("div", { className: "display-flex align-items-center justify-content-center gap-15", children: [
+              /* @__PURE__ */ l("div", { className: "line-height-14 display-flex flex-column gap-2", children: [
+                o && /* @__PURE__ */ e("div", { className: "text-bold", children: o }),
+                /* @__PURE__ */ e("div", { children: i })
+              ] }),
+              /* @__PURE__ */ l("div", { className: "display-flex gap-5", children: [
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    bsSize: "xs",
+                    bsStyle: "muted-filled",
+                    iconOnly: !0,
+                    onClick: (a) => {
+                      a.preventDefault(), a.stopPropagation(), m();
+                    },
+                    "aria-label": t ? "Hide analytics overlay details" : "Show analytics overlay details",
+                    children: /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: `rioglyph ${t ? "rioglyph-eye-open" : "rioglyph-eye-closed"}`
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    bsSize: "xs",
+                    bsStyle: "muted-filled",
+                    iconOnly: !0,
+                    onClick: (a) => {
+                      a.preventDefault(), a.stopPropagation(), x();
+                    },
+                    "aria-label": s ? "Hide analytics label text" : "Show analytics label text",
+                    children: /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: `rioglyph rotate-90 ${s ? "rioglyph-arrows-collapse" : "rioglyph-arrows-expand"}`
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    bsSize: "xs",
+                    bsStyle: "muted-filled",
+                    iconName: "rioglyph-trash",
+                    iconOnly: !0,
+                    onClick: (a) => {
+                      a.preventDefault(), a.stopPropagation(), b();
+                    }
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    n
+  ) : null;
+};
+export {
+  S as AnalyticsAnalysisBanner
+};
+//# sourceMappingURL=AnalyticsAnalysisBanner.js.map

package/components/analyticsAnalysisOverlay/AnalyticsAnalysisBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsAnalysisBanner.js","sources":["../../../src/components/analyticsAnalysisOverlay/AnalyticsAnalysisBanner.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent, RefObject } from 'react';\n\nimport FilePicker from '../filepicker/FilePicker';\nimport Button from '../button/Button';\n\ntype AnalyticsAnalysisBannerProps = {\n    host: HTMLDivElement | null;\n    bannerRef: RefObject<HTMLDivElement>;\n    bannerStyle: CSSProperties;\n    analyticsDateRangeLabel: string | null;\n    loadedCsvName: string | null;\n    showOverlayDetails: boolean;\n    showOverlayLabelText: boolean;\n    isDragging: boolean;\n    onCsvPick: (files: File[]) => void;\n    onToggleOverlayDetails: () => void;\n    onToggleOverlayLabelText: () => void;\n    onClearCsv: () => void;\n    onDragHandlePointerDown: (event: ReactPointerEvent<HTMLElement>) => void;\n};\n\nexport const AnalyticsAnalysisBanner = (props: AnalyticsAnalysisBannerProps) => {\n    const {\n        host,\n        bannerRef,\n        bannerStyle,\n        analyticsDateRangeLabel,\n        loadedCsvName,\n        showOverlayDetails,\n        showOverlayLabelText,\n        isDragging,\n        onCsvPick,\n        onToggleOverlayDetails,\n        onToggleOverlayLabelText,\n        onClearCsv,\n        onDragHandlePointerDown,\n    } = props;\n\n    if (!host) {\n        return null;\n    }\n\n    return createPortal(\n        <div\n            ref={bannerRef}\n            className='position-fixed rounded padding-x-10 padding-y-10 text-color-white bg-secondary shadow-focused pointer-events-all z-index-max'\n            style={bannerStyle}\n        >\n            <div className='display-flex align-items-center gap-10'>\n                <span\n                    role='button'\n                    tabIndex={0}\n                    aria-label='Drag analytics overlay banner'\n                    className='rioglyph rioglyph-drag-n-drop text-size-20 margin-top-2'\n                    style={{\n                        cursor: isDragging ? 'grabbing' : 'grab',\n                        touchAction: 'none',\n                    }}\n                    onPointerDown={onDragHandlePointerDown}\n                />\n\n                <div>\n                    {!loadedCsvName && (\n                        <FilePicker\n                            displayMode={FilePicker.DISPLAY_MODE_DROPZONE}\n                            onPick={onCsvPick}\n                            accept={{\n                                'text/csv': ['.csv'],\n                                'application/vnd.ms-excel': ['.csv'],\n                            }}\n                        >\n                            {({ isDragActive }) => (\n                                <div\n                                    className={\n                                        'rounded border border-style-dashed border-color-white bg-transparent ' +\n                                        'text-center text-color-white padding-y-10 padding-x-15 cursor-pointer'\n                                    }\n                                >\n                                    {isDragActive\n                                        ? 'Drop analytics CSV here ...'\n                                        : 'Drop analytics CSV here, or click to select'}\n                                </div>\n                            )}\n                        </FilePicker>\n                    )}\n\n                    {loadedCsvName && (\n                        <div className='display-flex align-items-center justify-content-center gap-15'>\n                            <div className='line-height-14 display-flex flex-column gap-2'>\n                                {analyticsDateRangeLabel && <div className='text-bold'>{analyticsDateRangeLabel}</div>}\n                                <div>{loadedCsvName}</div>\n                            </div>\n                            <div className='display-flex gap-5'>\n                                <Button\n                                    bsSize='xs'\n                                    bsStyle='muted-filled'\n                                    iconOnly\n                                    onClick={event => {\n                                        event.preventDefault();\n                                        event.stopPropagation();\n                                        onToggleOverlayDetails();\n                                    }}\n                                    aria-label={\n                                        showOverlayDetails\n                                            ? 'Hide analytics overlay details'\n                                            : 'Show analytics overlay details'\n                                    }\n                                >\n                                    <span\n                                        className={`rioglyph ${\n                                            showOverlayDetails ? 'rioglyph-eye-open' : 'rioglyph-eye-closed'\n                                        }`}\n                                    />\n                                </Button>\n                                <Button\n                                    bsSize='xs'\n                                    bsStyle='muted-filled'\n                                    iconOnly\n                                    onClick={event => {\n                                        event.preventDefault();\n                                        event.stopPropagation();\n                                        onToggleOverlayLabelText();\n                                    }}\n                                    aria-label={\n                                        showOverlayLabelText ? 'Hide analytics label text' : 'Show analytics label text'\n                                    }\n                                >\n                                    <span\n                                        className={`rioglyph rotate-90 ${\n                                            showOverlayLabelText ? 'rioglyph-arrows-collapse' : 'rioglyph-arrows-expand'\n                                        }`}\n                                    />\n                                </Button>\n                                <Button\n                                    bsSize='xs'\n                                    bsStyle='muted-filled'\n                                    iconName='rioglyph-trash'\n                                    iconOnly\n                                    onClick={event => {\n                                        event.preventDefault();\n                                        event.stopPropagation();\n                                        onClearCsv();\n                                    }}\n                                />\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </div>\n        </div>,\n        host\n    );\n};\n\nexport type { AnalyticsAnalysisBannerProps };\n"],"names":["AnalyticsAnalysisBanner","props","host","bannerRef","bannerStyle","analyticsDateRangeLabel","loadedCsvName","showOverlayDetails","showOverlayLabelText","isDragging","onCsvPick","onToggleOverlayDetails","onToggleOverlayLabelText","onClearCsv","onDragHandlePointerDown","createPortal","jsx","jsxs","FilePicker","isDragActive","Button","event"],"mappings":"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"}

package/components/analyticsAnalysisOverlay/AnalyticsAnalysisOverlay.d.ts

@@ -0,0 +1,9 @@
+type AnalyticsAnalysisOverlayProps = {
+    overlayBackgroundOpacity?: number;
+    bannerStartCoordinates?: {
+        top: number;
+        left: number;
+    };
+};
+export declare const AnalyticsAnalysisOverlay: (props: AnalyticsAnalysisOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/analyticsAnalysisOverlay/AnalyticsAnalysisOverlay.js

@@ -0,0 +1,73 @@
+import { jsx as $ } from "react/jsx-runtime";
+import { useState as t, useCallback as g } from "react";
+import H from "../notification/Notification.js";
+import P from "../../hooks/useDraggableElement.js";
+import { hasRequiredAnalyticsHeaderRow as q, buildAnalyticsAnalysisData as I } from "../../utils/analytics/analyticsAnalysisUtils.js";
+import V from "../../utils/analytics/useAnalyticsOverlayDom.js";
+import { AnalyticsAnalysisBanner as j } from "./AnalyticsAnalysisBanner.js";
+const Q = (v) => {
+  const { overlayBackgroundOpacity: b = 0.5, bannerStartCoordinates: p } = v, h = Math.min(1, Math.max(0, b)), o = p?.top, r = p?.left, A = typeof o == "number" && Number.isFinite(o) && typeof r == "number" && Number.isFinite(r), [C, e] = t(() => /* @__PURE__ */ new Map()), [D, n] = t(null), [w, s] = t(null), [O, l] = t(null), [u, x] = t(!0), [m, L] = t(!0), { draggableRef: T, isDragging: k, position: i, onDragHandlePointerDown: R } = P(), S = V({
+    analyticsLookup: C,
+    overlayBackgroundOpacity: h,
+    showOverlayDetails: u,
+    showOverlayLabelText: m,
+    analyticsTotalUsers: w
+  }), M = g(async (a) => {
+    const d = a.filter((F) => F.name.toLowerCase().endsWith(".csv"));
+    if (d.length === 0) {
+      e(/* @__PURE__ */ new Map()), n(null), s(null), l(null);
+      return;
+    }
+    const c = d[0], f = await c.text();
+    if (!q(f)) {
+      H.error(
+        'A Google Analytics CSV report based on the "UIKIT AnalyticsAnalysisOverlay Template" is required.',
+        {
+          title: "Unsupported CSV"
+        }
+      ), e(/* @__PURE__ */ new Map()), n(null), s(null), l(null);
+      return;
+    }
+    const U = [
+      {
+        reportName: c.name,
+        csvRaw: f
+      }
+    ], y = I(U);
+    e(y.analyticsLookup), n(y.analyticsDateRangeLabel), s(y.analyticsTotalUsers), l(c.name);
+  }, []), N = g(() => {
+    e(/* @__PURE__ */ new Map()), n(null), s(null), l(null);
+  }, []), B = i.hasDragged ? {
+    top: `${i.top}px`,
+    left: `${i.left}px`
+  } : A ? {
+    top: `${o}px`,
+    left: `${r}px`
+  } : {
+    top: "70px",
+    left: "50%",
+    transform: "translateX(-50%)"
+  };
+  return /* @__PURE__ */ $(
+    j,
+    {
+      host: S,
+      bannerRef: T,
+      bannerStyle: B,
+      analyticsDateRangeLabel: D,
+      loadedCsvName: O,
+      showOverlayDetails: u,
+      showOverlayLabelText: m,
+      isDragging: k,
+      onCsvPick: M,
+      onToggleOverlayDetails: () => x((a) => !a),
+      onToggleOverlayLabelText: () => L((a) => !a),
+      onClearCsv: N,
+      onDragHandlePointerDown: R
+    }
+  );
+};
+export {
+  Q as AnalyticsAnalysisOverlay
+};
+//# sourceMappingURL=AnalyticsAnalysisOverlay.js.map

package/components/analyticsAnalysisOverlay/AnalyticsAnalysisOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsAnalysisOverlay.js","sources":["../../../src/components/analyticsAnalysisOverlay/AnalyticsAnalysisOverlay.tsx"],"sourcesContent":["import { useCallback, useState, type CSSProperties } from 'react';\n\nimport Notification from '../../Notification';\nimport useDraggableElement from '../../hooks/useDraggableElement';\nimport {\n    buildAnalyticsAnalysisData,\n    hasRequiredAnalyticsHeaderRow,\n    type AnalyticsReportEntry,\n} from '../../utils/analytics/analyticsAnalysisUtils';\nimport useAnalyticsOverlayDom from '../../utils/analytics/useAnalyticsOverlayDom';\nimport { AnalyticsAnalysisBanner } from './AnalyticsAnalysisBanner';\n\ntype AnalyticsAnalysisOverlayProps = {\n    overlayBackgroundOpacity?: number;\n    bannerStartCoordinates?: {\n        top: number;\n        left: number;\n    };\n};\n\nexport const AnalyticsAnalysisOverlay = (props: AnalyticsAnalysisOverlayProps) => {\n    const { overlayBackgroundOpacity = 0.5, bannerStartCoordinates } = props;\n    const normalizedOverlayBackgroundOpacity = Math.min(1, Math.max(0, overlayBackgroundOpacity));\n    const startTop = bannerStartCoordinates?.top;\n    const startLeft = bannerStartCoordinates?.left;\n    const hasCustomStartCoordinates =\n        typeof startTop === 'number' &&\n        Number.isFinite(startTop) &&\n        typeof startLeft === 'number' &&\n        Number.isFinite(startLeft);\n    const [analyticsLookup, setAnalyticsLookup] = useState<Map<string, AnalyticsReportEntry[]>>(() => new Map());\n    const [analyticsDateRangeLabel, setAnalyticsDateRangeLabel] = useState<string | null>(null);\n    const [analyticsTotalUsers, setAnalyticsTotalUsers] = useState<number | null>(null);\n    const [loadedCsvName, setLoadedCsvName] = useState<string | null>(null);\n    const [showOverlayDetails, setShowOverlayDetails] = useState(true);\n    const [showOverlayLabelText, setShowOverlayLabelText] = useState(true);\n    const { draggableRef, isDragging, position, onDragHandlePointerDown } = useDraggableElement<HTMLDivElement>();\n    const metadataBannerHost = useAnalyticsOverlayDom({\n        analyticsLookup,\n        overlayBackgroundOpacity: normalizedOverlayBackgroundOpacity,\n        showOverlayDetails,\n        showOverlayLabelText,\n        analyticsTotalUsers,\n    });\n\n    const handleCsvPick = useCallback(async (files: File[]) => {\n        const csvFiles = files.filter(file => file.name.toLowerCase().endsWith('.csv'));\n\n        if (csvFiles.length === 0) {\n            setAnalyticsLookup(new Map());\n            setAnalyticsDateRangeLabel(null);\n            setAnalyticsTotalUsers(null);\n            setLoadedCsvName(null);\n            return;\n        }\n\n        const selectedFile = csvFiles[0];\n        const csvRaw = await selectedFile.text();\n\n        if (!hasRequiredAnalyticsHeaderRow(csvRaw)) {\n            Notification.error(\n                'A Google Analytics CSV report based on the \"UIKIT AnalyticsAnalysisOverlay Template\" is required.',\n                {\n                    title: 'Unsupported CSV',\n                }\n            );\n            setAnalyticsLookup(new Map());\n            setAnalyticsDateRangeLabel(null);\n            setAnalyticsTotalUsers(null);\n            setLoadedCsvName(null);\n            return;\n        }\n\n        const uploads = [\n            {\n                reportName: selectedFile.name,\n                csvRaw,\n            },\n        ];\n        const analysisData = buildAnalyticsAnalysisData(uploads);\n\n        setAnalyticsLookup(analysisData.analyticsLookup);\n        setAnalyticsDateRangeLabel(analysisData.analyticsDateRangeLabel);\n        setAnalyticsTotalUsers(analysisData.analyticsTotalUsers);\n        setLoadedCsvName(selectedFile.name);\n    }, []);\n\n    const handleClearCsv = useCallback(() => {\n        setAnalyticsLookup(new Map());\n        setAnalyticsDateRangeLabel(null);\n        setAnalyticsTotalUsers(null);\n        setLoadedCsvName(null);\n    }, []);\n\n    const bannerStyle: CSSProperties = position.hasDragged\n        ? {\n              top: `${position.top}px`,\n              left: `${position.left}px`,\n          }\n        : hasCustomStartCoordinates\n          ? {\n                top: `${startTop}px`,\n                left: `${startLeft}px`,\n            }\n          : {\n                top: '70px',\n                left: '50%',\n                transform: 'translateX(-50%)',\n            };\n\n    return (\n        <AnalyticsAnalysisBanner\n            host={metadataBannerHost}\n            bannerRef={draggableRef}\n            bannerStyle={bannerStyle}\n            analyticsDateRangeLabel={analyticsDateRangeLabel}\n            loadedCsvName={loadedCsvName}\n            showOverlayDetails={showOverlayDetails}\n            showOverlayLabelText={showOverlayLabelText}\n            isDragging={isDragging}\n            onCsvPick={handleCsvPick}\n            onToggleOverlayDetails={() => setShowOverlayDetails(previousState => !previousState)}\n            onToggleOverlayLabelText={() => setShowOverlayLabelText(previousState => !previousState)}\n            onClearCsv={handleClearCsv}\n            onDragHandlePointerDown={onDragHandlePointerDown}\n        />\n    );\n};\n"],"names":["AnalyticsAnalysisOverlay","props","overlayBackgroundOpacity","bannerStartCoordinates","normalizedOverlayBackgroundOpacity","startTop","startLeft","hasCustomStartCoordinates","analyticsLookup","setAnalyticsLookup","useState","analyticsDateRangeLabel","setAnalyticsDateRangeLabel","analyticsTotalUsers","setAnalyticsTotalUsers","loadedCsvName","setLoadedCsvName","showOverlayDetails","setShowOverlayDetails","showOverlayLabelText","setShowOverlayLabelText","draggableRef","isDragging","position","onDragHandlePointerDown","useDraggableElement","metadataBannerHost","useAnalyticsOverlayDom","handleCsvPick","useCallback","files","csvFiles","file","selectedFile","csvRaw","hasRequiredAnalyticsHeaderRow","Notification","uploads","analysisData","buildAnalyticsAnalysisData","handleClearCsv","bannerStyle","jsx","AnalyticsAnalysisBanner","previousState"],"mappings":"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"}

package/components/applicationHeader/AppMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppMenuContent.js","sources":["../../../src/components/applicationHeader/AppMenuContent.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { ModulePropType } from './ApplicationHeader';\n\nexport type AppMenuContentProps = {\n    appMenuItems: ModulePropType[];\n    appNavigator?: React.ReactNode;\n};\n\nconst AppMenuContent = (props: AppMenuContentProps) => {\n    const { appMenuItems, appNavigator } = props;\n\n    // In case there is a navigation component injected into the header,\n    // render this component\n    if (appNavigator) {\n        return (\n            <li role='presentation' key='app-navigator'>\n                {appNavigator}\n            </li>\n        );\n    }\n\n    // If there is a list of appMenuItems given, render them as a list\n    return (\n        <>\n            {appMenuItems.map(module => {\n                return (\n                    <li role='presentation' key={`link-icon-${module.key}`}>\n                        {module.route}\n                    </li>\n                );\n            })}\n        </>\n    );\n};\n\nexport default AppMenuContent;\n"],"names":["AppMenuContent","props","appMenuItems","appNavigator","jsx","Fragment","module"],"mappings":";AASA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,cAAAC,GAAc,cAAAC,EAAA,IAAiBF;AAIvC,SAAIE,IAEI,gBAAAC,EAAC,MAAA,EAAG,MAAK,gBACJ,eADuB,eAE5B,IAMJ,gBAAAA,EAAAC,GAAA,EACK,UAAAH,EAAa,IAAI,CAAAI,MAEV,gBAAAF,EAAC,QAAG,MAAK,gBACJ,YAAO,MAAA,GADiB,aAAaE,EAAO,GAAG,EAEpD,CAEP,EAAA,CACL;AAER;"}
+{"version":3,"file":"AppMenuContent.js","sources":["../../../src/components/applicationHeader/AppMenuContent.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { ModulePropType } from './ApplicationHeader';\n\nexport type AppMenuContentProps = {\n    appMenuItems: ModulePropType[];\n    appNavigator?: React.ReactNode;\n};\n\nconst AppMenuContent = (props: AppMenuContentProps) => {\n    const { appMenuItems, appNavigator } = props;\n\n    // In case there is a navigation component injected into the header,\n    // render this component\n    if (appNavigator) {\n        return (\n            <li role='presentation' key='app-navigator'>\n                {appNavigator}\n            </li>\n        );\n    }\n\n    // If there is a list of appMenuItems given, render them as a list\n    return (\n        <>\n            {appMenuItems.map(module => (\n                <li role='presentation' key={`link-icon-${module.key}`}>\n                    {module.route}\n                </li>\n            ))}\n        </>\n    );\n};\n\nexport default AppMenuContent;\n"],"names":["AppMenuContent","props","appMenuItems","appNavigator","jsx","Fragment","module"],"mappings":";AASA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,cAAAC,GAAc,cAAAC,EAAA,IAAiBF;AAIvC,SAAIE,IAEI,gBAAAC,EAAC,MAAA,EAAG,MAAK,gBACJ,eADuB,eAE5B,IAMJ,gBAAAA,EAAAC,GAAA,EACK,UAAAH,EAAa,IAAI,CAAAI,wBACb,MAAA,EAAG,MAAK,gBACJ,UAAAA,EAAO,SADiB,aAAaA,EAAO,GAAG,EAEpD,CACH,GACL;AAER;"}

package/components/applicationHeader/ApplicationActionBar.js

@@ -1,13 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
 const l = (n) => {
-  const { items: r, nodeRef: e, className: i = "", ...t } = n;
+  const { items: e, nodeRef: i, className: r = "", ...t } = n;
   return /* @__PURE__ */ a(
     "ul",
     {
       ...t,
-      className: `ApplicationActionBar nav navbar-nav navbar-right ${i}`,
-      ref: e,
-      children: r?.map((o, s) => /* @__PURE__ */ a("li", { role: "presentation", className: "navigationItem", children: o }, s))
+      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))
     }
   );
 };

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                return (\n                    <li key={index} role='presentation' className='navigationItem'>\n                        {item}\n                    </li>\n                );\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,wBAEV,MAAA,EAAe,MAAK,gBAAe,WAAU,kBACzC,eADIA,CAET,CAEP;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"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;"}

package/components/applicationHeader/CollapsedNavItem.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { isEmpty as e } from "es-toolkit/compat";
-const f = c((l, n) => {
-  const { show: s = !1, navItems: r, actionBarItems: d, onDropdownClick: p, onItemClick: i } = l;
-  return e(r) && e(d) ? null : /* @__PURE__ */ t("li", { className: `CollapsedDropdown dropdown ${s ? "open" : ""}`, ref: n, children: [
+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",
       {
@@ -16,16 +16,7 @@ const f = c((l, n) => {
         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: r.map((a) => /* @__PURE__ */ o(
-      "li",
-      {
-        className: "submodule",
-        onClick: i,
-        "data-nav-item-key": a.key,
-        children: a.route
-      },
-      a.key
-    )) })
+    /* @__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");
 });
 export {

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                    return (\n                        <li\n                            key={navItem.key}\n                            className='submodule'\n                            onClick={onItemClick}\n                            data-nav-item-key={navItem.key}\n                        >\n                            {navItem.route}\n                        </li>\n                    );\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,MAEN,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAU;AAAA,QACV,SAASF;AAAA,QACT,qBAAmBG,EAAQ;AAAA,QAE1B,UAAAA,EAAQ;AAAA,MAAA;AAAA,MALJA,EAAQ;AAAA,IAAA,CAQxB,EAAA,CACL;AAAA,EAAA,EAAA,GAzBuE,oBA0B3E;AAER,CAAC;"}
+{"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;"}

package/components/applicationHeader/NavItems.js

@@ -5,10 +5,10 @@ import q from "../../utils/classNames.js";
 import z from "../../hooks/useClickOutside.js";
 import B from "./CollapsedNavItem.js";
 const $ = 50, F = 15, Q = (C) => {
-  const { navItems: r = [], actionBarItems: d = [], containerWidth: k } = C, [n, a] = m(!1), [u, W] = m([]), [y, g] = m([]), w = z(() => a(!1)), f = b(null), t = b(!0);
+  const { navItems: n = [], actionBarItems: d = [], containerWidth: k } = C, [o, a] = m(!1), [u, W] = m([]), [y, g] = m([]), w = z(() => a(!1)), f = b(null), t = b(!0);
   L(() => {
     t.current = !0;
-  }, [r, d, k]), V(() => {
+  }, [n, d, k]), V(() => {
     t.current && E();
   });
   const D = (e) => e.scrollWidth - $ - F, E = () => {
@@ -18,22 +18,22 @@ const $ = 50, F = 15, Q = (C) => {
     const s = [...e.children || []], v = D(e);
     if (v < 0)
       return;
-    let o = 0;
+    let r = 0;
     const I = [], N = [];
     s.forEach((l) => {
       if (!l.className)
         return;
-      o = o + l.scrollWidth;
-      const c = r.find((A) => {
+      r = r + l.scrollWidth;
+      const c = n.find((A) => {
         const h = l.attributes.getNamedItem("data-nav-item-key");
         return h && A.key === h.value;
       });
-      c && (v > o ? I.push(c) : N.push(c));
+      c && (v > r ? I.push(c) : N.push(c));
     }), t.current = !1, g(I), W(N);
   }, O = () => {
-    a(!n);
+    a(!o);
   }, S = () => {
-    n && a(!1);
+    o && a(!1);
   }, p = (e, s) => /* @__PURE__ */ i(
     "li",
     {
@@ -48,7 +48,7 @@ const $ = 50, F = 15, Q = (C) => {
       B,
       {
         ref: w,
-        show: n,
+        show: o,
         navItems: u,
         actionBarItems: d,
         onDropdownClick: O,
@@ -56,7 +56,7 @@ const $ = 50, F = 15, Q = (C) => {
       },
       "CollapsedNavItem"
     )
-  ] : r.map((e) => p(e, t.current)), R = q("SubmoduleNavigation", "nav");
+  ] : n.map((e) => p(e, t.current)), R = q("SubmoduleNavigation", "nav");
   return /* @__PURE__ */ i("ul", { className: R, ref: f, children: x() });
 };
 export {

package/components/applicationHeader/NavItems.js.map

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