@kong-ui-public/table-data-grid 0.8.5 → 0.8.6-pr.4034.4f13776a5.0

package/dist/style.css

@@ -1 +1 @@
-.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content,.table-data-grid-cell-slot-content{display:block;min-width:0;width:100%}.table-data-grid-cell-renderer{align-items:center;display:flex;font-feature-settings:"case";font-variant-numeric:tabular-nums;gap:4px;gap:var(--kui-space-20, 4px)}.table-data-grid-cell-label{align-items:center;display:flex;flex:1 1 auto;gap:4px;gap:var(--kui-space-20, 4px);min-width:0}.table-data-grid-cell-label-track{display:grid;flex:1 1 auto;grid-template-columns:minmax(0,1fr);min-width:0}.table-data-grid-cell-label-track>*{grid-area:1/1}.table-data-grid-cell-label-sizer{height:0;visibility:hidden}.table-data-grid-cell-sizer-value:before,.table-data-grid-cell-sizer-relative:before{content:attr(data-text);white-space:nowrap}.table-data-grid-cell-sizer-value{font-weight:600;font-weight:var(--kui-font-weight-semibold, 600)}.table-data-grid-cell-renderer--bar{display:grid;grid-template-columns:minmax(0,max-content) minmax(80px,1fr)}.table-data-grid-cell-content,.table-data-grid-cell-slot-content,.table-data-grid-cell-relative{white-space:nowrap}.table-data-grid-cell-relative,.table-data-grid-cell-sizer-relative{flex-shrink:0;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:400;font-weight:var(--kui-font-weight-regular, 400)}.table-data-grid-cell-renderer--bar .table-data-grid-cell-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--text-warning .table-data-grid-cell-content,.table-data-grid-cell-renderer--text-warning .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--text-error .table-data-grid-cell-content,.table-data-grid-cell-renderer--text-error .table-data-grid-cell-slot-content{font-weight:600;font-weight:var(--kui-font-weight-semibold, 600)}.table-data-grid-cell-renderer--text-warning{color:#995c00;color:var(--kui-color-text-warning, #995c00)}.table-data-grid-cell-renderer--text-error{color:#d60027;color:var(--kui-color-text-danger, #d60027)}.table-data-grid-cell-renderer--bar .table-data-grid-cell-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-tooltip,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-tooltip,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-content{flex:0 1 auto;width:auto}.table-data-grid-cell-bar{background-color:#e0e4ea;background-color:var(--kui-color-background-neutral-weaker, #e0e4ea);border-radius:100px;border-radius:var(--kui-border-radius-round, 100px);display:block;height:8px;min-width:80px;overflow:hidden;width:100%}.table-data-grid-cell-bar-fill{background-color:#6a86d2;border-radius:inherit;display:block;height:100%}.table-data-grid-cell-bar[data-threshold=warning] .table-data-grid-cell-bar-fill{background-color:#995c00;background-color:var(--kui-color-background-warning, #995c00)}.table-data-grid-cell-bar[data-threshold=error] .table-data-grid-cell-bar-fill{background-color:#d60027;background-color:var(--kui-color-background-danger, #d60027)}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-01cd8bcd]{border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;width:100%}.kong-ui-public-table-data-grid.fit-to-content[data-v-01cd8bcd]{height:auto}.table-data-grid-grid[data-v-01cd8bcd]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-foreground-color: var(--kui-color-text, #0d0e14);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-weight: var(--kui-font-weight-semibold, 600);--ag-header-text-color: var(--kui-color-text-neutral, #6c7489);--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 auto;min-height:0;width:100%}.ag-cell{align-items:center;display:flex;min-width:0}.ag-cell-wrapper,.ag-cell-value{min-width:0;width:100%}
+.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content,.table-data-grid-cell-slot-content{display:block;min-width:0;width:100%}.table-data-grid-cell-renderer{align-items:center;display:flex;font-feature-settings:"case";font-variant-numeric:tabular-nums;gap:4px;gap:var(--kui-space-20, 4px)}.table-data-grid-cell-label{align-items:center;display:flex;flex:1 1 auto;gap:4px;gap:var(--kui-space-20, 4px);min-width:0}.table-data-grid-cell-label-track{display:grid;flex:1 1 auto;grid-template-columns:minmax(0,1fr);min-width:0}.table-data-grid-cell-label-track>*{grid-area:1/1}.table-data-grid-cell-label-sizer{height:0;visibility:hidden}.table-data-grid-cell-sizer-value:before,.table-data-grid-cell-sizer-relative:before{content:attr(data-text);white-space:nowrap}.table-data-grid-cell-sizer-value{font-weight:600;font-weight:var(--kui-font-weight-semibold, 600)}.table-data-grid-cell-renderer--bar{display:grid;grid-template-columns:minmax(0,max-content) minmax(80px,1fr)}.table-data-grid-cell-content,.table-data-grid-cell-slot-content,.table-data-grid-cell-relative{white-space:nowrap}.table-data-grid-cell-relative,.table-data-grid-cell-sizer-relative{flex-shrink:0;font-size:12px;font-size:var(--kui-font-size-20, 12px);font-weight:400;font-weight:var(--kui-font-weight-regular, 400)}.table-data-grid-cell-renderer--bar .table-data-grid-cell-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--text-warning .table-data-grid-cell-content,.table-data-grid-cell-renderer--text-warning .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--text-error .table-data-grid-cell-content,.table-data-grid-cell-renderer--text-error .table-data-grid-cell-slot-content{font-weight:600;font-weight:var(--kui-font-weight-semibold, 600)}.table-data-grid-cell-renderer--text-warning{color:#995c00;color:var(--kui-color-text-warning, #995c00)}.table-data-grid-cell-renderer--text-error{color:#d60027;color:var(--kui-color-text-danger, #d60027)}.table-data-grid-cell-renderer--bar .table-data-grid-cell-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--bar .table-data-grid-cell-tooltip,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-slot-content,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-tooltip,.table-data-grid-cell-renderer--percentage .table-data-grid-cell-content{flex:0 1 auto;width:auto}.table-data-grid-cell-bar{background-color:#e0e4ea;background-color:var(--kui-color-background-neutral-weaker, #e0e4ea);border-radius:100px;border-radius:var(--kui-border-radius-round, 100px);display:block;height:8px;min-width:80px;overflow:hidden;width:100%}.table-data-grid-cell-bar-fill{background-color:#6a86d2;border-radius:inherit;display:block;height:100%}.table-data-grid-cell-bar[data-threshold=warning] .table-data-grid-cell-bar-fill{background-color:#995c00;background-color:var(--kui-color-background-warning, #995c00)}.table-data-grid-cell-bar[data-threshold=error] .table-data-grid-cell-bar-fill{background-color:#d60027;background-color:var(--kui-color-background-danger, #d60027)}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-82e410f3]{border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;width:100%}.kong-ui-public-table-data-grid.fit-to-content[data-v-82e410f3]{height:auto}.table-data-grid-grid[data-v-82e410f3]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-font-size: var(--kui-table-cell-font-size, var(--kui-font-size-30, 14px));--ag-foreground-color: var(--kui-table-cell-color-text, var(--kui-color-text, #0d0e14));--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-size: var(--kui-table-header-font-size, var(--kui-font-size-30, 14px));--ag-header-font-weight: var(--kui-table-header-font-weight, var(--kui-font-weight-semibold, 600));--ag-header-text-color: var(--kui-table-header-color-text, var(--kui-color-text-neutral, #6c7489));--ag-row-hover-color: var(--kui-table-row-color-background-hover, var(--kui-color-background-primary-weakest, #eefaff));--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 auto;min-height:0;width:100%}.table-data-grid-grid[data-v-82e410f3] .ag-header{transition:box-shadow .2s ease-in-out;transition:box-shadow var(--kui-animation-duration-20, .2s) ease-in-out;z-index:1}.is-scrolled .table-data-grid-grid[data-v-82e410f3] .ag-header{box-shadow:0 4px 20px #00000014;box-shadow:var(--kui-table-header-shadow-scrolled, var(--kui-shadow, 0px 4px 20px 0px rgba(0, 0, 0, .08)))}.ag-cell{align-items:center;display:flex;min-width:0}.ag-cell-wrapper,.ag-cell-value{min-width:0;width:100%}

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

@@ -1,40 +1,40 @@
-import { computed as m, watch as M, ref as L, shallowRef as q, readonly as J, shallowReadonly as Ce, defineComponent as ie, onMounted as ue, onUnmounted as ge, nextTick as pe, resolveComponent as ce, openBlock as K, createElementBlock as _, normalizeClass as de, createElementVNode as H, createBlock as te, resolveDynamicComponent as oe, withCtx as le, createVNode as ae, toDisplayString as ne, createCommentVNode as Q, normalizeStyle as he, h as ye, renderSlot as X, useSlots as be, useTemplateRef as Se, onBeforeUnmount as ke, toRef as $, unref as D } from "vue";
-import { AgGridVue as we } from "ag-grid-vue3";
-import { ModuleRegistry as De, AllCommunityModule as Re, ClientSideRowModelModule as Oe, InfiniteRowModelModule as Te, themeQuartz as Ee } from "ag-grid-community";
-import { createI18n as xe, i18nTComponent as Ke } from "@kong-ui-public/i18n";
-var j = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(j || {});
-const Ie = (e) => !!e?.length;
-function Fe(e, a, t, l = Ie) {
+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: j,
+    fetchState: Q,
     hasData: o,
     state: n
   };
 }
-const Ge = ({
+const Ne = ({
   emitState: e,
   fetchLifecycleState: a,
   hasData: t
 }) => {
-  M(
+  A(
     () => ({
       hasData: t.value,
       state: a.value
     }),
     ({ hasData: l, state: o }) => {
-      if (o !== j.PENDING) {
-        if (o === j.LOADING) {
+      if (o !== Q.PENDING) {
+        if (o === Q.LOADING) {
           e({
             hasData: l,
             state: "loading"
           });
           return;
         }
-        if (o === j.ERROR) {
+        if (o === Q.ERROR) {
           e({
             hasData: l,
             state: "error"
@@ -48,13 +48,13 @@ const Ge = ({
       }
     }
   );
-}, ze = ({ startRow: e, endRow: a }) => {
+}, _e = ({ startRow: e, endRow: a }) => {
   const t = a - e;
   return {
     blockIndex: t > 0 ? Math.floor(e / t) : 0,
     pageSize: t
   };
-}, Ne = ({
+}, Be = ({
   startRow: e,
   rowsLength: a,
   pageSize: t,
@@ -65,14 +65,14 @@ const Ge = ({
     return l;
   if (o !== !0 && (o === !1 || a < t))
     return e + a;
-}, _e = ({
+}, Me = ({
   fetcher: e,
   resetKey: a,
   sort: t
 }) => {
-  const l = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), n = L(0), g = L(0), u = q(), r = q(), f = q(), b = L(0), w = L(!1);
-  let p, R, B = 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 && B === t?.value?.sortColumnKey && s === t?.value?.sortColumnOrder, A = (c) => {
+  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;
@@ -80,7 +80,7 @@ const Ge = ({
   }, T = () => {
     w.value = b.value > 0;
   }, E = () => {
-    g.value += 1, B = t?.value?.sortColumnKey, s = t?.value?.sortColumnOrder;
+    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();
@@ -122,7 +122,7 @@ const Ge = ({
     pageSize: y,
     result: k
   }) => {
-    k.cursor !== void 0 && l.set(c, k.cursor), C.successCallback(k.data, Ne({
+    k.cursor !== void 0 && l.set(c, k.cursor), C.successCallback(k.data, Be({
       startRow: C.startRow,
       rowsLength: k.data.length,
       pageSize: y,
@@ -144,57 +144,57 @@ const Ge = ({
     const d = n.value + 1;
     return n.value = d, E(), {
       async getRows(C) {
-        if (!v(d) || !A(C.sortModel)) {
+        if (!v(d) || !$(C.sortModel)) {
           C.failCallback();
           return;
         }
         const {
           blockIndex: y,
           pageSize: k
-        } = ze({
+        } = _e({
           startRow: C.startRow,
           endRow: C.endRow
         });
         y === 0 && o.has(0) && E();
-        const z = g.value, i = F(y);
+        const z = g.value, N = F(y);
         if (await U({
           blockIndex: y,
-          currentBlockCompletion: i,
+          currentBlockCompletion: N,
           datasourceId: d,
           requestGeneration: z
         }) !== "ready" || !S(d, z)) {
-          C.failCallback(), O(y, i);
+          C.failCallback(), O(y, N);
           return;
         }
         I();
         try {
-          const N = y > 0 ? l.get(y - 1) : void 0, Z = await c({
+          const i = y > 0 ? l.get(y - 1) : void 0, _ = await c({
             mode: "infinite",
             pageSize: k,
-            cursor: N,
+            cursor: i,
             // Always read the latest sort, not a stale one.
             sort: t?.value
           });
           if (!S(d, z)) {
-            C.failCallback(), O(y, i);
+            C.failCallback(), O(y, N);
             return;
           }
           h({
             blockIndex: y,
-            currentBlockCompletion: i,
+            currentBlockCompletion: N,
             getRowsParams: C,
             pageSize: k,
-            result: Z
+            result: _
           });
-        } catch (N) {
+        } catch (i) {
           if (!S(d, z)) {
-            C.failCallback(), O(y, i);
+            C.failCallback(), O(y, N);
             return;
           }
           x({
             blockIndex: y,
-            currentBlockCompletion: i,
-            fetchError: N,
+            currentBlockCompletion: N,
+            fetchError: i,
             getRowsParams: C
           });
         } finally {
@@ -205,60 +205,60 @@ const Ge = ({
   }, W = () => {
     u.value = G();
   };
-  return M(
+  return A(
     [e, () => a?.value],
     () => {
       W();
     },
     { immediate: !0 }
-  ), M(
+  ), A(
     [() => t?.value?.sortColumnKey, () => t?.value?.sortColumnOrder],
     () => E()
   ), {
-    datasource: J(u),
-    data: Ce(r),
-    error: J(f),
-    isFetching: J(w)
+    datasource: X(u),
+    data: pe(r),
+    error: X(f),
+    isFetching: X(w)
   };
-}, Me = { title: "No Data", message: "There is no data to display." }, Be = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, Ae = {
-  emptyState: Me,
-  errorState: Be
+}, 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
 };
-function ve() {
-  const e = xe("en-us", Ae);
+function me() {
+  const e = Ie("en-us", $e);
   return {
     i18n: e,
-    i18nT: Ke(e)
+    i18nT: Fe(e)
     // Translation component <i18n-t>
   };
 }
-const { i18n: Ve } = ve(), me = (e, a) => {
+const { i18n: Le } = me(), fe = (e, a) => {
   const t = Reflect.get(a, e.key);
   return e.valueFormatter ? e.valueFormatter(t, a) : String(t ?? "");
-}, Y = (e) => typeof e != "number" ? null : Number.isFinite(e) ? e : null, $e = (e, a) => e.reduce(
+}, Z = (e) => typeof e != "number" ? null : Number.isFinite(e) ? e : null, Pe = (e, a) => e.reduce(
   (t, l) => {
-    const o = Y(Reflect.get(l, a.key));
+    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 }
-), Le = (e, a) => {
+), 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";
-}, Pe = (e, a, t) => {
+}, 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;
-}, Ue = (e) => {
-  const a = (t) => Ve.formatNumber(t, { maximumFractionDigits: 2 });
+}, qe = (e) => {
+  const a = (t) => Le.formatNumber(t, { maximumFractionDigits: 2 });
   return e > 0 && e < 0.01 ? `< ${a(0.01)} %` : `${a(e)} %`;
-}, fe = ({
+}, Ce = ({
   value: e,
   stats: a,
   header: t
@@ -266,44 +266,44 @@ const { i18n: Ve } = ve(), me = (e, a) => {
   if (e === null || a.sum <= 0)
     return;
   const l = e / a.sum * 100;
-  return t.percentageFormatter?.(l) ?? Ue(l);
-}, re = (e, a) => a !== void 0 && a.length > (e?.length ?? -1) ? a : e, We = ({
+  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: re(l.value, me(a, o)) ?? "",
-    relative: a.showPercentage ? re(l.relative, fe({
-      value: Y(Reflect.get(o, a.key)),
+    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: "" }
-), qe = ["data-threshold"], He = { class: "table-data-grid-cell-label-track" }, je = { class: "table-data-grid-cell-label" }, Qe = {
+), 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"
-}, Je = {
+}, Ye = {
   key: 0,
   "aria-hidden": "true",
   class: "table-data-grid-cell-label table-data-grid-cell-label-sizer"
-}, Xe = ["data-text"], Ye = ["data-text"], Ze = ["data-threshold"], et = /* @__PURE__ */ ie({
+}, 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 = L(null), o = L(!1), n = m(() => t.value.headerDef ?? {
+    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(() => Y(f.value)), w = m(() => g.value?.stats[n.value.key]), p = m(() => n.value.showPercentage && w.value ? fe({
+    }), 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)), B = m(() => R.value && w.value ? Pe(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 ? Le(b.value, n.value.thresholds) : void 0), S = m(() => ({
+    }) : 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;
@@ -313,16 +313,16 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       rowIndex: t.value.node?.rowIndex ?? 0,
       rowValue: t.value.value,
       selected: t.value.node?.isSelected() ?? !1
-    })), A = (h, { slots: x }) => {
+    })), $ = (h, { slots: x }) => {
       const G = t.value.colDef?.colId, W = t.value.context?.cells?.slots;
-      return !G || G === "cell-icon" || !W?.[G] ? x.default?.() : ye(
+      return !G || G === "cell-icon" || !W?.[G] ? x.default?.() : Se(
         "span",
         { class: "table-data-grid-cell-slot-content" },
-        X(W, G, S.value, () => x.default?.() ?? [])
+        Y(W, G, S.value, () => x.default?.() ?? [])
       );
     }, T = () => {
       const h = t.value.context?.cells?.slots;
-      return h?.["cell-icon"] ? X(h, "cell-icon", S.value) : null;
+      return h?.["cell-icon"] ? Y(h, "cell-icon", S.value) : null;
     };
     let E, I, P = !1;
     const F = () => {
@@ -340,29 +340,29 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       }
       O();
     };
-    return ue(() => {
+    return ce(() => {
       E = new ResizeObserver(O), U(l.value);
-    }), M(l, U), ge(() => {
+    }), A(l, U), he(() => {
       P = !0, E?.disconnect(), I !== void 0 && cancelAnimationFrame(I);
     }), a({
       refresh(h) {
-        return t.value = h, pe(O), !0;
+        return t.value = h, ye(O), !0;
       }
     }), (h, x) => {
-      const G = ce("KTooltip");
-      return K(), _("span", {
-        class: de(["table-data-grid-cell-renderer", {
+      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
       }, [
-        H("span", He, [
-          H("span", je, [
-            (K(), te(oe(T))),
-            (K(), te(oe(A), null, {
-              default: le(() => [
+        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,
@@ -372,48 +372,48 @@ const { i18n: Ve } = ve(), me = (e, a) => {
                   target: u.value,
                   text: r.value
                 }, {
-                  default: le(() => [
-                    H("span", {
+                  default: ne(() => [
+                    j("span", {
                       ref_key: "contentElement",
                       ref: l,
                       class: "table-data-grid-cell-content"
-                    }, ne(r.value), 513)
+                    }, re(r.value), 513)
                   ]),
                   _: 1
                 }, 8, ["disabled", "target", "text"])
               ]),
               _: 1
             })),
-            p.value ? (K(), _("span", Qe, "(" + ne(p.value) + ")", 1)) : Q("", !0)
+            p.value ? (K(), B("span", Xe, "(" + re(p.value) + ")", 1)) : J("", !0)
           ]),
-          s.value ? (K(), _("span", Je, [
-            H("span", {
+          s.value ? (K(), B("span", Ye, [
+            j("span", {
               class: "table-data-grid-cell-sizer-value",
               "data-text": s.value.value
-            }, null, 8, Xe),
-            s.value.relative ? (K(), _("span", {
+            }, 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, Ye)) : Q("", !0)
-          ])) : Q("", !0)
+            }, null, 8, et)) : J("", !0)
+          ])) : J("", !0)
         ]),
-        R.value ? (K(), _("span", {
+        R.value ? (K(), B("span", {
           key: 0,
           class: "table-data-grid-cell-bar",
           "data-testid": "table-data-grid-cell-bar",
           "data-threshold": v.value
         }, [
-          H("span", {
+          j("span", {
             class: "table-data-grid-cell-bar-fill",
             "data-testid": "table-data-grid-cell-bar-fill",
-            style: he({ width: `${B.value}%` })
+            style: be({ width: `${V.value}%` })
           }, null, 4)
-        ], 8, Ze)) : Q("", !0)
-      ], 10, qe);
+        ], 8, tt)) : J("", !0)
+      ], 10, je);
     };
   }
-}), tt = ({
+}), ot = ({
   headers: e,
   slots: a,
   initialSort: t,
@@ -422,14 +422,14 @@ const { i18n: Ve } = ve(), me = (e, a) => {
   tooltipTarget: n
 }) => {
   const g = l ?? "infinite", u = /* @__PURE__ */ new Set(), r = (s) => !!(s.showPercentage || s.bar || s.thresholds?.length);
-  M([e, () => o?.value], () => {
+  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((A) => {
-        const T = Reflect.get(A, s.key);
-        return T != null && Y(T) === null;
+      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}`;
@@ -441,14 +441,14 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       return {};
     const s = o?.value ?? [];
     return Object.fromEntries(
-      e.value.filter((v) => v.showPercentage || v.bar).map((v) => [v.key, $e(s, v)])
+      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, We({
+      e.value.filter((v) => v.bar).map((v) => [v.key, He({
         rows: s,
         header: v,
         stats: b.value[v.key]
@@ -473,9 +473,9 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       unSortIcon: s.showSortIcon,
       ...v ? { initialSort: t?.sortColumnOrder, initialSortIndex: 0 } : {},
       valueGetter: (S) => S.data?.[s.key],
-      valueFormatter: (S) => S.data ? me(s, S.data) : String(S.value ?? ""),
+      valueFormatter: (S) => S.data ? fe(s, S.data) : String(S.value ?? ""),
       width: s.width,
-      cellRenderer: et,
+      cellRenderer: at,
       // custom params passed to the cell renderer.
       cellRendererParams: { headerDef: s }
     };
@@ -496,7 +496,7 @@ const { i18n: Ve } = ve(), me = (e, a) => {
     pageSize: e?.pageSize ?? t,
     ...e?.fitToContent !== void 0 ? { fitToContent: e.fitToContent } : {}
   };
-}, se = (e, a) => e.sortColumnKey === a.sortColumnKey && e.sortColumnOrder === a.sortColumnOrder && e.pageSize === a.pageSize && e.fitToContent === a.fitToContent, at = ({
+}, 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,
@@ -504,11 +504,11 @@ const { i18n: Ve } = ve(), me = (e, a) => {
   emitTableConfigUpdate: o,
   onExternalConfigChange: n
 }) => {
-  const g = m(() => t.value ? ee({ config: t.value, headers: e.value, pageSize: a.value }) : void 0), u = L(
+  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 })
   );
-  M(g, (w) => {
-    w && !se(w, u.value) && (u.value = w, n?.(w));
+  A(g, (w) => {
+    w && !ie(w, u.value) && (u.value = w, n?.(w));
   });
   const r = (w) => {
     const p = ee({
@@ -516,9 +516,9 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       headers: e.value,
       pageSize: a.value
     });
-    se(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));
+    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));
   };
-  M(e, () => {
+  A(e, () => {
     t.value || r({});
   }, { deep: !0 });
   const f = m(() => ({
@@ -526,12 +526,12 @@ const { i18n: Ve } = ve(), me = (e, a) => {
     sortColumnOrder: u.value.sortColumnOrder
   })), b = m(() => t.value?.pageSize ?? a.value);
   return {
-    activeTableConfig: J(u),
+    activeTableConfig: X(u),
     activeSort: f,
     activePageSize: b,
     patchTableConfig: r
   };
-}, ot = ({
+}, nt = ({
   cellClick: e,
   headers: a,
   rowClick: t
@@ -558,7 +558,7 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       r.data && !n(r) && t(r.data, r);
     }
   };
-}, lt = ({
+}, rt = ({
   activeSort: e,
   patchTableConfig: a
 }) => {
@@ -572,15 +572,15 @@ const { i18n: Ve } = ve(), me = (e, a) => {
     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 };
-}, nt = {
+}, st = {
   key: 0,
   class: "table-error-state",
   "data-testid": "table-error-state"
-}, rt = {
+}, it = {
   key: 1,
   class: "table-empty-state",
   "data-testid": "table-empty-state"
-}, st = /* @__PURE__ */ ie({
+}, ut = /* @__PURE__ */ ue({
   __name: "TableDataGrid",
   props: {
     headers: {},
@@ -594,42 +594,42 @@ const { i18n: Ve } = ve(), me = (e, a) => {
   },
   emits: ["grid:ready", "state", "row:click", "cell:click", "sort", "update:tableConfig"],
   setup(e, { emit: a }) {
-    De.registerModules([Re, Oe, Te]);
-    const t = e.mode ?? "infinite", l = a, { i18n: o } = ve(), { t: n } = o, g = be(), u = q(), r = Se("rootElement"), f = q("body"), b = () => {
+    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";
     };
-    ue(() => {
+    ce(() => {
       b(), document.addEventListener("fullscreenchange", b);
-    }), ke(() => {
+    }), De(() => {
       document.removeEventListener("fullscreenchange", b);
     });
-    const { activeTableConfig: w, activeSort: p, activePageSize: R, patchTableConfig: B } = at({
-      headers: $(() => e.headers),
-      pageSize: $(() => e.pageSize),
-      tableConfig: $(() => e.tableConfig),
+    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 } = lt({
+    }), { onSortChanged: s, applySortToGrid: v } = rt({
       activeSort: p,
-      patchTableConfig: B
-    }), S = m(() => t === "unpaginated" && !!w.value.fitToContent), A = Ee.withParams({ autoHeightMinBodyHeight: 0 }), { onCellClick: T, onRowClick: E } = ot({
+      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: $(() => e.headers),
-      rowClick: (i, V) => l("row:click", i, V)
+      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" ? _e({
-      fetcher: $(() => e.fetcher),
+    }, 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 } = tt({
-      headers: $(() => e.headers),
+    }) : 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,
@@ -639,12 +639,12 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       fetchState: c,
       hasData: d,
       state: C
-    } = Fe(
+    } = ze(
       U,
-      $(() => F?.error.value),
+      L(() => F?.error.value),
       h
     ), y = m(() => C.value === c.SUCCESS && !d.value);
-    F && Ge({
+    F && Ne({
       emitState: (i) => l("state", i),
       fetchLifecycleState: C,
       hasData: d
@@ -653,37 +653,39 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       const i = u.value;
       if (!i || i.isDestroyed())
         return;
-      const V = p.value, N = i.getColumnState().find((Z) => Z.sort);
-      N?.colId === V.sortColumnKey && (N?.sort ?? void 0) === V.sortColumnOrder || v(i, V);
+      const _ = p.value, H = i.getColumnState().find((ge) => ge.sort);
+      H?.colId === _.sortColumnKey && (H?.sort ?? void 0) === _.sortColumnOrder || v(i, _);
     };
-    M([u, p], k);
-    const z = (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, V) => {
-      const N = ce("KEmptyState");
-      return K(), _("div", {
+    return (i, _) => {
+      const H = de("KEmptyState");
+      return K(), B("div", {
         ref_key: "rootElement",
         ref: r,
-        class: de(["kong-ui-public-table-data-grid", { "fit-to-content": S.value }]),
+        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(), _("div", nt, [
-          X(i.$slots, "error-state", {}, () => [
-            ae(N, {
+        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(), _("div", rt, [
-          X(i.$slots, "empty-state", {}, () => [
-            ae(N, {
+        ])) : 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(we), {
+        ])) : (K(), te(D(Re), {
           key: 2,
           "cache-block-size": D(t) === "infinite" ? D(R) : void 0,
           class: "table-data-grid-grid",
@@ -698,9 +700,10 @@ const { i18n: Ve } = ve(), me = (e, a) => {
           "row-model-type": D(t) === "unpaginated" ? "clientSide" : "infinite",
           "suppress-cell-focus": !0,
           "suppress-multi-sort": !0,
-          theme: D(A),
+          theme: D($),
+          onBodyScroll: N,
           onCellClicked: D(T),
-          onGridReady: z,
+          onGridReady: oe,
           onNewColumnsLoaded: k,
           onRowClicked: D(E),
           onSortChanged: D(s)
@@ -708,12 +711,12 @@ const { i18n: Ve } = ve(), me = (e, a) => {
       ], 2);
     };
   }
-}), it = (e, a) => {
+}), ct = (e, a) => {
   const t = e.__vccOpts || e;
   for (const [l, o] of a)
     t[l] = o;
   return t;
-}, mt = /* @__PURE__ */ it(st, [["__scopeId", "data-v-01cd8bcd"]]);
+}, Ct = /* @__PURE__ */ ct(ut, [["__scopeId", "data-v-82e410f3"]]);
 export {
-  mt as TableDataGrid
+  Ct as TableDataGrid
 };

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

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

package/dist/types/components/TableDataGrid.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AA4TA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,OAAO,EACP,cAAc,EACd,eAAe,EAChB,MAAM,mBAAmB,CAAA;AAmB1B,QAAA,MAAM,YAAY,GAAK,GAAG,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAiWO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;;;;;;;KAAmC,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;qCA7UoB,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;uBAHzD,MAAM,OAAO;uBACb,MAAM,OAAO;qBACf,CAAC,KAAK,EAAE,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;;;YAM5D,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;YAClD,WAAW,OAAO,GAAG,SAAS,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI;YACzD,YAAY,WAAW,6BAA6B,CAAC,GAAG,CAAC,GAAG,IAAI;YAChE,MAAM,WAAW,iBAAiB,GAAG,IAAI;YACzC,oBAAoB,WAAW,mBAAmB,GAAG,IAAI;;EAuU3D,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AAoVA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAGV,OAAO,EACP,cAAc,EACd,eAAe,EAChB,MAAM,mBAAmB,CAAA;AAmB1B,QAAA,MAAM,YAAY,GAAK,GAAG,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAuXO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;;;;;;;KAAmC,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;qCAnWoB,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;uBAHzD,MAAM,OAAO;uBACb,MAAM,OAAO;qBACf,CAAC,KAAK,EAAE,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;;;YAM5D,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;YAClD,WAAW,OAAO,GAAG,SAAS,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI;YACzD,YAAY,WAAW,6BAA6B,CAAC,GAAG,CAAC,GAAG,IAAI;YAChE,MAAM,WAAW,iBAAiB,GAAG,IAAI;YACzC,oBAAoB,WAAW,mBAAmB,GAAG,IAAI;;EA6V3D,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/table-data-grid",
-  "version": "0.8.5",
+  "version": "0.8.6-pr.4034.4f13776a5.0",
   "type": "module",
   "main": "./dist/table-data-grid.umd.js",
   "module": "./dist/table-data-grid.es.js",
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "^2.5.1",
+    "@kong-ui-public/sandbox-layout": "^2.8.7",
     "@kong/kongponents": "9.66.12",
     "vue": "^3.5.43"
   },