@ai-matrx/records-ui 0.101.33 → 0.101.34

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.101.34
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.101.33..npm/records-ui/v0.101.34 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
 ## 0.101.33
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/index.cjs

@@ -5699,6 +5699,7 @@ var EMBEDDED_TABLE_CLASS = [
   "[&_thead_th:last-child]:border-r-0"
 ].join(" ");
 var EMBEDDED_PLAIN_FOOTER_CLASS = "[&_tfoot]:bg-transparent [&_tfoot]:border-t-0";
+var EMBEDDED_PAGE_SIZE = 50;
 
 // src/enumLabels.ts
 function exhaustiveValuesOf() {
@@ -21381,7 +21382,9 @@ function GridBody({
   onAskWhoChanged,
   embedded = false,
   newRowLabel,
-  sortOverride
+  sortOverride,
+  searchOverride,
+  onSearchChange
 }) {
   const toolbarSlot = useTableToolbarSlot();
   const tableCard = (0, import_data_table10.useMatrxTableCard)();
@@ -21458,6 +21461,14 @@ function GridBody({
       page: 1
     }));
   }, [overrideKey]);
+  const overrideSearchSeen = (0, import_react113.useRef)(void 0);
+  (0, import_react113.useEffect)(() => {
+    if (searchOverride === void 0) return;
+    const wanted = searchOverride ?? "";
+    if (overrideSearchSeen.current === wanted) return;
+    overrideSearchSeen.current = wanted;
+    setQuery((held) => held.search === wanted ? held : { ...held, search: wanted, page: 1 });
+  }, [searchOverride]);
   const reportQuery = address?.report;
   (0, import_react113.useEffect)(() => {
     if (!reportQuery) return;
@@ -21541,7 +21552,32 @@ function GridBody({
     filter: readFilter ?? null,
     version: records.data
   });
-  const pageRows = (0, import_react113.useMemo)(() => manual && !storePaged ? hand.rows ?? [] : storeRows, [manual, storePaged, hand.rows, storeRows]);
+  const embeddedMore = embedded && storePaged;
+  const [appendedRows, setAppendedRows] = (0, import_react113.useState)([]);
+  const [appending, setAppending] = (0, import_react113.useState)(false);
+  const askKey2 = JSON.stringify([tableId, searchTerm, pageSort, readFilter ?? null, viewId]);
+  (0, import_react113.useEffect)(() => setAppendedRows([]), [askKey2]);
+  const pageRows = (0, import_react113.useMemo)(() => {
+    if (manual && !storePaged) return hand.rows ?? [];
+    if (!embeddedMore || appendedRows.length === 0) return storeRows;
+    const seen = new Set(storeRows.map((row) => row.id));
+    return [...storeRows, ...appendedRows.filter((row) => !seen.has(row.id))];
+  }, [manual, storePaged, hand.rows, storeRows, embeddedMore, appendedRows]);
+  const showMoreRows = (0, import_react113.useCallback)(async () => {
+    if (appending || !embeddedMore) return;
+    setAppending(true);
+    const asked3 = await client.listPage({
+      table_id: tableId,
+      ...readFilter ? { filter: readFilter } : {},
+      search: searchTerm.trim() === "" ? null : searchTerm.trim(),
+      sort: pageSort,
+      view_id: manual && pageSort.length === 0 ? viewId : null,
+      limit: EMBEDDED_PAGE_SIZE,
+      offset: pageRows.length
+    });
+    setAppending(false);
+    if (asked3.ok) setAppendedRows((held) => [...held, ...asked3.data.rows]);
+  }, [appending, embeddedMore, client, tableId, readFilter, searchTerm, pageSort, manual, viewId, pageRows.length]);
   const added = useAddedRows({
     tableId,
     enabled: merged,
@@ -22721,6 +22757,21 @@ function GridBody({
   const tableToolbar = (0, import_react113.useMemo)(
     () => ({
       search: !embedded,
+      // EMBEDDED: Notion's magnifier — the design system's own search group, a button that
+      // opens into a field. It is the same `query.search` the store's read asks.
+      ...embedded ? {
+        customSearch: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          import_design_system58.TapTargetSearchGroup,
+          {
+            placeholder: "Search",
+            value: searchOverride ?? query.search,
+            onValueChange: (term) => {
+              setQuery((held) => ({ ...held, search: term, page: 1 }));
+              onSearchChange?.(term);
+            }
+          }
+        )
+      } : {},
       // The host (Spaces) has its own Properties menu: an embedded table draws no Columns button.
       ...embedded ? { columns: false } : {},
       searchPlaceholder: "Search records",
@@ -22921,7 +22972,9 @@ function GridBody({
       sheetExtras,
       tableId,
       noun,
-      embedded
+      embedded,
+      searchOverride,
+      onSearchChange
     ]
   );
   const labelOfField = (0, import_react113.useCallback)(
@@ -23127,7 +23180,7 @@ function GridBody({
                   pageSize,
                   query: tableQuery,
                   ...valueFacets ? { facets: valueFacets, filterUi: VALUE_FILTER_UI } : {},
-                  ...classicInCard ? { hidePagination: true } : {},
+                  ...classicInCard || embeddedMore ? { hidePagination: true } : {},
                   ...embedded ? { appearance: "embedded" } : {},
                   tableClassName: (0, import_design_system58.cn)(
                     !look.wrap && "[&_tbody_td]:max-w-[28rem] [&_tbody_td]:overflow-hidden [&_tbody_td]:text-ellipsis [&_tbody_td]:whitespace-nowrap! [&_tbody_td_*]:whitespace-nowrap!",
@@ -23232,7 +23285,15 @@ function GridBody({
                 onShowMore: () => setCardExtraRows((extra) => extra + pageSize)
               }
             ) : null
-          ) : storePaged || embedded ? null : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          ) : embeddedMore ? typeof records.data?.total === "number" && records.data.total > pageRows.length ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            import_data_table10.MatrxTableCardShowMore,
+            {
+              shown: pageRows.length,
+              total: records.data.total,
+              busy: appending,
+              onShowMore: () => void showMoreRows()
+            }
+          ) : null : storePaged || embedded ? null : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             Pager,
             {
               page,
@@ -23391,6 +23452,8 @@ function useEntitySource(token, options = {}) {
   const client = (0, import_react116.useRecordsClient)();
   const limit = options.limit ?? 50;
   const [tick, setTick] = (0, import_react115.useState)(0);
+  const held = (0, import_react115.useRef)(0);
+  const [loadingMore, setLoadingMore] = (0, import_react115.useState)(false);
   const [state, setState] = (0, import_react115.useState)({
     label: null,
     columns: [],
@@ -23403,7 +23466,7 @@ function useEntitySource(token, options = {}) {
   (0, import_react115.useEffect)(() => {
     let cancelled = false;
     const source = { kind: "entity", token };
-    void Promise.all([client.drillDescribe({ source }), client.drillRows({ source, limit })]).then(
+    void Promise.all([client.drillDescribe({ source }), client.drillRows({ source, limit: Math.max(limit, held.current) })]).then(
       ([def, page]) => {
         if (cancelled) return;
         if (!def.ok) return setState((s) => ({ ...s, loading: false, error: refusalSentence(def.error) || "This table could not be read." }));
@@ -23411,6 +23474,7 @@ function useEntitySource(token, options = {}) {
         const api = def.data.api;
         const shown4 = new Set(page.data.columns instanceof Array ? page.data.columns.filter((c) => typeof c === "string") : []);
         const columns = (api?.columns ?? []).filter((c) => c.api_name !== "id" && (shown4.size === 0 || shown4.has(c.api_name) || shown4.has(c.lookup?.via ?? "")));
+        held.current = (page.data.rows ?? []).length;
         setState({
           label: api?.label ?? def.data.label ?? token,
           columns,
@@ -23454,7 +23518,22 @@ function useEntitySource(token, options = {}) {
     },
     [client, token]
   );
-  return { ...state, write, create, reload };
+  const loadMore = (0, import_react115.useCallback)(async () => {
+    if (loadingMore) return;
+    setLoadingMore(true);
+    const source = { kind: "entity", token };
+    const next = await client.drillRows({ source, limit, offset: held.current });
+    setLoadingMore(false);
+    if (!next.ok) return;
+    const more = next.data.rows ?? [];
+    held.current += more.length;
+    setState((s) => {
+      const seen = new Set(s.rows.map((r) => r.id));
+      return { ...s, rows: [...s.rows, ...more.filter((r) => !seen.has(r.id))] };
+    });
+  }, [client, token, limit, loadingMore]);
+  const hasMore = !state.loading && state.total > state.rows.length;
+  return { ...state, write, create, reload, loadMore, hasMore, loadingMore };
 }
 function entityValueText(column, v) {
   if (v === null || v === void 0 || v === "") return "";
@@ -23484,7 +23563,7 @@ function entityTableColumns(columns) {
     ...c.type === "choice" && c.choices ? { filter: "select", filterOptions: c.choices.map((w) => ({ value: w, label: w })) } : {}
   }));
 }
-function EntityGrid({ entity, pageSize, drill }) {
+function EntityGrid({ entity, pageSize, drill, embedded }) {
   const columns = (0, import_react115.useMemo)(() => entityTableColumns(entity.columns), [entity.columns]);
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     import_data_table11.MatrxDataTable,
@@ -23494,7 +23573,8 @@ function EntityGrid({ entity, pageSize, drill }) {
       getRowId: (row) => String(row.id),
       isLoading: entity.loading,
       ...pageSize ? { pageSize } : {},
-      ...drill ? { drill } : {}
+      ...drill ? { drill } : {},
+      ...embedded ? { appearance: "embedded", hidePagination: true } : {}
     }
   );
 }
@@ -31547,10 +31627,12 @@ function ViewSwitcher({
   footer,
   embedded,
   sortOverride,
+  searchOverride,
+  onSearchChange,
   newRowLabel,
   className
 }) {
-  const pageSize = pageSizeAsked ?? (embedded ? 50 : 200);
+  const pageSize = pageSizeAsked ?? (embedded ? EMBEDDED_PAGE_SIZE : 200);
   const toolbarSlot = useTableToolbarSlot();
   const [layout, setLayout] = (0, import_react178.useState)(view.layout);
   const hostLayouts = useRecordsUi().layouts ?? [];
@@ -31612,6 +31694,8 @@ function ViewSwitcher({
         ...footer ? { footer } : {},
         ...embedded ? { embedded } : {},
         ...sortOverride !== void 0 ? { sortOverride } : {},
+        ...searchOverride !== void 0 ? { searchOverride } : {},
+        ...onSearchChange ? { onSearchChange } : {},
         ...newRowLabel ? { newRowLabel } : {},
         ...filter ? { filter } : {},
         ...onClearFilter ? { onClearFilter } : {},
@@ -46134,6 +46218,8 @@ function TablePage({
   tableId,
   presentation: pagePresentation2 = "page",
   newRowLabel,
+  searchOverride,
+  onSearchChange,
   pageSize: pageSizeAsked,
   seedViews,
   onLeave,
@@ -46227,7 +46313,7 @@ function TablePage({
   const face = tableOpening(view, hostLayouts.map((h) => h.id));
   const designated = face.kind === "designated";
   const embedded = pagePresentation2 === "embedded";
-  const pageSize = pageSizeAsked ?? (embedded ? 50 : 100);
+  const pageSize = pageSizeAsked ?? (embedded ? EMBEDDED_PAGE_SIZE : 100);
   const chooserInline = !embedded && !designated && !phone && toolbarFold2 < 2;
   const chooserCompact = !embedded && !designated && !phone && toolbarFold2 >= 2;
   const controlsInSheet = phone && !designated;
@@ -47018,6 +47104,8 @@ function TablePage({
                 chooser: false,
                 ...embedded ? { embedded } : {},
                 ...newRowLabel ? { newRowLabel } : {},
+                ...searchOverride !== void 0 ? { searchOverride } : {},
+                ...onSearchChange ? { onSearchChange } : {},
                 footer,
                 openExport: () => setRail("export"),
                 view: {
@@ -47180,6 +47268,7 @@ function usePublicReadOnly(client, organizationId, tableId, table, rights) {
 }
 
 // src/entityViews.tsx
+var import_data_table22 = require("@ai-matrx/design-system/data-table");
 var import_react267 = require("react");
 var import_design_system138 = require("@ai-matrx/design-system");
 var import_react268 = require("@ai-matrx/records/react");
@@ -47323,7 +47412,7 @@ function EntityChartBlock({ source, kind, by, measure, title, where, organizatio
 function EntityTablePage({
   source,
   presentation = "page",
-  pageSize = 100,
+  pageSize = presentation === "embedded" ? EMBEDDED_PAGE_SIZE : 100,
   layout: opened = "grid",
   onLayoutChange,
   groupBy,
@@ -47407,7 +47496,18 @@ function EntityTablePage({
       ] })
     ] }) : null,
     addRefused ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_design_system138.ErrorBox, { className: "rounded border border-destructive/40 px-1.5 py-1 text-xs text-destructive", message: addRefused, operation: "Add a row", origin: "records-ui/entityViews" }) : null,
-    entity.error ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "px-1 py-3 text-xs text-muted-foreground", children: `This table could not be read: ${entity.error}` }) : layout === "board" && boardable ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(EntityBoard, { entity, groupBy, onOpenRecord }) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(EntityGrid, { entity, pageSize, ...drill ? { drill } : {} })
+    entity.error ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "px-1 py-3 text-xs text-muted-foreground", children: `This table could not be read: ${entity.error}` }) : layout === "board" && boardable ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(EntityBoard, { entity, groupBy, onOpenRecord }) : /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(import_jsx_runtime153.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(EntityGrid, { entity, pageSize, embedded: presentation === "embedded", ...drill ? { drill } : {} }),
+      presentation === "embedded" && entity.hasMore ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+        import_data_table22.MatrxTableCardShowMore,
+        {
+          shown: entity.rows.length,
+          total: entity.total,
+          busy: entity.loadingMore,
+          onShowMore: () => void entity.loadMore()
+        }
+      ) : null
+    ] })
   ] });
 }