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

package/components/table/selection/useTableSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSelection.js","sources":["../../../../src/components/table/selection/useTableSelection.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { resolveRowKey } from '../model/resolveRowMeta';\nimport type { TableRowId } from '../Table.types';\n\n/**\n * Configuration for `useTableSelection`.\n */\nexport type UseTableSelectionOptions<RowType extends Record<string, unknown>> = {\n    /**\n     * Data rows that participate in active-row and selection state.\n     */\n    rows: RowType[];\n\n    /**\n     * Optional key accessor used to derive stable row ids.\n     *\n     * If omitted, the row index is used as a fallback.\n     */\n    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => TableRowId);\n\n    /**\n     * Optional initially active row id.\n     */\n    initialActiveRowId?: TableRowId;\n\n    /**\n     * Optional initially selected row ids.\n     */\n    initialSelectedRowIds?: TableRowId[];\n};\n\n/**\n * Selection and active-row state returned by `useTableSelection`.\n */\nexport type UseTableSelectionReturn = {\n    /**\n     * Currently active row id.\n     */\n    activeRowId?: TableRowId;\n\n    /**\n     * Currently selected row ids.\n     */\n    selectedRowIds: TableRowId[];\n\n    /**\n     * Whether at least one row is currently selected.\n     */\n    hasSelection: boolean;\n\n    /**\n     * Whether all current rows are selected.\n     */\n    isAllSelected: boolean;\n\n    /**\n     * Checks whether a given row id is currently selected.\n     */\n    isRowSelected: (rowId: TableRowId) => boolean;\n\n    /**\n     * Sets the current active row id.\n     */\n    setActiveRowId: (rowId: TableRowId | undefined) => void;\n\n    /**\n     * Replaces the current selection with the provided row ids.\n     */\n    setSelectedRowIds: (rowIds: TableRowId[]) => void;\n\n    /**\n     * Toggles selection state for a single row id.\n     */\n    toggleRowSelection: (rowId: TableRowId) => void;\n\n    /**\n     * Selects or deselects all current rows.\n     *\n     * If `shouldSelect` is omitted, the hook toggles based on the current\n     * all-selected state.\n     */\n    toggleAllSelection: (shouldSelect?: boolean) => void;\n\n    /**\n     * Clears the current selection.\n     */\n    clearSelection: () => void;\n};\n\n/**\n * Small helper hook for controlled table demos and simple table integrations\n * that need active-row state plus checkbox selection state.\n *\n * The hook derives stable row ids from `rows` and `rowKey`, keeps the active\n * row and selection in sync when rows change, and provides convenience helpers\n * for single-row and all-row toggling.\n */\nconst useTableSelection = <RowType extends Record<string, unknown>>(\n    props: UseTableSelectionOptions<RowType>\n): UseTableSelectionReturn => {\n    const { rows, rowKey, initialActiveRowId, initialSelectedRowIds = [] } = props;\n\n    const rowIds = useMemo(() => rows.map((row, rowIndex) => resolveRowKey(row, rowIndex, rowKey)), [rows, rowKey]);\n    const rowIdSet = useMemo(() => new Set(rowIds), [rowIds]);\n\n    const [activeRowId, setActiveRowId] = useState<TableRowId | undefined>(initialActiveRowId);\n    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>(initialSelectedRowIds);\n\n    useEffect(() => {\n        setSelectedRowIds(previousSelectedRowIds => previousSelectedRowIds.filter(rowId => rowIdSet.has(rowId)));\n        setActiveRowId(previousActiveRowId =>\n            previousActiveRowId !== undefined && rowIdSet.has(previousActiveRowId) ? previousActiveRowId : undefined\n        );\n    }, [rowIdSet]);\n\n    const toggleRowSelection = (rowId: TableRowId) => {\n        setSelectedRowIds(previousSelectedRowIds =>\n            previousSelectedRowIds.includes(rowId)\n                ? previousSelectedRowIds.filter(selectedRowId => selectedRowId !== rowId)\n                : [...previousSelectedRowIds, rowId]\n        );\n    };\n\n    const toggleAllSelection = (shouldSelect = !rowIds.every(rowId => selectedRowIds.includes(rowId))) => {\n        setSelectedRowIds(shouldSelect ? rowIds : []);\n    };\n\n    const clearSelection = () => {\n        setSelectedRowIds([]);\n    };\n\n    return {\n        activeRowId,\n        selectedRowIds,\n        hasSelection: selectedRowIds.length > 0,\n        isAllSelected: rowIds.length > 0 && rowIds.every(rowId => selectedRowIds.includes(rowId)),\n        isRowSelected: rowId => selectedRowIds.includes(rowId),\n        setActiveRowId,\n        setSelectedRowIds,\n        toggleRowSelection,\n        toggleAllSelection,\n        clearSelection,\n    };\n};\n\nexport default useTableSelection;\n"],"names":["useTableSelection","props","rows","rowKey","initialActiveRowId","initialSelectedRowIds","rowIds","useMemo","row","rowIndex","resolveRowKey","rowIdSet","activeRowId","setActiveRowId","useState","selectedRowIds","setSelectedRowIds","useEffect","previousSelectedRowIds","rowId","previousActiveRowId","toggleRowSelection","selectedRowId","toggleAllSelection","shouldSelect","clearSelection"],"mappings":";;AAkGA,MAAMA,IAAoB,CACtBC,MAC0B;AAC1B,QAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,oBAAAC,GAAoB,uBAAAC,IAAwB,CAAA,MAAOJ,GAEnEK,IAASC,EAAQ,MAAML,EAAK,IAAI,CAACM,GAAKC,MAAaC,EAAcF,GAAKC,GAAUN,CAAM,CAAC,GAAG,CAACD,GAAMC,CAAM,CAAC,GACxGQ,IAAWJ,EAAQ,MAAM,IAAI,IAAID,CAAM,GAAG,CAACA,CAAM,CAAC,GAElD,CAACM,GAAaC,CAAc,IAAIC,EAAiCV,CAAkB,GACnF,CAACW,GAAgBC,CAAiB,IAAIF,EAAuBT,CAAqB;AAExF,EAAAY,EAAU,MAAM;AACZ,IAAAD,EAAkB,CAAAE,MAA0BA,EAAuB,OAAO,CAAAC,MAASR,EAAS,IAAIQ,CAAK,CAAC,CAAC,GACvGN;AAAA,MAAe,OACXO,MAAwB,UAAaT,EAAS,IAAIS,CAAmB,IAAIA,IAAsB;AAAA,IAAA;AAAA,EAEvG,GAAG,CAACT,CAAQ,CAAC;AAEb,QAAMU,IAAqB,CAACF,MAAsB;AAC9C,IAAAH;AAAA,MAAkB,CAAAE,MACdA,EAAuB,SAASC,CAAK,IAC/BD,EAAuB,OAAO,CAAAI,MAAiBA,MAAkBH,CAAK,IACtE,CAAC,GAAGD,GAAwBC,CAAK;AAAA,IAAA;AAAA,EAE/C,GAEMI,IAAqB,CAACC,IAAe,CAAClB,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC,MAAM;AAClG,IAAAH,EAAkBQ,IAAelB,IAAS,EAAE;AAAA,EAChD,GAEMmB,IAAiB,MAAM;AACzB,IAAAT,EAAkB,CAAA,CAAE;AAAA,EACxB;AAEA,SAAO;AAAA,IACH,aAAAJ;AAAA,IACA,gBAAAG;AAAA,IACA,cAAcA,EAAe,SAAS;AAAA,IACtC,eAAeT,EAAO,SAAS,KAAKA,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC;AAAA,IACxF,eAAe,CAAAA,MAASJ,EAAe,SAASI,CAAK;AAAA,IACrD,gBAAAN;AAAA,IACA,mBAAAG;AAAA,IACA,oBAAAK;AAAA,IACA,oBAAAE;AAAA,IACA,gBAAAE;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useTableSelection.js","sources":["../../../../src/components/table/selection/useTableSelection.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { resolveRowKey } from '../model/resolveRowMeta';\nimport type { TableRowData, TableRowId } from '../Table.types';\n\n/**\n * Configuration for `useTableSelection`.\n */\nexport type UseTableSelectionOptions<RowType extends TableRowData> = {\n    /**\n     * Data rows that participate in active-row and selection state.\n     */\n    rows: RowType[];\n\n    /**\n     * Optional key accessor used to derive stable row ids.\n     *\n     * If omitted, the row index is used as a fallback.\n     */\n    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => TableRowId);\n\n    /**\n     * Optional initially active row id.\n     */\n    initialActiveRowId?: TableRowId;\n\n    /**\n     * Optional initially selected row ids.\n     */\n    initialSelectedRowIds?: TableRowId[];\n};\n\n/**\n * Selection and active-row state returned by `useTableSelection`.\n */\nexport type UseTableSelectionReturn = {\n    /**\n     * Currently active row id.\n     */\n    activeRowId?: TableRowId;\n\n    /**\n     * Currently selected row ids.\n     */\n    selectedRowIds: TableRowId[];\n\n    /**\n     * Whether at least one row is currently selected.\n     */\n    hasSelection: boolean;\n\n    /**\n     * Whether all current rows are selected.\n     */\n    isAllSelected: boolean;\n\n    /**\n     * Checks whether a given row id is currently selected.\n     */\n    isRowSelected: (rowId: TableRowId) => boolean;\n\n    /**\n     * Sets the current active row id.\n     */\n    setActiveRowId: (rowId: TableRowId | undefined) => void;\n\n    /**\n     * Replaces the current selection with the provided row ids.\n     */\n    setSelectedRowIds: (rowIds: TableRowId[]) => void;\n\n    /**\n     * Toggles selection state for a single row id.\n     */\n    toggleRowSelection: (rowId: TableRowId) => void;\n\n    /**\n     * Selects or deselects all current rows.\n     *\n     * If `shouldSelect` is omitted, the hook toggles based on the current\n     * all-selected state.\n     */\n    toggleAllSelection: (shouldSelect?: boolean) => void;\n\n    /**\n     * Clears the current selection.\n     */\n    clearSelection: () => void;\n};\n\n/**\n * Small helper hook for controlled table demos and simple table integrations\n * that need active-row state plus checkbox selection state.\n *\n * The hook derives stable row ids from `rows` and `rowKey`, keeps the active\n * row and selection in sync when rows change, and provides convenience helpers\n * for single-row and all-row toggling.\n */\nconst useTableSelection = <RowType extends TableRowData>(\n    props: UseTableSelectionOptions<RowType>\n): UseTableSelectionReturn => {\n    const { rows, rowKey, initialActiveRowId, initialSelectedRowIds = [] } = props;\n\n    const rowIds = useMemo(() => rows.map((row, rowIndex) => resolveRowKey(row, rowIndex, rowKey)), [rows, rowKey]);\n    const rowIdSet = useMemo(() => new Set(rowIds), [rowIds]);\n\n    const [activeRowId, setActiveRowId] = useState<TableRowId | undefined>(initialActiveRowId);\n    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>(initialSelectedRowIds);\n\n    useEffect(() => {\n        setSelectedRowIds(previousSelectedRowIds => previousSelectedRowIds.filter(rowId => rowIdSet.has(rowId)));\n        setActiveRowId(previousActiveRowId =>\n            previousActiveRowId !== undefined && rowIdSet.has(previousActiveRowId) ? previousActiveRowId : undefined\n        );\n    }, [rowIdSet]);\n\n    const toggleRowSelection = (rowId: TableRowId) => {\n        setSelectedRowIds(previousSelectedRowIds =>\n            previousSelectedRowIds.includes(rowId)\n                ? previousSelectedRowIds.filter(selectedRowId => selectedRowId !== rowId)\n                : [...previousSelectedRowIds, rowId]\n        );\n    };\n\n    const toggleAllSelection = (shouldSelect = !rowIds.every(rowId => selectedRowIds.includes(rowId))) => {\n        setSelectedRowIds(shouldSelect ? rowIds : []);\n    };\n\n    const clearSelection = () => {\n        setSelectedRowIds([]);\n    };\n\n    return {\n        activeRowId,\n        selectedRowIds,\n        hasSelection: selectedRowIds.length > 0,\n        isAllSelected: rowIds.length > 0 && rowIds.every(rowId => selectedRowIds.includes(rowId)),\n        isRowSelected: rowId => selectedRowIds.includes(rowId),\n        setActiveRowId,\n        setSelectedRowIds,\n        toggleRowSelection,\n        toggleAllSelection,\n        clearSelection,\n    };\n};\n\nexport default useTableSelection;\n"],"names":["useTableSelection","props","rows","rowKey","initialActiveRowId","initialSelectedRowIds","rowIds","useMemo","row","rowIndex","resolveRowKey","rowIdSet","activeRowId","setActiveRowId","useState","selectedRowIds","setSelectedRowIds","useEffect","previousSelectedRowIds","rowId","previousActiveRowId","toggleRowSelection","selectedRowId","toggleAllSelection","shouldSelect","clearSelection"],"mappings":";;AAkGA,MAAMA,IAAoB,CACtBC,MAC0B;AAC1B,QAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,oBAAAC,GAAoB,uBAAAC,IAAwB,CAAA,MAAOJ,GAEnEK,IAASC,EAAQ,MAAML,EAAK,IAAI,CAACM,GAAKC,MAAaC,EAAcF,GAAKC,GAAUN,CAAM,CAAC,GAAG,CAACD,GAAMC,CAAM,CAAC,GACxGQ,IAAWJ,EAAQ,MAAM,IAAI,IAAID,CAAM,GAAG,CAACA,CAAM,CAAC,GAElD,CAACM,GAAaC,CAAc,IAAIC,EAAiCV,CAAkB,GACnF,CAACW,GAAgBC,CAAiB,IAAIF,EAAuBT,CAAqB;AAExF,EAAAY,EAAU,MAAM;AACZ,IAAAD,EAAkB,CAAAE,MAA0BA,EAAuB,OAAO,CAAAC,MAASR,EAAS,IAAIQ,CAAK,CAAC,CAAC,GACvGN;AAAA,MAAe,OACXO,MAAwB,UAAaT,EAAS,IAAIS,CAAmB,IAAIA,IAAsB;AAAA,IAAA;AAAA,EAEvG,GAAG,CAACT,CAAQ,CAAC;AAEb,QAAMU,IAAqB,CAACF,MAAsB;AAC9C,IAAAH;AAAA,MAAkB,CAAAE,MACdA,EAAuB,SAASC,CAAK,IAC/BD,EAAuB,OAAO,CAAAI,MAAiBA,MAAkBH,CAAK,IACtE,CAAC,GAAGD,GAAwBC,CAAK;AAAA,IAAA;AAAA,EAE/C,GAEMI,IAAqB,CAACC,IAAe,CAAClB,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC,MAAM;AAClG,IAAAH,EAAkBQ,IAAelB,IAAS,EAAE;AAAA,EAChD,GAEMmB,IAAiB,MAAM;AACzB,IAAAT,EAAkB,CAAA,CAAE;AAAA,EACxB;AAEA,SAAO;AAAA,IACH,aAAAJ;AAAA,IACA,gBAAAG;AAAA,IACA,cAAcA,EAAe,SAAS;AAAA,IACtC,eAAeT,EAAO,SAAS,KAAKA,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC;AAAA,IACxF,eAAe,CAAAA,MAASJ,EAAe,SAASI,CAAK;AAAA,IACrD,gBAAAN;AAAA,IACA,mBAAAG;AAAA,IACA,oBAAAK;AAAA,IACA,oBAAAE;AAAA,IACA,gBAAAE;AAAA,EAAA;AAER;"}

