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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.10.1-develop.7702.1.f991ecf392",
+  "version": "0.10.1-develop.7707.1.61845a3ef7",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.10.1-develop.7702.1.f991ecf392",
+    "@open-mercato/shared": "0.10.1-develop.7707.1.61845a3ef7",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.10.1-develop.7702.1.f991ecf392",
+    "@open-mercato/shared": "0.10.1-develop.7707.1.61845a3ef7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/backend/DataTable.tsx

@@ -553,6 +553,14 @@ 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'
+// Pinned cells need an opaque background so scrolled columns don't show through,
+// which also hides the translucent tints painted behind them (the `bg-muted/40`
+// header strip on `<thead>`, the `bg-muted/30` row hover on `<tr>`). A flat
+// gradient (equal stops) layers the same tint over the opaque surface, so the
+// pinned cell composites to exactly what the transparent cells show (#7414).
+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'
 
 export type BulkActionExecuteResult = {
   ok: boolean
@@ -3591,6 +3599,11 @@ function DataTableImpl<T extends RowData>({
   // `isolate` keeps the z-index of pinned cells local to the table so they
   // scroll beneath the sticky app top bar instead of over it.
   const tableScrollWrapperClassName = embedded ? 'isolate' : 'isolate overflow-auto'
+  // Non-embedded tables sit on the `bg-card` container above; embedded ones
+  // render on whatever surface hosts them, so they keep the page background.
+  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<HTMLDivElement>(null)
   // Measure the horizontal scroll viewport so the empty and error states can center within
@@ -3764,7 +3777,7 @@ function DataTableImpl<T extends RowData>({
                   const columnMeta = (header.column.columnDef as any)?.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())
                   // Columns that can't be sorted (e.g. a manual "select" checkbox column) may render
@@ -3820,7 +3833,7 @@ function DataTableImpl<T extends RowData>({
                   <TableHead
                     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}`,
                     )}
                   >
                     {t('ui.dataTable.actionsColumn', 'Actions')}
@@ -3871,7 +3884,7 @@ function DataTableImpl<T extends RowData>({
                   <TableRow 
                     key={row.id} 
                     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) => {
                       // Don't trigger row click if clicking on actions cell
                       if ((e.target as HTMLElement).closest('[data-actions-cell]')) {
@@ -3986,7 +3999,7 @@ function DataTableImpl<T extends RowData>({
                       return (
                         <TableCell
                           key={cell.id}
-                          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 } : undefined}
                         >
                           {expandAffordance ? (
@@ -4002,7 +4015,7 @@ function DataTableImpl<T extends RowData>({
                       <TableCell
                         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
                       >

package/src/backend/__tests__/DataTable.stickyResponsive.test.tsx

@@ -28,7 +28,7 @@ const tokensOf = (el: Element | null): string[] =>
 // `md` breakpoint up, so narrow viewports fall back to the documented plain
 // horizontal-scroll behavior where every column can be swiped into view.
 describe('DataTable sticky columns are viewport-gated', () => {
-  function renderStickyTable() {
+  function renderStickyTable({ embedded = false }: { embedded?: boolean } = {}) {
     const columns: ColumnDef<Row>[] = [
       { accessorKey: 'title', header: 'Title' },
       { accessorKey: 'status', header: 'Status' },
@@ -40,6 +40,7 @@ describe('DataTable sticky columns are viewport-gated', () => {
           <DataTable
             columns={columns}
             data={[{ id: '1', title: 'Solar rollout', status: 'open' }]}
+            embedded={embedded}
             stickyFirstColumn
             stickyActionsColumn
             rowActions={() => (
@@ -62,7 +63,7 @@ describe('DataTable sticky columns are viewport-gated', () => {
       for (const cell of [firstHeader, firstBodyCell]) {
         const tokens = tokensOf(cell)
         expect(tokens).toEqual(
-          expect.arrayContaining(['md:sticky', 'md:left-0', 'md:bg-background', 'md:after:absolute']),
+          expect.arrayContaining(['md:sticky', 'md:left-0', 'md:bg-card', 'md:after:absolute']),
         )
         expect(tokens).not.toContain('sticky')
         expect(tokens).not.toContain('left-0')
@@ -104,7 +105,7 @@ describe('DataTable sticky columns are viewport-gated', () => {
       for (const cell of [actionsHeader, actionsBodyCell]) {
         const tokens = tokensOf(cell)
         expect(tokens).toEqual(
-          expect.arrayContaining(['md:sticky', 'md:right-0', 'md:bg-background', 'md:before:absolute']),
+          expect.arrayContaining(['md:sticky', 'md:right-0', 'md:bg-card', 'md:before:absolute']),
         )
         expect(tokens).not.toContain('sticky')
         expect(tokens).not.toContain('right-0')
@@ -115,4 +116,62 @@ describe('DataTable sticky columns are viewport-gated', () => {
       queryClient.clear()
     }
   })
+
+  // A non-embedded table sits on its `bg-card` container. Pinned cells used to
+  // paint `bg-background`, a darker band in the dark theme, and their opaque
+  // fill hid the header strip and the row-hover tint behind them (#7414).
+  it('paints pinned cells with the card surface and carries the header strip and row hover through', () => {
+    const { container, queryClient } = renderStickyTable()
+    try {
+      const headerCells = Array.from(container.querySelectorAll('thead th'))
+      const pinnedHeaders = [headerCells[0], headerCells[headerCells.length - 1]]
+      const bodyRow = container.querySelector('tbody tr')
+      const pinnedBodyCells = [
+        container.querySelector('tbody tr td'),
+        container.querySelector('tbody tr td[data-actions-cell]'),
+      ]
+
+      for (const cell of pinnedHeaders) {
+        const tokens = tokensOf(cell)
+        expect(tokens).toEqual(
+          expect.arrayContaining(['md:bg-card', 'md:bg-linear-to-r', 'md:from-muted/40', 'md:to-muted/40']),
+        )
+        expect(tokens).not.toContain('md:bg-background')
+      }
+
+      expect(tokensOf(bodyRow)).toContain('group/row')
+      for (const cell of pinnedBodyCells) {
+        const tokens = tokensOf(cell)
+        expect(tokens).toEqual(
+          expect.arrayContaining([
+            'md:bg-card',
+            'md:group-hover/row:bg-linear-to-r',
+            'md:group-hover/row:from-muted/30',
+            'md:group-hover/row:to-muted/30',
+          ]),
+        )
+        expect(tokens).not.toContain('md:bg-background')
+      }
+    } finally {
+      queryClient.clear()
+    }
+  })
+
+  it('keeps the page surface on pinned cells of an embedded table but still carries the tints', () => {
+    const { container, queryClient } = renderStickyTable({ embedded: true })
+    try {
+      const actionsHeader = Array.from(container.querySelectorAll('thead th')).pop() ?? null
+      const actionsBodyCell = container.querySelector('tbody tr td[data-actions-cell]')
+
+      expect(tokensOf(actionsHeader)).toEqual(
+        expect.arrayContaining(['md:bg-background', 'md:from-muted/40']),
+      )
+      expect(tokensOf(actionsBodyCell)).toEqual(
+        expect.arrayContaining(['md:bg-background', 'md:group-hover/row:from-muted/30']),
+      )
+      expect(tokensOf(actionsBodyCell)).not.toContain('md:bg-card')
+    } finally {
+      queryClient.clear()
+    }
+  })
 })