@particle-academy/fancy-sheets 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -1601,9 +1601,10 @@ function ColumnResizeHandle({ colIndex }) {
 }
 ColumnResizeHandle.displayName = "ColumnResizeHandle";
 function ColumnHeaders() {
-  const { columnCount, rowCount, rowHeight, getColumnWidth, selection, selectRange } = useSpreadsheet();
-  const handleColumnClick = react.useCallback(
+  const { columnCount, rowCount, rowHeight, getColumnWidth, selection, selectRange, _isDragging, isCellSelected } = useSpreadsheet();
+  const handleColumnMouseDown = react.useCallback(
     (colIdx, e) => {
+      if (e.button !== 0) return;
       if (e.shiftKey) {
         const activeCol = parseAddress(selection.activeCell).col;
         const minCol = Math.min(activeCol, colIdx);
@@ -1612,9 +1613,24 @@ function ColumnHeaders() {
       } else {
         selectRange(toAddress(0, colIdx), toAddress(rowCount - 1, colIdx));
       }
+      _isDragging.current = true;
     },
-    [rowCount, selectRange, selection.activeCell]
+    [rowCount, selectRange, selection.activeCell, _isDragging]
   );
+  const handleColumnMouseEnter = react.useCallback(
+    (colIdx) => {
+      if (_isDragging.current) {
+        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));
+      }
+    },
+    [rowCount, selection.activeCell, selectRange, _isDragging]
+  );
+  const handleMouseUp = react.useCallback(() => {
+    _isDragging.current = false;
+  }, [_isDragging]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1629,28 +1645,38 @@ function ColumnHeaders() {
             style: { width: 48, minWidth: 48 }
           }
         ),
-        Array.from({ length: columnCount }, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            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__ */ jsxRuntime.jsx(ColumnResizeHandle, { colIndex: i })
-            ]
-          },
-          i
-        ))
+        Array.from({ length: columnCount }, (_, i) => {
+          const isColSelected = isCellSelected(toAddress(0, i));
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: reactFancy.cn(
+                "relative flex shrink-0 cursor-pointer items-center justify-center border-r border-zinc-300 text-[11px] font-medium select-none hover:bg-zinc-200 dark:border-zinc-600 dark:hover:bg-zinc-700",
+                isColSelected ? "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300" : "text-zinc-500 dark:text-zinc-400"
+              ),
+              style: { width: getColumnWidth(i), minWidth: getColumnWidth(i) },
+              onMouseDown: (e) => handleColumnMouseDown(i, e),
+              onMouseEnter: () => handleColumnMouseEnter(i),
+              onMouseUp: handleMouseUp,
+              children: [
+                columnToLetter(i),
+                /* @__PURE__ */ jsxRuntime.jsx(ColumnResizeHandle, { colIndex: i })
+              ]
+            },
+            i
+          );
+        })
       ]
     }
   );
 }
 ColumnHeaders.displayName = "ColumnHeaders";
 function RowHeader({ rowIndex }) {
-  const { rowHeight, columnCount, selection, selectRange, extendSelection } = useSpreadsheet();
-  const handleClick = react.useCallback(
+  const { rowHeight, columnCount, selection, selectRange, _isDragging, isCellSelected } = useSpreadsheet();
+  const isRowSelected = isCellSelected(toAddress(rowIndex, 0));
+  const handleMouseDown = react.useCallback(
     (e) => {
+      if (e.button !== 0) return;
       if (e.shiftKey) {
         const activeRow = parseAddress(selection.activeCell).row;
         const minRow = Math.min(activeRow, rowIndex);
@@ -1659,16 +1685,33 @@ function RowHeader({ rowIndex }) {
       } else {
         selectRange(toAddress(rowIndex, 0), toAddress(rowIndex, columnCount - 1));
       }
+      _isDragging.current = true;
     },
-    [rowIndex, columnCount, selectRange, selection.activeCell]
+    [rowIndex, columnCount, selectRange, selection.activeCell, _isDragging]
   );
+  const handleMouseEnter = react.useCallback(() => {
+    if (_isDragging.current) {
+      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));
+    }
+  }, [rowIndex, columnCount, selection.activeCell, selectRange, _isDragging]);
+  const handleMouseUp = react.useCallback(() => {
+    _isDragging.current = false;
+  }, [_isDragging]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-fancy-sheets-row-header": "",
-      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",
+      className: reactFancy.cn(
+        "flex shrink-0 cursor-pointer items-center justify-center border-r border-b border-zinc-300 text-[11px] font-medium select-none hover:bg-zinc-200 dark:border-zinc-600 dark:hover:bg-zinc-700",
+        isRowSelected ? "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300" : "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
+      ),
       style: { width: 48, minWidth: 48, height: rowHeight },
-      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseUp: handleMouseUp,
       children: rowIndex + 1
     }
   );
