bits-ui 2.9.8 → 2.10.0

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

@@ -4,7 +4,7 @@ import { CustomEventDispatcher } from "../../internal/events.js";
 import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Direction } from "../../shared/index.js";
 import { IsUsingKeyboard } from "../../index.js";
-import type { KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
+import type { KeyboardEventHandler, PointerEventHandler, MouseEventHandler } from "svelte/elements";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 export declare const MenuCheckboxGroupContext: Context<MenuCheckboxGroupState>;
@@ -346,6 +346,7 @@ export declare class DropdownMenuTriggerState {
     readonly parentMenu: MenuMenuState;
     readonly attachment: RefAttachment;
     constructor(opts: DropdownMenuTriggerStateOpts, parentMenu: MenuMenuState);
+    onclick: MouseEventHandler<HTMLElement>;
     onpointerdown: PointerEventHandler<HTMLElement>;
     onpointerup: PointerEventHandler<HTMLElement>;
     onkeydown: KeyboardEventHandler<HTMLElement>;
@@ -357,6 +358,7 @@ export declare class DropdownMenuTriggerState {
         readonly "aria-controls": string | undefined;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
+        readonly onclick: MouseEventHandler<HTMLElement>;
         readonly onpointerdown: PointerEventHandler<HTMLElement>;
         readonly onpointerup: PointerEventHandler<HTMLElement>;
         readonly onkeydown: KeyboardEventHandler<HTMLElement>;

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

@@ -768,6 +768,17 @@ export class DropdownMenuTriggerState {
         this.parentMenu = parentMenu;
         this.attachment = attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v));
     }
+    onclick = (e) => {
+        /**
+         * MacOS VoiceOver sends a click in Safari/Firefox bypassing the keydown event
+         * when V0+Space is pressed. Since we already handle the keydown event and the
+         * pointerdown events separately, we ignore it if the detail is not 0.
+         */
+        if (this.opts.disabled.current || e.detail !== 0)
+            return;
+        this.parentMenu.toggleOpen();
+        e.preventDefault();
+    };
     onpointerdown = (e) => {
         if (this.opts.disabled.current)
             return;
@@ -817,6 +828,7 @@ export class DropdownMenuTriggerState {
         "data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
         [this.parentMenu.root.getBitsAttr("trigger")]: "",
         //
+        onclick: this.onclick,
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
         onkeydown: this.onkeydown,

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

@@ -28,7 +28,6 @@ interface SelectBaseRootStateOpts extends ReadableBoxedValues<{
     isCombobox: boolean;
 }
 declare abstract class SelectBaseRootState {
-    #private;
     readonly opts: SelectBaseRootStateOpts;
     touchedInput: boolean;
     inputNode: HTMLElement | null;
@@ -45,9 +44,7 @@ declare abstract class SelectBaseRootState {
     constructor(opts: SelectBaseRootStateOpts);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
     getCandidateNodes(): HTMLElement[];
-    setHighlightedToFirstCandidate(options?: {
-        debounced: boolean;
-    }): void;
+    setHighlightedToFirstCandidate(): void;
     getNodeByValue(value: string): HTMLElement | null;
     setOpen(open: boolean): void;
     toggleOpen(): void;

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

@@ -1,5 +1,5 @@
 import { Context, Previous, watch } from "runed";
-import { afterSleep, afterTick, onDestroyEffect, onMountEffect, attachRef, DOMContext, box, } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext, box, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
 import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
@@ -11,7 +11,6 @@ import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floati
 import { DataTypeahead } from "../../internal/data-typeahead.svelte.js";
 import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
-import { debounce } from "../../internal/debounce.js";
 // prettier-ignore
 export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
 export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
@@ -83,7 +82,6 @@ class SelectBaseRootState {
             }
         });
     }
-    #debouncedSetHighlightedToFirstCandidate = debounce(this.setHighlightedToFirstCandidate.bind(this), 20);
     setHighlightedNode(node, initial = false) {
         this.highlightedNode = node;
         if (node && (this.isUsingKeyboard || initial)) {
@@ -96,11 +94,7 @@ class SelectBaseRootState {
             return [];
         return Array.from(node.querySelectorAll(`[${this.getBitsAttr("item")}]:not([data-disabled])`));
     }
-    setHighlightedToFirstCandidate(options = { debounced: false }) {
-        if (options.debounced) {
-            this.#debouncedSetHighlightedToFirstCandidate();
-            return;
-        }
+    setHighlightedToFirstCandidate() {
         this.setHighlightedNode(null);
         const candidateNodes = this.getCandidateNodes();
         if (!candidateNodes.length)
@@ -328,7 +322,9 @@ export class SelectInputState {
                 this.root.handleClose();
                 return;
             }
-            if (this.root.highlightedValue) {
+            if (this.root.highlightedValue &&
+                this.root.highlightedNode &&
+                this.root.highlightedNode.isConnected) {
                 this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
             }
             if (!this.root.isMulti && !isCurrentSelectedValue) {
@@ -378,6 +374,7 @@ export class SelectInputState {
     }
     oninput(e) {
         this.root.opts.inputValue.current = e.currentTarget.value;
+        this.root.setHighlightedToFirstCandidate();
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -790,12 +787,6 @@ export class SelectItemState {
         this.opts = opts;
         this.root = root;
         this.attachment = attachRef(opts.ref);
-        onMountEffect(() => {
-            this.root.setHighlightedToFirstCandidate({ debounced: true });
-        });
-        onDestroyEffect(() => {
-            this.root.setHighlightedToFirstCandidate({ debounced: true });
-        });
         watch([() => this.isHighlighted, () => this.prevHighlighted.current], () => {
             if (this.isHighlighted) {
                 this.opts.onHighlight.current();

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.9.8",
+  "version": "2.10.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -20,10 +20,10 @@
   ],
   "devDependencies": {
     "@internationalized/date": "^3.8.2",
-    "@sveltejs/kit": "^2.31.0",
+    "@sveltejs/kit": "^2.42.0",
     "@sveltejs/package": "2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
-    "@types/node": "^20.19.0",
+    "@types/node": "^20.19.16",
     "@types/resize-observer-browser": "^0.1.11",
     "csstype": "^3.1.3",
     "jsdom": "^24.1.3",
@@ -41,7 +41,7 @@
     "@floating-ui/core": "^1.7.1",
     "@floating-ui/dom": "^1.7.1",
     "esm-env": "^1.1.2",
-    "runed": "^0.29.1",
+    "runed": "^0.31.1",
     "svelte-toolbelt": "^0.9.3",
     "tabbable": "^6.2.0"
   },