@kong-ui-public/table-data-grid 0.4.2-pr.3761.bed46084d.0 → 0.5.0

package/README.md

@@ -3,8 +3,8 @@
 Reusable Vue wrapper around AG Grid for Kong table data grids.
 
 This package currently supports AG Grid infinite row loading with a cursor-first
-fetcher contract, basic column definitions, empty/error presentation states, and
-state lifecycle emits.
+fetcher contract, basic column definitions, single-column sorting, empty/error
+presentation states, and state lifecycle emits.
 
 ## Peer Dependencies
 
@@ -147,11 +147,11 @@ type TableDataGridFetcher<Row> = (
 `cursor` is an opaque token returned by the previous response. The first request
 uses `cursor: undefined`; later requests receive the previous response cursor.
 
-`sort` is the current single-column sort, or `undefined` when nothing is
-sorted. A sort change is a request-context change like `refreshKey` or
-`pageSize`: it rebuilds the datasource and restarts the cursor chain from the
-beginning, because a cursor produced under one sort order is not valid under
-another.
+`sort` carries the current single-column sort, with `sortColumnKey` and
+`sortColumnOrder` left `undefined` when nothing is sorted. A sort change is a
+request-context change like `refreshKey` or `pageSize`: it rebuilds the
+datasource and restarts the cursor chain from the beginning, because a cursor
+produced under one sort order is not valid under another.
 
 AG Grid range details are datasource internals. Consumers should not depend on,
 or return, datasource request positions or AG Grid row-count callback values in

package/dist/style.css

@@ -1 +1 @@
-.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content{display:block;min-width:0;width:100%}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-2bcd2d90]{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%}.table-data-grid-grid[data-v-2bcd2d90]{--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{display:block;min-width:0;width:100%}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-d8328fe5]{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%}.table-data-grid-grid[data-v-d8328fe5]{--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%}

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

@@ -1,40 +1,40 @@
-import { computed as h, watch as M, ref as N, shallowRef as G, readonly as T, defineComponent as $, onMounted as j, onUnmounted as H, nextTick as Q, resolveComponent as q, openBlock as I, createBlock as P, resolveDynamicComponent as J, createElementBlock as B, createVNode as A, withCtx as X, createElementVNode as Y, toDisplayString as Z, useSlots as ee, toRef as x, renderSlot as V, unref as g } from "vue";
+import { computed as S, watch as B, ref as E, shallowRef as G, readonly as x, defineComponent as $, onMounted as j, onUnmounted as H, nextTick as Q, resolveComponent as q, openBlock as I, createBlock as P, resolveDynamicComponent as J, createElementBlock as N, createVNode as L, withCtx as X, createElementVNode as Y, toDisplayString as Z, useSlots as ee, toRef as O, renderSlot as V, unref as y } from "vue";
 import { AgGridVue as te } from "ag-grid-vue3";
 import { ModuleRegistry as oe, AllCommunityModule as ae, InfiniteRowModelModule as le, themeQuartz as re } from "ag-grid-community";
 import { createI18n as ne, i18nTComponent as se } from "@kong-ui-public/i18n";
-var z = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(z || {});
+var T = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(T || {});
 const ie = (e) => !!e?.length;
