@toolbox-web/grid-react 0.0.2

package/index.js

@@ -0,0 +1,541 @@
+import { jsx as L } from "react/jsx-runtime";
+import { DataGridElement as O } from "@toolbox-web/grid";
+import { useRef as G, useCallback as C, forwardRef as _, useMemo as j, useEffect as R, useImperativeHandle as B, useState as M } from "react";
+import { flushSync as b } from "react-dom";
+import { createRoot as V } from "react-dom/client";
+const F = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new Map();
+function H(n) {
+  const t = n.querySelector("tbw-grid-detail");
+  if (t) {
+    const r = F.get(t);
+    if (r) return r;
+  }
+  const e = n.id || n.getAttribute("data-grid-id");
+  if (e)
+    return W.get(e);
+}
+function ce(n) {
+  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, i = G(null), o = C(
+    (d) => {
+      if (i.current = d, !d) return;
+      F.set(d, t);
+      const u = d.closest("tbw-grid");
+      if (u) {
+        const l = u.id || u.getAttribute("data-grid-id");
+        l && W.set(l, t);
+      }
+    },
+    [t]
+  );
+  return /* @__PURE__ */ L(
+    "tbw-grid-detail",
+    {
+      ref: o,
+      showExpandColumn: e ? void 0 : "false",
+      animation: r === !1 ? "false" : r
+    }
+  );
+}
+function $(n) {
+  const t = /* @__PURE__ */ new WeakMap();
+  return (e) => {
+    const r = e.cellEl;
+    if (r) {
+      const s = t.get(r);
+      if (s)
+        return b(() => {
+          s.root.render(n(e));
+        }), s.container;
+    }
+    const i = document.createElement("div");
+    i.className = "react-cell-renderer", i.style.display = "contents";
+    const o = V(i);
+    return b(() => {
+      o.render(n(e));
+    }), r && t.set(r, { root: o, container: i }), i;
+  };
+}
+function J(n) {
+  return (t) => {
+    const e = document.createElement("div");
+    e.className = "react-cell-editor", e.style.display = "contents";
+    const r = V(e);
+    return b(() => {
+      r.render(n(t));
+    }), e;
+  };
+}
+function K(n) {
+  if (!n) return;
+  if (!n.columns) return n;
+  const t = n.columns.map((e) => {
+    const { renderer: r, editor: i, ...o } = e, s = { ...o };
+    return r && (s.renderer = $(r)), i && (s.editor = J(i)), s;
+  });
+  return {
+    ...n,
+    columns: t
+  };
+}
+const N = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
+function Q(n) {
+  const t = N.get(n);
+  if (t) return t;
+  const e = n.id;
+  if (e)
+    return T.get(e);
+}
+function de(n) {
+  const { id: t, title: e, icon: r, tooltip: i, order: o = 100, children: s } = n, d = G(null), u = C(
+    (l) => {
+      d.current = l, l && (N.set(l, s), t && T.set(t, s));
+    },
+    [s, t]
+  );
+  return /* @__PURE__ */ L(
+    "tbw-grid-tool-panel",
+    {
+      ref: u,
+      id: t,
+      title: e,
+      icon: r,
+      tooltip: i,
+      order: o?.toString()
+    }
+  );
+}
+const S = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new Map();
+function U(n, t) {
+  const e = n.getAttribute("field"), r = S.get(n) ?? {};
+  if (r.renderer = t, S.set(n, r), e) {
+    const i = A.get(e) ?? {};
+    i.renderer = t, A.set(e, i);
+  }
+}
+function X(n, t) {
+  const e = n.getAttribute("field"), r = S.get(n) ?? {};
+  if (r.editor = t, S.set(n, r), e) {
+    const i = A.get(e) ?? {};
+    i.editor = t, A.set(e, i);
+  }
+}
+function Y(n) {
+  let t = S.get(n)?.renderer;
+  if (!t) {
+    const e = n.getAttribute("field");
+    e && (t = A.get(e)?.renderer);
+  }
+  return t;
+}
+function Z(n) {
+  let t = S.get(n)?.editor;
+  if (!t) {
+    const e = n.getAttribute("field");
+    e && (t = A.get(e)?.editor);
+  }
+  return t;
+}
+function ue() {
+  return Array.from(A.keys());
+}
+class ee {
+  mountedViews = [];
+  /**
+   * Determines if this adapter can handle the given element.
+   * Checks if a renderer or editor is registered for this element.
+   */
+  canHandle(t) {
+    const e = t.getAttribute("field");
+    let r = S.get(t);
+    if (!r && e) {
+      const s = A.get(e);
+      s && (s.renderer || s.editor) && (r = s, S.set(t, r));
+    }
+    const i = r?.renderer !== void 0, o = r?.editor !== void 0;
+    return r !== void 0 && (i || o);
+  }
+  /**
+   * Creates a view renderer function that renders a React component
+   * and returns its container DOM element.
+   *
+   * Uses a cell cache to reuse React roots for performance - instead of
+   * creating new roots on each render, we reuse existing ones and just
+   * call root.render() with new data.
+   *
+   * Returns undefined if no renderer is registered for this element,
+   * allowing the grid to use its default rendering.
+   */
+  createRenderer(t) {
+    const e = Y(t);
+    if (!e)
+      return;
+    const r = /* @__PURE__ */ new WeakMap();
+    return (i) => {
+      const o = i.cellEl;
+      if (o) {
+        const u = r.get(o);
+        if (u)
+          return b(() => {
+            u.root.render(e(i));
+          }), u.container;
+        const l = document.createElement("div");
+        l.className = "react-cell-renderer", l.style.display = "contents";
+        const w = V(l);
+        return b(() => {
+          w.render(e(i));
+        }), r.set(o, { root: w, container: l, lastRowIndex: i.rowIndex ?? -1 }), this.mountedViews.push({ root: w, container: l }), l;
+      }
+      const s = document.createElement("div");
+      s.className = "react-cell-renderer", s.style.display = "contents";
+      const d = V(s);
+      return b(() => {
+        d.render(e(i));
+      }), this.mountedViews.push({ root: d, container: s }), s;
+    };
+  }
+  /**
+   * Creates an editor spec that renders a React component
+   * with commit/cancel callbacks passed as props.
+   */
+  createEditor(t) {
+    const e = Z(t);
+    return e ? (r) => {
+      const i = document.createElement("div");
+      i.className = "react-cell-editor", i.style.display = "contents";
+      const o = V(i);
+      return b(() => {
+        o.render(e(r));
+      }), this.mountedViews.push({ root: o, container: i }), i;
+    } : () => document.createElement("div");
+  }
+  /**
+   * Creates a detail renderer function for MasterDetailPlugin.
+   * Renders React components for expandable detail rows.
+   */
+  createDetailRenderer(t) {
+    const e = H(t);
+    if (e)
+      return (r, i) => {
+        const o = document.createElement("div");
+        o.className = "react-detail-panel";
+        const s = { row: r, rowIndex: i }, d = V(o);
+        return b(() => {
+          d.render(e(s));
+        }), this.mountedViews.push({ root: d, container: o }), o;
+      };
+  }
+  /**
+   * Framework adapter hook called by MasterDetailPlugin during attach().
+   * Parses the <tbw-grid-detail> element and returns a React-based renderer.
+   */
+  parseDetailElement(t) {
+    const e = t.closest("tbw-grid");
+    if (e)
+      return this.createDetailRenderer(e);
+  }
+  /**
+   * Creates a tool panel renderer from a light DOM element.
+   * Renders React components into tool panel containers.
+   */
+  createToolPanelRenderer(t) {
+    const e = Q(t);
+    if (!e)
+      return;
+    const r = t.closest("tbw-grid");
+    return (i) => {
+      const o = {
+        grid: r ?? i
+      }, s = V(i);
+      return b(() => {
+        s.render(e(o));
+      }), this.mountedViews.push({ root: s, container: i }), () => {
+        const d = this.mountedViews.findIndex((u) => u.container === i);
+        if (d !== -1) {
+          const { root: u } = this.mountedViews[d];
+          try {
+            u.unmount();
+          } catch {
+          }
+          this.mountedViews.splice(d, 1);
+        }
+      };
+    };
+  }
+  /**
+   * Clean up all mounted React roots.
+   * Call this when the grid is unmounted.
+   */
+  destroy() {
+    this.mountedViews.forEach(({ root: t }) => {
+      try {
+        t.unmount();
+      } catch {
+      }
+    }), this.mountedViews = [];
+  }
+  /**
+   * Unmount a specific container (called when cell is recycled).
+   */
+  unmount(t) {
+    const e = this.mountedViews.findIndex((r) => r.container === t);
+    if (e !== -1) {
+      const { root: r } = this.mountedViews[e];
+      try {
+        r.unmount();
+      } catch {
+      }
+      this.mountedViews.splice(e, 1);
+    }
+  }
+}
+let P = !1, x = null;
+function q() {
+  return P || (x = new ee(), O.registerAdapter(x), P = !0), x;
+}
+q();
+function te(n, t, e) {
+  const r = n, i = r.getPlugin?.(t);
+  if (i && typeof i.refreshDetailRenderer == "function") {
+    i.refreshDetailRenderer();
+    return;
+  }
+  const o = n.querySelector("tbw-grid-detail");
+  if (!o || !H(n)) return;
+  const d = e.createDetailRenderer(n);
+  if (!d) return;
+  const u = o.getAttribute("animation");
+  let l = "slide";
+  u === "false" ? l = !1 : u === "fade" && (l = "fade");
+  const w = o.getAttribute("showExpandColumn") !== "false", a = new t({
+    detailRenderer: d,
+    showExpandColumn: w,
+    animation: l
+  }), m = r.gridConfig || {}, E = m.plugins || [];
+  r.gridConfig = {
+    ...m,
+    plugins: [...E, a]
+  };
+}
+const ae = _(function(t, e) {
+  const {
+    rows: r,
+    gridConfig: i,
+    columns: o,
+    fitMode: s,
+    editOn: d,
+    customStyles: u,
+    className: l,
+    style: w,
+    children: a,
+    onRowsChange: m,
+    onCellEdit: E,
+    onRowClick: v,
+    onColumnStateChange: D,
+    onSortChange: I
+  } = t, f = G(null), k = G(null), p = j(() => K(i), [i]);
+  return R(() => {
+    f.current && (f.current.rows = r);
+  }, [r]), R(() => {
+    f.current && p && (f.current.gridConfig = p);
+  }, [p]), R(() => {
+    f.current && o && (f.current.columns = o);
+  }, [o]), R(() => {
+    f.current && s !== void 0 && (f.current.fitMode = s);
+  }, [s]), R(() => {
+    f.current && d !== void 0 && (f.current.editOn = d);
+  }, [d]), R(() => {
+    const c = f.current;
+    if (!c) return;
+    const h = q();
+    c.__frameworkAdapter = h;
+    let g = !1;
+    const y = requestAnimationFrame(() => {
+      g || (typeof c.refreshColumns == "function" && c.refreshColumns(), import("@toolbox-web/grid/all").then(({ MasterDetailPlugin: z }) => {
+        g || te(c, z, h);
+      }).catch(() => {
+      }), typeof c.refreshShellHeader == "function" && c.refreshShellHeader());
+    });
+    return () => {
+      g = !0, cancelAnimationFrame(y);
+    };
+  }, []), R(() => {
+    if (!f.current || !u) return;
+    const c = f.current, h = "react-custom-styles";
+    let g = !0;
+    return c.ready?.().then(() => {
+      g && u && (c.registerStyles?.(h, u), k.current = h);
+    }), () => {
+      g = !1, k.current && (c.unregisterStyles?.(k.current), k.current = null);
+    };
+  }, [u]), R(() => {
+    const c = f.current;
+    if (!c) return;
+    const h = [];
+    if (m) {
+      const g = ((y) => m(y.detail.rows));
+      c.addEventListener("rows-change", g), h.push(["rows-change", g]);
+    }
+    if (E) {
+      const g = ((y) => E(y));
+      c.addEventListener("cell-edit", g), h.push(["cell-edit", g]);
+    }
+    if (v) {
+      const g = ((y) => v(y));
+      c.addEventListener("row-click", g), h.push(["row-click", g]);
+    }
+    if (D) {
+      const g = ((y) => D(y));
+      c.addEventListener("column-state-change", g), h.push(["column-state-change", g]);
+    }
+    if (I) {
+      const g = ((y) => I(y));
+      c.addEventListener("sort-change", g), h.push(["sort-change", g]);
+    }
+    return () => {
+      h.forEach(([g, y]) => {
+        c.removeEventListener(g, y);
+      });
+    };
+  }, [m, E, v, D, I]), B(
+    e,
+    () => ({
+      get element() {
+        return f.current;
+      },
+      async getConfig() {
+        return f.current?.getConfig?.() ?? {};
+      },
+      async ready() {
+        return f.current?.ready?.();
+      },
+      async forceLayout() {
+        return f.current?.forceLayout?.();
+      },
+      async toggleGroup(c) {
+        return f.current?.toggleGroup?.(c);
+      },
+      registerStyles(c, h) {
+        f.current?.registerStyles?.(c, h);
+      },
+      unregisterStyles(c) {
+        f.current?.unregisterStyles?.(c);
+      }
+    }),
+    []
+  ), /* @__PURE__ */ L(
+    "tbw-grid",
+    {
+      ref: (c) => {
+        if (f.current = c, c) {
+          const h = c;
+          i && (h.gridConfig = i), r && (h.rows = r), o && (h.columns = o);
+        }
+      },
+      class: l,
+      style: w,
+      children: a
+    }
+  );
+});
+function le(n) {
+  const {
+    field: t,
+    header: e,
+    type: r,
+    editable: i,
+    sortable: o,
+    resizable: s,
+    width: d,
+    minWidth: u,
+    hidden: l,
+    lockVisible: w,
+    children: a,
+    editor: m,
+    options: E,
+    multi: v,
+    format: D
+  } = n, I = G(null), f = C(
+    (c) => {
+      I.current = c, c && (a && U(c, a), m && X(c, m));
+    },
+    [a, m, t]
+  ), k = typeof d == "number" ? `${d}px` : d, p = {
+    field: t,
+    ref: f
+  };
+  return e !== void 0 && (p.header = e), r !== void 0 && (p.type = r), i !== void 0 && (p.editable = i), o !== void 0 && (p.sortable = o), s !== void 0 && (p.resizable = s), k !== void 0 && (p.width = k), u !== void 0 && (p["min-width"] = u), l !== void 0 && (p.hidden = l), w !== void 0 && (p["lock-visible"] = w), v !== void 0 && (p.multi = v), D && (p["data-has-format"] = "true"), E && (p["data-has-options"] = "true"), /* @__PURE__ */ L("tbw-grid-column", { ...p });
+}
+function fe({ children: n }) {
+  return /* @__PURE__ */ L("tbw-grid-tool-buttons", { children: n });
+}
+function ge() {
+  const n = G(null), [t, e] = M(!1), [r, i] = M(null);
+  R(() => {
+    const a = n.current;
+    if (!a) return;
+    let m = !0;
+    return (async () => {
+      try {
+        if (await a.ready?.(), m) {
+          e(!0);
+          const v = await a.getConfig?.();
+          m && v && i(v);
+        }
+      } catch {
+      }
+    })(), () => {
+      m = !1;
+    };
+  }, []);
+  const o = C(async () => {
+    const a = n.current;
+    return a ? await a.getConfig?.() ?? null : null;
+  }, []), s = C(async () => {
+    const a = n.current;
+    a && await a.forceLayout?.();
+  }, []), d = C(async (a) => {
+    const m = n.current;
+    m && await m.toggleGroup?.(a);
+  }, []), u = C((a, m) => {
+    n.current?.registerStyles?.(a, m);
+  }, []), l = C((a) => {
+    n.current?.unregisterStyles?.(a);
+  }, []), w = C(() => r?.columns ? r.columns.filter((a) => !a.hidden) : [], [r]);
+  return {
+    ref: n,
+    isReady: t,
+    config: r,
+    getConfig: o,
+    forceLayout: s,
+    toggleGroup: d,
+    registerStyles: u,
+    unregisterStyles: l,
+    getVisibleColumns: w
+  };
+}
+function me(n, t, e, r = []) {
+  const i = G(e);
+  R(() => {
+    i.current = e;
+  }, [e, ...r]), R(() => {
+    const o = n.current, s = o && "element" in o ? o.element : o;
+    if (!s) return;
+    const d = ((u) => {
+      i.current(u);
+    });
+    return s.addEventListener(t, d), () => {
+      s.removeEventListener(t, d);
+    };
+  }, [n, t]);
+}
+export {
+  ae as DataGrid,
+  le as GridColumn,
+  ce as GridDetailPanel,
+  fe as GridToolButtons,
+  de as GridToolPanel,
+  ee as ReactGridAdapter,
+  ue as getRegisteredFields,
+  ge as useGrid,
+  me as useGridEvent
+};

