@godxjp/ui 31.4.0 → 31.6.0

package/dist/components/data-display/data-table.js

@@ -336,7 +336,15 @@ function DataTable({
     onFilterChange?.(merged);
   };
   const rowSelectionKeys = rowSelection?.selectedRowKeys;
-  const rowSelectionState = rowSelectionKeys !== void 0 ? Object.fromEntries(rowSelectionKeys.map((key) => [key, true])) : controlledSelected !== void 0 ? selectionFromSet(controlledSelected) : internalSelection;
+  const ownSelectionState = rowSelectionKeys !== void 0 ? Object.fromEntries(rowSelectionKeys.map((key) => [key, true])) : controlledSelected !== void 0 ? selectionFromSet(controlledSelected) : internalSelection;
+  const isRowLocked = (row) => !!rowSelection?.getCheckboxProps?.(row).disabled;
+  const matching = rowSelection?.matching;
+  const rowSelectionState = matching?.selected ? {
+    ...ownSelectionState,
+    ...Object.fromEntries(
+      data.filter((row) => !isRowLocked(row)).map((row) => [getRowId(row), true])
+    )
+  } : ownSelectionState;
   const onSortingChange = (updater) => {
     const next = typeof updater === "function" ? updater(sortingState) : updater;
     if (columnSortOrders.length > 0) {
@@ -373,6 +381,9 @@ function DataTable({
       }
     }
     const keys = Object.keys(next).filter((key) => next[key]);
+    if (matching?.selected && data.some((row) => !isRowLocked(row) && !next[getRowId(row)])) {
+      matching.onSelectedChange(false);
+    }
     if (rowSelectionKeys === void 0 && controlledSelected === void 0) {
       setInternalSelection(next);
     }
@@ -418,7 +429,9 @@ function DataTable({
     // rows unsliced. Page count still derives from `rowCount`/the pre-paginated model either way.
     manualPagination: manualPagination || serverPaged || !paginationEngaged,
     rowCount: paginationConfig?.total ?? rowCount,
-    enableRowSelection: selectionEnabled,
+    // A function only when rows CAN be locked, so a table without `getCheckboxProps` is untouched.
+    // TanStack's page toggles and header tri-state then skip a locked row in both directions.
+    enableRowSelection: selectionEnabled && rowSelection?.getCheckboxProps ? (row) => !isRowLocked(row.original) : selectionEnabled,
     state: {
       sorting: sortingState,
       columnFilters,
@@ -586,41 +599,49 @@ DataTable.SelectAll = function DataTableSelectAll() {
     {
       checked: allSelected ? true : someSelected ? "indeterminate" : false,
       onCheckedChange: (v) => table.toggleAllPageRowsSelected(!!v),
-      "aria-label": t("dataTable.selectAll")
+      "aria-label": rowSelection?.selectAllLabel ?? // With `matching` on, the table is server-paged by declaration: this box selects the PAGE.
+      t(rowSelection?.matching ? "dataTable.selectPage" : "dataTable.selectAll")
     }
   );
   if (rowSelection?.columnTitle !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: rowSelection.columnTitle });
   if (!rowSelection?.selections) return box;
   const pageKeys = table.getRowModel().rows.map((row) => getRowId(row.original));
   const selectedKeys = table.getSelectedRowModel().rows.map((row) => getRowId(row.original));
-  const builtIn = [
-    {
+  const builtIn = {
+    SELECT_ALL: {
       key: "all",
       text: t("dataTable.selectAll"),
       onSelect: () => table.toggleAllPageRowsSelected(true)
     },
-    {
+    SELECT_INVERT: {
       key: "invert",
       text: t("dataTable.selectInvert"),
       onSelect: () => {
         table.setRowSelection(
           Object.fromEntries(
-            table.getRowModel().rows.filter((row) => !row.getIsSelected()).map((row) => [getRowId(row.original), true])
+            table.getRowModel().rows.filter(
+              (row) => (
+                // A locked row keeps its state; every other row flips.
+                row.getCanSelect() ? !row.getIsSelected() : row.getIsSelected()
+              )
+            ).map((row) => [getRowId(row.original), true])
           )
         );
       }
     },
-    {
+    SELECT_NONE: {
       key: "none",
       text: t("dataTable.selectNone"),
       onSelect: () => table.toggleAllPageRowsSelected(false)
     }
-  ];
-  const entries = rowSelection.selections === true ? builtIn : rowSelection.selections.map((entry) => ({
-    key: entry.key,
-    text: entry.text,
-    onSelect: () => entry.onSelect(pageKeys.length > 0 ? pageKeys : selectedKeys)
-  }));
+  };
+  const entries = rowSelection.selections === true ? [builtIn.SELECT_ALL, builtIn.SELECT_INVERT, builtIn.SELECT_NONE] : rowSelection.selections.map(
+    (entry) => typeof entry === "string" ? builtIn[entry] : {
+      key: entry.key,
+      text: entry.text,
+      onSelect: () => entry.onSelect(pageKeys.length > 0 ? pageKeys : selectedKeys)
+    }
+  );
   return /* @__PURE__ */ jsxs("span", { className: "ui-data-table-selection-menu", children: [
     box,
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -639,6 +660,9 @@ DataTable.SelectAll = function DataTableSelectAll() {
   ] });
 };
 DataTable.SelectAll.displayName = "DataTable.SelectAll";
+DataTable.SELECTION_ALL = "SELECT_ALL";
+DataTable.SELECTION_INVERT = "SELECT_INVERT";
+DataTable.SELECTION_NONE = "SELECT_NONE";
 DataTable.BulkActions = function DataTableBulkActions({
   count,
   children,
@@ -915,6 +939,13 @@ DataTable.Content = function DataTableContent() {
   };
   const dataRows = table.getRowModel().rows;
   const rowCount = dataRows.length;
+  const matching = rowSelection?.type === "radio" ? void 0 : rowSelection?.matching;
+  const matchingOffered = !!matching && !matching.selected && rowCount > 0 && matching.total > rowCount && table.getIsAllPageRowsSelected();
+  const matchingShown = !!matching && (matching.selected || matchingOffered);
+  const clearMatching = () => {
+    if (dataRows.some((row) => row.getCanSelect())) table.toggleAllPageRowsSelected(false);
+    else matching?.onSelectedChange(false);
+  };
   const scrollStyle = {};
   const scrollVars = scrollStyle;
   if (scroll?.x !== void 0) scrollVars["--table-scroll-inline-size"] = cssLength(scroll.x);
@@ -936,7 +967,7 @@ DataTable.Content = function DataTableContent() {
       "data-scroll-y": scroll?.y !== void 0 ? "" : void 0,
       "aria-busy": loading,
       ...scrolls ? { role: "group", "aria-label": scrollRegionLabel(label, t), tabIndex: 0 } : {},
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: "ui-data-table-surface",
@@ -944,386 +975,400 @@ DataTable.Content = function DataTableContent() {
           "data-table-layout": fixedTableLayout ? "fixed" : void 0,
           "data-striped": striped ? "" : void 0,
           "data-hoverable": hoverable ? "" : void 0,
-          children: /* @__PURE__ */ jsxs(
-            Table,
-            {
-              scrollable: preset !== "default",
-              label,
-              preset,
-              collapseBelow,
-              bordered,
-              striped,
-              children: [
-                /* @__PURE__ */ jsx(
-                  TableHeader,
-                  {
-                    className: cn("bg-secondary", stickyHeader && "ui-data-table-sticky-header"),
-                    children: /* @__PURE__ */ jsxs(TableRow, { children: [
-                      expandColumnShown && /* @__PURE__ */ jsx(
-                        TableHead,
-                        {
-                          className: cn(
-                            "ui-data-table-expand-column",
-                            leadingFixed === "start" && "ui-data-table-pin-start"
-                          ),
-                          ...fixedCellProps("__expand", leadingFixed),
-                          style: leadingFixedStyle("__expand"),
-                          children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: expandable?.columnTitle ?? t("dataTable.expandColumn") })
-                        }
-                      ),
-                      selectable && /* @__PURE__ */ jsx(
-                        TableHead,
-                        {
-                          className: cn(
-                            "ui-data-table-select-column",
-                            leadingFixed === "start" && "ui-data-table-pin-start"
-                          ),
-                          ...fixedCellProps("__select", leadingFixed),
-                          style: leadingFixedStyle("__select"),
-                          children: /* @__PURE__ */ jsx(DataTable.SelectAll, {})
-                        }
-                      ),
-                      visibleColumns.map((col) => {
-                        const isSortable = columnIsSortable(col);
-                        const activeDirection = directionOf(sortingState, col.key);
-                        const sortIndicator = isSortable ? activeDirection ? activeDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
-                          ChevronsUpDown,
-                          {
-                            className: "ui-data-table-sort-icon text-muted-foreground",
-                            "aria-hidden": "true"
-                          }
-                        ) : null;
-                        const headerEmpty = isEmptyHeader(col.header);
-                        const headerContent = headerEmpty && col.ariaLabel ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.ariaLabel }) : col.header;
-                        const label2 = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
-                          headerContent,
-                          sortIndicator
-                        ] });
-                        const tooltipOn = col.showSorterTooltip ?? showSorterTooltip;
-                        const nextDirection = nextSortDirection(
-                          activeDirection,
-                          columnSortDirections(col, sortDirections)
-                        );
-                        const sortHint = nextDirection === "asc" ? t("dataTable.sortAscending") : nextDirection === "desc" ? t("dataTable.sortDescending") : t("dataTable.sortCancel");
-                        const sortButton = /* @__PURE__ */ jsx(
-                          "button",
+          children: [
+            matching ? /* @__PURE__ */ jsxs("div", { className: "ui-data-table-matching", "data-active": matchingShown ? "" : void 0, children: [
+              /* @__PURE__ */ jsx("span", { role: "status", children: matchingShown ? matching.selected ? t("dataTable.matchingSelected", { count: matching.total }) : t("dataTable.matchingPage", { count: rowCount }) : null }),
+              matchingShown ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "link",
+                  size: "sm",
+                  onClick: matching.selected ? clearMatching : () => matching.onSelectedChange(true),
+                  children: matching.selected ? t("dataTable.selectNone") : t("dataTable.matchingSelectAll", { count: matching.total })
+                }
+              ) : null
+            ] }) : null,
+            /* @__PURE__ */ jsxs(
+              Table,
+              {
+                scrollable: preset !== "default",
+                label,
+                preset,
+                collapseBelow,
+                bordered,
+                striped,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    TableHeader,
+                    {
+                      className: cn("bg-secondary", stickyHeader && "ui-data-table-sticky-header"),
+                      children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                        expandColumnShown && /* @__PURE__ */ jsx(
+                          TableHead,
                           {
-                            type: "button",
-                            className: "ui-data-table-sort-button ui-focus-ring",
-                            onClick: () => {
-                              onHeaderClick(col);
-                            },
-                            children: label2
+                            className: cn(
+                              "ui-data-table-expand-column",
+                              leadingFixed === "start" && "ui-data-table-pin-start"
+                            ),
+                            ...fixedCellProps("__expand", leadingFixed),
+                            style: leadingFixedStyle("__expand"),
+                            children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: expandable?.columnTitle ?? t("dataTable.expandColumn") })
                           }
-                        );
-                        return /* @__PURE__ */ jsxs(
+                        ),
+                        selectable && /* @__PURE__ */ jsx(
                           TableHead,
                           {
-                            priority: col.priority,
-                            "data-empty": headerEmpty || void 0,
-                            "data-align": col.headerAlign ?? col.align,
-                            "aria-sort": isSortable ? activeDirection ? activeDirection === "asc" ? "ascending" : "descending" : "none" : void 0,
-                            ...fixedCellProps(col.key, fixedEdge(col)),
-                            ...columnHideBelowProps(col),
-                            style: columnCellStyle(col),
                             className: cn(
-                              columnCellClass(col),
-                              // `headerAlign` when the heading differs from the rows,
-                              // `align` otherwise. A table wanting centred headings
-                              // over start-aligned text could not say so before, and
-                              // consumers reached for `[&_th_button]:justify-center`.
-                              (col.headerAlign ?? col.align) === "right" && "text-end",
-                              (col.headerAlign ?? col.align) === "center" && "text-center",
-                              isSortable && "select-none"
+                              "ui-data-table-select-column",
+                              leadingFixed === "start" && "ui-data-table-pin-start"
                             ),
-                            children: [
-                              isSortable ? tooltipOn ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-                                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: sortButton }),
-                                /* @__PURE__ */ jsx(TooltipContent, { children: sortHint })
-                              ] }) : sortButton : label2,
-                              col.filters ? /* @__PURE__ */ jsx(ColumnFilterMenu, { column: col }) : null
-                            ]
-                          },
-                          col.key
-                        );
-                      })
-                    ] })
-                  }
-                ),
-                /* @__PURE__ */ jsx(TableBody, { children: loading ? (
-                  // Shaped skeleton rows rendered INSIDE the real table grid so they
-                  // share its borders + column widths — no second framed container
-                  // (which double-borders when the table sits in a Card). Count is
-                  // bounded to the previous page so the height barely shifts.
-                  Array.from({ length: Math.min(Math.max(rowCount, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
-                    expandColumnShown && /* @__PURE__ */ jsx(TableCell, { className: cellPadding }),
-                    selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block ui-data-table-skeleton-check" }) }),
-                    visibleColumns.map((col, j) => /* @__PURE__ */ jsx(
+                            ...fixedCellProps("__select", leadingFixed),
+                            style: leadingFixedStyle("__select"),
+                            children: /* @__PURE__ */ jsx(DataTable.SelectAll, {})
+                          }
+                        ),
+                        visibleColumns.map((col) => {
+                          const isSortable = columnIsSortable(col);
+                          const activeDirection = directionOf(sortingState, col.key);
+                          const sortIndicator = isSortable ? activeDirection ? activeDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+                            ChevronsUpDown,
+                            {
+                              className: "ui-data-table-sort-icon text-muted-foreground",
+                              "aria-hidden": "true"
+                            }
+                          ) : null;
+                          const headerEmpty = isEmptyHeader(col.header);
+                          const headerContent = headerEmpty && col.ariaLabel ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.ariaLabel }) : col.header;
+                          const label2 = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+                            headerContent,
+                            sortIndicator
+                          ] });
+                          const tooltipOn = col.showSorterTooltip ?? showSorterTooltip;
+                          const nextDirection = nextSortDirection(
+                            activeDirection,
+                            columnSortDirections(col, sortDirections)
+                          );
+                          const sortHint = nextDirection === "asc" ? t("dataTable.sortAscending") : nextDirection === "desc" ? t("dataTable.sortDescending") : t("dataTable.sortCancel");
+                          const sortButton = /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "ui-data-table-sort-button ui-focus-ring",
+                              onClick: () => {
+                                onHeaderClick(col);
+                              },
+                              children: label2
+                            }
+                          );
+                          return /* @__PURE__ */ jsxs(
+                            TableHead,
+                            {
+                              priority: col.priority,
+                              "data-empty": headerEmpty || void 0,
+                              "data-align": col.headerAlign ?? col.align,
+                              "aria-sort": isSortable ? activeDirection ? activeDirection === "asc" ? "ascending" : "descending" : "none" : void 0,
+                              ...fixedCellProps(col.key, fixedEdge(col)),
+                              ...columnHideBelowProps(col),
+                              style: columnCellStyle(col),
+                              className: cn(
+                                columnCellClass(col),
+                                // `headerAlign` when the heading differs from the rows,
+                                // `align` otherwise. A table wanting centred headings
+                                // over start-aligned text could not say so before, and
+                                // consumers reached for `[&_th_button]:justify-center`.
+                                (col.headerAlign ?? col.align) === "right" && "text-end",
+                                (col.headerAlign ?? col.align) === "center" && "text-center",
+                                isSortable && "select-none"
+                              ),
+                              children: [
+                                isSortable ? tooltipOn ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: sortButton }),
+                                  /* @__PURE__ */ jsx(TooltipContent, { children: sortHint })
+                                ] }) : sortButton : label2,
+                                col.filters ? /* @__PURE__ */ jsx(ColumnFilterMenu, { column: col }) : null
+                              ]
+                            },
+                            col.key
+                          );
+                        })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(TableBody, { children: loading ? (
+                    // Shaped skeleton rows rendered INSIDE the real table grid so they
+                    // share its borders + column widths — no second framed container
+                    // (which double-borders when the table sits in a Card). Count is
+                    // bounded to the previous page so the height barely shifts.
+                    Array.from({ length: Math.min(Math.max(rowCount, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
+                      expandColumnShown && /* @__PURE__ */ jsx(TableCell, { className: cellPadding }),
+                      selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block ui-data-table-skeleton-check" }) }),
+                      visibleColumns.map((col, j) => /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          priority: col.priority,
+                          "data-align": col.align,
+                          ...columnHideBelowProps(col),
+                          style: columnCellStyle(col),
+                          className: cn(cellPadding, columnCellClass(col)),
+                          children: /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "ui-skeleton-block ui-data-table-skeleton-line",
+                                j === 0 ? "w-1/2" : "w-3/4",
+                                col.align === "right" && "ms-auto",
+                                col.align === "center" && "mx-auto"
+                              )
+                            }
+                          )
+                        },
+                        col.key
+                      ))
+                    ] }, `skeleton-${i}`))
+                  ) : isDenied ? (
+                    // repeating a 403 cannot succeed. `warning` (not destructive) keeps it a policy
+                    // statement rather than a system fault. Announced politely: a permission boundary
+                    // is expected information, not an interruption.
+                    /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
                       TableCell,
                       {
-                        priority: col.priority,
-                        "data-align": col.align,
-                        ...columnHideBelowProps(col),
-                        style: columnCellStyle(col),
-                        className: cn(cellPadding, columnCellClass(col)),
-                        children: /* @__PURE__ */ jsx(
-                          "div",
+                        colSpan: emptyColSpan,
+                        className: "ui-data-table-empty",
+                        "aria-live": "polite",
+                        children: denied === true ? /* @__PURE__ */ jsx(
+                          EmptyState,
                           {
-                            className: cn(
-                              "ui-skeleton-block ui-data-table-skeleton-line",
-                              j === 0 ? "w-1/2" : "w-3/4",
-                              col.align === "right" && "ms-auto",
-                              col.align === "center" && "mx-auto"
-                            )
+                            icon: ShieldAlert,
+                            tone: "warning",
+                            title: t("dataTable.denied"),
+                            description: t("dataTable.deniedDescription"),
+                            titleAs: "p"
                           }
-                        )
-                      },
-                      col.key
-                    ))
-                  ] }, `skeleton-${i}`))
-                ) : isDenied ? (
-                  // repeating a 403 cannot succeed. `warning` (not destructive) keeps it a policy
-                  // statement rather than a system fault. Announced politely: a permission boundary
-                  // is expected information, not an interruption.
-                  /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+                        ) : denied
+                      }
+                    ) })
+                  ) : isError ? (
+                    // Announced assertively (`role="alert"`) because the
+                    // user's request did not complete — unlike empty/denied, which are states of the data
+                    // itself. The role sits on an inner wrapper, never on the <td>: overriding a cell's
+                    // role would strip it out of the table's grid semantics for AT.
+                    /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "ui-data-table-empty", children: /* @__PURE__ */ jsx("div", { role: "alert", children: error === true ? /* @__PURE__ */ jsx(
+                      EmptyState,
+                      {
+                        icon: AlertCircle,
+                        tone: "destructive",
+                        title: t("dataTable.error"),
+                        description: t("dataTable.errorDescription"),
+                        titleAs: "p",
+                        action: onRetry ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+                          /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
+                          t("common.retry")
+                        ] }) : void 0
+                      }
+                    ) : error }) }) })
+                  ) : rowCount === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
                     TableCell,
                     {
                       colSpan: emptyColSpan,
                       className: "ui-data-table-empty",
                       "aria-live": "polite",
-                      children: denied === true ? /* @__PURE__ */ jsx(
-                        EmptyState,
-                        {
-                          icon: ShieldAlert,
-                          tone: "warning",
-                          title: t("dataTable.denied"),
-                          description: t("dataTable.deniedDescription"),
-                          titleAs: "p"
-                        }
-                      ) : denied
+                      children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty"), titleAs: "p" })
                     }
