bits-ui 1.3.0 → 1.3.2

package/dist/bits/button/components/button.svelte

@@ -13,6 +13,7 @@
 
 <svelte:element
 	this={href ? "a" : "button"}
+	data-button-root
 	type={href ? undefined : type}
 	href={href && !disabled ? href : undefined}
 	disabled={href ? undefined : disabled}

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

@@ -21,7 +21,6 @@ declare class PopoverTriggerState {
     readonly root: PopoverRootState;
     constructor(opts: PopoverTriggerStateProps, root: PopoverRootState);
     onclick(e: BitsMouseEvent): void;
-    onpointerdown(e: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
@@ -31,7 +30,6 @@ declare class PopoverTriggerState {
         readonly "aria-controls": string | undefined;
         readonly "data-popover-trigger": "";
         readonly disabled: boolean;
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onclick: (e: BitsMouseEvent) => void;
     };

package/dist/bits/popover/popover.svelte.js

@@ -32,7 +32,6 @@ class PopoverTriggerState {
             },
         });
         this.onclick = this.onclick.bind(this);
-        this.onpointerdown = this.onpointerdown.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
     onclick(e) {
@@ -42,15 +41,6 @@ class PopoverTriggerState {
             return;
         this.root.toggleOpen();
     }
-    onpointerdown(e) {
-        if (this.opts.disabled.current)
-            return;
-        if (e.button !== 0)
-            return;
-        // We prevent default to prevent focus from moving to the trigger
-        // since this action will open the popover and focus will move to the content
-        e.preventDefault();
-    }
     onkeydown(e) {
         if (this.opts.disabled.current)
             return;
@@ -74,7 +64,6 @@ class PopoverTriggerState {
         "data-popover-trigger": "",
         disabled: this.opts.disabled.current,
         //
-        onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
         onclick: this.onclick,
     }));

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

@@ -41,7 +41,6 @@
 		enabled={contentState.root.opts.open.current}
 		{id}
 		{preventScroll}
-		onPlaced={() => (contentState.isPositioned = true)}
 		forceMount={true}
 	>
 		{#snippet popper({ props, wrapperProps })}

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

@@ -131,10 +131,6 @@ declare class SelectTriggerState {
     constructor(opts: SelectTriggerStateProps, root: SelectRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(e: BitsMouseEvent): void;
-    /**
-     * `pointerdown` fires before the `focus` event, so we can prevent the default
-     * behavior of focusing the button and keep focus on the input.
-     */
     onpointerdown(e: BitsPointerEvent): void;
     onpointerup(e: BitsPointerEvent): void;
     props: {
@@ -339,6 +335,7 @@ declare class SelectScrollDownButtonState {
     content: SelectContentState;
     root: SelectBaseRootState;
     canScrollDown: boolean;
+    scrollIntoViewTimer: ReturnType<typeof globalThis.setTimeout> | null;
     constructor(state: SelectScrollButtonImplState);
     /**
      * @param manual - if true, it means the function was invoked manually outside of an event

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

@@ -1,5 +1,5 @@
 import { Context, Previous, watch } from "runed";
-import { afterTick, onDestroyEffect, srOnlyStyles, styleToString, useRefById, } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, srOnlyStyles, styleToString, useRefById, } 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";
@@ -163,6 +163,11 @@ class SelectMultipleRootState extends SelectBaseRootState {
     constructor(opts) {
         super(opts);
         this.opts = opts;
+        $effect(() => {
+            if (!this.opts.open.current && this.highlightedNode) {
+                this.setHighlightedNode(null);
+            }
+        });
         watch(() => this.opts.open.current, () => {
             if (!this.opts.open.current)
                 return;
@@ -484,6 +489,7 @@ class SelectTriggerState {
             }
             if (!this.root.isMulti && !isCurrentSelectedValue) {
                 this.root.handleClose();
+                return;
             }
         }
         if (e.key === kbd.ARROW_UP && e.altKey) {
@@ -546,10 +552,6 @@ class SelectTriggerState {
         const currTarget = e.currentTarget;
         currTarget.focus();
     }
-    /**
-     * `pointerdown` fires before the `focus` event, so we can prevent the default
-     * behavior of focusing the button and keep focus on the input.
-     */
     onpointerdown(e) {
         if (this.root.opts.disabled.current)
             return;
@@ -566,7 +568,6 @@ class SelectTriggerState {
         if (e.button === 0 && e.ctrlKey === false) {
             if (this.root.opts.open.current === false) {
                 this.#handlePointerOpen(e);
-                e.preventDefault();
             }
             else {
                 this.root.handleClose();
@@ -576,7 +577,12 @@ class SelectTriggerState {
     onpointerup(e) {
         e.preventDefault();
         if (e.pointerType === "touch") {
-            this.#handlePointerOpen(e);
+            if (this.root.opts.open.current === false) {
+                this.#handlePointerOpen(e);
+            }
+            else {
+                this.root.handleClose();
+            }
         }
     }
     props = $derived.by(() => ({
@@ -908,15 +914,13 @@ class SelectScrollButtonImplState {
             ...opts,
             deps: () => this.mounted,
         });
-        watch(() => this.mounted, () => {
+        watch([() => this.mounted], () => {
             if (!this.mounted) {
                 this.isUserScrolling = false;
                 return;
             }
             if (this.isUserScrolling)
                 return;
-            const activeItem = this.root.highlightedNode;
-            activeItem?.scrollIntoView({ block: "nearest" });
         });
         $effect(() => {
             if (this.mounted)
@@ -973,24 +977,30 @@ class SelectScrollDownButtonState {
     content;
     root;
     canScrollDown = $state(false);
+    scrollIntoViewTimer = null;
     constructor(state) {
         this.state = state;
         this.content = state.content;
         this.root = state.root;
         this.state.onAutoScroll = this.handleAutoScroll;
-        watch([
-            () => this.content.viewportNode,
-            () => this.content.isPositioned,
-            () => this.root.opts.open.current,
-        ], () => {
-            if (!this.content.viewportNode ||
-                !this.content.isPositioned ||
-                !this.root.opts.open.current) {
+        watch([() => this.content.viewportNode, () => this.content.isPositioned], () => {
+            if (!this.content.viewportNode || !this.content.isPositioned) {
                 return;
             }
             this.handleScroll(true);
             return on(this.content.viewportNode, "scroll", () => this.handleScroll());
         });
+        watch(() => this.state.mounted, () => {
+            if (!this.state.mounted)
+                return;
+            if (this.scrollIntoViewTimer) {
+                clearTimeout(this.scrollIntoViewTimer);
+            }
+            this.scrollIntoViewTimer = afterSleep(5, () => {
+                const activeItem = this.root.highlightedNode;
+                activeItem?.scrollIntoView({ block: "nearest" });
+            });
+        });
     }
     /**
      * @param manual - if true, it means the function was invoked manually outside of an event

package/package.json

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