bits-ui 2.16.4 → 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/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/package.json

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