@7shifts/sous-chef 3.44.11 → 3.44.12

package/dist/index.js

@@ -6342,12 +6342,12 @@ var DropdownPane = function DropdownPane(props) {
   if (!isOpen) {
     return null;
   }
-  return React__default.createElement(PaneOverlay, _extends({}, props));
+  return React__default.createElement(Portal, null, React__default.createElement(PaneOverlay, _extends({}, 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,31 @@ 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;
+      if (e.target !== paneRef.current && !((_paneRef$current = paneRef.current) !== null && _paneRef$current !== void 0 && _paneRef$current.contains(e.target))) {
+        onToggleDropdown();
+      }
+    };
+    window.addEventListener('scroll', handleScroll, true);
+    return function () {
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [onToggleDropdown, paneRef]);
   useOnClickOutsideRole('dialog', onToggleDropdown);
   React.useLayoutEffect(function () {
     if (!triggerRef || !('current' in triggerRef) || !(triggerRef !== null && triggerRef !== void 0 && triggerRef.current) || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
@@ -6373,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, {