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

package/dist/index.modern.js

@@ -697,6 +697,7 @@ const TooltipElement = ({
     isFocusingOnAnchor.current = false;
   };
   const openTooltip = () => {
+    isFocusingOnTooltip.current = false;
     onAnchorFocusIn();
     if (_delayOnOpen) {
       setTimeout(() => {
@@ -6522,12 +6523,44 @@ const useBackgroundColor = () => {
   return `var(--background-color, ${backgroundColor})`;
 };
 
+const DATA_TABLE_STATES = {
+  CONTENT: 'CONTENT',
+  SKELETON_LOADING: 'SKELETON_LOADING',
+  BACKGROUND_LOADING: 'BACKGROUND_LOADING',
+  EMPTY: 'EMPTY'
+};
+const 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'
+};
+const AMOUNT_OF_SKELETON_ROWS = 10;
+
+const initialValue = {
+  columns: [],
+  numberOfRows: 0,
+  state: DATA_TABLE_STATES.SKELETON_LOADING,
+  tableId: ''
+};
+const Context$1 = createContext(initialValue);
+const useDataTableContext = () => {
+  const context = useContext(Context$1);
+  if (!context) {
+    throw Error('useDataTableContext should be used withing `DataTable`. Probably you are using `DataTableRow` without a `DataTable` component');
+  }
+  return context;
+};
+
 const DataTableHeader = ({
   columns,
   onSort,
   showActionMenu
 }) => {
   const backgroundColor = useBackgroundColor();
+  const {
+    tableId
+  } = useDataTableContext();
   //Handling the case where the columns is used only to define the size
   const haveLabels = columns.find(column => column.label && column.label !== '');
   if (!haveLabels) {
@@ -6551,7 +6584,8 @@ const DataTableHeader = ({
   }), React__default.createElement("thead", {
     style: {
       backgroundColor
-    }
+    },
+    id: `${tableId}-header`
   }, React__default.createElement("tr", {
     className: styles$1b['data-table-header']
   }, columns.filter(column => !column.hidden).map(column => {
@@ -6586,70 +6620,43 @@ const DataTableHeader = ({
   }))));
 };
 
-const DATA_TABLE_STATES = {
-  CONTENT: 'CONTENT',
-  SKELETON_LOADING: 'SKELETON_LOADING',
-  BACKGROUND_LOADING: 'BACKGROUND_LOADING',
-  EMPTY: 'EMPTY'
-};
-const 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'
-};
-const AMOUNT_OF_SKELETON_ROWS = 10;
-
-const initialValue = {
-  columns: [],
-  numberOfRows: 0,
-  state: DATA_TABLE_STATES.SKELETON_LOADING
-};
-const Context$1 = createContext(initialValue);
-const useDataTableContext = () => {
-  const context = 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"};
 
-const useTableHeaderHeight = (tableRef, isShowingColumns) => {
+const useTableHeaderHeight = isShowingColumns => {
+  const {
+    tableId
+  } = useDataTableContext();
   const [headerHeight, setHeaderHeight] = useState('24px');
   useLayoutEffect(() => {
-    if (isShowingColumns && tableRef.current) {
-      const header = tableRef.current.getElementsByTagName('thead')[0];
-      const height = window.getComputedStyle(header).getPropertyValue('height');
-      setHeaderHeight(height);
+    if (!isShowingColumns) {
+      return;
+    }
+    const header = document.querySelector(`#${tableId}-header`);
+    if (!header) {
+      return;
     }
-  }, [tableRef, isShowingColumns]);
+    const height = window.getComputedStyle(header).getPropertyValue('height');
+    setHeaderHeight(height);
+  }, [isShowingColumns, tableId]);
   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;
 };
 
@@ -6661,11 +6668,10 @@ const useDetectFixedScroll = tableRef => {
  */
 const DataTableScrollFakeBorder = ({
   placement,
-  isShowingColumns,
-  tableRef
+  isShowingColumns
 }) => {
-  const headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
-  const hasFixedScroll = useDetectFixedScroll(tableRef);
+  const headerHeight = useTableHeaderHeight(isShowingColumns);
+  const hasFixedScroll = useDetectFixedScroll();
   const backgroundColor = useBackgroundColor();
   return React__default.createElement("div", {
     className: classnames(styles$19['data-table-scroll-fake-border'], {
@@ -9428,10 +9434,9 @@ var styles$C = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--lef
 const DataTableCoverShadow = ({
   showShadowOnLeft,
   showShadowOnRight,
-  isShowingColumns,
-  tableRef
+  isShowingColumns
 }) => {
-  const headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
+  const headerHeight = useTableHeaderHeight(isShowingColumns);
   const [hasFixedScroll] = useState(detectAlwaysShowScrollbars);
   const SCROLL_SIZE = '15px';
   const getHeaderHeight = () => {
@@ -9473,8 +9478,7 @@ const DataTableStickyColumnsContainer = ({
   children,
   stickyColumns,
   isShowingColumns,
-  isShowingFooter,
-  tableRef
+  isShowingFooter
 }) => {
   const {
     scrollContainerRef,
@@ -9497,8 +9501,7 @@ const DataTableStickyColumnsContainer = ({
   return React__default.createElement(Fragment, null, (showCoverShadowOnRight || showCoverShadowOnLeft) && React__default.createElement(DataTableCoverShadow, {
     showShadowOnLeft: hasScrollOnLeft && stickyColumns === 'right',
     showShadowOnRight: hasScrollOnRight && stickyColumns === 'left',
-    isShowingColumns: !!isShowingColumns,
-    tableRef: tableRef
+    isShowingColumns: !!isShowingColumns
   }), React__default.createElement("div", {
     className: classnames(styles$D[containerClassName], {
       [styles$D[`${containerClassName}--with-footer`]]: isShowingFooter,
@@ -9707,6 +9710,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 +9767,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']),
@@ -9771,18 +9776,16 @@ const DataTable = _ref => {
   }, React__default.createElement(DataTableStickyColumnsContainer, {
     stickyColumns: stickyColumns,
     isShowingColumns: !!isShowingColumns,
-    isShowingFooter: !!isShowingFooter,
-    tableRef: tableRef
+    isShowingFooter: !!isShowingFooter
   }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "top",
-    tableRef: tableRef,
     isShowingColumns: !!isShowingColumns
   }), React__default.createElement("div", {
     className: classnames(styles$1a['data-table__content'], {
       [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({
@@ -9817,7 +9820,6 @@ const DataTable = _ref => {
     "data-testid": testId && `${testId}-footer`
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "bottom",
-    tableRef: tableRef,
     isShowingColumns: !!isShowingColumns
   })), React__default.createElement(Pagination, null));
 };
@@ -12826,7 +12828,7 @@ const FormFeedback = ({
   }, 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"};
 
 const usePhoneFieldControllers = ({
   name,
@@ -13867,7 +13869,7 @@ const PhoneField = _ref => {
     }), React__default.createElement("span", null, "+", getCountryCallingCode(selectedCountry))) : `+${getCountryCallingCode(selectedCountry)}`
   }, React__default.createElement("input", _extends({}, inputProps, {
     type: "tel",
-    className: classnames(inputProps.className, {
+    className: classnames(inputProps.className, styles$9['phone-field__input'], {
       [styles$9['phone-field__input--with-square-borders']]: !disabledCountry
     }),
     onChange: handlePhoneChange,