@7shifts/sous-chef 3.67.2-beta.1 → 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,26 +6631,20 @@ const useTableHeaderHeight = (tableRef, isShowingColumns) => {
   return headerHeight;
 };
 
-const useDetectFixedScroll = tableRef => {
+const useDetectFixedScroll = () => {
   const [hasFixedScroll] = useState(detectAlwaysShowScrollbars);
   const [hasScroll, setHasScroll] = useState(false);
+  const {
+    tableId
+  } = useDataTableContext();
   useLayoutEffect(() => {
-    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"
-    const content = tableRef.current.querySelector('[data-id="data-table-content"]');
-    console.log(3);
+    const content = document.querySelector(`#${tableId}-content`);
     if (!content) {
       return;
     }
-    console.log(4);
     const hasScroll = content.scrollHeight > content.clientHeight;
     setHasScroll(hasScroll);
-  }, [setHasScroll, tableRef]);
+  }, [setHasScroll, tableId]);
   return hasScroll && hasFixedScroll;
 };
 
@@ -6665,7 +6660,7 @@ const DataTableScrollFakeBorder = ({
   tableRef
 }) => {
   const headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
-  const hasFixedScroll = useDetectFixedScroll(tableRef);
+  const hasFixedScroll = useDetectFixedScroll();
   const backgroundColor = useBackgroundColor();
   return React__default.createElement("div", {
     className: classnames(styles$19['data-table-scroll-fake-border'], {
@@ -9707,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) {
@@ -9763,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']),
@@ -9782,7 +9779,7 @@ const DataTable = _ref => {
       [styles$1a['data-table__content--with-scroll']]: isScrollableTable
     }),
     style: conditionalStyles,
-    "data-id": "data-table-content"
+    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({