bits-ui 2.11.0 → 2.11.1

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/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/package.json

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