@ai-matrx/design-system 0.20.2 → 0.20.5

package/dist/data-table/index.cjs

@@ -6850,6 +6850,17 @@ function tokenFromColumnName(name) {
   return name.endsWith("_id") ? name.slice(0, -3) : null;
 }
 
+// src/data-table/display-value.ts
+function formatTableDisplayValue(value) {
+  if (typeof value === "number") return value.toLocaleString(void 0, { maximumFractionDigits: 12 });
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(value) && !Number.isNaN(Date.parse(value))) {
+    return new Date(value).toLocaleString();
+  }
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return stringifyCellValue(value) || "\u2014";
+}
+
 // src/data-table/DataRowInspector.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var noFieldToken = () => null;
@@ -6922,7 +6933,7 @@ function DataRowInspector({
               key
             );
           }
-          const formatted = formatValue(value);
+          const formatted = value !== null && typeof value === "object" && !(value instanceof Date) ? formatValue(value) : formatTableDisplayValue(value);
           const multiline = formatted.includes("\n") || formatted.length > 80;
           return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             "div",
@@ -7051,6 +7062,22 @@ function TabButton({
   );
 }
 
+// src/data-table/row-title.ts
+function defaultRowTitle(row, columns) {
+  const values = columns.map((column) => ({
+    id: columnId(column),
+    value: getCellValue(row, column)
+  })).filter(
+    (entry) => typeof entry.value === "string" && entry.value.trim().length > 0
+  );
+  const named = values.find(
+    ({ id, value: value2 }) => inferTableSearchRole(id) === "name" && !isUuidValue(value2)
+  );
+  const identity = values.find(({ id }) => id === "id" || id === "uuid") ?? values.find(({ id }) => inferTableSearchRole(id) === "id");
+  const value = (named ?? identity ?? values[0])?.value.trim();
+  return value ? isUuidValue(value) ? value.slice(0, 8) : value : "Details";
+}
+
 // src/data-table/DirtySavePill.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function DirtySavePill({
@@ -8544,25 +8571,6 @@ function MatrxDataTableCore({
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
   const rootRef = (0, import_react17.useRef)(null);
-  const setDiagnosticBoundaryRef = (0, import_react17.useCallback)((node) => {
-    rootRef.current = node;
-    if (!node) return;
-    node.style.setProperty("outline", "2px solid #2563eb", "important");
-    node.style.setProperty("outline-offset", "-2px", "important");
-    node.style.setProperty("isolation", "isolate", "important");
-    const position = window.getComputedStyle(node).position;
-    if (position === "" || position === "static") {
-      node.style.setProperty("position", "relative", "important");
-    }
-    const boundary = node.querySelector(":scope > [data-matrx-table-boundary]");
-    if (!boundary) return;
-    boundary.style.setProperty("position", "absolute", "important");
-    boundary.style.setProperty("inset", "0", "important");
-    boundary.style.setProperty("pointer-events", "none", "important");
-    boundary.style.setProperty("z-index", "2147483647", "important");
-    boundary.style.setProperty("box-sizing", "border-box", "important");
-    boundary.style.setProperty("border", "2px solid #2563eb", "important");
-  }, []);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
@@ -9603,7 +9611,7 @@ function MatrxDataTableCore({
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
           "div",
           {
-            ref: setDiagnosticBoundaryRef,
+            ref: rootRef,
             "data-matrx-table": true,
             "data-matrx-table-density": resolvedDensity,
             "data-url-state-table": urlState?.id,
@@ -9612,7 +9620,6 @@ function MatrxDataTableCore({
               className
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": "true", "data-matrx-table-boundary": true }),
               notice,
               savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
               toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
@@ -10691,7 +10698,7 @@ function MatrxDataTableCore({
                 {
                   title: resolveStringTitle(
                     detail?.title?.(selectedRow),
-                    defaultRowTitle(selectedRow, visibleColumns)
+                    defaultRowTitle(selectedRow, columns)
                   ),
                   titleNode: detail?.title?.(selectedRow),
                   description: detail?.description?.(selectedRow),
@@ -10758,7 +10765,7 @@ function MatrxDataTableCore({
                 {
                   isOpen: true,
                   onClose: closeWindow,
-                  title: windowConfig?.title?.(windowRow) ?? defaultRowTitle(windowRow, visibleColumns),
+                  title: windowConfig?.title?.(windowRow) ?? defaultRowTitle(windowRow, columns),
                   row: windowRow,
                   width: windowConfig?.width,
                   height: windowConfig?.height,
@@ -11090,7 +11097,8 @@ function normalizeColumnWidthsForColumns(widths, columns) {
 }
 function columnWidthVar(width, resizedWidth, id, resizable) {
   if (width === void 0 && resizedWidth === void 0 && !resizable) return void 0;
-  const fallback = resizedWidth === void 0 ? width === void 0 ? "auto" : typeof width === "number" ? `${width}px` : width : `${resizedWidth}px`;
+  const inferredWidth = resizable && inferTableSearchRole(id) === "name" ? "12rem" : "auto";
+  const fallback = resizedWidth === void 0 ? width === void 0 ? inferredWidth : typeof width === "number" ? `${width}px` : width : `${resizedWidth}px`;
   return {
     "--matrx-col-w": resizable ? `var(${columnResizeCssVar(id)}, ${fallback})` : fallback
   };
@@ -11140,19 +11148,12 @@ function renderCell(row, col, index) {
   if (typeof raw === "boolean") {
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: raw ? "rounded bg-emerald-500/10 px-1.5 py-0.5 text-xs text-emerald-600" : "rounded bg-slate-500/10 px-1.5 py-0.5 text-xs text-muted-foreground", children: raw ? "Yes" : "No" });
   }
-  const formatted = typeof raw === "number" ? raw.toLocaleString(void 0, { maximumFractionDigits: 12 }) : raw instanceof Date ? raw.toLocaleString() : typeof raw === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(raw) && !Number.isNaN(Date.parse(raw)) ? new Date(raw).toLocaleString() : stringifyCellValue(raw) || "\u2014";
+  const formatted = formatTableDisplayValue(raw);
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "block text-sm text-foreground", style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", overflowWrap: "anywhere" }, children: formatted }) }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { className: "max-w-md whitespace-pre-wrap break-words max-h-80 overflow-auto", children: typeof raw === "object" && raw !== null ? JSON.stringify(raw, null, 2) : formatted })
   ] });
 }
-function defaultRowTitle(row, columns) {
-  for (const col of columns) {
-    const v = getCellValue(row, col);
-    if (typeof v === "string" && v.trim()) return v;
-  }
-  return "Details";
-}
 function resolveStringTitle(title, fallback) {
   if (typeof title === "string" && title.trim()) return title;
   if (typeof title === "number") return String(title);