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

package/dist/index.js

@@ -5975,6 +5975,25 @@ var isFocusingEditableElement = function 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
+ */
+var detectAlwaysShowScrollbars = function detectAlwaysShowScrollbars() {
+  // Create a temporary test element
+  var 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
+  var alwaysShowScrollbars = boxWithScroll.offsetWidth > boxWithScroll.clientWidth;
+  // Clean up
+  document.body.removeChild(boxWithScroll);
+  return alwaysShowScrollbars;
+};
 
 var PaginationControls$1 = {
 	previousButton: "Previous",
@@ -6468,7 +6487,21 @@ var useDataTableContext = function 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"};
+
+var useTableHeaderHeight = function useTableHeaderHeight(tableRef, isShowingColumns) {
+  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);
+    }
+  }, [tableRef, isShowingColumns]);
+  return headerHeight;
+};
 
 /**
  * This internal component is used to pass the impression the user is scrolling
@@ -6479,15 +6512,18 @@ var styles$19 = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fak
 var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
   var _classNames, _classNames2, _classNames3;
   var placement = _ref.placement,
-    hasSort = _ref.hasSort;
-  var topHeaderheight = hasSort ? 29 : 24;
+    isShowingColumns = _ref.isShowingColumns,
+    tableRef = _ref.tableRef;
+  var headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
+  var _useState = React.useState(detectAlwaysShowScrollbars()),
+    hasFixedScroll = _useState[0];
   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)),
+    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)),
     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["default"].createElement("div", {
     className: classnames__default["default"](styles$19['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$19['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$19['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
@@ -9199,20 +9235,21 @@ var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
     showShadowOnRight = _ref.showShadowOnRight,
     isShowingColumns = _ref.isShowingColumns,
     tableRef = _ref.tableRef;
-  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);
+  var headerHeight = useTableHeaderHeight(tableRef, isShowingColumns);
+  var _useState = React.useState(detectAlwaysShowScrollbars()),
+    hasFixedScroll = _useState[0];
+  var SCROLL_SIZE = '15px';
+  var getHeaderHeight = function getHeaderHeight() {
+    if (hasFixedScroll) {
+      return "calc(100% - " + headerHeight + " - " + SCROLL_SIZE + ")";
     }
-  }, [tableRef, isShowingColumns]);
+    return "calc(100% - " + headerHeight + ")";
+  };
   return React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$C['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$C['data-table-cover-shadow--left']] = showShadowOnLeft, _classNames[styles$C['data-table-cover-shadow--right']] = showShadowOnRight, _classNames)),
     style: {
-      height: !isShowingColumns ? '100%' : "calc(100% - " + headerHeight + ")"
+      height: !isShowingColumns ? '100%' : getHeaderHeight(),
+      bottom: isShowingColumns && hasFixedScroll ? SCROLL_SIZE : 0
     }
   });
 };
@@ -9533,7 +9570,8 @@ var DataTable = function DataTable(_ref) {
     tableRef: tableRef
   }, isShowingColumns && isScrollableTable && React__default["default"].createElement(DataTableScrollFakeBorder, {
     placement: "top",
-    hasSort: !!onSort
+    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
@@ -9568,7 +9606,9 @@ var DataTable = function DataTable(_ref) {
     className: styles$1a['data-table__footer'],
     "data-testid": testId && testId + "-footer"
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default["default"].createElement(DataTableScrollFakeBorder, {
-    placement: "bottom"
+    placement: "bottom",
+    tableRef: tableRef,
+    isShowingColumns: !!isShowingColumns
   })), React__default["default"].createElement(Pagination, null));
 };
 
@@ -10636,7 +10676,9 @@ var FormRow = function FormRow(_ref) {
   var children = _ref.children,
     columns = _ref.columns,
     sizes = _ref.sizes,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    _ref$space = _ref.space,
+    space = _ref$space === void 0 ? 20 : _ref$space;
   var items = React__default["default"].Children.toArray(children).filter(Boolean);
   var additionalColumns = [];
   if (columns !== undefined) {
@@ -10650,7 +10692,7 @@ var FormRow = function FormRow(_ref) {
     flex: [].concat(items, additionalColumns).map(function (_, index) {
       return (sizes == null ? void 0 : sizes[index]) || 1;
     }),
-    space: 20,
+    space: space,
     testId: testId,
     alignItems: "stretch",
     extraClass: styles$l['form-row']
@@ -11107,7 +11149,9 @@ var BoxOptions = function BoxOptions(_ref) {
   var children = _ref.children,
     _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? 4 : _ref$columns,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    _ref$space = _ref.space,
+    space = _ref$space === void 0 ? 8 : _ref$space;
   var MAX_OPTIONS_PER_ROW = +columns;
   var childrenArray = React__default["default"].Children.toArray(children);
   var rows = [];
@@ -11115,12 +11159,13 @@ var BoxOptions = function BoxOptions(_ref) {
     rows.push(childrenArray.slice(i, i + MAX_OPTIONS_PER_ROW));
   }
   return React__default["default"].createElement(Stack, {
-    space: 12,
+    space: space,
     testId: testId
   }, rows.map(function (row, rowIndex) {
     return React__default["default"].createElement(FormRow, {
       key: rowIndex,
-      columns: row.length
+      columns: row.length,
+      space: space
     }, row);
   }));
 };
@@ -11133,6 +11178,8 @@ var RadioGroupField = function RadioGroupField(_ref) {
     label = _ref.label,
     caption = _ref.caption,
     error = _ref.error,
+    _ref$space = _ref.space,
+    space = _ref$space === void 0 ? 8 : _ref$space,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     _ref$disabled = _ref.disabled,
@@ -11159,7 +11206,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   return React__default["default"].createElement(RadioGroupFieldContext.Provider, {
     value: contextValue
   }, React__default["default"].createElement(Stack, {
-    space: 12
+    space: space
   }, label && React__default["default"].createElement("div", {
     className: styles$i['radio-group-field__label']
   }, label), React__default["default"].createElement(Stack, {
@@ -11170,7 +11217,8 @@ var RadioGroupField = function RadioGroupField(_ref) {
     testId: testId
   }, children) : React__default["default"].createElement(BoxOptions, {
     columns: columns,
-    testId: testId
+    testId: testId,
+    space: space
   }, children), caption && React__default["default"].createElement("div", {
     className: styles$i['radio-group-caption']
   }, caption), controllers.error && React__default["default"].createElement(ErrorMessage, null, controllers.error))));