@kong-ui-public/table-data-grid 0.6.0 → 0.6.1-pr.3860.a89554fba.0

package/dist/table-data-grid.es.js

@@ -1,417 +1,517 @@
-import { computed as y, watch as A, ref as x, shallowRef as T, readonly as M, shallowReadonly as X, defineComponent as P, onMounted as Y, onUnmounted as Z, nextTick as ee, resolveComponent as Q, openBlock as O, createBlock as J, resolveDynamicComponent as te, createElementBlock as B, createVNode as W, withCtx as oe, createElementVNode as ae, toDisplayString as le, useSlots as ne, toRef as E, renderSlot as j, unref as h } from "vue";
-import { AgGridVue as re } from "ag-grid-vue3";
-import { ModuleRegistry as se, AllCommunityModule as ie, ClientSideRowModelModule as ce, InfiniteRowModelModule as ue, themeQuartz as de } from "ag-grid-community";
-import { createI18n as ve, i18nTComponent as me } from "@kong-ui-public/i18n";
-var F = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(F || {});
-const fe = (e) => !!e?.length;
-function Ce(e, n, t, l = fe) {
-  const r = y(() => l(e.value)), i = y(() => {
-    const p = e.value !== void 0, a = n.value !== void 0 && n.value !== null;
-    return t.value ? "LOADING" : r.value ? "SUCCESS" : a ? "ERROR" : p ? "SUCCESS" : "PENDING";
+import { computed as c, watch as $, ref as B, shallowRef as G, readonly as V, shallowReadonly as ie, defineComponent as oe, onMounted as le, onUnmounted as ue, nextTick as ce, resolveComponent as ne, openBlock as K, createElementBlock as A, normalizeClass as de, createBlock as P, resolveDynamicComponent as X, withCtx as Y, createVNode as q, createElementVNode as Z, toDisplayString as ee, createCommentVNode as te, normalizeStyle as ve, h as me, renderSlot as L, useSlots as fe, onBeforeUnmount as Ce, toRef as N, unref as b } from "vue";
+import { AgGridVue as pe } from "ag-grid-vue3";
+import { ModuleRegistry as ge, AllCommunityModule as he, ClientSideRowModelModule as ye, InfiniteRowModelModule as be, themeQuartz as Se } from "ag-grid-community";
+import { createI18n as ke, i18nTComponent as we } from "@kong-ui-public/i18n";
+var _ = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(_ || {});
+const De = (e) => !!e?.length;
+function Re(e, l, t, o = De) {
+  const r = c(() => o(e.value)), n = c(() => {
+    const g = e.value !== void 0, s = l.value !== void 0 && l.value !== null;
+    return t.value ? "LOADING" : r.value ? "SUCCESS" : s ? "ERROR" : g ? "SUCCESS" : "PENDING";
   });
   return {
-    fetchState: F,
+    fetchState: _,
     hasData: r,
-    state: i
+    state: n
   };
 }
-const pe = ({
+const Ee = ({
   emitState: e,
-  fetchLifecycleState: n,
+  fetchLifecycleState: l,
   hasData: t
 }) => {
-  A(
+  $(
     () => ({
       hasData: t.value,
-      state: n.value
+      state: l.value
     }),
-    ({ hasData: l, state: r }) => {
-      if (r !== F.PENDING) {
-        if (r === F.LOADING) {
+    ({ hasData: o, state: r }) => {
+      if (r !== _.PENDING) {
+        if (r === _.LOADING) {
           e({
-            hasData: l,
+            hasData: o,
             state: "loading"
           });
           return;
         }
-        if (r === F.ERROR) {
+        if (r === _.ERROR) {
           e({
-            hasData: l,
+            hasData: o,
             state: "error"
           });
           return;
         }
         e({
-          hasData: l,
+          hasData: o,
           state: "success"
         });
       }
     }
   );
-}, ge = ({ startRow: e, endRow: n }) => {
-  const t = n - e;
+}, Te = ({ startRow: e, endRow: l }) => {
+  const t = l - e;
   return {
     blockIndex: t > 0 ? Math.floor(e / t) : 0,
     pageSize: t
   };
-}, he = ({
+}, xe = ({
   startRow: e,
-  rowsLength: n,
+  rowsLength: l,
   pageSize: t,
-  total: l,
+  total: o,
   hasMore: r
 }) => {
-  if (typeof l == "number")
-    return l;
-  if (r !== !0 && (r === !1 || n < t))
-    return e + n;
-}, ye = ({
+  if (typeof o == "number")
+    return o;
+  if (r !== !0 && (r === !1 || l < t))
+    return e + l;
+}, Oe = ({
   fetcher: e,
-  resetKey: n,
+  resetKey: l,
   sort: t
 }) => {
-  const l = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), i = x(0), o = T(), p = T(), a = T(), s = x(0), f = x(!1);
-  let b, K;
-  const S = (c) => c === i.value && b === e.value && K === n?.value, w = () => {
-    f.value = s.value > 0;
-  }, C = () => {
-    a.value = void 0, s.value += 1, w();
-  }, I = () => {
-    s.value = Math.max(0, s.value - 1), w();
-  }, G = (c) => {
-    const u = r.get(c);
-    if (u)
-      return u;
-    let v;
-    const d = {
-      promise: new Promise((g) => {
-        v = g;
+  const o = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), n = B(0), d = G(), g = G(), s = G(), v = B(0), p = B(!1);
+  let S, R;
+  const k = (m) => m === n.value && S === e.value && R === l?.value, i = () => {
+    p.value = v.value > 0;
+  }, w = () => {
+    s.value = void 0, v.value += 1, i();
+  }, y = () => {
+    v.value = Math.max(0, v.value - 1), i();
+  }, O = (m) => {
+    const f = r.get(m);
+    if (f)
+      return f;
+    let a;
+    const u = {
+      promise: new Promise((C) => {
+        a = C;
       }),
-      resolve: (g) => v(g)
+      resolve: (C) => a(C)
     };
-    return r.set(c, d), d;
-  }, k = (c, u) => {
-    u.resolve(!1), r.get(c) === u && r.delete(c);
-  }, D = async ({
-    blockIndex: c,
-    currentBlockCompletion: u,
-    datasourceId: v
+    return r.set(m, u), u;
+  }, D = (m, f) => {
+    f.resolve(!1), r.get(m) === f && r.delete(m);
+  }, F = async ({
+    blockIndex: m,
+    currentBlockCompletion: f,
+    datasourceId: a
   }) => {
-    if (c === 0)
+    if (m === 0)
       return "ready";
-    const d = r.get(c - 1);
-    if (!d)
-      return k(c, u), "failed";
-    const g = await d.promise;
-    return S(v) ? g ? "ready" : (k(c, u), "failed") : (k(c, u), "stale");
-  }, U = ({
-    blockIndex: c,
-    currentBlockCompletion: u,
-    getRowsParams: v,
-    pageSize: d,
-    result: g
+    const u = r.get(m - 1);
+    if (!u)
+      return D(m, f), "failed";
+    const C = await u.promise;
+    return k(a) ? C ? "ready" : (D(m, f), "failed") : (D(m, f), "stale");
+  }, I = ({
+    blockIndex: m,
+    currentBlockCompletion: f,
+    getRowsParams: a,
+    pageSize: u,
+    result: C
   }) => {
-    g.cursor !== void 0 && l.set(c, g.cursor), v.successCallback(g.data, he({
-      startRow: v.startRow,
-      rowsLength: g.data.length,
-      pageSize: d,
-      total: g.total,
-      hasMore: g.hasMore
-    })), v.startRow === 0 && (p.value = g.data), u.resolve(!0);
-  }, _ = ({
-    blockIndex: c,
-    currentBlockCompletion: u,
-    fetchError: v,
-    getRowsParams: d
+    C.cursor !== void 0 && o.set(m, C.cursor), a.successCallback(C.data, xe({
+      startRow: a.startRow,
+      rowsLength: C.data.length,
+      pageSize: u,
+      total: C.total,
+      hasMore: C.hasMore
+    })), a.startRow === 0 && (g.value = C.data), f.resolve(!0);
+  }, T = ({
+    blockIndex: m,
+    currentBlockCompletion: f,
+    fetchError: a,
+    getRowsParams: u
   }) => {
-    a.value = v, d.failCallback(), k(c, u);
-  }, z = () => {
-    const c = e.value;
-    if (!c)
+    s.value = a, u.failCallback(), D(m, f);
+  }, M = () => {
+    const m = e.value;
+    if (!m)
       throw new Error("TableDataGrid requires a fetcher in infinite mode");
-    b = c, K = n?.value;
-    const u = i.value + 1;
-    return i.value = u, l.clear(), r.clear(), p.value = void 0, a.value = void 0, s.value = 0, w(), {
-      async getRows(v) {
-        if (!S(u)) {
-          v.failCallback();
+    S = m, R = l?.value;
+    const f = n.value + 1;
+    return n.value = f, o.clear(), r.clear(), g.value = void 0, s.value = void 0, v.value = 0, i(), {
+      async getRows(a) {
+        if (!k(f)) {
+          a.failCallback();
           return;
         }
         const {
-          blockIndex: d,
-          pageSize: g
-        } = ge({
-          startRow: v.startRow,
-          endRow: v.endRow
-        }), R = G(d);
-        if (await D({
-          blockIndex: d,
-          currentBlockCompletion: R,
-          datasourceId: u
-        }) !== "ready" || !S(u)) {
-          v.failCallback(), k(d, R);
+          blockIndex: u,
+          pageSize: C
+        } = Te({
+          startRow: a.startRow,
+          endRow: a.endRow
+        }), E = O(u);
+        if (await F({
+          blockIndex: u,
+          currentBlockCompletion: E,
+          datasourceId: f
+        }) !== "ready" || !k(f)) {
+          a.failCallback(), D(u, E);
           return;
         }
-        C();
+        w();
         try {
-          const m = d > 0 ? l.get(d - 1) : void 0, N = await c({
+          const z = u > 0 ? o.get(u - 1) : void 0, U = await m({
             mode: "infinite",
-            pageSize: g,
-            cursor: m,
+            pageSize: C,
+            cursor: z,
             // Always read the latest sort, not a stale one.
             sort: t?.value
           });
-          if (!S(u)) {
-            v.failCallback(), k(d, R);
+          if (!k(f)) {
+            a.failCallback(), D(u, E);
             return;
           }
-          U({
-            blockIndex: d,
-            currentBlockCompletion: R,
-            getRowsParams: v,
-            pageSize: g,
-            result: N
+          I({
+            blockIndex: u,
+            currentBlockCompletion: E,
+            getRowsParams: a,
+            pageSize: C,
+            result: U
           });
-        } catch (m) {
-          if (!S(u)) {
-            v.failCallback(), k(d, R);
+        } catch (z) {
+          if (!k(f)) {
+            a.failCallback(), D(u, E);
             return;
           }
-          _({
-            blockIndex: d,
-            currentBlockCompletion: R,
-            fetchError: m,
-            getRowsParams: v
+          T({
+            blockIndex: u,
+            currentBlockCompletion: E,
+            fetchError: z,
+            getRowsParams: a
           });
         } finally {
-          S(u) && I();
+          k(f) && y();
         }
       }
     };
-  }, L = () => {
-    o.value = z();
+  }, x = () => {
+    d.value = M();
   };
-  return A(
-    [e, () => n?.value],
+  return $(
+    [e, () => l?.value],
     () => {
-      L();
+      x();
     },
     { immediate: !0 }
   ), {
-    datasource: M(o),
-    data: X(p),
-    error: M(a),
-    isFetching: M(f)
+    datasource: V(d),
+    data: ie(g),
+    error: V(s),
+    isFetching: V(p)
   };
-}, Se = {
-  key: 1,
-  class: "table-data-grid-cell-renderer"
-}, be = /* @__PURE__ */ P({
+}, j = (e) => typeof e != "number" ? null : Number.isFinite(e) ? e : null, Fe = (e, l) => e.reduce(
+  (t, o) => {
+    const r = j(Reflect.get(o, l.key));
+    return r === null ? t : {
+      sum: t.sum + r,
+      max: Math.max(t.max, r)
+    };
+  },
+  { sum: 0, max: 0 }
+), Ie = (e, l) => {
+  const t = (l ?? []).filter((n) => Number.isFinite(n.value) && e >= n.value);
+  if (!t.length)
+    return;
+  const o = Math.max(...t.map((n) => n.value));
+  return t.filter((n) => n.value === o).some((n) => n.type === "error") ? "error" : "warning";
+}, Ke = (e, l, t) => {
+  if (e === null)
+    return 0;
+  const o = t === "relative" ? l.sum : l.max;
+  return !o || o <= 0 ? 0 : Math.min(Math.max(e / o, 0), 1);
+}, Ne = (e, l = "en-US") => {
+  const t = new Intl.NumberFormat(l, { maximumFractionDigits: 2 }), o = t.format(e);
+  return e > 0 && e < 0.01 ? `< ${t.format(0.01)} %` : `${o} %`;
+}, Ge = ["data-threshold"], Me = {
+  key: 0,
+  class: "table-data-grid-cell-relative",
+  "data-testid": "table-data-grid-cell-relative"
+}, ze = ["data-threshold"], Be = /* @__PURE__ */ oe({
   name: "TableDataGridCellRenderer",
   __name: "TableDataGridCellRenderer",
   props: {
     params: {}
   },
-  setup(e, { expose: n }) {
-    const t = T(e.params), l = x(null), r = x(!1), i = y(() => t.value.valueFormatted ?? String(t.value.value ?? "")), o = y(() => {
-      const C = t.value.colDef?.colId;
-      return C ? t.value.context?.cells?.slots?.[C] : void 0;
-    }), p = y(() => ({
-      column: t.value.headerDef,
+  setup(e, { expose: l }) {
+    const t = G(e.params), o = B(null), r = B(!1), n = c(() => t.value.headerDef ?? {
+      key: "",
+      label: ""
+    }), d = c(() => t.value.context?.presentation), g = c(() => t.value.context?.cells?.tooltipTarget?.value ?? "body"), s = c(() => {
+      const a = t.value;
+      return a.valueFormatted !== void 0 && a.valueFormatted !== null ? String(a.valueFormatted) : String(a.value ?? "");
+    }), v = c(() => t.value.value), p = c(() => j(v.value)), S = c(() => d.value?.stats[n.value.key]), R = c(() => d.value?.mode === "unpaginated" && n.value.dataType === "number"), k = c(() => {
+      if (!R.value || !n.value.showPercentage || !S.value)
+        return;
+      const a = p.value;
+      if (a === null || S.value.sum <= 0)
+        return;
+      const u = a / S.value.sum * 100;
+      return n.value.percentageFormatter?.(u) ?? Ne(u, d.value?.locale);
+    }), i = c(() => R.value && !!n.value.bar && (p.value !== null || v.value === null || v.value === void 0)), w = c(() => i.value && S.value ? Ke(p.value, S.value, n.value.bar) * 100 : 0), y = c(() => R.value && p.value !== null ? Ie(p.value, n.value.thresholds) : void 0), O = c(() => ({
+      column: n.value,
       refreshCell: () => {
-        const C = t.value.node;
-        C && t.value.api.refreshCells({ force: !0, rowNodes: [C] });
+        const a = t.value.node;
+        a && t.value.api.refreshCells({ force: !0, rowNodes: [a] });
       },
       row: t.value.data ?? {},
       rowIndex: t.value.node?.rowIndex ?? 0,
       rowValue: t.value.value,
       selected: t.value.node?.isSelected() ?? !1
-    })), a = () => o.value?.(p.value);
-    let s, f, b = !1;
-    const K = () => {
-      const C = l.value;
-      r.value = !!C && C.scrollWidth > C.clientWidth;
-    }, S = () => {
-      b || (f !== void 0 && cancelAnimationFrame(f), f = requestAnimationFrame(() => {
-        f = void 0, K();
+    })), D = (a, { slots: u }) => {
+      const C = t.value.colDef?.colId, E = t.value.context?.cells?.slots;
+      return !C || C === "cell-icon" || !E?.[C] ? u.default?.() : me(
+        "span",
+        { class: "table-data-grid-cell-slot-content" },
+        L(E, C, O.value, () => u.default?.() ?? [])
+      );
+    }, F = () => {
+      const a = t.value.context?.cells?.slots;
+      return a?.["cell-icon"] ? L(a, "cell-icon", O.value) : null;
+    };
+    let I, T, M = !1;
+    const x = () => {
+      const a = o.value;
+      r.value = !!a && a.scrollWidth > a.clientWidth;
+    }, m = () => {
+      M || (T !== void 0 && cancelAnimationFrame(T), T = requestAnimationFrame(() => {
+        T = void 0, x();
       }));
-    }, w = (C) => {
-      if (s?.disconnect(), C) {
-        s?.observe(C);
-        const I = C.closest(".ag-cell");
-        I && s?.observe(I);
+    }, f = (a) => {
+      if (I?.disconnect(), a) {
+        I?.observe(a);
+        const u = a.closest(".ag-cell");
+        u && I?.observe(u);
       }
-      S();
+      m();
     };
-    return Y(() => {
-      s = new ResizeObserver(S), w(l.value);
-    }), A(l, w, { flush: "post" }), Z(() => {
-      b = !0, s?.disconnect(), f !== void 0 && cancelAnimationFrame(f);
-    }), n({
-      refresh(C) {
-        return t.value = C, ee(S), !0;
+    return le(() => {
+      I = new ResizeObserver(m), f(o.value);
+    }), $(o, f), ue(() => {
+      M = !0, I?.disconnect(), T !== void 0 && cancelAnimationFrame(T);
+    }), l({
+      refresh(a) {
+        return t.value = a, ce(m), !0;
       }
-    }), (C, I) => {
-      const G = Q("KTooltip");
-      return o.value ? (O(), J(te(a), { key: 0 })) : (O(), B("span", Se, [
-        W(G, {
-          class: "table-data-grid-cell-tooltip",
-          disabled: !r.value,
-          "kpop-attributes": { popoverDelay: 400 },
-          "max-width": "300",
-          placement: "bottom-start",
-          target: "body",
-          text: i.value
-        }, {
-          default: oe(() => [
-            ae("span", {
-              ref_key: "contentElement",
-              ref: l,
-              class: "table-data-grid-cell-content"
-            }, le(i.value), 513)
+    }), (a, u) => {
+      const C = ne("KTooltip");
+      return K(), A("span", {
+        class: de(["table-data-grid-cell-renderer", {
+          "table-data-grid-cell-renderer--bar": i.value,
+          "table-data-grid-cell-renderer--percentage": !!k.value,
+          [`table-data-grid-cell-renderer--text-${y.value}`]: !i.value && !!y.value
+        }]),
+        "data-threshold": y.value
+      }, [
+        (K(), P(X(F))),
+        (K(), P(X(D), null, {
+          default: Y(() => [
+            q(C, {
+              class: "table-data-grid-cell-tooltip",
+              disabled: !r.value,
+              "kpop-attributes": { popoverDelay: 400 },
+              "max-width": "300",
+              placement: "bottom-start",
+              target: g.value,
+              text: s.value
+            }, {
+              default: Y(() => [
+                Z("span", {
+                  ref_key: "contentElement",
+                  ref: o,
+                  class: "table-data-grid-cell-content"
+                }, ee(s.value), 513)
+              ]),
+              _: 1
+            }, 8, ["disabled", "target", "text"])
           ]),
           _: 1
-        }, 8, ["disabled", "text"])
-      ]));
+        })),
+        k.value ? (K(), A("span", Me, "(" + ee(k.value) + ")", 1)) : te("", !0),
+        i.value ? (K(), A("span", {
+          key: 1,
+          class: "table-data-grid-cell-bar",
+          "data-testid": "table-data-grid-cell-bar",
+          "data-threshold": y.value
+        }, [
+          Z("span", {
+            class: "table-data-grid-cell-bar-fill",
+            "data-testid": "table-data-grid-cell-bar-fill",
+            style: ve({ width: `${w.value}%` })
+          }, null, 4)
+        ], 8, ze)) : te("", !0)
+      ], 10, Ge);
     };
   }
-}), ke = ({
+}), Ae = ({
   headers: e,
-  slots: n,
-  initialSort: t
+  slots: l,
+  initialSort: t,
+  mode: o,
+  rows: r,
+  locale: n,
+  tooltipTarget: d
 }) => {
-  const l = y(() => ({
-    cells: { slots: n }
-  })), r = (o) => {
-    const p = t?.sortColumnKey === o.key;
+  const g = o ?? "infinite", s = /* @__PURE__ */ new Set();
+  $([e, () => r?.value], () => {
+    e.value.forEach((i) => {
+      if (!!!(i.showPercentage || i.bar || i.thresholds?.length))
+        return;
+      const y = g === "infinite" ? "percentage, bar, and threshold presentation is only supported in unpaginated mode" : i.dataType !== "number" ? 'percentage, bar, and threshold presentation requires dataType: "number"' : r?.value?.some((D) => {
+        const F = Reflect.get(D, i.key);
+        return F != null && j(F) === null;
+      }) ? "contains non-finite or nonnumeric values; numeric presentation skips those values" : void 0;
+      if (!y)
+        return;
+      const O = `${i.key}:${y}`;
+      s.has(O) || (s.add(O), console.warn(`[TableDataGrid] Column "${i.key}" ${y}.`));
+    });
+  }, { deep: !0, immediate: !0 });
+  const p = c(() => {
+    if (g !== "unpaginated")
+      return {};
+    const i = r?.value ?? [];
+    return Object.fromEntries(
+      e.value.filter((w) => w.dataType === "number").map((w) => [w.key, Fe(i, w)])
+    );
+  }), S = c(() => ({
+    cells: { slots: l, tooltipTarget: d },
+    presentation: {
+      mode: g,
+      locale: n?.value ?? "en-US",
+      stats: p.value
+    }
+  })), R = (i) => {
+    const w = t?.sortColumnKey === i.key;
     return {
-      colId: o.key,
+      colId: i.key,
       // Columns with no explicit width constraint share remaining space equally.
-      flex: !o.width && !o.maxWidth ? 1 : void 0,
-      headerName: o.label,
-      maxWidth: o.maxWidth,
-      minWidth: o.minWidth,
-      sortable: o.sortable ?? !1,
-      unSortIcon: o.showSortIcon,
-      ...p ? { initialSort: t?.sortColumnOrder, initialSortIndex: 0 } : {},
-      valueGetter: (a) => a.data?.[o.key],
-      width: o.width,
-      cellRenderer: be,
+      flex: !i.width && !i.maxWidth ? 1 : void 0,
+      headerName: i.label,
+      maxWidth: i.maxWidth,
+      minWidth: i.minWidth,
+      sortable: i.sortable ?? !1,
+      unSortIcon: i.showSortIcon,
+      ...w ? { initialSort: t?.sortColumnOrder, initialSortIndex: 0 } : {},
+      valueGetter: (y) => y.data?.[i.key],
+      valueFormatter: (y) => i.valueFormatter && y.data ? i.valueFormatter(y.value, y.data) : String(y.value ?? ""),
+      width: i.width,
+      cellRenderer: Be,
       // custom params passed to the cell renderer.
-      cellRendererParams: { headerDef: o }
+      cellRendererParams: { headerDef: i }
     };
   };
   return {
-    columnDefs: y(() => e.value.map(r)),
-    gridContext: l
+    columnDefs: c(() => e.value.map(R)),
+    gridContext: S
   };
-}, V = ({
+}, W = ({
   config: e,
-  headers: n,
+  headers: l,
   pageSize: t
 }) => {
-  const l = new Set(n.filter((i) => i.sortable).map((i) => i.key)), r = e?.sortColumnKey && l.has(e.sortColumnKey) ? e.sortColumnKey : void 0;
+  const o = new Set(l.filter((n) => n.sortable).map((n) => n.key)), r = e?.sortColumnKey && o.has(e.sortColumnKey) ? e.sortColumnKey : void 0;
   return {
     sortColumnKey: r,
     sortColumnOrder: r ? e?.sortColumnOrder : void 0,
     pageSize: e?.pageSize ?? t
   };
-}, H = (e, n) => e.sortColumnKey === n.sortColumnKey && e.sortColumnOrder === n.sortColumnOrder && e.pageSize === n.pageSize, we = ({
+}, ae = (e, l) => e.sortColumnKey === l.sortColumnKey && e.sortColumnOrder === l.sortColumnOrder && e.pageSize === l.pageSize, _e = ({
   headers: e,
-  pageSize: n,
+  pageSize: l,
   tableConfig: t,
-  emitTableConfigUpdate: l,
+  emitTableConfigUpdate: o,
   onExternalConfigChange: r
 }) => {
-  const i = y(() => t.value ? V({ config: t.value, headers: e.value, pageSize: n.value }) : void 0), o = x(
-    i.value ?? V({ config: void 0, headers: e.value, pageSize: n.value })
+  const n = c(() => t.value ? W({ config: t.value, headers: e.value, pageSize: l.value }) : void 0), d = B(
+    n.value ?? W({ config: void 0, headers: e.value, pageSize: l.value })
   );
-  A(i, (f) => {
-    f && !H(f, o.value) && (o.value = f, r?.(f));
+  $(n, (p) => {
+    p && !ae(p, d.value) && (d.value = p, r?.(p));
   });
-  const p = (f) => {
-    const b = V({
-      config: { ...o.value, ...f },
+  const g = (p) => {
+    const S = W({
+      config: { ...d.value, ...p },
       headers: e.value,
-      pageSize: n.value
+      pageSize: l.value
     });
-    H(b, o.value) || (o.value = b, l(b));
-  }, a = y(() => ({
-    sortColumnKey: o.value.sortColumnKey,
-    sortColumnOrder: o.value.sortColumnOrder
-  })), s = y(() => t.value?.pageSize ?? n.value);
+    ae(S, d.value) || (d.value = S, o(S));
+  }, s = c(() => ({
+    sortColumnKey: d.value.sortColumnKey,
+    sortColumnOrder: d.value.sortColumnOrder
+  })), v = c(() => t.value?.pageSize ?? l.value);
   return {
-    activeTableConfig: M(o),
-    activeSort: a,
-    activePageSize: s,
-    patchTableConfig: p
+    activeTableConfig: V(d),
+    activeSort: s,
+    activePageSize: v,
+    patchTableConfig: g
   };
-}, De = ({
+}, $e = ({
   cellClick: e,
-  headers: n,
+  headers: l,
   rowClick: t
 }) => {
-  const l = y(() => new Set(
-    n.value.filter((a) => a.disableRowClick).map((a) => a.key)
-  )), r = (a) => {
-    const s = a.event?.target;
-    return s instanceof Element ? s.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
-  }, i = (a) => {
-    const s = r(a);
-    return !!(s && l.value.has(s));
+  const o = c(() => new Set(
+    l.value.filter((s) => s.disableRowClick).map((s) => s.key)
+  )), r = (s) => {
+    const v = s.event?.target;
+    return v instanceof Element ? v.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
+  }, n = (s) => {
+    const v = r(s);
+    return !!(v && o.value.has(v));
   };
   return {
-    onCellClick: (a) => {
-      const s = a.colDef.colId;
-      !a.data || !s || e({
-        columnKey: s,
-        row: a.data,
-        value: a.value
+    onCellClick: (s) => {
+      const v = s.colDef.colId;
+      !s.data || !v || e({
+        columnKey: v,
+        row: s.data,
+        value: s.value
       });
     },
-    onRowClick: (a) => {
-      a.data && !i(a) && t(a.data, a);
+    onRowClick: (s) => {
+      s.data && !n(s) && t(s.data, s);
     }
   };
-}, Re = ({
+}, Ue = ({
   activeSort: e,
-  emitSort: n,
+  emitSort: l,
   patchTableConfig: t
 }) => {
-  const l = (i, o) => {
-    i.applyColumnState({
-      state: o.sortColumnKey ? [{ colId: o.sortColumnKey, sort: o.sortColumnOrder ?? null, sortIndex: 0 }] : [],
+  const o = (n, d) => {
+    n.applyColumnState({
+      state: d.sortColumnKey ? [{ colId: d.sortColumnKey, sort: d.sortColumnOrder ?? null, sortIndex: 0 }] : [],
       defaultState: { sort: null, sortIndex: null }
     });
   };
-  return { onSortChanged: (i) => {
-    const o = i.api.getColumnState().filter((s) => s.sort).sort((s, f) => (s.sortIndex ?? 0) - (f.sortIndex ?? 0)), p = o[o.length - 1], a = p ? { sortColumnKey: p.colId, sortColumnOrder: p.sort } : { sortColumnKey: void 0, sortColumnOrder: void 0 };
-    a.sortColumnKey === e.value.sortColumnKey && a.sortColumnOrder === e.value.sortColumnOrder || (n(a), t(a), o.length > 1 && l(i.api, a));
-  }, applySortToGrid: l };
-}, Ie = { title: "No Data", message: "There is no data to display." }, Ee = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, Ke = {
-  emptyState: Ie,
-  errorState: Ee
+  return { onSortChanged: (n) => {
+    const d = n.api.getColumnState().filter((v) => v.sort).sort((v, p) => (v.sortIndex ?? 0) - (p.sortIndex ?? 0)), g = d[d.length - 1], s = g ? { sortColumnKey: g.colId, sortColumnOrder: g.sort } : { sortColumnKey: void 0, sortColumnOrder: void 0 };
+    s.sortColumnKey === e.value.sortColumnKey && s.sortColumnOrder === e.value.sortColumnOrder || (l(s), t(s), d.length > 1 && o(n.api, s));
+  }, applySortToGrid: o };
+}, Ve = { title: "No Data", message: "There is no data to display." }, Le = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, We = {
+  emptyState: Ve,
+  errorState: Le
 };
-function Oe() {
-  const e = ve("en-us", Ke);
+function Pe() {
+  const e = ke("en-us", We);
   return {
     i18n: e,
-    i18nT: me(e)
+    i18nT: we(e)
     // Translation component <i18n-t>
   };
 }
-const xe = {
-  class: "kong-ui-public-table-data-grid",
-  "data-testid": "table-data-grid"
-}, Ge = {
+const qe = {
   key: 0,
   class: "table-error-state",
   "data-testid": "table-error-state"
-}, Te = {
+}, je = {
   key: 1,
   class: "table-empty-state",
   "data-testid": "table-empty-state"
-}, Fe = /* @__PURE__ */ P({
+}, He = /* @__PURE__ */ oe({
   __name: "TableDataGrid",
   props: {
     headers: {},
@@ -424,105 +524,123 @@ const xe = {
     rows: {}
   },
   emits: ["grid:ready", "state", "row:click", "cell:click", "sort", "update:tableConfig"],
-  setup(e, { emit: n }) {
-    se.registerModules([ie, ce, ue]);
-    const t = e.mode ?? "infinite", l = n, { i18n: { t: r } } = Oe(), i = ne(), o = T(), { activeTableConfig: p, activeSort: a, activePageSize: s, patchTableConfig: f } = we({
-      headers: E(() => e.headers),
-      pageSize: E(() => e.pageSize),
-      tableConfig: E(() => e.tableConfig),
-      emitTableConfigUpdate: (m) => l("update:tableConfig", m),
-      onExternalConfigChange: (m) => {
-        o.value && K(o.value, m);
+  setup(e, { emit: l }) {
+    ge.registerModules([he, ye, be]);
+    const t = e.mode ?? "infinite", o = l, { i18n: r } = Pe(), { t: n } = r, d = fe(), g = G(), s = G(), v = G("body"), p = () => {
+      const h = document.fullscreenElement;
+      v.value = h instanceof HTMLElement && h.contains(s.value ?? null) ? h : "body";
+    };
+    le(() => {
+      p(), document.addEventListener("fullscreenchange", p);
+    }), Ce(() => {
+      document.removeEventListener("fullscreenchange", p);
+    });
+    const { activeTableConfig: S, activeSort: R, activePageSize: k, patchTableConfig: i } = _e({
+      headers: N(() => e.headers),
+      pageSize: N(() => e.pageSize),
+      tableConfig: N(() => e.tableConfig),
+      emitTableConfigUpdate: (h) => o("update:tableConfig", h),
+      onExternalConfigChange: (h) => {
+        g.value && y(g.value, h);
       }
-    }), { onSortChanged: b, applySortToGrid: K } = Re({
-      activeSort: a,
-      emitSort: (m) => l("sort", m),
-      patchTableConfig: f
-    }), { onCellClick: S, onRowClick: w } = De({
-      cellClick: (m) => l("cell:click", m),
-      headers: E(() => e.headers),
-      rowClick: (m, N) => l("row:click", m, N)
-    }), C = {
+    }), { onSortChanged: w, applySortToGrid: y } = Ue({
+      activeSort: R,
+      emitSort: (h) => o("sort", h),
+      patchTableConfig: i
+    }), { onCellClick: O, onRowClick: D } = $e({
+      cellClick: (h) => o("cell:click", h),
+      headers: N(() => e.headers),
+      rowClick: (h, Q) => o("row:click", h, Q)
+    }), F = {
       resizable: !1,
       sortable: !1,
       suppressMovable: !0
-    }, I = y(() => p.value.sortColumnKey), G = y(() => p.value.sortColumnOrder), k = y(() => [
-      s.value,
+    }, I = c(() => S.value.sortColumnKey), T = c(() => S.value.sortColumnOrder), M = c(() => [
+      k.value,
       e.refreshKey,
       I.value,
-      G.value
-    ]), D = t === "infinite" ? ye({
-      fetcher: E(() => e.fetcher),
-      resetKey: k,
-      sort: a
-    }) : void 0, U = D?.datasource, _ = y(() => D ? D.data.value : e.rows), z = y(() => D?.isFetching.value ?? !1), L = y(() => e.rows ? Array.from(e.rows) : void 0), { columnDefs: c, gridContext: u } = ke({
-      headers: E(() => e.headers),
-      slots: i,
-      initialSort: a.value
+      T.value
+    ]), x = t === "infinite" ? Oe({
+      fetcher: N(() => e.fetcher),
+      resetKey: M,
+      sort: R
+    }) : void 0, m = x?.datasource, f = c(() => x ? x.data.value : e.rows), a = c(() => x?.isFetching.value ?? !1), u = c(() => e.rows ? Array.from(e.rows) : void 0), { columnDefs: C, gridContext: E } = Ae({
+      headers: N(() => e.headers),
+      locale: c(() => r.locale),
+      mode: t,
+      rows: u,
+      slots: d,
+      tooltipTarget: v,
+      initialSort: R.value
     }), {
-      fetchState: v,
-      hasData: d,
-      state: g
-    } = Ce(
-      _,
-      E(() => D?.error.value),
-      z
-    ), R = y(() => g.value === v.SUCCESS && !d.value);
-    D && pe({
-      emitState: (m) => l("state", m),
-      fetchLifecycleState: g,
-      hasData: d
+      fetchState: H,
+      hasData: z,
+      state: U
+    } = Re(
+      f,
+      N(() => x?.error.value),
+      a
+    ), re = c(() => U.value === H.SUCCESS && !z.value);
+    x && Ee({
+      emitState: (h) => o("state", h),
+      fetchLifecycleState: U,
+      hasData: z
     });
-    const $ = (m) => {
-      o.value = m.api, l("grid:ready", m.api);
+    const se = (h) => {
+      g.value = h.api, o("grid:ready", h.api);
     };
-    return (m, N) => {
-      const q = Q("KEmptyState");
-      return O(), B("div", xe, [
-        e.error ? (O(), B("div", Ge, [
-          j(m.$slots, "error-state", {}, () => [
-            W(q, {
+    return (h, Q) => {
+      const J = ne("KEmptyState");
+      return K(), A("div", {
+        ref_key: "rootElement",
+        ref: s,
+        class: "kong-ui-public-table-data-grid",
+        "data-testid": "table-data-grid"
+      }, [
+        e.error ? (K(), A("div", qe, [
+          L(h.$slots, "error-state", {}, () => [
+            q(J, {
               "icon-variant": "error",
-              message: h(r)("errorState.message"),
-              title: h(r)("errorState.title")
+              message: b(n)("errorState.message"),
+              title: b(n)("errorState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : R.value ? (O(), B("div", Te, [
-          j(m.$slots, "empty-state", {}, () => [
-            W(q, {
-              message: h(r)("emptyState.message"),
-              title: h(r)("emptyState.title")
+        ])) : re.value ? (K(), A("div", je, [
+          L(h.$slots, "empty-state", {}, () => [
+            q(J, {
+              message: b(n)("emptyState.message"),
+              title: b(n)("emptyState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : (O(), J(h(re), {
+        ])) : (K(), P(b(pe), {
           key: 2,
-          "cache-block-size": h(t) === "infinite" ? h(s) : void 0,
+          "cache-block-size": b(t) === "infinite" ? b(k) : void 0,
           class: "table-data-grid-grid",
-          "column-defs": h(c),
-          context: h(u),
-          datasource: h(t) === "infinite" ? h(U) : void 0,
-          "default-col-def": C,
-          "infinite-initial-row-count": h(t) === "infinite" ? 1 : void 0,
-          loading: z.value,
-          "row-data": h(t) === "unpaginated" ? L.value : void 0,
-          "row-model-type": h(t) === "unpaginated" ? "clientSide" : "infinite",
+          "column-defs": b(C),
+          context: b(E),
+          datasource: b(t) === "infinite" ? b(m) : void 0,
+          "default-col-def": F,
+          "infinite-initial-row-count": b(t) === "infinite" ? 1 : void 0,
+          loading: a.value,
+          "row-data": b(t) === "unpaginated" ? u.value : void 0,
+          "row-model-type": b(t) === "unpaginated" ? "clientSide" : "infinite",
           "suppress-cell-focus": !0,
           "suppress-multi-sort": !0,
-          theme: h(de),
-          onCellClicked: h(S),
-          onGridReady: $,
-          onRowClicked: h(w),
-          onSortChanged: h(b)
+          theme: b(Se),
+          onCellClicked: b(O),
+          onGridReady: se,
+          onRowClicked: b(D),
+          onSortChanged: b(w)
         }, null, 8, ["cache-block-size", "column-defs", "context", "datasource", "infinite-initial-row-count", "loading", "row-data", "row-model-type", "theme", "onCellClicked", "onRowClicked", "onSortChanged"]))
-      ]);
+      ], 512);
     };
   }
-}), ze = (e, n) => {
+}), Qe = (e, l) => {
   const t = e.__vccOpts || e;
-  for (const [l, r] of n)
-    t[l] = r;
+  for (const [o, r] of l)
+    t[o] = r;
   return t;
-}, Ue = /* @__PURE__ */ ze(Fe, [["__scopeId", "data-v-17889e6a"]]);
+}, et = /* @__PURE__ */ Qe(He, [["__scopeId", "data-v-08dd32b5"]]);
 export {
-  Ue as TableDataGrid
+  et as TableDataGrid
 };