package/components/table/shared/getCellContentOverflowClassName.d.ts

@@ -0,0 +1,3 @@
+import { TableCellOverflow } from '../Table.types';
+declare const getCellContentOverflowClassName: (overflow?: TableCellOverflow) => "ellipsis-1" | "overflow-hidden" | "ellipsis-2" | "ellipsis-3" | "overflow-visible";
+export default getCellContentOverflowClassName;

package/components/table/shared/getCellContentOverflowClassName.js

@@ -0,0 +1,18 @@
+const s = (e = "hidden") => {
+  switch (e) {
+    case "visible":
+      return "overflow-visible";
+    case "ellipsis":
+      return "ellipsis-1";
+    case "ellipsis-2":
+      return "ellipsis-2";
+    case "ellipsis-3":
+      return "ellipsis-3";
+    default:
+      return "overflow-hidden";
+  }
+};
+export {
+  s as default
+};
+//# sourceMappingURL=getCellContentOverflowClassName.js.map

package/components/table/shared/getCellContentOverflowClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCellContentOverflowClassName.js","sources":["../../../../src/components/table/shared/getCellContentOverflowClassName.ts"],"sourcesContent":["import type { TableCellOverflow } from '../Table.types';\n\nconst getCellContentOverflowClassName = (overflow: TableCellOverflow = 'hidden') => {\n    switch (overflow) {\n        case 'visible':\n            return 'overflow-visible';\n        case 'ellipsis':\n            return 'ellipsis-1';\n        case 'ellipsis-2':\n            return 'ellipsis-2';\n        case 'ellipsis-3':\n            return 'ellipsis-3';\n        default:\n            return 'overflow-hidden';\n    }\n};\n\nexport default getCellContentOverflowClassName;\n"],"names":["getCellContentOverflowClassName","overflow"],"mappings":"AAEA,MAAMA,IAAkC,CAACC,IAA8B,aAAa;AAChF,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB;"}

package/components/table/shared/getInteractiveRowProps.d.ts

@@ -1,11 +1,12 @@
 import { KeyboardEventHandler } from 'react';
