@7shifts/sous-chef 3.67.2-beta.2 → 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,48 +6620,26 @@ 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,
-  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;
-};
-
 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;
 };
 
@@ -6656,10 +6668,9 @@ const useDetectFixedScroll = () => {
  */
 const DataTableScrollFakeBorder = ({
   placement,
-  isShowingColumns,
-  tableRef
+  isShowingColumns
 }) => {
-  const headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
+  const headerHeight = useTableHeaderHeight(isShowingColumns);
   const hasFixedScroll = useDetectFixedScroll();
   const backgroundColor = useBackgroundColor();
   return React__default.createElement("div", {
@@ -9423,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 = () => {
@@ -9468,8 +9478,7 @@ const DataTableStickyColumnsContainer = ({
   children,
   stickyColumns,
   isShowingColumns,
-  isShowingFooter,
-  tableRef
+  isShowingFooter
 }) => {
   const {
     scrollContainerRef,
@@ -9492,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,
@@ -9768,11 +9776,9 @@ 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'], {
@@ -9814,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));
 };
@@ -12823,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,
@@ -13864,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,