@toolbox-web/grid-react 0.3.1 → 0.4.0

package/index.d.ts

@@ -1,6 +1,7 @@
 export { DataGrid } from './lib/data-grid';
 export { GridColumn } from './lib/grid-column';
 export { GridDetailPanel, type DetailPanelContext, type GridDetailPanelProps } from './lib/grid-detail-panel';
+export { GridResponsiveCard, type GridResponsiveCardProps, type ResponsiveCardContext, } from './lib/grid-responsive-card';
 export { GridToolButtons, type GridToolButtonsProps } from './lib/grid-tool-button';
 export { GridToolPanel, type GridToolPanelProps, type ToolPanelContext } from './lib/grid-tool-panel';
 export { GridTypeProvider, useGridTypeDefaults, useTypeDefault, type GridTypeProviderProps, type ReactTypeDefault, type TypeDefaultsMap, } from './lib/grid-type-registry';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-react/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGtG,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGpF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGjF,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGvH,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-react/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,GAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGtG,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGpF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGjF,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGvH,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}

package/index.js

@@ -1,33 +1,33 @@
-import { jsx as T } from "react/jsx-runtime";
-import { DataGridElement as _ } from "@toolbox-web/grid";
-import { useRef as k, useCallback as D, createContext as j, useContext as F, forwardRef as $, useMemo as J, useEffect as v, useImperativeHandle as K, useState as N } from "react";
-import { flushSync as R } from "react-dom";
+import { jsx as x } from "react/jsx-runtime";
+import { DataGridElement as J } from "@toolbox-web/grid";
+import { useRef as S, useCallback as E, createContext as K, useContext as N, forwardRef as Q, useMemo as U, useEffect as R, useImperativeHandle as X, useState as F } from "react";
+import { flushSync as v } from "react-dom";
 import { createRoot as b } from "react-dom/client";
