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

package/dist/index.js

@@ -725,6 +725,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     isFocusingOnAnchor.current = false;
   };
   var openTooltip = function openTooltip() {
+    isFocusingOnTooltip.current = false;
     onAnchorFocusIn();
     if (delayOnOpen) {
       setTimeout(function () {
@@ -6390,11 +6391,42 @@ var useBackgroundColor = function useBackgroundColor() {
   return "var(--background-color, " + backgroundColor + ")";
 };
 
+var DATA_TABLE_STATES = {
+  CONTENT: 'CONTENT',
+  SKELETON_LOADING: 'SKELETON_LOADING',
+  BACKGROUND_LOADING: 'BACKGROUND_LOADING',
+  EMPTY: 'EMPTY'
+};
+var DATA_TABLE_SCROLL_STATES = {
+  NO_SCROLL: 'NO_SCROLL',
+  SCROLLABLE_CONTENT_ON_BOTH_SIDES: 'SCROLLABLE_CONTENT_ON_BOTH_SIDES',
+  SCROLLABLE_CONTENT_ON_LEFT: 'SCROLLABLE_CONTENT_ON_LEFT',
+  SCROLLABLE_CONTENT_ON_RIGHT: 'SCROLLABLE_CONTENT_ON_RIGHT'
+};
+var AMOUNT_OF_SKELETON_ROWS = 10;
+
+var initialValue = {
+  columns: [],
+  numberOfRows: 0,
+  state: DATA_TABLE_STATES.SKELETON_LOADING,
+  tableId: ''
+};
+var Context$1 = React.createContext(initialValue);
+var useDataTableContext = function useDataTableContext() {
+  var context = React.useContext(Context$1);
+  if (!context) {
+    throw Error('useDataTableContext should be used withing `DataTable`. Probably you are using `DataTableRow` without a `DataTable` component');
+  }
+  return context;
+};
+
 var DataTableHeader = function DataTableHeader(_ref) {
   var columns = _ref.columns,
     onSort = _ref.onSort,
     showActionMenu = _ref.showActionMenu;
   var backgroundColor = useBackgroundColor();
+  var _useDataTableContext = useDataTableContext(),
+    tableId = _useDataTableContext.tableId;
   //Handling the case where the columns is used only to define the size
   var haveLabels = columns.find(function (column) {
     return column.label && column.label !== '';
@@ -6420,7 +6452,8 @@ var DataTableHeader = function DataTableHeader(_ref) {
   }), React__default["default"].createElement("thead", {
     style: {
       backgroundColor: backgroundColor
-    }
+    },
+    id: tableId + "-header"
   }, React__default["default"].createElement("tr", {
     className: styles$1b['data-table-header']
   }, columns.filter(function (column) {
@@ -6457,75 +6490,46 @@ var DataTableHeader = function DataTableHeader(_ref) {
   }))));
 };
 
-var DATA_TABLE_STATES = {
-  CONTENT: 'CONTENT',
-  SKELETON_LOADING: 'SKELETON_LOADING',
-  BACKGROUND_LOADING: 'BACKGROUND_LOADING',
-  EMPTY: 'EMPTY'
-};
-var DATA_TABLE_SCROLL_STATES = {
-  NO_SCROLL: 'NO_SCROLL',
-  SCROLLABLE_CONTENT_ON_BOTH_SIDES: 'SCROLLABLE_CONTENT_ON_BOTH_SIDES',
-  SCROLLABLE_CONTENT_ON_LEFT: 'SCROLLABLE_CONTENT_ON_LEFT',
-  SCROLLABLE_CONTENT_ON_RIGHT: 'SCROLLABLE_CONTENT_ON_RIGHT'
-};
-var AMOUNT_OF_SKELETON_ROWS = 10;
-
-var initialValue = {
-  columns: [],
-  numberOfRows: 0,
-  state: DATA_TABLE_STATES.SKELETON_LOADING
-};
-var Context$1 = React.createContext(initialValue);
-var useDataTableContext = function useDataTableContext() {
-  var context = React.useContext(Context$1);
-  if (!context) {
-    throw Error('useDataTableContext should be used withing `DataTable`. Probably you are using `DataTableRow` without a `DataTable` component');
-  }
-  return context;
-};
-
 var styles$1a = {"data-table":"_zEfoA","data-table__content":"_v-WNu","data-table__content--with-scroll":"_xI2-r","data-table__background-loading":"_ED7Nm","data-table__table":"_fnq34","data-table__table--no-columns":"_qSrJq","data-table__body":"_1SNLz","data-table__body--no-bottom-radius":"_zCIMD","data-table__footer":"_mp1Ok","data-table__pagination-controls":"_vdEZz"};
 
 var styles$19 = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fake-border--fixed-scroll":"_C5CU0","data-table-scroll-fake-border--top":"_L5fRB","data-table-scroll-fake-border--bottom":"_omhE4","data-table-scroll-fake-border__left":"_mpDFy","data-table-scroll-fake-border__left--top":"_G3b-p","data-table-scroll-fake-border__left--bottom":"_YUMxZ","data-table-scroll-fake-border__right":"_xUVcY","data-table-scroll-fake-border__right--top":"_BE0hn","data-table-scroll-fake-border__right--bottom":"_UtFdB"};
 
-var useTableHeaderHeight = function useTableHeaderHeight(tableRef, isShowingColumns) {
+var useTableHeaderHeight = function useTableHeaderHeight(isShowingColumns) {
+  var _useDataTableContext = useDataTableContext(),
+    tableId = _useDataTableContext.tableId;
   var _useState = React.useState('24px'),
     headerHeight = _useState[0],
     setHeaderHeight = _useState[1];
   React.useLayoutEffect(function () {
-    if (isShowingColumns && tableRef.current) {
-      var header = tableRef.current.getElementsByTagName('thead')[0];
-      var height = window.getComputedStyle(header).getPropertyValue('height');
-      setHeaderHeight(height);
+    if (!isShowingColumns) {
+      return;
+    }
+    var header = document.querySelector("#" + tableId + "-header");
+    if (!header) {
+      return;
     }
-  }, [tableRef, isShowingColumns]);
+    var height = window.getComputedStyle(header).getPropertyValue('height');
+    setHeaderHeight(height);
+  }, [isShowingColumns, tableId]);
   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;
 };
 
@@ -6538,10 +6542,9 @@ var useDetectFixedScroll = function useDetectFixedScroll(tableRef) {
 var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
   var _classNames, _classNames2, _classNames3;
   var placement = _ref.placement,
-    isShowingColumns = _ref.isShowingColumns,
-    tableRef = _ref.tableRef;
-  var headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
-  var hasFixedScroll = useDetectFixedScroll(tableRef);
+    isShowingColumns = _ref.isShowingColumns;
+  var headerHeight = useTableHeaderHeight(isShowingColumns);
+  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)),
@@ -9258,9 +9261,8 @@ var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
   var _classNames;
   var showShadowOnLeft = _ref.showShadowOnLeft,
     showShadowOnRight = _ref.showShadowOnRight,
-    isShowingColumns = _ref.isShowingColumns,
-    tableRef = _ref.tableRef;
-  var headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
+    isShowingColumns = _ref.isShowingColumns;
+  var headerHeight = useTableHeaderHeight(isShowingColumns);
   var _useState = React.useState(detectAlwaysShowScrollbars),
     hasFixedScroll = _useState[0];
   var SCROLL_SIZE = '15px';
@@ -9301,8 +9303,7 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
   var children = _ref.children,
     stickyColumns = _ref.stickyColumns,
     isShowingColumns = _ref.isShowingColumns,
-    isShowingFooter = _ref.isShowingFooter,
-    tableRef = _ref.tableRef;
+    isShowingFooter = _ref.isShowingFooter;
   var _useDataTableScrollSt = useDataTableScrollState(stickyColumns),
     scrollContainerRef = _useDataTableScrollSt.scrollContainerRef,
     onScroll = _useDataTableScrollSt.onScroll,
@@ -9324,8 +9325,7 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
   return React__default["default"].createElement(React.Fragment, null, (showCoverShadowOnRight || showCoverShadowOnLeft) && React__default["default"].createElement(DataTableCoverShadow, {
     showShadowOnLeft: hasScrollOnLeft && stickyColumns === 'right',
     showShadowOnRight: hasScrollOnRight && stickyColumns === 'left',
-    isShowingColumns: !!isShowingColumns,
-    tableRef: tableRef
+    isShowingColumns: !!isShowingColumns
   }), React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$D[containerClassName], (_classNames = {}, _classNames[styles$D[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$D[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$D[containerClassName + "--with-left-sticky-columns-and-shadow"]] = hasLeftColumnSticky && hasScrollOnLeft, _classNames[styles$D[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$D[containerClassName + "--with-right-sticky-columns-and-shadow"]] = hasRightColumnSticky && hasScrollOnRight, _classNames[styles$D[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
     onScroll: onScroll,
@@ -9527,6 +9527,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 +9586,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']),
@@ -9591,16 +9595,14 @@ var DataTable = function DataTable(_ref) {
   }, React__default["default"].createElement(DataTableStickyColumnsContainer, {
     stickyColumns: stickyColumns,
     isShowingColumns: !!isShowingColumns,
-    isShowingFooter: !!isShowingFooter,
-    tableRef: tableRef
+    isShowingFooter: !!isShowingFooter
   }, isShowingColumns && isScrollableTable && React__default["default"].createElement(DataTableScrollFakeBorder, {
     placement: "top",
-    tableRef: tableRef,
     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,
-    "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({
@@ -9633,7 +9635,6 @@ var DataTable = function DataTable(_ref) {
     "data-testid": testId && testId + "-footer"
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default["default"].createElement(DataTableScrollFakeBorder, {
     placement: "bottom",
-    tableRef: tableRef,
     isShowingColumns: !!isShowingColumns
   })), React__default["default"].createElement(Pagination, null));
 };
@@ -12757,7 +12758,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, children);
 };
 
-var styles$9 = {"phone-field":"_Q0GfJ","phone-field__flag":"_-uOqW","phone-field__input--with-square-borders":"_TEU6N"};
+var styles$9 = {"phone-field":"_Q0GfJ","phone-field__flag":"_-uOqW","phone-field__input":"_Hes9b","phone-field__input--with-square-borders":"_TEU6N"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -13792,7 +13793,7 @@ var PhoneField = function PhoneField(_ref) {
     }), React__default["default"].createElement("span", null, "+", libphonenumberJs.getCountryCallingCode(selectedCountry))) : "+" + libphonenumberJs.getCountryCallingCode(selectedCountry)
   }, React__default["default"].createElement("input", _extends({}, inputProps, {
     type: "tel",
-    className: classnames__default["default"](inputProps.className, (_classNames = {}, _classNames[styles$9['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
+    className: classnames__default["default"](inputProps.className, styles$9['phone-field__input'], (_classNames = {}, _classNames[styles$9['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
     onChange: handlePhoneChange,
     onBlur: handlePhoneBlur
   })))));