@7shifts/sous-chef 3.67.2-beta.0 → 3.67.2-beta.1

package/dist/index.js

@@ -6503,6 +6503,32 @@ var useTableHeaderHeight = function useTableHeaderHeight(tableRef, isShowingColu
   return headerHeight;
 };
 
+var useDetectFixedScroll = function useDetectFixedScroll(tableRef) {
+  var _useState = React.useState(detectAlwaysShowScrollbars),
+    hasFixedScroll = _useState[0];
+  var _useState2 = React.useState(false),
+    hasScroll = _useState2[0],
+    setHasScroll = _useState2[1];
+  React.useLayoutEffect(function () {
+    console.log(1, tableRef);
+    // Check if the table has a scrollbar
+    if (!tableRef.current) {
+      return;
+    }
+    console.log(2);
+    // content should be the next element on tableRef.current that has the data-id="data-table-content"
+    var content = tableRef.current.querySelector('[data-id="data-table-content"]');
+    console.log(3);
+    if (!content) {
+      return;
+    }
+    console.log(4);
+    var hasScroll = content.scrollHeight > content.clientHeight;
+    setHasScroll(hasScroll);
+  }, [setHasScroll, tableRef]);
+  return hasScroll && hasFixedScroll;
+};
+
 /**
  * This internal component is used to pass the impression the user is scrolling
  * just the table content instead of the whole table.
@@ -6515,8 +6541,7 @@ var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
     isShowingColumns = _ref.isShowingColumns,
     tableRef = _ref.tableRef;
   var headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
-  var _useState = React.useState(detectAlwaysShowScrollbars()),
-    hasFixedScroll = _useState[0];
+  var hasFixedScroll = useDetectFixedScroll(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[styles$19['data-table-scroll-fake-border--fixed-scroll']] = hasFixedScroll, _classNames)),
@@ -9236,7 +9261,7 @@ var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
     isShowingColumns = _ref.isShowingColumns,
     tableRef = _ref.tableRef;
   var headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
-  var _useState = React.useState(detectAlwaysShowScrollbars()),
+  var _useState = React.useState(detectAlwaysShowScrollbars),
     hasFixedScroll = _useState[0];
   var SCROLL_SIZE = '15px';
   var getHeaderHeight = function getHeaderHeight() {
@@ -9574,7 +9599,8 @@ var DataTable = function DataTable(_ref) {
     isShowingColumns: !!isShowingColumns
   }), 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
+    style: conditionalStyles,
+    "data-id": "data-table-content"
   }, state === DATA_TABLE_STATES.BACKGROUND_LOADING && React__default["default"].createElement("div", {
     className: styles$1a['data-table__background-loading']
   }, React__default["default"].createElement(Spinner, null)), React__default["default"].createElement("table", _extends({