@open-mercato/ui 0.6.5-develop.4782.1.29bd722d3d → 0.6.5-develop.4790.1.bffb4fd44b

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 140 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 381 entry points
+[build:ui] found 383 entry points
 [build:ui] built successfully

package/dist/backend/DataTable.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { useRouter } from "next/navigation";
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from "@tanstack/react-table";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronsUpDown, Check } from "lucide-react";
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox } from "lucide-react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table.js";
 import { Button } from "../primitives/button.js";
 import { Checkbox } from "../primitives/checkbox.js";
@@ -22,6 +22,7 @@ import { TooltipProvider } from "../primitives/tooltip.js";
 import { TruncatedCell } from "./TruncatedCell.js";
 import { FilterBar } from "./FilterBar.js";
 import { FilteredEmptyResults } from "./filters/FilteredEmptyResults.js";
+import { SearchEmptyResults } from "./filters/SearchEmptyResults.js";
 import { useCustomFieldFilterDefs } from "./utils/customFieldFilters.js";
 import { fetchCustomFieldDefinitionsPayload } from "./utils/customFieldDefs.js";
 import { RowActions } from "./RowActions.js";
@@ -1959,6 +1960,20 @@ function DataTable({
   const toolbarWrapperClassName = embedded ? "mt-2" : "mt-3 pt-3 border-t";
   const tableScrollWrapperClassName = embedded ? "" : "overflow-auto";
   const virtualScrollRef = React.useRef(null);
+  const [tableScrollEl, setTableScrollEl] = React.useState(null);
+  const [emptyStateViewportWidth, setEmptyStateViewportWidth] = React.useState(null);
+  const setTableScrollWrapperRef = React.useCallback((node) => {
+    setTableScrollEl(node);
+    virtualScrollRef.current = node;
+  }, []);
+  React.useEffect(() => {
+    if (!tableScrollEl || typeof ResizeObserver === "undefined") return;
+    const update = () => setEmptyStateViewportWidth(tableScrollEl.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(tableScrollEl);
+    return () => observer.disconnect();
+  }, [tableScrollEl]);
   const allRows = table.getRowModel().rows;
   const rowVirtualizer = virtualized ? useVirtualizer({
     count: allRows.length,
@@ -2045,7 +2060,7 @@ function DataTable({
         sensors: dndSensors,
         columnIds: headerColumnIds,
         onDragEnd: handleHeaderDragEnd,
-        children: /* @__PURE__ */ jsx("div", { ref: virtualized ? virtualScrollRef : void 0, className: tableScrollWrapperClassName, style: virtualMaxHeightStyle, children: /* @__PURE__ */ jsxs(Table, { className: "min-w-[640px] md:min-w-0", children: [
+        children: /* @__PURE__ */ jsx("div", { ref: setTableScrollWrapperRef, className: tableScrollWrapperClassName, style: virtualMaxHeightStyle, children: /* @__PURE__ */ jsxs(Table, { className: "min-w-[640px] md:min-w-0", children: [
           /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { children: [
             hasInjectedBulkActions ? /* @__PURE__ */ jsx(TableHead, { className: "w-8", children: /* @__PURE__ */ jsx(
               Checkbox,
@@ -2187,19 +2202,36 @@ function DataTable({
               const bottomPadding = lastItem ? rowVirtualizer.getTotalSize() - lastItem.end : 0;
               return bottomPadding > 0 ? /* @__PURE__ */ jsx("tr", { style: { height: `${bottomPadding}px` } }) : null;
             })() : null
-          ] }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0), className: "py-6", children: filterAwareEmptyState?.active ? /* @__PURE__ */ jsx(
-            FilteredEmptyResults,
-            {
-              entityNamePlural: filterAwareEmptyState.entityNamePlural,
-              canRemoveLast: filterAwareEmptyState.canRemoveLast,
-              onClearAll: filterAwareEmptyState.onClearAll,
-              onRemoveLast: filterAwareEmptyState.onRemoveLast
-            }
-          ) : emptyState && typeof emptyState !== "string" ? emptyState : /* @__PURE__ */ jsx(
-            EmptyState,
+          ] }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0), className: "p-0", children: /* @__PURE__ */ jsx(
+            "div",
             {
-              size: "sm",
-              title: typeof emptyState === "string" ? emptyState : t("ui.dataTable.emptyState.default", "No results.")
+              className: cn("sticky left-0 flex justify-center py-6", emptyStateViewportWidth ? "" : "w-fit"),
+              style: emptyStateViewportWidth ? { width: emptyStateViewportWidth } : void 0,
+              children: filterAwareEmptyState?.active ? /* @__PURE__ */ jsx(
+                FilteredEmptyResults,
+                {
+                  entityNamePlural: filterAwareEmptyState.entityNamePlural,
+                  canRemoveLast: filterAwareEmptyState.canRemoveLast,
+                  onClearAll: filterAwareEmptyState.onClearAll,
+                  onRemoveLast: filterAwareEmptyState.onRemoveLast,
+                  onClearSearch: searchValue && searchValue.trim().length > 0 && onSearchChange ? () => onSearchChange("") : void 0
+                }
+              ) : searchValue && searchValue.trim().length > 0 && onSearchChange ? /* @__PURE__ */ jsx(
+                SearchEmptyResults,
+                {
+                  query: searchValue.trim(),
+                  entityNamePlural: filterAwareEmptyState?.entityNamePlural,
+                  onClearSearch: () => onSearchChange("")
+                }
+              ) : emptyState && typeof emptyState !== "string" ? emptyState : /* @__PURE__ */ jsx(
+                EmptyState,
+                {
+                  variant: "subtle",
+                  icon: /* @__PURE__ */ jsx(Inbox, { className: "size-6", "aria-hidden": true }),
+                  title: typeof emptyState === "string" ? emptyState : t("ui.dataTable.emptyState.default", "No results."),
+                  description: typeof emptyState === "string" ? void 0 : t("ui.dataTable.emptyState.defaultDescription", "Items will appear here once added.")
+                }
+              )
             }
           ) }) }) })
         ] }) })