-const H = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new Map();
-function z(n) {
+const W = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new Map();
+function B(n) {
   const t = n.querySelector("tbw-grid-detail");
   if (t) {
-    const r = H.get(t);
+    const r = W.get(t);
     if (r) return r;
   }
   const e = n.id || n.getAttribute("data-grid-id");
   if (e)
     return q.get(e);
 }
-function le(n) {
-  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, i = k(null), s = D(
+function me(n) {
+  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, i = S(null), s = E(
     (c) => {
       if (i.current = c, !c) return;
-      H.set(c, t);
-      const u = c.closest("tbw-grid");
-      if (u) {
-        const l = u.id || u.getAttribute("data-grid-id");
+      W.set(c, t);
+      const d = c.closest("tbw-grid");
+      if (d) {
+        const l = d.id || d.getAttribute("data-grid-id");
         l && q.set(l, t);
       }
     },
     [t]
   );
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ x(
     "tbw-grid-detail",
     {
       ref: s,
@@ -36,74 +36,100 @@ function le(n) {
     }
   );
 }
-const L = j(null), fe = ({ defaults: n, children: t }) => /* @__PURE__ */ T(L.Provider, { value: n, children: t });
-function ge() {
-  return F(L);
+const z = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new Map();
+function _(n) {
+  const t = n.querySelector("tbw-grid-responsive-card");
+  if (t) {
+    const r = z.get(t);
+    if (r) return r;
+  }
+  const e = n.id || n.getAttribute("data-grid-id");
+  if (e)
+    return O.get(e);
 }
-function me(n) {
-  return F(L)?.[n];
+function ye(n) {
+  const { children: t, cardRowHeight: e = "auto" } = n, r = S(null), i = E(
+    (o) => {
+      if (r.current = o, !o) return;
+      z.set(o, t);
+      const c = o.closest("tbw-grid");
+      if (c) {
+        const d = c.id || c.getAttribute("data-grid-id");
+        d && O.set(d, t);
+      }
+    },
+    [t]
+  ), s = e === "auto" ? "auto" : String(e);
+  return /* @__PURE__ */ x("tbw-grid-responsive-card", { ref: i, cardRowHeight: s });
+}
+const I = K(null), he = ({ defaults: n, children: t }) => /* @__PURE__ */ x(I.Provider, { value: n, children: t });
+function we() {
+  return N(I);
 }
-const Q = L;
-function U(n) {
+function Re(n) {
+  return N(I)?.[n];
+}
+const Y = I;
+function Z(n) {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
     const r = e.cellEl;
     if (r) {
       const o = t.get(r);
       if (o)
-        return R(() => {
+        return v(() => {
           o.root.render(n(e));
         }), o.container;
     }
     const i = document.createElement("div");
     i.className = "react-cell-renderer", i.style.display = "contents";
     const s = b(i);
-    return R(() => {
+    return v(() => {
       s.render(n(e));
     }), r && t.set(r, { root: s, container: i }), i;
   };
 }
-function X(n) {
+function ee(n) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-cell-editor", e.style.display = "contents";
     const r = b(e);
-    return R(() => {
+    return v(() => {
       r.render(n(t));
     }), e;
   };
 }
-function Y(n) {
+function te(n) {
   if (!n) return;
   if (!n.columns) return n;
   const t = n.columns.map((e) => {
     const { renderer: r, editor: i, ...s } = e, o = { ...s };
-    return r && (o.renderer = U(r)), i && (o.editor = X(i)), o;
+    return r && (o.renderer = Z(r)), i && (o.editor = ee(i)), o;
   });
   return {
     ...n,
     columns: t
   };
 }
-const B = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new Map();
-function Z(n) {
-  const t = B.get(n);
+const j = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new Map();
+function re(n) {
+  const t = j.get(n);
   if (t) return t;
   const e = n.id;
   if (e)
-    return O.get(e);
+    return $.get(e);
 }
-function pe(n) {
-  const { id: t, title: e, icon: r, tooltip: i, order: s = 100, children: o } = n, c = k(null), u = D(
+function ve(n) {
+  const { id: t, title: e, icon: r, tooltip: i, order: s = 100, children: o } = n, c = S(null), d = E(
     (l) => {
-      c.current = l, l && (B.set(l, o), t && O.set(t, o));
+      c.current = l, l && (j.set(l, o), t && $.set(t, o));
     },
     [o, t]
   );
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ x(
     "tbw-grid-tool-panel",
     {
-      ref: u,
+      ref: d,
       id: t,
       title: e,
       icon: r,
@@ -112,41 +138,41 @@ function pe(n) {
     }
   );
 }
-const A = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new Map();
-function ee(n, t) {
-  const e = n.getAttribute("field"), r = A.get(n) ?? {};
-  if (r.renderer = t, A.set(n, r), e) {
-    const i = G.get(e) ?? {};
-    i.renderer = t, G.set(e, i);
+const G = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new Map();
+function ne(n, t) {
+  const e = n.getAttribute("field"), r = G.get(n) ?? {};
+  if (r.renderer = t, G.set(n, r), e) {
+    const i = k.get(e) ?? {};
+    i.renderer = t, k.set(e, i);
   }
 }
-function te(n, t) {
-  const e = n.getAttribute("field"), r = A.get(n) ?? {};
-  if (r.editor = t, A.set(n, r), e) {
-    const i = G.get(e) ?? {};
-    i.editor = t, G.set(e, i);
+function ie(n, t) {
+  const e = n.getAttribute("field"), r = G.get(n) ?? {};
+  if (r.editor = t, G.set(n, r), e) {
+    const i = k.get(e) ?? {};
+    i.editor = t, k.set(e, i);
   }
 }
-function re(n) {
-  let t = A.get(n)?.renderer;
+function oe(n) {
+  let t = G.get(n)?.renderer;
   if (!t) {
     const e = n.getAttribute("field");
-    e && (t = G.get(e)?.renderer);
+    e && (t = k.get(e)?.renderer);
   }
   return t;
 }
-function ne(n) {
-  let t = A.get(n)?.editor;
+function se(n) {
+  let t = G.get(n)?.editor;
   if (!t) {
     const e = n.getAttribute("field");
-    e && (t = G.get(e)?.editor);
+    e && (t = k.get(e)?.editor);
   }
   return t;
 }
-function ye() {
-  return Array.from(G.keys());
+function Ce() {
+  return Array.from(k.keys());
 }
-class ie {
+class ce {
   mountedViews = [];
   typeDefaults = null;
   /**
@@ -164,10 +190,10 @@ class ie {
    */
   canHandle(t) {
     const e = t.getAttribute("field");
-    let r = A.get(t);
+    let r = G.get(t);
     if (!r && e) {
-      const o = G.get(e);
-      o && (o.renderer || o.editor) && (r = o, A.set(t, r));
+      const o = k.get(e);
+      o && (o.renderer || o.editor) && (r = o, G.set(t, r));
     }
     const i = r?.renderer !== void 0, s = r?.editor !== void 0;
     return r !== void 0 && (i || s);
@@ -184,29 +210,29 @@ class ie {
    * allowing the grid to use its default rendering.
    */
   createRenderer(t) {
-    const e = re(t);
+    const e = oe(t);
     if (!e)
       return;
     const r = /* @__PURE__ */ new WeakMap();
     return (i) => {
       const s = i.cellEl;
       if (s) {
-        const u = r.get(s);
-        if (u)
-          return R(() => {
-            u.root.render(e(i));
-          }), u.container;
+        const d = r.get(s);
+        if (d)
+          return v(() => {
+            d.root.render(e(i));
+          }), d.container;
         const l = document.createElement("div");
         l.className = "react-cell-renderer", l.style.display = "contents";
         const w = b(l);
-        return R(() => {
+        return v(() => {
           w.render(e(i));
         }), r.set(s, { root: w, container: l, lastRowIndex: i.rowIndex ?? -1 }), this.mountedViews.push({ root: w, container: l }), l;
       }
       const o = document.createElement("div");
       o.className = "react-cell-renderer", o.style.display = "contents";
       const c = b(o);
-      return R(() => {
+      return v(() => {
         c.render(e(i));
       }), this.mountedViews.push({ root: c, container: o }), o;
     };
@@ -216,12 +242,12 @@ class ie {
    * with commit/cancel callbacks passed as props.
    */
   createEditor(t) {
-    const e = ne(t);
+    const e = se(t);
     return e ? (r) => {
       const i = document.createElement("div");
       i.className = "react-cell-editor", i.style.display = "contents";
       const s = b(i);
-      return R(() => {
+      return v(() => {
         s.render(e(r));
       }), this.mountedViews.push({ root: s, container: i }), i;
     } : () => document.createElement("div");
@@ -231,13 +257,13 @@ class ie {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(t) {
-    const e = z(t);
+    const e = B(t);
     if (e)
       return (r, i) => {
         const s = document.createElement("div");
         s.className = "react-detail-panel";
         const o = { row: r, rowIndex: i }, c = b(s);
-        return R(() => {
+        return v(() => {
           c.render(e(o));
         }), this.mountedViews.push({ root: c, container: s }), s;
       };
@@ -251,12 +277,28 @@ class ie {
     if (e)
       return this.createDetailRenderer(e);
   }
+  /**
+   * Creates a responsive card renderer function for ResponsivePlugin.
+   * Renders React components for card layout in responsive mode.
+   */
+  createResponsiveCardRenderer(t) {
+    const e = _(t);
+    if (e)
+      return (r, i) => {
+        const s = document.createElement("div");
+        s.className = "react-responsive-card";
+        const o = { row: r, index: i }, c = b(s);
+        return v(() => {
+          c.render(e(o));
+        }), this.mountedViews.push({ root: c, container: s }), s;
+      };
+  }
   /**
    * Creates a tool panel renderer from a light DOM element.
    * Renders React components into tool panel containers.
    */
   createToolPanelRenderer(t) {
-    const e = Z(t);
+    const e = re(t);
     if (!e)
       return;
     const r = t.closest("tbw-grid");
@@ -264,14 +306,14 @@ class ie {
       const s = {
         grid: r ?? i
       }, o = b(i);
-      return R(() => {
+      return v(() => {
         o.render(e(s));
       }), this.mountedViews.push({ root: o, container: i }), () => {
-        const c = this.mountedViews.findIndex((u) => u.container === i);
+        const c = this.mountedViews.findIndex((d) => d.container === i);
         if (c !== -1) {
-          const { root: u } = this.mountedViews[c];
+          const { root: d } = this.mountedViews[c];
           try {
-            u.unmount();
+            d.unmount();
           } catch {
           }
           this.mountedViews.splice(c, 1);
@@ -323,7 +365,7 @@ class ie {
       const r = document.createElement("span");
       r.style.display = "contents";
       const i = b(r);
-      return this.mountedViews.push({ root: i, container: r }), R(() => {
+      return this.mountedViews.push({ root: i, container: r }), v(() => {
         i.render(t(e));
       }), r;
     };
@@ -337,7 +379,7 @@ class ie {
       const r = document.createElement("span");
       r.style.display = "contents";
       const i = b(r);
-      return this.mountedViews.push({ root: i, container: r }), R(() => {
+      return this.mountedViews.push({ root: i, container: r }), v(() => {
         i.render(t(e));
       }), r;
     };
@@ -369,116 +411,135 @@ class ie {
     }
   }
 }
-let W = !1, M = null;
-function P() {
-  return W || (M = new ie(), _.registerAdapter(M), W = !0), M;
+let H = !1, M = null;
+function L() {
+  return H || (M = new ce(), J.registerAdapter(M), H = !0), M;
 }
-P();
-function oe(n, t) {
+L();
+function de(n, t) {
   const e = n, r = e.getPluginByName?.("masterDetail");
   if (r && typeof r.refreshDetailRenderer == "function") {
     r.refreshDetailRenderer();
     return;
   }
   const i = n.querySelector("tbw-grid-detail");
-  !i || !z(n) || import("@toolbox-web/grid/all").then(({ MasterDetailPlugin: o }) => {
+  !i || !B(n) || import("@toolbox-web/grid/all").then(({ MasterDetailPlugin: o }) => {
     const c = t.createDetailRenderer(n);
     if (!c) return;
-    const u = i.getAttribute("animation");
+    const d = i.getAttribute("animation");
     let l = "slide";
-    u === "false" ? l = !1 : u === "fade" && (l = "fade");
-    const w = i.getAttribute("showExpandColumn") !== "false", a = new o({
+    d === "false" ? l = !1 : d === "fade" && (l = "fade");
+    const w = i.getAttribute("showExpandColumn") !== "false", u = new o({
       detailRenderer: c,
       showExpandColumn: w,
       animation: l
-    }), m = e.gridConfig || {}, S = m.plugins || [];
+    }), p = e.gridConfig || {}, A = p.plugins || [];
     e.gridConfig = {
-      ...m,
-      plugins: [...S, a]
+      ...p,
+      plugins: [...A, u]
     };
   }).catch(() => {
   });
 }
-const he = $(function(t, e) {
+function ae(n, t) {
+  const e = n;
+  if (!n.querySelector("tbw-grid-responsive-card") || !_(n)) return;
+  const s = e.getPluginByName?.("responsive");
+  if (s && typeof s.setCardRenderer == "function") {
+    const o = t.createResponsiveCardRenderer(n);
+    o && s.setCardRenderer(o);
+    return;
+  }
+  console.warn(
+    `[tbw-grid-react] <GridResponsiveCard> found but ResponsivePlugin is not configured.
+Add ResponsivePlugin to your gridConfig.plugins array:
+
+  import { ResponsivePlugin } from "@toolbox-web/grid/all";
+  const config = {
+    plugins: [new ResponsivePlugin({ breakpoint: 500 })],
+  };`
+  );
+}
+const be = Q(function(t, e) {
   const {
     rows: r,
     gridConfig: i,
     columns: s,
     fitMode: o,
     editOn: c,
-    customStyles: u,
+    customStyles: d,
     className: l,
     style: w,
-    children: a,
-    onRowsChange: m,
-    onCellEdit: S,
-    onRowClick: E,
-    onColumnStateChange: x,
-    onSortChange: I
-  } = t, f = k(null), V = k(null), y = F(Q), C = J(() => Y(i), [i]);
-  return v(() => {
-    P().setTypeDefaults(y);
-  }, [y]), v(() => {
+    children: u,
+    onRowsChange: p,
+    onCellEdit: A,
+    onRowClick: D,
+    onColumnStateChange: P,
+    onSortChange: T
+  } = t, f = S(null), V = S(null), y = N(Y), C = U(() => te(i), [i]);
+  return R(() => {
+    L().setTypeDefaults(y);
+  }, [y]), R(() => {
     f.current && (f.current.rows = r);
-  }, [r]), v(() => {
+  }, [r]), R(() => {
     f.current && C && (f.current.gridConfig = C);
-  }, [C]), v(() => {
+  }, [C]), R(() => {
     f.current && s && (f.current.columns = s);
-  }, [s]), v(() => {
+  }, [s]), R(() => {
     f.current && o !== void 0 && (f.current.fitMode = o);
-  }, [o]), v(() => {
+  }, [o]), R(() => {
     f.current && c !== void 0 && (f.current.editOn = c);
-  }, [c]), v(() => {
-    const d = f.current;
-    if (!d) return;
-    const p = P();
-    d.__frameworkAdapter = p, oe(d, p);
+  }, [c]), R(() => {
+    const a = f.current;
+    if (!a) return;
+    const m = L();
+    a.__frameworkAdapter = m, de(a, m), ae(a, m);
     let g = !1;
     const h = requestAnimationFrame(() => {
-      g || (typeof d.refreshColumns == "function" && d.refreshColumns(), typeof d.refreshShellHeader == "function" && d.refreshShellHeader());
+      g || (typeof a.refreshColumns == "function" && a.refreshColumns(), typeof a.refreshShellHeader == "function" && a.refreshShellHeader());
     });
     return () => {
       g = !0, cancelAnimationFrame(h);
     };
-  }, []), v(() => {
-    if (!f.current || !u) return;
-    const d = f.current, p = "react-custom-styles";
+  }, []), R(() => {
+    if (!f.current || !d) return;
+    const a = f.current, m = "react-custom-styles";
     let g = !0;
-    return d.ready?.().then(() => {
-      g && u && (d.registerStyles?.(p, u), V.current = p);
+    return a.ready?.().then(() => {
+      g && d && (a.registerStyles?.(m, d), V.current = m);
     }), () => {
-      g = !1, V.current && (d.unregisterStyles?.(V.current), V.current = null);
+      g = !1, V.current && (a.unregisterStyles?.(V.current), V.current = null);
     };
-  }, [u]), v(() => {
-    const d = f.current;
-    if (!d) return;
-    const p = [];
-    if (m) {
-      const g = ((h) => m(h.detail.rows));
-      d.addEventListener("rows-change", g), p.push(["rows-change", g]);
+  }, [d]), R(() => {
+    const a = f.current;
+    if (!a) return;
+    const m = [];
+    if (p) {
+      const g = ((h) => p(h.detail.rows));
+      a.addEventListener("rows-change", g), m.push(["rows-change", g]);
     }
-    if (S) {
-      const g = ((h) => S(h));
-      d.addEventListener("cell-edit", g), p.push(["cell-edit", g]);
+    if (A) {
+      const g = ((h) => A(h));
+      a.addEventListener("cell-edit", g), m.push(["cell-edit", g]);
     }
-    if (E) {
-      const g = ((h) => E(h));
-      d.addEventListener("row-click", g), p.push(["row-click", g]);
+    if (D) {
+      const g = ((h) => D(h));
+      a.addEventListener("row-click", g), m.push(["row-click", g]);
     }
-    if (x) {
-      const g = ((h) => x(h));
-      d.addEventListener("column-state-change", g), p.push(["column-state-change", g]);
+    if (P) {
+      const g = ((h) => P(h));
+      a.addEventListener("column-state-change", g), m.push(["column-state-change", g]);
     }
-    if (I) {
-      const g = ((h) => I(h));
-      d.addEventListener("sort-change", g), p.push(["sort-change", g]);
+    if (T) {
+      const g = ((h) => T(h));
+      a.addEventListener("sort-change", g), m.push(["sort-change", g]);
     }
     return () => {
-      p.forEach(([g, h]) => {
-        d.removeEventListener(g, h);
+      m.forEach(([g, h]) => {
+        a.removeEventListener(g, h);
       });
     };
-  }, [m, S, E, x, I]), K(
+  }, [p, A, D, P, T]), X(
     e,
     () => ({
       get element() {
@@ -493,33 +554,33 @@ const he = $(function(t, e) {
       async forceLayout() {
         return f.current?.forceLayout?.();
       },
-      async toggleGroup(d) {
-        return f.current?.toggleGroup?.(d);
+      async toggleGroup(a) {
+        return f.current?.toggleGroup?.(a);
       },
-      registerStyles(d, p) {
-        f.current?.registerStyles?.(d, p);
+      registerStyles(a, m) {
+        f.current?.registerStyles?.(a, m);
       },
-      unregisterStyles(d) {
-        f.current?.unregisterStyles?.(d);
+      unregisterStyles(a) {
+        f.current?.unregisterStyles?.(a);
       }
     }),
     []
-  ), /* @__PURE__ */ T(
+  ), /* @__PURE__ */ x(
     "tbw-grid",
     {
-      ref: (d) => {
-        if (f.current = d, d) {
-          const p = d;
-          C && (p.gridConfig = C), r && (p.rows = r), s && (p.columns = s);
+      ref: (a) => {
+        if (f.current = a, a) {
+          const m = a;
+          C && (m.gridConfig = C), r && (m.rows = r), s && (m.columns = s);
         }
       },
       class: l,
       style: w,
-      children: a
+      children: u
     }
   );
 });
-function we(n) {
+function Ee(n) {
   const {
     field: t,
     header: e,
@@ -528,61 +589,61 @@ function we(n) {
     sortable: s,
     resizable: o,
     width: c,
-    minWidth: u,
+    minWidth: d,
     hidden: l,
     lockVisible: w,
-    children: a,
-    editor: m,
-    options: S,
-    multi: E,
-    format: x
-  } = n, I = k(null), f = D(
+    children: u,
+    editor: p,
+    options: A,
+    multi: D,
+    format: P
+  } = n, T = S(null), f = E(
     (C) => {
-      I.current = C, C && (a && ee(C, a), m && te(C, m));
+      T.current = C, C && (u && ne(C, u), p && ie(C, p));
     },
-    [a, m, t]
+    [u, p, t]
   ), V = typeof c == "number" ? `${c}px` : c, y = {
     field: t,
     ref: f
   };
-  return e !== void 0 && (y.header = e), r !== void 0 && (y.type = r), i !== void 0 && (y.editable = i), s !== void 0 && (y.sortable = s), o !== void 0 && (y.resizable = o), V !== void 0 && (y.width = V), u !== void 0 && (y["min-width"] = u), l !== void 0 && (y.hidden = l), w !== void 0 && (y["lock-visible"] = w), E !== void 0 && (y.multi = E), x && (y["data-has-format"] = "true"), S && (y["data-has-options"] = "true"), /* @__PURE__ */ T("tbw-grid-column", { ...y });
+  return e !== void 0 && (y.header = e), r !== void 0 && (y.type = r), i !== void 0 && (y.editable = i), s !== void 0 && (y.sortable = s), o !== void 0 && (y.resizable = o), V !== void 0 && (y.width = V), d !== void 0 && (y["min-width"] = d), l !== void 0 && (y.hidden = l), w !== void 0 && (y["lock-visible"] = w), D !== void 0 && (y.multi = D), P && (y["data-has-format"] = "true"), A && (y["data-has-options"] = "true"), /* @__PURE__ */ x("tbw-grid-column", { ...y });
 }
-function ve({ children: n }) {
-  return /* @__PURE__ */ T("tbw-grid-tool-buttons", { children: n });
+function De({ children: n }) {
+  return /* @__PURE__ */ x("tbw-grid-tool-buttons", { children: n });
 }
-function Re() {
-  const n = k(null), [t, e] = N(!1), [r, i] = N(null);
-  v(() => {
-    const a = n.current;
-    if (!a) return;
-    let m = !0;
+function Ae() {
+  const n = S(null), [t, e] = F(!1), [r, i] = F(null);
+  R(() => {
+    const u = n.current;
+    if (!u) return;
+    let p = !0;
     return (async () => {
       try {
-        if (await a.ready?.(), m) {
+        if (await u.ready?.(), p) {
           e(!0);
-          const E = await a.getConfig?.();
-          m && E && i(E);
+          const D = await u.getConfig?.();
+          p && D && i(D);
         }
       } catch {
       }
     })(), () => {
-      m = !1;
+      p = !1;
     };
   }, []);
-  const s = D(async () => {
-    const a = n.current;
-    return a ? await a.getConfig?.() ?? null : null;
-  }, []), o = D(async () => {
-    const a = n.current;
-    a && await a.forceLayout?.();
-  }, []), c = D(async (a) => {
-    const m = n.current;
-    m && await m.toggleGroup?.(a);
-  }, []), u = D((a, m) => {
-    n.current?.registerStyles?.(a, m);
-  }, []), l = D((a) => {
-    n.current?.unregisterStyles?.(a);
-  }, []), w = D(() => r?.columns ? r.columns.filter((a) => !a.hidden) : [], [r]);
+  const s = E(async () => {
+    const u = n.current;
+    return u ? await u.getConfig?.() ?? null : null;
+  }, []), o = E(async () => {
+    const u = n.current;
+    u && await u.forceLayout?.();
+  }, []), c = E(async (u) => {
+    const p = n.current;
+    p && await p.toggleGroup?.(u);
+  }, []), d = E((u, p) => {
+    n.current?.registerStyles?.(u, p);
+  }, []), l = E((u) => {
+    n.current?.unregisterStyles?.(u);
+  }, []), w = E(() => r?.columns ? r.columns.filter((u) => !u.hidden) : [], [r]);
   return {
     ref: n,
     isReady: t,
@@ -590,20 +651,20 @@ function Re() {
     getConfig: s,
     forceLayout: o,
     toggleGroup: c,
-    registerStyles: u,
+    registerStyles: d,
     unregisterStyles: l,
     getVisibleColumns: w
   };
 }
-function Ce(n, t, e, r = []) {
-  const i = k(e);
-  v(() => {
+function Se(n, t, e, r = []) {
+  const i = S(e);
+  R(() => {
     i.current = e;
-  }, [e, ...r]), v(() => {
+  }, [e, ...r]), R(() => {
     const s = n.current, o = s && "element" in s ? s.element : s;
     if (!o) return;
-    const c = ((u) => {
-      i.current(u);
+    const c = ((d) => {
+      i.current(d);
     });
     return o.addEventListener(t, c), () => {
       o.removeEventListener(t, c);
@@ -611,16 +672,17 @@ function Ce(n, t, e, r = []) {
   }, [n, t]);
 }
 export {
-  he as DataGrid,
-  we as GridColumn,
-  le as GridDetailPanel,
-  ve as GridToolButtons,
-  pe as GridToolPanel,
-  fe as GridTypeProvider,
-  ie as ReactGridAdapter,
-  ye as getRegisteredFields,
-  Re as useGrid,
-  Ce as useGridEvent,
-  ge as useGridTypeDefaults,
-  me as useTypeDefault
+  be as DataGrid,
+  Ee as GridColumn,
+  me as GridDetailPanel,
+  ye as GridResponsiveCard,
+  De as GridToolButtons,
+  ve as GridToolPanel,
+  he as GridTypeProvider,
+  ce as ReactGridAdapter,
+  Ce as getRegisteredFields,
+  Ae as useGrid,
+  Se as useGridEvent,
+  we as useGridTypeDefaults,
+  Re as useTypeDefault
 };

package/lib/data-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/data-grid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/data-grid.tsx"],"names":[],"mappings":"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"}

package/lib/grid-responsive-card.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode, ReactElement } from 'react';
+/**
+ * Context object passed to the responsive card render function.
+ */
+export interface ResponsiveCardContext<TRow = unknown> {
+    /** The row data for this card */
+    row: TRow;
+    /** The row index (zero-based) */
+    index: number;
+}
+/**
+ * Get the responsive card renderer for a grid element.
+ * @internal
+ */
+export declare function getResponsiveCardRenderer(gridElement: HTMLElement): ((ctx: ResponsiveCardContext<unknown>) => ReactNode) | undefined;
+/**
+ * Props for the GridResponsiveCard component.
+ */
+export interface GridResponsiveCardProps<TRow = unknown> {
+    /**
+     * Render function for the card content.
+     * Receives the row data and row index.
+     *
+     * @example
+     * ```tsx
+     * <GridResponsiveCard>
+     *   {({ row, index }) => (
+     *     <div className="custom-card">
+     *       <img src={row.avatar} alt={row.name} />
+     *       <span>{row.name}</span>
+     *     </div>
+     *   )}
+     * </GridResponsiveCard>
+     * ```
+     */
+    children: (ctx: ResponsiveCardContext<TRow>) => ReactNode;
+    /**
+     * Card row height in pixels.
+     * Use 'auto' for dynamic height based on content.
+     * @default 'auto'
+     */
+    cardRowHeight?: number | 'auto';
+}
+/**
+ * Component for defining custom card layouts in responsive mode.
+ *
+ * Renders a `<tbw-grid-responsive-card>` custom element in the light DOM that
+ * the ResponsivePlugin picks up to render custom cards in mobile/narrow layouts.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { DataGrid, GridResponsiveCard } from '@toolbox-web/grid-react';
+ * import { ResponsivePlugin } from '@toolbox-web/grid/all';
+ *
+ * function EmployeeGrid() {
+ *   const config = {
+ *     plugins: [new ResponsivePlugin({ breakpoint: 500 })],
+ *     // ... other config
+ *   };
+ *
+ *   return (
+ *     <DataGrid rows={employees} gridConfig={config}>
+ *       <GridResponsiveCard cardRowHeight={80}>
+ *         {({ row, index }) => (
+ *           <div className="employee-card">
+ *             <img src={row.avatar} alt="" />
+ *             <div>
+ *               <strong>{row.name}</strong>
+ *               <span>{row.department}</span>
+ *             </div>
+ *           </div>
+ *         )}
+ *       </GridResponsiveCard>
+ *     </DataGrid>
+ *   );
+ * }
+ * ```
+ *
+ * ## How it works
+ *
+ * 1. This component renders a `<tbw-grid-responsive-card>` element in the grid's light DOM
+ * 2. The ReactGridAdapter detects this element and creates a card renderer
+ * 3. When the grid enters responsive mode, the plugin calls your render function for each row
+ * 4. The React component is rendered into the card container
+ */
+export declare function GridResponsiveCard<TRow = unknown>(props: GridResponsiveCardProps<TRow>): ReactElement;
+//# sourceMappingURL=grid-responsive-card.d.ts.map

package/lib/grid-responsive-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-responsive-card.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/grid-responsive-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,aAAa,CAAC;AAErB;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,IAAI,GAAG,OAAO;IACnD,iCAAiC;IACjC,GAAG,EAAE,IAAI,CAAC;IACV,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;CACf;AAUD;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,qBAAqB,CAAC,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAelE;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,IAAI,GAAG,OAAO;IACrD;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,qBAAqB,CAAC,IAAI,CAAC,KAAK,SAAS,CAAC;IAE1D;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAAE,KAAK,EAAE,uBAAuB,CAAC,IAAI,CAAC,GAAG,YAAY,CA+BrG"}

package/lib/react-grid-adapter.d.ts

@@ -98,6 +98,11 @@ export declare class ReactGridAdapter implements FrameworkAdapter {
      * Parses the <tbw-grid-detail> element and returns a React-based renderer.
      */
     parseDetailElement<TRow = unknown>(detailElement: Element): ((row: TRow, rowIndex: number) => HTMLElement | string) | undefined;
+    /**
+     * Creates a responsive card renderer function for ResponsivePlugin.
+     * Renders React components for card layout in responsive mode.
+     */
+    createResponsiveCardRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow, rowIndex: number) => HTMLElement) | undefined;
     /**
      * Creates a tool panel renderer from a light DOM element.
      * Renders React components into tool panel containers.
@@ -127,7 +132,7 @@ export declare class ReactGridAdapter implements FrameworkAdapter {
      * // Any grid with type: 'country' columns will use these components
      * ```
      */
-    getTypeDefault(type: string): TypeDefault | undefined;
+    getTypeDefault<TRow = unknown>(type: string): TypeDefault<TRow> | undefined;
     /**
      * Creates a renderer function from a React render function for type defaults.
      * @internal

package/lib/react-grid-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAiB9E;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,GAChE,IAAI,CAaN;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,GAChE,IAAI,CAYN;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,GACnB,CAAC,CAAC,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAYvE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,GACnB,CAAC,CAAC,GAAG,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAYzE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,EAAE,CAE9C;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,gBAAiB,YAAW,gBAAgB;IACvD,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,YAAY,CAAgC;IAEpD;;;;;OAKG;IACH,eAAe,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAIvD;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAoBxC;;;;;;;;;;OAUG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA2DxG;;;OAGG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IA0BpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EACjC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IAwB7D;;;OAGG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IAOtE;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAqC5G;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IA2BrD;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAkBxB;;;OAGG;IACH,OAAO,IAAI,IAAI;IAWf;;OAEG;IACH,OAAO,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;CAYtC"}
+{"version":3,"file":"react-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-grid-adapter.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolbox-web/grid-react",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "React adapter for @toolbox-web/grid data grid component",
   "type": "module",
   "main": "./index.js",