bits-ui 2.8.9 → 2.8.11

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -41,6 +41,12 @@
 	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
+
+		// don't close if the interaction is with a submenu content or items
+		if (e.target && e.target instanceof Element) {
+			const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr("sub-content")}]`;
+			if (e.target.closest(subContentSelector)) return;
+		}
 		contentState.parentMenu.onClose();
 	}
 

package/dist/bits/dropdown-menu/components/dropdown-menu-content.svelte

@@ -41,6 +41,12 @@
 		if (e.defaultPrevented) return;
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
+
+		// don't close if the interaction is with a submenu content or items
+		if (e.target && e.target instanceof Element) {
+			const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr("sub-content")}]`;
+			if (e.target.closest(subContentSelector)) return;
+		}
 		contentState.parentMenu.onClose();
 	}
 	function handleEscapeKeydown(e: KeyboardEvent) {

package/dist/bits/menu/components/menu-content.svelte

@@ -42,6 +42,11 @@
 	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
+		// don't close if the interaction is with a submenu content or items
+		if (e.target && e.target instanceof Element) {
+			const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr("sub-content")}]`;
+			if (e.target.closest(subContentSelector)) return;
+		}
 		contentState.parentMenu.onClose();
 	}
 

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

@@ -423,15 +423,13 @@ export class MenuItemState {
             return;
         const selectEvent = new CustomEvent("menuitemselect", { bubbles: true, cancelable: true });
         this.opts.onSelect.current(selectEvent);
-        afterTick(() => {
-            if (selectEvent.defaultPrevented) {
-                this.item.content.parentMenu.root.isUsingKeyboard.current = false;
-                return;
-            }
-            if (this.opts.closeOnSelect.current) {
-                this.item.content.parentMenu.root.opts.onClose();
-            }
-        });
+        if (selectEvent.defaultPrevented) {
+            this.item.content.parentMenu.root.isUsingKeyboard.current = false;
+            return;
+        }
+        if (this.opts.closeOnSelect.current) {
+            this.item.content.parentMenu.root.opts.onClose();
+        }
     }
     onkeydown(e) {
         const isTypingAhead = this.item.content.search !== "";
@@ -868,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.9",
+  "version": "2.8.11",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",