bits-ui 2.8.10 → 2.8.12

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

@@ -62,7 +62,7 @@ export declare class CheckboxRootState {
     readonly attachment: RefAttachment;
     constructor(opts: CheckboxRootStateOpts, group: CheckboxGroupState | null);
     onkeydown(e: BitsKeyboardEvent): void;
-    onclick(_: BitsMouseEvent): void;
+    onclick(e: BitsMouseEvent): void;
     readonly snippetProps: {
         checked: boolean;
         indeterminate: boolean;
@@ -76,7 +76,7 @@ export declare class CheckboxRootState {
         readonly "aria-required": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "checked" | "indeterminate" | "unchecked";
-        readonly onclick: (_: BitsMouseEvent) => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }

package/dist/bits/checkbox/checkbox.svelte.js

@@ -143,9 +143,10 @@ export class CheckboxRootState {
             this.opts.checked.current = !this.opts.checked.current;
         }
     }
-    onclick(_) {
+    onclick(e) {
         if (this.opts.disabled.current)
             return;
+        e.preventDefault();
         this.#toggle();
     }
     snippetProps = $derived.by(() => ({

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

@@ -866,7 +866,7 @@ export class ContextMenuTriggerState {
         this.parentMenu.onOpen();
     }
     oncontextmenu(e) {
-        if (this.opts.disabled.current)
+        if (e.defaultPrevented || this.opts.disabled.current)
             return;
         this.#clearLongPressTimer();
         this.#handleOpen(e);

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

@@ -28,6 +28,7 @@ interface SelectBaseRootStateOpts extends ReadableBoxedValues<{
     isCombobox: boolean;
 }
 declare abstract class SelectBaseRootState {
+    #private;
     readonly opts: SelectBaseRootStateOpts;
     touchedInput: boolean;
     inputNode: HTMLElement | null;
@@ -44,7 +45,9 @@ declare abstract class SelectBaseRootState {
     constructor(opts: SelectBaseRootStateOpts);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
     getCandidateNodes(): HTMLElement[];
-    setHighlightedToFirstCandidate(): void;
+    setHighlightedToFirstCandidate(options?: {
+        debounced: boolean;
+    }): 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, attachRef, DOMContext, box, } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, onMountEffect, 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,6 +11,7 @@ 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];
@@ -82,6 +83,7 @@ class SelectBaseRootState {
             }
         });
     }
+    #debouncedSetHighlightedToFirstCandidate = debounce(this.setHighlightedToFirstCandidate.bind(this), 20);
     setHighlightedNode(node, initial = false) {
         this.highlightedNode = node;
         if (node && (this.isUsingKeyboard || initial)) {
@@ -94,7 +96,11 @@ class SelectBaseRootState {
             return [];
         return Array.from(node.querySelectorAll(`[${this.getBitsAttr("item")}]:not([data-disabled])`));
     }
-    setHighlightedToFirstCandidate() {
+    setHighlightedToFirstCandidate(options = { debounced: false }) {
+        if (options.debounced) {
+            this.#debouncedSetHighlightedToFirstCandidate();
+            return;
+        }
         this.setHighlightedNode(null);
         const candidateNodes = this.getCandidateNodes();
         if (!candidateNodes.length)
@@ -372,7 +378,6 @@ export class SelectInputState {
     }
     oninput(e) {
         this.root.opts.inputValue.current = e.currentTarget.value;
-        this.root.setHighlightedToFirstCandidate();
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -785,6 +790,12 @@ 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/package.json

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