diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts index b75cc8946..60ebcfd08 100644 --- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts +++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts @@ -1,4 +1,4 @@ -import { onDestroy, onMount, untrack } from "svelte"; +import { untrack } from "svelte"; import type { DismissableLayerProps, InteractOutsideBehaviorType, @@ -65,10 +65,6 @@ export class DismissableLayerState { this.#interactOutsideProp = props.onInteractOutside; this.#present = props.present; - $effect(() => { - console.log("present", this.#present.value); - }); - $effect(() => { this.#documentObj = getOwnerDocument(this.node.value); }); @@ -107,7 +103,6 @@ export class DismissableLayerState { } #addEventListeners() { - console.log("adding event listeners"); return executeCallbacks( /** * CAPTURE INTERACTION START @@ -160,7 +155,6 @@ export class DismissableLayerState { } #onInteractOutsideStart = debounce((e: InteractOutsideEvent) => { - console.log("onInteractOutsideStart"); if (!this.node.value) return; if ( !this.#isResponsibleLayer || @@ -174,7 +168,6 @@ export class DismissableLayerState { }, 10); #onInteractOutside = debounce((e: InteractOutsideEvent) => { - console.log("onInteractOutside"); if (!this.node.value) return; const behaviorType = this.#behaviorType.value; @@ -191,23 +184,19 @@ export class DismissableLayerState { }, 10); #markInterceptedEvent = (e: HTMLElementEventMap[InteractOutsideInterceptEventType]) => { - console.log("markInterceptedEvent", e.type); this.#interceptedEvents[e.type as InteractOutsideInterceptEventType] = true; }; #markNonInterceptedEvent = (e: HTMLElementEventMap[InteractOutsideInterceptEventType]) => { - console.log("markNonInterceptedEvent", e.type); this.#interceptedEvents[e.type as InteractOutsideInterceptEventType] = false; }; #markResponsibleLayer = () => { - console.log("markResponsibleLayer"); if (!this.node.value) return; this.#isResponsibleLayer = isResponsibleLayer(this.node.value); }; #resetState = debounce(() => { - console.log("resetState"); for (const eventType in this.#interceptedEvents) { this.#interceptedEvents[eventType as InteractOutsideInterceptEventType] = false; } @@ -216,7 +205,6 @@ export class DismissableLayerState { }, 20); #isAnyEventIntercepted() { - console.log("isAnyEventIntercepted"); return Object.values(this.#interceptedEvents).some(Boolean); } } @@ -226,7 +214,6 @@ export function useDismissableLayer(props: DismissableLayerStateProps) { } function isResponsibleLayer(node: HTMLElement): boolean { - console.log("isResponsibleLayer"); const layersArr = [...layers]; /** * We first check if we can find a top layer with `close` or `ignore`. @@ -243,7 +230,6 @@ function isResponsibleLayer(node: HTMLElement): boolean { } function isValidEvent(e: InteractOutsideEvent, node: HTMLElement): boolean { - console.log("isValidEvent"); if ("button" in e && e.button > 0) return false; const target = e.target; if (!isElement(target)) return false; diff --git a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts index 6de829913..4c2414d8b 100644 --- a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts +++ b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts @@ -1,8 +1,9 @@ -import { onDestroy } from "svelte"; +import { untrack } from "svelte"; import type { EscapeBehaviorType, EscapeLayerProps } from "./types.js"; import type { ReadonlyBox, ReadonlyBoxedValues } from "$lib/internal/box.svelte.js"; import { type EventCallback, addEventListener } from "$lib/internal/events.js"; import { kbd } from "$lib/internal/kbd.js"; +import { noop } from "$lib/internal/callbacks.js"; const layers = new Map>(); @@ -11,14 +12,23 @@ type EscapeLayerStateProps = ReadonlyBoxedValues>; #behaviorType: ReadonlyBox; + #present: ReadonlyBox; constructor(props: EscapeLayerStateProps) { this.#behaviorType = props.behaviorType; this.#onEscapeProp = props.onEscape; - layers.set(this, this.#behaviorType); + this.#present = props.present; - $effect.root(() => { - const unsubEvents = this.#addEventListener(); + let unsubEvents = noop; + + $effect(() => { + if (this.#present.value) { + layers.set( + this, + untrack(() => this.#behaviorType) + ); + unsubEvents = this.#addEventListener(); + } return () => { unsubEvents(); diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts index c30867e24..08672a9fd 100644 --- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts +++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts @@ -1,4 +1,3 @@ -import type { VirtualElement } from "@floating-ui/core"; import { getContext, setContext, untrack } from "svelte"; import { type Middleware, diff --git a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts index 66f416853..11525dc19 100644 --- a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts +++ b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts @@ -1,4 +1,4 @@ -import { onDestroy } from "svelte"; +import { untrack } from "svelte"; import type { PreventTextSelectionOverflowLayerProps } from "./types.js"; import { type Box, @@ -26,18 +26,25 @@ export class PreventTextSelectionOverflowLayerState { #enabled: ReadonlyBox; #unsubSelectionLock = noop; #node: Box; + #present: ReadonlyBox; constructor(props: StateProps) { this.#node = useNodeById(props.id); this.#enabled = props.enabled; this.#onPointerDownProp = props.onPointerDown; this.#onPointerUpProp = props.onPointerUp; + this.#present = props.present; - layers.set(this, this.#enabled); - - $effect.root(() => { - const unsubEvents = this.#addEventListeners(); + let unsubEvents = noop; + $effect(() => { + if (this.#present.value) { + layers.set( + this, + untrack(() => this.#enabled) + ); + unsubEvents = this.#addEventListeners(); + } return () => { unsubEvents(); this.#resetSelectionLock(); @@ -102,6 +109,9 @@ function setUserSelect(node: HTMLElement, value: string) { } function isHighestLayer(instance: PreventTextSelectionOverflowLayerState) { - const [topLayer] = [...layers].at(-1)!; - return topLayer === instance; + const layersArr = [...layers]; + if (!layersArr.length) return false; + const highestLayer = layersArr.at(-1); + if (!highestLayer) return false; + return highestLayer[0] === instance; }