@particle-academy/fancy-sheets 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState, useRef, useReducer } from 'react';
+import { createContext, memo, useCallback, useContext, useRef, useEffect, useMemo, useState, useReducer } from 'react';
 import { cn } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -576,9 +576,16 @@ function getRecalculationOrder(graph) {
 }
 
 // src/hooks/use-spreadsheet-store.ts
+function recalculateWorkbook(workbook) {
+  return {
+    ...workbook,
+    sheets: workbook.sheets.map(recalculateSheet)
+  };
+}
 function createInitialState(data) {
+  const workbook = data ?? createEmptyWorkbook();
   return {
-    workbook: data ?? createEmptyWorkbook(),
+    workbook: recalculateWorkbook(workbook),
     selection: { activeCell: "A1", ranges: [{ start: "A1", end: "A1" }] },
     editingCell: null,
     editValue: "",
@@ -1016,18 +1023,22 @@ function CellEditor() {
     confirmEdit,
     cancelEdit,
     getColumnWidth,
-    rowHeight,
-    activeSheet
+    rowHeight
   } = useSpreadsheet();
   const inputRef = useRef(null);
+  const mountedAt = useRef(0);
   useEffect(() => {
     if (editingCell && inputRef.current) {
+      mountedAt.current = Date.now();
       inputRef.current.focus();
-      inputRef.current.select();
     }
   }, [editingCell]);
+  const handleBlur = useCallback(() => {
+    if (Date.now() - mountedAt.current < 100) return;
+    confirmEdit();
+  }, [confirmEdit]);
   if (!editingCell) return null;
-  const { row, col } = parseAddress(editingCell);
+  const { col } = parseAddress(editingCell);
   const width = getColumnWidth(col);
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
@@ -1051,7 +1062,7 @@ function CellEditor() {
       value: editValue,
       onChange: (e) => updateEdit(e.target.value),
       onKeyDown: handleKeyDown,
-      onBlur: confirmEdit
+      onBlur: handleBlur
     }
   );
 }
@@ -1067,7 +1078,7 @@ function SelectionOverlay() {
       for (let c = 0; c < s.col; c++) left += getColumnWidth(c);
       let width = 0;
       for (let c = s.col; c <= e.col; c++) width += getColumnWidth(c);
-      const top = rowHeight + s.row * rowHeight;
+      const top = s.row * rowHeight;
       const height = (e.row - s.row + 1) * rowHeight;
       return { left, top, width, height, isPrimary: i === 0 };
     });
@@ -1223,7 +1234,7 @@ function SpreadsheetGrid({ className }) {
     const { row, col } = parseAddress(editingCell);
     let left = 48;
     for (let c = 0; c < col; c++) left += getColumnWidth(c);
-    const top = rowHeight + row * rowHeight;
+    const top = row * rowHeight;
     return { left, top };
   })() : null;
   return /* @__PURE__ */ jsxs(
@@ -1231,7 +1242,7 @@ function SpreadsheetGrid({ className }) {
     {
       ref: containerRef,
       "data-fancy-sheets-grid": "",
-      className: cn("relative flex-1 overflow-auto bg-white focus:outline-none dark:bg-zinc-900", className),
+      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: [
@@ -1462,13 +1473,24 @@ function SpreadsheetRoot({
   readOnly = false
 }) {
   const { state, actions } = useSpreadsheetStore(data ?? defaultData);
+  const onChangeRef = useRef(onChange);
+  const isExternalSync = useRef(false);
+  const prevDataRef = useRef(data);
+  onChangeRef.current = onChange;
   useEffect(() => {
-    if (data && data !== state.workbook) {
+    if (data && data !== prevDataRef.current && data !== state.workbook) {
+      isExternalSync.current = true;
       actions.setWorkbook(data);
+      prevDataRef.current = data;
     }
   }, [data]);
   useEffect(() => {
-    onChange?.(state.workbook);
+    if (isExternalSync.current) {
+      isExternalSync.current = false;
+      return;
+    }
+    prevDataRef.current = state.workbook;
+    onChangeRef.current?.(state.workbook);
   }, [state.workbook]);
   const activeSheet = useMemo(
     () => state.workbook.sheets.find((s) => s.id === state.workbook.activeSheetId),
@@ -1519,7 +1541,7 @@ function SpreadsheetRoot({
     "div",
     {
       "data-fancy-sheets": "",
-      className: cn("flex flex-col overflow-hidden", className),
+      className: cn("flex h-full flex-col overflow-hidden", className),
       children
     }
   ) });