[data-table] fixed scroll shadows

semrush · Jul 15, 2024 · 1d347ec · 1d347ec
1 parent 23cdef8
commit 1d347ec
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 31 deletions.
diff --git a/semcore/data-table/CHANGELOG.md b/semcore/data-table/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.40.9] - 2024-07-15
+
+### Fixed
+
+- View of ScrollArea shadows in table body.
+
 ## [4.40.8] - 2024-07-12
 
 ### Fixed

diff --git a/semcore/data-table/src/Body.tsx b/semcore/data-table/src/Body.tsx
@@ -275,38 +275,17 @@ class Body extends Component<AsProps, State> {
     this.firstRowResizeObserver?.disconnect();
   }
 
-  render() {
+  renderBodyContent() {
     const SBody = Root;
-    const SBodyWrapper = Box;
     const SHeightHold = Box;
-    const {
-      Children,
-      styles,
-      rows,
-      columns,
-      $scrollRef,
-      virtualScroll,
-      onResize,
-      onScroll,
-      disabledScroll,
-      renderRows,
-      animationsDisabled,
-      scrollContainerRef,
-    } = this.asProps;
-
-    const columnsInitialized = columns.reduce((sum, { width }) => sum + width, 0) > 0 || testEnv;
 
-    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);
+    const { styles, rows, columns, virtualScroll, renderRows, animationsDisabled } = this.asProps;
 
     const rowHeight = this.getRowHeight();
     const holdHeight =
       rowHeight !== undefined && virtualScroll ? rowHeight * rows.length : undefined;
 
-    if (virtualScroll && columnsInitialized && !rowHeight) {
-      requestAnimationFrame(this.setupRowSizeObserver);
-    }
-
-    const body = sstyled(styles)(
+    return sstyled(styles)(
       <SBody
         render={Box}
         animationsDisabled={animationsDisabled}
@@ -322,19 +301,46 @@ class Body extends Component<AsProps, State> {
         )}
       </SBody>,
     );
+  }
+
+  render() {
+    const SBodyWrapper = Box;
+    const SScrollArea = Root;
+    const {
+      Children,
+      styles,
+      columns,
+      $scrollRef,
+      virtualScroll,
+      onResize,
+      onScroll,
+      disabledScroll,
+      scrollContainerRef,
+    } = this.asProps;
+
+    const columnsInitialized = columns.reduce((sum, { width }) => sum + width, 0) > 0 || testEnv;
+
+    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);
+
+    const rowHeight = this.getRowHeight();
+
+    if (virtualScroll && columnsInitialized && !rowHeight) {
+      requestAnimationFrame(this.setupRowSizeObserver);
+    }
 
     if (disabledScroll) {
-      return <SBodyWrapper>{body}</SBodyWrapper>;
+      return <SBodyWrapper>{this.renderBodyContent()}</SBodyWrapper>;
     }
 
     const scrollContainerRefs = [$scrollRef, this.scrollContainerRef];
     if (scrollContainerRef) {
       scrollContainerRefs.push(scrollContainerRef);
     }
 
-    return (
+    return sstyled(styles)(
       <SBodyWrapper>
-        <ScrollArea
+        <SScrollArea
+          render={ScrollArea}
           shadow
           leftOffset={offsetLeftSum}
           rightOffset={offsetRightSum}
@@ -346,24 +352,23 @@ class Body extends Component<AsProps, State> {
             role='rowgroup'
             focusRingTopOffset={'3px'}
           >
-            {body}
+            {this.renderBodyContent()}
           </ScrollArea.Container>
           <div style={displayContents} role='rowgroup'>
             <div style={displayContents} role='row'>
               <div style={displayContents} role='cell'>
                 <ScrollArea.Bar
                   orientation='horizontal'
-                  position={'sticky'}
                   bottom={0}
                   container={this.scrollContainerRef}
                 />
                 <ScrollArea.Bar orientation='vertical' w={'12px'} zIndex={2} />
               </div>
             </div>
           </div>
-        </ScrollArea>
+        </SScrollArea>
         {Children.origin}
-      </SBodyWrapper>
+      </SBodyWrapper>,
     );
   }
 }

diff --git a/semcore/data-table/src/style/data-table.shadow.css b/semcore/data-table/src/style/data-table.shadow.css
@@ -218,6 +218,15 @@ SColumn[use='secondary'] SSortWrapper:before {
 
 SBodyWrapper {
   position: relative;
+
+  SShadowHorizontal,
+  SShadowVertical {
+
+    &:before,
+    &:after {
+      z-index: 1;
+    }
+  }
 }
 
 SBody {