@open-mercato/ui 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

package/dist/backend/DataTable.js

@@ -3,11 +3,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useRouter } from "next/navigation";
 import { flexRender } from "@tanstack/react-table";
-import { useLegacyTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table/legacy";
+import { useLegacyTable, getCoreRowModel, getSortedRowModel, getExpandedRowModel } from "@tanstack/react-table/legacy";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox, Save } from "lucide-react";
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronRight, ChevronsUpDown, Check, Inbox, Save } from "lucide-react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table.js";
 import { Button } from "../primitives/button.js";
+import { IconButton } from "../primitives/icon-button.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import {
   Select,
@@ -789,7 +790,11 @@ function DataTable({
   advancedFilter: advancedFilterInput,
   columnChooser,
   activeFilterChips,
-  filterAwareEmptyState
+  filterAwareEmptyState,
+  getSubRows,
+  expandable,
+  expanded: expandedProp,
+  onExpandedChange
 }) {
   const t = useT();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
@@ -835,6 +840,7 @@ function DataTable({
   const queryClient = useQueryClient();
   const perspectiveConfig = perspective ?? null;
   const perspectiveTableId = perspectiveConfig?.tableId ?? null;
+  const perspectiveAlign = perspectiveConfig?.align ?? "left";
   const perspectiveEnabled = Boolean(perspectiveTableId);
   const initialSnapshotRef = React.useRef(null);
   const snapshotHydratedTableRef = React.useRef(null);
@@ -1192,14 +1198,34 @@ function DataTable({
   const [rowSelection, setRowSelection] = React.useState({});
   const selectionScopeKeyRef = React.useRef(selectionScopeKey);
   const enableClientSorting = sortable && !manualSorting;
+  const expansionEnabled = getSubRows !== void 0 || expandable !== void 0;
+  const [internalExpanded, setInternalExpanded] = React.useState({});
+  const expandedState = expandedProp !== void 0 ? expandedProp : internalExpanded;
+  const handleExpandedChange = React.useCallback((updater) => {
+    if (onExpandedChange) {
+      onExpandedChange(updater);
+      return;
+    }
+    setInternalExpanded((prev) => typeof updater === "function" ? updater(prev) : updater);
+  }, [onExpandedChange]);
   const table = useLegacyTable({
     data: clientFilteredData,
     columns: mergedColumns,
     getCoreRowModel: getCoreRowModel(),
     ...enableClientSorting ? { getSortedRowModel: getSortedRowModel() } : {},
+    ...expansionEnabled ? {
+      getSubRows,
+      getExpandedRowModel: getExpandedRowModel(),
+      getRowCanExpand: (row) => {
+        if (typeof expandable === "function") return expandable(row.original);
+        if (expandable === true) return true;
+        return (row.subRows?.length ?? 0) > 0;
+      },
+      onExpandedChange: handleExpandedChange
+    } : {},
     manualSorting: manualSorting === true,
     getRowId: resolveDataTableRowId,
-    state: { sorting, columnVisibility, columnOrder, rowSelection },
+    state: { sorting, columnVisibility, columnOrder, rowSelection, ...expansionEnabled ? { expanded: expandedState } : {} },
     enableRowSelection: hasInjectedBulkActions,
     onSortingChange: (updater) => {
       const next = typeof updater === "function" ? updater(sorting) : updater;
@@ -2200,12 +2226,44 @@ function DataTable({
   );
   const runPropBulkAction = React.useCallback(
     async (action) => {
-      const result = await action.onExecute(selectedRows);
-      if (result !== false) {
+      try {
+        const result = await action.onExecute(selectedRows);
+        if (result === false) return;
+        if (!result || typeof result !== "object") {
+          setRowSelection({});
+          return;
+        }
+        if (result.ok === false) {
+          if (result.message === void 0) return;
+          flash(result.message, "error");
+          return;
+        }
         setRowSelection({});
+        if (result.progressJobId) {
+          trackedBulkProgressJobIdsRef.current.add(result.progressJobId);
+          flash(
+            result.message ?? t("ui.dataTable.bulkAction.started", "Bulk action started. Track progress in the top bar."),
+            "success"
+          );
+          return;
+        }
+        flash(
+          result.message ?? t("ui.dataTable.bulkAction.success", "Bulk action completed."),
+          "success"
+        );
+        if (refreshButton?.onRefresh) {
+          refreshButton.onRefresh();
+        } else {
+          scheduleRouterRefresh(router);
+        }
+      } catch (error2) {
+        flash(
+          error2 instanceof Error ? error2.message : t("ui.dataTable.bulkAction.error", "Bulk action failed."),
+          "error"
+        );
       }
     },
-    [selectedRows]
+    [refreshButton, router, selectedRows, t]
   );
   const builtToolbar = React.useMemo(() => {
     if (toolbar) return toolbar;
@@ -2286,6 +2344,7 @@ function DataTable({
         }
       )
     ] }) : null;
+    const perspectiveButtonLeading = perspectiveAlign === "right" ? null : perspectiveButton;
     const saveViewButton = showSaveViewButton && canUsePerspectives ? /* @__PURE__ */ jsxs(
       Button,
       {
@@ -2305,9 +2364,9 @@ function DataTable({
         ]
       }
     ) : null;
-    const leadingItems = advancedFilterButton || perspectiveButton || saveViewButton ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    const leadingItems = advancedFilterButton || perspectiveButtonLeading || saveViewButton ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       advancedFilterButton,
-      perspectiveButton,
+      perspectiveButtonLeading,
       saveViewButton
     ] }) : null;
     const trailingItems = hasBulkButtons ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
@@ -2351,6 +2410,7 @@ function DataTable({
       }) : null
     ] }) : null;
     const searchTrailingNode = searchTrailingInjectionSpotId && onSearchChange ? /* @__PURE__ */ jsx(InjectionSpot, { spotId: searchTrailingInjectionSpotId, context: resolvedInjectionContext }) : null;
+    if (perspectiveAlign === "right" && !anySearch && combined.length === 0 && !advancedFilterButton && !saveViewButton && !trailingItems && !fieldsetSelector) return null;
     return /* @__PURE__ */ jsx(
       FilterBar,
       {
@@ -2383,6 +2443,7 @@ function DataTable({
     onFiltersApply,
     onFiltersClear,
     canUsePerspectives,
+    perspectiveAlign,
     embedded,
     supportsCustomFieldFilterFieldsets,
     resolvedEntityIds,
@@ -2478,7 +2539,18 @@ function DataTable({
               ]
             }
           ) : null,
-          canUsePerspectives ? /* @__PURE__ */ jsxs(
+          canUsePerspectives ? perspectiveAlign === "right" ? /* @__PURE__ */ jsx(
+            ViewSwitcherDropdown,
+            {
+              activePerspectiveId,
+              perspectives: perspectiveData?.perspectives ?? [],
+              rolePerspectives: perspectiveData?.rolePerspectives ?? [],
+              onClear: () => applyPerspectiveSettings({}, null),
+              onActivate: handlePerspectiveActivate,
+              onOpenSidebar: () => setPerspectiveOpen(true),
+              t
+            }
+          ) : /* @__PURE__ */ jsxs(
             Button,
             {
               type: "button",
@@ -2679,12 +2751,37 @@ function DataTable({
                       const sizedWidth = enableColumnResize && columnId ? columnSizing[columnId] : void 0;
                       const effectiveMaxWidth = typeof sizedWidth === "number" ? `${sizedWidth}px` : maxWidth;
                       const wrappedContent = shouldTruncate ? /* @__PURE__ */ jsx(TruncatedCell, { maxWidth: effectiveMaxWidth, tooltipContent: tooltipText, children: content }) : content;
+                      const expandAffordance = expansionEnabled && cellIndex === 0 ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "inline-flex shrink-0 items-center",
+                          style: { paddingLeft: `${row.depth * 1.25}rem` },
+                          children: row.getCanExpand() ? /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "xs",
+                              "aria-label": row.getIsExpanded() ? t("ui.dataTable.expand.collapseRow", "Collapse row") : t("ui.dataTable.expand.expandRow", "Expand row"),
+                              "aria-expanded": row.getIsExpanded(),
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                row.toggleExpanded();
+                              },
+                              children: row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+                            }
+                          ) : /* @__PURE__ */ jsx("span", { className: "inline-block size-6", "aria-hidden": "true" })
+                        }
+                      ) : null;
                       return /* @__PURE__ */ jsx(
                         TableCell,
                         {
                           className: responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : ""),
                           style: typeof sizedWidth === "number" ? { width: sizedWidth, minWidth: sizedWidth, maxWidth: sizedWidth } : void 0,
-                          children: wrappedContent
+                          children: expandAffordance ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                            expandAffordance,
+                            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: wrappedContent })
+                          ] }) : wrappedContent
                         },
                         cell.id
                       );