@ricsam/react-spreadsheets 0.0.9 → 0.0.11

package/README.md

@@ -152,6 +152,29 @@ controlled `FormulaWorkbook` still needs to switch `activeSheet`, it returns
 `false` and queues the latest request; mounting that sheet applies the focus and
 reveal automatically.
 
+If the same workbook can be mounted in more than one place, give each rendered
+view a stable ID and target that ID when navigating. Selection caches are also
+scoped to the view, so switching sheets or remounting one pane cannot restore a
+selection from its duplicate:
+
+```tsx
+<FormulaWorkbook
+  viewId="left-pane"
+  workbookName="Forecast"
+  engine={engine}
+  selectionManager={workbookSelection}
+/>
+
+workbookSelection.focusRange(referenceAddress, {
+  align: "nearest",
+  viewId: "left-pane",
+});
+```
+
+Omitting `viewId` preserves the single-view API and targets the first matching
+mounted workbook/sheet. Call `cancelPendingFocusRange()` if an app-level sheet
+or pane switch is abandoned before the queued target mounts.
+
 For the range currently being inserted into a formula, use selection-manager's
 reference-picking mode instead. It preserves the primary/editing selection and
 the grid renders the picked range with an independent animated border:
@@ -316,6 +339,11 @@ Per-cell styling is done in JS:
 | `selection` | Selection state, navigation model, and `effects(selectionManager)` for copy/paste/fill/reference hooks. |
 | `components` + `overlayChildren` | Floating overlays anchored to the grid, optionally snapped to cell edges. |
 
