bits-ui 1.0.0-next.0 → 1.0.0-next.2

package/dist/bits/link-preview/link-preview.svelte.js

@@ -9,6 +9,7 @@ import { getTabbableCandidates } from "../../internal/focus.js";
 import { createContext } from "../../internal/createContext.js";
 import { useGraceArea } from "../../internal/useGraceArea.svelte.js";
 import { onDestroyEffect } from "../../internal/onDestroyEffect.svelte.js";
+import { afterSleep } from "../../internal/afterSleep.js";
 const CONTENT_ATTR = "data-link-preview-content";
 const TRIGGER_ATTR = "data-link-preview-trigger";
 class LinkPreviewRootState {
@@ -35,7 +36,7 @@ class LinkPreviewRootState {
             const handlePointerUp = () => {
                 this.containsSelection = false;
                 this.isPointerDownOnContent = false;
-                sleep(1).then(() => {
+                afterSleep(1, () => {
                     const isSelection = document.getSelection()?.toString() !== "";
                     if (isSelection) {
                         this.hasSelection = true;

package/dist/bits/listbox/listbox.svelte.js

@@ -243,6 +243,7 @@ class ListboxInputState {
         });
     }
     #onkeydown = async (e) => {
+        this.root.isUsingKeyboard = true;
         if (e.key === kbd.ESCAPE)
             return;
         const open = this.root.open.current;

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

@@ -118,6 +118,7 @@
 	}}
 	preventScroll={false}
 	{loop}
+	trapFocus={false}
 >
 	{#snippet popper({ props })}
 		{@const finalProps = mergeProps(props, mergedProps, {

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

@@ -86,7 +86,9 @@ declare class MenuContentState {
         open: boolean;
     };
     props: {
-        readonly [x: string]: string | ((e: KeyboardEvent) => void) | ((e: PointerEvent) => void);
+        readonly [x: string]: string | ((e: KeyboardEvent) => void) | ((e: PointerEvent) => void) | {
+            readonly pointerEvents: "auto";
+        };
         readonly id: string;
         readonly role: "menu";
         readonly "aria-orientation": "horizontal" | "vertical";
@@ -95,6 +97,10 @@ declare class MenuContentState {
         readonly onblur: (e: FocusEvent) => void;
         readonly onpointermove: (e: PointerEvent) => void;
         readonly onfocus: () => void;
+        readonly dir: Direction;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
     };
     createItem(props: MenuItemSharedStateProps & MenuItemStateProps): MenuItemState;
     createCheckboxItem(props: MenuItemSharedStateProps & MenuItemStateProps & MenuCheckboxItemStateProps): MenuCheckboxItemState;

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

@@ -310,6 +310,10 @@ class MenuContentState {
         onblur: this.#onblur,
         onpointermove: this.#onpointermove,
         onfocus: this.#onfocus,
+        dir: this.parentMenu.root.dir.current,
+        style: {
+            pointerEvents: "auto",
+        },
     }));
     createItem(props) {
         const item = new MenuItemSharedState(props, this);
@@ -420,7 +424,7 @@ class MenuItemState {
                 return;
             e.currentTarget.click();
             /**
-             * We prevent default browser behaviour for selection keys as they should trigger
+             * We prevent default browser behavior for selection keys as they should trigger
              * a selection only:
              * - prevents space from scrolling the page.
              * - if keydown causes focus to move, prevents keydown from firing on the new target.
@@ -467,9 +471,9 @@ class MenuItemState {
 }
 class MenuSubTriggerState {
     #item;
-    // The menu this subtrigger item belongs within
+    // The menu this sub-trigger item belongs within
     #content;
-    // the menu this subtrigger item opens
+    // the menu this sub-trigger item opens
     #submenu;
     #openTimer = $state(null);
     constructor(item, content, submenu) {

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

@@ -18,6 +18,7 @@ import { clamp } from "../../internal/clamp.js";
 import { noop } from "../../internal/callbacks.js";
 import { addEventListener } from "../../internal/events.js";
 import { sleep } from "../../internal/sleep.js";
+import { afterSleep } from "../../internal/afterSleep.js";
 export const OPEN_KEYS = [kbd.SPACE, kbd.ENTER, kbd.ARROW_UP, kbd.ARROW_DOWN];
 export const SELECTION_KEYS = [" ", kbd.ENTER];
 export const CONTENT_MARGIN = 10;
@@ -78,11 +79,11 @@ export class SelectRootState {
     };
     focusTriggerNode = (preventScroll = true) => {
         const node = this.triggerNode;
-        if (node) {
-            sleep(1).then(() => {
-                node.focus({ preventScroll });
-            });
-        }
+        if (!node)
+            return;
+        afterSleep(1, () => {
+            node.focus({ preventScroll });
+        });
     };
     onNativeOptionAdd = (option) => {
         this.#nativeOptionsSet.set(option.current.value, option);
@@ -94,15 +95,13 @@ export class SelectRootState {
         const node = this.contentFragment;
         if (!node)
             return [];
-        const candidates = Array.from(node.querySelectorAll(`[${ITEM_ATTR}]:not([data-disabled])`));
-        return candidates;
+        return Array.from(node.querySelectorAll(`[${ITEM_ATTR}]:not([data-disabled])`));
     };
     getCandidateNodes = () => {
         const node = this.contentNode;
         if (!node)
             return [];
-        const candidates = Array.from(node.querySelectorAll(`[${ITEM_ATTR}]:not([data-disabled])`));
-        return candidates;
+        return Array.from(node.querySelectorAll(`[${ITEM_ATTR}]:not([data-disabled])`));
     };
     createTrigger(props) {
         return new SelectTriggerState(props, this);

package/dist/bits/utilities/popper-layer/popper-layer.svelte

@@ -74,7 +74,9 @@
 			{customAnchor}
 		>
 			{#snippet content({ props: floatingProps })}
-				<ScrollLock {preventScroll} />
+				{#if preventScroll}
+					<ScrollLock {preventScroll} />
+				{/if}
 				<FocusScope
 					{id}
 					{onOpenAutoFocus}

package/dist/bits/utilities/scroll-lock/scroll-lock.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import type { ScrollLockProps } from "./index.js";
 	import { useBodyScrollLock } from "../../../internal/useBodyScrollLock.svelte.js";
 
 	let { preventScroll = true }: ScrollLockProps = $props();
 
-	$effect(() => {
-		if (preventScroll) {
-			untrack(() => useBodyScrollLock(preventScroll));
-		}
-	});
+	useBodyScrollLock(preventScroll);
 </script>

package/package.json

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