bits-ui 2.16.1 → 2.16.3

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

@@ -1,7 +1,7 @@
 import type { Updater } from "svelte/store";
 import { Time } from "@internationalized/date";
 import { type WritableBox, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsInputEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { TimeSegmentObj, SegmentPart, HourCycle, TimeValidator, TimeOnInvalid, EditableTimeSegmentPart } from "../../shared/date/types.js";
 import { type TimeFormatter } from "../../internal/date-time/formatter.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
@@ -288,6 +288,7 @@ declare class TimeFieldDayPeriodSegmentState {
     readonly root: TimeFieldRootState;
     readonly attachment: RefAttachment;
     constructor(opts: TimeFieldDayPeriodSegmentStateOpts, root: TimeFieldRootState);
+    onbeforeinput(e: BitsInputEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
         "aria-invalid": "true" | undefined;
@@ -305,6 +306,7 @@ declare class TimeFieldDayPeriodSegmentState {
         "aria-valuenow": number;
         "aria-valuetext": string;
         onkeydown: (e: BitsKeyboardEvent) => void;
+        onbeforeinput: (e: BitsInputEvent) => void;
         onclick: (e: BitsMouseEvent) => void;
         role: string;
         contenteditable: string;
@@ -335,6 +337,7 @@ declare class TimeFieldDayPeriodSegmentState {
         "aria-valuenow": number;
         "aria-valuetext": string;
         onkeydown: (e: BitsKeyboardEvent) => void;
+        onbeforeinput: (e: BitsInputEvent) => void;
         onclick: (e: BitsMouseEvent) => void;
         role: string;
         spellcheck: boolean;

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

@@ -836,6 +836,22 @@ class TimeFieldDayPeriodSegmentState {
         this.#announcer = this.root.announcer;
         this.attachment = attachRef(opts.ref, (v) => (this.root.dayPeriodNode = v));
         this.onkeydown = this.onkeydown.bind(this);
+        this.onbeforeinput = this.onbeforeinput.bind(this);
+    }
+    onbeforeinput(e) {
+        if (this.root.disabled.current)
+            return;
+        const data = typeof e.data === "string" ? e.data.trim().toLowerCase() : "";
+        if (!data)
+            return;
+        e.preventDefault();
+        if (data === "a" || data === "p") {
+            this.root.updateSegment("dayPeriod", () => {
+                const next = data === "a" ? "AM" : "PM";
+                this.#announcer.announce(next);
+                return next;
+            });
+        }
     }
     onkeydown(e) {
         if (e.ctrlKey || e.metaKey || this.root.disabled.current)
@@ -894,6 +910,7 @@ class TimeFieldDayPeriodSegmentState {
             "aria-valuenow": valueNow,
             "aria-valuetext": valueText,
             onkeydown: this.onkeydown,
+            onbeforeinput: this.onbeforeinput,
             onclick: this.root.handleSegmentClick,
             ...this.root.getBaseSegmentAttrs("dayPeriod", this.opts.id.current),
             ...this.attachment,

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

@@ -524,14 +524,19 @@ export class TooltipTriggerState {
         const relatedTarget = e.relatedTarget;
         // when moving to a sibling trigger and skip delay is active, don't close —
         // the sibling's enter handler will switch the active trigger instantly.
-        // if skipDelayDuration is 0 there's no grace period, so let the tooltip
-        // close and make the sibling wait through the full delay (and re-animate).
-        if (isElement(relatedTarget) && root.provider.opts.skipDelayDuration.current > 0) {
+        // if skipDelayDuration is 0 there's no grace period, so close now and let
+        // the sibling wait through the full delay (and re-animate).
+        if (isElement(relatedTarget)) {
             for (const record of root.registry.triggers.values()) {
-                if (record.node === relatedTarget) {
+                if (record.node !== relatedTarget)
+                    continue;
+                if (root.provider.opts.skipDelayDuration.current > 0) {
                     this.#hasPointerMoveOpened = false;
                     return;
                 }
+                root.handleClose();
+                this.#hasPointerMoveOpened = false;
+                return;
             }
         }
         root.onTriggerLeave();
@@ -606,6 +611,7 @@ export class TooltipContentState {
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
+            transitIntentTimeout: 180,
             ignoredTargets: () => {
                 // only skip closing for sibling triggers when there's a skip-delay grace period;
                 // with skipDelayDuration=0 the close+reopen is intentional (full delay + re-animation)

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

@@ -105,7 +105,7 @@ export function useFloating(options) {
         whileElementsMountedCleanup = whileElementsMountedOption(reference.current, floating.current, update);
     }
     function reset() {
-        if (!openOption) {
+        if (!openOption && floating.current === null) {
             isPositioned = false;
         }
     }

package/dist/internal/safe-polygon.svelte.d.ts

@@ -5,6 +5,7 @@ export interface SafePolygonOptions {
     contentNode: Getter<HTMLElement | null>;
     onPointerExit: () => void;
     buffer?: number;
+    transitIntentTimeout?: number;
     /** nodes that should not trigger a close when they become the relatedTarget on trigger leave (e.g. sibling triggers in singleton mode) */
     ignoredTargets?: Getter<HTMLElement[]>;
 }

package/dist/internal/safe-polygon.svelte.js

@@ -42,11 +42,15 @@ function getSide(triggerRect, contentRect) {
 export class SafePolygon {
     #opts;
     #buffer;
+    #transitIntentTimeout;
     // tracks the cursor position when leaving trigger or content
     #exitPoint = null;
     // tracks what we're moving toward: "content" when leaving trigger, "trigger" when leaving content
     #exitTarget = null;
+    #transitTargets = [];
+    #trackedTriggerNode = null;
     #leaveFallbackRafId = null;
+    #transitIntentTimeoutId = null;
     #cancelLeaveFallback() {
         if (this.#leaveFallbackRafId !== null) {
             cancelAnimationFrame(this.#leaveFallbackRafId);
@@ -63,14 +67,42 @@ export class SafePolygon {
             this.#opts.onPointerExit();
         });
     }
+    #cancelTransitIntentTimeout() {
+        if (this.#transitIntentTimeoutId !== null) {
+            clearTimeout(this.#transitIntentTimeoutId);
+            this.#transitIntentTimeoutId = null;
+        }
+    }
+    #scheduleTransitIntentTimeout() {
+        if (this.#transitIntentTimeout === null)
+            return;
+        this.#cancelTransitIntentTimeout();
+        this.#transitIntentTimeoutId = window.setTimeout(() => {
+            this.#transitIntentTimeoutId = null;
+            if (!this.#exitPoint || !this.#exitTarget)
+                return;
+            this.#clearTracking();
+            this.#opts.onPointerExit();
+        }, this.#transitIntentTimeout);
+    }
     constructor(opts) {
         this.#opts = opts;
         this.#buffer = opts.buffer ?? 1;
+        const transitIntentTimeout = opts.transitIntentTimeout;
+        this.#transitIntentTimeout =
+            typeof transitIntentTimeout === "number" && transitIntentTimeout > 0
+                ? transitIntentTimeout
+                : null;
         watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
             if (!triggerNode || !contentNode || !enabled) {
+                this.#trackedTriggerNode = null;
                 this.#clearTracking();
                 return;
             }
+            if (this.#trackedTriggerNode && this.#trackedTriggerNode !== triggerNode) {
+                this.#clearTracking();
+            }
+            this.#trackedTriggerNode = triggerNode;
             const doc = getDocument(triggerNode);
             const handlePointerMove = (e) => {
                 this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
@@ -89,16 +121,13 @@ export class SafePolygon {
                     ignoredTargets.some((n) => n === target || n.contains(target))) {
                     return;
                 }
-                // if relatedTarget is completely unrelated to the floating tree
-                // (not an ancestor of content, not inside content/trigger), close now
-                if (isElement(target) &&
-                    !triggerNode.contains(target) &&
-                    !contentNode.contains(target) &&
-                    !target.contains(contentNode)) {
-                    this.#clearTracking();
-                    this.#opts.onPointerExit();
-                    return;
-                }
+                this.#transitTargets =
+                    isElement(target) && ignoredTargets.length > 0
+                        ? ignoredTargets.filter((n) => target.contains(n))
+                        : [];
+                // for unrelated elements, defer close decisions to pointer geometry checks.
+                // this allows the cursor to pass through intermediate elements on the way
+                // to content without immediately closing.
                 this.#exitPoint = [e.clientX, e.clientY];
                 this.#exitTarget = "content";
                 this.#scheduleLeaveFallback();
@@ -140,6 +169,7 @@ export class SafePolygon {
         if (!this.#exitPoint || !this.#exitTarget)
             return;
         this.#cancelLeaveFallback();
+        this.#scheduleTransitIntentTimeout();
         const triggerRect = triggerNode.getBoundingClientRect();
         const contentRect = contentNode.getBoundingClientRect();
         // check if pointer reached the target
@@ -151,6 +181,17 @@ export class SafePolygon {
             this.#clearTracking();
             return;
         }
+        if (this.#exitTarget === "content" && this.#transitTargets.length > 0) {
+            for (const transitTarget of this.#transitTargets) {
+                const transitRect = transitTarget.getBoundingClientRect();
+                if (isInsideRect(clientPoint, transitRect))
+                    return;
+                const transitSide = getSide(triggerRect, transitRect);
+                const transitCorridor = this.#getCorridorPolygon(triggerRect, transitRect, transitSide);
+                if (transitCorridor && isPointInPolygon(clientPoint, transitCorridor))
+                    return;
+            }
+        }
         // check if pointer is in the rectangular corridor between trigger and content
         const side = getSide(triggerRect, contentRect);
         const corridorPoly = this.#getCorridorPolygon(triggerRect, contentRect, side);
@@ -170,7 +211,9 @@ export class SafePolygon {
     #clearTracking() {
         this.#exitPoint = null;
         this.#exitTarget = null;
+        this.#transitTargets = [];
         this.#cancelLeaveFallback();
+        this.#cancelTransitIntentTimeout();
     }
     /**
      * Creates a rectangular corridor between trigger and content

package/dist/internal/types.d.ts

@@ -90,4 +90,5 @@ export type BitsPointerEvent<T extends HTMLElement = HTMLElement> = BitsEvent<Po
 export type BitsKeyboardEvent<T extends HTMLElement = HTMLElement> = BitsEvent<KeyboardEvent, T>;
 export type BitsMouseEvent<T extends HTMLElement = HTMLElement> = BitsEvent<MouseEvent, T>;
 export type BitsFocusEvent<T extends HTMLElement = HTMLElement> = BitsEvent<FocusEvent, T>;
+export type BitsInputEvent<T extends HTMLElement = HTMLElement> = BitsEvent<InputEvent, T>;
 export type RefAttachment<T extends HTMLElement = HTMLElement> = ReturnType<typeof attachRef<T>>;

package/package.json

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