@ai-matrx/records-ui 0.102.21 → 0.103.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.103.0
+
+- **Notion's calculation row on the embedded grid** (Spaces N6): every column's footer cell says "Calculate" on hover and offers Notion's list in Notion's words — Count all · Count unique values · Count empty · Count not empty · Percent empty · Percent not empty · Sum · Average · Median · Min · Max · Range — narrowed to what the column can mean and to the store's `custom.agg_operations`. The pick is reported through `onPresentationChange` as `summaries` (unchanged door). The band stays plain until one is picked.
+- The summary bar knows the store's three newer measures `percent_empty`, `percent_filled` (shown as a percent) and `range` (a date column's range in days).
+- `searchBox={false}` on `Grid` / `ViewSwitcher` / `TablePage` (and the built-in source's embedded views): the embedded grid draws no magnifier, for a host that draws its own and hands the term through `searchOverride` (Spaces N-19).
+- Both embedded magnifiers are `TapTargetSearchGroup surface="solid"` — no more `[tap-target] glass on a solid surface` on a page. Needs design-system 0.72.1.
+
+**Consumer action:** none required. A host drawing its own search field may pass `searchBox={false}`.
+
 ## 0.102.21
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/index.cjs

@@ -10520,8 +10520,29 @@ var MEASURE_LABEL = {
   median: "Median",
   filled: "Filled",
   empty: "Empty",
-  unique: "Unique"
+  unique: "Unique",
+  percent_empty: "Percent empty",
+  percent_filled: "Percent filled",
+  range: "Range"
 };
+var NOTION_CALCULATIONS = [
+  { op: "count", menu: "Count all", footer: "Count" },
+  { op: "unique", menu: "Count unique values", footer: "Unique" },
+  { op: "empty", menu: "Count empty", footer: "Empty" },
+  { op: "filled", menu: "Count not empty", footer: "Not empty" },
+  { op: "percent_empty", menu: "Percent empty", footer: "Empty" },
+  { op: "percent_filled", menu: "Percent not empty", footer: "Not empty" },
+  { op: "sum", menu: "Sum", footer: "Sum" },
+  { op: "avg", menu: "Average", footer: "Average" },
+  { op: "median", menu: "Median", footer: "Median" },
+  { op: "min", menu: "Min", footer: "Min" },
+  { op: "max", menu: "Max", footer: "Max" },
+  { op: "range", menu: "Range", footer: "Range" }
+];
+function calculationsFor(field2, storeOps) {
+  const offered = new Set(measuresFor(field2, storeOps, true));
+  return NOTION_CALCULATIONS.filter((c) => offered.has(c.op));
+}
 var NUMERIC_ONLY = /* @__PURE__ */ new Set(["sum", "avg", "median"]);
 var ARITHMETIC2 = /* @__PURE__ */ new Set([
   "add",
@@ -10539,7 +10560,7 @@ var ARITHMETIC2 = /* @__PURE__ */ new Set([
   "ceiling",
   "floor"
 ]);
-var ORDERED = /* @__PURE__ */ new Set(["min", "max"]);
+var ORDERED = /* @__PURE__ */ new Set(["min", "max", "range"]);
 function isNumericField(field2) {
   const kind = editorKindFor(field2);
   if (kind === "number" || kind === "currency" || kind === "percent" || kind === "rollup") return true;
@@ -13769,14 +13790,17 @@ function SummaryCell({
   value,
   rowCount,
   summaries,
-  onChoose
+  onChoose,
+  calculate = false
 }) {
   const offered = (0, import_react73.useMemo)(
-    () => summaries.operations ? measuresFor(field2, summaries.operations, firstColumn) : null,
-    [summaries.operations, field2, firstColumn]
+    () => summaries.operations ? calculate ? calculationsFor(field2, summaries.operations).map((c) => c.op) : measuresFor(field2, summaries.operations, firstColumn) : null,
+    [summaries.operations, field2, firstColumn, calculate]
   );
-  const label = chosen ? MEASURE_LABEL[chosen] ?? chosen : null;
-  const shown4 = chosen === void 0 ? null : summaries.loading && value === void 0 ? "\u2026" : value === null || value === void 0 ? "\u2014" : chosen === "count" || chosen === "filled" || chosen === "empty" || chosen === "unique" ? String(value) : null;
+  const words2 = (op2, where) => calculate ? NOTION_CALCULATIONS.find((c) => c.op === op2)?.[where] ?? MEASURE_LABEL[op2] ?? op2 : MEASURE_LABEL[op2] ?? op2;
+  const label = chosen ? words2(chosen, "footer") : null;
+  const isDate4 = editorKindFor(field2) === "datetime";
+  const shown4 = chosen === void 0 ? null : summaries.loading && value === void 0 ? "\u2026" : value === null || value === void 0 ? "\u2014" : chosen === "count" || chosen === "filled" || chosen === "empty" || chosen === "unique" ? String(value) : chosen === "percent_empty" || chosen === "percent_filled" ? `${Number(value.toFixed(2))}%` : chosen === "range" && isDate4 ? `${Math.round(value)} day${Math.round(value) === 1 ? "" : "s"}` : null;
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_design_system42.DropdownMenu, { onOpenChange: (open) => open ? summaries.askOperations() : void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system42.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       import_design_system42.Button,
@@ -13798,7 +13822,7 @@ function SummaryCell({
             // AGG-WITHHELD: the store withheld this column from her — say so, never a bare dash.
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WithheldValue, { field: field2, notice: summaries.withheld[field2.key] }) })
           ) : shown4 !== null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-medium tabular-nums", children: shown4 }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-medium tabular-nums", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RecordValue, { field: field2, value, format: formatForField(field2) }) })
-        ] }) : "Summarize"
+        ] }) : calculate ? "Calculate" : "Summarize"
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_design_system42.DropdownMenuContent, { align: "start", children: [
@@ -13809,13 +13833,13 @@ function SummaryCell({
           "data-records-summary-choice": op2,
           onSelect: () => onChoose(op2),
           className: (0, import_design_system42.cn)(op2 === chosen && "font-medium"),
-          children: MEASURE_LABEL[op2] ?? op2
+          children: words2(op2, "menu")
         },
         op2
       )),
       chosen ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system42.DropdownMenuSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system42.DropdownMenuItem, { onSelect: () => onChoose(null), children: "No summary" })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system42.DropdownMenuItem, { onSelect: () => onChoose(null), children: calculate ? "None" : "No summary" })
       ] }) : null
     ] })
   ] });
