@7shifts/sous-chef 3.67.2-beta.1 → 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,29 +6504,22 @@ var useTableHeaderHeight = function useTableHeaderHeight(tableRef, isShowingColu
   return headerHeight;
 };
 
-var useDetectFixedScroll = function useDetectFixedScroll(tableRef) {
+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 () {
-    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);
+    var content = document.querySelector("#" + tableId + "-content");
     if (!content) {
       return;
     }
-    console.log(4);
     var hasScroll = content.scrollHeight > content.clientHeight;
     setHasScroll(hasScroll);
-  }, [setHasScroll, tableRef]);
+  }, [setHasScroll, tableId]);
   return hasScroll && hasFixedScroll;
 };
 
@@ -6541,7 +6535,7 @@ var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
     isShowingColumns = _ref.isShowingColumns,
     tableRef = _ref.tableRef;
   var headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
-  var hasFixedScroll = useDetectFixedScroll(tableRef);
+  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)),
@@ -9527,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) {
@@ -9583,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']),
@@ -9600,7 +9598,7 @@ var DataTable = function DataTable(_ref) {
   }), 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,
-    "data-id": "data-table-content"
+    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({