@raqm/ui 0.1.2 → 0.2.1

package/fesm2022/raqm-ui-popover.mjs

@@ -289,9 +289,9 @@ var RaqmPopoverOverlay = class {
 		this.detachSubscription = overlayRef.detachments().subscribe(() => this.handleDetached());
 		this.host.root.ownerDocument.addEventListener("focusout", this.ownedFocusOut, true);
 		this.viewportSubscription = this.viewportRuler.change(0).subscribe(() => {
-			this.position.reposition();
+			this.position.scheduleReposition();
 		});
-		this.scrollSubscription = this.scrollDispatcher.ancestorScrolled(trigger.element, 0).subscribe(() => this.position.reposition());
+		this.scrollSubscription = this.scrollDispatcher.ancestorScrolled(trigger.element, 0).subscribe(() => this.position.scheduleReposition());
 		overlayRef.attach(new TemplatePortal(panelTemplate, this.viewContainerRef));
 		overlayRef.overlayElement.style.visibility = "hidden";
 		overlayRef.overlayElement.style.pointerEvents = "none";
@@ -436,6 +436,8 @@ var RaqmPopoverPosition = class {
 	currentPositions = [];
 	currentPositionSides = [];
 	sideSubscription;
+	frame = 0;
+	frameView;
 	constructor(overlay, viewportRuler, state, sizing, host) {
 		this.overlay = overlay;
 		this.viewportRuler = viewportRuler;
@@ -448,26 +450,33 @@ var RaqmPopoverPosition = class {
 		strategy.withFlexibleDimensions(false).withGrowAfterOpen(false).withPush(true).withViewportMargin(5);
 		const preferred = this.resolvePhysicalSide(this.host.side());
 		this.currentPositionSides = [preferred, this.oppositeSide(preferred)];
-		this.currentPositions = this.currentPositionSides.map((side) => this.buildPositionFor(side));
+		const measurement = this.measure();
+		this.currentPositions = this.currentPositionSides.map((side) => this.buildPositionFor(side, measurement));
 		strategy.withPositions(this.currentPositions);
 		this.positionStrategy = strategy;
 		return strategy;
 	}
-	setPositions(sides) {
+	measure() {
+		return {
+			anchorRect: this.host.trigger()?.element?.getBoundingClientRect(),
+			viewport: this.viewportRuler.getViewportSize()
+		};
+	}
+	setPositions(sides, measurement = this.measure()) {
 		const strategy = this.positionStrategy;
 		if (!strategy) return;
-		const positions = sides.map((side) => this.buildPositionFor(side));
+		const positions = sides.map((side) => this.buildPositionFor(side, measurement));
 		strategy.withPositions(positions);
 		this.currentPositions = positions;
 		this.currentPositionSides = [...sides];
 	}
-	buildPositionFor(side) {
+	buildPositionFor(side, measurement) {
 		const align = this.host.align();
-		const anchorRect = this.host.trigger()?.element?.getBoundingClientRect();
-		const viewport = this.viewportRuler.getViewportSize();
+		const anchorRect = measurement.anchorRect;
+		const viewport = measurement.viewport;
 		const x = align;
 		const y = this.toVerticalAlign(align);
-		const mainOffset = this.sizing.effectiveSideOffset(side);
+		const mainOffset = this.sizing.effectiveSideOffset(side, anchorRect, viewport);
 		const alignX = this.sizing.crossAxisGeometry("x", anchorRect, viewport.width).offset;
 		const alignY = this.sizing.crossAxisGeometry("y", anchorRect, viewport.height).offset;
 		switch (side) {
@@ -533,6 +542,7 @@ var RaqmPopoverPosition = class {
 		return align === "start" ? "top" : align === "end" ? "bottom" : "center";
 	}
 	reposition() {
+		this.cancelScheduledReposition();
 		const pane = this.host.pane();
 		const strategy = this.positionStrategy;
 		if (!pane || !strategy) return;
@@ -542,17 +552,32 @@ var RaqmPopoverPosition = class {
 			this.state.panelDir.set(dir);
 			this.host.setDirection(dir);
 		}
+		const measurement = this.measure();
 		const preferred = this.resolvePhysicalSide(this.host.side());
-		this.setPositions([preferred, this.oppositeSide(preferred)]);
+		this.setPositions([preferred, this.oppositeSide(preferred)], measurement);
 		this.sizing.resetAvailableSize();
 		this.sizing.naturalContentSize = this.sizing.contentBoxSize();
 		this.host.updatePosition();
 		const applied = this.state.resolvedSide();
-		this.sizing.applyAvailableSize();
-		this.setPositions([applied]);
+		this.sizing.applyAvailableSize(measurement.anchorRect, measurement.viewport);
+		this.setPositions([applied], measurement);
 		this.host.updatePosition();
 		this.sizing.expectedContentSize = this.sizing.contentBoxSize();
 	}
+	scheduleReposition() {
+		if (!this.positionStrategy || this.frame) return;
+		const view = this.host.trigger()?.element?.ownerDocument.defaultView;
+		if (!view || typeof view.requestAnimationFrame !== "function") {
+			this.reposition();
+			return;
+		}
+		this.frameView = view;
+		this.frame = view.requestAnimationFrame(() => {
+			this.frame = 0;
+			this.frameView = void 0;
+			this.reposition();
+		});
+	}
 	applyPositionInputs() {
 		this.reposition();
 	}
@@ -561,8 +586,15 @@ var RaqmPopoverPosition = class {
 		this.sideSubscription = void 0;
 	}
 	clearStrategy() {
+		this.cancelScheduledReposition();
 		this.positionStrategy = void 0;
 	}
+	cancelScheduledReposition() {
+		if (!this.frame) return;
+		this.frameView?.cancelAnimationFrame(this.frame);
+		this.frame = 0;
+		this.frameView = void 0;
+	}
 };
 let nextPopoverId = 0;
 var RaqmPopoverRegistration = class {
@@ -695,12 +727,12 @@ var RaqmPopoverSizing = class {
 		this.resizeObserver?.disconnect();
 		this.resizeObserver = void 0;
 	}
-	applyAvailableSize() {
+	applyAvailableSize(measuredRect, measuredViewport) {
 		const pane = this.host.pane();
 		const anchor = this.host.trigger()?.element;
 		if (!pane || !anchor) return;
-		const anchorRect = anchor.getBoundingClientRect();
-		const viewport = this.viewportRuler.getViewportSize();
+		const anchorRect = measuredRect ?? anchor.getBoundingClientRect();
+		const viewport = measuredViewport ?? this.viewportRuler.getViewportSize();
 		const sideOffset = this.host.sideOffset();
 		const side = this.state.resolvedSide();
 		const capacityWidth = this.viewportCap(viewport.width);
@@ -740,18 +772,18 @@ var RaqmPopoverSizing = class {
 		this.applyAvailableDimension(pane, "--raqm-popover-available-width", widthIsCross || width > 0 ? Math.min(width, capacityWidth) : capacityWidth);
 		this.applyAvailableDimension(pane, "--raqm-popover-available-height", heightIsCross || height > 0 ? Math.min(height, capacityHeight) : capacityHeight);
 	}
-	effectiveSideOffset(side) {
+	effectiveSideOffset(side, measuredRect, measuredViewport) {
 		const authored = side === "bottom" || side === "right" ? this.host.sideOffset() : -this.host.sideOffset();
 		const anchor = this.host.trigger()?.element;
 		const pane = this.host.pane();
 		if (!anchor || !pane) return authored;
 		const horizontal = side === "left" || side === "right";
-		const viewport = this.viewportRuler.getViewportSize();
+		const viewport = measuredViewport ?? this.viewportRuler.getViewportSize();
 		const client = horizontal ? viewport.width : viewport.height;
 		const size = horizontal ? pane.getBoundingClientRect().width : pane.getBoundingClientRect().height;
 		const capacity = this.viewportCap(client);
 		if (size <= 0 || size > capacity) return authored;
-		const anchorRect = anchor.getBoundingClientRect();
+		const anchorRect = measuredRect ?? anchor.getBoundingClientRect();
 		const base = horizontal ? side === "right" ? anchorRect.right : anchorRect.left - size : side === "bottom" ? anchorRect.bottom : anchorRect.top - size;
 		const overflowNear = Math.max(5 - base, 0);
 		const overflowFar = Math.max(base + size - capacity, 0);
@@ -870,7 +902,7 @@ var RaqmPopoverComponent = class RaqmPopoverComponent {
 		trigger: () => this.registration.triggerRef(),
 		pane: () => this.layer.element,
 		content: () => this.layer.contentElement(),
-		reposition: () => this.position.reposition()
+		reposition: () => this.position.scheduleReposition()
 	});
 	position = new RaqmPopoverPosition(this.overlay, this.viewportRuler, this.state, this.sizing, {
 		side: () => this.side(),