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

package/dist/index.js

@@ -6279,13 +6279,27 @@ var styles$19 = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fak
  */
 var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
   var _classNames, _classNames2, _classNames3;
-  var placement = _ref.placement;
+  var placement = _ref.placement,
+    tableRef = _ref.tableRef;
+  var _React$useState = React__default["default"].useState(24),
+    headerheight = _React$useState[0],
+    setHeaderHeight = _React$useState[1];
+  React.useLayoutEffect(function () {
+    if (!tableRef.current) {
+      console.log('ref not available');
+      return;
+    }
+    var header = tableRef.current.getElementsByTagName('thead')[0];
+    console.log('header height', header.clientHeight);
+    setHeaderHeight(header.clientHeight);
+  }, [setHeaderHeight, tableRef]);
   var backgroundColor = useBackgroundColor();
   return React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$19['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$19['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$19['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames)),
-    // @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["default"].createElement("div", {
     className: classnames__default["default"](styles$19['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$19['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$19['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
@@ -9318,7 +9332,8 @@ var DataTable = function DataTable(_ref) {
     isShowingFooter: !!isShowingFooter,
     tableRef: tableRef
   }, isShowingColumns && isScrollableTable && React__default["default"].createElement(DataTableScrollFakeBorder, {
-    placement: "top"
+    placement: "top",
+    tableRef: tableRef
   }), React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$1a['data-table__content'], (_classNames = {}, _classNames[styles$1a['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
     style: conditionalStyles
@@ -9353,7 +9368,8 @@ var DataTable = function DataTable(_ref) {
     className: styles$1a['data-table__footer'],
     "data-testid": testId && testId + "-footer"
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default["default"].createElement(DataTableScrollFakeBorder, {
-    placement: "bottom"
+    placement: "bottom",
+    tableRef: tableRef
   })), React__default["default"].createElement(Pagination, null));
 };