react-glide-table 1.7.0 → 2.0.2

package/dist/core.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/core/index.ts
 var core_exports = {};
 __export(core_exports, {
+  BUILTIN_CELL_RENDERERS: () => BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS: () => CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS: () => DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD: () => DEFAULT_TREE_CHILDREN_FIELD,
@@ -27,6 +28,7 @@ __export(core_exports, {
   DEFAULT_TREE_PARENT_ID_FIELD: () => DEFAULT_TREE_PARENT_ID_FIELD,
   DEFAULT_TREE_QTY_FIELD: () => DEFAULT_TREE_QTY_FIELD,
   INLINE_SEARCH_MAX_RESULTS: () => INLINE_SEARCH_MAX_RESULTS,
+  ResolvedTableCell: () => ResolvedTableCell,
   applyCellEdit: () => applyCellEdit,
   applyFillData: () => applyFillData,
   applySelectionUpdater: () => applySelectionUpdater,
@@ -45,9 +47,13 @@ __export(core_exports, {
   collectFillChanges: () => collectFillChanges,
   collectRowSpanColumns: () => collectRowSpanColumns,
   collectSearchMatchesInRange: () => collectSearchMatchesInRange,
+  commitCellValue: () => commitCellValue,
+  createCellRendererRegistry: () => createCellRendererRegistry,
   createSearchRegex: () => createSearchRegex,
   escapeSearchRegex: () => escapeSearchRegex,
   flattenSubtreeRows: () => flattenSubtreeRows,
+  formatCellValue: () => formatCellValue,
+  formatDefaultCellValue: () => formatDefaultCellValue,
   formatSearchResultLabel: () => formatSearchResultLabel,
   getCellEditDraftValue: () => getCellEditDraftValue,
   getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
@@ -69,8 +75,10 @@ __export(core_exports, {
   parseClipboardTSV: () => parseClipboardTSV,
   parseClipboardTSVWithDepths: () => parseClipboardTSVWithDepths,
   previousSearchIndex: () => previousSearchIndex,
+  resolveCellRenderer: () => resolveCellRenderer,
   resolveColumnFreezeSide: () => resolveColumnFreezeSide,
   resolveDataTableLabels: () => resolveDataTableLabels,
+  resolveHeaderFreezeOffset: () => resolveHeaderFreezeOffset,
   resolvePasteColumnIds: () => resolvePasteColumnIds,
   resolveRowSelection: () => resolveRowSelection,
   resolveRowSpanAt: () => resolveRowSpanAt,
@@ -83,6 +91,7 @@ __export(core_exports, {
   useConvertTreeData: () => useConvertTreeData,
   useGlideTable: () => useGlideTable,
   useInlineSearch: () => useInlineSearch,
+  withCellUpdate: () => withCellUpdate,
   writeSelectionToClipboard: () => writeSelectionToClipboard
 });
 module.exports = __toCommonJS(core_exports);
@@ -175,6 +184,37 @@ function applyCellEdit(data, rows, rowIndex, colIndex, raw) {
   return newData;
 }
 
+// src/components/ui/table/features/cell-render/commitCellValue.ts
+function commitCellValue({
+  data,
+  rows,
+  rowId,
+  columnId,
+  value,
+  onCellChange,
+  onDataChange
+}) {
+  if (!onCellChange && !onDataChange) return true;
+  if (onCellChange) {
+    onCellChange(rowId, columnId, value);
+    return true;
+  }
+  const row = rows.find((item) => item.id === rowId);
+  if (!row) return false;
+  const cell = row.getAllCells().find((item) => item.column.id === columnId) ?? row.getVisibleCells().find((item) => item.column.id === columnId);
+  if (!cell) return false;
+  const accessorKey = getColumnAccessorKey(cell.column.columnDef);
+  if (!accessorKey) return false;
+  const dataIndex = row.index;
+  if (dataIndex < 0 || dataIndex >= data.length) return false;
+  const next = data.map((item) => ({ ...item }));
+  const target = next[dataIndex];
+  if (!target) return false;
+  target[accessorKey] = value;
+  onDataChange?.(next);
+  return true;
+}
+
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 function useCellEdit({
   data,
@@ -210,21 +250,23 @@ function useCellEdit({
         cancelEdit();
         return true;
       }
-      const value = raw ?? draftValueRef.current;
       if (!isColumnEditable(cell.column.columnDef)) {
         cancelEdit();
         return true;
       }
+      const value = raw ?? draftValueRef.current;
       const parsed = parseCellEditValue(value, getColumnEditType(cell.column.columnDef));
       if (!parsed.ok) return false;
-      if (onCellChange) {
-        onCellChange(row.id, cell.column.id, parsed.value);
-        cancelEdit();
-        return true;
-      }
-      const next = applyCellEdit(data, rows, current.rowIndex, current.colIndex, value);
-      if (!next) return false;
-      onDataChange?.(next);
+      const committed = commitCellValue({
+        data,
+        rows,
+        rowId: row.id,
+        columnId: cell.column.id,
+        value: parsed.value,
+        onCellChange,
+        onDataChange
+      });
+      if (!committed) return false;
       cancelEdit();
       return true;
     },
@@ -253,6 +295,228 @@ function useCellEdit({
   };
 }
 
+// src/components/ui/table/features/cell-render/builtins.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function asString(value) {
+  if (value == null) return "";
+  return String(value);
+}
+function asStringList(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => asString(item)).filter(Boolean);
+  }
+  if (value == null || value === "") return [];
+  return [asString(value)];
+}
+function asDrilldownItems(value) {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((item) => {
+    if (item == null) return [];
+    if (typeof item === "string") return [{ text: item }];
+    if (typeof item === "object") {
+      const record = item;
+      const text = asString(record.text ?? record.label ?? "");
+      if (!text) return [];
+      const img = record.img ?? record.image;
+      return [{ text, ...typeof img === "string" ? { img } : {} }];
+    }
+    return [{ text: asString(item) }];
+  });
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function simpleMarkdownToHtml(source) {
+  const escaped = escapeHtml(source);
+  return escaped.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/\n/g, "<br />");
+}
+function TextCell({ value }) {
+  return asString(value);
+}
+function NumberCell({ value }) {
+  if (value == null || value === "") return null;
+  return asString(value);
+}
+function BooleanCell({ value, update, cellProps }) {
+  const checked = Boolean(value);
+  const readonly = Boolean(cellProps?.readonly);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      type: "checkbox",
+      className: "data-table-cell-boolean",
+      checked,
+      disabled: readonly,
+      "aria-checked": checked,
+      onChange: (event) => {
+        if (readonly) return;
+        update(event.target.checked);
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+      },
+      onMouseDown: (event) => {
+        event.stopPropagation();
+      }
+    }
+  );
+}
+function sanitizeUriHref(raw) {
+  const href = raw.trim();
+  if (!href) return null;
+  if (href.startsWith("/") || href.startsWith("#") || href.startsWith("?") || href.startsWith("./") || href.startsWith("../")) {
+    return href;
+  }
+  try {
+    const parsed = new URL(href);
+    const protocol = parsed.protocol.toLowerCase();
+    if (protocol === "http:" || protocol === "https:" || protocol === "mailto:") {
+      return href;
+    }
+    return null;
+  } catch {
+    if (/^[a-z][a-z0-9+.-]*:/i.test(href)) return null;
+    return href;
+  }
+}
+function UriCell({ value }) {
+  const raw = asString(value);
+  if (!raw) return null;
+  const href = sanitizeUriHref(raw);
+  if (!href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-uri", children: raw });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      className: "data-table-cell-uri",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (event) => event.stopPropagation(),
+      onMouseDown: (event) => event.stopPropagation(),
+      children: raw
+    }
+  );
+}
+function ImageCell({ value }) {
+  const urls = asStringList(value);
+  if (urls.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-image", children: urls.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      src: url,
+      alt: "",
+      className: "data-table-cell-image-item"
+    },
+    `${index}:${url}`
+  )) });
+}
+function BubbleCell({ value }) {
+  const items = asStringList(value);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-bubble", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-bubble-item", children: item }, `${index}:${item}`)) });
+}
+function MarkdownCell({ value }) {
+  const source = asString(value);
+  if (!source) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "data-table-cell-markdown",
+      dangerouslySetInnerHTML: { __html: simpleMarkdownToHtml(source) }
+    }
+  );
+}
+function DrilldownCell({ value }) {
+  const items = asDrilldownItems(value);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-drilldown", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: "data-table-cell-drilldown-item",
+      children: [
+        item.img ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: item.img,
+            alt: "",
+            className: "data-table-cell-drilldown-image"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-drilldown-text", children: item.text })
+      ]
+    },
+    `${index}:${item.text}:${item.img ?? ""}`
+  )) });
+}
+function LoadingCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-loading", "aria-busy": "true" });
+}
+function ProtectedCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-protected", "aria-label": "protected", children: "****" });
+}
+function RowIdCell({ value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-row-id", children: asString(value) });
+}
+var BUILTIN_RENDER_MAP = {
+  text: TextCell,
+  number: NumberCell,
+  boolean: BooleanCell,
+  uri: UriCell,
+  image: ImageCell,
+  bubble: BubbleCell,
+  markdown: MarkdownCell,
+  drilldown: DrilldownCell,
+  loading: LoadingCell,
+  protected: ProtectedCell,
+  "row-id": RowIdCell
+};
+var BUILTIN_CELL_RENDERERS = Object.keys(BUILTIN_RENDER_MAP).map((kind) => ({
+  kind,
+  render: BUILTIN_RENDER_MAP[kind]
+}));
+
+// src/components/ui/table/features/cell-render/registry.ts
+function createCellRendererRegistry(customRenderers = []) {
+  const registry = /* @__PURE__ */ new Map();
+  for (const renderer of BUILTIN_CELL_RENDERERS) {
+    registry.set(renderer.kind, renderer);
+  }
+  for (const renderer of customRenderers) {
+    registry.set(renderer.kind, renderer);
+  }
+  return registry;
+}
+function resolveCellRenderer(registry, kind, ctx) {
+  if (!kind) return void 0;
+  const renderer = registry.get(kind);
+  if (!renderer) return void 0;
+  if (renderer.isMatch && !renderer.isMatch(ctx)) {
+    return void 0;
+  }
+  return renderer;
+}
+function formatDefaultCellValue(value) {
+  if (value == null) return null;
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "bigint") return value.toString();
+  return String(value);
+}
+
+// src/components/ui/table/features/cell-render/withCellUpdate.ts
+function withCellUpdate(context, commitValue) {
+  return {
+    ...context,
+    update: (next) => {
+      commitValue(context.row.id, context.column.id, next);
+    }
+  };
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 var import_react2 = require("react");
 
@@ -562,9 +826,34 @@ function hasCellSelectionEdges(style) {
 }
 
 // src/components/ui/table/features/cell-selection/copyData.ts
+function formatPrimitive(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  return "";
+}
+function formatObjectValue(value) {
+  const text = value.text ?? value.label ?? value.name ?? value.title;
+  if (text != null && text !== "") {
+    return formatCellValue(text);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "";
+  }
+}
 function formatCellValue(value) {
   if (value === null || value === void 0) return "";
-  return String(value);
+  if (Array.isArray(value)) {
+    return value.map((item) => formatCellValue(item)).filter((item) => item.length > 0).join(", ");
+  }
+  if (typeof value === "object") {
+    return formatObjectValue(value);
+  }
+  return formatPrimitive(value);
 }
 function getNestedValue(row, path) {
   if (!path.includes(".")) return row[path];
@@ -1188,10 +1477,40 @@ function getColumnFreezeStyle(offset, options) {
   return {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
-    zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
+    zIndex: zBase + offset.stack
+  };
+}
+function resolveHeaderFreezeOffset(column, freezeOffsets) {
+  const direct = freezeOffsets.get(column.id);
+  if (direct) return direct;
+  const leaves = typeof column.getLeafColumns === "function" ? column.getLeafColumns() : column.columns && column.columns.length > 0 ? flattenHeaderLeaves(column) : [];
+  if (leaves.length === 0) return void 0;
+  const leafOffsets = [];
+  for (const leaf of leaves) {
+    const offset2 = freezeOffsets.get(leaf.id);
+    if (!offset2) return void 0;
+    leafOffsets.push(offset2);
+  }
+  const side = leafOffsets[0]?.side;
+  if (!side || leafOffsets.some((offset2) => offset2.side !== side)) {
+    return void 0;
+  }
+  const offset = Math.min(...leafOffsets.map((item) => item.offset));
+  const leftmost = leafOffsets[0];
+  const rightmost = leafOffsets[leafOffsets.length - 1];
+  return {
+    side,
+    offset,
+    edgeLeft: leftmost.edgeLeft,
+    edgeRight: rightmost.edgeRight,
+    isEdge: leftmost.edgeLeft || rightmost.edgeRight,
+    stack: Math.max(...leafOffsets.map((item) => item.stack))
   };
 }
+function flattenHeaderLeaves(column) {
+  if (!column.columns || column.columns.length === 0) return [column];
+  return column.columns.flatMap((child) => flattenHeaderLeaves(child));
+}
 
 // src/components/ui/table/features/inline-search/inlineSearch.ts
 var INLINE_SEARCH_MAX_RESULTS = 1e3;
@@ -1935,6 +2254,7 @@ function useGlideTable(options) {
     onDataChange,
     onCellChange,
     onBatchChange,
+    cellRenderers,
     preserveRowSelection = false,
     toggleField,
     childField,
@@ -2160,6 +2480,26 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
+  const cellRendererRegistry = (0, import_react5.useMemo)(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
+  const commitRenderedCellValue = (0, import_react5.useCallback)(
+    (rowId, columnId, value) => commitCellValue({
+      data: tableData,
+      rows,
+      rowId,
+      columnId,
+      value,
+      onCellChange,
+      onDataChange
+    }),
+    [onCellChange, onDataChange, rows, tableData]
+  );
+  const getCellContext = (0, import_react5.useCallback)(
+    (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
+    [commitRenderedCellValue]
+  );
   const handleCellMouseDownWithCommit = (0, import_react5.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2396,6 +2736,10 @@ function useGlideTable(options) {
         onCommitEdit: commitEdit,
         onCancelEdit: cancelEdit
       },
+      cellRender: {
+        registry: cellRendererRegistry,
+        commitValue: commitRenderedCellValue
+      },
       expand: {
         enableExpand,
         toggleField,
@@ -2442,6 +2786,8 @@ function useGlideTable(options) {
     startEdit,
     commitEdit,
     cancelEdit,
+    cellRendererRegistry,
+    commitRenderedCellValue,
     enableExpand,
     toggleField,
     expandedRows,
@@ -2486,6 +2832,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,
@@ -2506,6 +2853,54 @@ function useGlideTable(options) {
   };
 }
 
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+var import_react7 = require("react");
+
+// src/components/ui/table/DataTableContext.tsx
+var import_react6 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DataTableContext = (0, import_react6.createContext)(null);
+function useDataTableRowContext() {
+  const context = (0, import_react6.use)(DataTableContext);
+  if (!context) {
+    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
+  }
+  return context;
+}
+
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+function ResolvedTableCell({
+  info
+}) {
+  const { cellRender } = useDataTableRowContext();
+  const { row, column, getValue } = info;
+  const meta = column.columnDef.meta;
+  const value = getValue();
+  const columnId = column.id;
+  const update = (0, import_react7.useCallback)(
+    (next) => {
+      cellRender.commitValue(row.id, columnId, next);
+    },
+    [cellRender, columnId, row.id]
+  );
+  const ctx = {
+    value,
+    row,
+    index: row.index,
+    columnId,
+    cellProps: meta?.cellProps,
+    update
+  };
+  if (meta?.cellRender) {
+    return meta.cellRender(ctx);
+  }
+  const renderer = resolveCellRenderer(cellRender.registry, meta?.kind, ctx);
+  if (renderer) {
+    return renderer.render(ctx);
+  }
+  return formatDefaultCellValue(value);
+}
+
 // src/components/ui/table/features/column-resize/columnResize.ts
 function getColumnSizeStyle(size, options) {
   const { force = false, lockMax = false } = options ?? {};
@@ -2520,6 +2915,7 @@ function getColumnSizeStyle(size, options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD,
@@ -2527,6 +2923,7 @@ function getColumnSizeStyle(size, options) {
   DEFAULT_TREE_PARENT_ID_FIELD,
   DEFAULT_TREE_QTY_FIELD,
   INLINE_SEARCH_MAX_RESULTS,
+  ResolvedTableCell,
   applyCellEdit,
   applyFillData,
   applySelectionUpdater,
@@ -2545,9 +2942,13 @@ function getColumnSizeStyle(size, options) {
   collectFillChanges,
   collectRowSpanColumns,
   collectSearchMatchesInRange,
+  commitCellValue,
+  createCellRendererRegistry,
   createSearchRegex,
   escapeSearchRegex,
   flattenSubtreeRows,
+  formatCellValue,
+  formatDefaultCellValue,
   formatSearchResultLabel,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
@@ -2569,8 +2970,10 @@ function getColumnSizeStyle(size, options) {
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
   previousSearchIndex,
+  resolveCellRenderer,
   resolveColumnFreezeSide,
   resolveDataTableLabels,
+  resolveHeaderFreezeOffset,
   resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,
@@ -2583,5 +2986,6 @@ function getColumnSizeStyle(size, options) {
   useConvertTreeData,
   useGlideTable,
   useInlineSearch,
+  withCellUpdate,
   writeSelectionToClipboard
 });