bits-ui 2.16.3 → 2.16.5

package/dist/bits/date-field/date-field.svelte.d.ts

@@ -135,6 +135,7 @@ export declare class DateFieldRootState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     };
     updateSegment<T extends keyof DateAndTimeSegmentObj>(part: T, cb: T extends DateSegmentPart ? Updater<DateSegmentObj[T]> : T extends EditableTimeSegmentPart ? Updater<TimeSegmentObj[T]> : Updater<DateAndTimeSegmentObj[T]>): void;
     handleSegmentClick(e: BitsMouseEvent): void;
@@ -256,6 +257,7 @@ declare abstract class BaseNumericSegmentState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     } | {
         "aria-labelledby": string;
         contenteditable: string | undefined;
@@ -285,6 +287,7 @@ declare abstract class BaseNumericSegmentState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     };
 }
 declare class DateFieldYearSegmentState extends BaseNumericSegmentState {
@@ -345,6 +348,7 @@ export declare class DateFieldDayPeriodSegmentState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     } | {
         "aria-labelledby": string;
         contenteditable: string | undefined;
@@ -373,6 +377,7 @@ export declare class DateFieldDayPeriodSegmentState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     } | undefined;
 }
 interface DateFieldLiteralSegmentStateOpts extends WithRefOpts {

package/dist/bits/date-field/date-field.svelte.js

@@ -414,6 +414,11 @@ export class DateFieldRootState {
         style: {
             caretColor: "transparent",
         },
+        onbeforeinput: (e) => {
+            if (!e.data || e.data.length <= 1) {
+                e.preventDefault();
+            }
+        },
     };
     #getLabelledBy(segmentId) {
         return `${segmentId} ${this.getLabelNode()?.id ?? ""}`;

package/dist/bits/menu/menu.svelte.js

@@ -183,6 +183,10 @@ export class MenuContentState {
         this.opts.onCloseAutoFocus.current?.(e);
         if (e.defaultPrevented || this.#isSub)
             return;
+        if (this.parentMenu.root.ignoreCloseAutoFocus) {
+            e.preventDefault();
+            return;
+        }
         if (this.parentMenu.triggerNode && isTabbable(this.parentMenu.triggerNode)) {
             e.preventDefault();
             this.parentMenu.triggerNode.focus();
@@ -306,7 +310,17 @@ export class MenuContentState {
         }
         if (e.target.closest(`#${triggerId}`)) {
             e.preventDefault();
+            return;
         }
+        /**
+         * when the menu closes due to an outside pointer interaction (for example,
+         * clicking another dropdown trigger), avoid focusing this menu's trigger
+         * to prevent stealing focus from the new interaction target.
+         */
+        this.parentMenu.root.ignoreCloseAutoFocus = true;
+        afterTick(() => {
+            this.parentMenu.root.ignoreCloseAutoFocus = false;
+        });
     }
     get shouldRender() {
         return this.parentMenu.contentPresence.shouldRender;

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -80,7 +80,7 @@ export class NavigationMenuRootState {
         const isOpen = this.opts?.value?.current !== "";
         if (isOpen || this.isDelaySkipped.current) {
             // 150 for user to switch trigger or move into content view
-            return 100;
+            return 150;
         }
         else {
             return this.opts.delayDuration.current;

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

@@ -41,11 +41,13 @@ declare abstract class SelectBaseRootState {
     readonly highlightedValue: string | null;
     readonly highlightedId: string | undefined;
     readonly highlightedLabel: string | null;
+    contentIsPositioned: boolean;
     isUsingKeyboard: boolean;
     isCombobox: boolean;
     domContext: DOMContext;
     constructor(opts: SelectBaseRootStateOpts);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
+    scrollHighlightedNodeIntoView(node: HTMLElement): void;
     getCandidateNodes(): HTMLElement[];
     setHighlightedToFirstCandidate(initial?: boolean): void;
     getNodeByValue(value: string): HTMLElement | null;

package/dist/bits/select/select.svelte.js

@@ -65,6 +65,7 @@ class SelectBaseRootState {
             return null;
         return this.highlightedNode.getAttribute("data-label");
     });
+    contentIsPositioned = $state(false);
     isUsingKeyboard = false;
     isCombobox = false;
     domContext = new DOMContext(() => null);
@@ -87,9 +88,14 @@ class SelectBaseRootState {
     setHighlightedNode(node, initial = false) {
         this.highlightedNode = node;
         if (node && (this.isUsingKeyboard || initial)) {
-            node.scrollIntoView({ block: this.opts.scrollAlignment.current });
+            this.scrollHighlightedNodeIntoView(node);
         }
     }
+    scrollHighlightedNodeIntoView(node) {
+        if (!this.viewportNode || !this.contentIsPositioned)
+            return;
+        node.scrollIntoView({ block: this.opts.scrollAlignment.current });
+    }
     getCandidateNodes() {
         const node = this.contentNode;
         if (!node)
@@ -713,13 +719,20 @@ export class SelectContentState {
         }
         onDestroyEffect(() => {
             this.root.contentNode = null;
+            this.root.contentIsPositioned = false;
             this.isPositioned = false;
         });
         watch(() => this.root.opts.open.current, () => {
             if (this.root.opts.open.current)
                 return;
+            this.root.contentIsPositioned = false;
             this.isPositioned = false;
         });
+        watch([() => this.isPositioned, () => this.root.highlightedNode], () => {
+            if (!this.isPositioned || !this.root.highlightedNode)
+                return;
+            this.root.scrollHighlightedNodeIntoView(this.root.highlightedNode);
+        });
         this.onpointermove = this.onpointermove.bind(this);
     }
     onpointermove(_) {
@@ -782,6 +795,7 @@ export class SelectContentState {
             // onPlaced is also called when the menu is closed, so we need to check if the menu
             // is actually open to avoid setting positioning to true when the menu is closed
             if (this.root.opts.open.current) {
+                this.root.contentIsPositioned = true;
                 this.isPositioned = true;
             }
         },
@@ -1120,7 +1134,9 @@ export class SelectScrollDownButtonState {
             }
             this.scrollIntoViewTimer = afterSleep(5, () => {
                 const activeItem = this.root.highlightedNode;
-                activeItem?.scrollIntoView({ block: this.root.opts.scrollAlignment.current });
+                if (!activeItem)
+                    return;
+                this.root.scrollHighlightedNodeIntoView(activeItem);
             });
         });
     }

package/dist/bits/tooltip/tooltip.svelte.js

@@ -163,8 +163,8 @@ export class TooltipProviderState {
     onClose = (tooltip) => {
         if (this.#openTooltip === tooltip) {
             this.#openTooltip = null;
+            this.#startTimer();
         }
-        this.#startTimer();
     };
     isTooltipOpen = (tooltip) => {
         return this.#openTooltip === tooltip;

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

@@ -52,6 +52,11 @@
 		enabled: boolean;
 		contentPointerEvents?: "auto" | "none";
 	} = $props();
+
+	const resolvedPreventScroll = $derived(preventScroll ?? true);
+	const effectiveStrategy = $derived(
+		strategy ?? (resolvedPreventScroll ? "fixed" : "absolute")
+	);
 </script>
 
 <PopperContent
@@ -68,7 +73,7 @@
 	{sticky}
 	{hideWhenDetached}
 	{updatePositionStrategy}
-	{strategy}
+	strategy={effectiveStrategy}
 	{dir}
 	{wrapperId}
 	{style}
@@ -79,9 +84,9 @@
 >
 	{#snippet content({ props: floatingProps, wrapperProps })}
 		{#if restProps.forceMount && enabled}
-			<ScrollLock {preventScroll} />
+			<ScrollLock preventScroll={resolvedPreventScroll} />
 		{:else if !restProps.forceMount}
-			<ScrollLock {preventScroll} />
+			<ScrollLock preventScroll={resolvedPreventScroll} />
 		{/if}
 		<FocusScope
 			{onOpenAutoFocus}

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

@@ -23,6 +23,7 @@ export function useFloating(options) {
     let middlewareData = $state({});
     let isPositioned = $state(false);
     let hasWhileMountedPosition = false;
+    let updateRequestId = 0;
     const floatingStyles = $derived.by(() => {
         // preserve last known position when floating ref is null (during transitions)
         const xVal = floating.current ? roundByDPR(floating.current, x) : x;
@@ -50,12 +51,20 @@ export function useFloating(options) {
     function update() {
         if (reference.current === null || floating.current === null)
             return;
-        computePosition(reference.current, floating.current, {
+        const referenceNode = reference.current;
+        const floatingNode = floating.current;
+        const requestId = ++updateRequestId;
+        computePosition(referenceNode, floatingNode, {
             middleware: middlewareOption,
             placement: placementOption,
             strategy: strategyOption,
         }).then((position) => {
-            const referenceNode = reference.current;
+            // ignore stale async resolutions when newer updates were requested.
+            if (requestId !== updateRequestId)
+                return;
+            // ignore stale resolutions after ref replacement.
+            if (reference.current !== referenceNode || floating.current !== floatingNode)
+                return;
             const referenceHidden = isReferenceHidden(referenceNode);
             if (referenceHidden) {
                 // keep last good coordinates when the anchor disappears to avoid
@@ -91,6 +100,7 @@ export function useFloating(options) {
             whileElementsMountedCleanup();
             whileElementsMountedCleanup = undefined;
         }
+        updateRequestId++;
     }
     function attach() {
         cleanup();

package/package.json

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