@ai-matrx/design-system 0.35.0 → 0.36.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.36.0 — 2026-09-23
+
+**A press inside a popover a grid cell opened is no longer a press on the cell.** (lane
+FIX-15.)
+
+React synthetic events propagate through the REACT tree, not the DOM tree. A Radix Popover
+portals its content to `document.body`, but that content is still a React child of the
+table cell that rendered it — so every mousedown, keystroke and clipboard event inside the
+popover was delivered to `useSpreadsheetGrid`'s own handlers as if the person had pressed
+the cell.
+
+On production (build `93970125f9`, 2026-09-22) that made the relation picker unusable: one
+real mouse click in its own `Search` box ran `cellProps.onMouseDown`, whose
+`preventDefault()` stopped the input taking focus and whose `focus()` moved focus to the
+spreadsheet scroll container; Radix saw focus leave its layer and dismissed the picker. The
+box could not be typed into at all, so 0.35.0's un-clipped Create offer behind it was
+unreachable by any person.
+
+* `useSpreadsheetGrid` now ignores any mouse, key or clipboard event whose real DOM target
+  is not inside the element the handler is bound to (`camePastAPortal`) — the test is DOM
+  containment, not a list of known overlays, so it covers a relation picker, a person
+  picker, a select, a date picker and a menu alike, today and tomorrow.
+* No consumer action. A table with no `spreadsheet` prop is untouched.
+
+Proof: `MatrxDataTable.sheet.test.tsx` clause 15 mounts a cell whose content is a real
+`createPortal` into `document.body` and fails on the pre-fix bytes (focus moved to the
+scroller) — RED then GREEN. Headless, against the live store on the records-ui grid harness
+at 1600×1000 and 375 wide: a real click leaves focus in the box, three typed characters
+keep the picker open and land in it, and the Create offer is hit-testable
+(`matrx-frontend/scripts/campaign-tests/fix15_the_pickers_search_box_survives_typing.mjs`;
+12 clauses fail on the pre-fix bytes).
+
 ## 0.35.0 — 2026-09-22
 
 **A popover may now be sized by its CONTENT, because a fixed width cannot be right for a

package/dist/data-table/index.cjs

@@ -8439,6 +8439,19 @@ function targetsAnEditor(target) {
   if (!element) return false;
   return element.closest("input, textarea, select, [contenteditable='true']") !== null;
 }
+function camePastAPortal(target, host) {
+  if (typeof Element === "undefined") return false;
+  const element = target instanceof Element ? target : null;
+  const owner = host instanceof Element ? host : null;
+  if (!element || !owner) return false;
+  return !owner.contains(element);
+}
+function camePastAPortalIntoTheContainer(target) {
+  if (typeof Element === "undefined") return false;
+  const element = target instanceof Element ? target : null;
+  if (!element) return false;
+  return element.closest('[data-matrx-table-spreadsheet="true"]') === null;
+}
 function useSpreadsheetGrid(options) {
   const [range, setRange] = (0, import_react15.useState)(null);
   const [fillTarget, setFillTarget] = (0, import_react15.useState)(null);
@@ -8610,6 +8623,7 @@ function useSpreadsheetGrid(options) {
       const current = optionsRef.current;
       if (!current) return;
       if (targetsAnEditor(event.target)) return;
+      if (camePastAPortalIntoTheContainer(event.target)) return;
       const accel = event.metaKey || event.ctrlKey;
       if (accel && (event.key === "z" || event.key === "Z")) {
         event.preventDefault();
@@ -8696,6 +8710,7 @@ function useSpreadsheetGrid(options) {
   const onCopy = (0, import_react15.useCallback)(
     (event) => {
       if (!optionsRef.current || !range || targetsAnEditor(event.target)) return;
+      if (camePastAPortalIntoTheContainer(event.target)) return;
       const text = selectionAsTsv();
       if (!text) return;
       event.preventDefault();
@@ -8706,6 +8721,7 @@ function useSpreadsheetGrid(options) {
   const onCut = (0, import_react15.useCallback)(
     (event) => {
       if (!optionsRef.current || !range || targetsAnEditor(event.target)) return;
+      if (camePastAPortalIntoTheContainer(event.target)) return;
       const text = selectionAsTsv();
       if (!text) return;
       event.preventDefault();
@@ -8718,6 +8734,7 @@ function useSpreadsheetGrid(options) {
     (event) => {
       const current = optionsRef.current;
       if (!current || current.paste === false || !range || targetsAnEditor(event.target)) return;
+      if (camePastAPortalIntoTheContainer(event.target)) return;
       const text = event.clipboardData?.getData("text/plain") ?? "";
       if (!text) return;
       event.preventDefault();
@@ -8801,6 +8818,7 @@ function useSpreadsheetGrid(options) {
         ...inFillPreview ? { "data-matrx-cell-fill-preview": "true" } : {},
         onMouseDown: (event) => {
           if (event.button !== 0) return;
+          if (camePastAPortal(event.target ?? null, event.currentTarget)) return;
           event.preventDefault();
           const origin = event.currentTarget;
           if (typeof HTMLElement !== "undefined" && origin instanceof HTMLElement) {