-function ce(e, n, t, l = ie) {
-  const r = h(() => l(e.value)), s = h(() => {
-    const m = e.value !== void 0, a = n.value !== void 0 && n.value !== null;
-    return t.value ? "LOADING" : r.value ? "SUCCESS" : a ? "ERROR" : m ? "SUCCESS" : "PENDING";
+function ce(e, r, t, l = ie) {
+  const n = S(() => l(e.value)), i = S(() => {
+    const f = e.value !== void 0, a = r.value !== void 0 && r.value !== null;
+    return t.value ? "LOADING" : n.value ? "SUCCESS" : a ? "ERROR" : f ? "SUCCESS" : "PENDING";
   });
   return {
-    fetchState: z,
-    hasData: r,
-    state: s
+    fetchState: T,
+    hasData: n,
+    state: i
   };
 }
 const ue = ({
   emitState: e,
-  fetchLifecycleState: n,
+  fetchLifecycleState: r,
   hasData: t
 }) => {
-  M(
+  B(
     () => ({
       hasData: t.value,
-      state: n.value
+      state: r.value
     }),
-    ({ hasData: l, state: r }) => {
-      if (r !== z.PENDING) {
-        if (r === z.LOADING) {
+    ({ hasData: l, state: n }) => {
+      if (n !== T.PENDING) {
+        if (n === T.LOADING) {
           e({
             hasData: l,
             state: "loading"
           });
           return;
         }
-        if (r === z.ERROR) {
+        if (n === T.ERROR) {
           e({
             hasData: l,
             state: "error"
@@ -48,148 +48,150 @@ const ue = ({
       }
     }
   );
-}, de = ({ startRow: e, endRow: n }) => {
-  const t = n - e;
+}, de = ({ startRow: e, endRow: r }) => {
+  const t = r - e;
   return {
     blockIndex: t > 0 ? Math.floor(e / t) : 0,
     pageSize: t
   };
 }, me = ({
   startRow: e,
-  rowsLength: n,
+  rowsLength: r,
   pageSize: t,
   total: l,
-  hasMore: r
+  hasMore: n
 }) => {
   if (typeof l == "number")
     return l;
-  if (r !== !0 && (r === !1 || n < t))
-    return e + n;
+  if (n !== !0 && (n === !1 || r < t))
+    return e + r;
 }, fe = ({
   fetcher: e,
-  resetKey: n,
+  resetKey: r,
   sort: t
 }) => {
-  const l = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), s = N(0), o = G(), m = G(), a = G(), c = N(!1), d = (i) => i === s.value, S = (i) => {
-    const v = r.get(i);
-    if (v)
-      return v;
-    let y;
-    const C = {
-      promise: new Promise((u) => {
-        y = u;
+  const l = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), i = E(0), o = G(), f = G(), a = G(), s = E(0), v = E(!1), g = (c) => c === i.value, k = () => {
+    v.value = s.value > 0;
+  }, D = () => {
+    a.value = void 0, s.value += 1, k();
+  }, w = () => {
+    s.value = Math.max(0, s.value - 1), k();
+  }, C = (c) => {
+    const u = n.get(c);
+    if (u)
+      return u;
+    let d;
+    const h = {
+      promise: new Promise((m) => {
+        d = m;
       }),
-      resolve: (u) => y(u)
+      resolve: (m) => d(m)
     };
-    return r.set(i, C), C;
-  }, b = (i, v) => {
-    v.resolve(!1), r.get(i) === v && r.delete(i);
-  }, D = async ({
-    blockIndex: i,
-    currentBlockCompletion: v,
-    datasourceId: y
+    return n.set(c, h), h;
+  }, b = (c, u) => {
+    u.resolve(!1), n.get(c) === u && n.delete(c);
+  }, K = async ({
+    blockIndex: c,
+    currentBlockCompletion: u,
+    datasourceId: d
   }) => {
-    if (i === 0)
+    if (c === 0)
       return "ready";
-    const C = r.get(i - 1);
-    if (!C)
-      return b(i, v), "failed";
-    const u = await C.promise;
-    return d(y) ? u ? "ready" : (b(i, v), "failed") : (b(i, v), "stale");
-  }, R = ({
-    blockIndex: i,
-    currentBlockCompletion: v,
-    getRowsParams: y,
-    pageSize: C,
-    result: u
+    const h = n.get(c - 1);
+    if (!h)
+      return b(c, u), "failed";
+    const m = await h.promise;
+    return g(d) ? m ? "ready" : (b(c, u), "failed") : (b(c, u), "stale");
+  }, M = ({
+    blockIndex: c,
+    currentBlockCompletion: u,
+    getRowsParams: d,
+    pageSize: h,
+    result: m
   }) => {
-    u.cursor !== void 0 && l.set(i, u.cursor), y.successCallback(u.data, me({
-      startRow: y.startRow,
-      rowsLength: u.data.length,
-      pageSize: C,
-      total: u.total,
-      hasMore: u.hasMore
-    })), y.startRow === 0 && (m.value = u.data), v.resolve(!0);
-  }, f = ({
-    blockIndex: i,
-    currentBlockCompletion: v,
-    fetchError: y,
-    getRowsParams: C
+    m.cursor !== void 0 && l.set(c, m.cursor), d.successCallback(m.data, me({
+      startRow: d.startRow,
+      rowsLength: m.data.length,
+      pageSize: h,
+      total: m.total,
+      hasMore: m.hasMore
+    })), d.startRow === 0 && (f.value = m.data), u.resolve(!0);
+  }, _ = ({
+    blockIndex: c,
+    currentBlockCompletion: u,
+    fetchError: d,
+    getRowsParams: h
   }) => {
-    a.value = y, C.failCallback(), b(i, v);
-  }, w = () => {
-    const i = s.value + 1;
-    s.value = i, l.clear(), r.clear(), m.value = void 0, a.value = void 0;
-    let v = 0;
-    const y = () => {
-      d(i) && (c.value = v > 0);
-    };
-    return y(), {
-      async getRows(C) {
+    a.value = d, h.failCallback(), b(c, u);
+  }, A = () => {
+    const c = i.value + 1;
+    return i.value = c, l.clear(), n.clear(), f.value = void 0, a.value = void 0, s.value = 0, k(), {
+      async getRows(u) {
         const {
-          blockIndex: u,
-          pageSize: F
+          blockIndex: d,
+          pageSize: h
         } = de({
-          startRow: C.startRow,
-          endRow: C.endRow
-        }), k = S(u), E = await D({
-          blockIndex: u,
-          currentBlockCompletion: k,
-          datasourceId: i
-        });
-        if (E !== "ready") {
-          E === "failed" && C.failCallback();
+          startRow: u.startRow,
+          endRow: u.endRow
+        }), m = C(d);
+        if (await K({
+          blockIndex: d,
+          currentBlockCompletion: m,
+          datasourceId: c
+        }) !== "ready") {
+          u.failCallback();
           return;
         }
-        d(i) && (a.value = void 0), v += 1, y();
+        g(c) && D();
         try {
-          const O = u > 0 ? l.get(u - 1) : void 0, _ = await e({
+          const R = d > 0 ? l.get(d - 1) : void 0, z = await e({
             mode: "infinite",
-            pageSize: F,
-            cursor: O,
+            pageSize: h,
+            cursor: R,
+            // Always read the latest sort, not a stale one.
             sort: t?.value
           });
-          if (!d(i)) {
-            C.failCallback(), b(u, k);
+          if (!g(c)) {
+            u.failCallback(), b(d, m);
             return;
           }
-          R({
-            blockIndex: u,
-            currentBlockCompletion: k,
-            getRowsParams: C,
-            pageSize: F,
-            result: _
+          M({
+            blockIndex: d,
+            currentBlockCompletion: m,
+            getRowsParams: u,
+            pageSize: h,
+            result: z
           });
-        } catch (O) {
-          if (!d(i)) {
-            C.failCallback(), b(u, k);
+        } catch (R) {
+          if (!g(c)) {
+            u.failCallback(), b(d, m);
             return;
           }
-          f({
-            blockIndex: u,
-            currentBlockCompletion: k,
-            fetchError: O,
-            getRowsParams: C
+          _({
+            blockIndex: d,
+            currentBlockCompletion: m,
+            fetchError: R,
+            getRowsParams: u
           });
         } finally {
-          v = Math.max(0, v - 1), y();
+          g(c) && w();
         }
       }
     };
-  }, K = () => {
-    o.value = w();
+  }, F = () => {
+    o.value = A();
   };
-  return M(
-    () => n?.value,
+  return B(
+    () => r?.value,
     () => {
-      K();
+      F();
     },
     { immediate: !0 }
   ), {
-    datasource: T(o),
-    data: T(m),
-    error: T(a),
-    isFetching: T(c)
+    datasource: x(o),
+    data: x(f),
+    error: x(a),
+    isFetching: x(v)
   };
 }, ve = {
   key: 1,
@@ -200,63 +202,63 @@ const ue = ({
   props: {
     params: {}
   },
-  setup(e, { expose: n }) {
-    const t = G(e.params), l = N(null), r = N(!1), s = h(() => t.value.valueFormatted ?? String(t.value.value ?? "")), o = h(() => {
-      const f = t.value.colDef?.colId;
-      return f ? t.value.context?.cells?.slots?.[f] : void 0;
-    }), m = h(() => ({
+  setup(e, { expose: r }) {
+    const t = G(e.params), l = E(null), n = E(!1), i = S(() => t.value.valueFormatted ?? String(t.value.value ?? "")), o = S(() => {
+      const C = t.value.colDef?.colId;
+      return C ? t.value.context?.cells?.slots?.[C] : void 0;
+    }), f = S(() => ({
       column: t.value.headerDef,
       refreshCell: () => {
-        const f = t.value.node;
-        f && t.value.api.refreshCells({ force: !0, rowNodes: [f] });
+        const C = t.value.node;
+        C && t.value.api.refreshCells({ force: !0, rowNodes: [C] });
       },
       row: t.value.data ?? {},
       rowIndex: t.value.node?.rowIndex ?? 0,
       rowValue: t.value.value,
       selected: t.value.node?.isSelected() ?? !1
-    })), a = () => o.value?.(m.value);
-    let c, d, S = !1;
-    const b = () => {
-      const f = l.value;
-      r.value = !!f && f.scrollWidth > f.clientWidth;
+    })), a = () => o.value?.(f.value);
+    let s, v, g = !1;
+    const k = () => {
+      const C = l.value;
+      n.value = !!C && C.scrollWidth > C.clientWidth;
     }, D = () => {
-      S || (d !== void 0 && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
-        d = void 0, b();
+      g || (v !== void 0 && cancelAnimationFrame(v), v = requestAnimationFrame(() => {
+        v = void 0, k();
       }));
-    }, R = (f) => {
-      if (c?.disconnect(), f) {
-        c?.observe(f);
-        const w = f.closest(".ag-cell");
-        w && c?.observe(w);
+    }, w = (C) => {
+      if (s?.disconnect(), C) {
+        s?.observe(C);
+        const b = C.closest(".ag-cell");
+        b && s?.observe(b);
       }
       D();
     };
     return j(() => {
-      c = new ResizeObserver(D), R(l.value);
-    }), M(l, R, { flush: "post" }), H(() => {
-      S = !0, c?.disconnect(), d !== void 0 && cancelAnimationFrame(d);
-    }), n({
-      refresh(f) {
-        return t.value = f, Q(D), !0;
+      s = new ResizeObserver(D), w(l.value);
+    }), B(l, w, { flush: "post" }), H(() => {
+      g = !0, s?.disconnect(), v !== void 0 && cancelAnimationFrame(v);
+    }), r({
+      refresh(C) {
+        return t.value = C, Q(D), !0;
       }
-    }), (f, w) => {
+    }), (C, b) => {
       const K = q("KTooltip");
-      return o.value ? (I(), P(J(a), { key: 0 })) : (I(), B("span", ve, [
-        A(K, {
+      return o.value ? (I(), P(J(a), { key: 0 })) : (I(), N("span", ve, [
+        L(K, {
           class: "table-data-grid-cell-tooltip",
-          disabled: !r.value,
+          disabled: !n.value,
           "kpop-attributes": { popoverDelay: 400 },
           "max-width": "300",
           placement: "bottom-start",
           target: "body",
-          text: s.value
+          text: i.value
         }, {
           default: X(() => [
             Y("span", {
               ref_key: "contentElement",
               ref: l,
               class: "table-data-grid-cell-content"
-            }, Z(s.value), 513)
+            }, Z(i.value), 513)
           ]),
           _: 1
         }, 8, ["disabled", "text"])
@@ -265,13 +267,13 @@ const ue = ({
   }
 }), pe = ({
   headers: e,
-  slots: n,
+  slots: r,
   initialSort: t
 }) => {
-  const l = h(() => ({
-    cells: { slots: n }
-  })), r = (o) => {
-    const m = t?.sortColumnKey === o.key;
+  const l = S(() => ({
+    cells: { slots: r }
+  })), n = (o) => {
+    const f = t?.sortColumnKey === o.key;
     return {
       colId: o.key,
       // Columns with no explicit width constraint share remaining space equally.
@@ -279,9 +281,9 @@ const ue = ({
       headerName: o.label,
       maxWidth: o.maxWidth,
       minWidth: o.minWidth,
-      sortable: o.sortable,
+      sortable: o.sortable ?? !1,
       unSortIcon: o.showSortIcon,
-      ...m ? { sort: t?.sortColumnOrder, sortIndex: 0 } : {},
+      ...f ? { initialSort: t?.sortColumnOrder, initialSortIndex: 0 } : {},
       valueGetter: (a) => a.data?.[o.key],
       width: o.width,
       cellRenderer: Ce,
@@ -290,106 +292,112 @@ const ue = ({
     };
   };
   return {
-    columnDefs: h(() => e.value.map(r)),
+    columnDefs: S(() => e.value.map(n)),
     gridContext: l
   };
-}, ye = ({
+}, U = ({
   config: e,
-  headers: n,
+  headers: r,
   pageSize: t
 }) => {
-  const l = new Set(n.filter((s) => s.sortable).map((s) => s.key)), r = e?.sortColumnKey && l.has(e.sortColumnKey) ? e.sortColumnKey : void 0;
+  const l = new Set(r.filter((i) => i.sortable).map((i) => i.key)), n = e?.sortColumnKey && l.has(e.sortColumnKey) ? e.sortColumnKey : void 0;
   return {
-    sortColumnKey: r,
-    sortColumnOrder: r ? e?.sortColumnOrder : void 0,
+    sortColumnKey: n,
+    sortColumnOrder: n ? e?.sortColumnOrder : void 0,
     pageSize: e?.pageSize ?? t
   };
-}, W = (e, n) => e.sortColumnKey === n.sortColumnKey && e.sortColumnOrder === n.sortColumnOrder && e.pageSize === n.pageSize, ge = ({
+}, W = (e, r) => e.sortColumnKey === r.sortColumnKey && e.sortColumnOrder === r.sortColumnOrder && e.pageSize === r.pageSize, ge = ({
   headers: e,
-  pageSize: n,
+  pageSize: r,
   tableConfig: t,
   emitTableConfigUpdate: l,
-  onExternalConfigChange: r
+  onExternalConfigChange: n
 }) => {
-  const s = (d) => ye({ config: d, headers: e.value, pageSize: n.value }), o = N(s(t.value));
-  M(() => s(t.value), (d) => {
-    W(d, o.value) || (o.value = d, r?.(d));
+  const i = S(() => t.value ? U({ config: t.value, headers: e.value, pageSize: r.value }) : void 0), o = E(
+    i.value ?? U({ config: void 0, headers: e.value, pageSize: r.value })
+  );
+  B(i, (v) => {
+    v && !W(v, o.value) && (o.value = v, n?.(v));
   });
-  const m = (d) => {
-    const S = s({ ...o.value, ...d });
-    W(S, o.value) || (o.value = S, l(S));
-  }, a = h(() => ({
+  const f = (v) => {
+    const g = U({
+      config: { ...o.value, ...v },
+      headers: e.value,
+      pageSize: r.value
+    });
+    W(g, o.value) || (o.value = g, l(g));
+  }, a = S(() => ({
     sortColumnKey: o.value.sortColumnKey,
     sortColumnOrder: o.value.sortColumnOrder
-  })), c = h(() => o.value.pageSize ?? n.value);
+  })), s = S(() => t.value?.pageSize ?? r.value);
   return {
-    activeTableConfig: T(o),
+    activeTableConfig: x(o),
     activeSort: a,
-    activePageSize: c,
-    patchTableConfig: m
+    activePageSize: s,
+    patchTableConfig: f
   };
 }, he = ({
   cellClick: e,
-  headers: n,
+  headers: r,
   rowClick: t
 }) => {
-  const l = h(() => new Set(
-    n.value.filter((a) => a.disableRowClick).map((a) => a.key)
-  )), r = (a) => {
-    const c = a.event?.target;
-    return c instanceof Element ? c.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
-  }, s = (a) => {
-    const c = r(a);
-    return !!(c && l.value.has(c));
+  const l = S(() => new Set(
+    r.value.filter((a) => a.disableRowClick).map((a) => a.key)
+  )), n = (a) => {
+    const s = a.event?.target;
+    return s instanceof Element ? s.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
+  }, i = (a) => {
+    const s = n(a);
+    return !!(s && l.value.has(s));
   };
   return {
     onCellClick: (a) => {
-      const c = a.colDef.colId;
-      !a.data || !c || e({
-        columnKey: c,
+      const s = a.colDef.colId;
+      !a.data || !s || e({
+        columnKey: s,
         row: a.data,
         value: a.value
       });
     },
     onRowClick: (a) => {
-      a.data && !s(a) && t(a.data, a);
+      a.data && !i(a) && t(a.data, a);
     }
   };
-}, Se = ({
+}, ye = ({
   activeSort: e,
-  emitSort: n,
+  emitSort: r,
   patchTableConfig: t
 }) => {
-  const l = (s, o) => {
-    s.applyColumnState({
+  const l = (i, o) => {
+    i.applyColumnState({
       state: o.sortColumnKey ? [{ colId: o.sortColumnKey, sort: o.sortColumnOrder ?? null, sortIndex: 0 }] : [],
       defaultState: { sort: null, sortIndex: null }
     });
   };
-  return { onSortChanged: (s) => {
-    const o = s.api.getColumnState().filter((c) => c.sort).sort((c, d) => (c.sortIndex ?? 0) - (d.sortIndex ?? 0)), m = o[o.length - 1], a = m ? { sortColumnKey: m.colId, sortColumnOrder: m.sort } : {};
-    a.sortColumnKey === e.value.sortColumnKey && a.sortColumnOrder === e.value.sortColumnOrder || (n(a), t(a), o.length > 1 && l(s.api, a));
+  return { onSortChanged: (i) => {
+    const o = i.api.getColumnState().filter((s) => s.sort).sort((s, v) => (s.sortIndex ?? 0) - (v.sortIndex ?? 0)), f = o[o.length - 1], a = f ? { sortColumnKey: f.colId, sortColumnOrder: f.sort } : { sortColumnKey: void 0, sortColumnOrder: void 0 };
+    a.sortColumnKey === e.value.sortColumnKey && a.sortColumnOrder === e.value.sortColumnOrder || (r(a), t(a), o.length > 1 && l(i.api, a));
   }, applySortToGrid: l };
-}, be = { title: "No Data", message: "There is no data to display." }, ke = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, De = {
-  emptyState: be,
-  errorState: ke
+}, Se = { title: "No Data", message: "There is no data to display." }, be = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, ke = {
+  emptyState: Se,
+  errorState: be
 };
-function we() {
-  const e = ne("en-us", De);
+function De() {
+  const e = ne("en-us", ke);
   return {
     i18n: e,
     i18nT: se(e)
     // Translation component <i18n-t>
   };
 }
-const Re = {
+const we = {
   class: "kong-ui-public-table-data-grid",
   "data-testid": "table-data-grid"
-}, Ie = {
+}, Re = {
   key: 0,
   class: "table-error-state",
   "data-testid": "table-error-state"
-}, Ke = {
+}, Ie = {
   key: 1,
   class: "table-empty-state",
   "data-testid": "table-empty-state"
@@ -404,109 +412,106 @@ const Re = {
     tableConfig: {}
   },
   emits: ["grid:ready", "state", "row:click", "cell:click", "sort", "update:tableConfig"],
-  setup(e, { emit: n }) {
+  setup(e, { emit: r }) {
     oe.registerModules([ae, le]);
-    const t = n, { i18n: { t: l } } = we(), r = ee(), s = G(), { activeTableConfig: o, activeSort: m, activePageSize: a, patchTableConfig: c } = ge({
-      headers: x(() => e.headers),
-      pageSize: x(() => e.pageSize),
-      tableConfig: x(() => e.tableConfig),
+    const t = r, { i18n: { t: l } } = De(), n = ee(), i = G(), { activeTableConfig: o, activeSort: f, activePageSize: a, patchTableConfig: s } = ge({
+      headers: O(() => e.headers),
+      pageSize: O(() => e.pageSize),
+      tableConfig: O(() => e.tableConfig),
       emitTableConfigUpdate: (p) => t("update:tableConfig", p),
       onExternalConfigChange: (p) => {
-        s.value && S(s.value, { sortColumnKey: p.sortColumnKey, sortColumnOrder: p.sortColumnOrder });
+        i.value && g(i.value, p);
       }
-    }), { onSortChanged: d, applySortToGrid: S } = Se({
-      activeSort: m,
+    }), { onSortChanged: v, applySortToGrid: g } = ye({
+      activeSort: f,
       emitSort: (p) => t("sort", p),
-      patchTableConfig: c
-    }), { columnDefs: b, gridContext: D } = pe({
-      headers: x(() => e.headers),
-      slots: r,
-      // A snapshot, not the reactive activeSort: only the initial resolved sort
-      // (e.g. from a host-controlled tableConfig prop at mount) needs seeding
-      // into column defs. See useTableDataGridColumnDefs for why.
-      initialSort: m.value
-    }), { onCellClick: R, onRowClick: f } = he({
+      patchTableConfig: s
+    }), { columnDefs: k, gridContext: D } = pe({
+      headers: O(() => e.headers),
+      slots: n,
+      initialSort: f.value
+    }), { onCellClick: w, onRowClick: C } = he({
       cellClick: (p) => t("cell:click", p),
-      headers: x(() => e.headers),
-      rowClick: (p, U) => t("row:click", p, U)
-    }), w = {
+      headers: O(() => e.headers),
+      rowClick: (p, R) => t("row:click", p, R)
+    }), b = {
       resizable: !1,
       sortable: !1,
       suppressMovable: !0
-    }, K = h(() => [
+    }, K = S(() => [
       e.fetcher,
       a.value,
       e.refreshKey,
       o.value.sortColumnKey,
       o.value.sortColumnOrder
-    ]), i = h(() => m.value.sortColumnKey ? m.value : void 0), {
-      data: v,
-      datasource: y,
-      error: C,
-      isFetching: u
+    ]), {
+      data: M,
+      datasource: _,
+      error: A,
+      isFetching: F
     } = fe({
       fetcher: e.fetcher,
       resetKey: K,
-      sort: i
+      sort: f
     }), {
-      fetchState: F,
-      hasData: k,
-      state: E
-    } = ce(v, C, u), O = h(() => E.value === F.SUCCESS && !k.value);
+      fetchState: c,
+      hasData: u,
+      state: d
+    } = ce(M, A, F), h = S(() => d.value === c.SUCCESS && !u.value);
     ue({
       emitState: (p) => t("state", p),
-      fetchLifecycleState: E,
-      hasData: k
+      fetchLifecycleState: d,
+      hasData: u
     });
-    const _ = (p) => {
-      s.value = p.api, t("grid:ready", p.api);
+    const m = (p) => {
+      i.value = p.api, t("grid:ready", p.api);
     };
-    return (p, U) => {
-      const L = q("KEmptyState");
-      return I(), B("div", Re, [
-        e.error ? (I(), B("div", Ie, [
+    return (p, R) => {
+      const z = q("KEmptyState");
+      return I(), N("div", we, [
+        e.error ? (I(), N("div", Re, [
           V(p.$slots, "error-state", {}, () => [
-            A(L, {
+            L(z, {
               "icon-variant": "error",
-              message: g(l)("errorState.message"),
-              title: g(l)("errorState.title")
+              message: y(l)("errorState.message"),
+              title: y(l)("errorState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : O.value ? (I(), B("div", Ke, [
+        ])) : h.value ? (I(), N("div", Ie, [
           V(p.$slots, "empty-state", {}, () => [
-            A(L, {
-              message: g(l)("emptyState.message"),
-              title: g(l)("emptyState.title")
+            L(z, {
+              message: y(l)("emptyState.message"),
+              title: y(l)("emptyState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : (I(), P(g(te), {
+        ])) : (I(), P(y(te), {
           key: 2,
-          "cache-block-size": g(a),
+          "cache-block-size": y(a),
           class: "table-data-grid-grid",
-          "column-defs": g(b),
-          context: g(D),
-          datasource: g(y),
-          "default-col-def": w,
+          "column-defs": y(k),
+          context: y(D),
+          datasource: y(_),
+          "default-col-def": b,
           "infinite-initial-row-count": 1,
-          loading: g(u),
+          loading: y(F),
           "row-model-type": "infinite",
           "suppress-cell-focus": !0,
           "suppress-multi-sort": !0,
-          theme: g(re),
-          onCellClicked: g(R),
-          onGridReady: _,
-          onRowClicked: g(f),
-          onSortChanged: g(d)
+          theme: y(re),
+          onCellClicked: y(w),
+          onGridReady: m,
+          onRowClicked: y(C),
+          onSortChanged: y(v)
         }, null, 8, ["cache-block-size", "column-defs", "context", "datasource", "loading", "theme", "onCellClicked", "onRowClicked", "onSortChanged"]))
       ]);
     };
   }
-}), Oe = (e, n) => {
+}), Ke = (e, r) => {
   const t = e.__vccOpts || e;
-  for (const [l, r] of n)
-    t[l] = r;
+  for (const [l, n] of r)
+    t[l] = n;
   return t;
-}, Ne = /* @__PURE__ */ Oe(Ee, [["__scopeId", "data-v-2bcd2d90"]]);
+}, Fe = /* @__PURE__ */ Ke(Ee, [["__scopeId", "data-v-d8328fe5"]]);
 export {
-  Ne as TableDataGrid
+  Fe as TableDataGrid
 };

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

@@ -1 +1 @@
-(function(S,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):(S=typeof globalThis<"u"?globalThis:S||self,e(S["kong-ui-public-table-data-grid"]={},S.Vue,S.AgGridVue,S.agGridCommunity,S["kong-ui-public-i18n"]))})(this,(function(S,e,F,x,G){"use strict";var E=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(E||{});const M=t=>!!t?.length;function A(t,s,o,r=M){const l=e.computed(()=>r(t.value)),c=e.computed(()=>{const m=t.value!==void 0,n=s.value!==void 0&&s.value!==null;return o.value?"LOADING":l.value?"SUCCESS":n?"ERROR":m?"SUCCESS":"PENDING"});return{fetchState:E,hasData:l,state:c}}const V=({emitState:t,fetchLifecycleState:s,hasData:o})=>{e.watch(()=>({hasData:o.value,state:s.value}),({hasData:r,state:l})=>{if(l!==E.PENDING){if(l===E.LOADING){t({hasData:r,state:"loading"});return}if(l===E.ERROR){t({hasData:r,state:"error"});return}t({hasData:r,state:"success"})}})},U=({startRow:t,endRow:s})=>{const o=s-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},L=({startRow:t,rowsLength:s,pageSize:o,total:r,hasMore:l})=>{if(typeof r=="number")return r;if(l!==!0&&(l===!1||s<o))return t+s},W=({fetcher:t,resetKey:s,sort:o})=>{const r=new Map,l=new Map,c=e.ref(0),a=e.shallowRef(),m=e.shallowRef(),n=e.shallowRef(),d=e.ref(!1),f=i=>i===c.value,b=i=>{const p=l.get(i);if(p)return p;let y;const g={promise:new Promise(u=>{y=u}),resolve:u=>y(u)};return l.set(i,g),g},k=(i,p)=>{p.resolve(!1),l.get(i)===p&&l.delete(i)},w=async({blockIndex:i,currentBlockCompletion:p,datasourceId:y})=>{if(i===0)return"ready";const g=l.get(i-1);if(!g)return k(i,p),"failed";const u=await g.promise;return f(y)?u?"ready":(k(i,p),"failed"):(k(i,p),"stale")},R=({blockIndex:i,currentBlockCompletion:p,getRowsParams:y,pageSize:g,result:u})=>{u.cursor!==void 0&&r.set(i,u.cursor),y.successCallback(u.data,L({startRow:y.startRow,rowsLength:u.data.length,pageSize:g,total:u.total,hasMore:u.hasMore})),y.startRow===0&&(m.value=u.data),p.resolve(!0)},C=({blockIndex:i,currentBlockCompletion:p,fetchError:y,getRowsParams:g})=>{n.value=y,g.failCallback(),k(i,p)},D=()=>{const i=c.value+1;c.value=i,r.clear(),l.clear(),m.value=void 0,n.value=void 0;let p=0;const y=()=>{f(i)&&(d.value=p>0)};return y(),{async getRows(g){const{blockIndex:u,pageSize:T}=U({startRow:g.startRow,endRow:g.endRow}),v=b(u),K=await w({blockIndex:u,currentBlockCompletion:v,datasourceId:i});if(K!=="ready"){K==="failed"&&g.failCallback();return}f(i)&&(n.value=void 0),p+=1,y();try{const O=u>0?r.get(u-1):void 0,B=await t({mode:"infinite",pageSize:T,cursor:O,sort:o?.value});if(!f(i)){g.failCallback(),k(u,v);return}R({blockIndex:u,currentBlockCompletion:v,getRowsParams:g,pageSize:T,result:B})}catch(O){if(!f(i)){g.failCallback(),k(u,v);return}C({blockIndex:u,currentBlockCompletion:v,fetchError:O,getRowsParams:g})}finally{p=Math.max(0,p-1),y()}}}},I=()=>{a.value=D()};return e.watch(()=>s?.value,()=>{I()},{immediate:!0}),{datasource:e.readonly(a),data:e.readonly(m),error:e.readonly(n),isFetching:e.readonly(d)}},q={key:1,class:"table-data-grid-cell-renderer"},$=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:s}){const o=e.shallowRef(t.params),r=e.ref(null),l=e.ref(!1),c=e.computed(()=>o.value.valueFormatted??String(o.value.value??"")),a=e.computed(()=>{const C=o.value.colDef?.colId;return C?o.value.context?.cells?.slots?.[C]:void 0}),m=e.computed(()=>({column:o.value.headerDef,refreshCell:()=>{const C=o.value.node;C&&o.value.api.refreshCells({force:!0,rowNodes:[C]})},row:o.value.data??{},rowIndex:o.value.node?.rowIndex??0,rowValue:o.value.value,selected:o.value.node?.isSelected()??!1})),n=()=>a.value?.(m.value);let d,f,b=!1;const k=()=>{const C=r.value;l.value=!!C&&C.scrollWidth>C.clientWidth},w=()=>{b||(f!==void 0&&cancelAnimationFrame(f),f=requestAnimationFrame(()=>{f=void 0,k()}))},R=C=>{if(d?.disconnect(),C){d?.observe(C);const D=C.closest(".ag-cell");D&&d?.observe(D)}w()};return e.onMounted(()=>{d=new ResizeObserver(w),R(r.value)}),e.watch(r,R,{flush:"post"}),e.onUnmounted(()=>{b=!0,d?.disconnect(),f!==void 0&&cancelAnimationFrame(f)}),s({refresh(C){return o.value=C,e.nextTick(w),!0}}),(C,D)=>{const I=e.resolveComponent("KTooltip");return a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n),{key:0})):(e.openBlock(),e.createElementBlock("span",q,[e.createVNode(I,{class:"table-data-grid-cell-tooltip",disabled:!l.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:"body",text:c.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:r,class:"table-data-grid-cell-content"},e.toDisplayString(c.value),513)]),_:1},8,["disabled","text"])]))}}}),j=({headers:t,slots:s,initialSort:o})=>{const r=e.computed(()=>({cells:{slots:s}})),l=a=>{const m=o?.sortColumnKey===a.key;return{colId:a.key,flex:!a.width&&!a.maxWidth?1:void 0,headerName:a.label,maxWidth:a.maxWidth,minWidth:a.minWidth,sortable:a.sortable,unSortIcon:a.showSortIcon,...m?{sort:o?.sortColumnOrder,sortIndex:0}:{},valueGetter:n=>n.data?.[a.key],width:a.width,cellRenderer:$,cellRendererParams:{headerDef:a}}};return{columnDefs:e.computed(()=>t.value.map(l)),gridContext:r}},P=({config:t,headers:s,pageSize:o})=>{const r=new Set(s.filter(c=>c.sortable).map(c=>c.key)),l=t?.sortColumnKey&&r.has(t.sortColumnKey)?t.sortColumnKey:void 0;return{sortColumnKey:l,sortColumnOrder:l?t?.sortColumnOrder:void 0,pageSize:t?.pageSize??o}},N=(t,s)=>t.sortColumnKey===s.sortColumnKey&&t.sortColumnOrder===s.sortColumnOrder&&t.pageSize===s.pageSize,H=({headers:t,pageSize:s,tableConfig:o,emitTableConfigUpdate:r,onExternalConfigChange:l})=>{const c=f=>P({config:f,headers:t.value,pageSize:s.value}),a=e.ref(c(o.value));e.watch(()=>c(o.value),f=>{N(f,a.value)||(a.value=f,l?.(f))});const m=f=>{const b=c({...a.value,...f});N(b,a.value)||(a.value=b,r(b))},n=e.computed(()=>({sortColumnKey:a.value.sortColumnKey,sortColumnOrder:a.value.sortColumnOrder})),d=e.computed(()=>a.value.pageSize??s.value);return{activeTableConfig:e.readonly(a),activeSort:n,activePageSize:d,patchTableConfig:m}},Q=({cellClick:t,headers:s,rowClick:o})=>{const r=e.computed(()=>new Set(s.value.filter(n=>n.disableRowClick).map(n=>n.key))),l=n=>{const d=n.event?.target;return d instanceof Element?d.closest(".ag-cell")?.getAttribute("col-id")??void 0:void 0},c=n=>{const d=l(n);return!!(d&&r.value.has(d))};return{onCellClick:n=>{const d=n.colDef.colId;!n.data||!d||t({columnKey:d,row:n.data,value:n.value})},onRowClick:n=>{n.data&&!c(n)&&o(n.data,n)}}},J=({activeSort:t,emitSort:s,patchTableConfig:o})=>{const r=(c,a)=>{c.applyColumnState({state:a.sortColumnKey?[{colId:a.sortColumnKey,sort:a.sortColumnOrder??null,sortIndex:0}]:[],defaultState:{sort:null,sortIndex:null}})};return{onSortChanged:c=>{const a=c.api.getColumnState().filter(d=>d.sort).sort((d,f)=>(d.sortIndex??0)-(f.sortIndex??0)),m=a[a.length-1],n=m?{sortColumnKey:m.colId,sortColumnOrder:m.sort}:{};n.sortColumnKey===t.value.sortColumnKey&&n.sortColumnOrder===t.value.sortColumnOrder||(s(n),o(n),a.length>1&&r(c.api,n))},applySortToGrid:r}},X={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 Y(){const t=G.createI18n("en-us",X);return{i18n:t,i18nT:G.i18nTComponent(t)}}const Z={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},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,s)=>{const o=t.__vccOpts||t;for(const[r,l]of s)o[r]=l;return o})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},fetcher:{type:Function},error:{type:Boolean,default:!1},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]},tableConfig:{}},emits:["grid:ready","state","row:click","cell:click","sort","update:tableConfig"],setup(t,{emit:s}){x.ModuleRegistry.registerModules([x.AllCommunityModule,x.InfiniteRowModelModule]);const o=s,{i18n:{t:r}}=Y(),l=e.useSlots(),c=e.shallowRef(),{activeTableConfig:a,activeSort:m,activePageSize:n,patchTableConfig:d}=H({headers:e.toRef(()=>t.headers),pageSize:e.toRef(()=>t.pageSize),tableConfig:e.toRef(()=>t.tableConfig),emitTableConfigUpdate:h=>o("update:tableConfig",h),onExternalConfigChange:h=>{c.value&&b(c.value,{sortColumnKey:h.sortColumnKey,sortColumnOrder:h.sortColumnOrder})}}),{onSortChanged:f,applySortToGrid:b}=J({activeSort:m,emitSort:h=>o("sort",h),patchTableConfig:d}),{columnDefs:k,gridContext:w}=j({headers:e.toRef(()=>t.headers),slots:l,initialSort:m.value}),{onCellClick:R,onRowClick:C}=Q({cellClick:h=>o("cell:click",h),headers:e.toRef(()=>t.headers),rowClick:(h,z)=>o("row:click",h,z)}),D={resizable:!1,sortable:!1,suppressMovable:!0},I=e.computed(()=>[t.fetcher,n.value,t.refreshKey,a.value.sortColumnKey,a.value.sortColumnOrder]),i=e.computed(()=>m.value.sortColumnKey?m.value:void 0),{data:p,datasource:y,error:g,isFetching:u}=W({fetcher:t.fetcher,resetKey:I,sort:i}),{fetchState:T,hasData:v,state:K}=A(p,g,u),O=e.computed(()=>K.value===T.SUCCESS&&!v.value);V({emitState:h=>o("state",h),fetchLifecycleState:K,hasData:v});const B=h=>{c.value=h.api,o("grid:ready",h.api)};return(h,z)=>{const _=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",Z,[t.error?(e.openBlock(),e.createElementBlock("div",ee,[e.renderSlot(h.$slots,"error-state",{},()=>[e.createVNode(_,{"icon-variant":"error",message:e.unref(r)("errorState.message"),title:e.unref(r)("errorState.title")},null,8,["message","title"])],!0)])):O.value?(e.openBlock(),e.createElementBlock("div",te,[e.renderSlot(h.$slots,"empty-state",{},()=>[e.createVNode(_,{message:e.unref(r)("emptyState.message"),title:e.unref(r)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(F.AgGridVue),{key:2,"cache-block-size":e.unref(n),class:"table-data-grid-grid","column-defs":e.unref(k),context:e.unref(w),datasource:e.unref(y),"default-col-def":D,"infinite-initial-row-count":1,loading:e.unref(u),"row-model-type":"infinite","suppress-cell-focus":!0,"suppress-multi-sort":!0,theme:e.unref(x.themeQuartz),onCellClicked:e.unref(R),onGridReady:B,onRowClicked:e.unref(C),onSortChanged:e.unref(f)},null,8,["cache-block-size","column-defs","context","datasource","loading","theme","onCellClicked","onRowClicked","onSortChanged"]))])}}}),[["__scopeId","data-v-2bcd2d90"]]);S.TableDataGrid=oe,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})}));
+(function(b,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):(b=typeof globalThis<"u"?globalThis:b||self,e(b["kong-ui-public-table-data-grid"]={},b.Vue,b.AgGridVue,b.agGridCommunity,b["kong-ui-public-i18n"]))})(this,(function(b,e,_,K,F){"use strict";var E=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(E||{});const M=t=>!!t?.length;function A(t,r,o,l=M){const s=e.computed(()=>l(t.value)),i=e.computed(()=>{const C=t.value!==void 0,n=r.value!==void 0&&r.value!==null;return o.value?"LOADING":s.value?"SUCCESS":n?"ERROR":C?"SUCCESS":"PENDING"});return{fetchState:E,hasData:s,state:i}}const V=({emitState:t,fetchLifecycleState:r,hasData:o})=>{e.watch(()=>({hasData:o.value,state:r.value}),({hasData:l,state:s})=>{if(s!==E.PENDING){if(s===E.LOADING){t({hasData:l,state:"loading"});return}if(s===E.ERROR){t({hasData:l,state:"error"});return}t({hasData:l,state:"success"})}})},U=({startRow:t,endRow:r})=>{const o=r-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},L=({startRow:t,rowsLength:r,pageSize:o,total:l,hasMore:s})=>{if(typeof l=="number")return l;if(s!==!0&&(s===!1||r<o))return t+r},W=({fetcher:t,resetKey:r,sort:o})=>{const l=new Map,s=new Map,i=e.ref(0),a=e.shallowRef(),C=e.shallowRef(),n=e.shallowRef(),c=e.ref(0),p=e.ref(!1),y=d=>d===i.value,v=()=>{p.value=c.value>0},w=()=>{n.value=void 0,c.value+=1,v()},D=()=>{c.value=Math.max(0,c.value-1),v()},g=d=>{const u=s.get(d);if(u)return u;let f;const S={promise:new Promise(m=>{f=m}),resolve:m=>f(m)};return s.set(d,S),S},k=(d,u)=>{u.resolve(!1),s.get(d)===u&&s.delete(d)},I=async({blockIndex:d,currentBlockCompletion:u,datasourceId:f})=>{if(d===0)return"ready";const S=s.get(d-1);if(!S)return k(d,u),"failed";const m=await S.promise;return y(f)?m?"ready":(k(d,u),"failed"):(k(d,u),"stale")},B=({blockIndex:d,currentBlockCompletion:u,getRowsParams:f,pageSize:S,result:m})=>{m.cursor!==void 0&&l.set(d,m.cursor),f.successCallback(m.data,L({startRow:f.startRow,rowsLength:m.data.length,pageSize:S,total:m.total,hasMore:m.hasMore})),f.startRow===0&&(C.value=m.data),u.resolve(!0)},G=({blockIndex:d,currentBlockCompletion:u,fetchError:f,getRowsParams:S})=>{n.value=f,S.failCallback(),k(d,u)},N=()=>{const d=i.value+1;return i.value=d,l.clear(),s.clear(),C.value=void 0,n.value=void 0,c.value=0,v(),{async getRows(u){const{blockIndex:f,pageSize:S}=U({startRow:u.startRow,endRow:u.endRow}),m=g(f);if(await I({blockIndex:f,currentBlockCompletion:m,datasourceId:d})!=="ready"){u.failCallback();return}y(d)&&w();try{const R=f>0?l.get(f-1):void 0,x=await t({mode:"infinite",pageSize:S,cursor:R,sort:o?.value});if(!y(d)){u.failCallback(),k(f,m);return}B({blockIndex:f,currentBlockCompletion:m,getRowsParams:u,pageSize:S,result:x})}catch(R){if(!y(d)){u.failCallback(),k(f,m);return}G({blockIndex:f,currentBlockCompletion:m,fetchError:R,getRowsParams:u})}finally{y(d)&&D()}}}},O=()=>{a.value=N()};return e.watch(()=>r?.value,()=>{O()},{immediate:!0}),{datasource:e.readonly(a),data:e.readonly(C),error:e.readonly(n),isFetching:e.readonly(p)}},q={key:1,class:"table-data-grid-cell-renderer"},$=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:r}){const o=e.shallowRef(t.params),l=e.ref(null),s=e.ref(!1),i=e.computed(()=>o.value.valueFormatted??String(o.value.value??"")),a=e.computed(()=>{const g=o.value.colDef?.colId;return g?o.value.context?.cells?.slots?.[g]:void 0}),C=e.computed(()=>({column:o.value.headerDef,refreshCell:()=>{const g=o.value.node;g&&o.value.api.refreshCells({force:!0,rowNodes:[g]})},row:o.value.data??{},rowIndex:o.value.node?.rowIndex??0,rowValue:o.value.value,selected:o.value.node?.isSelected()??!1})),n=()=>a.value?.(C.value);let c,p,y=!1;const v=()=>{const g=l.value;s.value=!!g&&g.scrollWidth>g.clientWidth},w=()=>{y||(p!==void 0&&cancelAnimationFrame(p),p=requestAnimationFrame(()=>{p=void 0,v()}))},D=g=>{if(c?.disconnect(),g){c?.observe(g);const k=g.closest(".ag-cell");k&&c?.observe(k)}w()};return e.onMounted(()=>{c=new ResizeObserver(w),D(l.value)}),e.watch(l,D,{flush:"post"}),e.onUnmounted(()=>{y=!0,c?.disconnect(),p!==void 0&&cancelAnimationFrame(p)}),r({refresh(g){return o.value=g,e.nextTick(w),!0}}),(g,k)=>{const I=e.resolveComponent("KTooltip");return a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n),{key:0})):(e.openBlock(),e.createElementBlock("span",q,[e.createVNode(I,{class:"table-data-grid-cell-tooltip",disabled:!s.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:"body",text:i.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:l,class:"table-data-grid-cell-content"},e.toDisplayString(i.value),513)]),_:1},8,["disabled","text"])]))}}}),j=({headers:t,slots:r,initialSort:o})=>{const l=e.computed(()=>({cells:{slots:r}})),s=a=>{const C=o?.sortColumnKey===a.key;return{colId:a.key,flex:!a.width&&!a.maxWidth?1:void 0,headerName:a.label,maxWidth:a.maxWidth,minWidth:a.minWidth,sortable:a.sortable??!1,unSortIcon:a.showSortIcon,...C?{initialSort:o?.sortColumnOrder,initialSortIndex:0}:{},valueGetter:n=>n.data?.[a.key],width:a.width,cellRenderer:$,cellRendererParams:{headerDef:a}}};return{columnDefs:e.computed(()=>t.value.map(s)),gridContext:l}},T=({config:t,headers:r,pageSize:o})=>{const l=new Set(r.filter(i=>i.sortable).map(i=>i.key)),s=t?.sortColumnKey&&l.has(t.sortColumnKey)?t.sortColumnKey:void 0;return{sortColumnKey:s,sortColumnOrder:s?t?.sortColumnOrder:void 0,pageSize:t?.pageSize??o}},z=(t,r)=>t.sortColumnKey===r.sortColumnKey&&t.sortColumnOrder===r.sortColumnOrder&&t.pageSize===r.pageSize,P=({headers:t,pageSize:r,tableConfig:o,emitTableConfigUpdate:l,onExternalConfigChange:s})=>{const i=e.computed(()=>o.value?T({config:o.value,headers:t.value,pageSize:r.value}):void 0),a=e.ref(i.value??T({config:void 0,headers:t.value,pageSize:r.value}));e.watch(i,p=>{p&&!z(p,a.value)&&(a.value=p,s?.(p))});const C=p=>{const y=T({config:{...a.value,...p},headers:t.value,pageSize:r.value});z(y,a.value)||(a.value=y,l(y))},n=e.computed(()=>({sortColumnKey:a.value.sortColumnKey,sortColumnOrder:a.value.sortColumnOrder})),c=e.computed(()=>o.value?.pageSize??r.value);return{activeTableConfig:e.readonly(a),activeSort:n,activePageSize:c,patchTableConfig:C}},H=({cellClick:t,headers:r,rowClick:o})=>{const l=e.computed(()=>new Set(r.value.filter(n=>n.disableRowClick).map(n=>n.key))),s=n=>{const c=n.event?.target;return c instanceof Element?c.closest(".ag-cell")?.getAttribute("col-id")??void 0:void 0},i=n=>{const c=s(n);return!!(c&&l.value.has(c))};return{onCellClick:n=>{const c=n.colDef.colId;!n.data||!c||t({columnKey:c,row:n.data,value:n.value})},onRowClick:n=>{n.data&&!i(n)&&o(n.data,n)}}},Q=({activeSort:t,emitSort:r,patchTableConfig:o})=>{const l=(i,a)=>{i.applyColumnState({state:a.sortColumnKey?[{colId:a.sortColumnKey,sort:a.sortColumnOrder??null,sortIndex:0}]:[],defaultState:{sort:null,sortIndex:null}})};return{onSortChanged:i=>{const a=i.api.getColumnState().filter(c=>c.sort).sort((c,p)=>(c.sortIndex??0)-(p.sortIndex??0)),C=a[a.length-1],n=C?{sortColumnKey:C.colId,sortColumnOrder:C.sort}:{sortColumnKey:void 0,sortColumnOrder:void 0};n.sortColumnKey===t.value.sortColumnKey&&n.sortColumnOrder===t.value.sortColumnOrder||(r(n),o(n),a.length>1&&l(i.api,n))},applySortToGrid:l}},J={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 X(){const t=F.createI18n("en-us",J);return{i18n:t,i18nT:F.i18nTComponent(t)}}const Y={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},Z={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,r)=>{const o=t.__vccOpts||t;for(const[l,s]of r)o[l]=s;return o})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},fetcher:{type:Function},error:{type:Boolean,default:!1},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]},tableConfig:{}},emits:["grid:ready","state","row:click","cell:click","sort","update:tableConfig"],setup(t,{emit:r}){K.ModuleRegistry.registerModules([K.AllCommunityModule,K.InfiniteRowModelModule]);const o=r,{i18n:{t:l}}=X(),s=e.useSlots(),i=e.shallowRef(),{activeTableConfig:a,activeSort:C,activePageSize:n,patchTableConfig:c}=P({headers:e.toRef(()=>t.headers),pageSize:e.toRef(()=>t.pageSize),tableConfig:e.toRef(()=>t.tableConfig),emitTableConfigUpdate:h=>o("update:tableConfig",h),onExternalConfigChange:h=>{i.value&&y(i.value,h)}}),{onSortChanged:p,applySortToGrid:y}=Q({activeSort:C,emitSort:h=>o("sort",h),patchTableConfig:c}),{columnDefs:v,gridContext:w}=j({headers:e.toRef(()=>t.headers),slots:s,initialSort:C.value}),{onCellClick:D,onRowClick:g}=H({cellClick:h=>o("cell:click",h),headers:e.toRef(()=>t.headers),rowClick:(h,R)=>o("row:click",h,R)}),k={resizable:!1,sortable:!1,suppressMovable:!0},I=e.computed(()=>[t.fetcher,n.value,t.refreshKey,a.value.sortColumnKey,a.value.sortColumnOrder]),{data:B,datasource:G,error:N,isFetching:O}=W({fetcher:t.fetcher,resetKey:I,sort:C}),{fetchState:d,hasData:u,state:f}=A(B,N,O),S=e.computed(()=>f.value===d.SUCCESS&&!u.value);V({emitState:h=>o("state",h),fetchLifecycleState:f,hasData:u});const m=h=>{i.value=h.api,o("grid:ready",h.api)};return(h,R)=>{const x=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",Y,[t.error?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(h.$slots,"error-state",{},()=>[e.createVNode(x,{"icon-variant":"error",message:e.unref(l)("errorState.message"),title:e.unref(l)("errorState.title")},null,8,["message","title"])],!0)])):S.value?(e.openBlock(),e.createElementBlock("div",ee,[e.renderSlot(h.$slots,"empty-state",{},()=>[e.createVNode(x,{message:e.unref(l)("emptyState.message"),title:e.unref(l)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(_.AgGridVue),{key:2,"cache-block-size":e.unref(n),class:"table-data-grid-grid","column-defs":e.unref(v),context:e.unref(w),datasource:e.unref(G),"default-col-def":k,"infinite-initial-row-count":1,loading:e.unref(O),"row-model-type":"infinite","suppress-cell-focus":!0,"suppress-multi-sort":!0,theme:e.unref(K.themeQuartz),onCellClicked:e.unref(D),onGridReady:m,onRowClicked:e.unref(g),onSortChanged:e.unref(p)},null,8,["cache-block-size","column-defs","context","datasource","loading","theme","onCellClicked","onRowClicked","onSortChanged"]))])}}}),[["__scopeId","data-v-d8328fe5"]]);b.TableDataGrid=te,Object.defineProperty(b,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":"AAkQA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,OAAO,EACP,cAAc,EACd,eAAe,EAChB,MAAM,mBAAmB,CAAA;AAkB1B,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;WA4RO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBAxR7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;sBACxB,mBAAmB;;;;;;;;KAmRwD,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;;qCAtQoB,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;uBAFzD,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAMxB,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;;EAgQ3D,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":"AAgQA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,OAAO,EACP,cAAc,EACd,eAAe,EAChB,MAAM,mBAAmB,CAAA;AAkB1B,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;WA0RO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBAtR7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;sBACxB,mBAAmB;;;;;;;;KAiRwD,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;;qCApQoB,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;uBAFzD,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAMxB,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;;EA8P3D,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/dist/types/composables/useFetchInfinite.d.ts

@@ -13,9 +13,7 @@ interface UseFetchInfiniteOptions<Row extends object = TableDataGridRow> {
      */
     resetKey?: Readonly<Ref<unknown>>;
     /**
-     * Current resolved sort. Read once per datasource build (the component
-     * layer includes sort in `resetKey`, so a sort change always rebuilds the
-     * datasource) and forwarded to every fetcher call for that generation.
+     * Current resolved sort, forwarded to the fetcher.
      */
     sort?: Readonly<Ref<TableDataGridSort | undefined>>;
 }

package/dist/types/composables/useFetchInfinite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchInfinite.d.ts","sourceRoot":"","sources":["../../../src/composables/useFetchInfinite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAEpB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAW9B,UAAU,uBAAuB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB;IACrE;;;OAGG;IACH,OAAO,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC,CAAA;CACpD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,8BAIrE,uBAAuB,CAAC,GAAG,CAAC;;;;;;;;;;;;;CAmV9B,CAAA"}
+{"version":3,"file":"useFetchInfinite.d.ts","sourceRoot":"","sources":["../../../src/composables/useFetchInfinite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAEpB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAW9B,UAAU,uBAAuB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB;IACrE;;;OAGG;IACH,OAAO,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC,CAAA;CACpD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,8BAIrE,uBAAuB,CAAC,GAAG,CAAC;;;;;;;;;;;;;CAsU9B,CAAA"}

package/dist/types/composables/useTableDataGridColumnDefs.d.ts

@@ -8,16 +8,6 @@ import type { Ref, Slots } from 'vue';
 export declare const useTableDataGridColumnDefs: <Row extends object = TableDataGridRow>({ headers, slots, initialSort, }: {
     headers: Readonly<Ref<Array<TableDataGridHeader<Row>>>>;
     slots: Slots;
-    /**
-     * Sort to seed into AG Grid's initial column state, captured once (not a
-     * reactive ref). This only covers the very first render, e.g. a
-     * host-controlled `tableConfig` prop supplied at mount. Ongoing sort sync
-     * after mount goes through `applyColumnState` (see `useTableDataGridSort`),
-     * not through recomputing column defs — AG Grid already reflects a
-     * grid-driven sort change internally, and re-pushing column defs on every
-     * such change would redundantly re-trigger AG Grid's own column state
-     * handling.
-     */
     initialSort?: TableDataGridSort;
 }) => {
     columnDefs: import("vue").ComputedRef<ColDef<Row, any>[]>;

package/dist/types/composables/useTableDataGridColumnDefs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableDataGridColumnDefs.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridColumnDefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAIrC;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,kCAI/E;IACD,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,KAAK,EAAE,KAAK,CAAA;IACZ;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;CAChC;;;;;;;;;CAiCA,CAAA"}
+{"version":3,"file":"useTableDataGridColumnDefs.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridColumnDefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAIrC;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,kCAI/E;IACD,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,KAAK,EAAE,KAAK,CAAA;IACZ,WAAW,CAAC,EAAE,iBAAiB,CAAA;CAChC;;;;;;;;;CAiCA,CAAA"}

package/dist/types/composables/useTableDataGridConfig.d.ts

@@ -1,17 +1,9 @@
 import type { TableDataGridConfig, TableDataGridHeader, TableDataGridRow, TableDataGridSort } from '../types';
 import type { Ref } from 'vue';
 /**
- * Owns `TableDataGrid`'s current `tableConfig` state: resolves the
- * host-supplied (or absent) `tableConfig` prop against the current headers
- * and page size, mirrors it into an internal ref, and exposes a single
- * write path (`patchTableConfig`) for grid-driven changes.
- *
- * Grid-driven writes go through `patchTableConfig`, which mutates
- * `activeTableConfig` directly and never touches the prop, so they can
- * never re-trigger the prop watcher below. Host-driven writes (a changed
- * `tableConfig` prop) go through that watcher, which calls
- * `onExternalConfigChange` so the caller can push the change into AG Grid
- * imperatively, since it didn't originate from a grid interaction.
+ * Owns `TableDataGrid`'s current `tableConfig` state, controlled or
+ * uncontrolled, with `patchTableConfig` as the single write path for
+ * grid-driven changes.
  *
  * @param headers Current column headers, used to validate the resolved sort key.
  * @param pageSize Reactive component-level page size default.

package/dist/types/composables/useTableDataGridConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableDataGridConfig.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC7G,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,sBAAsB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,qGAM3E;IACD,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAC/B,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAA;IAC3D,qBAAqB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC5D,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAC/D;;;;;;;;;;;;8BAckC,OAAO,CAAC,mBAAmB,CAAC;CAwB9D,CAAA"}
+{"version":3,"file":"useTableDataGridConfig.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC7G,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,qGAM3E;IACD,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAC/B,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAA;IAC3D,qBAAqB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC5D,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAC/D;;;;;;;;;;;;8BAsBkC,OAAO,CAAC,mBAAmB,CAAC;CA8B9D,CAAA"}

package/dist/types/composables/useTableDataGridSort.d.ts

@@ -2,15 +2,8 @@ import type { TableDataGridRow, TableDataGridSort } from '../types';
 import type { GridApi, SortChangedEvent } from 'ag-grid-community';
 import type { Ref } from 'vue';
 /**
- * Translates AG Grid's `sortChanged` event into `TableDataGrid`'s
- * package-owned `sort` shape, and pushes a host- or package-driven sort
- * back onto the grid.
- *
- * A grid-driven event is only acted on when it actually changes the
- * current sort — comparing against `activeSort` (rather than a mutable
- * re-entrancy flag) makes this idempotent, so it also absorbs the echo
- * `sortChanged` event that `applySortToGrid`'s own `applyColumnState` call
- * fires.
+ * Translates AG Grid's `sortChanged` event into `TableDataGrid`'s `sort`
+ * shape, and pushes a sort back onto the grid.
  *
  * @param activeSort Current resolved sort, read from `useTableDataGridConfig`.
  * @param emitSort Called with the new sort whenever a grid interaction changes it.

package/dist/types/composables/useTableDataGridSort.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableDataGridSort.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridSort.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAA8B,MAAM,UAAU,CAAA;AAC/F,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,oBAAoB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,6CAIzE;IACD,UAAU,EAAE,QAAQ,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC3C,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC9D;2BAU+B,gBAAgB,CAAC,GAAG,CAAC;2BATrB,OAAO,CAAC,GAAG,CAAC,QAAQ,iBAAiB;CAqCpE,CAAA"}
+{"version":3,"file":"useTableDataGridSort.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridSort.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAA8B,MAAM,UAAU,CAAA;AAC/F,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,6CAIzE;IACD,UAAU,EAAE,QAAQ,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC3C,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC9D;2BAU+B,gBAAgB,CAAC,GAAG,CAAC;2BATrB,OAAO,CAAC,GAAG,CAAC,QAAQ,iBAAiB;CAqCpE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/table-data-grid",
-  "version": "0.4.2-pr.3761.bed46084d.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/table-data-grid.umd.js",
   "module": "./dist/table-data-grid.es.js",
@@ -21,9 +21,9 @@
     "access": "public"
   },
   "devDependencies": {
+    "@kong-ui-public/i18n": "^2.5.1",
     "@kong/kongponents": "9.64.10",
-    "vue": "^3.5.41",
-    "@kong-ui-public/i18n": "^2.5.1"
+    "vue": "^3.5.41"
   },
   "repository": {
     "type": "git",
@@ -43,9 +43,9 @@
     "errorLimit": "500KB"
   },
   "peerDependencies": {
+    "@kong-ui-public/i18n": "^2.5.1",
     "@kong/kongponents": "^9.63.0",
-    "vue": "^3.5.35",
-    "@kong-ui-public/i18n": "^2.5.1"
+    "vue": "^3.5.35"
   },
   "dependencies": {
     "ag-grid-community": "^36.1.0",