@kong-ui-public/table-data-grid 0.9.0 → 0.9.1-pr.4063.f9e4f8cdb.0

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

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