@7shifts/sous-chef 3.57.3-beta0 → 3.57.3-beta2

package/dist/index.modern.js

@@ -6399,17 +6399,29 @@ var styles$19 = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fak
  * It creates fake borders with radius corners to hide the table borders when scrolling
  */
 const DataTableScrollFakeBorder = ({
-  placement
+  placement,
+  tableRef
 }) => {
+  const [headerheight, setHeaderHeight] = React__default.useState(24);
+  useLayoutEffect(() => {
+    if (!tableRef.current) {
+      console.log('ref not available');
+      return;
+    }
+    const header = tableRef.current.getElementsByTagName('thead')[0];
+    console.log('header height', header.clientHeight);
+    setHeaderHeight(header.clientHeight);
+  }, [setHeaderHeight, tableRef]);
   const backgroundColor = useBackgroundColor();
   return React__default.createElement("div", {
     className: classnames(styles$19['data-table-scroll-fake-border'], {
       [styles$19['data-table-scroll-fake-border--top']]: placement === 'top',
       [styles$19['data-table-scroll-fake-border--bottom']]: placement === 'bottom'
     }),
-    // @ts-expect-error This difines a custom CSS variable
     style: {
-      '--corner-background-color': backgroundColor
+      // @ts-expect-error This difines a custom CSS variable
+      '--corner-background-color': backgroundColor,
+      top: placement === 'top' ? headerheight : undefined
     }
   }, React__default.createElement("div", {
     className: classnames(styles$19['data-table-scroll-fake-border__left'], {
@@ -9493,7 +9505,8 @@ const DataTable = _ref => {
     isShowingFooter: !!isShowingFooter,
     tableRef: tableRef
   }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
-    placement: "top"
+    placement: "top",
+    tableRef: tableRef
   }), React__default.createElement("div", {
     className: classnames(styles$1a['data-table__content'], {
       [styles$1a['data-table__content--with-scroll']]: isScrollableTable
@@ -9532,7 +9545,8 @@ const DataTable = _ref => {
     className: styles$1a['data-table__footer'],
     "data-testid": testId && `${testId}-footer`
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
-    placement: "bottom"
+    placement: "bottom",
+    tableRef: tableRef
   })), React__default.createElement(Pagination, null));
 };