-type GetInteractiveRowPropsArgs<RowType extends Record<string, unknown>> = {
+import { TableRowData } from '../Table.types';
+type GetInteractiveRowPropsArgs<RowType extends TableRowData> = {
     isClickable: boolean;
     onRowClick?: (row: RowType, rowIndex: number) => void;
     row: RowType;
     rowIndex: number;
 };
-export declare const getInteractiveRowProps: <RowType extends Record<string, unknown>>(args: GetInteractiveRowPropsArgs<RowType>) => {
+export declare const getInteractiveRowProps: <RowType extends TableRowData>(args: GetInteractiveRowPropsArgs<RowType>) => {
     isClickableClassName: string | undefined;
     onClick: (() => void | undefined) | undefined;
     onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;

package/components/table/shared/getInteractiveRowProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"getInteractiveRowProps.js","sources":["../../../../src/components/table/shared/getInteractiveRowProps.ts"],"sourcesContent":["import type { KeyboardEventHandler } from 'react';\n\ntype GetInteractiveRowPropsArgs<RowType extends Record<string, unknown>> = {\n    isClickable: boolean;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    row: RowType;\n    rowIndex: number;\n};\n\nexport const getInteractiveRowProps = <RowType extends Record<string, unknown>>(\n    args: GetInteractiveRowPropsArgs<RowType>\n) => {\n    const { isClickable, onRowClick, row, rowIndex } = args;\n\n    const onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined = isClickable\n        ? event => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  onRowClick?.(row, rowIndex);\n              }\n          }\n        : undefined;\n\n    return {\n        isClickableClassName: isClickable ? 'table-row-clickable' : undefined,\n        onClick: isClickable ? () => onRowClick?.(row, rowIndex) : undefined,\n        onKeyDown,\n        tabIndex: isClickable ? 0 : undefined,\n    };\n};\n"],"names":["getInteractiveRowProps","args","isClickable","onRowClick","row","rowIndex","event"],"mappings":"AASO,MAAMA,IAAyB,CAClCC,MACC;AACD,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,KAAAC,GAAK,UAAAC,MAAaJ;AAWnD,SAAO;AAAA,IACH,sBAAsBC,IAAc,wBAAwB;AAAA,IAC5D,SAASA,IAAc,MAAMC,IAAaC,GAAKC,CAAQ,IAAI;AAAA,IAC3D,WAZgEH,IAC9D,CAAAI,MAAS;AACL,OAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACNH,IAAaC,GAAKC,CAAQ;AAAA,IAElC,IACA;AAAA,IAMF,UAAUH,IAAc,IAAI;AAAA,EAAA;AAEpC;"}
+{"version":3,"file":"getInteractiveRowProps.js","sources":["../../../../src/components/table/shared/getInteractiveRowProps.ts"],"sourcesContent":["import type { KeyboardEventHandler } from 'react';\n\nimport type { TableRowData } from '../Table.types';\n\ntype GetInteractiveRowPropsArgs<RowType extends TableRowData> = {\n    isClickable: boolean;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    row: RowType;\n    rowIndex: number;\n};\n\nexport const getInteractiveRowProps = <RowType extends TableRowData>(args: GetInteractiveRowPropsArgs<RowType>) => {\n    const { isClickable, onRowClick, row, rowIndex } = args;\n\n    const onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined = isClickable\n        ? event => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  onRowClick?.(row, rowIndex);\n              }\n          }\n        : undefined;\n\n    return {\n        isClickableClassName: isClickable ? 'table-row-clickable' : undefined,\n        onClick: isClickable ? () => onRowClick?.(row, rowIndex) : undefined,\n        onKeyDown,\n        tabIndex: isClickable ? 0 : undefined,\n    };\n};\n"],"names":["getInteractiveRowProps","args","isClickable","onRowClick","row","rowIndex","event"],"mappings":"AAWO,MAAMA,IAAyB,CAA+BC,MAA8C;AAC/G,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,KAAAC,GAAK,UAAAC,MAAaJ;AAWnD,SAAO;AAAA,IACH,sBAAsBC,IAAc,wBAAwB;AAAA,IAC5D,SAASA,IAAc,MAAMC,IAAaC,GAAKC,CAAQ,IAAI;AAAA,IAC3D,WAZgEH,IAC9D,CAAAI,MAAS;AACL,OAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACNH,IAAaC,GAAKC,CAAQ;AAAA,IAElC,IACA;AAAA,IAMF,UAAUH,IAAc,IAAI;AAAA,EAAA;AAEpC;"}

package/hooks/useUrlState.js

@@ -1,12 +1,12 @@
 import { useRef as R, useEffect as D } from "react";
 import { isNil as z, isEqual as v } from "es-toolkit";
-import { deserializeValue as T, toQueryString as M, serializeValue as A } from "../utils/routeUtils.js";
+import { toQueryString as T, deserializeValue as M, serializeValue as A } from "../utils/routeUtils.js";
 import E from "./useAfterMount.js";
 import U from "./useLatest.js";
 const C = (r) => {
   const e = r.replace(/^\?/, "");
   return new URLSearchParams(e).toString();
-}, L = (r, e) => r.customDeserialize ? r.customDeserialize(e) : T(e, r.type ?? "string"), N = (r, e) => r ?? e, I = (r) => {
+}, L = (r, e) => r.customDeserialize ? r.customDeserialize(e) : M(e, r.type ?? "string"), N = (r, e) => r ?? e, I = (r) => {
   const { valueToApply: e, currentStoreValue: t, urlRawValue: a, defaultValue: d } = r;
   if (typeof e > "u" || v(e, t))
     return !1;
@@ -74,7 +74,7 @@ const C = (r) => {
       const w = O(o, V, k);
       w !== m && (i = x({ nextParams: u, key: o.key, serializedValue: w }) || i, ((o.history ?? "push") === "push" || !k && K(o, m)) && (f = !0));
     }), i) {
-      const o = M(u, e), V = u.toString();
+      const o = T(u, e), V = u.toString();
       l.current = V, n && (S && o === "" ? localStorage.removeItem(n) : localStorage.setItem(n, o));
       const m = f ? "push" : "replace";
       h.current(o, m);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "2.3.0-beta.1",
+    "version": "2.3.0-beta.2",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",
@@ -46,9 +46,9 @@
         }
     },
     "devDependencies": {
-        "@biomejs/biome": "2.4.4",
+        "@biomejs/biome": "2.4.8",
         "@rio-cloud/biome-config": "1.2.0",
-        "@rio-cloud/vite-plugin-frontend-license-check": "1.2.0",
+        "@rio-cloud/vite-plugin-frontend-license-check": "3.0.0",
         "@testing-library/dom": "10.4.1",
         "@testing-library/jest-dom": "6.9.1",
         "@testing-library/react": "16.3.2",
@@ -60,16 +60,15 @@
         "@types/react-redux": "7.1.34",
         "@types/resize-observer-browser": "0.1.11",
         "@vitejs/plugin-react": "5.1.4",
-        "@vitest/coverage-c8": "0.33.0",
-        "autoprefixer": "10.4.24",
+        "@vitest/coverage-v8": "^4.1.1",
+        "autoprefixer": "10.4.27",
         "backstopjs": "6.3.25",
-        "copyfiles": "2.4.1",
         "dotenv": "17.3.1",
-        "glob": "13.0.5",
-        "happy-dom": "20.6.3",
+        "glob": "13.0.6",
+        "happy-dom": "20.8.7",
         "jsdom": "27.4.0",
         "jsdom-global": "3.0.2",
-        "postcss": "8.5.6",
+        "postcss": "8.5.8",
         "postcss-preset-env": "8.5.1",
         "postcss-short": "5.0.0",
         "pre-commit": "1.2.2",
@@ -77,9 +76,9 @@
         "react-dom": "18.0.0",
         "react-intl": "7.1.14",
         "rollup-plugin-copy": "3.5.0",
-        "sass": "1.97.3",
-        "strip-ansi": "7.1.2",
-        "svgo": "4.0.0",
+        "sass": "1.98.0",
+        "strip-ansi": "7.2.0",
+        "svgo": "4.0.1",
         "typescript": "5.9.3",
         "vite": "7.3.1",
         "vite-plugin-dts": "4.5.4",
@@ -98,14 +97,14 @@
         "@dnd-kit/utilities": "3.2.2",
         "@formkit/auto-animate": "0.9.0",
         "@popperjs/core": "2.11.8",
-        "@tanstack/react-virtual": "3.13.18",
+        "@tanstack/react-virtual": "3.13.23",
         "date-fns": "4.1.0",
         "driver.js": "1.4.0",
-        "es-toolkit": "1.44.0",
+        "es-toolkit": "1.45.1",
         "events": "3.3.0",
         "iframe-resizer-react": "1.1.0",
         "moment": "2.30.1",
-        "motion": "12.34.2",
+        "motion": "12.38.0",
         "natural-orderby": "5.0.0",
         "process": "0.11.10",
         "prop-types": "15.8.1",
@@ -113,14 +112,14 @@
         "react-content-loader": "7.1.2",
         "react-custom-scrollbars-4": "4.5.1",
         "react-datetime": "github:rio-cloud/react-datetime#v3.1.1-1-merged",
-        "react-day-picker": "9.13.2",
+        "react-day-picker": "9.14.0",
         "react-dropzone": "14.3.8",
         "react-imask": "7.6.1",
         "react-notifications": "1.7.4",
         "react-onclickoutside": "6.13.2",
         "react-popper": "2.3.0",
         "react-toastify": "11.0.5",
-        "recharts": "3.7.0",
+        "recharts": "3.8.0",
         "tiny-invariant": "1.3.3",
         "tslib": "2.8.1"
     },

package/utils/analytics/createAnalyticsOverlayTooltip.js

@@ -7,11 +7,11 @@ const k = [
 ], b = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 2