+Wheel input over the grid remains available when its cell selection is blurred.
+Wheel events originating inside a floating overlay are left to that overlay, so
+scrollable editors and other interactive overlay content keep their native
+scroll behavior.
+
 ## Development
 
 ```bash

package/dist/cjs/lib.cjs

@@ -1434,6 +1434,7 @@ var resizeCellSnapAnchorToNearestEdges = (anchor, rect, handle, columnWidths, ro
 
 // src/spreadsheet/spreadsheet.tsx
 var jsx_runtime3 = require("react/jsx-runtime");
+var SPREADSHEET_OVERLAY_SELECTOR = "[data-rsp-overlay]";
 var resolveGridLineColor = (probe, colorScheme) => {
   const fallback = colorScheme === "dark" ? "#232c3d" : "#e8ebf1";
   if (!probe || typeof getComputedStyle !== "function") {
@@ -2394,6 +2395,12 @@ var Spreadsheet = import_react4.forwardRef(({
     });
   }, [selectionManager, clipboardManager, disableClipboard]);
   const handleWheel = import_react4.useCallback((e) => {
+    const target = e.target;
+    const currentTarget = e.currentTarget;
+    const overlay = target instanceof Element ? target.closest(SPREADSHEET_OVERLAY_SELECTOR) : null;
+    if (overlay && currentTarget instanceof Node && currentTarget.contains(overlay)) {
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
     setViewport((previous) => ({
@@ -3119,6 +3126,7 @@ var Spreadsheet = import_react4.forwardRef(({
                 const isTextBox = child.component === "RichText";
                 const isMinimized = Boolean(child.minimized && !isTextBox);
                 return /* @__PURE__ */ jsx_runtime3.jsxs("div", {
+                  "data-rsp-overlay": child.id,
                   style: {
                     position: "absolute",
                     width: child.width,
@@ -3312,9 +3320,24 @@ var import_formula_engine = require("@ricsam/formula-engine");
 class WorkbookSelectionManager {
   managers = new Map;
   lastFocusedManager = null;
+  lastSelections = [];
+  selectionsByView = new Map;
   listeners = new Set;
   cleanupFunctions = new Map;
   pendingRangeFocus = null;
+  applyingRangeFocus = new Set;
+  getViewKey(context) {
+    return JSON.stringify([context.workbookName, context.sheetName, context.viewId ?? null]);
+  }
+  cloneSmArea(area) {
+    return {
+      start: { row: area.start.row, col: area.start.col },
+      end: {
+        row: area.end.row.type === "infinity" ? { type: "infinity" } : { type: "number", value: area.end.row.value },
+        col: area.end.col.type === "infinity" ? { type: "infinity" } : { type: "number", value: area.end.col.value }
+      }
+    };
+  }
   smAreaToSpreadsheetRange(area) {
     const rowEnd = area.end.row.type === "infinity" ? { type: "infinity", sign: "positive" } : { type: "number", value: area.end.row.value };
     const colEnd = area.end.col.type === "infinity" ? { type: "infinity", sign: "positive" } : { type: "number", value: area.end.col.value };
@@ -3345,43 +3368,69 @@ class WorkbookSelectionManager {
       range: this.smAreaToSpreadsheetRange(this.spreadsheetRangeToSmArea(address.range))
     };
   }
-  matchesContext(address, context) {
-    return address.workbookName === context.workbookName && address.sheetName === context.sheetName;
+  areasToRangeAddresses(areas, context) {
+    return areas.map((area) => ({
+      workbookName: context.workbookName,
+      sheetName: context.sheetName,
+      range: this.smAreaToSpreadsheetRange(area)
+    }));
+  }
+  rememberSelections(manager, context, areas = manager.getState().selections) {
+    const cachedAreas = areas.map((area) => this.cloneSmArea(area));
+    this.selectionsByView.set(this.getViewKey(context), cachedAreas);
+    this.lastFocusedManager = { sm: manager, context };
+    this.lastSelections = this.areasToRangeAddresses(cachedAreas, context);
+  }
+  matchesContext(address, context, viewId) {
+    return address.workbookName === context.workbookName && address.sheetName === context.sheetName && (viewId === undefined || context.viewId === viewId);
   }
   applyRangeFocus(manager, context, request) {
     const selection = this.spreadsheetRangeToSmArea(request.address.range);
-    manager.setState({ selections: [selection] });
-    manager.focus();
+    this.applyingRangeFocus.add(manager);
+    try {
+      manager.replaceSelections([selection]);
+      manager.focus();
+    } finally {
+      this.applyingRangeFocus.delete(manager);
+    }
     manager.revealRange(selection, request.options);
-    this.lastFocusedManager = { sm: manager, context };
+    this.rememberSelections(manager, context, [selection]);
     this.emitChange();
   }
   applyPendingRangeFocusOnMount(manager, context) {
     const pending = this.pendingRangeFocus;
-    if (!pending || !this.matchesContext(pending.address, context))
+    if (!pending || !this.matchesContext(pending.address, context, pending.options.viewId))
       return;
     queueMicrotask(() => {
       if (this.pendingRangeFocus !== pending)
         return;
       const mountedContext = this.managers.get(manager);
-      if (!mountedContext || !this.matchesContext(pending.address, mountedContext))
+      if (!mountedContext || !this.matchesContext(pending.address, mountedContext, pending.options.viewId)) {
         return;
+      }
       this.pendingRangeFocus = null;
       this.applyRangeFocus(manager, mountedContext, pending);
     });
   }
   add(manager, context) {
-    this.managers.set(manager, context);
+    const registeredContext = { ...context };
+    this.managers.set(manager, registeredContext);
+    const cachedSelections = this.selectionsByView.get(this.getViewKey(registeredContext));
+    if (cachedSelections && manager.getState().selections.length === 0) {
+      manager.replaceSelections(cachedSelections);
+    }
     const focusCleanup = manager.observeStateChange((state) => state.hasFocus, (hasFocus) => {
-      if (hasFocus) {
-        this.lastFocusedManager = { sm: manager, context };
+      if (hasFocus && !this.applyingRangeFocus.has(manager)) {
+        this.rememberSelections(manager, registeredContext);
         this.emitChange();
       }
     });
     const selectionCleanup = manager.observeStateChange((state) => JSON.stringify(state.selections), (selectionsJson) => {
+      if (this.applyingRangeFocus.has(manager))
+        return;
       const selections = JSON.parse(selectionsJson);
       if (selections && selections.length > 0) {
-        this.lastFocusedManager = { sm: manager, context };
+        this.rememberSelections(manager, registeredContext, selections);
         this.emitChange();
       }
     });
@@ -3391,27 +3440,19 @@ class WorkbookSelectionManager {
       this.managers.delete(manager);
       this.cleanupFunctions.delete(manager);
       if (this.lastFocusedManager?.sm === manager) {
+        this.rememberSelections(manager, registeredContext);
         this.lastFocusedManager = null;
       }
     };
     this.cleanupFunctions.set(manager, cleanup);
-    this.applyPendingRangeFocusOnMount(manager, context);
+    this.applyPendingRangeFocusOnMount(manager, registeredContext);
     return cleanup;
   }
   getLastFocusedSelectionManager() {
     return this.lastFocusedManager;
   }
   getSelections() {
-    if (!this.lastFocusedManager) {
-      return [];
-    }
-    const { sm, context } = this.lastFocusedManager;
-    const state = sm.getState();
-    return state.selections.map((area) => ({
-      workbookName: context.workbookName,
-      sheetName: context.sheetName,
-      range: this.smAreaToSpreadsheetRange(area)
-    }));
+    return this.lastSelections.map((selection) => this.cloneRangeAddress(selection));
   }
   getLastSelection() {
     const selections = this.getSelections();
@@ -3460,35 +3501,37 @@ class WorkbookSelectionManager {
     return `[${workbookName}]${sheetRef}!${rangeStr}`;
   }
   blur() {
-    this.managers.forEach((context, manager) => {
+    this.managers.forEach((_context, manager) => {
       manager.clearSelections();
       manager.blur();
     });
+    this.selectionsByView.clear();
     this.lastFocusedManager = null;
+    this.lastSelections = [];
     this.emitChange();
   }
-  focusWorkbook(workbookName) {
+  focusWorkbook(workbookName, viewId) {
     for (const [manager, context] of this.managers) {
-      if (context.workbookName === workbookName) {
+      if (context.workbookName === workbookName && (viewId === undefined || context.viewId === viewId)) {
         manager.focus();
-        this.lastFocusedManager = { sm: manager, context };
+        this.rememberSelections(manager, context);
         this.emitChange();
         return;
       }
     }
   }
-  focusSheet(workbookName, sheetName) {
+  focusSheet(workbookName, sheetName, viewId) {
     for (const [manager, context] of this.managers) {
-      if (context.workbookName === workbookName && context.sheetName === sheetName) {
+      if (context.workbookName === workbookName && context.sheetName === sheetName && (viewId === undefined || context.viewId === viewId)) {
         manager.focus();
-        this.lastFocusedManager = { sm: manager, context };
+        this.rememberSelections(manager, context);
         this.emitChange();
         return true;
       }
     }
     return false;
   }
-  focusCell(workbookName, sheetName, row, col) {
+  focusCell(workbookName, sheetName, row, col, options = {}) {
     return this.focusRange({
       workbookName,
       sheetName,
@@ -3499,7 +3542,7 @@ class WorkbookSelectionManager {
           col: { type: "number", value: col }
         }
       }
-    });
+    }, options);
   }
   focusRange(address, options = {}) {
     const request = {
@@ -3507,7 +3550,7 @@ class WorkbookSelectionManager {
       options: { ...options }
     };
     for (const [manager, context] of this.managers) {
-      if (!this.matchesContext(request.address, context))
+      if (!this.matchesContext(request.address, context, request.options.viewId))
         continue;
       this.pendingRangeFocus = null;
       this.applyRangeFocus(manager, context, request);
@@ -3516,6 +3559,9 @@ class WorkbookSelectionManager {
     this.pendingRangeFocus = request;
     return false;
   }
+  cancelPendingFocusRange() {
+    this.pendingRangeFocus = null;
+  }
   emitChange() {
     const currentSelection = this.getLastSelection();
     const selections = currentSelection ? [currentSelection] : [];
@@ -3742,6 +3788,7 @@ function FormulaSheet({
   verboseErrors = false,
   selection,
   selectionManager,
+  viewId,
   customCellStyle,
   customCellRenderer,
   onCellDataChangeError = queueCellEditError,
@@ -3913,7 +3960,8 @@ function FormulaSheet({
     if (selectionManager) {
       const workbookManagerCleanup = selectionManager.add(spreadsheetSelectionManager, {
         workbookName,
-        sheetName
+        sheetName,
+        ...viewId === undefined ? {} : { viewId }
       });
       cleanups.push(workbookManagerCleanup);
     }
@@ -3934,6 +3982,7 @@ function FormulaSheet({
     selectionManager,
     sheetName,
     showFormulas,
+    viewId,
     workbookName
   ]);
   if (!sheet) {
@@ -4167,6 +4216,7 @@ function FormulaWorkbook({
   onActiveSheetChange,
   verboseErrors = false,
   selectionManager,
+  viewId,
   components,
   sheetOverlayChildren,
   sheetSelectedOverlayIds,
@@ -4334,6 +4384,7 @@ function FormulaWorkbook({
             engine,
             verboseErrors,
             selectionManager,
+            viewId,
             ...rest,
             components,
             overlayChildren: activeSheetOverlayChildren,
@@ -4510,4 +4561,4 @@ var useClickAway = (ref, callback) => {
   }, [ref, callback]);
 };
 
-//# debugId=81701030D90BCDFB64756E2164756E21
+//# debugId=64201658718498BD64756E2164756E21