bits-ui 1.0.0-next.88 → 1.0.0-next.89

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

@@ -16,6 +16,7 @@
 		ref = $bindable(null),
 		loop = true,
 		onInteractOutside = noop,
+		onCloseAutoFocus = noop,
 		preventScroll = true,
 		// we need to explicitly pass this prop to the PopperLayer to override
 		// the default menu behavior of handling outside interactions on the trigger
@@ -31,6 +32,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -16,6 +16,7 @@
 		ref = $bindable(null),
 		loop = true,
 		onInteractOutside = noop,
+		onCloseAutoFocus = noop,
 		preventScroll = true,
 		// we need to explicitly pass this prop to the PopperLayer to override
 		// the default menu behavior of handling outside interactions on the trigger
@@ -31,6 +32,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -17,6 +17,7 @@
 		loop = true,
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
+		onCloseAutoFocus = noop,
 		forceMount = false,
 		...restProps
 	}: DropdownMenuContentStaticProps = $props();
@@ -28,6 +29,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -17,6 +17,7 @@
 		loop = true,
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
+		onCloseAutoFocus = noop,
 		forceMount = false,
 		...restProps
 	}: DropdownMenuContentProps = $props();
@@ -28,6 +29,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -15,7 +15,6 @@ declare class LinkPreviewRootState {
     contentNode: HTMLElement | null;
     contentMounted: boolean;
     triggerNode: HTMLElement | null;
-    isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
     isOpening: boolean;
     constructor(opts: LinkPreviewRootStateProps);
     clearTimeout(): void;

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

@@ -1,4 +1,4 @@
-import { afterSleep, box, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { afterSleep, onDestroyEffect, useRefById } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
@@ -16,7 +16,6 @@ class LinkPreviewRootState {
     contentNode = $state(null);
     contentMounted = $state(false);
     triggerNode = $state(null);
-    isPointerInTransit = box(false);
     isOpening = false;
     constructor(opts) {
         this.opts = opts;
@@ -152,14 +151,13 @@ class LinkPreviewContentState {
             },
             deps: () => this.root.opts.open.current,
         });
-        watch(() => this.root.opts.open.current, (isOpen) => {
-            if (!isOpen)
-                return;
-            const { isPointerInTransit, onPointerExit } = useGraceArea(() => this.root.triggerNode, () => this.opts.ref.current);
-            this.root.isPointerInTransit = isPointerInTransit;
-            onPointerExit(() => {
+        useGraceArea({
+            triggerNode: () => this.root.triggerNode,
+            contentNode: () => this.opts.ref.current,
+            enabled: () => this.root.opts.open.current,
+            onPointerExit: () => {
                 this.root.handleClose();
-            });
+            },
         });
         onDestroyEffect(() => {
             this.root.clearTimeout();

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

@@ -17,6 +17,7 @@
 		loop = true,
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
+		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		forceMount = false,
 		...restProps
 	}: MenuContentStaticProps = $props();
@@ -28,6 +29,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocusProp),
 	});
 
 	const mergedProps = $derived(

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

@@ -17,6 +17,7 @@
 		loop = true,
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
+		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		forceMount = false,
 		...restProps
 	}: MenuContentProps = $props();
@@ -28,6 +29,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocusProp),
 	});
 
 	const mergedProps = $derived(

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

@@ -35,6 +35,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onCloseAutoFocus: box.with(() => handleCloseAutoFocus),
+		isSub: true,
 	});
 
 	function onkeydown(e: KeyboardEvent) {
@@ -106,7 +108,6 @@
 		{...mergedProps}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
-		onCloseAutoFocus={handleCloseAutoFocus}
 		onOpenAutoFocus={handleOpenAutoFocus}
 		enabled={subContentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}

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

@@ -36,6 +36,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		isSub: true,
+		onCloseAutoFocus: box.with(() => handleCloseAutoFocus),
 	});
 
 	function onkeydown(e: KeyboardEvent) {
@@ -108,7 +110,6 @@
 		{...mergedProps}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
-		onCloseAutoFocus={handleCloseAutoFocus}
 		onOpenAutoFocus={handleOpenAutoFocus}
 		enabled={subContentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}

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

@@ -1,5 +1,3 @@
-import { IsFocusWithin } from "runed";
-import { type GraceIntent } from "./utils.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
 import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
@@ -19,6 +17,7 @@ declare class MenuRootState {
     readonly opts: MenuRootStateProps;
     isUsingKeyboard: IsUsingKeyboard;
     ignoreCloseAutoFocus: boolean;
+    isPointerInTransit: boolean;
     constructor(opts: MenuRootStateProps);
     getAttr(name: string): string;
 }
@@ -39,26 +38,26 @@ declare class MenuMenuState {
 }
 type MenuContentStateProps = WithRefProps & ReadableBoxedValues<{
     loop: boolean;
-}>;
+    onCloseAutoFocus: (event: Event) => void;
+}> & {
+    isSub?: boolean;
+};
 declare class MenuContentState {
     #private;
     readonly opts: MenuContentStateProps;
     readonly parentMenu: MenuMenuState;
     search: string;
-    pointerGraceTimer: number;
     rovingFocusGroup: ReturnType<typeof useRovingFocus>;
     mounted: boolean;
-    isFocusWithin: IsFocusWithin;
     constructor(opts: MenuContentStateProps, parentMenu: MenuMenuState);
-    onPointerGraceIntentChange(intent: GraceIntent | null): void;
+    onCloseAutoFocus: (e: Event) => void;
     handleTabKeyDown(e: BitsKeyboardEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     onblur(e: BitsFocusEvent): void;
     onfocus(_: BitsFocusEvent): void;
-    onpointermove(e: BitsPointerEvent): void;
-    onItemEnter(e: BitsPointerEvent): boolean;
+    onItemEnter(): boolean;
     onItemLeave(e: BitsPointerEvent): void;
-    onTriggerLeave(e: BitsPointerEvent): boolean;
+    onTriggerLeave(): boolean;
     onOpenAutoFocus: (e: Event) => void;
     handleInteractOutside(e: PointerEvent): void;
     snippetProps: {
@@ -74,8 +73,8 @@ declare class MenuContentState {
         readonly "data-state": "open" | "closed";
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onblur: (e: BitsFocusEvent) => void;
-        readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onfocus: (_: BitsFocusEvent) => void;
+        readonly onCloseAutoFocus: (e: Event) => void;
         readonly dir: Direction;
         readonly style: {
             readonly pointerEvents: "auto";

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

@@ -1,5 +1,5 @@
 import { afterTick, box, mergeProps, onDestroyEffect, useRefById } from "svelte-toolbelt";
-import { Context, IsFocusWithin, watch } from "runed";
+import { Context, watch } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
@@ -8,10 +8,11 @@ import { isElement, isElementOrSVGElement, isHTMLElement } from "../../internal/
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
-import { isPointerInGraceArea, makeHullFromElements } from "../../internal/polygon.js";
 import { IsUsingKeyboard } from "../../index.js";
+import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { getTabbableFrom } from "../../internal/tabbable.js";
 import { FocusScopeContext } from "../utilities/focus-scope/use-focus-scope.svelte.js";
+import { isTabbable } from "tabbable";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 const MenuRootContext = new Context("Menu.Root");
 const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
@@ -26,6 +27,7 @@ class MenuRootState {
     opts;
     isUsingKeyboard = new IsUsingKeyboard();
     ignoreCloseAutoFocus = $state(false);
+    isPointerInTransit = $state(false);
     constructor(opts) {
         this.opts = opts;
     }
@@ -45,8 +47,8 @@ class MenuMenuState {
         this.root = root;
         this.parentMenu = parentMenu;
         if (parentMenu) {
-            watch(() => parentMenu.opts.open, (isOpen) => {
-                if (isOpen)
+            watch(() => parentMenu.opts.open.current, () => {
+                if (parentMenu.opts.open.current)
                     return;
                 this.opts.open.current = false;
             });
@@ -66,23 +68,18 @@ class MenuContentState {
     opts;
     parentMenu;
     search = $state("");
-    #timer = $state(0);
-    pointerGraceTimer = $state(0);
-    #pointerGraceIntent = $state(null);
-    #pointerDir = $state("right");
-    #lastPointerX = $state(0);
+    #timer = 0;
     #handleTypeaheadSearch;
     rovingFocusGroup;
     mounted = $state(false);
-    isFocusWithin = new IsFocusWithin(() => this.parentMenu.contentNode ?? undefined);
+    #isSub;
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
-        this.parentMenu = parentMenu;
-        this.parentMenu.contentId = opts.id;
+        parentMenu.contentId = opts.id;
+        this.#isSub = opts.isSub ?? false;
         this.onkeydown = this.onkeydown.bind(this);
         this.onblur = this.onblur.bind(this);
-        this.onpointermove = this.onpointermove.bind(this);
         this.onfocus = this.onfocus.bind(this);
         this.handleInteractOutside = this.handleInteractOutside.bind(this);
         useRefById({
@@ -94,8 +91,17 @@ class MenuContentState {
                 }
             },
         });
-        onDestroyEffect(() => {
-            window.clearTimeout(this.#timer);
+        useGraceArea({
+            contentNode: () => this.parentMenu.contentNode,
+            triggerNode: () => this.parentMenu.triggerNode,
+            enabled: () => this.parentMenu.opts.open.current &&
+                Boolean(this.parentMenu.triggerNode?.hasAttribute(this.parentMenu.root.getAttr("sub-trigger"))),
+            onPointerExit: () => {
+                this.parentMenu.opts.open.current = false;
+            },
+            setIsPointerInTransit: (value) => {
+                this.parentMenu.root.isPointerInTransit = value;
+            },
         });
         this.#handleTypeaheadSearch = useDOMTypeahead().handleTypeaheadSearch;
         this.rovingFocusGroup = useRovingFocus({
@@ -116,6 +122,11 @@ class MenuContentState {
             };
             return MenuOpenEvent.listen(contentNode, handler);
         });
+        $effect(() => {
+            if (!this.parentMenu.opts.open.current) {
+                window.clearTimeout(this.#timer);
+            }
+        });
     }
     #getCandidateNodes() {
         const node = this.parentMenu.contentNode;
@@ -124,13 +135,17 @@ class MenuContentState {
         const candidates = Array.from(node.querySelectorAll(`[${this.parentMenu.root.getAttr("item")}]:not([data-disabled])`));
         return candidates;
     }
-    #isPointerMovingToSubmenu(e) {
-        const isMovingTowards = this.#pointerDir === this.#pointerGraceIntent?.side;
-        return isMovingTowards && isPointerInGraceArea(e, this.#pointerGraceIntent?.area);
-    }
-    onPointerGraceIntentChange(intent) {
-        this.#pointerGraceIntent = intent;
+    #isPointerMovingToSubmenu() {
+        return this.parentMenu.root.isPointerInTransit;
     }
+    onCloseAutoFocus = (e) => {
+        this.opts.onCloseAutoFocus.current(e);
+        if (e.defaultPrevented || this.#isSub)
+            return;
+        if (this.parentMenu.triggerNode && isTabbable(this.parentMenu.triggerNode)) {
+            this.parentMenu.triggerNode.focus();
+        }
+    };
     handleTabKeyDown(e) {
         /**
          * We locate the root `menu`'s trigger by going up the tree until
@@ -220,38 +235,20 @@ class MenuContentState {
             return;
         afterTick(() => this.rovingFocusGroup.focusFirstCandidate());
     }
-    onpointermove(e) {
-        if (!isMouseEvent(e))
-            return;
-        const target = e.target;
-        if (!isElement(target))
-            return;
-        const pointerXHasChanged = this.#lastPointerX !== e.clientX;
-        const currentTarget = e.currentTarget;
-        if (!isElement(currentTarget))
-            return;
-        // We don't use `event.movementX` for this check because Safari will
-        // always return `0` on a pointer event.
-        if (currentTarget.contains(target) && pointerXHasChanged) {
-            const newDir = e.clientX > this.#lastPointerX ? "right" : "left";
-            this.#pointerDir = newDir;
-            this.#lastPointerX = e.clientX;
-        }
-    }
-    onItemEnter(e) {
-        if (this.#isPointerMovingToSubmenu(e))
-            return true;
-        return false;
+    onItemEnter() {
+        return this.#isPointerMovingToSubmenu();
     }
     onItemLeave(e) {
-        if (this.#isPointerMovingToSubmenu(e))
+        if (e.currentTarget.hasAttribute(this.parentMenu.root.getAttr("sub-trigger")))
+            return;
+        if (this.#isPointerMovingToSubmenu() || this.parentMenu.root.isUsingKeyboard.current)
             return;
         const contentNode = this.parentMenu.contentNode;
         contentNode?.focus();
         this.rovingFocusGroup.setCurrentTabStopId("");
     }
-    onTriggerLeave(e) {
-        if (this.#isPointerMovingToSubmenu(e))
+    onTriggerLeave() {
+        if (this.#isPointerMovingToSubmenu())
             return true;
         return false;
     }
@@ -283,8 +280,8 @@ class MenuContentState {
         "data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
         onkeydown: this.onkeydown,
         onblur: this.onblur,
-        onpointermove: this.onpointermove,
         onfocus: this.onfocus,
+        onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
         dir: this.parentMenu.root.opts.dir.current,
         style: {
             pointerEvents: "auto",
@@ -316,7 +313,7 @@ class MenuItemSharedState {
             this.content.onItemLeave(e);
         }
         else {
-            const defaultPrevented = this.content.onItemEnter(e);
+            const defaultPrevented = this.content.onItemEnter();
             if (defaultPrevented)
                 return;
             const item = e.currentTarget;
@@ -326,13 +323,11 @@ class MenuItemSharedState {
         }
     }
     onpointerleave(e) {
-        afterTick(() => {
-            if (e.defaultPrevented)
-                return;
-            if (!isMouseEvent(e))
-                return;
-            this.content.onItemLeave(e);
-        });
+        if (e.defaultPrevented)
+            return;
+        if (!isMouseEvent(e))
+            return;
+        this.content.onItemLeave(e);
     }
     onfocus(e) {
         afterTick(() => {
@@ -366,7 +361,7 @@ class MenuItemSharedState {
 class MenuItemState {
     opts;
     item;
-    #isPointerDown = $state(false);
+    #isPointerDown = false;
     root;
     constructor(opts, item) {
         this.opts = opts;
@@ -450,7 +445,7 @@ class MenuSubTriggerState {
             this.#clearOpenTimer();
         });
         useRefById({
-            ...this.item.opts,
+            ...item.opts,
             onRefChange: (node) => {
                 this.submenu.triggerNode = node;
             },
@@ -465,13 +460,9 @@ class MenuSubTriggerState {
     onpointermove(e) {
         if (!isMouseEvent(e))
             return;
-        const defaultPrevented = this.content.onItemEnter(e);
-        if (defaultPrevented)
-            return;
         if (!this.item.opts.disabled.current &&
             !this.submenu.opts.open.current &&
             !this.#openTimer) {
-            this.content.onPointerGraceIntentChange(null);
             this.#openTimer = window.setTimeout(() => {
                 this.submenu.onOpen();
                 this.#clearOpenTimer();
@@ -482,25 +473,6 @@ class MenuSubTriggerState {
         if (!isMouseEvent(e))
             return;
         this.#clearOpenTimer();
-        const contentNode = this.submenu.contentNode;
-        const subTriggerNode = this.item.opts.ref.current;
-        if (contentNode && subTriggerNode) {
-            const polygon = makeHullFromElements([subTriggerNode, contentNode]);
-            const side = contentNode?.dataset.side;
-            this.content.onPointerGraceIntentChange({
-                area: polygon,
-                side,
-            });
-            window.clearTimeout(this.content.pointerGraceTimer);
-            this.content.pointerGraceTimer = window.setTimeout(() => this.content.onPointerGraceIntentChange(null), 300);
-        }
-        else {
-            const defaultPrevented = this.content.onTriggerLeave(e);
-            if (defaultPrevented)
-                return;
-            // There's 100ms where the user may leave an item before the submenu was opened.
-            this.content.onPointerGraceIntentChange(null);
-        }
     }
     onkeydown(e) {
         const isTypingAhead = this.content.search !== "";
@@ -753,7 +725,7 @@ class ContextMenuTriggerState {
     virtualElement = box({
         getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...this.#point }),
     });
-    #longPressTimer = $state(null);
+    #longPressTimer = null;
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;

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

@@ -1,6 +1,5 @@
 import type { Direction } from "../../shared/index.js";
 export type CheckedState = boolean | "indeterminate";
-export declare const ITEM_NAME = "MenuItem";
 export declare const SELECTION_KEYS: string[];
 export declare const FIRST_KEYS: string[];
 export declare const LAST_KEYS: string[];
@@ -9,14 +8,4 @@ export declare const SUB_OPEN_KEYS: Record<Direction, string[]>;
 export declare const SUB_CLOSE_KEYS: Record<Direction, string[]>;
 export declare function isIndeterminate(checked?: CheckedState): checked is "indeterminate";
 export declare function getCheckedState(checked: CheckedState): "checked" | "unchecked" | "indeterminate";
-export interface Point {
-    x: number;
-    y: number;
-}
-export type Polygon = Point[];
-export type Side = "left" | "right";
-export interface GraceIntent {
-    area: Polygon;
-    side: Side;
-}
 export declare function isMouseEvent(event: PointerEvent): boolean;

package/dist/bits/menu/utils.js

@@ -1,5 +1,4 @@
 import { kbd } from "../../internal/kbd.js";
-export const ITEM_NAME = "MenuItem";
 export const SELECTION_KEYS = [kbd.ENTER, kbd.SPACE];
 export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
 export const LAST_KEYS = [kbd.ARROW_UP, kbd.PAGE_DOWN, kbd.END];

package/dist/bits/tooltip/tooltip.svelte.js

@@ -204,14 +204,16 @@ class TooltipContentState {
             },
             deps: () => this.root.opts.open.current,
         });
-        $effect(() => {
-            if (!this.root.opts.open.current || this.root.disableHoverableContent)
-                return;
-            const { isPointerInTransit, onPointerExit } = useGraceArea(() => this.root.triggerNode, () => this.root.contentNode);
-            this.root.provider.isPointerInTransit = isPointerInTransit;
-            onPointerExit(() => {
+        useGraceArea({
+            triggerNode: () => this.root.triggerNode,
+            contentNode: () => this.root.contentNode,
+            enabled: () => this.root.opts.open.current && this.root.disableHoverableContent,
+            onPointerExit: () => {
                 this.root.handleClose();
-            });
+            },
+            setIsPointerInTransit: (value) => {
+                this.root.provider.isPointerInTransit.current = value;
+            },
         });
         onMountEffect(() => executeCallbacks(on(window, "scroll", (e) => {
             const target = e.target;

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.js

@@ -6,6 +6,7 @@ import { focus, focusFirst, getTabbableCandidates, getTabbableEdges } from "../.
 import { CustomEventDispatcher } from "../../../internal/events.js";
 import { isHTMLElement } from "../../../internal/is.js";
 import { kbd } from "../../../internal/kbd.js";
+import { isTabbable } from "tabbable";
 const AutoFocusOnMountEvent = new CustomEventDispatcher("focusScope.autoFocusOnMount", {
     bubbles: false,
     cancelable: true,
@@ -140,7 +141,9 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
         const shouldIgnore = ctx.ignoreCloseAutoFocus;
         afterSleep(0, () => {
             if (!destroyEvent.defaultPrevented && prevFocusedElement && !shouldIgnore) {
-                focus(prevFocusedElement ?? document.body, { select: true });
+                focus(isTabbable(prevFocusedElement) ? prevFocusedElement : document.body, {
+                    select: true,
+                });
             }
             focusScopeStack.remove(focusScope);
         });

package/dist/internal/box-auto-reset.svelte.d.ts

@@ -5,4 +5,4 @@ import { type WritableBox } from "svelte-toolbelt";
  * @param defaultValue The value which will be set.
  * @param afterMs      A zero-or-greater delay in milliseconds.
  */
-export declare function boxAutoReset<T>(defaultValue: T, afterMs?: number): WritableBox<T>;
+export declare function boxAutoReset<T>(defaultValue: T, afterMs?: number, onChange?: (value: T) => void): WritableBox<T>;

package/dist/internal/box-auto-reset.svelte.js

@@ -1,16 +1,18 @@
 import { box } from "svelte-toolbelt";
+import { noop } from "./noop.js";
 /**
  * Creates a box which will be reset to the default value after some time.
  *
  * @param defaultValue The value which will be set.
  * @param afterMs      A zero-or-greater delay in milliseconds.
  */
-export function boxAutoReset(defaultValue, afterMs = 10000) {
+export function boxAutoReset(defaultValue, afterMs = 10000, onChange = noop) {
     let timeout = null;
     let value = $state(defaultValue);
     function resetAfter() {
-        return setTimeout(() => {
+        return window.setTimeout(() => {
             value = defaultValue;
+            onChange(defaultValue);
         }, afterMs);
     }
     $effect(() => {
@@ -21,6 +23,7 @@ export function boxAutoReset(defaultValue, afterMs = 10000) {
     });
     return box.with(() => value, (v) => {
         value = v;
+        onChange(v);
         if (timeout)
             clearTimeout(timeout);
         timeout = resetAfter();

package/dist/internal/dev/visualize-grace-area.d.ts

@@ -0,0 +1,5 @@
+import type { Polygon } from "../polygon.js";
+/**
+ * Debugging utility to visualize the grace area of a floating layer component.
+ */
+export declare function visualizeGraceArea(graceArea: Polygon): void;

package/dist/internal/dev/visualize-grace-area.js

@@ -0,0 +1,28 @@
+let graceAreaElement = null;
+let svgContainer = null;
+/**
+ * Debugging utility to visualize the grace area of a floating layer component.
+ */
+export function visualizeGraceArea(graceArea) {
+    if (graceAreaElement) {
+        graceAreaElement.remove();
+    }
+    if (!svgContainer) {
+        svgContainer = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svgContainer.style.position = "absolute";
+        svgContainer.style.top = "0";
+        svgContainer.style.left = "0";
+        svgContainer.style.width = "100%";
+        svgContainer.style.height = "100%";
+        svgContainer.style.pointerEvents = "none";
+        document.body.appendChild(svgContainer);
+    }
+    graceAreaElement = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    const pointsString = graceArea.map((p) => `${p.x},${p.y}`).join(" ");
+    graceAreaElement.setAttribute("points", pointsString);
+    graceAreaElement.setAttribute("fill", "rgba(255, 0, 0, 0.3)");
+    graceAreaElement.setAttribute("stroke", "red");
+    graceAreaElement.setAttribute("stroke-width", "1");
+    graceAreaElement.style.pointerEvents = "none";
+    svgContainer.appendChild(graceAreaElement);
+}

package/dist/internal/dom.d.ts

@@ -7,3 +7,4 @@ export declare function getFirstNonCommentChild(element: HTMLElement | null): Ch
  * into the DOM but visually appear inside the content.
  */
 export declare function isClickTrulyOutside(event: PointerEvent, contentNode: HTMLElement): boolean;
+export declare function getTarget(event: Event): EventTarget | null | undefined;

package/dist/internal/dom.js

@@ -28,3 +28,11 @@ export function isClickTrulyOutside(event, contentNode) {
     const rect = contentNode.getBoundingClientRect();
     return (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom);
 }
+export function getTarget(event) {
+    if ("composedPath" in event) {
+        return event.composedPath()[0];
+    }
+    // TS thinks `event` is of type never as it assumes all browsers support
+    // `composedPath()`, but browsers without shadow DOM don't.
+    return event.target;
+}

package/dist/internal/use-grace-area.svelte.d.ts

@@ -1,5 +1,12 @@
 import { type Getter } from "svelte-toolbelt";
-export declare function useGraceArea(getTriggerNode: Getter<HTMLElement | null>, getContentNode: Getter<HTMLElement | null>): {
+interface UseGraceAreaOpts {
+    enabled: Getter<boolean>;
+    triggerNode: Getter<HTMLElement | null>;
+    contentNode: Getter<HTMLElement | null>;
+    onPointerExit: () => void;
+    setIsPointerInTransit?: (value: boolean) => void;
+}
+export declare function useGraceArea(opts: UseGraceAreaOpts): {
     isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
-    onPointerExit: import("./create-event-hook.svelte.js").EventHookOn<void>;
 };
+export {};

package/dist/internal/use-grace-area.svelte.js

@@ -2,14 +2,15 @@ import { executeCallbacks } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { watch } from "runed";
 import { boxAutoReset } from "./box-auto-reset.svelte.js";
-import { createEventHook } from "./create-event-hook.svelte.js";
 import { isElement, isHTMLElement } from "./is.js";
-export function useGraceArea(getTriggerNode, getContentNode) {
-    const isPointerInTransit = boxAutoReset(false, 300);
-    const triggerNode = $derived(getTriggerNode());
-    const contentNode = $derived(getContentNode());
+export function useGraceArea(opts) {
+    const enabled = $derived(opts.enabled());
+    const isPointerInTransit = boxAutoReset(false, 300, (value) => {
+        if (enabled) {
+            opts.setIsPointerInTransit?.(value);
+        }
+    });
     let pointerGraceArea = $state(null);
-    const pointerExit = createEventHook();
     function handleRemoveGraceArea() {
         pointerGraceArea = null;
         isPointerInTransit.current = false;
@@ -26,8 +27,8 @@ export function useGraceArea(getTriggerNode, getContentNode) {
         pointerGraceArea = graceArea;
         isPointerInTransit.current = true;
     }
-    watch([() => triggerNode, () => contentNode], ([triggerNode, contentNode]) => {
-        if (!triggerNode || !contentNode)
+    watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
+        if (!triggerNode || !contentNode || !enabled)
             return;
         const handleTriggerLeave = (e) => {
             handleCreateGraceArea(e, contentNode);
@@ -37,7 +38,7 @@ export function useGraceArea(getTriggerNode, getContentNode) {
         };
         return executeCallbacks(on(triggerNode, "pointerleave", handleTriggerLeave), on(contentNode, "pointerleave", handleContentLeave));
     });
-    watch(() => pointerGraceArea, (pointerGraceArea) => {
+    watch(() => pointerGraceArea, () => {
         const handleTrackPointerGrace = (e) => {
             if (!pointerGraceArea)
                 return;
@@ -45,21 +46,20 @@ export function useGraceArea(getTriggerNode, getContentNode) {
             if (!isElement(target))
                 return;
             const pointerPosition = { x: e.clientX, y: e.clientY };
-            const hasEnteredTarget = triggerNode?.contains(target) || contentNode?.contains(target);
+            const hasEnteredTarget = opts.triggerNode()?.contains(target) || opts.contentNode()?.contains(target);
             const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
             if (hasEnteredTarget) {
                 handleRemoveGraceArea();
             }
             else if (isPointerOutsideGraceArea) {
                 handleRemoveGraceArea();
-                pointerExit.trigger();
+                opts.onPointerExit();
             }
         };
         return on(document, "pointermove", handleTrackPointerGrace);
     });
     return {
         isPointerInTransit,
-        onPointerExit: pointerExit.on,
     };
 }
 function getExitSideFromRect(point, rect) {
@@ -81,22 +81,35 @@ function getExitSideFromRect(point, rect) {
     }
 }
 function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
-    const paddedExitPoints = [];
+    // we extend the tip of the exit point to make it easier to navigate without
+    // a minor jitter triggering a pointer exit
+    const tipPadding = padding * 1.5;
     switch (exitSide) {
         case "top":
-            paddedExitPoints.push({ x: exitPoint.x - padding, y: exitPoint.y + padding }, { x: exitPoint.x + padding, y: exitPoint.y + padding });
-            break;
+            return [
+                { x: exitPoint.x - padding, y: exitPoint.y + padding },
+                { x: exitPoint.x, y: exitPoint.y - tipPadding },
+                { x: exitPoint.x + padding, y: exitPoint.y + padding },
+            ];
         case "bottom":
-            paddedExitPoints.push({ x: exitPoint.x - padding, y: exitPoint.y - padding }, { x: exitPoint.x + padding, y: exitPoint.y - padding });
-            break;
+            return [
+                { x: exitPoint.x - padding, y: exitPoint.y - padding },
+                { x: exitPoint.x, y: exitPoint.y + tipPadding },
+                { x: exitPoint.x + padding, y: exitPoint.y - padding },
+            ];
         case "left":
-            paddedExitPoints.push({ x: exitPoint.x + padding, y: exitPoint.y - padding }, { x: exitPoint.x + padding, y: exitPoint.y + padding });
-            break;
+            return [
+                { x: exitPoint.x + padding, y: exitPoint.y - padding },
+                { x: exitPoint.x - tipPadding, y: exitPoint.y },
+                { x: exitPoint.x + padding, y: exitPoint.y + padding },
+            ];
         case "right":
-            paddedExitPoints.push({ x: exitPoint.x - padding, y: exitPoint.y - padding }, { x: exitPoint.x - padding, y: exitPoint.y + padding });
-            break;
+            return [
+                { x: exitPoint.x - padding, y: exitPoint.y - padding },
+                { x: exitPoint.x + tipPadding, y: exitPoint.y },
+                { x: exitPoint.x - padding, y: exitPoint.y + padding },
+            ];
     }
-    return paddedExitPoints;
 }
 function getPointsFromRect(rect) {
     const { top, right, bottom, left } = rect;

package/package.json

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