@ai-matrx/design-system 0.21.9 → 0.21.11

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),
@@ -5117,7 +5131,7 @@ function passesColumnFilter(value, filter) {
         if (selected.length === 0) return true;
         const values = selectCellValues(value);
         return selected.some(
-          (v) => v === SELECT_NULL_VALUE ? value == null : 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": {
@@ -5885,6 +5899,7 @@ function ColumnHeaderCell({
   onFilterChange,
   selectOptions = [],
   selectSingle = false,
+  selectAllowCustom = false,
   align = "left",
   className,
   compact = false,
@@ -5920,9 +5935,13 @@ function ColumnHeaderCell({
   const filterActive = isColumnFilterActive(filterValue);
   const deferredFilter = filterApplyLabel !== void 0 || filterShowCancel || filterFooterHint !== void 0;
   const [filterOpen, setFilterOpen] = (0, import_react13.useState)(false);
+  const [pendingNegation, setPendingNegation] = (0, import_react13.useState)(false);
   const [draftFilter, setDraftFilter] = (0, import_react13.useState)(filterValue);
   (0, import_react13.useEffect)(() => {
-    if (!filterOpen) setDraftFilter(filterValue);
+    if (!filterOpen) {
+      setDraftFilter(filterValue);
+      setPendingNegation(filterValue?.negated ?? false);
+    }
   }, [filterOpen, filterValue]);
   const applyFilter = () => {
     onFilterChange(draftFilter);
@@ -5934,6 +5953,7 @@ function ColumnHeaderCell({
   };
   const visibleFilter = deferredFilter ? draftFilter : filterValue;
   const setNegated = (negated) => {
+    setPendingNegation(negated);
     if (!visibleFilter) return;
     const next = { ...visibleFilter, ...negated ? { negated: true } : {} };
     if (!negated) delete next.negated;
@@ -6010,12 +6030,13 @@ function ColumnHeaderCell({
             kind: filterKind,
             value: visibleFilter,
             onChange: (next) => {
-              const preservingNegation = next && visibleFilter?.negated ? { ...next, negated: true } : next;
+              const preservingNegation = next && (visibleFilter?.negated ?? pendingNegation) ? { ...next, negated: true } : next;
               if (deferredFilter) setDraftFilter(preservingNegation);
               else onFilterChange(preservingNegation);
             },
             selectOptions,
             selectSingle,
+            selectAllowCustom,
             ...markerLabels ? {
               booleanLabels: {
                 all: "All",
@@ -6026,18 +6047,18 @@ function ColumnHeaderCell({
             allowNullModes
           }
         ) : null,
-        filterKind && visibleFilter && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
+        filterKind && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Match mode" }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-md border p-0.5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "button",
               {
                 type: "button",
-                "aria-pressed": !visibleFilter.negated,
+                "aria-pressed": !(visibleFilter?.negated ?? pendingNegation),
                 onClick: () => setNegated(false),
                 className: cn(
                   "rounded px-2 py-1.5 text-xs transition-colors",
-                  !visibleFilter.negated ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
+                  !(visibleFilter?.negated ?? pendingNegation) ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
                 ),
                 children: "Include"
               }
@@ -6046,11 +6067,11 @@ function ColumnHeaderCell({
               "button",
               {
                 type: "button",
-                "aria-pressed": visibleFilter.negated === true,
+                "aria-pressed": visibleFilter?.negated ?? pendingNegation,
                 onClick: () => setNegated(true),
                 className: cn(
                   "rounded px-2 py-1.5 text-xs transition-colors",
-                  visibleFilter.negated ? "bg-destructive text-destructive-foreground" : "text-muted-foreground hover:bg-muted"
+                  visibleFilter?.negated ?? pendingNegation ? "bg-destructive text-destructive-foreground" : "text-muted-foreground hover:bg-muted"
                 ),
                 children: "Exclude"
               }
@@ -6238,6 +6259,7 @@ function FilterBody({
   onChange,
   selectOptions,
   selectSingle = false,
+  selectAllowCustom = false,
   allowNullModes = false,
   booleanLabels
 }) {
@@ -6301,15 +6323,29 @@ function FilterBody({
   }
   if (kind === "select") {
     const selected = value?.kind === "select" ? value.values ?? (value.value && value.value !== "__all__" ? [value.value] : []) : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      SearchableSelectFilter,
-      {
-        selected,
-        options: selectOptions,
-        onChange,
-        single: selectSingle
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-2", children: [
+      allowNullModes && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-wrap gap-1", "aria-label": "Blank checks", children: [["empty", "(empty)"], ["not_empty", "(not empty)"], ["null", "(null)"], ["not_null", "(not null)"]].map(([mode, label]) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": value?.kind === "text" && value.mode === mode,
+          className: "rounded border px-1.5 py-0.5 text-[10px] hover:bg-muted",
+          onClick: () => onChange({ kind: "text", value: "", mode }),
+          children: label
+        },
+        mode
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        SearchableSelectFilter,
+        {
+          selected,
+          options: selectOptions,
+          onChange,
+          single: selectSingle,
+          allowCustom: selectAllowCustom
+        }
+      )
+    ] });
   }
   if (kind === "boolean") {
     const current = value?.kind === "boolean" ? value.value : "__all__";
@@ -6341,7 +6377,8 @@ function SearchableSelectFilter({
   selected,
   options,
   onChange,
-  single = false
+  single = false,
+  allowCustom = false
 }) {
   const [query, setQuery] = (0, import_react13.useState)("");
   const filtered = (0, import_react13.useMemo)(() => {
@@ -6354,7 +6391,7 @@ 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;
     }
@@ -6391,6 +6428,11 @@ function SearchableSelectFilter({
       /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandList, { className: "max-h-48", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CommandEmpty, { className: "py-3 text-xs text-muted-foreground", children: "No matches" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandGroup, { children: [
+          allowCustom && query.trim() && !options.some((option) => option.value === query.trim()) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandItem, { value: `custom:${query.trim()}`, onSelect: () => toggle(query.trim()), className: "text-xs", children: [
+            "Use \u201C",
+            query.trim(),
+            "\u201D"
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             CommandItem,
             {
@@ -8457,10 +8499,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) {
@@ -8469,12 +8514,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;
 }
@@ -8685,6 +8736,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 });
 }
@@ -8712,6 +8781,7 @@ function MatrxDataTableCore({
   hidePagination = false,
   filterUi,
   detail,
+  expandedDetail,
   window: windowConfig,
   copy,
   contextMenu,
@@ -8739,6 +8809,7 @@ function MatrxDataTableCore({
   tableClassName,
   mobileCards,
   mobileCardsBreakpoint = "sm",
+  getRowHref,
   onRowOpen,
   density
 }) {
@@ -9217,7 +9288,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 },
@@ -9573,7 +9649,20 @@ function MatrxDataTableCore({
     setWindowRowId(null);
     setWindowRowSnapshot(null);
   };
+  const canExpandRow = (row) => Boolean(expandedDetail && (expandedDetail.canExpand?.(row) ?? true));
+  const isRowExpanded = (row) => canExpandRow(row) && expandedDetail?.expandedId === getRowId(row);
+  const toggleExpanded = (row) => {
+    if (!expandedDetail || !canExpandRow(row)) return;
+    const id = getRowId(row);
+    expandedDetail.onExpandedIdChange(
+      expandedDetail.expandedId === id ? null : id
+    );
+  };
   const openRow = (row) => {
+    if (canExpandRow(row)) {
+      toggleExpanded(row);
+      return;
+    }
     if (opensWindowOnRowClick) {
       openWindow(row);
       return;
@@ -9677,7 +9766,11 @@ function MatrxDataTableCore({
       } : {},
       ...editEnabled && visibleColumns.some(
         (column) => column.editable && (column.editableIf?.(row) ?? true)
-      ) ? { beginEdit: () => beginRowEdit(row) } : {}
+      ) ? { beginEdit: () => beginRowEdit(row) } : {},
+      ...canExpandRow(row) ? {
+        isExpanded: isRowExpanded(row),
+        toggleExpanded: () => toggleExpanded(row)
+      } : {}
     };
   };
   const hierarchyRows = hierarchy?.rows ?? data;
@@ -10583,6 +10676,7 @@ function MatrxDataTableCore({
                         ] }) }) : paginated.map((row, index) => {
                           const id = getRowId(row);
                           const displayRow = applyRowEdits(row, edits[id]);
+                          const controls = buildRecordControls(displayRow);
                           const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
                           return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { "data-row-id": id, className: "contents", children: mobileCards(displayRow, index, {
                             renderCell: (columnKey) => {
@@ -10617,10 +10711,15 @@ function MatrxDataTableCore({
                                       ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
                                     }
                                   ) : null,
-                                  renderRowActions(displayRow, buildRecordControls(displayRow))
+                                  renderRowActions(displayRow, controls)
                                 ]
                               }
-                            ) : null
+                            ) : null,
+                            ...canExpandRow(row) ? {
+                              isExpanded: isRowExpanded(row),
+                              toggleExpanded: () => toggleExpanded(row)
+                            } : {},
+                            expandedDetail: expandedDetail && isRowExpanded(row) ? expandedDetail.render(displayRow, controls) : null
                           }) }, id);
                         }),
                         appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -10810,6 +10909,7 @@ function MatrxDataTableCore({
                                                 onFilterChange: (next) => setColumnFilter(id, next),
                                                 selectOptions: meta?.options,
                                                 selectSingle: col.filterSingle,
+                                                selectAllowCustom: col.filterAllowCustom,
                                                 filterApplyLabel: filterUi?.applyLabel,
                                                 filterShowCancel: filterUi?.showCancel,
                                                 filterFooterHint: filterUi?.footerHint,
@@ -10846,9 +10946,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" })
                                       }
                                     )
                                   ] })
@@ -10887,6 +10987,7 @@ function MatrxDataTableCore({
                                   const isSelected = selectedId === id;
                                   const rowEdits = edits[id];
                                   const displayRow = applyRowEdits(row, rowEdits);
+                                  const controls = buildRecordControls(displayRow);
                                   const isChecked = selectedIdSet.has(id);
                                   const rowNode = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                                     "tr",
@@ -10894,15 +10995,28 @@ 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
                                         // desktop-only so densely layered mobile content stays crisp.
                                         "border-b border-border/60 bg-card transition-colors",
-                                        (detailEnabled || Boolean(onRowOpen)) && "cursor-pointer sm:hover:bg-muted/50",
+                                        (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer sm:hover:bg-muted/50",
                                         isSelected && "bg-muted",
                                         isChecked && "bg-primary/5",
                                         highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
@@ -11018,7 +11132,7 @@ function MatrxDataTableCore({
                                                       ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
                                                     }
                                                   ) : null,
-                                                  renderRowActions(displayRow, buildRecordControls(displayRow)),
+                                                  renderRowActions(displayRow, controls),
                                                   windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
                                                     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                                                       Button,
@@ -11049,15 +11163,36 @@ function MatrxDataTableCore({
                                     id
                                   );
                                   const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
-                                  return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                                    HierarchyDroppableRow,
+                                  const inlineDetail = expandedDetail && isRowExpanded(row) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                    "tr",
                                     {
-                                      id,
-                                      disabled: !canDropOn(row),
-                                      children: wrappedRow
+                                      "data-matrx-table-expanded-detail": id,
+                                      className: cn("bg-muted/20", expandedDetail.className),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                        "td",
+                                        {
+                                          colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
+                                          className: "p-4",
+                                          children: expandedDetail.render(displayRow, controls)
+                                        }
+                                      )
                                     },
-                                    id
-                                  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react20.Fragment, { children: wrappedRow }, id);
+                                    `${id}:expanded-detail`
+                                  ) : null;
+                                  return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react20.Fragment, { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                      HierarchyDroppableRow,
+                                      {
+                                        id,
+                                        disabled: !canDropOn(row),
+                                        children: wrappedRow
+                                      }
+                                    ),
+                                    inlineDetail
+                                  ] }, id) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react20.Fragment, { children: [
+                                    wrappedRow,
+                                    inlineDetail
+                                  ] }, id);
                                 }),
                                 appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                                   "td",