Rework frozen column shadow (#3969)

* Rework frozen column shadow

* Update screenshots

Co-authored-by: nstepien

* tweak shadow

* Update screenshots

Co-authored-by: nstepien

* rework

* removed unused var

* would you look at that, we already had totalFrozenColumnWidth

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: nstepien

README.md

@@ -187,9 +187,6 @@ The DataGrid supports the following CSS variables for customization:
   --rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
   --rdg-summary-border-color: light-dark(#aaa, #555);
 
-  /* Frozen columns */
-  --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
-
   /* Checkboxes */
   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
 }

src/DataGrid.tsx

@@ -69,7 +69,12 @@ import type { PartialPosition } from './ScrollToCell';
 import ScrollToCell from './ScrollToCell';
 import { default as defaultRenderSortStatus } from './sortStatus';
 import { cellDragHandleClassname, cellDragHandleFrozenClassname } from './style/cell';
-import { rootClassname, viewportDraggingClassname } from './style/core';
+import {
+  rootClassname,
+  frozenColumnShadowClassname,
+  viewportDraggingClassname,
+  frozenColumnShadowTopClassname
+} from './style/core';
 import SummaryRow from './SummaryRow';
 
 export interface SelectCellState extends Position {
@@ -368,6 +373,10 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const minRowIdx = -headerAndTopSummaryRowsCount;
   const mainHeaderRowIdx = minRowIdx + groupedColumnHeaderRowsCount;
   const maxRowIdx = rows.length + bottomSummaryRowsCount - 1;
+  const frozenShadowStyles: React.CSSProperties = {
+    gridColumnStart: lastFrozenColumnIndex + 2,
+    insetInlineStart: totalFrozenColumnWidth
+  };
 
   const [selectedPosition, setSelectedPosition] = useState(
     (): SelectCellState | EditCellState<R> => ({ idx: -1, rowIdx: minRowIdx - 1, mode: 'SELECT' })
@@ -1269,11 +1278,11 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
               const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
               const top =
                 clientHeight > totalRowHeight
-                  ? gridHeight - summaryRowHeight * (bottomSummaryRows.length - rowIdx)
+                  ? gridHeight - summaryRowHeight * (bottomSummaryRowsCount - rowIdx)
                   : undefined;
               const bottom =
                 top === undefined
-                  ? summaryRowHeight * (bottomSummaryRows.length - 1 - rowIdx)
+                  ? summaryRowHeight * (bottomSummaryRowsCount - 1 - rowIdx)
                   : undefined;
 
               return (
@@ -1298,6 +1307,47 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
         )}
       </DataGridDefaultRenderersContext>
 
+      {lastFrozenColumnIndex > -1 && (
+        <>
+          <div
+            className={frozenColumnShadowTopClassname}
+            style={{
+              ...frozenShadowStyles,
+              gridRowStart: 1,
+              gridRowEnd: headerRowsCount + 1 + topSummaryRowsCount,
+              insetBlockStart: 0
+            }}
+          />
+
+          {rows.length > 0 && (
+            <div
+              className={frozenColumnShadowClassname}
+              style={{
+                ...frozenShadowStyles,
+                gridRowStart: headerAndTopSummaryRowsCount + rowOverscanStartIdx + 1,
+                gridRowEnd: headerAndTopSummaryRowsCount + rowOverscanEndIdx + 2
+              }}
+            />
+          )}
+
+          {bottomSummaryRows != null && bottomSummaryRowsCount > 0 && (
+            <div
+              className={frozenColumnShadowTopClassname}
+              style={{
+                ...frozenShadowStyles,
+                gridRowStart: headerAndTopSummaryRowsCount + rows.length + 1,
+                gridRowEnd: headerAndTopSummaryRowsCount + rows.length + 1 + bottomSummaryRowsCount,
+                insetBlockStart:
+                  clientHeight > totalRowHeight
+                    ? gridHeight - summaryRowHeight * bottomSummaryRowsCount
+                    : undefined,
+                insetBlockEnd: clientHeight > totalRowHeight ? undefined : 0
+              }}
+            />
+          )}
+        </>
+      )}
+
       {getDragHandle()}
 
       {/* render empty cells that span only 1 column so we can safely measure column widths, regardless of colSpan */}

src/style/cell.ts

@@ -35,11 +35,6 @@ export const cellFrozen = css`
     position: sticky;
     /* Should have a higher value than 0 to show up above unfrozen cells */
     z-index: 1;
-
-    /* Add box-shadow on the last frozen cell */
-    &:nth-last-child(1 of &) {
-      box-shadow: var(--rdg-cell-frozen-box-shadow);
-    }
   }
 `;
 

src/style/core.ts

@@ -16,7 +16,6 @@ const root = css`
     --rdg-selection-width: 2px;
     --rdg-selection-color: hsl(207, 75%, 66%);
     --rdg-font-size: 14px;
-    --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
     --rdg-border-width: 1px;
     --rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
     --rdg-color: light-dark(#000, #ddd);
@@ -38,10 +37,6 @@ const root = css`
       color-scheme: light;
     }
 
-    &:dir(rtl) {
-      --rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
-    }
-
     display: grid;
 
     accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%));
@@ -59,6 +54,9 @@ const root = css`
     color: var(--rdg-color);
     font-size: var(--rdg-font-size);
 
+    container-name: rdg-root;
+    container-type: scroll-state;
+
     /* needed on Firefox to fix scrollbars */
     &::before {
       content: '';
@@ -92,3 +90,35 @@ const viewportDragging = css`
 `;
 
 export const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`;
+
+// Add shadow after the last frozen cell
+export const frozenColumnShadowClassname = css`
+  position: sticky;
+  width: 10px;
+  background-image: linear-gradient(
+    to right,
+    light-dark(rgb(0 0 0 / 15%), rgb(0 0 0 / 40%)),
+    transparent
+  );
+  pointer-events: none;
+  z-index: 1;
+
+  opacity: 1;
+  transition: opacity 0.1s;
+
+  /* TODO: reverse 'opacity' and remove 'not' */
+  @container rdg-root not scroll-state(scrollable: inline-start) {
+    opacity: 0;
+  }
+
+  &:dir(rtl) {
+    transform: scaleX(-1);
+  }
+`;
+
+const topShadowClassname = css`
+  /* render above header and summary rows */
+  z-index: 2;
+`;
+
+export const frozenColumnShadowTopClassname = `${frozenColumnShadowClassname} ${topShadowClassname}`;

test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png

@@ -34,7 +34,7 @@ const dialogContainerClassname = css`
   inset: 0;
   display: flex;
   place-items: center;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgb(0 0 0 / 10%);
 
   > dialog {
     width: 300px;

test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png

@@ -15,7 +15,7 @@ const gridClassname = css`
 
 function EmptyRowsRenderer() {
   return (
-    <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
+    <div style={{ gridColumn: '1/-1', placeSelf: 'center' }}>
       Nothing to show{' '}
       <span lang="ja" title="ショボーン">
         (´・ω・`)