bits-ui 2.16.0 → 2.16.2

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/internal/floating-svelte/use-floating.svelte.js

@@ -55,6 +55,21 @@ export function useFloating(options) {
             placement: placementOption,
             strategy: strategyOption,
         }).then((position) => {
+            const referenceNode = reference.current;
+            const referenceHidden = isReferenceHidden(referenceNode);
+            if (referenceHidden) {
+                // keep last good coordinates when the anchor disappears to avoid
+                // a transient jump to viewport origin before close propagates.
+                middlewareData = {
+                    ...middlewareData,
+                    hide: {
+                        // oxlint-disable-next-line no-explicit-any
+                        ...middlewareData.hide,
+                        referenceHidden: true,
+                    },
+                };
+                return;
+            }
             // 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
@@ -156,3 +171,12 @@ export function useFloating(options) {
         },
     };
 }
+function isReferenceHidden(node) {
+    if (!(node instanceof Element))
+        return false;
+    if (!node.isConnected)
+        return true;
+    if (node instanceof HTMLElement && node.hidden)
+        return true;
+    return node.getClientRects().length === 0;
+}

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.0",
+  "version": "2.16.2",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",