@ricsam/react-spreadsheets 0.0.10 → 0.0.12

package/dist/cjs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@ricsam/react-spreadsheets",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "commonjs"
 }

package/dist/mjs/lib.mjs

@@ -8,6 +8,8 @@ import React2, {
   useCallback as useCallback3,
   useEffect as useEffect3,
   useImperativeHandle,
+  useId,
+  useLayoutEffect,
   useMemo,
   useRef as useRef3,
   useState as useState4
@@ -1326,6 +1328,7 @@ var resizeCellSnapAnchorToNearestEdges = (anchor, rect, handle, columnWidths, ro
 
 // src/spreadsheet/spreadsheet.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "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") {
@@ -1471,6 +1474,7 @@ var CellComponent = React2.memo(({
   value,
   row,
   col,
+  domId,
   selectionManager,
   cellToPixelBase,
   getColumnWidth,
@@ -1484,11 +1488,11 @@ var CellComponent = React2.memo(({
 }) => {
   const cellRef = useCallback3((el) => {
     if (el) {
-      const rowIndex2 = row - 1;
-      const colIndex2 = columnToIndex(col);
+      const rowIndex = row - 1;
+      const colIndex = columnToIndex(col);
       return selectionManager.setupCellElement(el, {
-        row: rowIndex2,
-        col: colIndex2
+        row: rowIndex,
+        col: colIndex
       });
     }
   }, [row, col, selectionManager]);
@@ -1516,16 +1520,22 @@ var CellComponent = React2.memo(({
   });
   const inputRef = useCallback3((el) => {
     if (el) {
-      const rowIndex2 = row - 1;
-      const colIndex2 = columnToIndex(col);
+      const rowIndex = row - 1;
+      const colIndex = columnToIndex(col);
       return selectionManager.setupInputElement(el, {
-        rowIndex: rowIndex2,
-        colIndex: colIndex2
+        rowIndex,
+        colIndex
       });
     }
   }, [row, col, selectionManager]);
   return /* @__PURE__ */ jsxs2("div", {
     ref: cellRef,
+    id: domId,
+    role: "gridcell",
+    "aria-rowindex": row + 1,
+    "aria-colindex": colIndex + 2,
+    "aria-selected": isSelected,
+    "data-cell-address": `${col}${row}`,
     className: cn("rsp-cell", {
       "rsp-cell-multiline": typeof value === "string" && value.includes(`
 `),
@@ -1545,6 +1555,7 @@ var CellComponent = React2.memo(({
     children: [
       isBeingEdited ? /* @__PURE__ */ jsx3("textarea", {
         className: "rsp-cell-editor",
+        "aria-label": `Edit ${col}${row}`,
         "data-testid": `spreadsheet-cell-input-${col}${row}`,
         ref: inputRef,
         defaultValue: inputValue?.toString() ?? "",
@@ -1623,6 +1634,10 @@ var HeaderComponent = React2.memo(({
   const content = type === "col" ? reverseHeaders ? index + 1 : indexToColumn(index) : reverseHeaders ? rowToLetter(index + 1) : index + 1;
   return /* @__PURE__ */ jsxs2("div", {
     ref: headerRef,
+    role: type === "col" ? "columnheader" : "rowheader",
+    "aria-colindex": type === "col" ? index + 2 : 1,
+    "aria-rowindex": type === "row" ? index + 2 : 1,
+    "aria-selected": isSelected,
     className: cn("rsp-header", `rsp-header-${type}`, {
       "rsp-header-selected": isSelected
     }),
@@ -1767,6 +1782,9 @@ var Spreadsheet = forwardRef(({
   style,
   className,
   containerProps,
+  "aria-label": ariaLabel = "Spreadsheet",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   cellData: controlledCellData,
   onCellDataChange,
   onCellDataChangeError,
@@ -1789,6 +1807,7 @@ var Spreadsheet = forwardRef(({
   parentSelected = true,
   disableClipboard = false
 }, ref) => {
+  const gridId = useId();
   const [{ width, height }, containerRef] = useResizeObserver();
   const [containerDivRef, setContainerDivRef] = useState4(null);
   const colorScheme = useColorScheme(containerDivRef);
@@ -1982,15 +2001,15 @@ var Spreadsheet = forwardRef(({
   };
   const effectsRef = useRef3(effectsRefOb);
   effectsRef.current = effectsRefOb;
-  const setupCanvas = useCallback3((canvas, width2, height2) => {
+  const setupCanvas = useCallback3((canvas, width, height) => {
     const ctx = canvas.getContext("2d");
     if (!ctx)
       return null;
     const devicePixelRatio = window.devicePixelRatio || 1;
-    canvas.width = width2 * devicePixelRatio;
-    canvas.height = height2 * devicePixelRatio;
-    canvas.style.width = width2 + "px";
-    canvas.style.height = height2 + "px";
+    canvas.width = width * devicePixelRatio;
+    canvas.height = height * devicePixelRatio;
+    canvas.style.width = width + "px";
+    canvas.style.height = height + "px";
     ctx.scale(devicePixelRatio, devicePixelRatio);
     return ctx;
   }, []);
@@ -2218,36 +2237,36 @@ var Spreadsheet = forwardRef(({
     return selectionManager.listenToUpdateData((updates) => {
       const editingState = selectionManager.isEditing;
       try {
-        const { cellData: cellData2, onCellDataChange: onCellDataChange2 } = effectsRef.current;
-        const newData = new Map(cellData2);
+        const { cellData, onCellDataChange } = effectsRef.current;
+        const newData = new Map(cellData);
         updates.forEach(({ value, rowIndex, colIndex }) => {
           const key = `${indexToColumn(colIndex)}${rowIndex + 1}`;
-          const parseValue2 = effectsRef.current.parseValue;
+          const parseValue = effectsRef.current.parseValue;
           if (value === "") {
             newData.delete(key);
           } else {
             let parsedValue = value;
-            if (parseValue2 && typeof value === "string") {
+            if (parseValue && typeof value === "string") {
               const match = key.match(/^([A-Z]+)(\d+)$/);
               const col = match?.[1];
               const rowText = match?.[2];
               if (col && rowText) {
                 const row = parseInt(rowText, 10);
-                const colIndex2 = columnToIndex(col);
-                const rowIndex2 = row - 1;
-                parsedValue = parseValue2(value, {
+                const colIndex = columnToIndex(col);
+                const rowIndex = row - 1;
+                parsedValue = parseValue(value, {
                   id: key,
                   row,
                   col,
-                  rowIndex: rowIndex2,
-                  colIndex: colIndex2
+                  rowIndex,
+                  colIndex
                 });
               }
             }
             newData.set(key, parsedValue);
           }
         });
-        onCellDataChange2?.(newData);
+        onCellDataChange?.(newData);
         setInternalCellData(newData);
       } catch (error) {
         console.error("Failed to update spreadsheet cell data:", error);
@@ -2286,6 +2305,12 @@ var Spreadsheet = forwardRef(({
     });
   }, [selectionManager, clipboardManager, disableClipboard]);
   const handleWheel = useCallback3((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) => ({
@@ -2424,13 +2449,13 @@ var Spreadsheet = forwardRef(({
   const handleColumnResizeDoubleClick = useCallback3((e, col) => {
     e.preventDefault();
     e.stopPropagation();
-    const { viewport: viewport2, gridDims: gridDims2, height: height2, cellData: cellData2 } = effectsRef.current;
+    const { viewport, gridDims, height, cellData } = effectsRef.current;
     let maxWidth = 50;
-    const startRow = Math.max(0, Math.floor(viewport2.scrollY / gridDims2.cellHeight));
-    const endRow = Math.ceil((viewport2.scrollY + height2) / gridDims2.cellHeight) + 1;
+    const startRow = Math.max(0, Math.floor(viewport.scrollY / gridDims.cellHeight));
+    const endRow = Math.ceil((viewport.scrollY + height) / gridDims.cellHeight) + 1;
     for (let row = startRow;row <= endRow; row++) {
       const cellKey = `${col}${getRowNumber(row)}`;
-      const content = cellData2.get(cellKey) ?? "";
+      const content = cellData.get(cellKey) ?? "";
       if (content) {
         const estimatedWidth = String(content).length * 8 + 20;
         maxWidth = Math.max(maxWidth, estimatedWidth);
@@ -2699,8 +2724,8 @@ var Spreadsheet = forwardRef(({
     return editingCleanup;
   }, [selectionManager]);
   React2.useEffect(() => {
-    return selectionManager.observeStateChange((state) => state.hasFocus, (hasFocus2) => {
-      if (hasFocus2 && selectedOverlayId) {
+    return selectionManager.observeStateChange((state) => state.hasFocus, (hasFocus) => {
+      if (hasFocus && selectedOverlayId) {
         setSelectedOverlay(null);
       }
     });
@@ -2803,6 +2828,21 @@ var Spreadsheet = forwardRef(({
   const visibleCells = React2.useMemo(() => getVisibleCells(), [getVisibleCells]);
   const visibleColumnHeaders = React2.useMemo(() => getVisibleColumnHeaders(), [getVisibleColumnHeaders]);
   const visibleRowHeaders = React2.useMemo(() => getVisibleRowHeaders(), [getVisibleRowHeaders]);
+  const activeAddress = useSelectionManager(selectionManager, () => {
+    const cell = selectionManager.getTopLeftCellInSelection();
+    return cell ? `${indexToColumn(cell.col)}${cell.row + 1}` : undefined;
+  });
+  const activeCellId = visibleCells.some((cell) => `${cell.col}${cell.row}` === activeAddress) ? `${gridId}-cell-${activeAddress}` : undefined;
+  const accessibilityManager = selectionManager;
+  useLayoutEffect(() => {
+    accessibilityManager.setInputCaptureAccessibility?.({
+      label: `${ariaLabel} keyboard input`,
+      controls: gridId,
+      activeDescendant: activeCellId,
+      describedBy: ariaDescribedBy
+    });
+    return () => accessibilityManager.setInputCaptureAccessibility?.({});
+  }, [accessibilityManager, ariaLabel, ariaDescribedBy, gridId, activeCellId]);
   const hasFocus = useSelectionManager(selectionManager, () => selectionManager.hasFocus);
   const referenceSelection = useSelectionManager(selectionManager, () => selectionManager.referenceSelection);
   const referenceSelectionRect = useMemo(() => {
@@ -2878,7 +2918,21 @@ var Spreadsheet = forwardRef(({
           width,
           height
         },
+        id: gridId,
+        role: "grid",
+        "aria-activedescendant": activeCellId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-rowcount": finiteRowCount === undefined ? -1 : finiteRowCount + 1,
+        "aria-colcount": finiteColumnCount === undefined ? -1 : finiteColumnCount + 1,
+        "aria-multiselectable": "true",
         tabIndex: 0,
+        onFocus: (event) => {
+          if (event.target === event.currentTarget && !selectionManager.hasFocus) {
+            selectionManager.focus();
+          }
+        },
         children: [
           /* @__PURE__ */ jsx3("span", {
             ref: gridLineProbeRef,
@@ -2894,12 +2948,15 @@ var Spreadsheet = forwardRef(({
           }),
           /* @__PURE__ */ jsx3("canvas", {
             ref: canvasRef,
+            "aria-hidden": "true",
             className: "rsp-canvas",
             "data-testid": "spreadsheet-canvas",
             style: { width, height }
           }),
           /* @__PURE__ */ jsx3("div", {
             className: "rsp-column-headers",
+            role: "row",
+            "aria-rowindex": 1,
             "data-testid": "spreadsheet-column-headers",
             style: {
               left: gridDims.headerWidth,
@@ -2942,16 +2999,21 @@ var Spreadsheet = forwardRef(({
                 transformOrigin: "0 0"
               },
               children: visibleRowHeaders.map(({ row, rowIndex }) => {
-                return /* @__PURE__ */ jsx3(HeaderComponent, {
-                  index: rowIndex,
-                  type: "row",
-                  selectionManager,
-                  getColumnWidth,
-                  getRowHeight,
-                  handleColumnResizeStart,
-                  handleColumnResizeDoubleClick,
-                  handleRowResizeStart,
-                  handleRowResizeDoubleClick
+                return /* @__PURE__ */ jsx3("div", {
+                  role: "row",
+                  "aria-rowindex": row + 1,
+                  "aria-owns": visibleCells.filter((cell) => cell.row === row).map((cell) => `${gridId}-cell-${cell.col}${cell.row}`).join(" ") || undefined,
+                  children: /* @__PURE__ */ jsx3(HeaderComponent, {
+                    index: rowIndex,
+                    type: "row",
+                    selectionManager,
+                    getColumnWidth,
+                    getRowHeight,
+                    handleColumnResizeStart,
+                    handleColumnResizeDoubleClick,
+                    handleRowResizeStart,
+                    handleRowResizeDoubleClick
+                  })
                 }, row);
               })
             })
@@ -2974,6 +3036,7 @@ var Spreadsheet = forwardRef(({
             },
             children: [
               visibleCells.map((cell) => /* @__PURE__ */ jsx3(CellComponent, {
+                domId: `${gridId}-cell-${cell.col}${cell.row}`,
                 value: cellData.get(`${cell.col}${cell.row}`) ?? "",
                 row: cell.row,
                 col: cell.col,
@@ -3011,6 +3074,7 @@ var Spreadsheet = forwardRef(({
                 const isTextBox = child.component === "RichText";
                 const isMinimized = Boolean(child.minimized && !isTextBox);
                 return /* @__PURE__ */ jsxs2("div", {
+                  "data-rsp-overlay": child.id,
                   style: {
                     position: "absolute",
                     width: child.width,
@@ -3807,11 +3871,11 @@ function FormulaSheet({
           });
         }
       }),
-      spreadsheetSelectionManager.observeStateChange((state2) => {
-        const currentSelection = state2.selections.length === 1 ? state2.selections[0] : undefined;
+      spreadsheetSelectionManager.observeStateChange((state) => {
+        const currentSelection = state.selections.length === 1 ? state.selections[0] : undefined;
         return currentSelection;
-      }, (selection2) => {
-        setSelectedArea(selection2 ?? null);
+      }, (selection) => {
+        setSelectedArea(selection ?? null);
       })
     ];
     const handleUndoRedoKeyDown = (event) => {
@@ -3927,7 +3991,7 @@ function FormulaSheet({
               workbookName
             });
             if (!tableInfo) {
-              const style2 = conditionalStyle ? {
+              const style = conditionalStyle ? {
                 ...conditionalStyle.backgroundColor && {
                   backgroundColor: conditionalStyle.backgroundColor
                 },
@@ -3949,7 +4013,7 @@ function FormulaSheet({
                 ...getBorderCellStyle(conditionalStyle),
                 ...getWrapCellStyle(conditionalStyle)
               } : {};
-              return customCellStyle ? customCellStyle(cell, style2) : style2;
+              return customCellStyle ? customCellStyle(cell, style) : style;
             }
             const isHeaderRow = cell.rowIndex === tableInfo.start.rowIndex;
             const isFirstColumn = cell.colIndex === tableInfo.start.colIndex;
@@ -4499,4 +4563,4 @@ export {
   useResizeObserver
 };
 
-//# debugId=27095BB366C4630864756E2164756E21
+//# debugId=FA27216279C90A7964756E2164756E21