@7shifts/sous-chef 3.44.10 → 3.44.12

package/dist/index.js

@@ -6347,7 +6347,7 @@ var DropdownPane = function DropdownPane(props) {
 var PaneOverlay = function PaneOverlay(_ref) {
   var _classNames;
   var width = _ref.width,
-    maxHeight = _ref.maxHeight,
+    customMaxHeight = _ref.maxHeight,
     alignment = _ref.alignment,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
@@ -6362,6 +6362,19 @@ var PaneOverlay = function PaneOverlay(_ref) {
   var _useState = React.useState({}),
     position = _useState[0],
     setPosition = _useState[1];
+  var _useState2 = React.useState(function () {
+      if (!triggerRef || !('current' in triggerRef) || !(triggerRef !== null && triggerRef !== void 0 && triggerRef.current)) {
+        return customMaxHeight;
+      }
+      var triggerPosition = triggerRef.current.getBoundingClientRect();
+      var MIN_HEIGHT_FIT = 200;
+      var triggerDistanceFromTheBottom = window.innerHeight - triggerPosition.top + triggerPosition.height;
+      if (triggerDistanceFromTheBottom > MIN_HEIGHT_FIT) {
+        return triggerDistanceFromTheBottom - 14;
+      }
+      return triggerPosition.top - 14;
+    }),
+    maxHeight = _useState2[0];
   React.useEffect(function () {
     var handleScroll = function handleScroll(e) {
       var _paneRef$current;
@@ -6385,7 +6398,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
     setPosition(pos);
   }, [triggerRef, alignment, paneRef]);
   useKeyPress(['Escape'], onToggleDropdown);
-  var overflow = maxHeight ? 'scroll' : undefined;
+  var overflow = maxHeight ? 'auto' : undefined;
   return React__default.createElement("div", {
     className: classnames(styles$f['dropdown-pane'], (_classNames = {}, _classNames[styles$f['dropdown-pane--with-padding']] = true, _classNames)),
     style: _extends({}, position, {