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

package/dist/index.js

@@ -6474,7 +6474,8 @@ var AMOUNT_OF_SKELETON_ROWS = 10;
 var initialValue = {
   columns: [],
   numberOfRows: 0,
-  state: DATA_TABLE_STATES.SKELETON_LOADING
+  state: DATA_TABLE_STATES.SKELETON_LOADING,
+  tableId: ''
 };
 var Context$1 = React.createContext(initialValue);
 var useDataTableContext = function useDataTableContext() {
@@ -6503,6 +6504,25 @@ var useTableHeaderHeight = function useTableHeaderHeight(tableRef, isShowingColu
   return headerHeight;
 };
 
+var useDetectFixedScroll = function useDetectFixedScroll() {
+  var _useState = React.useState(detectAlwaysShowScrollbars),
+    hasFixedScroll = _useState[0];
+  var _useState2 = React.useState(false),
+    hasScroll = _useState2[0],
+    setHasScroll = _useState2[1];
+  var _useDataTableContext = useDataTableContext(),
+    tableId = _useDataTableContext.tableId;
+  React.useLayoutEffect(function () {
+    var content = document.querySelector("#" + tableId + "-content");
+    if (!content) {
+      return;
+    }
+    var hasScroll = content.scrollHeight > content.clientHeight;
+    setHasScroll(hasScroll);
+  }, [setHasScroll, tableId]);
+  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 +6535,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();
   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 +9255,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() {
@@ -9502,6 +9521,9 @@ var DataTable = function DataTable(_ref) {
   var prevPaginationRef = React.useRef(false);
   var RowItem = itemComponent || DataTableDefaultItemComponent;
   var tableRef = React.useRef(null);
+  var tableId = React.useMemo(function () {
+    return "data-table-" + Math.floor(Math.random() * 1000000);
+  }, []);
   var conditionalStyles = {};
   var isScrollableTable = !!maxHeight;
   if (isScrollableTable) {
@@ -9558,7 +9580,8 @@ var DataTable = function DataTable(_ref) {
       showActionMenu: state === DATA_TABLE_STATES.EMPTY ? false : showActionMenu,
       numberOfRows: numberOfRows,
       hasVerticalBorders: hasVerticalBorders,
-      state: state
+      state: state,
+      tableId: tableId
     }
   }, React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$1a['data-table']),
@@ -9574,7 +9597,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,
+    id: tableId + "-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({