next: fix dismissable layer

packages/bits-ui/src/lib/bits/index.ts

@@ -33,3 +33,4 @@ export * as Toggle from "./toggle/index.js";
 export * as ToggleGroup from "./toggle-group/index.js";
 export * as Toolbar from "./toolbar/index.js";
 export * as Tooltip from "./tooltip/index.js";
+export * as DismissableLayer from "./utilities/dismissable-layer/index.js";

packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts

@@ -44,8 +44,7 @@ export class DismissableLayerState {
 		touchend: false,
 		click: false,
 	};
-	#isPointerDown = false;
-	#isPointerDownInside = false;
+	#isPointerDownOutside = false;
 	#isResponsibleLayer = false;
 	node: Box<HTMLElement | null>;
 	#documentObj: Document;
@@ -57,13 +56,15 @@ export class DismissableLayerState {
 		this.#interactOutsideStartProp = props.onInteractOutsideStart;
 		this.#interactOutsideProp = props.onInteractOutside;
 
+		layers.set(this, this.#behaviorType);
 		const unsubEvents = this.#addEventListeners();
 
 		onDestroy(() => {
 			unsubEvents();
 			this.#resetState.destroy();
 			this.#onInteractOutsideStart.destroy();
 			this.#onInteractOutside.destroy();
+			layers.delete(this);
 		});
 	}
 
@@ -113,7 +114,7 @@ export class DismissableLayerState {
 			 */
 			addEventListener(
 				this.#documentObj,
-				interactOutsideStartEvents,
+				interactOutsideEndEvents,
 				composeHandlers(this.#markNonInterceptedEvent, this.#onInteractOutside)
 			)
 		);
@@ -125,8 +126,7 @@ export class DismissableLayerState {
 			return;
 		this.#interactOutsideStartProp.value(e);
 		if (e.defaultPrevented) return;
-		this.#isPointerDownInside = true;
-		this.#isPointerDown = true;
+		this.#isPointerDownOutside = true;
 	}, 10);
 
 	#onInteractOutside = debounce((e: InteractOutsideEvent) => {
@@ -135,7 +135,7 @@ export class DismissableLayerState {
 		if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isValidEvent(e, node))
 			return;
 		if (behaviorType !== "close" && behaviorType !== "defer-otherwise-close") return;
-		if (!this.#isPointerDown || this.#isPointerDownInside) return;
+		if (!this.#isPointerDownOutside) return;
 		this.#interactOutsideProp.value(e);
 	}, 10);
 
@@ -156,8 +156,7 @@ export class DismissableLayerState {
 		for (const eventType in this.#interceptedEvents) {
 			this.#interceptedEvents[eventType as InteractOutsideInterceptEventType] = false;
 		}
-		this.#isPointerDown = false;
-		this.#isPointerDownInside = false;
+		this.#isPointerDownOutside = false;
 		this.#isResponsibleLayer = false;
 	}, 20);
 

packages/bits-ui/src/lib/bits/utilities/dismissable-layer/index.ts

@@ -1,3 +1,3 @@
-export { default as DismissableLayer } from "./dismissable-layer.svelte";
+export { default as Root } from "./dismissable-layer.svelte";
 
 export type { DismissableLayerProps as Props } from "./types.js";