@ai-matrx/design-system 0.48.6 → 0.48.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.48.7
+### Unreleased
+
+### DATA-V2-BASICS (2026-09-27): a click off the table lets go
+
+- **`useSpreadsheetGrid`: while a range is held, a pointerdown outside the table (its `[data-matrx-table]` root) and outside every layer it may have opened (menu, listbox, dialog, popper, toast) clears the range and takes the keyboard off the grid.** An open cell editor loses focus with it and saves as a Tab away would. Before, a 12-cell range survived a click on the page header or the sidebar while the keyboard fell to `<body>`, so Escape could not clear it either (Arman: "that's often the easiest way you get yourself out of strange state conditions").
+- Proof: `data-table/MatrxDataTable.outside-click-lets-go.test.tsx` (red on the previous hook: the range survived).
+
 ## 0.48.6
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/data-table/index.cjs

@@ -43019,6 +43019,7 @@ function camePastAPortalIntoTheContainer(target) {
   if (!element) return false;
   return element.closest('[data-matrx-table-spreadsheet="true"]') === null;
 }
+var LAYERS_THE_GRID_OPENS = '[data-radix-popper-content-wrapper], [data-radix-portal], [role="menu"], [role="listbox"], [role="dialog"], [role="alertdialog"], [data-sonner-toaster]';
 var READ_ONLY_REASON = "This table is view-only \u2014 you can select and copy, but not change cells.";
 function useSpreadsheetGrid(options) {
   const [range, setRange] = (0, import_react15.useState)(null);
@@ -43273,6 +43274,23 @@ function useSpreadsheetGrid(options) {
     },
     [endEdit, focusIsLost]
   );
+  const holdsARange = range !== null;
+  (0, import_react15.useEffect)(() => {
+    if (!holdsARange || typeof document === "undefined") return;
+    const onPointerDown = (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      const container = catcherRef.current?.closest('[data-matrx-table-spreadsheet="true"]');
+      if (!target || !container || !container.isConnected) return;
+      const table = container.closest("[data-matrx-table]") ?? container;
+      if (table.contains(target) || target.closest(LAYERS_THE_GRID_OPENS)) return;
+      setRange(null);
+      setFillTarget(null);
+      const active = document.activeElement;
+      if (active instanceof HTMLElement && container.contains(active)) active.blur();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [holdsARange]);
   const controller = (0, import_react15.useMemo)(() => ({ endEdit, select, focusGrid }), [endEdit, select, focusGrid]);
   const onKeyDown = (0, import_react15.useCallback)(
     (event) => {