@ai-matrx/design-system 0.21.8 → 0.21.10

package/dist/data-table/index.cjs

@@ -1991,6 +1991,7 @@ function PageNavigationControl({
 }
 function PaginationAction({
   HostAction,
+  compact = false,
   active = false,
   disabledHint,
   visibilityClassName = "inline-flex",
@@ -2019,6 +2020,7 @@ function PaginationAction({
       onClick: props.onClick,
       className: cn(
         PAGINATION_ACTION_CLASS,
+        compact && "h-8 w-8 min-h-8 min-w-8",
         active && PAGINATION_ACTIVE_CLASS,
         fallbackClassName
       ),
@@ -2032,6 +2034,8 @@ var PAGINATION_ACTION_CLASS = "h-11 w-11 min-h-11 min-w-11 rounded-md border bor
 var PAGINATION_ACTIVE_CLASS = "border-primary bg-primary text-primary-foreground hover:bg-primary/90";
 function GenericTablePagination({
   totalItems,
+  unknownTotal,
+  isFetching = false,
   itemsPerPage,
   currentPage,
   onPageChange,
@@ -2072,11 +2076,12 @@ function GenericTablePagination({
       (_, i) => startPage + i
     );
   };
-  const isFirstPageDisabled = currentPage <= 1;
-  const isLastPageDisabled = currentPage >= totalPages;
+  const isFirstPageDisabled = isFetching || currentPage <= 1;
+  const isLastPageDisabled = isFetching || (unknownTotal ? !unknownTotal.hasNextPage : currentPage >= totalPages);
   const startItem = totalItems === 0 ? 0 : progressive ? 1 : (currentPage - 1) * effectiveItemsPerPage + 1;
   const endItem = Math.min(progressive?.shownCount ?? currentPage * effectiveItemsPerPage, totalItems);
   const defaultLabelFormat = (start, end, total) => {
+    if (unknownTotal) return `${unknownTotal.pageRowCount.toLocaleString()} on page ${currentPage.toLocaleString()}`;
     if (progressive) return progressive.loadedCount !== void 0 && progressive.loadedCount !== total ? `${end} shown / ${total} matching \xB7 ${progressive.loadedCount} loaded` : `${end} shown / ${total} loaded`;
     return compact ? `${start}-${end} of ${total}` : `Showing ${start} to ${end} of ${total} entries`;
   };
@@ -2101,6 +2106,7 @@ function GenericTablePagination({
         children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           Select,
           {
+            disabled: isFetching,
             value: itemsPerPage.toString(),
             onValueChange: (value) => onItemsPerPageChange(parseInt(value)),
             children: [
@@ -2117,7 +2123,7 @@ function GenericTablePagination({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SelectContent, { children: [
                 availablePageSizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectItem, { value: size.toString(), children: size }, size)),
-                showAllOption ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectItem, { value: allValue.toString(), children: allOptionLabel }) : null
+                showAllOption && !unknownTotal ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectItem, { value: allValue.toString(), children: allOptionLabel }) : null
               ] })
             ]
           }
@@ -2129,7 +2135,7 @@ function GenericTablePagination({
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
         children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: progressive ? `${endItem}/${totalItems} ${progressive.loadedCount !== void 0 && progressive.loadedCount !== totalItems ? "matching" : "loaded"}` : `${startItem}-${endItem} / ${totalItems}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: labelFormat ? formatLabel(startItem, endItem, totalItems) : unknownTotal ? defaultLabelFormat(startItem, endItem, totalItems) : progressive ? `${endItem}/${totalItems} ${progressive.loadedCount !== void 0 && progressive.loadedCount !== totalItems ? "matching" : "loaded"}` : `${startItem}-${endItem} / ${totalItems}` }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "span",
             {
@@ -2154,7 +2160,7 @@ function GenericTablePagination({
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipContent, { children: "Show more already-loaded rows" })
-    ] }) : null : showPageControls && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    ] }) : null : showPageControls && (unknownTotal ? currentPage > 1 || unknownTotal.hasNextPage : totalPages > 1) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn(
@@ -2167,8 +2173,9 @@ function GenericTablePagination({
             PaginationAction,
             {
               HostAction: host.ToolbarAction,
+              compact,
               ariaLabel: "First page",
-              disabledHint: "Already on the first page",
+              disabledHint: isFetching ? "Loading source page" : "Already on the first page",
               visibilityClassName: "hidden sm:inline-flex",
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(1),
@@ -2180,41 +2187,46 @@ function GenericTablePagination({
             PaginationAction,
             {
               HostAction: host.ToolbarAction,
+              compact,
               ariaLabel: "Previous page",
-              disabledHint: "Already on the first page",
+              disabledHint: isFetching ? "Loading source page" : "Already on the first page",
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage - 1),
               disabled: isFirstPageDisabled,
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronLeft, { className: "h-5 w-5" })
             }
           ),
-          getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          !unknownTotal && getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             PaginationAction,
             {
               HostAction: host.ToolbarAction,
+              compact,
               ariaLabel: `Page ${page}`,
               active: currentPage === page,
-              disabledHint: `Already on page ${page}`,
+              disabledHint: isFetching ? "Loading source page" : `Already on page ${page}`,
               visibilityClassName: cn(
                 "sm:hidden",
                 page === currentPage ? "inline-flex" : "hidden min-[360px]:inline-flex"
               ),
               fallbackClassName: page === currentPage ? pageActiveButtonClassName : pageButtonClassName,
               onClick: () => onPageChange(page),
+              disabled: isFetching,
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: page })
             },
             `mobile-${page}`
           )),
-          getPageNumbers().map((page) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          !unknownTotal && getPageNumbers().map((page) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             PaginationAction,
             {
               HostAction: host.ToolbarAction,
+              compact,
               ariaLabel: `Page ${page}`,
               active: currentPage === page,
-              disabledHint: `Already on page ${page}`,
+              disabledHint: isFetching ? "Loading source page" : `Already on page ${page}`,
               visibilityClassName: "hidden sm:inline-flex",
               fallbackClassName: currentPage === page ? pageActiveButtonClassName : pageButtonClassName,
               onClick: () => onPageChange(page),
+              disabled: isFetching,
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: page })
             },
             `desktop-${page}`
@@ -2223,20 +2235,22 @@ function GenericTablePagination({
             PaginationAction,
             {
               HostAction: host.ToolbarAction,
+              compact,
               ariaLabel: "Next page",
-              disabledHint: "Already on the last page",
+              disabledHint: isFetching ? "Loading source page" : "Already on the last page",
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage + 1),
               disabled: isLastPageDisabled,
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-5 w-5" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          !unknownTotal && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             PaginationAction,
             {
               HostAction: host.ToolbarAction,
+              compact,
               ariaLabel: "Last page",
-              disabledHint: "Already on the last page",
+              disabledHint: isFetching ? "Loading source page" : "Already on the last page",
               visibilityClassName: "hidden sm:inline-flex",
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(totalPages),
@@ -5035,6 +5049,7 @@ function layeredFilterRuleSummary(rule, fields) {
 // src/data-table/filter-engine.ts
 var SELECT_EMPTY_VALUE = "__empty__";
 var SELECT_NOT_EMPTY_VALUE = "__not_empty__";
+var SELECT_NULL_VALUE = "__null__";
 function columnId(col) {
   if (col.id) return col.id;
   if (col.accessorKey) return String(col.accessorKey);
@@ -5109,11 +5124,14 @@ function passesColumnFilter(value, filter) {
         return s.toLowerCase().includes(q);
       }
       case "select": {
+        if (filter.values !== void 0 && filter.values.length === 0) {
+          return false;
+        }
         const selected = filter.values ?? (filter.value && filter.value !== "__all__" ? [filter.value] : []);
         if (selected.length === 0) return true;
         const values = selectCellValues(value);
         return selected.some(
-          (v) => v === SELECT_EMPTY_VALUE ? values.length === 0 : v === SELECT_NOT_EMPTY_VALUE ? values.length > 0 : values.includes(v)
+          (v) => v === SELECT_NULL_VALUE ? value == null : v === SELECT_EMPTY_VALUE ? values.length === 0 : v === SELECT_NOT_EMPTY_VALUE ? values.length > 0 : v === "" ? value === "" || Array.isArray(value) && value.includes("") : values.includes(v)
         );
       }
       case "boolean": {
@@ -5194,7 +5212,7 @@ function countActiveColumnFilters(filters) {
         if (f.value.trim() || f.mode && f.mode !== "contains") n += 1;
         break;
       case "select":
-        if (f.values ? f.values.length > 0 : f.value && f.value !== "__all__")
+        if (f.values !== void 0 || f.value && f.value !== "__all__")
           n += 1;
         break;
       case "boolean":
@@ -5213,7 +5231,7 @@ function isColumnFilterActive(filter) {
     case "text":
       return filter.value.trim().length > 0 || filter.mode !== void 0 && filter.mode !== "contains";
     case "select":
-      return filter.values ? filter.values.length > 0 : Boolean(filter.value) && filter.value !== "__all__";
+      return filter.values !== void 0 ? true : Boolean(filter.value) && filter.value !== "__all__";
     case "boolean":
       return true;
     case "number":
@@ -6350,14 +6368,12 @@ function SearchableSelectFilter({
   const toggle = (v) => {
     if (single) {
       onChange(
-        selected.length === 1 && selected[0] === v ? void 0 : { kind: "select", value: v }
+        selected.length === 1 && selected[0] === v ? void 0 : { kind: "select", value: v, ...v === "" ? { values: [v] } : {} }
       );
       return;
     }
     const next = selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v];
-    onChange(
-      next.length === 0 ? void 0 : { kind: "select", value: next[0] ?? "", values: next }
-    );
+    onChange({ kind: "select", value: next[0] ?? "", values: next });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-1 px-0", children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between px-1 pb-1", children: [
@@ -6393,7 +6409,17 @@ function SearchableSelectFilter({
             CommandItem,
             {
               value: "__all__",
-              onSelect: () => onChange(void 0),
+              onSelect: () => single ? onChange(void 0) : onChange({
+                kind: "select",
+                value: options.find(
+                  (option) => option.value !== SELECT_NOT_EMPTY_VALUE
+                )?.value ?? "",
+                // `(not empty)` matches every populated value. Including
+                // it would make unchecking a concrete value ineffective.
+                values: options.filter(
+                  (option) => option.value !== SELECT_NOT_EMPTY_VALUE
+                ).map((option) => option.value)
+              }),
               className: "text-xs",
               children: "All"
             }
@@ -6413,6 +6439,9 @@ function SearchableSelectFilter({
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     "span",
                     {
+                      role: single ? "radio" : "checkbox",
+                      "aria-label": o.label,
+                      "aria-checked": active,
                       className: cn(
                         "flex h-3.5 w-3.5 shrink-0 items-center justify-center border",
                         single ? "rounded-full" : "rounded-sm",
@@ -8442,10 +8471,13 @@ function collectSelectOptions(col, rows) {
   const seen = /* @__PURE__ */ new Set();
   const options = [];
   let hasEmpty = false;
+  let hasEmptyCollection = false;
   for (const row of rows) {
-    const values = selectCellValues(getCellValue(row, col));
+    const cell = getCellValue(row, col);
+    const values = selectCellValues(cell);
     if (values.length === 0) {
       hasEmpty = true;
+      if (Array.isArray(cell)) hasEmptyCollection = true;
       continue;
     }
     for (const value of values) {
@@ -8454,12 +8486,18 @@ function collectSelectOptions(col, rows) {
       options.push({ value, label: value });
     }
   }
-  const base = col.filterOptions?.length ? [...col.filterOptions] : options.sort((a, b) => a.label.localeCompare(b.label));
+  const base = col.filterOptions?.length ? col.filterOptions.map((option) => ({
+    ...option,
+    label: option.label.trim() ? option.label : option.value === "" ? "(empty string)" : option.value.trim() ? option.value : "(whitespace)"
+  })) : options.sort((a, b) => a.label.localeCompare(b.label));
   if (hasEmpty) {
-    base.unshift(
-      { value: SELECT_EMPTY_VALUE, label: "(empty)" },
-      { value: SELECT_NOT_EMPTY_VALUE, label: "(not empty)" }
-    );
+    const emptyOption = !hasEmptyCollection && base.some((option) => option.value === "") ? { value: SELECT_NULL_VALUE, label: "(null)" } : { value: SELECT_EMPTY_VALUE, label: "(empty)" };
+    const additions = [];
+    if (!base.some((option) => option.value === emptyOption.value)) additions.push(emptyOption);
+    if (!base.some((option) => option.value === SELECT_NOT_EMPTY_VALUE)) {
+      additions.push({ value: SELECT_NOT_EMPTY_VALUE, label: "(not empty)" });
+    }
+    base.unshift(...additions);
   }
   return base;
 }
@@ -8670,6 +8708,24 @@ function MatrxDataTableWithUrlState({
   );
 }
 var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
+var ROW_INTERACTIVE_DESCENDANT_SELECTOR = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="combobox"]',
+  '[contenteditable="true"]',
+  "[data-matrx-cell-control]"
+].join(", ");
+function rowEventTargetsInteractiveDescendant(target) {
+  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+  return element?.closest(ROW_INTERACTIVE_DESCENDANT_SELECTOR) !== null;
+}
+function opensRowHref(event) {
+  return event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1;
+}
 function TableContextPassthrough({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children });
 }
@@ -8724,6 +8780,7 @@ function MatrxDataTableCore({
   tableClassName,
   mobileCards,
   mobileCardsBreakpoint = "sm",
+  getRowHref,
   onRowOpen,
   density
 }) {
@@ -9202,7 +9259,12 @@ function MatrxDataTableCore({
       0,
       ...visibleActionStrips.map((element) => Math.ceil(element.scrollWidth))
     );
-    const actionsWidth = actionContentWidth || headerActionsWidth;
+    const actionsHeader = table?.querySelector("th[data-matrx-table-actions-column]");
+    const actionsLabel = actionsHeader?.querySelector("[data-matrx-table-actions-label]");
+    const headerPadding = actionsHeader ? getComputedStyle(actionsHeader) : void 0;
+    const measuredLabelWidth = actionsLabel?.getBoundingClientRect().width ?? 0;
+    const labelWidth = measuredLabelWidth > 0 ? Math.ceil(measuredLabelWidth + (Number.parseFloat(headerPadding?.paddingLeft ?? "0") || 0) + (Number.parseFloat(headerPadding?.paddingRight ?? "0") || 0)) : 0;
+    const actionsWidth = Math.max(actionContentWidth, labelWidth) || headerActionsWidth;
     return {
       ...headerTotal > 0 ? { tableWidth: Math.ceil(headerTotal) } : {},
       ...selectionWidth === void 0 ? {} : { selectionWidth },
@@ -10831,9 +10893,9 @@ function MatrxDataTableCore({
                                       "th",
                                       {
                                         "data-matrx-table-actions-column": true,
-                                        className: "h-9 w-px px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                                        className: "h-9 w-px whitespace-nowrap px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
                                         style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
-                                        children: "Actions"
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-matrx-table-actions-label": true, className: "inline-block whitespace-nowrap", children: "Actions" })
                                       }
                                     )
                                   ] })
@@ -10879,9 +10941,22 @@ function MatrxDataTableCore({
                                       "data-row-id": id,
                                       "data-state": isSelected ? "selected" : void 0,
                                       onClick: (e) => {
-                                        if (e.target.closest('a, button, input, select, textarea, [role="button"], [role="combobox"], [contenteditable="true"]')) return;
+                                        if (rowEventTargetsInteractiveDescendant(e.target)) return;
+                                        if (opensRowHref(e)) {
+                                          const href = getRowHref?.(row);
+                                          if (href) window.open(href, "_blank", "noopener");
+                                          return;
+                                        }
                                         openRow(row);
                                       },
+                                      onAuxClick: (e) => {
+                                        if (e.button !== 1 || rowEventTargetsInteractiveDescendant(e.target)) return;
+                                        const href = getRowHref?.(row);
+                                        if (href) {
+                                          e.preventDefault();
+                                          window.open(href, "_blank", "noopener");
+                                        }
+                                      },
                                       className: cn(
                                         // Keep the mobile row opaque while the complete row scrolls
                                         // horizontally. The translucent zebra/hover tints remain