-                  ) })
-                ) : isError ? (
-                  // Announced assertively (`role="alert"`) because the
-                  // user's request did not complete — unlike empty/denied, which are states of the data
-                  // itself. The role sits on an inner wrapper, never on the <td>: overriding a cell's
-                  // role would strip it out of the table's grid semantics for AT.
-                  /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "ui-data-table-empty", children: /* @__PURE__ */ jsx("div", { role: "alert", children: error === true ? /* @__PURE__ */ jsx(
-                    EmptyState,
-                    {
-                      icon: AlertCircle,
-                      tone: "destructive",
-                      title: t("dataTable.error"),
-                      description: t("dataTable.errorDescription"),
-                      titleAs: "p",
-                      action: onRetry ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
-                        /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
-                        t("common.retry")
-                      ] }) : void 0
-                    }
-                  ) : error }) }) })
-                ) : rowCount === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
-                  TableCell,
-                  {
-                    colSpan: emptyColSpan,
-                    className: "ui-data-table-empty",
-                    "aria-live": "polite",
-                    children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty"), titleAs: "p" })
-                  }
-                ) }) : dataRows.map((row, rowIndex) => {
-                  const original = row.original;
-                  const rowKey = getRowId(original);
-                  const isSelected = row.getIsSelected();
-                  const checkboxProps = rowSelection?.getCheckboxProps?.(original) ?? {};
-                  const labelValue = selectLabelColumn ? original[selectLabelColumn.key] : void 0;
-                  const rowLabel = getRowLabel?.(original) ?? (typeof labelValue === "string" && labelValue.trim() !== "" || typeof labelValue === "number" ? String(labelValue) : row.id);
-                  const selectRowLabel = checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: rowLabel });
-                  const canExpand = expandColumnShown && (expandable?.rowExpandable?.(original) ?? true);
-                  const isExpanded = canExpand && expandedKeys.includes(rowKey);
-                  const rowProps = onRow?.(original, rowIndex) ?? {};
-                  const isInteractiveTarget = (target) => !!target.closest(
-                    "button, a, input, select, textarea, [role=menuitem], [role=checkbox], [role=radio]"
-                  );
-                  const expandByClick = canExpand && expandable?.expandRowByClick;
-                  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                    /* @__PURE__ */ jsxs(
-                      TableRow,
-                      {
-                        ...rowProps,
-                        "data-state": isSelected ? "selected" : void 0,
-                        "data-tone": rowTone?.(original),
-                        tabIndex: onRowClick ? 0 : rowProps.tabIndex,
-                        onClick: (e) => {
-                          rowProps.onClick?.(e);
-                          const target = e.target;
-                          if (isInteractiveTarget(target)) return;
-                          if (expandByClick) toggleExpanded(rowKey);
-                          onRowClick?.(original);
-                        },
-                        onKeyDown: onRowClick ? (e) => {
-                          rowProps.onKeyDown?.(e);
-                          if (e.key !== "Enter" && e.key !== " ") return;
-                          if (e.target !== e.currentTarget) return;
-                          e.preventDefault();
-                          onRowClick?.(original);
-                        } : rowProps.onKeyDown,
-                        className: cn(
-                          rowPadding,
-                          // Hover highlight when rows are clickable OR explicitly hoverable… The
-                          // --accent step TableRow itself uses, not --muted/50: that sat BELOW the
-                          // zebra stripe (--muted/0.8, gh#700), so hovering a striped row lightened it.
-                          // Same token-driven formula as TableRow's own hover fill (gh#894) — a bare
-                          // `/70` here would silently outrank a theme's retuned default at equal
-                          // specificity, and `color-mix` (not `hsl(x / var(y, 70%))`) because a `/`
-                          // inside a Tailwind arbitrary property is read as ITS OWN opacity suffix.
-                          (onRowClick || hoverable) && "hover:[background-color:color-mix(in_oklab,hsl(var(--accent))_var(--table-row-hover-background-alpha,70%),transparent)]",
-                          // …but the affordance (cursor + focus mark) only when clickable.
-                          //
-                          // `ui-focus-ring` = the single focus source (styles/focus-ring.css). It
-                          // replaces `focus-visible:ring-ring focus-visible:ring-2
-                          // focus-visible:ring-inset`, which was a hand-rolled second ring: it read no
-                          // `--focus-ring-*` knob, so a service could not retune it, and — being a
-                          // utility — it painted regardless of the `--focus-outline` switch, which is
-                          // exactly the hole the switch exists to close.
-                          onRowClick && "ui-focus-ring cursor-pointer",
-                          isSelected && "bg-muted/30",
-                          rowProps.className,
-                          rowClassName?.(original)
-                        ),
-                        children: [
-                          expandColumnShown && /* @__PURE__ */ jsx(
-                            TableCell,
-                            {
-                              className: cn(
-                                cellPadding,
-                                leadingFixed === "start" && "ui-data-table-pin-start"
-                              ),
-                              ...fixedCellProps("__expand", leadingFixed),
-                              style: leadingFixedStyle("__expand"),
-                              children: canExpand ? /* @__PURE__ */ jsx(
-                                Button,
-                                {
-                                  variant: "ghost",
-                                  size: "icon-xs",
-                                  "aria-expanded": isExpanded,
-                                  "aria-label": isExpanded ? t("dataTable.collapseRow") : t("dataTable.expandRow"),
-                                  className: "ui-data-table-expand-trigger",
-                                  onClick: (e) => {
-                                    e.stopPropagation();
-                                    toggleExpanded(rowKey);
-                                  },
-                                  children: isExpanded ? /* @__PURE__ */ jsx(
-                                    ChevronDown,
-                                    {
-                                      className: "ui-data-table-sort-icon",
-                                      "aria-hidden": "true"
-                                    }
-                                  ) : /* @__PURE__ */ jsx(
-                                    ChevronRight,
-                                    {
-                                      className: "ui-data-table-sort-icon",
-                                      "aria-hidden": "true"
-                                    }
-                                  )
-                                }
-                              ) : null
-                            }
+                  ) }) : dataRows.map((row, rowIndex) => {
+                    const original = row.original;
+                    const rowKey = getRowId(original);
+                    const isSelected = row.getIsSelected();
+                    const checkboxProps = rowSelection?.getCheckboxProps?.(original) ?? {};
+                    const labelValue = selectLabelColumn ? original[selectLabelColumn.key] : void 0;
+                    const rowLabel = getRowLabel?.(original) ?? (typeof labelValue === "string" && labelValue.trim() !== "" || typeof labelValue === "number" ? String(labelValue) : row.id);
+                    const selectRowLabel = checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: rowLabel });
+                    const canExpand = expandColumnShown && (expandable?.rowExpandable?.(original) ?? true);
+                    const isExpanded = canExpand && expandedKeys.includes(rowKey);
+                    const rowProps = onRow?.(original, rowIndex) ?? {};
+                    const isInteractiveTarget = (target) => !!target.closest(
+                      "button, a, input, select, textarea, [role=menuitem], [role=checkbox], [role=radio]"
+                    );
+                    const expandByClick = canExpand && expandable?.expandRowByClick;
+                    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        TableRow,
+                        {
+                          ...rowProps,
+                          "data-state": isSelected ? "selected" : void 0,
+                          "data-tone": rowTone?.(original),
+                          tabIndex: onRowClick ? 0 : rowProps.tabIndex,
+                          onClick: (e) => {
+                            rowProps.onClick?.(e);
+                            const target = e.target;
+                            if (isInteractiveTarget(target)) return;
+                            if (expandByClick) toggleExpanded(rowKey);
+                            onRowClick?.(original);
+                          },
+                          onKeyDown: onRowClick ? (e) => {
+                            rowProps.onKeyDown?.(e);
+                            if (e.key !== "Enter" && e.key !== " ") return;
+                            if (e.target !== e.currentTarget) return;
+                            e.preventDefault();
+                            onRowClick?.(original);
+                          } : rowProps.onKeyDown,
+                          className: cn(
+                            rowPadding,
+                            // Hover highlight when rows are clickable OR explicitly hoverable… The
+                            // --accent step TableRow itself uses, not --muted/50: that sat BELOW the
+                            // zebra stripe (--muted/0.8, gh#700), so hovering a striped row lightened it.
+                            // Same token-driven formula as TableRow's own hover fill (gh#894) — a bare
+                            // `/70` here would silently outrank a theme's retuned default at equal
+                            // specificity, and `color-mix` (not `hsl(x / var(y, 70%))`) because a `/`
+                            // inside a Tailwind arbitrary property is read as ITS OWN opacity suffix.
+                            (onRowClick || hoverable) && "hover:[background-color:color-mix(in_oklab,hsl(var(--accent))_var(--table-row-hover-background-alpha,70%),transparent)]",
+                            // …but the affordance (cursor + focus mark) only when clickable.
+                            //
+                            // `ui-focus-ring` = the single focus source (styles/focus-ring.css). It
+                            // replaces `focus-visible:ring-ring focus-visible:ring-2
+                            // focus-visible:ring-inset`, which was a hand-rolled second ring: it read no
+                            // `--focus-ring-*` knob, so a service could not retune it, and — being a
+                            // utility — it painted regardless of the `--focus-outline` switch, which is
+                            // exactly the hole the switch exists to close.
+                            onRowClick && "ui-focus-ring cursor-pointer",
+                            isSelected && "bg-muted/30",
+                            rowProps.className,
+                            rowClassName?.(original)
                           ),
-                          selectable && /* @__PURE__ */ jsx(
-                            TableCell,
-                            {
-                              className: cn(
-                                cellPadding,
-                                leadingFixed === "start" && "ui-data-table-pin-start"
-                              ),
-                              ...fixedCellProps("__select", leadingFixed),
-                              style: leadingFixedStyle("__select"),
-                              children: rowSelection?.type === "radio" ? (
-                                // One choice per table, so each cell is its own single-item group:
-                                // Radix requires a Root for an Item, and a Root cannot legally span
-                                // <tr> boundaries without rewriting the table's own semantics.
-                                /* @__PURE__ */ jsx(
-                                  RadioGroupRoot,
+                          children: [
+                            expandColumnShown && /* @__PURE__ */ jsx(
+                              TableCell,
+                              {
+                                className: cn(
+                                  cellPadding,
+                                  leadingFixed === "start" && "ui-data-table-pin-start"
+                                ),
+                                ...fixedCellProps("__expand", leadingFixed),
+                                style: leadingFixedStyle("__expand"),
+                                children: canExpand ? /* @__PURE__ */ jsx(
+                                  Button,
                                   {
-                                    value: isSelected ? rowKey : "",
-                                    disabled: checkboxProps.disabled,
-                                    onValueChange: () => {
-                                      row.toggleSelected(true);
+                                    variant: "ghost",
+                                    size: "icon-xs",
+                                    "aria-expanded": isExpanded,
+                                    "aria-label": isExpanded ? t("dataTable.collapseRow") : t("dataTable.expandRow"),
+                                    className: "ui-data-table-expand-trigger",
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      toggleExpanded(rowKey);
                                     },
-                                    children: /* @__PURE__ */ jsx(
-                                      RadioItem,
+                                    children: isExpanded ? /* @__PURE__ */ jsx(
+                                      ChevronDown,
                                       {
-                                        value: rowKey,
-                                        "aria-label": selectRowLabel,
-                                        onClick: (e) => {
-                                          e.stopPropagation();
-                                        }
+                                        className: "ui-data-table-sort-icon",
+                                        "aria-hidden": "true"
+                                      }
+                                    ) : /* @__PURE__ */ jsx(
+                                      ChevronRight,
+                                      {
+                                        className: "ui-data-table-sort-icon",
+                                        "aria-hidden": "true"
                                       }
                                     )
                                   }
-                                )
-                              ) : /* @__PURE__ */ jsx(
-                                Checkbox,
-                                {
-                                  checked: isSelected,
-                                  disabled: checkboxProps.disabled,
-                                  onCheckedChange: (v) => {
-                                    row.toggleSelected(!!v);
-                                  },
-                                  "aria-label": selectRowLabel,
-                                  onClick: (e) => {
-                                    e.stopPropagation();
-                                  }
-                                }
-                              )
-                            }
-                          ),
-                          visibleColumns.map((col) => {
-                            const rendered = col.render ? col.render(original) : (() => {
-                              const v = original[col.key];
-                              const text = v == null || !(typeof v === "string" || typeof v === "number") ? "\u2014" : String(v);
-                              return /* @__PURE__ */ jsx("span", { "data-slot": "table-cell-text", children: text });
-                            })();
-                            const rawValue = original[col.key];
-                            const title = col.ellipsis && !col.render && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
-                            return /* @__PURE__ */ jsx(
+                                ) : null
+                              }
+                            ),
+                            selectable && /* @__PURE__ */ jsx(
                               TableCell,
                               {
-                                priority: col.priority,
-                                "data-align": col.align,
-                                title,
-                                label: stacked ? stackedCellLabel(col) : void 0,
-                                ...fixedCellProps(col.key, fixedEdge(col)),
-                                ...columnHideBelowProps(col),
-                                style: columnCellStyle(col),
-                                flush: col.flush,
-                                className: cn(!col.flush && cellPadding, columnCellClass(col)),
-                                children: rendered
-                              },
-                              col.key
-                            );
-                          })
-                        ]
-                      }
-                    ),
-                    isExpanded && expandable?.expandedRowRender ? /* @__PURE__ */ jsx(
-                      TableRow,
-                      {
-                        className: "ui-data-table-expanded-row hover:bg-transparent",
-                        "data-expanded-row": "",
-                        children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, flush: true, children: expandable.expandedRowRender(original, rowIndex, true) })
-                      }
-                    ) : null
-                  ] }, row.id);
-                }) }),
-                summary ? (
-                  // A real <tfoot>: the totals row belongs to the table's own grid, so it keeps the
-                  // column widths, the header association and the screen-reader row navigation.
-                  /* @__PURE__ */ jsx("tfoot", { "data-slot": "table-footer", className: "ui-data-table-summary", children: summary(dataRows.map((row) => row.original)) })
-                ) : null
-              ]
-            }
-          )
+                                className: cn(
+                                  cellPadding,
+                                  leadingFixed === "start" && "ui-data-table-pin-start"
+                                ),
+                                ...fixedCellProps("__select", leadingFixed),
+                                style: leadingFixedStyle("__select"),
+                                children: rowSelection?.type === "radio" ? (
+                                  // One choice per table, so each cell is its own single-item group:
+                                  // Radix requires a Root for an Item, and a Root cannot legally span
+                                  // <tr> boundaries without rewriting the table's own semantics.
+                                  /* @__PURE__ */ jsx(
+                                    RadioGroupRoot,
+                                    {
+                                      value: isSelected ? rowKey : "",
+                                      disabled: checkboxProps.disabled,
+                                      onValueChange: () => {
+                                        row.toggleSelected(true);
+                                      },
+                                      children: /* @__PURE__ */ jsx(
+                                        RadioItem,
+                                        {
+                                          value: rowKey,
+                                          "aria-label": selectRowLabel,
+                                          onClick: (e) => {
+                                            e.stopPropagation();
+                                          }
+                                        }
+                                      )
+                                    }
+                                  )
+                                ) : /* @__PURE__ */ jsx(
+                                  Checkbox,
+                                  {
+                                    checked: isSelected,
+                                    disabled: checkboxProps.disabled,
+                                    onCheckedChange: (v) => {
+                                      row.toggleSelected(!!v);
+                                    },
+                                    "aria-label": selectRowLabel,
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                    }
+                                  }
+                                )
+                              }
+                            ),
+                            visibleColumns.map((col) => {
+                              const rendered = col.render ? col.render(original) : (() => {
+                                const v = original[col.key];
+                                const text = v == null || !(typeof v === "string" || typeof v === "number") ? "\u2014" : String(v);
+                                return /* @__PURE__ */ jsx("span", { "data-slot": "table-cell-text", children: text });
+                              })();
+                              const rawValue = original[col.key];
+                              const title = col.ellipsis && !col.render && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
+                              return /* @__PURE__ */ jsx(
+                                TableCell,
+                                {
+                                  priority: col.priority,
+                                  "data-align": col.align,
+                                  title,
+                                  label: stacked ? stackedCellLabel(col) : void 0,
+                                  ...fixedCellProps(col.key, fixedEdge(col)),
+                                  ...columnHideBelowProps(col),
+                                  style: columnCellStyle(col),
+                                  flush: col.flush,
+                                  className: cn(!col.flush && cellPadding, columnCellClass(col)),
+                                  children: rendered
+                                },
+                                col.key
+                              );
+                            })
+                          ]
+                        }
+                      ),
+                      isExpanded && expandable?.expandedRowRender ? /* @__PURE__ */ jsx(
+                        TableRow,
+                        {
+                          className: "ui-data-table-expanded-row hover:bg-transparent",
+                          "data-expanded-row": "",
+                          children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, flush: true, children: expandable.expandedRowRender(original, rowIndex, true) })
+                        }
+                      ) : null
+                    ] }, row.id);
+                  }) }),
+                  summary ? (
+                    // A real <tfoot>: the totals row belongs to the table's own grid, so it keeps the
+                    // column widths, the header association and the screen-reader row navigation.
+                    /* @__PURE__ */ jsx("tfoot", { "data-slot": "table-footer", className: "ui-data-table-summary", children: summary(dataRows.map((row) => row.original)) })
+                  ) : null
+                ]
+              }
+            )
+          ]
         }
       )
     }