@7shifts/sous-chef 3.44.14 → 3.44.16

package/dist/forms/SelectField/useSelectField.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Props } from './SelectField';
-export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView: menuShouldScrollIntoViewProp, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix, testId, creatableButton, onCreate, isSearchable, autoFocus }: Props<T>) => {
+export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix, testId, creatableButton, onCreate, isSearchable, autoFocus }: Props<T>) => {
     selectProps: {
         [x: string]: any;
         [x: number]: any;

package/dist/index.js

@@ -6280,7 +6280,7 @@ var useDropdownContext = function useDropdownContext() {
 
 var styles$f = {"dropdown-pane":"_XcD7g"};
 
-var GAP = 14;
+var DROPDOWN_PANE_PADDING = 14;
 var calculateOverlayPosition$1 = function calculateOverlayPosition(triggerPosition, triggerOffsetHeight, panePosition, alignment) {
   var calculateLeftPosition = alignment === 'right' ? getRightAlignmentPosition : getLeftAlignmentPosition;
   return {
@@ -6294,20 +6294,20 @@ var getTopPosition = function getTopPosition(triggerPosition, triggerOffsetHeigh
   var fitTop = triggerPosition.top - paneHeight > 0;
   var cannotFitBotton = top + paneHeight > documentHeight;
   if (cannotFitBotton && fitTop) {
-    return top - paneHeight - triggerOffsetHeight - GAP;
+    return top - paneHeight - triggerOffsetHeight - DROPDOWN_PANE_PADDING;
   }
   return top;
 };
 var getRightAlignmentPosition = function getRightAlignmentPosition(triggerPosition, paneWidth) {
   var left = triggerPosition.left + triggerPosition.width - paneWidth;
-  if (left < GAP) {
+  if (left < DROPDOWN_PANE_PADDING) {
     return triggerPosition.left;
   }
   return left;
 };
 var getLeftAlignmentPosition = function getLeftAlignmentPosition(triggerPosition, paneWidth) {
   var left = triggerPosition.left;
-  if (left + paneWidth > window.innerWidth - GAP) {
+  if (left + paneWidth > window.innerWidth - DROPDOWN_PANE_PADDING) {
     return triggerPosition.left + triggerPosition.width - paneWidth;
   }
   return left;
@@ -6318,6 +6318,15 @@ var getDocumentHeight = function getDocumentHeight() {
   var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
   return height;
 };
+var calculateMaxHeight = function calculateMaxHeight(triggerPosition, customMaxHeight) {
+  var MIN_HEIGHT_FIT = 200;
+  var triggerDistanceFromTheBottom = window.innerHeight - triggerPosition.top - triggerPosition.height;
+  var calculatedMaxHeight = triggerPosition.top - DROPDOWN_PANE_PADDING;
+  if (triggerDistanceFromTheBottom > MIN_HEIGHT_FIT) {
+    calculatedMaxHeight = triggerDistanceFromTheBottom - DROPDOWN_PANE_PADDING;
+  }
+  return customMaxHeight !== undefined && customMaxHeight < calculatedMaxHeight ? customMaxHeight : calculatedMaxHeight;
+};
 
 function useOnClickOutsideRole(role, cb) {
   React__default.useEffect(function () {
@@ -6367,20 +6376,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
         return customMaxHeight;
       }
       var triggerPosition = triggerRef.current.getBoundingClientRect();
-      var MIN_HEIGHT_FIT = 200;
-      var triggerDistanceFromTheBottom = window.innerHeight - triggerPosition.top + triggerPosition.height;
-      console.log({
-        triggerDistanceFromTheBottom: triggerDistanceFromTheBottom,
-        'window.innerHeight': window.innerHeight,
-        'triggerPosition.top': triggerPosition.top,
-        'triggerPosition.height': triggerPosition.height
-      });
-      if (triggerDistanceFromTheBottom > MIN_HEIGHT_FIT) {
-        console.log('fit bottom', triggerDistanceFromTheBottom - 36);
-        return triggerDistanceFromTheBottom - 36;
-      }
-      console.log('fit top', triggerPosition.top - 36);
-      return triggerPosition.top - 36;
+      return calculateMaxHeight(triggerPosition, customMaxHeight);
     }),
     maxHeight = _useState2[0];
   React.useEffect(function () {
@@ -6423,11 +6419,11 @@ var PaneOverlay = function PaneOverlay(_ref) {
   }, children);
 };
 
-var GAP$1 = 15;
+var GAP = 15;
 var isGoingTowardsPane = function isGoingTowardsPane(panePosition, mouseYAxisPosition) {
-  var isGoingTowardsPane = mouseYAxisPosition + GAP$1 > panePosition.top;
+  var isGoingTowardsPane = mouseYAxisPosition + GAP > panePosition.top;
   if (mouseYAxisPosition > panePosition.top) {
-    return mouseYAxisPosition - GAP$1 < panePosition.bottom;
+    return mouseYAxisPosition - GAP < panePosition.bottom;
   }
   return isGoingTowardsPane;
 };
@@ -9483,18 +9479,6 @@ function CustomMenu(_ref) {
   }, __('createButton'))))));
 }
 
-var useShouldScrollMenuIntoView = function useShouldScrollMenuIntoView(menuShouldScrollIntoView) {
-  var _useModalContext = useModalContext(),
-    isModalMounted = _useModalContext.isModalMounted;
-  if (menuShouldScrollIntoView !== undefined) {
-    return menuShouldScrollIntoView;
-  }
-  if (isModalMounted) {
-    return false;
-  }
-  return true;
-};
-
 var useSelectField = function useSelectField(_ref) {
   var _ref$asToolbarFilter = _ref.asToolbarFilter,
     asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
@@ -9505,7 +9489,8 @@ var useSelectField = function useSelectField(_ref) {
     _ref$isClearable = _ref.isClearable,
     isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
     label = _ref.label,
-    menuShouldScrollIntoViewProp = _ref.menuShouldScrollIntoView,
+    _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+    menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? false : _ref$menuShouldScroll,
     name = _ref.name,
     noOptionsMessage = _ref.noOptionsMessage,
     options = _ref.options,
@@ -9522,7 +9507,6 @@ var useSelectField = function useSelectField(_ref) {
     _ref$isSearchable = _ref.isSearchable,
     isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
     autoFocus = _ref.autoFocus;
-  var menuShouldScrollIntoView = useShouldScrollMenuIntoView(menuShouldScrollIntoViewProp);
   var _useState = React.useState(false),
     isMenuInputFocus = _useState[0],
     setIsMenuInputFocus = _useState[1];
@@ -10611,6 +10595,18 @@ var PasswordField = function PasswordField(_ref) {
   }))));
 };
 
+var useShouldScrollMenuIntoView = function useShouldScrollMenuIntoView(menuShouldScrollIntoView) {
+  var _useModalContext = useModalContext(),
+    isModalMounted = _useModalContext.isModalMounted;
+  if (menuShouldScrollIntoView !== undefined) {
+    return menuShouldScrollIntoView;
+  }
+  if (isModalMounted) {
+    return false;
+  }
+  return true;
+};
+
 var MultiSelectField = function MultiSelectField(_ref) {
   var name = _ref.name,
     inputId = _ref.id,