@@ -21789,7 +21813,8 @@ function GridBody({
   newRowLabel,
   sortOverride,
   searchOverride,
-  onSearchChange
+  onSearchChange,
+  searchBox = true
 }) {
   const toolbarSlot = useTableToolbarSlot();
   const tableCard = (0, import_data_table11.useMatrxTableCard)();
@@ -22784,6 +22809,7 @@ function GridBody({
           value: summaries.values[columnId2],
           rowCount: summaries.rowCount,
           summaries,
+          calculate: embedded,
           onChoose: (op2) => footerNow.current.choose(columnId2, op2)
         }
       );
@@ -23048,7 +23074,8 @@ function GridBody({
     [storePaged, query, queryTotal, classicInCard, records.data?.total]
   );
   const showAddLine = mayAddRow && rows.length > 0;
-  const showSummaryLine = rows.length > 0 && (embedded ? Object.keys(chosenSummaries).length > 0 : !merged || Object.keys(chosenSummaries).length > 0);
+  const showSummaryLine = rows.length > 0 && (embedded || !merged || Object.keys(chosenSummaries).length > 0);
+  const calculationChosen = Object.keys(chosenSummaries).length > 0;
   const footerFace = JSON.stringify([
     showAddLine ? added.busy : null,
     showSummaryLine ? [chosenSummaries, summaries.values, summaries.rowCount, summaries.loading] : null
@@ -23151,10 +23178,11 @@ function GridBody({
       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 ? {
+      ...embedded && searchBox ? {
         customSearch: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           import_design_system60.TapTargetSearchGroup,
           {
+            surface: "solid",
             placeholder: "Search",
             value: searchOverride ?? query.search,
             onValueChange: (term) => {
@@ -23366,7 +23394,8 @@ function GridBody({
       noun,
       embedded,
       searchOverride,
-      onSearchChange
+      onSearchChange,
+      searchBox
     ]
   );
   const labelOfField = (0, import_react113.useCallback)(
@@ -23588,7 +23617,7 @@ function GridBody({
                     !look.wrap && "[&_tbody_td]:max-w-[28rem] [&_tbody_td]:overflow-hidden [&_tbody_td]:text-ellipsis [&_tbody_td]:whitespace-nowrap! [&_tbody_td_*]:whitespace-nowrap!",
                     look.fit === "scroll" && "sm:[&>table]:w-max! sm:[&>table]:max-w-none! sm:[&>table]:min-w-full!",
                     embedded && EMBEDDED_TABLE_CLASS,
-                    embedded && !showSummaryLine && EMBEDDED_PLAIN_FOOTER_CLASS
+                    embedded && !calculationChosen && EMBEDDED_PLAIN_FOOTER_CLASS
                   ),
                   footerRows,
                   ...embedded ? { copy: false } : copyConfig ? { copy: copyConfig } : {},
@@ -32943,6 +32972,7 @@ function ViewSwitcher({
   sortOverride,
   searchOverride,
   onSearchChange,
+  searchBox,
   newRowLabel,
   className
 }) {
@@ -33010,6 +33040,7 @@ function ViewSwitcher({
         ...sortOverride !== void 0 ? { sortOverride } : {},
         ...searchOverride !== void 0 ? { searchOverride } : {},
         ...onSearchChange ? { onSearchChange } : {},
+        ...searchBox === false ? { searchBox } : {},
         ...newRowLabel ? { newRowLabel } : {},
         ...filter ? { filter } : {},
         ...onClearFilter ? { onClearFilter } : {},
@@ -47661,6 +47692,7 @@ function TablePage({
   newRowLabel,
   searchOverride,
   onSearchChange,
+  searchBox,
   pageSize: pageSizeAsked,
   seedViews,
   onLeave,
@@ -48550,6 +48582,7 @@ function TablePage({
                 ...newRowLabel ? { newRowLabel } : {},
                 ...searchOverride !== void 0 ? { searchOverride } : {},
                 ...onSearchChange ? { onSearchChange } : {},
+                ...searchBox === false ? { searchBox } : {},
                 footer,
                 openExport: () => setRail("export"),
                 view: {
@@ -48856,6 +48889,7 @@ function EntityTablePageBody({
   presentation = "page",
   searchOverride,
   onSearchChange,
+  searchBox = true,
   pageSize = presentation === "embedded" ? EMBEDDED_PAGE_SIZE : 100,
   layout: opened = "grid",
   onLayoutChange,
@@ -48943,9 +48977,10 @@ function EntityTablePageBody({
     ] }) : null,
     addRefused ? /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_design_system142.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_runtime156.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_runtime156.jsx)(EntityBoard, { entity, groupBy, onOpenRecord }) : /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(import_jsx_runtime156.Fragment, { children: [
-      presentation === "embedded" ? /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "flex min-w-0 items-center justify-end", "data-records-entity-search": "", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_design_system141.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+      presentation === "embedded" && searchBox ? /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "flex min-w-0 items-center justify-end", "data-records-entity-search": "", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_design_system141.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
         import_design_system141.TapTargetSearchGroup,
         {
+          surface: "solid",
           placeholder: "Search",
           value: term,
           onValueChange: (next) => {
@@ -48982,6 +49017,7 @@ function TablePage2(props) {
       ...rest.pageSize ? { pageSize: rest.pageSize } : {},
       ...rest.searchOverride !== void 0 ? { searchOverride: rest.searchOverride } : {},
       ...rest.onSearchChange ? { onSearchChange: rest.onSearchChange } : {},
+      ...rest.searchBox === false ? { searchBox: false } : {},
       ...layout ? { layout } : {},
       ...onLayoutChange ? { onLayoutChange } : {},
       ...groupBy ? { groupBy } : {},