bits-ui 2.11.0 → 2.11.2

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

@@ -24,7 +24,14 @@
 	});
 
 	const mergedProps = $derived(
-		mergeProps(restProps, triggerState.props, { style: { pointerEvents: "auto" } })
+		mergeProps(
+			restProps,
+			triggerState.props,
+			{ style: { pointerEvents: "auto" } },
+			{
+				style: restProps.style,
+			}
+		)
 	);
 </script>
 

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

@@ -13,6 +13,7 @@ import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
+import { getTopMostDismissableLayer } from "../utilities/dismissible-layer/use-dismissable-layer.svelte.js";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 const MenuRootContext = new Context("Menu.Root");
 const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
@@ -880,6 +881,15 @@ export class ContextMenuTriggerState {
     oncontextmenu(e) {
         if (e.defaultPrevented || this.opts.disabled.current)
             return;
+        const topMostLayer = getTopMostDismissableLayer();
+        if (topMostLayer) {
+            const topLayerRef = topMostLayer[0].opts.ref.current;
+            const topLayerRefContainsTrigger = topLayerRef?.contains(this.opts.ref.current);
+            if (!topLayerRefContainsTrigger &&
+                !topLayerRef?.hasAttribute?.("data-context-menu-content")) {
+                return;
+            }
+        }
         this.#clearLongPressTimer();
         this.#handleOpen(e);
         e.preventDefault();

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

@@ -25,7 +25,7 @@ export class TooltipProviderState {
         this.opts = opts;
         this.#timerFn = new TimeoutFn(() => {
             this.isOpenDelayed = true;
-        }, this.opts.skipDelayDuration.current, { immediate: false });
+        }, this.opts.skipDelayDuration.current);
     }
     #startTimer = () => {
         const skipDuration = this.opts.skipDelayDuration.current;
@@ -86,7 +86,7 @@ export class TooltipRootState {
         this.#timerFn = new TimeoutFn(() => {
             this.#wasOpenDelayed = true;
             this.opts.open.current = true;
-        }, this.delayDuration ?? 0, { immediate: false });
+        }, this.delayDuration ?? 0);
         new OpenChangeComplete({
             open: this.opts.open,
             ref: boxWith(() => this.contentNode),
@@ -100,7 +100,7 @@ export class TooltipRootState {
             this.#timerFn = new TimeoutFn(() => {
                 this.#wasOpenDelayed = true;
                 this.opts.open.current = true;
-            }, this.delayDuration, { immediate: false });
+            }, this.delayDuration);
         });
         watch(() => this.opts.open.current, (isOpen) => {
             if (isOpen) {
@@ -109,7 +109,7 @@ export class TooltipRootState {
             else {
                 this.provider.onClose(this);
             }
-        });
+        }, { lazy: true });
     }
     handleOpen = () => {
         this.#timerFn.stop();

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
-import type { DismissibleLayerImplProps } from "./types.js";
+import { type ReadableBox, type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
+import type { DismissibleLayerImplProps, InteractOutsideBehaviorType } from "./types.js";
 interface DismissibleLayerStateOpts extends ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> {
     ref: WritableBox<HTMLElement | null>;
 }
@@ -13,6 +13,7 @@ export declare class DismissibleLayerState {
         onblurcapture: () => void;
     };
 }
+export declare function getTopMostDismissableLayer(layersArr?: [DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>][]): [DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>] | undefined;
 export type FocusOutsideEvent = CustomEvent<{
     originalEvent: FocusEvent;
 }>;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -166,7 +166,9 @@ export class DismissibleLayerState {
         onblurcapture: this.#onblurcapture,
     };
 }
-function getTopMostLayer(layersArr) {
+export function getTopMostDismissableLayer(layersArr = [
+    ...globalThis.bitsDismissableLayers,
+]) {
     return layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
 }
 function isResponsibleLayer(node) {
@@ -177,7 +179,7 @@ function isResponsibleLayer(node) {
      * responsible for the outside interaction. Otherwise, we know that all layers defer so
      * the first layer is the responsible one.
      */
-    const topMostLayer = getTopMostLayer(layersArr);
+    const topMostLayer = getTopMostDismissableLayer(layersArr);
     if (topMostLayer)
         return topMostLayer[0].opts.ref.current === node;
     const [firstLayerNode] = layersArr[0];

package/dist/internal/timeout-fn.d.ts

@@ -1,16 +1,7 @@
 import type { AnyFn } from "./types.js";
-type TimeoutFnOptions = {
-    /**
-     * Start the timer immediate after calling this function
-     *
-     * @default true
-     */
-    immediate?: boolean;
-};
 export declare class TimeoutFn<T extends AnyFn> {
     #private;
-    constructor(cb: T, interval: number, opts?: TimeoutFnOptions);
+    constructor(cb: T, interval: number);
     stop(): void;
     start(...args: Parameters<T> | []): void;
 }
-export {};

package/dist/internal/timeout-fn.js

@@ -1,22 +1,13 @@
 import { onDestroyEffect } from "svelte-toolbelt";
-import { BROWSER } from "esm-env";
-const defaultOpts = {
-    immediate: true,
-};
 export class TimeoutFn {
-    #opts;
     #interval;
     #cb;
     #timer = null;
-    constructor(cb, interval, opts = {}) {
+    constructor(cb, interval) {
         this.#cb = cb;
         this.#interval = interval;
-        this.#opts = { ...defaultOpts, ...opts };
         this.stop = this.stop.bind(this);
         this.start = this.start.bind(this);
-        if (this.#opts.immediate && BROWSER) {
-            this.start();
-        }
         onDestroyEffect(this.stop);
     }
     #clear() {
@@ -26,9 +17,11 @@ export class TimeoutFn {
         }
     }
     stop() {
+        console.log("stopping timeout");
         this.#clear();
     }
     start(...args) {
+        console.log("starting timeout");
         this.#clear();
         this.#timer = window.setTimeout(() => {
             this.#timer = null;

package/package.json

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