@flytedan/flytebot-design-system 0.11.0 → 0.11.2

package/dist/index.cjs

@@ -106,6 +106,7 @@ __export(index_exports, {
   ModeSwitch: () => ModeSwitch,
   ModelControls: () => ModelControls,
   NumberInput: () => NumberInput,
+  POPOVER_BODY_MIN: () => POPOVER_BODY_MIN,
   PacketCard: () => PacketCard,
   Pagination: () => Pagination,
   PermissionDenied: () => PermissionDenied,
@@ -287,16 +288,24 @@ 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";
+var POPOVER_BODY_MIN = 96;
 function measureLayer(el) {
-  if (!el) return { width: 0, height: 0 };
+  if (!el || !el.offsetHeight) return { width: el ? el.offsetWidth : 0, height: 0, pinned: 0 };
   let hidden = 0;
   el.querySelectorAll(SCROLL_REGIONS).forEach((r) => {
     hidden += Math.max(0, r.scrollHeight - r.clientHeight);
   });
-  return { width: el.offsetWidth, height: el.offsetHeight ? el.offsetHeight + hidden : 0 };
+  let pinned = 0;
+  el.querySelectorAll(PINNED_REGIONS).forEach((r) => {
+    pinned += r.offsetHeight;
+  });
+  const border = Math.max(0, el.offsetHeight - el.clientHeight);
+  const content = Math.max(el.scrollHeight, el.clientHeight);
+  return { width: el.offsetWidth, height: content + border + hidden, pinned: pinned + border };
 }
 function usePopoverPosition(open, anchorRef, opts) {
   const o = opts || {};
@@ -318,25 +327,38 @@ function usePopoverPosition(open, anchorRef, opts) {
       const r = el.getBoundingClientRect();
       const offset = o.offset == null ? 8 : o.offset;
       const layer = measureLayer(layerRef ? layerRef.current : null);
+      const vh = window.innerHeight;
       const need = layer.height || Math.min(o.estHeight || 300, 180);
-      const below = window.innerHeight - r.bottom - offset - MARGIN;
+      const below = vh - r.bottom - offset - MARGIN;
       const above = r.top - offset - MARGIN;
       let side = wantSide;
       if (side === "bottom" && below < need && above > below) side = "top";
       else if (side === "top" && above < need && below > above) side = "bottom";
+      const ceiling = Math.min(vh - 2 * MARGIN, o.maxHeight != null ? o.maxHeight : Infinity);
+      const floor = Math.min(
+        ceiling,
+        layer.height ? layer.pinned + Math.min(POPOVER_BODY_MIN, layer.height - layer.pinned) : Math.min(need, 140)
+      );
+      const room = side === "top" ? above : below;
+      const beside = room >= floor;
+      const edge = beside ? 0 : Math.max(MARGIN, vh - MARGIN - Math.min(need, ceiling));
+      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 maxH = Math.max(140, side === "top" ? above : below);
       const next = {
         left,
         width: exact ? r.width : void 0,
         minWidth: o.minWidth,
-        top: side === "bottom" ? r.bottom + offset : null,
-        bottom: side === "top" ? window.innerHeight - r.top + offset : null,
+        top,
+        bottom,
         maxH,
+        maxW,
         side,
         anchorWidth: r.width
       };
@@ -358,9 +380,10 @@ function usePopoverPosition(open, anchorRef, opts) {
     };
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
-  }, [open, o.placement, o.offset, o.matchWidth, o.width, o.minWidth, o.estHeight]);
+  }, [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 (0, import_react_dom.createPortal)(node, document.body);
   return node;
@@ -395,6 +418,7 @@ function Popover({
     matchWidth,
     width,
     minWidth,
+    maxHeight,
     estHeight: maxHeight || 320,
     onDetach: onClose,
     layerRef: ref
@@ -451,7 +475,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
@@ -10623,6 +10654,7 @@ function createVersionStore(initialState, options) {
   ModeSwitch,
   ModelControls,
   NumberInput,
+  POPOVER_BODY_MIN,
   PacketCard,
   Pagination,
   PermissionDenied,