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

package/dist/index.modern.js

@@ -6118,6 +6118,25 @@ const isFocusingEditableElement = () => {
   }
   return false;
 };
+/**
+ * On MAC OS (not sure on other OS systems) the user can change the `Show scroll bars` to `aways`, then the scroll bar will always show.
+ * In some places we need to account for that in order to properly layout as the scrollbar would take some space in that screen
+ */
+const detectAlwaysShowScrollbars = () => {
+  // Create a temporary test element
+  const boxWithScroll = document.createElement('div');
+  boxWithScroll.style.width = '100px';
+  boxWithScroll.style.height = '100px';
+  boxWithScroll.style.overflow = 'scroll'; // Force scrollbars
+  boxWithScroll.style.visibility = 'hidden'; // Hide it from view
+  boxWithScroll.style.position = 'absolute'; // Remove from layout flow
+  document.body.appendChild(boxWithScroll);
+  // Check if scrollbars take up space
+  const alwaysShowScrollbars = boxWithScroll.offsetWidth > boxWithScroll.clientWidth;
+  // Clean up
+  document.body.removeChild(boxWithScroll);
+  return alwaysShowScrollbars;
+};
 
 var PaginationControls$1 = {
 	previousButton: "Previous",
@@ -6597,7 +6616,42 @@ const useDataTableContext = () => {
 
 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--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 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 [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);
+    }
+  }, [tableRef, isShowingColumns]);
+  return headerHeight;
+};
+
+const useDetectFixedScroll = tableRef => {
+  const [hasFixedScroll] = useState(detectAlwaysShowScrollbars);
+  const [hasScroll, setHasScroll] = useState(false);
+  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);
+    if (!content) {
+      return;
+    }
+    console.log(4);
+    const hasScroll = content.scrollHeight > content.clientHeight;
+    setHasScroll(hasScroll);
+  }, [setHasScroll, tableRef]);
+  return hasScroll && hasFixedScroll;
+};
 
 /**
  * This internal component is used to pass the impression the user is scrolling
@@ -6607,19 +6661,22 @@ var styles$19 = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fak
  */
 const DataTableScrollFakeBorder = ({
   placement,
-  hasSort
+  isShowingColumns,
+  tableRef
 }) => {
-  const topHeaderheight = hasSort ? 29 : 24;
+  const headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
+  const hasFixedScroll = useDetectFixedScroll(tableRef);
   const backgroundColor = useBackgroundColor();
   return React__default.createElement("div", {
     className: classnames(styles$19['data-table-scroll-fake-border'], {
       [styles$19['data-table-scroll-fake-border--top']]: placement === 'top',
-      [styles$19['data-table-scroll-fake-border--bottom']]: placement === 'bottom'
+      [styles$19['data-table-scroll-fake-border--bottom']]: placement === 'bottom',
+      [styles$19['data-table-scroll-fake-border--fixed-scroll']]: hasFixedScroll
     }),
     style: {
       // @ts-expect-error This difines a custom CSS variable
       '--corner-background-color': backgroundColor,
-      top: placement === 'top' ? topHeaderheight : undefined
+      top: placement === 'top' ? headerHeight : undefined
     }
   }, React__default.createElement("div", {
     className: classnames(styles$19['data-table-scroll-fake-border__left'], {
@@ -9374,21 +9431,23 @@ const DataTableCoverShadow = ({
   isShowingColumns,
   tableRef
 }) => {
-  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);
+  const headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
+  const [hasFixedScroll] = useState(detectAlwaysShowScrollbars);
+  const SCROLL_SIZE = '15px';
+  const getHeaderHeight = () => {
+    if (hasFixedScroll) {
+      return `calc(100% - ${headerHeight} - ${SCROLL_SIZE})`;
     }
-  }, [tableRef, isShowingColumns]);
+    return `calc(100% - ${headerHeight})`;
+  };
   return React__default.createElement("div", {
     className: classnames(styles$C['data-table-cover-shadow'], {
       [styles$C['data-table-cover-shadow--left']]: showShadowOnLeft,
       [styles$C['data-table-cover-shadow--right']]: showShadowOnRight
     }),
     style: {
-      height: !isShowingColumns ? '100%' : `calc(100% - ${headerHeight})`
+      height: !isShowingColumns ? '100%' : getHeaderHeight(),
+      bottom: isShowingColumns && hasFixedScroll ? SCROLL_SIZE : 0
     }
   });
 };
@@ -9716,12 +9775,14 @@ const DataTable = _ref => {
     tableRef: tableRef
   }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "top",
-    hasSort: !!onSort
+    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
+    style: conditionalStyles,
+    "data-id": "data-table-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({
@@ -9755,7 +9816,9 @@ const DataTable = _ref => {
     className: styles$1a['data-table__footer'],
     "data-testid": testId && `${testId}-footer`
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
-    placement: "bottom"
+    placement: "bottom",
+    tableRef: tableRef,
+    isShowingColumns: !!isShowingColumns
   })), React__default.createElement(Pagination, null));
 };
 
@@ -10807,7 +10870,8 @@ const FormRow = ({
   children,
   columns,
   sizes,
-  testId
+  testId,
+  space: _space = 20
 }) => {
   const items = React__default.Children.toArray(children).filter(Boolean);
   const additionalColumns = [];
@@ -10818,7 +10882,7 @@ const FormRow = ({
   }
   return React__default.createElement(Flex, {
     flex: [...items, ...additionalColumns].map((_, index) => (sizes == null ? void 0 : sizes[index]) || 1),
-    space: 20,
+    space: _space,
     testId: testId,
     alignItems: "stretch",
     extraClass: styles$l['form-row']
@@ -11276,7 +11340,8 @@ const InlineOptions = ({
 const BoxOptions = ({
   children,
   columns: _columns = 4,
-  testId
+  testId,
+  space: _space = 8
 }) => {
   const MAX_OPTIONS_PER_ROW = +_columns;
   const childrenArray = React__default.Children.toArray(children);
@@ -11285,11 +11350,12 @@ const BoxOptions = ({
     rows.push(childrenArray.slice(i, i + MAX_OPTIONS_PER_ROW));
   }
   return React__default.createElement(Stack, {
-    space: 12,
+    space: _space,
     testId: testId
   }, rows.map((row, rowIndex) => React__default.createElement(FormRow, {
     key: rowIndex,
-    columns: row.length
+    columns: row.length,
+    space: _space
   }, row)));
 };
 
@@ -11301,6 +11367,7 @@ const RadioGroupField = ({
   label,
   caption,
   error,
+  space: _space = 8,
   inline: _inline = false,
   disabled: _disabled = false,
   children,
@@ -11326,7 +11393,7 @@ const RadioGroupField = ({
   return React__default.createElement(RadioGroupFieldContext.Provider, {
     value: contextValue
   }, React__default.createElement(Stack, {
-    space: 12
+    space: _space
   }, label && React__default.createElement("div", {
     className: styles$i['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
@@ -11337,7 +11404,8 @@ const RadioGroupField = ({
     testId: testId
   }, children) : React__default.createElement(BoxOptions, {
     columns: columns,
-    testId: testId
+    testId: testId,
+    space: _space
   }, children), caption && React__default.createElement("div", {
     className: styles$i['radio-group-caption']
   }, caption), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));