@geomak/ui 7.14.0 → 7.15.0

package/dist/index.cjs

@@ -6537,6 +6537,7 @@ function DataGrid({
   onInsertRow,
   onDeleteRow,
   onInsertColumn,
+  onHeaderEdit,
   className = "",
   style,
   emptyState = "No data"
@@ -6549,6 +6550,8 @@ function DataGrid({
   const [ctxTarget, setCtxTarget] = React36.useState(null);
   const [editing, setEditing] = React36.useState(null);
   const [draft, setDraft] = React36.useState("");
+  const [editingHeader, setEditingHeader] = React36.useState(null);
+  const [headerDraft, setHeaderDraft] = React36.useState("");
   const [internalSort, setInternalSort] = React36.useState(null);
   const sort = sortProp !== void 0 ? sortProp : internalSort;
   const gutter = rowNumbers ? GUTTER : 0;
@@ -6625,6 +6628,17 @@ function DataGrid({
     setDraft(displayValue(rows[rowIndexForDisp(disp)]?.[c.key] ?? ""));
     setEditing({ disp, col });
   };
+  const startHeaderEdit = (col) => {
+    if (!onHeaderEdit) return;
+    const c = cols[col];
+    setHeaderDraft(typeof c.label === "string" ? c.label : String(c.key));
+    setEditingHeader(col);
+  };
+  const commitHeader = () => {
+    if (editingHeader == null) return;
+    onHeaderEdit?.(editingHeader, headerDraft);
+    setEditingHeader(null);
+  };
   const cellText = (sel) => displayValue(rows[rowIndexForDisp(sel.disp)]?.[cols[sel.col].key] ?? "");
   const copyCell = React36.useCallback(async () => {
     if (!selected) return;
@@ -6652,7 +6666,8 @@ function DataGrid({
     if (ctxTarget?.kind === "header") {
       const ci = ctxTarget.col;
       return [
-        { key: "left", value: "Add column to the left", disabled: !onInsertColumn, onClick: () => onInsertColumn?.(ci) },
+        { key: "rename", value: "Rename column", disabled: !onHeaderEdit, onClick: () => startHeaderEdit(ci) },
+        { key: "left", value: "Add column to the left", disabled: !onInsertColumn, separatorBefore: true, onClick: () => onInsertColumn?.(ci) },
         { key: "right", value: "Add column to the right", disabled: !onInsertColumn, onClick: () => onInsertColumn?.(ci + 1) }
       ];
     }
@@ -6670,7 +6685,7 @@ function DataGrid({
       { key: "cut", value: "Cut", disabled: !editable, onClick: () => void cutCell() },
       { key: "paste", value: "Paste", disabled: !editable, onClick: () => void pasteCell() }
     ];
-  }, [ctxTarget, rows.length, editable, onInsertRow, onDeleteRow, onInsertColumn, copyCell, cutCell, pasteCell, order]);
+  }, [ctxTarget, rows.length, editable, onInsertRow, onDeleteRow, onInsertColumn, onHeaderEdit, copyCell, cutCell, pasteCell, order]);
   const rowHighlighted = (disp) => hoveredRow === disp || selected?.disp === disp;
   const gridInner = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: gutter + totalWidth + END_PAD, height: headerHeight + totalHeight + END_PAD }, children: [
     rowNumbers && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6684,16 +6699,20 @@ function DataGrid({
       const c = cols[ci];
       const sortDir = sort?.key === c.key ? sort.dir : null;
       const canSort = colSortable(c);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      const renamable = !!onHeaderEdit;
+      const isEditingHeader = editingHeader === ci;
+      return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           role: "columnheader",
           "aria-sort": sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
-          onClick: canSort ? () => toggleSort(c.key) : void 0,
+          onClick: canSort && !renamable ? () => toggleSort(c.key) : void 0,
+          onDoubleClick: renamable ? () => startHeaderEdit(ci) : void 0,
           onContextMenu: contextMenu ? () => setCtxTarget({ kind: "header", col: ci }) : void 0,
           className: cx(
             "flex items-center gap-1 border-b border-r border-border bg-surface px-3 font-medium text-foreground-secondary",
-            canSort && "cursor-pointer select-none hover:text-foreground"
+            canSort && !renamable && "cursor-pointer select-none hover:text-foreground",
+            renamable && "cursor-default select-none"
           ),
           style: {
             position: "absolute",
@@ -6704,10 +6723,27 @@ function DataGrid({
             zIndex: 2,
             justifyContent: c.align === "right" ? "flex-end" : c.align === "center" ? "center" : "flex-start"
           },
-          children: [
+          children: isEditingHeader ? /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              autoFocus: true,
+              value: headerDraft,
+              onChange: (e) => setHeaderDraft(e.target.value),
+              onBlur: commitHeader,
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") commitHeader();
+                else if (e.key === "Escape") setEditingHeader(null);
+              },
+              className: "h-full w-full bg-transparent font-medium text-foreground outline-none"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: c.label ?? c.key }),
-            canSort && /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir })
-          ]
+            canSort && (renamable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", title: "Sort", onClick: (e) => {
+              e.stopPropagation();
+              toggleSort(c.key);
+            }, className: "flex-shrink-0 rounded hover:text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir }) }) : /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir }))
+          ] })
         },
         `h-${c.key}`
       );
