@flytedan/flytebot-design-system 0.11.1 → 0.11.2

package/dist/index.d.cts

@@ -88,6 +88,10 @@ interface PopoverPosition {
     top: number | null;
     bottom: number | null;
     maxH: number;
+    /** The widest the layer may be: the viewport less its margins. A fixed `width`, a
+     *  `minWidth` or an anchor-matched width wider than the screen is capped to this, so the
+     *  surface — and the action in its footer — never runs past the viewport edge. */
+    maxW: number;
     side: "top" | "bottom";
     anchorWidth: number;
 }

package/dist/index.d.ts

@@ -88,6 +88,10 @@ interface PopoverPosition {
     top: number | null;
     bottom: number | null;
     maxH: number;
+    /** The widest the layer may be: the viewport less its margins. A fixed `width`, a
+     *  `minWidth` or an anchor-matched width wider than the screen is capped to this, so the
+     *  surface — and the action in its footer — never runs past the viewport edge. */
+    maxW: number;
     side: "top" | "bottom";
     anchorWidth: number;
 }

package/dist/index.js

@@ -85,7 +85,7 @@ var parsePlacement = (p) => {
 };
 var samePosition = (a, b) => {
   if (!a || !b) return a === b;
-  return a.left === b.left && a.top === b.top && a.bottom === b.bottom && a.width === b.width && a.minWidth === b.minWidth && a.maxH === b.maxH && a.side === b.side && a.anchorWidth === b.anchorWidth;
+  return a.left === b.left && a.top === b.top && a.bottom === b.bottom && a.width === b.width && a.minWidth === b.minWidth && a.maxH === b.maxH && a.maxW === b.maxW && a.side === b.side && a.anchorWidth === b.anchorWidth;
 };
 var SCROLL_REGIONS = ".fd-pop-body, .fd-pop-list";
 var PINNED_REGIONS = ":scope > .fd-pop-header, :scope > .fd-pop-footer";
@@ -142,9 +142,10 @@ function usePopoverPosition(open, anchorRef, opts) {
       const top = side === "bottom" ? beside ? r.bottom + offset : edge : null;
       const bottom = side === "top" ? beside ? vh - r.top + offset : edge : null;
       const maxH = beside ? room : vh - MARGIN - edge;
+      const maxW = Math.max(0, window.innerWidth - 2 * MARGIN);
       const exact = o.matchWidth === true;
       const width = exact ? r.width : Math.max(o.width || 0, o.minWidth || 0, o.matchWidth === "min" ? r.width : 0);
-      const w = exact || o.width ? width : Math.max(layer.width, width) || o.estWidth || 260;
+      const w = Math.min(maxW, exact || o.width ? width : Math.max(layer.width, width) || o.estWidth || 260);
       let left = align === "end" ? r.right - w : align === "center" ? r.left + r.width / 2 - w / 2 : r.left;
       left = Math.max(MARGIN, Math.min(left, window.innerWidth - w - MARGIN));
       const next = {
@@ -154,6 +155,7 @@ function usePopoverPosition(open, anchorRef, opts) {
         top,
         bottom,
         maxH,
+        maxW,
         side,
         anchorWidth: r.width
       };
@@ -178,6 +180,7 @@ function usePopoverPosition(open, anchorRef, opts) {
   }, [open, o.placement, o.offset, o.matchWidth, o.width, o.minWidth, o.maxHeight, o.estHeight]);
   return pos;
 }
+var capWidth = (value, max) => value == null ? void 0 : Math.min(value, max);
 var portal = (node) => {
   if (typeof document !== "undefined") return createPortal(node, document.body);
   return node;
@@ -269,7 +272,14 @@ function Popover({
           top: pos.top == null ? "auto" : pos.top,
           bottom: pos.bottom == null ? "auto" : pos.bottom,
           width: matchWidth === true ? pos.width : width,
-          minWidth: matchWidth === "min" ? Math.max(pos.anchorWidth, minWidth || 0) : minWidth || (matchWidth ? void 0 : 200),
+          // CSS lets min-width win over max-width, so every minimum is capped to the viewport too.
+          minWidth: capWidth(
+            matchWidth === "min" ? Math.max(pos.anchorWidth, minWidth || 0) : minWidth || (matchWidth ? void 0 : 200),
+            pos.maxW
+          ),
+          // The surface never runs past the viewport edge, whatever fixed `width` a caller asked
+          // for: pos.maxW is the viewport less its margins, and `left` is clamped against it.
+          maxWidth: pos.maxW,
           // Size to content by default — cap only at real available room between the
           // anchor and the viewport edge (pos.maxH, computed by usePopoverPosition).
           // A caller-supplied `maxHeight` narrows that further (e.g. a long menu that