@@ -1693,21 +1736,24 @@ function serialToDateTimeStr(serial) {
 }
 function isDateFormula(formula) {
   if (!formula) return false;
-  const f = formula.toUpperCase();
-  return /^(TODAY|NOW|DATE|EDATE)\b/.test(f) || /\b(TODAY|NOW|DATE|EDATE)\s*\(/.test(f);
+  const f = formula.trim().toUpperCase();
+  return /^(TODAY|NOW|DATE|EDATE)\s*\(/.test(f);
 }
 function formatCellValue(val, cell) {
   if (val === null || val === void 0) return "";
   const fmt = cell?.format?.displayFormat;
   if (typeof val === "number") {
+    const dec = cell?.format?.decimals;
     if (fmt === "date") return serialToDateStr(val);
     if (fmt === "datetime") return serialToDateTimeStr(val);
-    if (fmt === "percentage") return (val * 100).toFixed(1) + "%";
-    if (fmt === "currency") return "$" + val.toFixed(2);
+    if (fmt === "percentage") return (val * 100).toFixed(dec ?? 1) + "%";
+    if (fmt === "currency") return "$" + val.toFixed(dec ?? 2);
+    if (fmt === "number" && dec !== void 0) return val.toFixed(dec);
     if (fmt === "auto" || !fmt) {
       if (cell?.formula && isDateFormula(cell.formula)) {
         return val % 1 === 0 ? serialToDateStr(val) : serialToDateTimeStr(val);
       }
+      if (dec !== void 0) return val.toFixed(dec);
     }
   }
   if (typeof val === "boolean") return val ? "TRUE" : "FALSE";
@@ -1731,7 +1777,8 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
     rowHeight,
     getColumnWidth,
     isCellSelected,
-    isCellActive
+    isCellActive,
+    _isDragging
   } = useSpreadsheet();
   const cell = activeSheet.cells[address];
   const isActive = isCellActive(address);
@@ -1741,6 +1788,7 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
   const width = getColumnWidth(col);
   const handleMouseDown = react.useCallback(
     (e) => {
+      if (e.button !== 0) return;
       if (e.shiftKey) {
         extendSelection(address);
       } else if (e.ctrlKey || e.metaKey) {
@@ -1748,9 +1796,18 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
       } else {
         setSelection(address);
       }
+      _isDragging.current = true;
     },
-    [address, setSelection, extendSelection, addSelection]
+    [address, setSelection, extendSelection, addSelection, _isDragging]
   );
+  const handleMouseEnter = react.useCallback(() => {
+    if (_isDragging.current) {
+      extendSelection(address);
+    }
+  }, [address, extendSelection, _isDragging]);
+  const handleMouseUp = react.useCallback(() => {
+    _isDragging.current = false;
+  }, [_isDragging]);
   const handleDoubleClick = react.useCallback(() => {
     if (readOnly) return;
     startEdit();
@@ -1767,12 +1824,14 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
       "data-active": isActive || void 0,
       role: "gridcell",
       className: reactFancy.cn(
-        "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",
+        "relative flex items-center truncate border-r border-b border-zinc-200 bg-white px-1.5 text-[13px] select-none dark:border-zinc-700 dark:bg-zinc-900",
         isActive && "ring-2 ring-inset ring-blue-500",
         isSelected && !isActive && "bg-blue-50 dark:bg-blue-950/40"
       ),
       style: { width, minWidth: width, height: rowHeight, ...formatStyle },
       onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseUp: handleMouseUp,
       onDoubleClick: handleDoubleClick,
       children: !isEditing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: displayValue })
     }
@@ -1914,6 +1973,7 @@ function SpreadsheetGrid({ className }) {
     setCellValue,
     setFrozenRows,
     setFrozenCols,
+    extendSelection,
     undo,
     redo
   } = useSpreadsheet();
@@ -2137,6 +2197,8 @@ function DefaultToolbar() {
   const isBold = cell?.format?.bold ?? false;
   const isItalic = cell?.format?.italic ?? false;
   const textAlign = cell?.format?.textAlign ?? "left";
+  const displayFormat = cell?.format?.displayFormat ?? "auto";
+  const decimals = cell?.format?.decimals;
   const selectedAddresses = [selection.activeCell];
   const handleFormulaBarChange = (e) => {
     if (editingCell) {
@@ -2248,6 +2310,52 @@ function DefaultToolbar() {
             /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "3", x2: "19", y2: "21", strokeDasharray: "3 3" })
           ] })
         }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          className: "h-6 rounded border border-zinc-200 bg-transparent px-1 text-[11px] text-zinc-600 outline-none hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-600",
+          value: displayFormat,
+          onChange: (e) => setCellFormat(selectedAddresses, { displayFormat: e.target.value }),
+          disabled: readOnly,
+          title: "Cell format",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "auto", children: "Auto" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "text", children: "Text" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "number", children: "Number" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "currency", children: "Currency ($)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "percentage", children: "Percentage (%)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "date", children: "Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "datetime", children: "Date & Time" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: btnClass,
+          onClick: () => setCellFormat(selectedAddresses, { decimals: Math.max(0, (decimals ?? 0) - 1) }),
+          disabled: readOnly || (decimals ?? 0) <= 0,
+          title: "Decrease decimal places",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: ".0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px]", children: "\u2190" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: btnClass,
+          onClick: () => setCellFormat(selectedAddresses, { decimals: (decimals ?? 0) + 1 }),
+          disabled: readOnly,
+          title: "Increase decimal places",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: ".00" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px]", children: "\u2192" })
+          ]
+        }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.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: [
@@ -2411,6 +2519,7 @@ function SpreadsheetRoot({
     (address) => state.selection.activeCell === address,
     [state.selection.activeCell]
   );
+  const isDraggingRef = react.useRef(false);
   const ctx = react.useMemo(
     () => ({
       workbook: state.workbook,
@@ -2428,7 +2537,8 @@ function SpreadsheetRoot({
       canRedo: state.redoStack.length > 0,
       getColumnWidth,
       isCellSelected,
-      isCellActive
+      isCellActive,
+      _isDragging: isDraggingRef
     }),
     [state, activeSheet, columnCount, rowCount, defaultColumnWidth, rowHeight, readOnly, actions, getColumnWidth, isCellSelected, isCellActive]
   );