@open-mercato/ui 0.10.1-develop.7702.1.f991ecf392 → 0.10.1-develop.7707.1.61845a3ef7

package/dist/backend/DataTable.js

@@ -180,6 +180,8 @@ const EMPTY_FILTER_VALUES = Object.freeze({});
 const EMPTY_VIEW_SETTINGS = Object.freeze({});
 const STICKY_RIGHT_SHADOW_CLASS = "md:before:absolute md:before:inset-y-0 md:before:-left-2 md:before:w-2 md:before:bg-gradient-to-l md:before:from-foreground/8 md:before:to-transparent md:before:pointer-events-none";
 const STICKY_LEFT_SHADOW_CLASS = "md:after:absolute md:after:inset-y-0 md:after:-right-2 md:after:w-2 md:after:bg-gradient-to-r md:after:from-foreground/8 md:after:to-transparent md:after:pointer-events-none";
+const STICKY_HEADER_TINT_CLASS = "md:bg-linear-to-r md:from-muted/40 md:to-muted/40";
+const STICKY_ROW_HOVER_TINT_CLASS = "md:group-hover/row:bg-linear-to-r md:group-hover/row:from-muted/30 md:group-hover/row:to-muted/30";
 function collectUniqueById(entries, warningScope) {
   const byId = /* @__PURE__ */ new Map();
   for (const entry of entries) {
@@ -2576,6 +2578,9 @@ function DataTableImpl({
   const headerContentClassName = "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between";
   const toolbarWrapperClassName = embedded ? "mt-2" : "mt-3 pt-3 border-t";
   const tableScrollWrapperClassName = embedded ? "isolate" : "isolate overflow-auto";
+  const stickySurfaceClass = embedded ? "md:bg-background" : "md:bg-card";
+  const stickyHeaderSurfaceClass = `${stickySurfaceClass} ${STICKY_HEADER_TINT_CLASS}`;
+  const stickyBodySurfaceClass = `${stickySurfaceClass} ${STICKY_ROW_HOVER_TINT_CLASS}`;
   const virtualScrollRef = React.useRef(null);
   const [tableScrollEl, setTableScrollEl] = React.useState(null);
   const [scrollViewportWidth, setScrollViewportWidth] = React.useState(null);
@@ -2706,7 +2711,7 @@ function DataTableImpl({
               const columnMeta = header.column.columnDef?.meta;
               const priority = resolvePriority(header.column);
               const isFirstDataColumn = headerIndex === 0;
-              const stickyClass = stickyFirstColumn && isFirstDataColumn ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : "";
+              const stickyClass = stickyFirstColumn && isFirstDataColumn ? ` md:sticky md:left-0 md:z-10 ${stickyHeaderSurfaceClass} ${STICKY_LEFT_SHADOW_CLASS}` : "";
               const isColumnSortable = sortable && !!header.column.getCanSort?.();
               const headerContent = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());
               const headerCellContent = header.isPlaceholder ? null : isColumnSortable ? /* @__PURE__ */ jsxs(
@@ -2760,7 +2765,7 @@ function DataTableImpl({
               {
                 className: cn(
                   actionsColumnAlign === "center" ? "w-0 text-center" : "w-0 text-right",
-                  stickyActionsColumn && `md:sticky md:right-0 md:z-20 md:bg-background ${STICKY_RIGHT_SHADOW_CLASS}`
+                  stickyActionsColumn && `md:sticky md:right-0 md:z-20 ${stickyHeaderSurfaceClass} ${STICKY_RIGHT_SHADOW_CLASS}`
                 ),
                 children: t("ui.dataTable.actionsColumn", "Actions")
               }
@@ -2786,7 +2791,7 @@ function DataTableImpl({
                 TableRow,
                 {
                   "data-state": row.getIsSelected() && "selected",
-                  className: isClickable ? "cursor-pointer hover:bg-muted/50 transition-colors" : "",
+                  className: cn("group/row", isClickable && "cursor-pointer hover:bg-muted/50 transition-colors"),
                   onClick: isClickable ? (e) => {
                     if (e.target.closest("[data-actions-cell]")) {
                       return;
@@ -2870,7 +2875,7 @@ function DataTableImpl({
                       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}` : ""),
+                          className: responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 ${stickyBodySurfaceClass} ${STICKY_LEFT_SHADOW_CLASS}` : ""),
                           style: typeof sizedWidth === "number" ? { width: sizedWidth, minWidth: sizedWidth, maxWidth: sizedWidth } : void 0,
                           children: expandAffordance ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
                             expandAffordance,
@@ -2885,7 +2890,7 @@ function DataTableImpl({
                       {
                         className: cn(
                           actionsColumnAlign === "center" ? "text-center whitespace-nowrap" : "text-right whitespace-nowrap",
-                          stickyActionsColumn && `md:sticky md:right-0 md:z-10 md:bg-background ${STICKY_RIGHT_SHADOW_CLASS}`
+                          stickyActionsColumn && `md:sticky md:right-0 md:z-10 ${stickyBodySurfaceClass} ${STICKY_RIGHT_SHADOW_CLASS}`
                         ),
                         "data-actions-cell": true,
                         children: rowActionsElement