@ai-matrx/records-ui 0.90.0 → 0.90.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.90.1 (2026-09-26 — merged grid 6n/6o live-walk fixes; needs @ai-matrx/design-system 0.44.3)
+
+- **The header's "+" is a button of its own, not a button inside the column-reorder button**
+  (found live: a real click on "+" did nothing, and React reported a nested button). The column
+  declares `reorderable: false` (design-system 0.44.3), so its label is never a drag handle and it
+  never moves among the data columns.
+- **Phone (6o), found live at 375 px:** the Tools button was scrolled past search and a 144 px "No
+  groups" picker, off the right edge. Search and Tools now sit side by side at the START of the row
+  (the same search query), and an ungrouped view draws no group picker on a phone.
+- **A key is never spread into JSX** (found live on the merged grid): `TablePage` spread
+  `{ key: "share" }` into `<ShareControl>`; the key is passed directly now, and
+  `a-key-is-never-spread-into-jsx.test.tsx` is a census of this package's source (it names the old
+  line on 0.90.0).
+
 ## 0.90.0 (2026-09-26 — merged grid tranches 6n + 6o, choice colours by option, DOM budget; needs @ai-matrx/records 0.58.22)
 
 - **6n · a row is added where you are.** The merged grid draws an "Add row" line under the last

package/dist/index.cjs

@@ -269,6 +269,8 @@ __export(src_exports, {
   formFromSummary: () => formFromSummary,
   formPresentation: () => formPresentation,
   formatForField: () => formatForField,
+  gridContextKey: () => gridContextKey,
+  gridContextSnapshot: () => gridContextSnapshot,
   groupInbox: () => groupInbox,
   groupLabel: () => groupLabel,
   handOrderLine: () => handOrderLine,
@@ -7316,6 +7318,8 @@ function addColumnColumn(onAdd) {
     sortable: false,
     filter: false,
     hideable: false,
+    // A control, never a drag handle: no button inside the reorder button, and it stays last.
+    reorderable: false,
     resizable: false,
     compact: true,
     width: 40
@@ -10653,6 +10657,7 @@ function Grid({
     const view = presentation.grouping;
     const field2 = view?.field ?? null;
     if (field2 === null && !onPresentationChange) return null;
+    if (field2 === null && merged && phone) return null;
     const aggregates = view && Object.keys(view.aggregates ?? {}).length > 0 ? view.aggregates : field2 ? { [field2]: { kind: "count" } } : void 0;
     return {
       columnId: field2,
@@ -10683,7 +10688,7 @@ function Grid({
         }
       } : {}
     };
-  }, [presentation, onPresentationChange, writeLook]);
+  }, [presentation, onPresentationChange, writeLook, merged, phone]);
   const labelOfField = (0, import_react57.useCallback)(
     (key) => {
       const held = (fields.data ?? []).find((f) => f.key === key);
@@ -11065,6 +11070,41 @@ function Grid({
                   toolbar: {
                     search: true,
                     searchPlaceholder: "Search records",
+                    /*
+                     * A PHONE (tranche 6o): search and the one Tools button sit side by side at the START of
+                     * the row, so Tools is never scrolled out of reach; the search is the same query.
+                     */
+                    ...merged && phone ? {
+                      customSearch: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", "data-records-grid-phone-search": "", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                          "input",
+                          {
+                            type: "search",
+                            value: query.search,
+                            placeholder: "Search",
+                            "aria-label": "Search records",
+                            onChange: (event) => {
+                              const search = event.target.value;
+                              setQuery((held) => ({ ...held, search, page: 1 }));
+                            },
+                            className: "h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                            style: { fontSize: "16px" }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                          import_design_system32.Button,
+                          {
+                            size: "sm",
+                            variant: "outline",
+                            className: "h-8 shrink-0",
+                            "data-records-grid-tools": "",
+                            "aria-haspopup": "dialog",
+                            onClick: () => setToolsOpen(true),
+                            children: "Tools"
+                          }
+                        )
+                      ] })
+                    } : {},
                     /* ONE ROW (lane TABLE-PAGE-CHROME): on a table page the grid's search, columns and
                        sort are drawn INTO the page's toolbar row, never a second bar under it. */
                     ...toolbarSlot !== void 0 ? { portalInto: toolbarSlot, singleRow: true } : {},
@@ -11115,32 +11155,18 @@ function Grid({
                         )
                       ] });
                       if (!merged || !phone) return all;
-                      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                          import_design_system32.Button,
-                          {
-                            size: "sm",
-                            variant: "outline",
-                            className: "h-8 shrink-0",
-                            "data-records-grid-tools": "",
-                            "aria-haspopup": "dialog",
-                            onClick: () => setToolsOpen(true),
-                            children: "Tools"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system32.BottomSheet, { open: toolsOpen, onOpenChange: setToolsOpen, title: "Table tools", surface: "solid", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                          "div",
-                          {
-                            "data-records-grid-tools-sheet": "",
-                            className: "flex flex-col items-stretch gap-1 px-3 pb-6 [&>button]:justify-start [&_button]:min-h-10",
-                            onClickCapture: (event) => {
-                              const target = event.target.closest("button");
-                              if (target && !target.hasAttribute("aria-haspopup")) setToolsOpen(false);
-                            },
-                            children: all
-                          }
-                        ) })
-                      ] });
+                      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system32.BottomSheet, { open: toolsOpen, onOpenChange: setToolsOpen, title: "Table tools", surface: "solid", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                        "div",
+                        {
+                          "data-records-grid-tools-sheet": "",
+                          className: "flex flex-col items-stretch gap-1 px-3 pb-6 [&>button]:justify-start [&_button]:min-h-10",
+                          onClickCapture: (event) => {
+                            const target = event.target.closest("button");
+                            if (target && !target.hasAttribute("aria-haspopup")) setToolsOpen(false);
+                          },
+                          children: all
+                        }
+                      ) }) });
                     })()
                   }
                 },
@@ -26929,8 +26955,9 @@ function TablePage({
         name: table.data?.name,
         may: rights.share,
         initiallyOpen: shareFromLink || shareAsked > 0,
-        ...phone ? { key: `share-${shareAsked}`, className: "hidden" } : { key: "share" }
-      }
+        ...phone ? { className: "hidden" } : {}
+      },
+      phone ? `share-${shareAsked}` : "share"
     ),
     /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_design_system85.DropdownMenu, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_design_system85.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_design_system85.Button, { size: "sm", variant: "ghost", "aria-label": "Table menu", title: "Table menu", "data-table-menu": "", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: [