@johly/bits-ui 2.18.4 → 2.18.7

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

@@ -136,7 +136,11 @@
 				</span>
 			</MenuSubTrigger>
 			<Portal>
-				<MenuSubContent sideOffset={8} align={getSubmenuAlign(meta)} sticky="always">
+				<MenuSubContent
+					sideOffset={8}
+					align={getSubmenuAlign(meta)}
+					collisionAvoidance={{ side: "shift", align: "shift" }}
+				>
 					{#if column && meta?.kind === "column" && meta.editor === "text"}
 						<FilterTextEditor column={column as Column<unknown, "text">} {actions} />
 					{:else if column && meta?.kind === "column" && meta.editor === "number"}

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

@@ -80,6 +80,21 @@
 		measureFrame = null;
 	}
 
+	function getNearestScrollableAncestor(target: HTMLElement, boundary: HTMLElement) {
+		let node: HTMLElement | null = target.parentElement;
+		while (node && boundary.contains(node)) {
+			if (node.scrollHeight - node.clientHeight > 1) {
+				const overflowY = node.ownerDocument.defaultView?.getComputedStyle(node).overflowY;
+				if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
+					return node;
+				}
+			}
+			if (node === boundary) break;
+			node = node.parentElement;
+		}
+		return null;
+	}
+
 	function measureListAlign() {
 		measureFrame = null;
 		if (align !== "list" || (side !== "right" && side !== "left")) {
@@ -101,7 +116,8 @@
 			return;
 		}
 		const rowRect = firstRow.getBoundingClientRect();
-		listAlignOffset = Math.round(contentRect.top - rowRect.top);
+		const scroller = getNearestScrollableAncestor(firstRow, contentNode);
+		listAlignOffset = Math.round(contentRect.top - rowRect.top - (scroller?.scrollTop ?? 0));
 	}
 
 	function queueMeasureListAlign() {

package/dist/bits/utilities/floating-layer/components/floating-layer-content.svelte

@@ -13,6 +13,7 @@
 		id,
 		arrowPadding = 0,
 		avoidCollisions = true,
+		collisionAvoidance,
 		collisionBoundary = [],
 		collisionPadding = 0,
 		hideWhenDetached = false,
@@ -37,6 +38,7 @@
 			id: boxWith(() => id),
 			arrowPadding: boxWith(() => arrowPadding),
 			avoidCollisions: boxWith(() => avoidCollisions),
+			collisionAvoidance: boxWith(() => collisionAvoidance),
 			collisionBoundary: boxWith(() => collisionBoundary),
 			collisionPadding: boxWith(() => collisionPadding),
 			hideWhenDetached: boxWith(() => hideWhenDetached),

package/dist/bits/utilities/floating-layer/types.d.ts

@@ -43,6 +43,19 @@ export type FloatingLayerContentProps = {
      * @see https://floating-ui.com/docs/flip
      */
     avoidCollisions?: boolean | undefined;
+    /**
+     * Controls how the floating element avoids boundary collisions.
+     *
+     * - `side: "flip"` preserves the existing behavior and may move the
+     *   floating element to the opposite side of its anchor.
+     * - `side: "shift"` keeps the preferred side and shifts the floating
+     *   element back into view, which can intentionally overlap the anchor.
+     * - `align: "shift"` allows shifting on the alignment axis.
+     */
+    collisionAvoidance?: {
+        side?: "flip" | "shift" | "none";
+        align?: "shift" | "none";
+    };
     /**
      * A boundary element or array of elements to check for collisions against.
      *

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -24,6 +24,10 @@ export interface FloatingContentStateOpts extends ReadableBoxedValues<{
     alignOffset: number;
     arrowPadding: number;
     avoidCollisions: boolean;
+    collisionAvoidance: {
+        side?: "flip" | "shift" | "none";
+        align?: "shift" | "none";
+    } | undefined;
     collisionBoundary: Arrayable<Boundary>;
     collisionPadding: number | Partial<Record<Side, number>>;
     sticky: "partial" | "always";

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

@@ -84,19 +84,41 @@ export class FloatingContentState {
     #availableHeight = $state(undefined);
     #anchorWidth = $state(undefined);
     #anchorHeight = $state(undefined);
+    #collisionAvoidance = $derived.by(() => {
+        if (this.opts.collisionAvoidance.current)
+            return this.opts.collisionAvoidance.current;
+        if (!this.opts.avoidCollisions.current)
+            return { side: "none", align: "none" };
+        return { side: "flip", align: "none" };
+    });
     middleware = $derived.by(() => [
         offset({
             mainAxis: this.opts.sideOffset.current + this.#arrowHeight,
             alignmentAxis: this.opts.alignOffset.current,
         }),
         this.opts.avoidCollisions.current &&
+            (this.#collisionAvoidance.side === "shift" ||
+                this.#collisionAvoidance.align === "shift") &&
+            shift({
+                mainAxis: this.#collisionAvoidance.side === "shift",
+                crossAxis: this.#collisionAvoidance.align === "shift",
+                limiter: this.opts.sticky.current === "partial" &&
+                    this.#collisionAvoidance.side !== "shift"
+                    ? limitShift()
+                    : undefined,
+                ...this.detectOverflowOptions,
+            }),
+        this.opts.avoidCollisions.current &&
+            this.#collisionAvoidance.side === "flip" &&
             shift({
                 mainAxis: true,
-                crossAxis: false,
+                crossAxis: this.#collisionAvoidance.align === "shift",
                 limiter: this.opts.sticky.current === "partial" ? limitShift() : undefined,
                 ...this.detectOverflowOptions,
             }),
-        this.opts.avoidCollisions.current && flip({ ...this.detectOverflowOptions }),
+        this.opts.avoidCollisions.current &&
+            this.#collisionAvoidance.side === "flip" &&
+            flip({ ...this.detectOverflowOptions }),
         size({
             ...this.detectOverflowOptions,
             apply: ({ rects, availableWidth, availableHeight }) => {

package/dist/bits/utilities/popper-layer/popper-layer-force-mount.svelte

@@ -16,6 +16,7 @@
 		alignOffset,
 		arrowPadding,
 		avoidCollisions,
+		collisionAvoidance,
 		collisionBoundary,
 		collisionPadding,
 		sticky,
@@ -58,6 +59,7 @@
 	{alignOffset}
 	{arrowPadding}
 	{avoidCollisions}
+	{collisionAvoidance}
 	{collisionBoundary}
 	{collisionPadding}
 	{sticky}

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -22,6 +22,7 @@
 		alignOffset,
 		arrowPadding,
 		avoidCollisions,
+		collisionAvoidance,
 		collisionBoundary,
 		collisionPadding,
 		sticky,
@@ -66,6 +67,7 @@
 	{alignOffset}
 	{arrowPadding}
 	{avoidCollisions}
+	{collisionAvoidance}
 	{collisionBoundary}
 	{collisionPadding}
 	{sticky}

package/dist/bits/utilities/popper-layer/popper-layer.svelte

@@ -17,6 +17,7 @@
 		alignOffset,
 		arrowPadding,
 		avoidCollisions,
+		collisionAvoidance,
 		collisionBoundary,
 		collisionPadding,
 		sticky,
@@ -59,6 +60,7 @@
 		{alignOffset}
 		{arrowPadding}
 		{avoidCollisions}
+		{collisionAvoidance}
 		{collisionBoundary}
 		{collisionPadding}
 		{sticky}

package/package.json

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