@deque/cauldron-react 6.22.3-canary.afe87298 → 6.22.3-canary.d80b6b65

package/lib/index.js

@@ -1776,6 +1776,38 @@ function getAutoAlignment(placement) {
             return null;
     }
 }
+/**
+ * Prevents large overlays from shifting off-screen above the viewport. When an overlay
+ * would overflow past the top edge, this middleware signals that it should flip to an
+ * alternative placement to keep content visible and accessible.
+ */
+var preventTopOverflowMiddleware = {
+    name: 'preventTopOverflow',
+    fn: function (state) {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var overflow;
+            return tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, reactDom$1.detectOverflow(state, {
+                            rootBoundary: 'document'
+                        })];
+                    case 1:
+                        overflow = _a.sent();
+                        if ((overflow === null || overflow === void 0 ? void 0 : overflow.top) >= 0) {
+                            return [2 /*return*/, {
+                                    reset: {
+                                        // Replace the initial placement axis with 'bottom' while preserving alignment (start/end)
+                                        // Examples: 'top' -> 'bottom', 'top-start' -> 'bottom-start'
+                                        placement: (state.placement.replace(/\w+?(-(start|end))?$/i, 'bottom$1') || 'bottom')
+                                    }
+                                }];
+                        }
+                        return [2 /*return*/, {}];
+                }
+            });
+        });
+    }
+};
 var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
     var _b, _c;
     var as = _a.as, _d = _a.placement, initialPlacement = _d === void 0 ? 'auto' : _d, target = _a.target, children = _a.children, style = _a.style, _e = _a.open, open = _e === void 0 ? false : _e, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, onShiftChange = _a.onShiftChange, portal = _a.portal, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange", "onShiftChange", "portal"]);
@@ -1795,7 +1827,11 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
                 : reactDom$1.flip({
                     fallbackAxisSideDirection: 'start'
                 }),
-            reactDom$1.shift({ crossAxis: false })
+            reactDom$1.shift({
+                crossAxis: false,
+                boundary: 'clippingAncestors'
+            }),
+            preventTopOverflowMiddleware
         ].filter(Boolean),
         elements: {
             reference: resolveElement(target)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.22.3-canary.afe87298",
+  "version": "6.22.3-canary.d80b6b65",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",