@bendyline/squisq-grid-react 2.11.20 → 2.11.21

package/dist/index.js

@@ -844,6 +844,8 @@ function DataGrid({
   const rootRef = useRef(null);
   const opMenuRef = useRef(null);
   const valueMenuRef = useRef(null);
+  const menuTriggerRef = useRef(null);
+  const pendingCellFocus = useRef(false);
   const focusRef = useRef(null);
   const wasEditingRef = useRef(false);
   useEffect(() => {
@@ -895,6 +897,7 @@ function DataGrid({
       await restoreRef.current;
       const result = await provider.setView(next);
       cache.current = { version: cache.current.version + 1, pages: /* @__PURE__ */ new Map() };
+      selectionCells.current.clear();
       inFlight.current.clear();
       setViewRowCount(result.viewRowCount);
       setStaleView(false);
@@ -951,7 +954,9 @@ function DataGrid({
     if (rowId === void 0 || !cells) return null;
     return { rowId, cells };
   }, []);
+  const viewVersion = cache.current.version;
   useEffect(() => {
+    selectionCells.current.clear();
     if (!selection || !schema) return;
     const { r0, r1 } = normalizedRange(selection);
     if ((r1 - r0 + 1) * schema.columns.length > COPY_CELL_CAP) return;
@@ -964,11 +969,13 @@ function DataGrid({
         page.cells.forEach((cells, index) => rows.set(page.start + index, cells));
       }
       selectionCells.current = rows;
-    })();
+    })().catch(() => {
+      if (!cancelled) selectionCells.current.clear();
+    });
     return () => {
       cancelled = true;
     };
-  }, [provider, schema, selection]);
+  }, [provider, schema, selection, viewVersion, dirtyTick]);
   const handleCopy = useCallback(
     (event) => {
       if (!selection || !schema || editing) return;
@@ -981,7 +988,7 @@ function DataGrid({
       const lines = [];
       const htmlRows = [];
       for (let row = r0; row <= lastRow; row++) {
-        const cells = selectionCells.current.get(row) ?? cellAt(row)?.cells;
+        const cells = cellAt(row)?.cells ?? selectionCells.current.get(row);
         const values = [];
         for (let col = c0; col <= c1; col++) values.push(cellDisplay(cells?.[col] ?? null));
         lines.push(values.join("	"));
@@ -1265,6 +1272,7 @@ function DataGrid({
     (col, columnName, next) => {
       setFilterOps((prev) => ({ ...prev, [col]: next }));
       setOpMenuCol(null);
+      menuTriggerRef.current?.focus();
       const clause = viewRef.current.filter.find((entry) => entry.column === columnName);
       if (next.unary) {
         setColumnFilter(columnName, "", next.op, false, true);
@@ -1285,6 +1293,7 @@ function DataGrid({
       }));
       setOpMenuCol(null);
       setColumnFilter(columnName, "", prior.op, prior.caseSensitive);
+      menuTriggerRef.current?.focus();
     },
     [opStateFor, schema, setColumnFilter]
   );
@@ -1296,6 +1305,7 @@ function DataGrid({
   }, []);
   const toggleOpMenu = useCallback(
     (col, anchor) => {
+      menuTriggerRef.current = anchor;
       setValueMenuCol(null);
       setOpMenuPos(menuAnchorPos(anchor));
       setOpMenuCol((open) => open === col ? null : col);
@@ -1304,6 +1314,7 @@ function DataGrid({
   );
   const openValueMenu = useCallback(
     (col, anchor) => {
+      menuTriggerRef.current = anchor;
       setOpMenuCol(null);
       if (valueMenuCol === col) {
         setValueMenuCol(null);
@@ -1328,17 +1339,38 @@ function DataGrid({
       menu.style.top = `${Math.max(4, Math.min(parseFloat(menu.style.top) || 0, maxTop))}px`;
     }
   }, [opMenuCol, valueMenuCol, valueMenuData]);
+  useLayoutEffect(() => {
+    const menu = opMenuRef.current ?? valueMenuRef.current;
+    if (!menu || menu.contains(document.activeElement)) return;
+    (menu.querySelector('[aria-checked="true"]') ?? menu.querySelector('[role^="menuitem"]'))?.focus();
+  }, [opMenuCol, valueMenuCol, valueMenuData]);
+  const handleMenuKeyDown = (event) => {
+    if (event.key === "Tab") {
+      setOpMenuCol(null);
+      setValueMenuCol(null);
+      menuTriggerRef.current?.focus();
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    const items = [...event.currentTarget.querySelectorAll('[role^="menuitem"]')];
+    const current = items.indexOf(document.activeElement);
+    const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowUp" ? (current - 1 + items.length) % items.length : (current + 1) % items.length;
+    items[next]?.focus();
+  };
   const chooseFilterValue = useCallback(
     (col, columnName, value) => {
       setFilterOps((prev) => ({ ...prev, [col]: { op: "=", caseSensitive: false } }));
       setValueMenuCol(null);
       setColumnFilter(columnName, value, "=", false);
+      menuTriggerRef.current?.focus();
     },
     [setColumnFilter]
   );
   const moveFocus = useCallback(
     (rowDelta, colDelta, extend, absolute) => {
-      if (!schema) return;
+      if (!schema || viewRowCount === 0 || schema.columns.length === 0) return;
+      pendingCellFocus.current = true;
       setSelection((prev) => {
         const from = prev?.focus ?? { row: 0, col: 0 };
         const next = {
@@ -1354,10 +1386,16 @@ function DataGrid({
     },
     [schema, viewRowCount, virtualizer]
   );
+  useLayoutEffect(() => {
+    if (!pendingCellFocus.current || editing || !focusRef.current) return;
+    focusRef.current.focus();
+    pendingCellFocus.current = false;
+  });
   const handleKeyDown = useCallback(
     (event) => {
-      if (!schema) return;
+      if (!schema || event.defaultPrevented) return;
       const target = event.target;
+      if (!target?.closest('[role="gridcell"]')) return;
       const inTextEntry = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target !== null && target.isContentEditable;
       if (inTextEntry && !editing) return;
       const meta = event.metaKey || event.ctrlKey;
@@ -1374,7 +1412,7 @@ function DataGrid({
         }
         return;
       }
-      const pageRows = Math.max(1, Math.floor(height / ROW_HEIGHT) - 1);
+      const pageRows = Math.max(1, Math.floor(height / rowHeight) - 1);
       switch (event.key) {
         case "ArrowDown":
           moveFocus(
@@ -1454,6 +1492,7 @@ function DataGrid({
       commitEdit,
       editing,
       height,
+      rowHeight,
       moveFocus,
       runJournal,
       schema,
@@ -1483,16 +1522,13 @@ function DataGrid({
     ).join(" ");
   }, [colWidths, defaultColumnWidths, schema]);
   const range = selection ? normalizedRange(selection) : null;
+  const focusRowRendered = selection && virtualItems.some((item) => item.index === selection.focus.row);
   const filterValueFor = (name) => view.filter.find((clause) => clause.column === name)?.value ?? "";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rootRef,
       className: `squisq-grid${className ? ` ${className}` : ""}`,
-      role: "grid",
-      "aria-rowcount": viewRowCount + 1,
-      "aria-colcount": schema?.columns.length ?? 0,
-      "aria-multiselectable": "true",
       onKeyDown: handleKeyDown,
       onCopy: handleCopy,
       onPaste: handlePaste,
@@ -1506,15 +1542,22 @@ function DataGrid({
         }
       },
       onKeyDownCapture: (event) => {
-        if (event.key !== "Escape") return;
+        if (event.key !== "Escape" || opMenuCol === null && valueMenuCol === null) return;
+        event.preventDefault();
+        event.stopPropagation();
         if (opMenuCol !== null) setOpMenuCol(null);
         if (valueMenuCol !== null) setValueMenuCol(null);
+        menuTriggerRef.current?.focus();
       },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: "squisq-grid-scroller",
+            role: "grid",
+            "aria-rowcount": viewRowCount + 1,
+            "aria-colcount": schema?.columns.length ?? 0,
+            "aria-multiselectable": "true",
             ref: bodyRef,
             style: { height },
             onScroll: () => {
@@ -1561,6 +1604,7 @@ function DataGrid({
                                   className: `squisq-grid-opbutton${opState.caseSensitive ? " squisq-grid-opbutton--cs" : ""}`,
                                   "aria-label": `Filter operator for ${column.name}`,
                                   "aria-expanded": opMenuCol === col,
+                                  "aria-haspopup": "menu",
                                   title: `${opChoicesFor(column.kind).find((c) => choiceMatches(c, opState))?.label ?? opState.op}${opState.caseSensitive ? " (case-sensitive)" : ""}`,
                                   onClick: (event) => toggleOpMenu(col, event.currentTarget),
                                   children: [
@@ -1592,6 +1636,7 @@ function DataGrid({
                                   className: "squisq-grid-valuebutton",
                                   "aria-label": `Filter ${column.name} by value`,
                                   "aria-expanded": valueMenuCol === col,
+                                  "aria-haspopup": "menu",
                                   title: "Filter by value",
                                   onClick: (event) => openValueMenu(col, event.currentTarget),
                                   children: "\u25BE"
@@ -1659,8 +1704,14 @@ function DataGrid({
                           ...locked && lockedReason ? { title: lockedReason } : formula !== void 0 ? { title: `=${formula}` } : {},
                           ...locked ? { "aria-readonly": "true" } : {},
                           className: classes,
-                          tabIndex: isFocus ? 0 : -1,
+                          tabIndex: isFocus || !focusRowRendered && item.index === virtualItems[0]?.index && col === 0 ? 0 : -1,
                           ref: isFocus ? focusRef : void 0,
+                          onFocus: () => {
+                            const pos = { row: item.index, col };
+                            setSelection(
+                              (prev) => prev?.focus.row === pos.row && prev.focus.col === pos.col ? prev : { anchor: pos, focus: pos }
+                            );
+                          },
                           onMouseDown: (event) => {
                             const pos = { row: item.index, col };
                             setSelection(
@@ -1673,6 +1724,8 @@ function DataGrid({
                             {
                               className: `squisq-grid-editor${editing.error ? " squisq-grid-editor--error" : ""}`,
                               autoFocus: true,
+                              "aria-label": `Edit ${column.name}, row ${item.index + 1}`,
+                              "aria-invalid": editing.error ? true : void 0,
                               value: editing.draft,
                               title: editing.error,
                               onChange: (event) => setEditing({ ...editing, draft: event.target.value, error: void 0 }),
@@ -1702,6 +1755,8 @@ function DataGrid({
               ref: opMenuRef,
               className: "squisq-grid-opmenu",
               role: "menu",
+              "aria-label": `Filter operator for ${column.name}`,
+              onKeyDown: handleMenuKeyDown,
               style: { left: opMenuPos.left, top: opMenuPos.top },
               children: [
                 filterActive && /* @__PURE__ */ jsx(
@@ -1733,21 +1788,24 @@ function DataGrid({
                   },
                   `${choice.op}${choice.unary ? "0" : ""}`
                 )),
-                caseCapable && /* @__PURE__ */ jsxs("label", { className: "squisq-grid-opcase", children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: opState.caseSensitive,
-                      onChange: (event) => chooseFilterOp(col, column.name, {
-                        op: opState.op,
-                        caseSensitive: event.target.checked,
-                        ...opState.unary ? { unary: true } : {}
-                      })
-                    }
-                  ),
-                  "Case sensitive"
-                ] })
+                caseCapable && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitemcheckbox",
+                    "aria-checked": opState.caseSensitive,
+                    className: "squisq-grid-opoption squisq-grid-opcase",
+                    onClick: () => chooseFilterOp(col, column.name, {
+                      op: opState.op,
+                      caseSensitive: !opState.caseSensitive,
+                      ...opState.unary ? { unary: true } : {}
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: opState.caseSensitive ? "\u2713" : "\u25A1" }),
+                      "Case sensitive"
+                    ]
+                  }
+                )
               ]
             }
           );
@@ -1763,6 +1821,8 @@ function DataGrid({
               ref: valueMenuRef,
               className: "squisq-grid-valuemenu",
               role: "menu",
+              "aria-label": `Filter ${column.name} by value`,
+              onKeyDown: handleMenuKeyDown,
               style: { left: valueMenuPos.left, top: valueMenuPos.top },
               children: valueMenuData?.col === col ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 filterActive && /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-grid-react",
-  "version": "2.11.20",
+  "version": "2.11.21",
   "description": "Virtualized data grid for squisq data sidecars: columnar worker store, TableQueryProvider, and a TanStack-Virtual React renderer",
   "license": "MIT",
   "author": "Bendyline",