@johly/bits-ui 2.18.8 → 2.18.9

package/dist/bits/filter/components/filter-menu-node.svelte

@@ -139,7 +139,7 @@
 				<MenuSubContent
 					sideOffset={8}
 					align={getSubmenuAlign(meta)}
-					collisionAvoidance={{ side: "shift", align: "shift" }}
+					collisionAvoidance={{ side: "flip", align: "shift" }}
 				>
 					{#if column && meta?.kind === "column" && meta.editor === "text"}
 						<FilterTextEditor column={column as Column<unknown, "text">} {actions} />

package/dist/bits/menu/components/menu-sub-content.svelte

@@ -128,6 +128,13 @@
 			.requestAnimationFrame(measureListAlign);
 	}
 
+	function measureListAlignAndQueueRemeasure() {
+		if (align !== "list") return;
+		clearMeasureFrame();
+		measureListAlign();
+		queueMeasureListAlign();
+	}
+
 	$effect(() => {
 		if (align !== "list") {
 			listAlignOffset = 0;
@@ -137,7 +144,7 @@
 			listAlignOffset = 0;
 			return;
 		}
-		afterTick(queueMeasureListAlign);
+		afterTick(measureListAlignAndQueueRemeasure);
 	});
 
 	$effect(() => {
@@ -205,7 +212,7 @@
 
 	function handlePlaced() {
 		onPlaced();
-		queueMeasureListAlign();
+		measureListAlignAndQueueRemeasure();
 	}
 
 	function handleOnFocusOutside(e: FocusEvent) {

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -12,6 +12,72 @@ const OPPOSITE_SIDE = {
     bottom: "top",
     left: "right",
 };
+function getPaddingForSide(padding, side) {
+    if (typeof padding === "number")
+        return padding;
+    return padding?.[side] ?? 0;
+}
+function parsePixelValue(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+function replacePlacementSide(placement, side) {
+    const [, align] = placement.split("-");
+    return (side + (align ? `-${align}` : ""));
+}
+function getFloatingContentNode(floating) {
+    return floating.firstElementChild instanceof HTMLElement
+        ? floating.firstElementChild
+        : floating instanceof HTMLElement
+            ? floating
+            : null;
+}
+function getIntendedFloatingWidth(floating, measuredWidth) {
+    const contentNode = getFloatingContentNode(floating);
+    if (!contentNode)
+        return measuredWidth;
+    const style = contentNode.ownerDocument.defaultView?.getComputedStyle(contentNode);
+    const rowWidth = style ? parsePixelValue(style.getPropertyValue("--row-width")) : 0;
+    const isSubmenu = contentNode.hasAttribute("data-menu-sub-content") ||
+        contentNode.hasAttribute("data-dropdown-menu-sub-content") ||
+        contentNode.hasAttribute("data-context-menu-sub-content") ||
+        contentNode.hasAttribute("data-menubar-sub-content");
+    return Math.max(measuredWidth, rowWidth, isSubmenu ? 250 : 0);
+}
+function preferOppositeSideWithRoom(opts) {
+    return {
+        name: "preferOppositeSideWithRoom",
+        async fn(state) {
+            const side = getSideFromPlacement(state.placement);
+            if (side !== "right" && side !== "left")
+                return {};
+            const referenceNode = state.elements.reference;
+            if (!("getBoundingClientRect" in referenceNode))
+                return {};
+            const referenceRect = referenceNode.getBoundingClientRect();
+            const floatingNode = state.elements.floating;
+            const win = getWindow(floatingNode);
+            const padding = opts.collisionPadding();
+            const sideOffset = opts.sideOffset();
+            const desiredWidth = getIntendedFloatingWidth(floatingNode, state.rects.floating.width);
+            const leftRoom = referenceRect.left - getPaddingForSide(padding, "left") - sideOffset;
+            const rightRoom = win.innerWidth -
+                referenceRect.right -
+                getPaddingForSide(padding, "right") -
+                sideOffset;
+            const currentRoom = side === "right" ? rightRoom : leftRoom;
+            const oppositeSide = OPPOSITE_SIDE[side];
+            const oppositeRoom = oppositeSide === "right" ? rightRoom : leftRoom;
+            if (currentRoom >= desiredWidth || oppositeRoom < desiredWidth)
+                return {};
+            return {
+                reset: {
+                    placement: replacePlacementSide(state.placement, oppositeSide),
+                },
+            };
+        },
+    };
+}
 const FloatingRootContext = new Context("Floating.Root");
 const FloatingContentContext = new Context("Floating.Content");
 const FloatingTooltipRootContext = new Context("Floating.Root");
@@ -96,6 +162,12 @@ export class FloatingContentState {
             mainAxis: this.opts.sideOffset.current + this.#arrowHeight,
             alignmentAxis: this.opts.alignOffset.current,
         }),
+        this.opts.avoidCollisions.current &&
+            this.#collisionAvoidance.side === "flip" &&
+            preferOppositeSideWithRoom({
+                sideOffset: () => this.opts.sideOffset.current + this.#arrowHeight,
+                collisionPadding: () => this.opts.collisionPadding.current,
+            }),
         this.opts.avoidCollisions.current &&
             (this.#collisionAvoidance.side === "shift" ||
                 this.#collisionAvoidance.align === "shift") &&

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@johly/bits-ui",
-	"version": "2.18.8",
+	"version": "2.18.9",
 	"license": "MIT",
 	"repository": "github:johanohly/bits-ui",
 	"funding": "https://github.com/sponsors/huntabyte",