@aiaiai-pt/design-system 0.51.0 → 0.51.2

package/components/Popover.svelte

@@ -25,6 +25,8 @@
    * @typedef {'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'} Placement
    */
 
+  import { calculatePopoverPosition } from './popover-position.js';
+
   let {
     /** @type {boolean} */
     open = $bindable(false),
@@ -52,6 +54,7 @@
 
   let posX = $state(0);
   let posY = $state(0);
+  let posMaxHeight = /** @type {number | undefined} */ ($state(undefined));
   let width = $state(0);
 
   function reposition() {
@@ -59,6 +62,12 @@
 
     const rect = anchor.getBoundingClientRect();
     const popRect = popoverEl.getBoundingClientRect();
+    // Natural height, not the rendered box: once capped, the box reads the cap,
+    // which always "fits", and the cap would drop on the next reposition (the
+    // capture scroll listener fires when the popover's own content scrolls).
+    // scrollHeight is the content height; the rest of the box is its borders.
+    const naturalHeight =
+      popoverEl.scrollHeight + (popRect.height - popoverEl.clientHeight);
     const viewportH = window.innerHeight;
     const viewportW = window.innerWidth;
 
@@ -66,27 +75,19 @@
       width = rect.width;
     }
 
-    const isTop = placement.startsWith('top');
-    const isEnd = placement.endsWith('end');
-
-    let x = isEnd ? rect.right - (matchWidth ? rect.width : popRect.width) : rect.left;
-    let y = isTop ? rect.top - popRect.height - offset : rect.bottom + offset;
-
-    // Flip vertical if out of viewport
-    if (!isTop && y + popRect.height > viewportH) {
-      y = rect.top - popRect.height - offset;
-    } else if (isTop && y < 0) {
-      y = rect.bottom + offset;
-    }
-
-    // Clamp horizontal
-    if (x + popRect.width > viewportW) {
-      x = viewportW - popRect.width - offset;
-    }
-    if (x < 0) x = offset;
+    const { x, y, maxHeight } = calculatePopoverPosition(
+      rect,
+      { width: popRect.width, height: naturalHeight },
+      viewportH,
+      viewportW,
+      placement,
+      offset,
+      matchWidth,
+    );
 
     posX = x;
     posY = y;
+    posMaxHeight = maxHeight;
   }
 
   // Position + close listeners
@@ -157,6 +158,8 @@
     style:left="{posX}px"
     style:top="{posY}px"
     style:width={matchWidth ? `${width}px` : undefined}
+    style:max-height={posMaxHeight != null ? `${posMaxHeight}px` : undefined}
+    style:overflow-y={posMaxHeight != null ? 'auto' : undefined}
     {...rest}
   >
     {#if children}{@render children()}{/if}

package/components/Popover.svelte.d.ts

@@ -1,4 +1,5 @@
 export default Popover;
+export type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
 type Popover = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<$$ComponentProps>): void;

package/components/popover-position.d.ts

@@ -0,0 +1,35 @@
+/**
+ * calculatePopoverPosition — pure positioning algorithm for Popover.svelte.
+ *
+ * Returns the fixed-position coordinate (x, y) for the popover, plus an
+ * optional maxHeight cap (in px) when neither the preferred nor the
+ * opposite side fits and we must scroll the popover content in-place.
+ *
+ * Preference order:
+ *   1. Preferred side (from `placement`) if it fits.
+ *   2. Opposite side if that fits.
+ *   3. Side with more room — capped to that room, overflow-y scrollable.
+ *
+ * @param {{ top: number, bottom: number, left: number, right: number, width: number }} anchorRect
+ * @param {{ width: number, height: number }} popRect
+ * @param {number} viewportH
+ * @param {number} viewportW
+ * @param {string} placement  — 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+ * @param {number} offset  — gap between anchor and popover (px)
+ * @param {boolean} [matchWidth]
+ * @returns {{ x: number, y: number, maxHeight: number | undefined }}
+ */
+export function calculatePopoverPosition(anchorRect: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+}, popRect: {
+    width: number;
+    height: number;
+}, viewportH: number, viewportW: number, placement: string, offset: number, matchWidth?: boolean): {
+    x: number;
+    y: number;
+    maxHeight: number | undefined;
+};

package/components/popover-position.js

@@ -0,0 +1,93 @@
+/**
+ * calculatePopoverPosition — pure positioning algorithm for Popover.svelte.
+ *
+ * Returns the fixed-position coordinate (x, y) for the popover, plus an
+ * optional maxHeight cap (in px) when neither the preferred nor the
+ * opposite side fits and we must scroll the popover content in-place.
+ *
+ * Preference order:
+ *   1. Preferred side (from `placement`) if it fits.
+ *   2. Opposite side if that fits.
+ *   3. Side with more room — capped to that room, overflow-y scrollable.
+ *
+ * @param {{ top: number, bottom: number, left: number, right: number, width: number }} anchorRect
+ * @param {{ width: number, height: number }} popRect
+ * @param {number} viewportH
+ * @param {number} viewportW
+ * @param {string} placement  — 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+ * @param {number} offset  — gap between anchor and popover (px)
+ * @param {boolean} [matchWidth]
+ * @returns {{ x: number, y: number, maxHeight: number | undefined }}
+ */
+export function calculatePopoverPosition(
+  anchorRect,
+  popRect,
+  viewportH,
+  viewportW,
+  placement,
+  offset,
+  matchWidth = false,
+) {
+  const isTop = placement.startsWith("top");
+  const isEnd = placement.endsWith("end");
+
+  // Horizontal: preserve matchWidth behaviour for end-aligned placement
+  let x = isEnd
+    ? anchorRect.right - (matchWidth ? anchorRect.width : popRect.width)
+    : anchorRect.left;
+
+  // Available room on each side (gap to viewport edge after the offset)
+  const roomAbove = anchorRect.top - offset;
+  const roomBelow = viewportH - anchorRect.bottom - offset;
+
+  const fitsAbove = popRect.height <= roomAbove;
+  const fitsBelow = popRect.height <= roomBelow;
+
+  let y;
+  let maxHeight = undefined;
+
+  if (isTop) {
+    if (fitsAbove) {
+      // Preferred side fits
+      y = anchorRect.top - popRect.height - offset;
+    } else if (fitsBelow) {
+      // Flip to below
+      y = anchorRect.bottom + offset;
+    } else {
+      // Neither fits: open on the side with more room and cap
+      if (roomAbove >= roomBelow) {
+        maxHeight = roomAbove;
+        y = anchorRect.top - maxHeight - offset; // = anchorRect.top - (anchorRect.top - offset) - offset = 0
+      } else {
+        y = anchorRect.bottom + offset;
+        maxHeight = roomBelow;
+      }
+    }
+  } else {
+    // Bottom placement
+    if (fitsBelow) {
+      // Preferred side fits
+      y = anchorRect.bottom + offset;
+    } else if (fitsAbove) {
+      // Flip to above
+      y = anchorRect.top - popRect.height - offset;
+    } else {
+      // Neither fits: open on the side with more room and cap
+      if (roomBelow >= roomAbove) {
+        y = anchorRect.bottom + offset;
+        maxHeight = roomBelow;
+      } else {
+        maxHeight = roomAbove;
+        y = anchorRect.top - maxHeight - offset; // = 0
+      }
+    }
+  }
+
+  // Clamp horizontal
+  if (x + popRect.width > viewportW) {
+    x = viewportW - popRect.width - offset;
+  }
+  if (x < 0) x = offset;
+
+  return { x, y, maxHeight };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.51.0",
+  "version": "0.51.2",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",