-}), L = (t, i) => {
-  const n = document.createElement("span");
-  return n.classList.add("rioglyph", t, i), n;
-}, u = (t) => {
-  const { iconClass: i, text: n } = t, a = document.createElement("div");
+}), L = (n, r) => {
+  const e = document.createElement("span");
+  return e.classList.add("rioglyph", n, r), e;
+}, u = (n) => {
+  const { iconClass: r, text: e } = n, a = document.createElement("div");
   a.classList.add(
     "display-flex",
     "align-items-center",
@@ -20,55 +20,55 @@ const k = [
     "text-size-16",
     "line-height-16",
     "margin-bottom--3"
-  ), a.appendChild(L(i, "text-size-16"));
-  const r = document.createElement("span");
-  return r.textContent = n, a.appendChild(r), a;
+  ), a.appendChild(L(r, "text-size-16"));
+  const i = document.createElement("span");
+  return i.textContent = e, a.appendChild(i), a;
 }, C = () => {
-  const t = document.createElement("div");
-  return t.classList.add("rounded", "padding-10", "bg-decent", "display-flex", "flex-column", "gap-5", "shadow-accent"), t;
-}, o = (t) => {
-  const { iconClass: i, label: n, right: a } = t, r = document.createElement("div");
-  r.classList.add("display-flex", "align-items-center", "gap-5");
+  const n = document.createElement("div");
+  return n.classList.add("rounded", "padding-10", "bg-decent", "display-flex", "flex-column", "gap-5", "shadow-accent"), n;
+}, o = (n) => {
+  const { iconClass: r, label: e, right: a } = n, i = document.createElement("div");
+  i.classList.add("display-flex", "align-items-center", "gap-5");
   const l = document.createElement("div");
   l.classList.add("display-flex", "align-items-center", "gap-5", "min-width-80");
-  const p = L(i, "text-size-14");
+  const p = L(r, "text-size-14");
   l.appendChild(p);
   const s = document.createElement("div");
-  s.classList.add("text-medium"), s.textContent = n, l.appendChild(s), r.appendChild(l);
-  const e = document.createElement("div");
-  if (e.classList.add("flex-1-1", "text-right"), typeof a == "string") {
+  s.classList.add("text-medium"), s.textContent = e, l.appendChild(s), i.appendChild(l);
+  const t = document.createElement("div");
+  if (t.classList.add("flex-1-1", "text-right"), typeof a == "string") {
     const c = document.createElement("div");
-    c.classList.add("word-break-all", "text-bold"), c.textContent = a, e.appendChild(c);
+    c.classList.add("word-break-all", "text-bold"), c.textContent = a, t.appendChild(c);
   } else
-    e.appendChild(a);
-  return r.appendChild(e), r;
-}, f = (t) => t === null ? "n/a" : `${b.format(t)}%`, N = () => typeof window < "u" && /^https?:/i.test(window.location.href) ? window.location.href : "https://rio.cloud", O = (t, i = N()) => {
+    t.appendChild(a);
+  return i.appendChild(t), i;
+}, f = (n) => n === null ? "n/a" : `${b.format(n)}%`, N = () => typeof window < "u" && /^https?:/i.test(window.location.href) ? window.location.href : "https://rio.cloud", O = (n, r = N()) => {
   try {
-    const n = new URL(t, i), a = {};
-    return k.forEach(({ queryParam: r }) => {
-      const l = n.searchParams.get(r)?.trim();
-      l && (a[r] = l);
+    const e = new URL(n, r), a = {};
+    return k.forEach(({ queryParam: i }) => {
+      const l = e.searchParams.get(i)?.trim();
+      l && (a[i] = l);
     }), Object.keys(a).length > 0 ? a : null;
   } catch {
     return null;
   }
-}, V = (t) => {
-  const i = t.getAttribute("href")?.trim() ?? t.closest("a[href]")?.href?.trim();
-  return i ? O(i) : null;
-}, G = (t) => {
-  const { eventTrigger: i, totalEventCount: n, analyticsTotalUsers: a } = t;
-  return a === null || a <= 0 ? null : i === "click" || i === "visibility" ? n / a * 100 : null;
-}, S = (t) => {
+}, V = (n) => {
+  const r = n.closest("a[href]"), e = n.getAttribute("href")?.trim() ?? r?.href?.trim();
+  return e ? O(e) : null;
+}, G = (n) => {
+  const { eventTrigger: r, totalEventCount: e, analyticsTotalUsers: a } = n;
+  return a === null || a <= 0 ? null : r === "click" || r === "visibility" ? e / a * 100 : null;
+}, S = (n) => {
   const {
-    overlayRoot: i,
-    trackingData: n,
+    overlayRoot: r,
+    trackingData: e,
     totalEventCount: a,
-    totalUserCount: r,
+    totalUserCount: i,
     analyticsTotalUsers: l,
     clickEvent: p,
     trackedElement: s
-  } = t, e = document.createElement("div");
-  e.setAttribute("data-analytics-overlay-tooltip", "true"), e.classList.add(
+  } = n, t = document.createElement("div");
+  t.setAttribute("data-analytics-overlay-tooltip", "true"), t.classList.add(
     "position-fixed",
     "pointer-events-all",
     "z-index-max",
@@ -85,21 +85,21 @@ const k = [
     "gap-10",
     "line-height-125rel"
   );
-  const c = n.eventTrigger === "click" ? "Clicks" : "Views", A = n.eventTrigger === "click" ? "rioglyph-click" : "rioglyph-eye-open", R = n.eventTrigger === "click" ? "Click rate" : "View rate", U = r > 0 ? a / r * 100 : null, v = G({
-    eventTrigger: n.eventTrigger,
+  const c = e.eventTrigger === "click" ? "Clicks" : "Views", A = e.eventTrigger === "click" ? "rioglyph-click" : "rioglyph-eye-open", R = e.eventTrigger === "click" ? "Click rate" : "View rate", U = i > 0 ? a / i * 100 : null, v = G({
+    eventTrigger: e.eventTrigger,
     totalEventCount: a,
     analyticsTotalUsers: l
-  }), _ = l !== null && l > 0 ? r / l * 100 : null, D = u({
+  }), _ = l !== null && l > 0 ? i / l * 100 : null, D = u({
     iconClass: "rioglyph-user",
     text: "Event users"
   });
-  e.appendChild(D);
+  t.appendChild(D);
   const g = C();
   g.appendChild(
     o({
       iconClass: "rioglyph-user",
       label: "Event users",
-      right: `${b.format(r)}`
+      right: `${b.format(i)}`
     })
   ), l !== null && (g.appendChild(
     o({
@@ -113,12 +113,12 @@ const k = [
       label: "Event rate (all users)",
       right: f(_)
     })
-  )), e.appendChild(g);
+  )), t.appendChild(g);
   const F = u({
     iconClass: "rioglyph-stats",
     text: "Element performance"
   });
-  e.appendChild(F);
+  t.appendChild(F);
   const d = C();
   d.appendChild(
     o({
@@ -132,51 +132,51 @@ const k = [
       label: R,
       right: f(U)
     })
-  ), n.eventTrigger === "click" && l !== null && d.appendChild(
+  ), e.eventTrigger === "click" && l !== null && d.appendChild(
     o({
       iconClass: "rioglyph-bar-chart-box",
       label: "Click rate (all users)",
       right: f(v)
     })
-  ), n.eventTrigger === "visibility" && l !== null && d.appendChild(
+  ), e.eventTrigger === "visibility" && l !== null && d.appendChild(
     o({
       iconClass: "rioglyph-bar-chart-box",
       label: "View rate (all users)",
       right: f(v)
     })
-  ), e.appendChild(d);
+  ), t.appendChild(d);
   const M = u({
     iconClass: "rioglyph-info-sign",
     text: "Tracking Attributes"
   });
-  e.appendChild(M);
+  t.appendChild(M);
   const h = C();
   h.appendChild(
     o({
       iconClass: "rioglyph-cog",
       label: "Action",
-      right: n.eventAction
+      right: e.eventAction
     })
   ), h.appendChild(
     o({
       iconClass: "rioglyph-emergency-stop",
       label: "Trigger",
-      right: n.eventTrigger
+      right: e.eventTrigger
     })
   ), h.appendChild(
     o({
       iconClass: "rioglyph-tag",
       label: "Label",
-      right: n.eventLabel
+      right: e.eventLabel
     })
-  ), e.appendChild(h);
+  ), t.appendChild(h);
   const w = V(s);
   if (w) {
     const $ = u({
       iconClass: "rioglyph-megaphone",
       text: "Campaign"
     });
-    e.appendChild($);
+    t.appendChild($);
     const E = C();
     k.forEach(({ queryParam: q, label: z }) => {
       const P = w[q];
@@ -187,13 +187,13 @@ const k = [
           right: P
         })
       );
-    }), e.appendChild(E);
+    }), t.appendChild(E);
   }
   const T = 12, m = 8;
-  i.appendChild(e);
+  r.appendChild(t);
   let x = p.clientX + T, y = p.clientY + T;
-  const H = window.innerWidth - e.offsetWidth - m, I = window.innerHeight - e.offsetHeight - m;
-  return x = Math.max(m, Math.min(x, H)), y = Math.max(m, Math.min(y, I)), e.style.left = `${x}px`, e.style.top = `${y}px`, e;
+  const H = window.innerWidth - t.offsetWidth - m, I = window.innerHeight - t.offsetHeight - m;
+  return x = Math.max(m, Math.min(x, H)), y = Math.max(m, Math.min(y, I)), t.style.left = `${x}px`, t.style.top = `${y}px`, t;
 };
 export {
   S as createAnalyticsOverlayTooltip,

package/utils/analytics/createAnalyticsOverlayTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"createAnalyticsOverlayTooltip.js","sources":["../../../src/utils/analytics/createAnalyticsOverlayTooltip.ts"],"sourcesContent":["type AnalyticsOverlayTooltipTrackingData = {\n    eventAction: string;\n    eventLabel: string;\n    eventTrigger: 'click' | 'visibility';\n};\n\nconst CAMPAIGN_QUERY_PARAM_CONFIG = [\n    { queryParam: 'utm_source', label: 'Source' },\n    { queryParam: 'utm_medium', label: 'Medium' },\n    { queryParam: 'utm_campaign', label: 'Campaign' },\n    { queryParam: 'utm_content', label: 'Content' },\n    { queryParam: 'utm_term', label: 'Term' },\n] as const;\n\ntype CampaignQueryParam = (typeof CAMPAIGN_QUERY_PARAM_CONFIG)[number]['queryParam'];\ntype AnalyticsOverlayTooltipCampaignData = Partial<Record<CampaignQueryParam, string>>;\n\ntype CreateAnalyticsOverlayTooltipProps = {\n    overlayRoot: HTMLElement;\n    trackingData: AnalyticsOverlayTooltipTrackingData;\n    totalEventCount: number;\n    totalUserCount: number;\n    analyticsTotalUsers: number | null;\n    clickEvent: MouseEvent;\n    trackedElement: HTMLElement;\n};\n\nconst numberFormatter = new Intl.NumberFormat('en-US', {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 2,\n});\n\nconst createIcon = (iconClass: string, sizeClass: string) => {\n    const icon = document.createElement('span');\n    icon.classList.add('rioglyph', iconClass, sizeClass);\n    return icon;\n};\n\nconst createTitle = (props: { iconClass: string; text: string }) => {\n    const { iconClass, text } = props;\n    const title = document.createElement('div');\n    title.classList.add(\n        'display-flex',\n        'align-items-center',\n        'gap-5',\n        'text-medium',\n        'text-size-16',\n        'line-height-16',\n        'margin-bottom--3'\n    );\n    title.appendChild(createIcon(iconClass, 'text-size-16'));\n\n    const titleText = document.createElement('span');\n    titleText.textContent = text;\n    title.appendChild(titleText);\n\n    return title;\n};\n\nconst createPanel = () => {\n    const panel = document.createElement('div');\n    panel.classList.add('rounded', 'padding-10', 'bg-decent', 'display-flex', 'flex-column', 'gap-5', 'shadow-accent');\n    return panel;\n};\n\nconst createInfoRow = (props: { iconClass: string; label: string; right: Node | string }) => {\n    const { iconClass, label, right } = props;\n\n    const row = document.createElement('div');\n    row.classList.add('display-flex', 'align-items-center', 'gap-5');\n\n    const leftContainer = document.createElement('div');\n    leftContainer.classList.add('display-flex', 'align-items-center', 'gap-5', 'min-width-80');\n\n    const icon = createIcon(iconClass, 'text-size-14');\n    leftContainer.appendChild(icon);\n\n    const labelNode = document.createElement('div');\n    labelNode.classList.add('text-medium');\n    labelNode.textContent = label;\n    leftContainer.appendChild(labelNode);\n    row.appendChild(leftContainer);\n\n    const rightContainer = document.createElement('div');\n    rightContainer.classList.add('flex-1-1', 'text-right');\n\n    if (typeof right === 'string') {\n        const rightText = document.createElement('div');\n        rightText.classList.add('word-break-all', 'text-bold');\n        rightText.textContent = right;\n        rightContainer.appendChild(rightText);\n    } else {\n        rightContainer.appendChild(right);\n    }\n\n    row.appendChild(rightContainer);\n    return row;\n};\n\nconst formatPercentage = (value: number | null) => (value === null ? 'n/a' : `${numberFormatter.format(value)}%`);\n\nconst getUrlParsingBaseHref = () => {\n    if (typeof window !== 'undefined' && /^https?:/i.test(window.location.href)) {\n        return window.location.href;\n    }\n\n    return 'https://rio.cloud';\n};\n\nexport const extractCampaignTrackingDataFromHref = (\n    href: string,\n    baseHref = getUrlParsingBaseHref()\n): AnalyticsOverlayTooltipCampaignData | null => {\n    try {\n        const url = new URL(href, baseHref);\n        const campaignData: AnalyticsOverlayTooltipCampaignData = {};\n\n        CAMPAIGN_QUERY_PARAM_CONFIG.forEach(({ queryParam }) => {\n            const value = url.searchParams.get(queryParam)?.trim();\n            if (value) {\n                campaignData[queryParam] = value;\n            }\n        });\n\n        return Object.keys(campaignData).length > 0 ? campaignData : null;\n    } catch {\n        return null;\n    }\n};\n\nexport const extractCampaignTrackingDataFromElement = (trackedElement: HTMLElement) => {\n    const href =\n        trackedElement.getAttribute('href')?.trim() ?? trackedElement.closest<HTMLElement>('a[href]')?.href?.trim();\n\n    if (!href) {\n        return null;\n    }\n\n    return extractCampaignTrackingDataFromHref(href);\n};\n\nconst calculateAllUsersRatePercentage = (props: {\n    eventTrigger: 'click' | 'visibility';\n    totalEventCount: number;\n    analyticsTotalUsers: number | null;\n}) => {\n    const { eventTrigger, totalEventCount, analyticsTotalUsers } = props;\n\n    if (analyticsTotalUsers === null || analyticsTotalUsers <= 0) {\n        return null;\n    }\n\n    if (eventTrigger === 'click' || eventTrigger === 'visibility') {\n        return (totalEventCount / analyticsTotalUsers) * 100;\n    }\n\n    return null;\n};\n\nexport const createAnalyticsOverlayTooltip = (props: CreateAnalyticsOverlayTooltipProps) => {\n    const {\n        overlayRoot,\n        trackingData,\n        totalEventCount,\n        totalUserCount,\n        analyticsTotalUsers,\n        clickEvent,\n        trackedElement,\n    } = props;\n    const tooltip = document.createElement('div');\n    tooltip.setAttribute('data-analytics-overlay-tooltip', 'true');\n    tooltip.classList.add(\n        'position-fixed',\n        'pointer-events-all',\n        'z-index-max',\n        'rounded',\n        'padding-15',\n        'shadow-focused',\n        'bg-secondary',\n        'text-color-white',\n        'max-width-350',\n        'width-100pct',\n        'word-break-all',\n        'display-flex',\n        'flex-column',\n        'gap-10',\n        'line-height-125rel'\n    );\n\n    const metricLabel = trackingData.eventTrigger === 'click' ? 'Clicks' : 'Views';\n    const metricIconClass = trackingData.eventTrigger === 'click' ? 'rioglyph-click' : 'rioglyph-eye-open';\n    const elementRateLabel = trackingData.eventTrigger === 'click' ? 'Click rate' : 'View rate';\n\n    const elementRatePercentage = totalUserCount > 0 ? (totalEventCount / totalUserCount) * 100 : null;\n    const allUsersRatePercentage = calculateAllUsersRatePercentage({\n        eventTrigger: trackingData.eventTrigger,\n        totalEventCount,\n        analyticsTotalUsers,\n    });\n    const interactionRateAllUsersPercentage =\n        analyticsTotalUsers !== null && analyticsTotalUsers > 0 ? (totalUserCount / analyticsTotalUsers) * 100 : null;\n\n    const overallTitle = createTitle({\n        iconClass: 'rioglyph-user',\n        text: 'Event users',\n    });\n    tooltip.appendChild(overallTitle);\n\n    const overallPanel = createPanel();\n    overallPanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-user',\n            label: 'Event users',\n            right: `${numberFormatter.format(totalUserCount)}`,\n        })\n    );\n    if (analyticsTotalUsers !== null) {\n        overallPanel.appendChild(\n            createInfoRow({\n                iconClass: 'rioglyph-user-group',\n                label: 'Total users',\n                right: `${numberFormatter.format(analyticsTotalUsers)}`,\n            })\n        );\n\n        overallPanel.appendChild(\n            createInfoRow({\n                iconClass: 'rioglyph-bar-chart-box',\n                label: 'Event rate (all users)',\n                right: formatPercentage(interactionRateAllUsersPercentage),\n            })\n        );\n    }\n    tooltip.appendChild(overallPanel);\n\n    const performanceTitle = createTitle({\n        iconClass: 'rioglyph-stats',\n        text: 'Element performance',\n    });\n    tooltip.appendChild(performanceTitle);\n\n    const performancePanel = createPanel();\n    performancePanel.appendChild(\n        createInfoRow({\n            iconClass: metricIconClass,\n            label: metricLabel,\n            right: `${numberFormatter.format(totalEventCount)}`,\n        })\n    );\n    performancePanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-bar-chart-box',\n            label: elementRateLabel,\n            right: formatPercentage(elementRatePercentage),\n        })\n    );\n    if (trackingData.eventTrigger === 'click' && analyticsTotalUsers !== null) {\n        performancePanel.appendChild(\n            createInfoRow({\n                iconClass: 'rioglyph-bar-chart-box',\n                label: 'Click rate (all users)',\n                right: formatPercentage(allUsersRatePercentage),\n            })\n        );\n    }\n    if (trackingData.eventTrigger === 'visibility' && analyticsTotalUsers !== null) {\n        performancePanel.appendChild(\n            createInfoRow({\n                iconClass: 'rioglyph-bar-chart-box',\n                label: 'View rate (all users)',\n                right: formatPercentage(allUsersRatePercentage),\n            })\n        );\n    }\n    tooltip.appendChild(performancePanel);\n\n    const attributesHeader = createTitle({\n        iconClass: 'rioglyph-info-sign',\n        text: 'Tracking Attributes',\n    });\n    tooltip.appendChild(attributesHeader);\n\n    const attributesPanel = createPanel();\n    attributesPanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-cog',\n            label: 'Action',\n            right: trackingData.eventAction,\n        })\n    );\n    attributesPanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-emergency-stop',\n            label: 'Trigger',\n            right: trackingData.eventTrigger,\n        })\n    );\n    attributesPanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-tag',\n            label: 'Label',\n            right: trackingData.eventLabel,\n        })\n    );\n    tooltip.appendChild(attributesPanel);\n\n    const campaignData = extractCampaignTrackingDataFromElement(trackedElement);\n    if (campaignData) {\n        const campaignHeader = createTitle({\n            iconClass: 'rioglyph-megaphone',\n            text: 'Campaign',\n        });\n        tooltip.appendChild(campaignHeader);\n\n        const campaignPanel = createPanel();\n        CAMPAIGN_QUERY_PARAM_CONFIG.forEach(({ queryParam, label }) => {\n            const value = campaignData[queryParam];\n            if (!value) {\n                return;\n            }\n\n            campaignPanel.appendChild(\n                createInfoRow({\n                    iconClass: 'rioglyph-tag',\n                    label,\n                    right: value,\n                })\n            );\n        });\n\n        tooltip.appendChild(campaignPanel);\n    }\n\n    const pointerOffset = 12;\n    const viewportPadding = 8;\n    overlayRoot.appendChild(tooltip);\n\n    let left = clickEvent.clientX + pointerOffset;\n    let top = clickEvent.clientY + pointerOffset;\n    const maxLeft = window.innerWidth - tooltip.offsetWidth - viewportPadding;\n    const maxTop = window.innerHeight - tooltip.offsetHeight - viewportPadding;\n    left = Math.max(viewportPadding, Math.min(left, maxLeft));\n    top = Math.max(viewportPadding, Math.min(top, maxTop));\n\n    tooltip.style.left = `${left}px`;\n    tooltip.style.top = `${top}px`;\n\n    return tooltip;\n};\n\nexport type {\n    AnalyticsOverlayTooltipCampaignData,\n    AnalyticsOverlayTooltipTrackingData,\n    CreateAnalyticsOverlayTooltipProps,\n};\n"],"names":["CAMPAIGN_QUERY_PARAM_CONFIG","numberFormatter","createIcon","iconClass","sizeClass","icon","createTitle","props","text","title","titleText","createPanel","panel","createInfoRow","label","right","row","leftContainer","labelNode","rightContainer","rightText","formatPercentage","value","getUrlParsingBaseHref","extractCampaignTrackingDataFromHref","href","baseHref","url","campaignData","queryParam","extractCampaignTrackingDataFromElement","trackedElement","calculateAllUsersRatePercentage","eventTrigger","totalEventCount","analyticsTotalUsers","createAnalyticsOverlayTooltip","overlayRoot","trackingData","totalUserCount","clickEvent","tooltip","metricLabel","metricIconClass","elementRateLabel","elementRatePercentage","allUsersRatePercentage","interactionRateAllUsersPercentage","overallTitle","overallPanel","performanceTitle","performancePanel","attributesHeader","attributesPanel","campaignHeader","campaignPanel","pointerOffset","viewportPadding","left","top","maxLeft","maxTop"],"mappings":"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"}
+{"version":3,"file":"createAnalyticsOverlayTooltip.js","sources":["../../../src/utils/analytics/createAnalyticsOverlayTooltip.ts"],"sourcesContent":["type AnalyticsOverlayTooltipTrackingData = {\n    eventAction: string;\n    eventLabel: string;\n    eventTrigger: 'click' | 'visibility';\n};\n\nconst CAMPAIGN_QUERY_PARAM_CONFIG = [\n    { queryParam: 'utm_source', label: 'Source' },\n    { queryParam: 'utm_medium', label: 'Medium' },\n    { queryParam: 'utm_campaign', label: 'Campaign' },\n    { queryParam: 'utm_content', label: 'Content' },\n    { queryParam: 'utm_term', label: 'Term' },\n] as const;\n\ntype CampaignQueryParam = (typeof CAMPAIGN_QUERY_PARAM_CONFIG)[number]['queryParam'];\ntype AnalyticsOverlayTooltipCampaignData = Partial<Record<CampaignQueryParam, string>>;\n\ntype CreateAnalyticsOverlayTooltipProps = {\n    overlayRoot: HTMLElement;\n    trackingData: AnalyticsOverlayTooltipTrackingData;\n    totalEventCount: number;\n    totalUserCount: number;\n    analyticsTotalUsers: number | null;\n    clickEvent: MouseEvent;\n    trackedElement: HTMLElement;\n};\n\nconst numberFormatter = new Intl.NumberFormat('en-US', {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 2,\n});\n\nconst createIcon = (iconClass: string, sizeClass: string) => {\n    const icon = document.createElement('span');\n    icon.classList.add('rioglyph', iconClass, sizeClass);\n    return icon;\n};\n\nconst createTitle = (props: { iconClass: string; text: string }) => {\n    const { iconClass, text } = props;\n    const title = document.createElement('div');\n    title.classList.add(\n        'display-flex',\n        'align-items-center',\n        'gap-5',\n        'text-medium',\n        'text-size-16',\n        'line-height-16',\n        'margin-bottom--3'\n    );\n    title.appendChild(createIcon(iconClass, 'text-size-16'));\n\n    const titleText = document.createElement('span');\n    titleText.textContent = text;\n    title.appendChild(titleText);\n\n    return title;\n};\n\nconst createPanel = () => {\n    const panel = document.createElement('div');\n    panel.classList.add('rounded', 'padding-10', 'bg-decent', 'display-flex', 'flex-column', 'gap-5', 'shadow-accent');\n    return panel;\n};\n\nconst createInfoRow = (props: { iconClass: string; label: string; right: Node | string }) => {\n    const { iconClass, label, right } = props;\n\n    const row = document.createElement('div');\n    row.classList.add('display-flex', 'align-items-center', 'gap-5');\n\n    const leftContainer = document.createElement('div');\n    leftContainer.classList.add('display-flex', 'align-items-center', 'gap-5', 'min-width-80');\n\n    const icon = createIcon(iconClass, 'text-size-14');\n    leftContainer.appendChild(icon);\n\n    const labelNode = document.createElement('div');\n    labelNode.classList.add('text-medium');\n    labelNode.textContent = label;\n    leftContainer.appendChild(labelNode);\n    row.appendChild(leftContainer);\n\n    const rightContainer = document.createElement('div');\n    rightContainer.classList.add('flex-1-1', 'text-right');\n\n    if (typeof right === 'string') {\n        const rightText = document.createElement('div');\n        rightText.classList.add('word-break-all', 'text-bold');\n        rightText.textContent = right;\n        rightContainer.appendChild(rightText);\n    } else {\n        rightContainer.appendChild(right);\n    }\n\n    row.appendChild(rightContainer);\n    return row;\n};\n\nconst formatPercentage = (value: number | null) => (value === null ? 'n/a' : `${numberFormatter.format(value)}%`);\n\nconst getUrlParsingBaseHref = () => {\n    if (typeof window !== 'undefined' && /^https?:/i.test(window.location.href)) {\n        return window.location.href;\n    }\n\n    return 'https://rio.cloud';\n};\n\nexport const extractCampaignTrackingDataFromHref = (\n    href: string,\n    baseHref = getUrlParsingBaseHref()\n): AnalyticsOverlayTooltipCampaignData | null => {\n    try {\n        const url = new URL(href, baseHref);\n        const campaignData: AnalyticsOverlayTooltipCampaignData = {};\n\n        CAMPAIGN_QUERY_PARAM_CONFIG.forEach(({ queryParam }) => {\n            const value = url.searchParams.get(queryParam)?.trim();\n            if (value) {\n                campaignData[queryParam] = value;\n            }\n        });\n\n        return Object.keys(campaignData).length > 0 ? campaignData : null;\n    } catch {\n        return null;\n    }\n};\n\nexport const extractCampaignTrackingDataFromElement = (trackedElement: HTMLElement) => {\n    const anchorElement = trackedElement.closest<HTMLAnchorElement>('a[href]');\n    const href = trackedElement.getAttribute('href')?.trim() ?? anchorElement?.href?.trim();\n\n    if (!href) {\n        return null;\n    }\n\n    return extractCampaignTrackingDataFromHref(href);\n};\n\nconst calculateAllUsersRatePercentage = (props: {\n    eventTrigger: 'click' | 'visibility';\n    totalEventCount: number;\n    analyticsTotalUsers: number | null;\n}) => {\n    const { eventTrigger, totalEventCount, analyticsTotalUsers } = props;\n\n    if (analyticsTotalUsers === null || analyticsTotalUsers <= 0) {\n        return null;\n    }\n\n    if (eventTrigger === 'click' || eventTrigger === 'visibility') {\n        return (totalEventCount / analyticsTotalUsers) * 100;\n    }\n\n    return null;\n};\n\nexport const createAnalyticsOverlayTooltip = (props: CreateAnalyticsOverlayTooltipProps) => {\n    const {\n        overlayRoot,\n        trackingData,\n        totalEventCount,\n        totalUserCount,\n        analyticsTotalUsers,\n        clickEvent,\n        trackedElement,\n    } = props;\n    const tooltip = document.createElement('div');\n    tooltip.setAttribute('data-analytics-overlay-tooltip', 'true');\n    tooltip.classList.add(\n        'position-fixed',\n        'pointer-events-all',\n        'z-index-max',\n        'rounded',\n        'padding-15',\n        'shadow-focused',\n        'bg-secondary',\n        'text-color-white',\n        'max-width-350',\n        'width-100pct',\n        'word-break-all',\n        'display-flex',\n        'flex-column',\n        'gap-10',\n        'line-height-125rel'\n    );\n\n    const metricLabel = trackingData.eventTrigger === 'click' ? 'Clicks' : 'Views';\n    const metricIconClass = trackingData.eventTrigger === 'click' ? 'rioglyph-click' : 'rioglyph-eye-open';\n    const elementRateLabel = trackingData.eventTrigger === 'click' ? 'Click rate' : 'View rate';\n\n    const elementRatePercentage = totalUserCount > 0 ? (totalEventCount / totalUserCount) * 100 : null;\n    const allUsersRatePercentage = calculateAllUsersRatePercentage({\n        eventTrigger: trackingData.eventTrigger,\n        totalEventCount,\n        analyticsTotalUsers,\n    });\n    const interactionRateAllUsersPercentage =\n        analyticsTotalUsers !== null && analyticsTotalUsers > 0 ? (totalUserCount / analyticsTotalUsers) * 100 : null;\n\n    const overallTitle = createTitle({\n        iconClass: 'rioglyph-user',\n        text: 'Event users',\n    });\n    tooltip.appendChild(overallTitle);\n\n    const overallPanel = createPanel();\n    overallPanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-user',\n            label: 'Event users',\n            right: `${numberFormatter.format(totalUserCount)}`,\n        })\n    );\n    if (analyticsTotalUsers !== null) {\n        overallPanel.appendChild(\n            createInfoRow({\n                iconClass: 'rioglyph-user-group',\n                label: 'Total users',\n                right: `${numberFormatter.format(analyticsTotalUsers)}`,\n            })\n        );\n\n        overallPanel.appendChild(\n            createInfoRow({\n                iconClass: 'rioglyph-bar-chart-box',\n                label: 'Event rate (all users)',\n                right: formatPercentage(interactionRateAllUsersPercentage),\n            })\n        );\n    }\n    tooltip.appendChild(overallPanel);\n\n    const performanceTitle = createTitle({\n        iconClass: 'rioglyph-stats',\n        text: 'Element performance',\n    });\n    tooltip.appendChild(performanceTitle);\n\n    const performancePanel = createPanel();\n    performancePanel.appendChild(\n        createInfoRow({\n            iconClass: metricIconClass,\n            label: metricLabel,\n            right: `${numberFormatter.format(totalEventCount)}`,\n        })\n    );\n    performancePanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-bar-chart-box',\n            label: elementRateLabel,\n            right: formatPercentage(elementRatePercentage),\n        })\n    );\n    if (trackingData.eventTrigger === 'click' && analyticsTotalUsers !== null) {\n        performancePanel.appendChild(\n            createInfoRow({\n                iconClass: 'rioglyph-bar-chart-box',\n                label: 'Click rate (all users)',\n                right: formatPercentage(allUsersRatePercentage),\n            })\n        );\n    }\n    if (trackingData.eventTrigger === 'visibility' && analyticsTotalUsers !== null) {\n        performancePanel.appendChild(\n            createInfoRow({\n                iconClass: 'rioglyph-bar-chart-box',\n                label: 'View rate (all users)',\n                right: formatPercentage(allUsersRatePercentage),\n            })\n        );\n    }\n    tooltip.appendChild(performancePanel);\n\n    const attributesHeader = createTitle({\n        iconClass: 'rioglyph-info-sign',\n        text: 'Tracking Attributes',\n    });\n    tooltip.appendChild(attributesHeader);\n\n    const attributesPanel = createPanel();\n    attributesPanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-cog',\n            label: 'Action',\n            right: trackingData.eventAction,\n        })\n    );\n    attributesPanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-emergency-stop',\n            label: 'Trigger',\n            right: trackingData.eventTrigger,\n        })\n    );\n    attributesPanel.appendChild(\n        createInfoRow({\n            iconClass: 'rioglyph-tag',\n            label: 'Label',\n            right: trackingData.eventLabel,\n        })\n    );\n    tooltip.appendChild(attributesPanel);\n\n    const campaignData = extractCampaignTrackingDataFromElement(trackedElement);\n    if (campaignData) {\n        const campaignHeader = createTitle({\n            iconClass: 'rioglyph-megaphone',\n            text: 'Campaign',\n        });\n        tooltip.appendChild(campaignHeader);\n\n        const campaignPanel = createPanel();\n        CAMPAIGN_QUERY_PARAM_CONFIG.forEach(({ queryParam, label }) => {\n            const value = campaignData[queryParam];\n            if (!value) {\n                return;\n            }\n\n            campaignPanel.appendChild(\n                createInfoRow({\n                    iconClass: 'rioglyph-tag',\n                    label,\n                    right: value,\n                })\n            );\n        });\n\n        tooltip.appendChild(campaignPanel);\n    }\n\n    const pointerOffset = 12;\n    const viewportPadding = 8;\n    overlayRoot.appendChild(tooltip);\n\n    let left = clickEvent.clientX + pointerOffset;\n    let top = clickEvent.clientY + pointerOffset;\n    const maxLeft = window.innerWidth - tooltip.offsetWidth - viewportPadding;\n    const maxTop = window.innerHeight - tooltip.offsetHeight - viewportPadding;\n    left = Math.max(viewportPadding, Math.min(left, maxLeft));\n    top = Math.max(viewportPadding, Math.min(top, maxTop));\n\n    tooltip.style.left = `${left}px`;\n    tooltip.style.top = `${top}px`;\n\n    return tooltip;\n};\n\nexport type {\n    AnalyticsOverlayTooltipCampaignData,\n    AnalyticsOverlayTooltipTrackingData,\n    CreateAnalyticsOverlayTooltipProps,\n};\n"],"names":["CAMPAIGN_QUERY_PARAM_CONFIG","numberFormatter","createIcon","iconClass","sizeClass","icon","createTitle","props","text","title","titleText","createPanel","panel","createInfoRow","label","right","row","leftContainer","labelNode","rightContainer","rightText","formatPercentage","value","getUrlParsingBaseHref","extractCampaignTrackingDataFromHref","href","baseHref","url","campaignData","queryParam","extractCampaignTrackingDataFromElement","trackedElement","anchorElement","calculateAllUsersRatePercentage","eventTrigger","totalEventCount","analyticsTotalUsers","createAnalyticsOverlayTooltip","overlayRoot","trackingData","totalUserCount","clickEvent","tooltip","metricLabel","metricIconClass","elementRateLabel","elementRatePercentage","allUsersRatePercentage","interactionRateAllUsersPercentage","overallTitle","overallPanel","performanceTitle","performancePanel","attributesHeader","attributesPanel","campaignHeader","campaignPanel","pointerOffset","viewportPadding","left","top","maxLeft","maxTop"],"mappings":"AAMA,MAAMA,IAA8B;AAAA,EAChC,EAAE,YAAY,cAAc,OAAO,SAAA;AAAA,EACnC,EAAE,YAAY,cAAc,OAAO,SAAA;AAAA,EACnC,EAAE,YAAY,gBAAgB,OAAO,WAAA;AAAA,EACrC,EAAE,YAAY,eAAe,OAAO,UAAA;AAAA,EACpC,EAAE,YAAY,YAAY,OAAO,OAAA;AACrC,GAeMC,IAAkB,IAAI,KAAK,aAAa,SAAS;AAAA,EACnD,uBAAuB;AAAA,EACvB,uBAAuB;AAC3B,CAAC,GAEKC,IAAa,CAACC,GAAmBC,MAAsB;AACzD,QAAMC,IAAO,SAAS,cAAc,MAAM;AAC1C,SAAAA,EAAK,UAAU,IAAI,YAAYF,GAAWC,CAAS,GAC5CC;AACX,GAEMC,IAAc,CAACC,MAA+C;AAChE,QAAM,EAAE,WAAAJ,GAAW,MAAAK,EAAA,IAASD,GACtBE,IAAQ,SAAS,cAAc,KAAK;AAC1C,EAAAA,EAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEJA,EAAM,YAAYP,EAAWC,GAAW,cAAc,CAAC;AAEvD,QAAMO,IAAY,SAAS,cAAc,MAAM;AAC/C,SAAAA,EAAU,cAAcF,GACxBC,EAAM,YAAYC,CAAS,GAEpBD;AACX,GAEME,IAAc,MAAM;AACtB,QAAMC,IAAQ,SAAS,cAAc,KAAK;AAC1C,SAAAA,EAAM,UAAU,IAAI,WAAW,cAAc,aAAa,gBAAgB,eAAe,SAAS,eAAe,GAC1GA;AACX,GAEMC,IAAgB,CAACN,MAAsE;AACzF,QAAM,EAAE,WAAAJ,GAAW,OAAAW,GAAO,OAAAC,EAAA,IAAUR,GAE9BS,IAAM,SAAS,cAAc,KAAK;AACxC,EAAAA,EAAI,UAAU,IAAI,gBAAgB,sBAAsB,OAAO;AAE/D,QAAMC,IAAgB,SAAS,cAAc,KAAK;AAClD,EAAAA,EAAc,UAAU,IAAI,gBAAgB,sBAAsB,SAAS,cAAc;AAEzF,QAAMZ,IAAOH,EAAWC,GAAW,cAAc;AACjD,EAAAc,EAAc,YAAYZ,CAAI;AAE9B,QAAMa,IAAY,SAAS,cAAc,KAAK;AAC9C,EAAAA,EAAU,UAAU,IAAI,aAAa,GACrCA,EAAU,cAAcJ,GACxBG,EAAc,YAAYC,CAAS,GACnCF,EAAI,YAAYC,CAAa;AAE7B,QAAME,IAAiB,SAAS,cAAc,KAAK;AAGnD,MAFAA,EAAe,UAAU,IAAI,YAAY,YAAY,GAEjD,OAAOJ,KAAU,UAAU;AAC3B,UAAMK,IAAY,SAAS,cAAc,KAAK;AAC9C,IAAAA,EAAU,UAAU,IAAI,kBAAkB,WAAW,GACrDA,EAAU,cAAcL,GACxBI,EAAe,YAAYC,CAAS;AAAA,EACxC;AACI,IAAAD,EAAe,YAAYJ,CAAK;AAGpC,SAAAC,EAAI,YAAYG,CAAc,GACvBH;AACX,GAEMK,IAAmB,CAACC,MAA0BA,MAAU,OAAO,QAAQ,GAAGrB,EAAgB,OAAOqB,CAAK,CAAC,KAEvGC,IAAwB,MACtB,OAAO,SAAW,OAAe,YAAY,KAAK,OAAO,SAAS,IAAI,IAC/D,OAAO,SAAS,OAGpB,qBAGEC,IAAsC,CAC/CC,GACAC,IAAWH,QACkC;AAC7C,MAAI;AACA,UAAMI,IAAM,IAAI,IAAIF,GAAMC,CAAQ,GAC5BE,IAAoD,CAAA;AAE1D,WAAA5B,EAA4B,QAAQ,CAAC,EAAE,YAAA6B,QAAiB;AACpD,YAAMP,IAAQK,EAAI,aAAa,IAAIE,CAAU,GAAG,KAAA;AAChD,MAAIP,MACAM,EAAaC,CAAU,IAAIP;AAAA,IAEnC,CAAC,GAEM,OAAO,KAAKM,CAAY,EAAE,SAAS,IAAIA,IAAe;AAAA,EACjE,QAAQ;AACJ,WAAO;AAAA,EACX;AACJ,GAEaE,IAAyC,CAACC,MAAgC;AACnF,QAAMC,IAAgBD,EAAe,QAA2B,SAAS,GACnEN,IAAOM,EAAe,aAAa,MAAM,GAAG,UAAUC,GAAe,MAAM,KAAA;AAEjF,SAAKP,IAIED,EAAoCC,CAAI,IAHpC;AAIf,GAEMQ,IAAkC,CAAC1B,MAInC;AACF,QAAM,EAAE,cAAA2B,GAAc,iBAAAC,GAAiB,qBAAAC,EAAA,IAAwB7B;AAE/D,SAAI6B,MAAwB,QAAQA,KAAuB,IAChD,OAGPF,MAAiB,WAAWA,MAAiB,eACrCC,IAAkBC,IAAuB,MAG9C;AACX,GAEaC,IAAgC,CAAC9B,MAA8C;AACxF,QAAM;AAAA,IACF,aAAA+B;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAJ;AAAA,IACA,gBAAAK;AAAA,IACA,qBAAAJ;AAAA,IACA,YAAAK;AAAA,IACA,gBAAAV;AAAA,EAAA,IACAxB,GACEmC,IAAU,SAAS,cAAc,KAAK;AAC5C,EAAAA,EAAQ,aAAa,kCAAkC,MAAM,GAC7DA,EAAQ,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGJ,QAAMC,IAAcJ,EAAa,iBAAiB,UAAU,WAAW,SACjEK,IAAkBL,EAAa,iBAAiB,UAAU,mBAAmB,qBAC7EM,IAAmBN,EAAa,iBAAiB,UAAU,eAAe,aAE1EO,IAAwBN,IAAiB,IAAKL,IAAkBK,IAAkB,MAAM,MACxFO,IAAyBd,EAAgC;AAAA,IAC3D,cAAcM,EAAa;AAAA,IAC3B,iBAAAJ;AAAA,IACA,qBAAAC;AAAA,EAAA,CACH,GACKY,IACFZ,MAAwB,QAAQA,IAAsB,IAAKI,IAAiBJ,IAAuB,MAAM,MAEvGa,IAAe3C,EAAY;AAAA,IAC7B,WAAW;AAAA,IACX,MAAM;AAAA,EAAA,CACT;AACD,EAAAoC,EAAQ,YAAYO,CAAY;AAEhC,QAAMC,IAAevC,EAAA;AACrB,EAAAuC,EAAa;AAAA,IACTrC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO,GAAGZ,EAAgB,OAAOuC,CAAc,CAAC;AAAA,IAAA,CACnD;AAAA,EAAA,GAEDJ,MAAwB,SACxBc,EAAa;AAAA,IACTrC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO,GAAGZ,EAAgB,OAAOmC,CAAmB,CAAC;AAAA,IAAA,CACxD;AAAA,EAAA,GAGLc,EAAa;AAAA,IACTrC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAOQ,EAAiB2B,CAAiC;AAAA,IAAA,CAC5D;AAAA,EAAA,IAGTN,EAAQ,YAAYQ,CAAY;AAEhC,QAAMC,IAAmB7C,EAAY;AAAA,IACjC,WAAW;AAAA,IACX,MAAM;AAAA,EAAA,CACT;AACD,EAAAoC,EAAQ,YAAYS,CAAgB;AAEpC,QAAMC,IAAmBzC,EAAA;AACzB,EAAAyC,EAAiB;AAAA,IACbvC,EAAc;AAAA,MACV,WAAW+B;AAAA,MACX,OAAOD;AAAA,MACP,OAAO,GAAG1C,EAAgB,OAAOkC,CAAe,CAAC;AAAA,IAAA,CACpD;AAAA,EAAA,GAELiB,EAAiB;AAAA,IACbvC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAOgC;AAAA,MACP,OAAOxB,EAAiByB,CAAqB;AAAA,IAAA,CAChD;AAAA,EAAA,GAEDP,EAAa,iBAAiB,WAAWH,MAAwB,QACjEgB,EAAiB;AAAA,IACbvC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAOQ,EAAiB0B,CAAsB;AAAA,IAAA,CACjD;AAAA,EAAA,GAGLR,EAAa,iBAAiB,gBAAgBH,MAAwB,QACtEgB,EAAiB;AAAA,IACbvC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAOQ,EAAiB0B,CAAsB;AAAA,IAAA,CACjD;AAAA,EAAA,GAGTL,EAAQ,YAAYU,CAAgB;AAEpC,QAAMC,IAAmB/C,EAAY;AAAA,IACjC,WAAW;AAAA,IACX,MAAM;AAAA,EAAA,CACT;AACD,EAAAoC,EAAQ,YAAYW,CAAgB;AAEpC,QAAMC,IAAkB3C,EAAA;AACxB,EAAA2C,EAAgB;AAAA,IACZzC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO0B,EAAa;AAAA,IAAA,CACvB;AAAA,EAAA,GAELe,EAAgB;AAAA,IACZzC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO0B,EAAa;AAAA,IAAA,CACvB;AAAA,EAAA,GAELe,EAAgB;AAAA,IACZzC,EAAc;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO0B,EAAa;AAAA,IAAA,CACvB;AAAA,EAAA,GAELG,EAAQ,YAAYY,CAAe;AAEnC,QAAM1B,IAAeE,EAAuCC,CAAc;AAC1E,MAAIH,GAAc;AACd,UAAM2B,IAAiBjD,EAAY;AAAA,MAC/B,WAAW;AAAA,MACX,MAAM;AAAA,IAAA,CACT;AACD,IAAAoC,EAAQ,YAAYa,CAAc;AAElC,UAAMC,IAAgB7C,EAAA;AACtB,IAAAX,EAA4B,QAAQ,CAAC,EAAE,YAAA6B,GAAY,OAAAf,QAAY;AAC3D,YAAMQ,IAAQM,EAAaC,CAAU;AACrC,MAAKP,KAILkC,EAAc;AAAA,QACV3C,EAAc;AAAA,UACV,WAAW;AAAA,UACX,OAAAC;AAAA,UACA,OAAOQ;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IAET,CAAC,GAEDoB,EAAQ,YAAYc,CAAa;AAAA,EACrC;AAEA,QAAMC,IAAgB,IAChBC,IAAkB;AACxB,EAAApB,EAAY,YAAYI,CAAO;AAE/B,MAAIiB,IAAOlB,EAAW,UAAUgB,GAC5BG,IAAMnB,EAAW,UAAUgB;AAC/B,QAAMI,IAAU,OAAO,aAAanB,EAAQ,cAAcgB,GACpDI,IAAS,OAAO,cAAcpB,EAAQ,eAAegB;AAC3D,SAAAC,IAAO,KAAK,IAAID,GAAiB,KAAK,IAAIC,GAAME,CAAO,CAAC,GACxDD,IAAM,KAAK,IAAIF,GAAiB,KAAK,IAAIE,GAAKE,CAAM,CAAC,GAErDpB,EAAQ,MAAM,OAAO,GAAGiB,CAAI,MAC5BjB,EAAQ,MAAM,MAAM,GAAGkB,CAAG,MAEnBlB;AACX;"}

