@ricsam/react-spreadsheets 0.0.7 → 0.0.8

package/dist/mjs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@ricsam/react-spreadsheets",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module"
 }

package/dist/styles.css

@@ -150,6 +150,7 @@
   --_rsp-accent-contrast: var(--rsp-accent-contrast, #ffffff);
   --_rsp-selection-bg: var(--rsp-selection-bg, var(--rsp-light, #e8f2fe) var(--rsp-dark, #17304f));
   --_rsp-selection-range-bg: var(--rsp-selection-range-bg, var(--rsp-light, #f1f7fe) var(--rsp-dark, #14263d));
+  --_rsp-reference-accent: var(--rsp-reference-accent, var(--rsp-light, #f97316) var(--rsp-dark, #fb923c));
   --_rsp-hover-bg: var(--rsp-hover-bg, var(--rsp-light, #f5f7fa) var(--rsp-dark, #1c2436));
   --_rsp-focus-ring: var(--rsp-focus-ring, var(--rsp-light, rgba(33, 150, 243, 0.22)) var(--rsp-dark, rgba(88, 166, 255, 0.28)));
 
@@ -276,6 +277,41 @@
   z-index: 2;
 }
 
+/* Formula references are not primary selections. They live in one independent
+   overlay so table fills, conditional styles and the selected-cell perimeter
+   remain untouched. Four animated gradients create Excel-like marching ants. */
+.rsp-reference-selection {
+  position: absolute;
+  z-index: 4;
+  pointer-events: none;
+  background-image:
+    linear-gradient(90deg, var(--_rsp-reference-accent) 50%, transparent 50%),
+    linear-gradient(90deg, var(--_rsp-reference-accent) 50%, transparent 50%),
+    linear-gradient(0deg, var(--_rsp-reference-accent) 50%, transparent 50%),
+    linear-gradient(0deg, var(--_rsp-reference-accent) 50%, transparent 50%);
+  background-position: 0 0, 0 100%, 0 0, 100% 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
+  filter: drop-shadow(0 0 1px var(--_rsp-bg));
+  animation: rsp-reference-marching-ants 480ms linear infinite;
+}
+
+.rsp-reference-selection-selecting {
+  opacity: 0.9;
+}
+
+@keyframes rsp-reference-marching-ants {
+  to {
+    background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rsp-reference-selection {
+    animation: none;
+  }
+}
+
 /* The editor surface must win over the selection tint above (equal specificity
    would otherwise leave the selected-cell background showing through), and over
    a consumer background so the text being typed stays legible. */

package/dist/types/lib.d.ts

@@ -8,7 +8,8 @@
  * Remember to import the stylesheet once in your app:
  *   import "@ricsam/react-spreadsheets/styles.css";
  */
-export { Spreadsheet, type SpreadsheetProps, type SpreadsheetRef, type SpreadsheetChild, type SpreadsheetChildInitial, type SpreadsheetChildState, type SpreadsheetComponent, } from "./spreadsheet/spreadsheet";
+export { Spreadsheet, type SpreadsheetProps, type SpreadsheetRef, type SpreadsheetScrollAlignment, type SpreadsheetScrollToCellOptions, type SpreadsheetChild, type SpreadsheetChildInitial, type SpreadsheetChildState, type SpreadsheetComponent, } from "./spreadsheet/spreadsheet";
+export type { SelectionNavigationModel } from "@ricsam/selection-manager";
 export { FormulaSheet, FormulaWorkbook, WorkbookClipboardManager, WorkbookSelectionManager, } from "./workbook/workbook";
 export { coerceCellInput, getCellDisplayText, getCellDisplayValue, } from "./workbook/cell-data-type";
 export { normalizeBorderSides, hasAnyBorderSide, type BorderSides, type NormalizedBorderSides, } from "./workbook/border-sides";

package/dist/types/spreadsheet/spreadsheet.d.ts

@@ -1,4 +1,4 @@
-import { type Format, SelectionManager, type SelectionManagerState } from '@ricsam/selection-manager';
+import { type Format, SelectionManager, type SelectionNavigationModel, type SelectionManagerState, type SMCell } from '@ricsam/selection-manager';
 import React, { type ReactNode } from 'react';
 import type { CellRenderContext, SerializedCellValue, SpreadsheetColumnWidths, SpreadsheetRowHeights } from '../types';
 import { type CellSnapAnchor } from './snapping';
@@ -39,6 +39,10 @@ export interface SpreadsheetProps {
     cellData?: Map<string, SerializedCellValue>;
     onCellDataChange?: (data: Map<string, SerializedCellValue>) => void;
     onCellDataChangeError?: (error: unknown) => void;
+    /** Finite number of rows. Omit for an unbounded sheet. */
+    rowCount?: number;
+    /** Finite number of columns. Omit for an unbounded sheet. */
+    columnCount?: number;
     columnWidths?: SpreadsheetColumnWidths;
     onColumnWidthsChange?: (columnWidths: SpreadsheetColumnWidths) => void;
     rowHeights?: SpreadsheetRowHeights;
@@ -62,6 +66,8 @@ export interface SpreadsheetProps {
         onStateChange?: (state: SelectionManagerState) => void;
         effects?: (selectionManager: SelectionManager) => (() => void) | void;
         formats?: Format[];
+        /** Data- and table-aware keyboard navigation hooks. */
+        navigation?: SelectionNavigationModel;
     };
     components?: Record<string, SpreadsheetComponent>;
     overlayChildren?: SpreadsheetChild[];
@@ -79,9 +85,15 @@ export interface SpreadsheetProps {
     /** Whether the parent component is selected (used to gate overlay selection) */
     parentSelected?: boolean;
 }
+export type SpreadsheetScrollAlignment = 'nearest' | 'start' | 'end';
+export interface SpreadsheetScrollToCellOptions {
+    align?: SpreadsheetScrollAlignment;
+}
 export interface SpreadsheetRef {
     focus: () => void;
     blur: () => void;
+    /** Reveal a zero-based cell without changing the selection. */
+    scrollToCell: (cell: SMCell, options?: SpreadsheetScrollToCellOptions) => void;
 }
 export declare const Spreadsheet: React.ForwardRefExoticComponent<SpreadsheetProps & {
     disableClipboard?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ricsam/react-spreadsheets",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Headless-friendly React spreadsheet and workbook components: infinite virtualized grid, zoom, resizing, clipboard, fill handles and formula-engine bindings.",
   "type": "module",
   "module": "./dist/mjs/lib.mjs",
@@ -43,7 +43,7 @@
   },
   "peerDependencies": {
     "@ricsam/formula-engine": ">=0.2.0",
-    "@ricsam/selection-manager": ">=0.0.25",
+    "@ricsam/selection-manager": ">=0.0.29",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
@@ -55,7 +55,7 @@
   "devDependencies": {
     "@happy-dom/global-registrator": "^18.0.1",
     "@ricsam/formula-engine": "^0.2.15",
-    "@ricsam/selection-manager": "^0.0.25",
+    "@ricsam/selection-manager": "^0.0.29",
     "@testing-library/react": "^16.3.0",
     "@types/bun": "latest",
     "@types/react": "^19",