@particle-academy/fancy-sheets 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -578,9 +578,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: "",
@@ -1018,18 +1025,22 @@ function CellEditor() {
     confirmEdit,
     cancelEdit,
     getColumnWidth,
-    rowHeight,
-    activeSheet
+    rowHeight
   } = useSpreadsheet();
   const inputRef = react.useRef(null);
+  const mountedAt = react.useRef(0);
   react.useEffect(() => {
     if (editingCell && inputRef.current) {
+      mountedAt.current = Date.now();
       inputRef.current.focus();
-      inputRef.current.select();
     }
   }, [editingCell]);
+  const handleBlur = react.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") {
@@ -1053,7 +1064,7 @@ function CellEditor() {
       value: editValue,
       onChange: (e) => updateEdit(e.target.value),
       onKeyDown: handleKeyDown,
-      onBlur: confirmEdit
+      onBlur: handleBlur
     }
   );
 }
@@ -1069,7 +1080,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 };
     });
@@ -1225,7 +1236,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__ */ jsxRuntime.jsxs(
@@ -1233,7 +1244,7 @@ function SpreadsheetGrid({ className }) {
     {
       ref: containerRef,
       "data-fancy-sheets-grid": "",
-      className: reactFancy.cn("relative flex-1 overflow-auto bg-white focus:outline-none dark:bg-zinc-900", className),
+      className: reactFancy.cn("relative min-h-0 flex-1 overflow-auto bg-white focus:outline-none dark:bg-zinc-900", className),
       tabIndex: 0,
       onKeyDown: handleKeyDown,
       children: [
@@ -1464,13 +1475,24 @@ function SpreadsheetRoot({
   readOnly = false
 }) {
   const { state, actions } = useSpreadsheetStore(data ?? defaultData);
+  const onChangeRef = react.useRef(onChange);
+  const isExternalSync = react.useRef(false);
+  const prevDataRef = react.useRef(data);
+  onChangeRef.current = onChange;
   react.useEffect(() => {
-    if (data && data !== state.workbook) {
+    if (data && data !== prevDataRef.current && data !== state.workbook) {
+      isExternalSync.current = true;
       actions.setWorkbook(data);
+      prevDataRef.current = data;
     }
   }, [data]);
   react.useEffect(() => {
-    onChange?.(state.workbook);
+    if (isExternalSync.current) {
+      isExternalSync.current = false;
+      return;
+    }
+    prevDataRef.current = state.workbook;
+    onChangeRef.current?.(state.workbook);
   }, [state.workbook]);
   const activeSheet = react.useMemo(
     () => state.workbook.sheets.find((s) => s.id === state.workbook.activeSheetId),
@@ -1521,7 +1543,7 @@ function SpreadsheetRoot({
     "div",
     {
       "data-fancy-sheets": "",
-      className: reactFancy.cn("flex flex-col overflow-hidden", className),
+      className: reactFancy.cn("flex h-full flex-col overflow-hidden", className),
       children
     }
   ) });