@@ -6944,12 +6980,21 @@ function Spreadsheet({
   const sheet = sheets?.[active];
   const columns = React36.useMemo(() => sheet ? toColumns(sheet.columns) : [], [sheet]);
   const plainRows = React36.useMemo(() => sheet ? toPlainRows(sheet, columns) : [], [sheet, columns]);
+  const displayColumns = React36.useMemo(
+    () => [...columns, ...makeColumns(columns, Math.max(0, emptyCols)).map((c) => ({ ...c, sortable: false }))],
+    [columns, emptyCols]
+  );
+  const isSlackKey = (key) => !columns.some((c) => c.key === key);
   const handleCellEdit = React36.useCallback(({ row, column, value }) => {
     let coerced = value;
     setSheets((prev) => {
       if (!prev) return prev;
-      const next = prev.map((s, i) => i === active ? { ...s, rows: s.rows.map((r) => ({ ...r })) } : s);
+      const next = prev.map((s, i) => i === active ? { ...s, columns: toColumns(s.columns), rows: s.rows.map((r) => ({ ...r })) } : s);
       const target = next[active];
+      if (isSlackKey(column)) {
+        const j = displayColumns.findIndex((c) => c.key === column);
+        if (j >= 0) target.columns = displayColumns.slice(0, j + 1).map((c) => ({ key: c.key, label: c.label }));
+      }
       while (target.rows.length <= row) target.rows.push({});
       const existing = target.rows[row]?.[column];
       const prevValue = cellValue(existing);
@@ -6963,7 +7008,22 @@ function Spreadsheet({
       return next;
     });
     onCellEdit?.({ sheet: sheets?.[active]?.name ?? "", row, column, value: coerced });
-  }, [active, onCellEdit, onChange, sheets]);
+  }, [active, onCellEdit, onChange, sheets, displayColumns, columns]);
+  const renameColumn = React36.useCallback((index, label) => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => i === active ? { ...s, columns: toColumns(s.columns) } : s);
+      const target = next[active];
+      let tcols = target.columns;
+      if (index >= tcols.length) {
+        tcols = displayColumns.slice(0, index + 1).map((c) => ({ key: c.key, label: c.label }));
+        target.columns = tcols;
+      }
+      if (tcols[index]) tcols[index] = { ...tcols[index], label };
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange, displayColumns]);
   const addSheet = React36.useCallback(() => {
     setSheets((prev) => {
       const list = prev ?? [];
@@ -7181,17 +7241,17 @@ function Spreadsheet({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
       DataGrid,
       {
-        columns,
+        columns: displayColumns,
         rows: plainRows,
         editable,
         sortable,
         virtualize,
         trailingRows: emptyRows,
-        trailingCols: emptyCols,
         contextMenu: true,
         onInsertRow: editable ? insertRow : void 0,
         onDeleteRow: editable ? deleteRow : void 0,
         onInsertColumn: editable ? insertColumn : void 0,
+        onHeaderEdit: editable ? renameColumn : void 0,
         onCellEdit: handleCellEdit,
         height: "100%",
         className: "!rounded-none !border-0"