@particle-academy/fancy-sheets 0.3.0 → 0.4.0

package/dist/index.d.cts

@@ -110,6 +110,7 @@ interface SpreadsheetContextValue {
     setSelection: (cell: string) => void;
     extendSelection: (cell: string) => void;
     addSelection: (cell: string) => void;
+    selectRange: (start: string, end: string) => void;
     navigate: (direction: "up" | "down" | "left" | "right", extend?: boolean) => void;
     startEdit: (value?: string) => void;
     updateEdit: (value: string) => void;

package/dist/index.d.ts

@@ -110,6 +110,7 @@ interface SpreadsheetContextValue {
     setSelection: (cell: string) => void;
     extendSelection: (cell: string) => void;
     addSelection: (cell: string) => void;
+    selectRange: (start: string, end: string) => void;
     navigate: (direction: "up" | "down" | "left" | "right", extend?: boolean) => void;
     startEdit: (value?: string) => void;
     updateEdit: (value: string) => void;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, memo, useCallback, useContext, useRef, useEffect, useMemo, useState, useReducer } from 'react';
-import { cn } from '@particle-academy/react-fancy';
+import { cn, ContextMenu } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/Spreadsheet/Spreadsheet.tsx
@@ -1599,7 +1599,20 @@ function ColumnResizeHandle({ colIndex }) {
 }
 ColumnResizeHandle.displayName = "ColumnResizeHandle";
 function ColumnHeaders() {
-  const { columnCount, rowHeight, getColumnWidth } = useSpreadsheet();
+  const { columnCount, rowCount, rowHeight, getColumnWidth, selection, selectRange } = useSpreadsheet();
+  const handleColumnClick = useCallback(
+    (colIdx, e) => {
+      if (e.shiftKey) {
+        const activeCol = parseAddress(selection.activeCell).col;
+        const minCol = Math.min(activeCol, colIdx);
+        const maxCol = Math.max(activeCol, colIdx);
+        selectRange(toAddress(0, minCol), toAddress(rowCount - 1, maxCol));
+      } else {
+        selectRange(toAddress(0, colIdx), toAddress(rowCount - 1, colIdx));
+      }
+    },
+    [rowCount, selectRange, selection.activeCell]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1617,8 +1630,9 @@ function ColumnHeaders() {
         Array.from({ length: columnCount }, (_, i) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "relative flex shrink-0 items-center justify-center border-r border-zinc-300 text-[11px] font-medium text-zinc-500 select-none dark:border-zinc-600 dark:text-zinc-400",
+            className: "relative flex shrink-0 cursor-pointer items-center justify-center border-r border-zinc-300 text-[11px] font-medium text-zinc-500 select-none hover:bg-zinc-200 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-700",
             style: { width: getColumnWidth(i), minWidth: getColumnWidth(i) },
+            onClick: (e) => handleColumnClick(i, e),
             children: [
               columnToLetter(i),
               /* @__PURE__ */ jsx(ColumnResizeHandle, { colIndex: i })
@@ -1632,13 +1646,27 @@ function ColumnHeaders() {
 }
 ColumnHeaders.displayName = "ColumnHeaders";
 function RowHeader({ rowIndex }) {
-  const { rowHeight } = useSpreadsheet();
+  const { rowHeight, columnCount, selection, selectRange, extendSelection } = useSpreadsheet();
+  const handleClick = useCallback(
+    (e) => {
+      if (e.shiftKey) {
+        const activeRow = parseAddress(selection.activeCell).row;
+        const minRow = Math.min(activeRow, rowIndex);
+        const maxRow = Math.max(activeRow, rowIndex);
+        selectRange(toAddress(minRow, 0), toAddress(maxRow, columnCount - 1));
+      } else {
+        selectRange(toAddress(rowIndex, 0), toAddress(rowIndex, columnCount - 1));
+      }
+    },
+    [rowIndex, columnCount, selectRange, selection.activeCell]
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-fancy-sheets-row-header": "",
-      className: "flex shrink-0 items-center justify-center border-r border-b border-zinc-300 bg-zinc-100 text-[11px] font-medium text-zinc-500 select-none dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
+      className: "flex shrink-0 cursor-pointer items-center justify-center border-r border-b border-zinc-300 bg-zinc-100 text-[11px] font-medium text-zinc-500 select-none hover:bg-zinc-200 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700",
       style: { width: 48, minWidth: 48, height: rowHeight },
+      onClick: handleClick,
       children: rowIndex + 1
     }
   );
@@ -1737,9 +1765,9 @@ var Cell = memo(function Cell2({ address, row, col }) {
       "data-active": isActive || void 0,
       role: "gridcell",
       className: cn(
-        "relative flex items-center truncate border-r border-b border-zinc-200 px-1.5 text-[13px] dark:border-zinc-700",
+        "relative flex items-center truncate border-r border-b border-zinc-200 bg-white px-1.5 text-[13px] dark:border-zinc-700 dark:bg-zinc-900",
         isActive && "ring-2 ring-inset ring-blue-500",
-        isSelected && !isActive && "bg-blue-500/10"
+        isSelected && !isActive && "bg-blue-50 dark:bg-blue-950/40"
       ),
       style: { width, minWidth: width, height: rowHeight, ...formatStyle },
       onMouseDown: handleMouseDown,
@@ -1882,6 +1910,8 @@ function SpreadsheetGrid({ className }) {
     confirmEdit,
     cancelEdit,
     setCellValue,
+    setFrozenRows,
+    setFrozenCols,
     undo,
     redo
   } = useSpreadsheet();
@@ -1971,66 +2001,114 @@ function SpreadsheetGrid({ className }) {
     const top = row * rowHeight;
     return { left, top };
   })() : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      "data-fancy-sheets-grid": "",
-      className: cn("relative min-h-0 flex-1 overflow-auto bg-white focus:outline-none dark:bg-zinc-900", className),
-      tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsx(ColumnHeaders, {}) }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          Array.from({ length: rowCount }, (_, rowIdx) => {
-            const isFrozenRow = rowIdx < activeSheet.frozenRows;
-            return /* @__PURE__ */ jsxs(
+  const handleCopy = useCallback(() => {
+    const range = selection.ranges[0];
+    if (range) {
+      const tsv = cellsToTSV(activeSheet.cells, range);
+      navigator.clipboard.writeText(tsv);
+    }
+  }, [selection, activeSheet]);
+  const handlePaste = useCallback(() => {
+    navigator.clipboard.readText().then((text) => {
+      if (!text) return;
+      const { values } = tsvToCells(text);
+      const { row: startRow, col: startCol } = parseAddress(selection.activeCell);
+      for (let r = 0; r < values.length; r++) {
+        for (let c = 0; c < values[r].length; c++) {
+          setCellValue(toAddress(startRow + r, startCol + c), values[r][c]);
+        }
+      }
+    });
+  }, [selection, setCellValue]);
+  const handleClearSelection = useCallback(() => {
+    const range = selection.ranges[0];
+    if (!range) return;
+    const { start, end } = range;
+    const s = parseAddress(start);
+    const e = parseAddress(end);
+    const minR = Math.min(s.row, e.row), maxR = Math.max(s.row, e.row);
+    const minC = Math.min(s.col, e.col), maxC = Math.max(s.col, e.col);
+    for (let r = minR; r <= maxR; r++) {
+      for (let c = minC; c <= maxC; c++) {
+        setCellValue(toAddress(r, c), "");
+      }
+    }
+  }, [selection, setCellValue]);
+  return /* @__PURE__ */ jsxs(ContextMenu, { children: [
+    /* @__PURE__ */ jsx(ContextMenu.Trigger, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        "data-fancy-sheets-grid": "",
+        className: cn("relative h-full overflow-auto bg-white focus:outline-none dark:bg-zinc-900", className),
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsx(ColumnHeaders, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            Array.from({ length: rowCount }, (_, rowIdx) => {
+              const isFrozenRow = rowIdx < activeSheet.frozenRows;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex",
+                  style: isFrozenRow ? {
+                    position: "sticky",
+                    top: rowHeight + rowIdx * rowHeight,
+                    zIndex: 8
+                  } : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "sticky left-0 z-[5]", children: /* @__PURE__ */ jsx(RowHeader, { rowIndex: rowIdx }) }),
+                    Array.from({ length: columnCount }, (_2, colIdx) => {
+                      const addr = toAddress(rowIdx, colIdx);
+                      const isFrozenCol = colIdx < activeSheet.frozenCols;
+                      return /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: isFrozenCol ? {
+                            position: "sticky",
+                            left: 48 + Array.from({ length: colIdx }, (_3, c) => getColumnWidth(c)).reduce((a, b) => a + b, 0),
+                            zIndex: isFrozenRow ? 9 : 6
+                          } : void 0,
+                          children: /* @__PURE__ */ jsx(Cell, { address: addr, row: rowIdx, col: colIdx })
+                        },
+                        addr
+                      );
+                    })
+                  ]
+                },
+                rowIdx
+              );
+            }),
+            /* @__PURE__ */ jsx(SelectionOverlay, {}),
+            editorPosition && /* @__PURE__ */ jsx(
               "div",
               {
-                className: "flex",
-                style: isFrozenRow ? {
-                  position: "sticky",
-                  top: rowHeight + rowIdx * rowHeight,
-                  zIndex: 8,
-                  backgroundColor: "inherit"
-                } : void 0,
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "sticky left-0 z-[5]", children: /* @__PURE__ */ jsx(RowHeader, { rowIndex: rowIdx }) }),
-                  Array.from({ length: columnCount }, (_2, colIdx) => {
-                    const addr = toAddress(rowIdx, colIdx);
-                    const isFrozenCol = colIdx < activeSheet.frozenCols;
-                    return /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: isFrozenCol ? {
-                          position: "sticky",
-                          left: 48 + Array.from({ length: colIdx }, (_3, c) => getColumnWidth(c)).reduce((a, b) => a + b, 0),
-                          zIndex: isFrozenRow ? 9 : 6,
-                          backgroundColor: "inherit"
-                        } : void 0,
-                        children: /* @__PURE__ */ jsx(Cell, { address: addr, row: rowIdx, col: colIdx })
-                      },
-                      addr
-                    );
-                  })
-                ]
-              },
-              rowIdx
-            );
-          }),
-          /* @__PURE__ */ jsx(SelectionOverlay, {}),
-          editorPosition && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute z-20",
-              style: { left: editorPosition.left, top: editorPosition.top },
-              children: /* @__PURE__ */ jsx(CellEditor, {})
-            }
-          )
-        ] })
-      ]
-    }
-  );
+                className: "absolute z-20",
+                style: { left: editorPosition.left, top: editorPosition.top },
+                children: /* @__PURE__ */ jsx(CellEditor, {})
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(ContextMenu.Content, { children: [
+      /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: handleCopy, children: "Copy" }),
+      /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: handlePaste, disabled: readOnly, children: "Paste" }),
+      /* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+      /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: handleClearSelection, disabled: readOnly, children: "Clear cells" }),
+      /* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+      /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => {
+        const row = parseAddress(selection.activeCell).row;
+        setFrozenRows(activeSheet.frozenRows > 0 ? 0 : row);
+      }, disabled: readOnly, children: activeSheet.frozenRows > 0 ? "Unfreeze rows" : "Freeze rows above" }),
+      /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => {
+        const col = parseAddress(selection.activeCell).col;
+        setFrozenCols(activeSheet.frozenCols > 0 ? 0 : col);
+      }, disabled: readOnly, children: activeSheet.frozenCols > 0 ? "Unfreeze columns" : "Freeze columns left" })
+    ] })
+  ] });
 }
 SpreadsheetGrid.displayName = "SpreadsheetGrid";
 var btnClass = "inline-flex items-center justify-center rounded px-2 py-1 text-[12px] font-medium text-zinc-600 transition-colors hover:bg-zinc-100 disabled:opacity-40 dark:text-zinc-300 dark:hover:bg-zinc-800";
@@ -2045,6 +2123,8 @@ function DefaultToolbar() {
     confirmEdit,
     startEdit,
     setCellFormat,
+    setFrozenRows,
+    setFrozenCols,
     undo,
     redo,
     canUndo,
@@ -2116,7 +2196,57 @@ function DefaultToolbar() {
           ] })
         },
         align
-      ))
+      )),
+      /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cn(btnClass, activeSheet.frozenRows > 0 && activeBtnClass),
+          onClick: () => {
+            if (activeSheet.frozenRows > 0) {
+              setFrozenRows(0);
+            } else {
+              const row = selection.activeCell.match(/\d+/);
+              setFrozenRows(row ? parseInt(row[0], 10) - 1 || 1 : 1);
+            }
+          },
+          disabled: readOnly,
+          title: activeSheet.frozenRows > 0 ? `Unfreeze rows (${activeSheet.frozenRows} frozen)` : "Freeze rows above current cell",
+          children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "4", x2: "21", y2: "4" }),
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "14", x2: "21", y2: "14", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "19", x2: "21", y2: "19", strokeDasharray: "3 3" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cn(btnClass, activeSheet.frozenCols > 0 && activeBtnClass),
+          onClick: () => {
+            if (activeSheet.frozenCols > 0) {
+              setFrozenCols(0);
+            } else {
+              const colMatch = selection.activeCell.match(/^([A-Z]+)/);
+              if (colMatch) {
+                const col = colMatch[1].split("").reduce((acc, ch) => acc * 26 + ch.charCodeAt(0) - 64, 0) - 1;
+                setFrozenCols(col || 1);
+              } else {
+                setFrozenCols(1);
+              }
+            }
+          },
+          disabled: readOnly,
+          title: activeSheet.frozenCols > 0 ? `Unfreeze columns (${activeSheet.frozenCols} frozen)` : "Freeze columns left of current cell",
+          children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
+            /* @__PURE__ */ jsx("line", { x1: "4", y1: "3", x2: "4", y2: "21" }),
+            /* @__PURE__ */ jsx("line", { x1: "14", y1: "3", x2: "14", y2: "21", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx("line", { x1: "19", y1: "3", x2: "19", y2: "21", strokeDasharray: "3 3" })
+          ] })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { "data-fancy-sheets-formula-bar": "", className: "flex items-center gap-2 border-b border-zinc-200 px-2 py-1 dark:border-zinc-700", children: [
       /* @__PURE__ */ jsx("span", { className: "w-12 shrink-0 text-center text-[11px] font-medium text-zinc-500 dark:text-zinc-400", children: selection.activeCell }),