@particle-academy/fancy-sheets 0.3.0 → 0.3.1

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

@@ -1599,7 +1599,15 @@ function ColumnResizeHandle({ colIndex }) {
 }
 ColumnResizeHandle.displayName = "ColumnResizeHandle";
 function ColumnHeaders() {
-  const { columnCount, rowHeight, getColumnWidth } = useSpreadsheet();
+  const { columnCount, rowCount, rowHeight, getColumnWidth, selectRange } = useSpreadsheet();
+  const handleColumnClick = useCallback(
+    (colIdx) => {
+      const start = toAddress(0, colIdx);
+      const end = toAddress(rowCount - 1, colIdx);
+      selectRange(start, end);
+    },
+    [rowCount, selectRange]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1617,8 +1625,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: () => handleColumnClick(i),
             children: [
               columnToLetter(i),
               /* @__PURE__ */ jsx(ColumnResizeHandle, { colIndex: i })
@@ -1632,13 +1641,19 @@ function ColumnHeaders() {
 }
 ColumnHeaders.displayName = "ColumnHeaders";
 function RowHeader({ rowIndex }) {
-  const { rowHeight } = useSpreadsheet();
+  const { rowHeight, columnCount, selectRange } = useSpreadsheet();
+  const handleClick = useCallback(() => {
+    const start = toAddress(rowIndex, 0);
+    const end = toAddress(rowIndex, columnCount - 1);
+    selectRange(start, end);
+  }, [rowIndex, columnCount, selectRange]);
   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
     }
   );
@@ -2045,6 +2060,8 @@ function DefaultToolbar() {
     confirmEdit,
     startEdit,
     setCellFormat,
+    setFrozenRows,
+    setFrozenCols,
     undo,
     redo,
     canUndo,
@@ -2116,7 +2133,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 }),