@flytedan/flytebot-design-system 0.11.0 → 0.11.1

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,
@@ -290,13 +291,21 @@ var samePosition = (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;
 };
 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,24 +327,35 @@ 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 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;
       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,
         side,
         anchorWidth: r.width
@@ -358,7 +378,7 @@ 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 portal = (node) => {
@@ -395,6 +415,7 @@ function Popover({
     matchWidth,
     width,
     minWidth,
+    maxHeight,
     estHeight: maxHeight || 320,
     onDetach: onClose,
     layerRef: ref
@@ -10623,6 +10644,7 @@ function createVersionStore(initialState, options) {
   ModeSwitch,
   ModelControls,
   NumberInput,
+  POPOVER_BODY_MIN,
   PacketCard,
   Pagination,
   PermissionDenied,