package/utils/analytics/useAnalyticsOverlayDom.js

@@ -1,5 +1,5 @@
 import { useState as q, useRef as I, useEffect as M } from "react";
-import { ANALYTICS_OVERLAY_SELECTOR as H, createAnalyticsLookupKey as Y, toEventType as K, EVENT_TYPE_ICON_CLASS as Q } from "./analyticsAnalysisUtils.js";
+import { ANALYTICS_OVERLAY_SELECTOR as H, createAnalyticsLookupKey as Y, EVENT_TYPE_ICON_CLASS as K, toEventType as Q } from "./analyticsAnalysisUtils.js";
 import { createAnalyticsOverlayTooltip as j } from "./createAnalyticsOverlayTooltip.js";
 import { logAnalyticsOverlayUnmatchedEntries as G } from "./logAnalyticsOverlayUnmatchedEntries.js";
 const te = (F) => {
@@ -40,7 +40,7 @@ const te = (F) => {
       ), n.setAttribute("data-analytics-overlay-label", "true"), n.style.top = `${e.top + 4}px`, n.style.left = `${e.left + 4}px`, n.style.maxWidth = "min(80vw, 420px)";
       const v = (s) => {
         s.preventDefault(), s.stopPropagation(), w.current.add(t.element), L === n && d(), n.remove();
-      }, p = t.entries.reduce((s, f) => s + D(f.eventCount), 0), c = t.entries.reduce((s, f) => s + D(f.totalUsers), 0), i = Q[t.eventType], l = "rioglyph-remove", o = document.createElement("span");
+      }, p = t.entries.reduce((s, f) => s + D(f.eventCount), 0), c = t.entries.reduce((s, f) => s + D(f.totalUsers), 0), i = K[t.eventType], l = "rioglyph-remove", o = document.createElement("span");
       o.classList.add("text-size-14", "margin-left-1", "rioglyph", "margin-right-0", i), n.appendChild(o), g && (o.addEventListener("pointerdown", v), o.addEventListener("click", v));
       const P = () => {
         i !== l && (o.classList.remove(i), o.classList.add(l));
@@ -72,7 +72,7 @@ const te = (F) => {
         }), L = n);
       }), n;
     }, _ = (t) => t.reduce((e, a) => {
-      const n = a.getAttribute("data-track-ga-event-action"), v = a.getAttribute("data-track-ga-event-label"), p = a.getAttribute("data-track-ga-event-trigger"), c = p === "click" || p === "visibility" ? p : null, i = c ? K(c) : null;
+      const n = a.getAttribute("data-track-ga-event-action"), v = a.getAttribute("data-track-ga-event-label"), p = a.getAttribute("data-track-ga-event-trigger"), c = p === "click" || p === "visibility" ? p : null, i = c ? Q(c) : null;
       if (!n || !v || !c || !i || w.current.has(a))
         return e;
       const l = m.get(Y(n, v));

package/utils/routeUtils.d.ts

@@ -33,11 +33,14 @@ export declare const serializeSorting: (sortInfo: {
  * Useful when reading URL params into table state.
  *
  * @example
- * parseSorting('-createdAt') // { sortBy: 'createdAt', sortDir: 'DESCENDING' }
+ * parseSorting('-createdAt') // { sortBy: 'createdAt', sortDir: 'desc' }
  */
 export declare const parseSorting: (sortValueShort: string | null | undefined) => {
     sortBy: string;
-    sortDir: string;
+    sortDir: "desc";
+} | {
+    sortBy: string;
+    sortDir: "asc";
 } | null;
 /**
  * Serializes column settings into compact strings for a URL param.