package/lib/context-types.d.ts

@@ -0,0 +1,48 @@
+import { ColumnConfig } from '../../../../dist/libs/grid/index.d.ts';
+/**
+ * Context object passed to cell renderer components.
+ */
+export interface GridCellContext<TValue = unknown, TRow = unknown> {
+    /** The cell value for this column */
+    value: TValue;
+    /** The full row data object */
+    row: TRow;
+    /** The column configuration */
+    column: ColumnConfig<TRow>;
+    /** Field key */
+    field: keyof TRow & string;
+}
+/**
+ * Context object passed to cell editor components.
+ */
+export interface GridEditorContext<TValue = unknown, TRow = unknown> {
+    /** The cell value for this column */
+    value: TValue;
+    /** The full row data object */
+    row: TRow;
+    /** The column configuration */
+    column: ColumnConfig<TRow>;
+    /** Field key */
+    field: keyof TRow & string;
+    /** Commit the new value and close editor */
+    commit: (newValue: TValue) => void;
+    /** Cancel editing without saving */
+    cancel: () => void;
+}
+/**
+ * Context object passed to detail panel components.
+ */
+export interface GridDetailContext<TRow = unknown> {
+    /** The row data object */
+    row: TRow;
+    /** Row index */
+    rowIndex: number;
+}
+/**
+ * Context object passed to tool panel components.
+ */
+export interface GridToolPanelContext {
+    /** Reference to the grid element */
+    grid: HTMLElement;
+}
+//# sourceMappingURL=context-types.d.ts.map

package/lib/context-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-types.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/context-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO;IAC/D,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAC/B,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,gBAAgB;IAChB,KAAK,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO;IACjE,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAC/B,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,gBAAgB;IAChB,KAAK,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oCAAoC;IACpC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,IAAI,GAAG,OAAO;IAC/C,0BAA0B;IAC1B,GAAG,EAAE,IAAI,CAAC;IACV,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,IAAI,EAAE,WAAW,CAAC;CACnB"}