bits-ui 2.4.0 → 2.4.1

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -76,6 +76,7 @@
 				<EscapeLayer
 					{...mergedProps}
 					enabled={contentState.root.opts.open.current}
+					ref={contentState.opts.ref}
 					onEscapeKeydown={(e) => {
 						onEscapeKeydown(e);
 						if (e.defaultPrevented) return;

package/dist/bits/dialog/components/dialog-content.svelte

@@ -69,6 +69,7 @@
 				<EscapeLayer
 					{...mergedProps}
 					enabled={contentState.root.opts.open.current}
+					ref={contentState.opts.ref}
 					onEscapeKeydown={(e) => {
 						onEscapeKeydown(e);
 						if (e.defaultPrevented) return;

package/dist/bits/navigation-menu/components/navigation-menu-content-impl.svelte

@@ -73,6 +73,7 @@
 	{#snippet children({ props: dismissibleProps })}
 		<EscapeLayer
 			enabled={true}
+			ref={contentImplState.opts.ref}
 			onEscapeKeydown={(e) => {
 				onEscapeKeydown(e);
 				if (e.defaultPrevented) return;

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -506,7 +506,7 @@ class ScrollAreaScrollbarSharedState {
                 if (isScrollbarWheel)
                     this.handleWheelScroll(e, maxScrollPos);
             };
-            const unsubListener = addEventListener(document, "wheel", handleWheel, {
+            const unsubListener = addEventListener(this.root.domContext.getDocument(), "wheel", handleWheel, {
                 passive: false,
             });
             return unsubListener;

package/dist/bits/slider/slider.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Box, type ReadableBox } from "svelte-toolbelt";
+import { type Box, type ReadableBox, DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
@@ -22,6 +22,7 @@ declare class SliderBaseRootState {
     isActive: boolean;
     direction: "rl" | "lr" | "tb" | "bt";
     normalizedSteps: number[];
+    domContext: DOMContext;
     constructor(opts: SliderBaseRootStateProps);
     isThumbActive(_index: number): boolean;
     getAllThumbs: () => HTMLElement[];

package/dist/bits/slider/slider.svelte.js

@@ -3,7 +3,7 @@
  * Abdelrahman (https://github.com/abdel-17)
  */
 import { untrack } from "svelte";
-import { executeCallbacks, onMountEffect, attachRef, } from "svelte-toolbelt";
+import { executeCallbacks, onMountEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles, normalizeSteps, snapValueToCustomSteps, getAdjacentStepValue, getTickLabelStyles, getThumbLabelStyles, } from "./helpers.js";
@@ -31,8 +31,10 @@ class SliderBaseRootState {
     normalizedSteps = $derived.by(() => {
         return normalizeSteps(this.opts.step.current, this.opts.min.current, this.opts.max.current);
     });
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
     }
     isThumbActive(_index) {
         return this.isActive;
@@ -101,7 +103,7 @@ class SliderSingleRootState extends SliderBaseRootState {
         super(opts);
         this.opts = opts;
         onMountEffect(() => {
-            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+            return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.handlePointerDown), on(this.domContext.getDocument(), "pointerup", this.handlePointerUp), on(this.domContext.getDocument(), "pointermove", this.handlePointerMove), on(this.domContext.getDocument(), "pointerleave", this.handlePointerUp));
         });
         watch([
             () => this.opts.step.current,
@@ -191,7 +193,7 @@ class SliderSingleRootState extends SliderBaseRootState {
         const closestThumb = this.getAllThumbs()[0];
         if (!closestThumb || !sliderNode)
             return;
-        const target = e.target;
+        const target = e.composedPath()[0] ?? e.target;
         if (!isElementOrSVGElement(target) || !sliderNode.contains(target))
             return;
         e.preventDefault();
@@ -286,7 +288,7 @@ class SliderMultiRootState extends SliderBaseRootState {
         super(opts);
         this.opts = opts;
         onMountEffect(() => {
-            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+            return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.handlePointerDown), on(this.domContext.getDocument(), "pointerup", this.handlePointerUp), on(this.domContext.getDocument(), "pointermove", this.handlePointerMove), on(this.domContext.getDocument(), "pointerleave", this.handlePointerUp));
         });
         watch([
             () => this.opts.step.current,
@@ -405,7 +407,7 @@ class SliderMultiRootState extends SliderBaseRootState {
         const closestThumb = this.#getClosestThumb(e);
         if (!closestThumb || !sliderNode)
             return;
-        const target = e.target;
+        const target = e.composedPath()[0] ?? e.target;
         if (!isElementOrSVGElement(target) || !sliderNode.contains(target))
             return;
         e.preventDefault();

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

@@ -9,12 +9,14 @@
 		onEscapeKeydown = noop,
 		children,
 		enabled,
+		ref,
 	}: EscapeLayerImplProps = $props();
 
 	useEscapeLayer({
 		escapeKeydownBehavior: box.with(() => escapeKeydownBehavior),
 		onEscapeKeydown: box.with(() => onEscapeKeydown),
 		enabled: box.with(() => enabled),
+		ref,
 	});
 </script>
 

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { Box } from "svelte-toolbelt";
 export type EscapeBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
 export type EscapeLayerProps = {
     /**
@@ -24,4 +25,5 @@ export type EscapeLayerImplProps = {
      */
     enabled: boolean;
     children?: Snippet;
+    ref: Box<HTMLElement | null>;
 } & EscapeLayerProps;

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

@@ -1,9 +1,13 @@
+import { DOMContext, type Box } from "svelte-toolbelt";
 import type { EscapeLayerImplProps } from "./types.js";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children">>>;
+type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> & {
+    ref: Box<HTMLElement | null>;
+};
 export declare class EscapeLayerState {
     #private;
     readonly opts: EscapeLayerStateProps;
+    readonly domContext: DOMContext;
     constructor(opts: EscapeLayerStateProps);
 }
 export declare function useEscapeLayer(props: EscapeLayerStateProps): EscapeLayerState;

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

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
 import { kbd } from "../../../internal/kbd.js";
@@ -5,8 +6,10 @@ import { noop } from "../../../internal/noop.js";
 globalThis.bitsEscapeLayers ??= new Map();
 export class EscapeLayerState {
     opts;
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
         let unsubEvents = noop;
         watch(() => opts.enabled.current, (enabled) => {
             if (enabled) {
@@ -20,7 +23,7 @@ export class EscapeLayerState {
         });
     }
     #addEventListener = () => {
-        return on(document, "keydown", this.#onkeydown, { passive: false });
+        return on(this.domContext.getDocument(), "keydown", this.#onkeydown, { passive: false });
     };
     #onkeydown = (e) => {
         if (e.key !== kbd.ESCAPE || !isResponsibleEscapeLayer(this))

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

@@ -183,6 +183,8 @@ class FloatingContentState {
                 return cleanup;
             },
             open: () => this.opts.enabled.current,
+            sideOffset: () => this.opts.sideOffset.current,
+            alignOffset: () => this.opts.alignOffset.current,
         });
         $effect(() => {
             if (!this.floating.isPositioned)

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

@@ -91,7 +91,7 @@
 			{ref}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}
-				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled}>
+				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled} {ref}>
 					<DismissibleLayer
 						{id}
 						{onInteractOutside}

package/dist/internal/floating-svelte/types.d.ts

@@ -41,6 +41,18 @@ export type UseFloatingOptions = {
      * @default undefined
      */
     whileElementsMounted?: (reference: ReferenceElement, floating: FloatingElement, update: () => void) => () => void;
+    /**
+     * The offset from the reference element along the side axis.
+     * Used to detect bad coordinates during transitions.
+     * @default undefined
+     */
+    sideOffset?: ValueOrGetValue<number | undefined>;
+    /**
+     * The offset from the reference element along the alignment axis.
+     * Used to detect bad coordinates during transitions.
+     * @default undefined
+     */
+    alignOffset?: ValueOrGetValue<number | undefined>;
 };
 export type UseFloatingReturn = {
     /**

package/dist/internal/floating-svelte/use-floating.svelte.js

@@ -9,6 +9,8 @@ export function useFloating(options) {
     const transformOption = $derived(get(options.transform) ?? true);
     const placementOption = $derived(get(options.placement) ?? "bottom");
     const strategyOption = $derived(get(options.strategy) ?? "absolute");
+    const sideOffsetOption = $derived(get(options.sideOffset) ?? 0);
+    const alignOffsetOption = $derived(get(options.alignOffset) ?? 0);
     const reference = options.reference;
     /** State */
     let x = $state(0);
@@ -19,21 +21,17 @@ export function useFloating(options) {
     let middlewareData = $state({});
     let isPositioned = $state(false);
     const floatingStyles = $derived.by(() => {
-        const initialStyles = {
-            position: strategy,
-            left: "0",
-            top: "0",
-        };
-        if (!floating.current) {
-            return initialStyles;
-        }
-        const xVal = roundByDPR(floating.current, x);
-        const yVal = roundByDPR(floating.current, y);
+        // preserve last known position when floating ref is null (during transitions)
+        const xVal = floating.current ? roundByDPR(floating.current, x) : x;
+        const yVal = floating.current ? roundByDPR(floating.current, y) : y;
         if (transformOption) {
             return {
-                ...initialStyles,
+                position: strategy,
+                left: "0",
+                top: "0",
                 transform: `translate(${xVal}px, ${yVal}px)`,
-                ...(getDPR(floating.current) >= 1.5 && {
+                ...(floating.current &&
+                    getDPR(floating.current) >= 1.5 && {
                     willChange: "transform",
                 }),
             };
@@ -54,6 +52,14 @@ export function useFloating(options) {
             placement: placementOption,
             strategy: strategyOption,
         }).then((position) => {
+            // ignore bad coordinates that cause jumping during close transitions
+            if (!openOption && x !== 0 && y !== 0) {
+                // if we had a good position and now getting coordinates near
+                // the expected offset bounds during close, ignore it
+                const maxExpectedOffset = Math.max(Math.abs(sideOffsetOption), Math.abs(alignOffsetOption), 15);
+                if (position.x <= maxExpectedOffset && position.y <= maxExpectedOffset)
+                    return;
+            }
             x = position.x;
             y = position.y;
             strategy = position.strategy;

package/dist/internal/use-grace-area.svelte.js

@@ -1,4 +1,4 @@
-import { executeCallbacks, getWindow } from "svelte-toolbelt";
+import { executeCallbacks, getDocument, getWindow } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { watch } from "runed";
 import { boxAutoReset } from "./box-auto-reset.svelte.js";
@@ -60,7 +60,10 @@ export function useGraceArea(opts) {
                 opts.onPointerExit();
             }
         };
-        return on(document, "pointermove", handleTrackPointerGrace);
+        const doc = getDocument(opts.triggerNode() ?? opts.contentNode());
+        if (!doc)
+            return;
+        return on(doc, "pointermove", handleTrackPointerGrace);
     });
     return {
         isPointerInTransit,

package/package.json

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