@ai-matrx/design-system 0.19.8 → 0.19.10

package/dist/data-table/index.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { f as MatrxDataTableProps, g as TableViewSnapshot } from '../types-BcIcmIxd.cjs';
-export { A as AnyOfColumnSearch, h as CellEditType, i as CellEditsMap, d as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, e as MatrxDataTableCopyConfig, j as MatrxDataTableDetailConfig, k as MatrxDataTableEditConfig, l as MatrxDataTableEmptyState, m as MatrxDataTableFilterUi, n as MatrxDataTableHierarchyConfig, o as MatrxDataTableHierarchyMove, p as MatrxDataTableMobileCardControls, q as MatrxDataTableQueryControl, c as MatrxDataTableQueryState, r as MatrxDataTableRecordControls, s as MatrxDataTableSelectionConfig, t as MatrxDataTableSourceProcessing, u as MatrxDataTableToolbar, v as MatrxDataTableUrlStateConfig, w as MatrxDataTableWindowConfig, x as MatrxTablePagination, y as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, z as TableViewQuery, B as TextFilterMode, D as ToolbarFacet } from '../types-BcIcmIxd.cjs';
+import { g as MatrxDataTableProps, h as TableViewSnapshot } from '../types-DqlfNcC5.cjs';
+export { A as AnyOfColumnSearch, i as CellEditType, j as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, c as MatrxDataTableDensity, k as MatrxDataTableDetailConfig, l as MatrxDataTableEditConfig, m as MatrxDataTableEmptyState, n as MatrxDataTableFilterUi, o as MatrxDataTableHierarchyConfig, p as MatrxDataTableHierarchyMove, q as MatrxDataTableMobileCardControls, r as MatrxDataTableQueryControl, d as MatrxDataTableQueryState, s as MatrxDataTableRecordControls, t as MatrxDataTableSelectionConfig, u as MatrxDataTableSourceProcessing, v as MatrxDataTableToolbar, w as MatrxDataTableUrlStateConfig, x as MatrxDataTableWindowConfig, y as MatrxTablePagination, z as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, B as TableViewQuery, D as TextFilterMode, E as ToolbarFacet } from '../types-DqlfNcC5.cjs';
 export { MatrxDataTableHost, MatrxDataTableProvider, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost } from './host.cjs';
 export { DataRowInspector } from './data-row-inspector.cjs';
 export { DataRowWindow, DataRowWindowProps, DataRowWindowTab } from './data-row-window.cjs';

package/dist/data-table/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { f as MatrxDataTableProps, g as TableViewSnapshot } from '../types-xTXSqmR7.js';
-export { A as AnyOfColumnSearch, h as CellEditType, i as CellEditsMap, d as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, e as MatrxDataTableCopyConfig, j as MatrxDataTableDetailConfig, k as MatrxDataTableEditConfig, l as MatrxDataTableEmptyState, m as MatrxDataTableFilterUi, n as MatrxDataTableHierarchyConfig, o as MatrxDataTableHierarchyMove, p as MatrxDataTableMobileCardControls, q as MatrxDataTableQueryControl, c as MatrxDataTableQueryState, r as MatrxDataTableRecordControls, s as MatrxDataTableSelectionConfig, t as MatrxDataTableSourceProcessing, u as MatrxDataTableToolbar, v as MatrxDataTableUrlStateConfig, w as MatrxDataTableWindowConfig, x as MatrxTablePagination, y as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, z as TableViewQuery, B as TextFilterMode, D as ToolbarFacet } from '../types-xTXSqmR7.js';
+import { g as MatrxDataTableProps, h as TableViewSnapshot } from '../types-lNw7TnTM.js';
+export { A as AnyOfColumnSearch, i as CellEditType, j as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, c as MatrxDataTableDensity, k as MatrxDataTableDetailConfig, l as MatrxDataTableEditConfig, m as MatrxDataTableEmptyState, n as MatrxDataTableFilterUi, o as MatrxDataTableHierarchyConfig, p as MatrxDataTableHierarchyMove, q as MatrxDataTableMobileCardControls, r as MatrxDataTableQueryControl, d as MatrxDataTableQueryState, s as MatrxDataTableRecordControls, t as MatrxDataTableSelectionConfig, u as MatrxDataTableSourceProcessing, v as MatrxDataTableToolbar, w as MatrxDataTableUrlStateConfig, x as MatrxDataTableWindowConfig, y as MatrxTablePagination, z as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, B as TableViewQuery, D as TextFilterMode, E as ToolbarFacet } from '../types-lNw7TnTM.js';
 export { MatrxDataTableHost, MatrxDataTableProvider, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost } from './host.js';
 export { DataRowInspector } from './data-row-inspector.js';
 export { DataRowWindow, DataRowWindowProps, DataRowWindowTab } from './data-row-window.js';

