bits-ui 1.6.0 → 1.6.1

package/dist/bits/command/command.svelte.js

@@ -5,6 +5,7 @@ import { kbd } from "../../internal/kbd.js";
 import { getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
 import { computeCommandScore } from "./index.js";
+import cssesc from "css.escape";
 // attributes
 const COMMAND_ROOT_ATTR = "data-command-root";
 const COMMAND_LIST_ATTR = "data-command-list";
@@ -178,7 +179,7 @@ class CommandRootState {
         }
         const sortedGroups = groups.sort((a, b) => b[1] - a[1]);
         for (const group of sortedGroups) {
-            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${encodeURIComponent(group[0])}"]`);
+            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(group[0])}"]`);
             element?.parentElement?.appendChild(element);
         }
         this.#selectFirstItem();
@@ -683,7 +684,7 @@ class CommandInputState {
     opts;
     root;
     #selectedItemId = $derived.by(() => {
-        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${encodeURIComponent(this.root.opts.value.current)}"]`);
+        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(this.root.opts.value.current)}"]`);
         if (!item)
             return;
         return item?.getAttribute("id") ?? undefined;

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

@@ -1,7 +1,6 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
-import { CustomEventDispatcher } from "../../internal/events.js";
-export declare const TooltipOpenEvent: CustomEventDispatcher<unknown>;
+import type { PointerEventHandler } from "svelte/elements";
 type TooltipProviderStateProps = ReadableBoxedValues<{
     delayDuration: number;
     disableHoverableContent: boolean;
@@ -16,8 +15,9 @@ declare class TooltipProviderState {
     isOpenDelayed: boolean;
     isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
     constructor(opts: TooltipProviderStateProps);
-    onOpen: () => void;
-    onClose: () => void;
+    onOpen: (tooltip: TooltipRootState) => void;
+    onClose: (tooltip: TooltipRootState) => void;
+    isTooltipOpen: (tooltip: TooltipRootState) => boolean;
 }
 type TooltipRootStateProps = ReadableBoxedValues<{
     delayDuration: number | undefined;
@@ -66,7 +66,7 @@ declare class TooltipTriggerState {
         disabled: boolean;
         onpointerup: () => void;
         onpointerdown: () => void;
-        onpointermove: (e: PointerEvent) => void;
+        onpointermove: PointerEventHandler<HTMLElement>;
         onpointerleave: () => void;
         onfocus: (e: FocusEvent & {
             currentTarget: HTMLElement;

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

@@ -1,22 +1,18 @@
-import { box, executeCallbacks, onMountEffect, useRefById } from "svelte-toolbelt";
+import { box, onMountEffect, useRefById } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
 import { isElement, isFocusVisible } from "../../internal/is.js";
 import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { getDataDisabled } from "../../internal/attrs.js";
-import { CustomEventDispatcher } from "../../internal/events.js";
 const TOOLTIP_CONTENT_ATTR = "data-tooltip-content";
 const TOOLTIP_TRIGGER_ATTR = "data-tooltip-trigger";
-export const TooltipOpenEvent = new CustomEventDispatcher("bits.tooltip.open", {
-    bubbles: false,
-    cancelable: false,
-});
 class TooltipProviderState {
     opts;
     isOpenDelayed = $state(true);
     isPointerInTransit = box(false);
     #timerFn;
+    #openTooltip = $state(null);
     constructor(opts) {
         this.opts = opts;
         this.#timerFn = useTimeoutFn(() => {
@@ -24,18 +20,34 @@ class TooltipProviderState {
         }, this.opts.skipDelayDuration.current, { immediate: false });
     }
     #startTimer = () => {
-        this.#timerFn.start();
+        const skipDuration = this.opts.skipDelayDuration.current;
+        if (skipDuration === 0) {
+            return;
+        }
+        else {
+            this.#timerFn.start();
+        }
     };
     #clearTimer = () => {
         this.#timerFn.stop();
     };
-    onOpen = () => {
+    onOpen = (tooltip) => {
+        if (this.#openTooltip && this.#openTooltip !== tooltip) {
+            this.#openTooltip.handleClose();
+        }
         this.#clearTimer();
         this.isOpenDelayed = false;
+        this.#openTooltip = tooltip;
     };
-    onClose = () => {
+    onClose = (tooltip) => {
+        if (this.#openTooltip === tooltip) {
+            this.#openTooltip = null;
+        }
         this.#startTimer();
     };
+    isTooltipOpen = (tooltip) => {
+        return this.#openTooltip === tooltip;
+    };
 }
 class TooltipRootState {
     opts;
@@ -73,14 +85,11 @@ class TooltipRootState {
             }, this.delayDuration, { immediate: false });
         });
         watch(() => this.opts.open.current, (isOpen) => {
-            if (!this.provider.onClose)
-                return;
             if (isOpen) {
-                this.provider.onOpen();
-                TooltipOpenEvent.dispatch(document);
+                this.provider.onOpen(this);
             }
             else {
-                this.provider.onClose();
+                this.provider.onClose(this);
             }
         });
     }
@@ -94,7 +103,19 @@ class TooltipRootState {
         this.opts.open.current = false;
     };
     #handleDelayedOpen = () => {
-        this.#timerFn.start();
+        this.#timerFn.stop();
+        const shouldSkipDelay = !this.provider.isOpenDelayed;
+        const delayDuration = this.delayDuration ?? 0;
+        // if no delay needed (either skip delay active or delay is 0), open immediately
+        if (shouldSkipDelay || delayDuration === 0) {
+            // set wasOpenDelayed based on whether we actually had a delay
+            this.#wasOpenDelayed = delayDuration > 0 && shouldSkipDelay;
+            this.opts.open.current = true;
+        }
+        else {
+            // use timer for actual delays
+            this.#timerFn.start();
+        }
     };
     onTriggerEnter = () => {
         this.#handleDelayedOpen();
@@ -145,7 +166,9 @@ class TooltipTriggerState {
             return;
         if (e.pointerType === "touch")
             return;
-        if (this.#hasPointerMoveOpened || this.root.provider.isPointerInTransit.current)
+        if (this.#hasPointerMoveOpened)
+            return;
+        if (this.root.provider.isPointerInTransit.current)
             return;
         this.root.onTriggerEnter();
         this.#hasPointerMoveOpened = true;
@@ -209,20 +232,23 @@ class TooltipContentState {
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
             onPointerExit: () => {
-                this.root.handleClose();
+                if (this.root.provider.isTooltipOpen(this.root)) {
+                    this.root.handleClose();
+                }
             },
             setIsPointerInTransit: (value) => {
                 this.root.provider.isPointerInTransit.current = value;
             },
+            transitTimeout: this.root.provider.opts.skipDelayDuration.current,
         });
-        onMountEffect(() => executeCallbacks(on(window, "scroll", (e) => {
+        onMountEffect(() => on(window, "scroll", (e) => {
             const target = e.target;
             if (!target)
                 return;
             if (target.contains(this.root.triggerNode)) {
                 this.root.handleClose();
             }
-        }), TooltipOpenEvent.listen(window, this.root.handleClose)));
+        }));
     }
     onInteractOutside = (e) => {
         if (isElement(e.target) &&

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

@@ -5,6 +5,7 @@ interface UseGraceAreaOpts {
     contentNode: Getter<HTMLElement | null>;
     onPointerExit: () => void;
     setIsPointerInTransit?: (value: boolean) => void;
+    transitTimeout?: number;
 }
 export declare function useGraceArea(opts: UseGraceAreaOpts): {
     isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;

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

@@ -5,7 +5,7 @@ import { boxAutoReset } from "./box-auto-reset.svelte.js";
 import { isElement, isHTMLElement } from "./is.js";
 export function useGraceArea(opts) {
     const enabled = $derived(opts.enabled());
-    const isPointerInTransit = boxAutoReset(false, 300, (value) => {
+    const isPointerInTransit = boxAutoReset(false, opts.transitTimeout ?? 300, (value) => {
         if (enabled) {
             opts.setIsPointerInTransit?.(value);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -21,6 +21,7 @@
     "@sveltejs/kit": "^2.16.1",
     "@sveltejs/package": "^2.3.9",
     "@sveltejs/vite-plugin-svelte": "4.0.0",
+    "@types/css.escape": "^1.5.2",
     "@types/node": "^20.17.6",
     "@types/resize-observer-browser": "^0.1.11",
     "csstype": "^3.1.3",
@@ -41,6 +42,7 @@
     "@floating-ui/core": "^1.6.4",
     "@floating-ui/dom": "^1.6.7",
     "@internationalized/date": "^3.5.6",
+    "css.escape": "^1.5.1",
     "esm-env": "^1.1.2",
     "runed": "^0.23.2",
     "svelte-toolbelt": "^0.7.1",