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

package/dist/index.modern.js

@@ -6603,7 +6603,8 @@ const AMOUNT_OF_SKELETON_ROWS = 10;
 const initialValue = {
   columns: [],
   numberOfRows: 0,
-  state: DATA_TABLE_STATES.SKELETON_LOADING
+  state: DATA_TABLE_STATES.SKELETON_LOADING,
+  tableId: ''
 };
 const Context$1 = createContext(initialValue);
 const useDataTableContext = () => {
@@ -6630,6 +6631,23 @@ const useTableHeaderHeight = (tableRef, isShowingColumns) => {
   return headerHeight;
 };
 
+const useDetectFixedScroll = () => {
+  const [hasFixedScroll] = useState(detectAlwaysShowScrollbars);
+  const [hasScroll, setHasScroll] = useState(false);
+  const {
+    tableId
+  } = useDataTableContext();
+  useLayoutEffect(() => {
+    const content = document.querySelector(`#${tableId}-content`);
+    if (!content) {
+      return;
+    }
+    const 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.
@@ -6642,7 +6660,7 @@ const DataTableScrollFakeBorder = ({
   tableRef
 }) => {
   const headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
-  const [hasFixedScroll] = useState(detectAlwaysShowScrollbars());
+  const hasFixedScroll = useDetectFixedScroll();
   const backgroundColor = useBackgroundColor();
   return React__default.createElement("div", {
     className: classnames(styles$19['data-table-scroll-fake-border'], {
@@ -9409,7 +9427,7 @@ const DataTableCoverShadow = ({
   tableRef
 }) => {
   const headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
-  const [hasFixedScroll] = useState(detectAlwaysShowScrollbars());
+  const [hasFixedScroll] = useState(detectAlwaysShowScrollbars);
   const SCROLL_SIZE = '15px';
   const getHeaderHeight = () => {
     if (hasFixedScroll) {
@@ -9684,6 +9702,7 @@ const DataTable = _ref => {
   const prevPaginationRef = useRef(false);
   const RowItem = itemComponent || DataTableDefaultItemComponent;
   const tableRef = useRef(null);
+  const tableId = useMemo(() => `data-table-${Math.floor(Math.random() * 1000000)}`, []);
   let conditionalStyles = {};
   const isScrollableTable = !!maxHeight;
   if (isScrollableTable) {
@@ -9740,7 +9759,8 @@ const DataTable = _ref => {
       showActionMenu: state === DATA_TABLE_STATES.EMPTY ? false : showActionMenu,
       numberOfRows,
       hasVerticalBorders,
-      state
+      state,
+      tableId
     }
   }, React__default.createElement("div", {
     className: classnames(styles$1a['data-table']),
@@ -9758,7 +9778,8 @@ const DataTable = _ref => {
     className: classnames(styles$1a['data-table__content'], {
       [styles$1a['data-table__content--with-scroll']]: isScrollableTable
     }),
-    style: conditionalStyles
+    style: conditionalStyles,
+    id: `${tableId}-content`
   }, state === DATA_TABLE_STATES.BACKGROUND_LOADING && React__default.createElement("div", {
     className: styles$1a['data-table__background-loading']
   }, React__default.createElement(Spinner, null)), React__default.createElement("table", _extends({