package/dist/data-table/index.js

@@ -1844,7 +1844,7 @@ function PaginationAction({
   ...props
 }) {
   if (HostAction) {
-    return /* @__PURE__ */ jsx20("span", { className: visibilityClassName, children: /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx20("span", { "data-matrx-table-icon-action": true, className: visibilityClassName, children: /* @__PURE__ */ jsx20(
       HostAction,
       {
         ...props,
@@ -1869,6 +1869,7 @@ function PaginationAction({
         fallbackClassName
       ),
       "aria-current": active ? "page" : void 0,
+      "data-matrx-table-icon-action": true,
       children: props.children
     }
   );
@@ -7912,10 +7913,10 @@ function TableToolbarAction({
   children
 }) {
   if (HostAction) {
-    return /* @__PURE__ */ jsx38(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children });
+    return /* @__PURE__ */ jsx38("span", { "data-matrx-table-toolbar-action": true, children: /* @__PURE__ */ jsx38(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children }) });
   }
   return /* @__PURE__ */ jsxs28(Tooltip, { children: [
-    /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38("span", { className: "inline-flex", children: /* @__PURE__ */ jsx38(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: isValidElement2(children) ? cloneElement2(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
+    /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38("span", { "data-matrx-table-toolbar-action": true, className: "inline-flex", children: /* @__PURE__ */ jsx38(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: isValidElement2(children) ? cloneElement2(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
     /* @__PURE__ */ jsx38(TooltipContent, { children: tooltip ?? ariaLabel })
   ] });
 }
@@ -8086,7 +8087,8 @@ function MatrxDataTableCore({
   tableClassName,
   mobileCards,
   mobileCardsBreakpoint = "sm",
-  onRowOpen
+  onRowOpen,
+  density
 }) {
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
@@ -8096,6 +8098,7 @@ function MatrxDataTableCore({
   const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
   const isFetching = appendQuery ? appendQuery.pagination.isFetchingNextPage : suppliedFetching;
   const host = useMatrxDataTableHost();
+  const resolvedDensity = density ?? host.defaultDensity ?? "normal";
   const SavedViews = host.SavedViews;
   const Link = host.Link ?? DefaultTableLink;
   const SidePanelSurface = host.SidePanelSurface ?? DefaultTableSidePanel;
@@ -8104,7 +8107,7 @@ function MatrxDataTableCore({
   const [toolbarActionError, setToolbarActionError] = useState18(null);
   const [toolbarActionPending, setToolbarActionPending] = useState18({ refresh: false, add: false });
   const toolbarActionPendingRef = useRef9({ refresh: false, add: false });
-  const CHECKBOX_TAP_AREA = "relative max-lg:before:absolute max-lg:before:left-1/2 max-lg:before:top-1/2 max-lg:before:h-11 max-lg:before:w-11 max-lg:before:-translate-x-1/2 max-lg:before:-translate-y-1/2 max-lg:before:content-['']";
+  const CHECKBOX_TAP_AREA = "h-4 w-4 touch-manipulation";
   const mobileCardsClass = mobileCardsBreakpoint === "lg" ? "lg:hidden" : "sm:hidden";
   const tableWithCardsClass = mobileCardsBreakpoint === "lg" ? "max-lg:hidden" : "max-sm:hidden";
   const controlledQuery = query?.mode === "controlled" || query?.mode === "controlled-local" || query?.mode === "controlled-append" ? query : null;
@@ -8525,13 +8528,23 @@ function MatrxDataTableCore({
       0
     );
     const selectionWidth = widthFor("th[data-matrx-table-selection-column]");
-    const actionsWidth = widthFor("th[data-matrx-table-actions-column]");
+    const headerActionsWidth = widthFor("th[data-matrx-table-actions-column]");
+    const visibleActionStrips = Array.from(
+      table?.querySelectorAll("[data-matrx-table-row-actions]") ?? []
+    ).filter(
+      (element) => element.closest("table") === table && element.getClientRects().length > 0
+    );
+    const actionContentWidth = Math.max(
+      0,
+      ...visibleActionStrips.map((element) => Math.ceil(element.scrollWidth))
+    );
+    const actionsWidth = actionContentWidth || headerActionsWidth;
     return {
       ...headerTotal > 0 ? { tableWidth: Math.ceil(headerTotal) } : {},
       ...selectionWidth === void 0 ? {} : { selectionWidth },
       ...actionsWidth === void 0 ? {} : { actionsWidth }
     };
-  }, []);
+  }, [resolvedDensity]);
   const captureResizeGestureSnapshot = useCallback5(() => {
     resizeGestureSnapshotRef.current = {
       widths: measureVisibleColumnWidths(),
@@ -8602,6 +8615,27 @@ function MatrxDataTableCore({
     }
     if (fixedTableGeometry === null) setFixedTableGeometry(measureFixedTableGeometry());
   }, [fixedTableGeometry, measureFixedTableGeometry, usesMeasuredFixedLayout]);
+  useLayoutEffect(() => {
+    if (!usesMeasuredFixedLayout) return;
+    const table = tableRef.current;
+    if (!table) return;
+    const utilityHeaders = Array.from(table.querySelectorAll(
+      "th[data-matrx-table-selection-column], th[data-matrx-table-actions-column]"
+    ));
+    const utilityStyles = utilityHeaders.map((header) => header.getAttribute("style"));
+    const resizedWidth = table.style.getPropertyValue("--matrx-resized-table-width");
+    for (const header of utilityHeaders) header.removeAttribute("style");
+    table.style.removeProperty("--matrx-resized-table-width");
+    void table.getBoundingClientRect();
+    const geometry = measureFixedTableGeometry();
+    utilityHeaders.forEach((header, index) => {
+      const style = utilityStyles[index];
+      if (style == null) header.removeAttribute("style");
+      else header.setAttribute("style", style);
+    });
+    table.style.setProperty("--matrx-resized-table-width", resizedWidth);
+    setFixedTableGeometry(geometry);
+  }, [resolvedDensity, measureFixedTableGeometry, usesMeasuredFixedLayout]);
   const fixedLayoutActive = usesMeasuredFixedLayout && fixedTableGeometry !== null;
   const declaredVisibleCopyColumns = useMemo6(
     () => visibleColumns.filter((column) => column.accessorFn !== void 0 || column.accessorKey !== void 0),
@@ -9407,16 +9441,10 @@ function MatrxDataTableCore({
           {
             ref: setDiagnosticBoundaryRef,
             "data-matrx-table": true,
+            "data-matrx-table-density": resolvedDensity,
             "data-url-state-table": urlState?.id,
             className: cn(
-              // The touch-target floor deliberately SKIPS checkboxes, radios and
-              // switches. Radix renders those as `<button role="checkbox">`, so the
-              // blanket `[&_button]` rule inflated a 14px checkbox into a 44×44
-              // bordered empty box — measured on Search Console → Queries at 375px,
-              // where every row read as an empty text input rather than a selection
-              // control. The control keeps its own size and gains the 44px tap area
-              // as an invisible ::before below.
-              "flex h-full min-h-0 flex-col gap-2 px-0 py-2 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-h-11 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-w-11 max-lg:[&_input]:min-h-11 max-lg:[&_table_a]:inline-flex max-lg:[&_table_a]:min-h-11 max-lg:[&_table_a]:items-center",
+              "flex h-full min-h-0 flex-col gap-2 px-0 py-2",
               className
             ),
             children: [
@@ -9428,7 +9456,7 @@ function MatrxDataTableCore({
                 TableTitleRow,
                 {
                   ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
-                  context: tableId && SavedViews ? /* @__PURE__ */ jsx38(
+                  context: tableId && SavedViews ? /* @__PURE__ */ jsx38("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx38(
                     SavedViews,
                     {
                       tableId,
@@ -9436,7 +9464,7 @@ function MatrxDataTableCore({
                       defaultSnapshot: declaredDefaultViewSnapshot,
                       onApply: applySavedView
                     }
-                  ) : void 0,
+                  ) }) : void 0,
                   search: showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ jsx38(
                     TableSearch,
                     {
@@ -9918,13 +9946,24 @@ function MatrxDataTableCore({
                                     className: "h-9 w-9 px-2 text-left align-middle",
                                     style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                     children: /* @__PURE__ */ jsx38(
-                                      Checkbox,
+                                      "div",
                                       {
-                                        className: CHECKBOX_TAP_AREA,
-                                        checked: allOnPageSelected ? true : someOnPageSelected ? "indeterminate" : false,
-                                        disabled: selectableRows.length === 0,
-                                        onCheckedChange: toggleAllOnPage,
-                                        "aria-label": allOnPageSelected ? "Clear selection on this page" : "Select every row on this page"
+                                        "data-matrx-table-selection-target": true,
+                                        onClick: (event) => {
+                                          if (event.target === event.currentTarget) {
+                                            event.currentTarget.querySelector('[role="checkbox"]')?.click();
+                                          }
+                                        },
+                                        children: /* @__PURE__ */ jsx38(
+                                          Checkbox,
+                                          {
+                                            className: CHECKBOX_TAP_AREA,
+                                            checked: allOnPageSelected ? true : someOnPageSelected ? "indeterminate" : false,
+                                            disabled: selectableRows.length === 0,
+                                            onCheckedChange: toggleAllOnPage,
+                                            "aria-label": allOnPageSelected ? "Clear selection on this page" : "Select every row on this page"
+                                          }
+                                        )
                                       }
                                     )
                                   }
@@ -10099,12 +10138,23 @@ function MatrxDataTableCore({
                                             style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                             onClick: (e) => e.stopPropagation(),
                                             children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ jsx38(
-                                              Checkbox,
+                                              "div",
                                               {
-                                                className: CHECKBOX_TAP_AREA,
-                                                checked: isChecked,
-                                                "aria-label": `Select this ${selectionNoun}`,
-                                                onClick: (e) => toggleRowSelected(index, e.shiftKey)
+                                                "data-matrx-table-selection-target": true,
+                                                onClick: (event) => {
+                                                  if (event.target === event.currentTarget) {
+                                                    event.currentTarget.querySelector('[role="checkbox"]')?.click();
+                                                  }
+                                                },
+                                                children: /* @__PURE__ */ jsx38(
+                                                  Checkbox,
+                                                  {
+                                                    className: CHECKBOX_TAP_AREA,
+                                                    checked: isChecked,
+                                                    "aria-label": `Select this ${selectionNoun}`,
+                                                    onClick: (e) => toggleRowSelected(index, e.shiftKey)
+                                                  }
+                                                )
                                               }
                                             ) : null
                                           }