bits-ui 1.0.0-next.40 → 1.0.0-next.42

package/dist/app.d.ts

@@ -0,0 +1,15 @@
+import type { ReadableBox } from "svelte-toolbelt";
+import type { DismissibleLayerState } from "./bits/utilities/dismissible-layer/useDismissibleLayer.svelte.ts";
+import type { InteractOutsideBehaviorType } from "./bits/utilities/dismissible-layer/types.ts";
+import type { EscapeLayerState } from "./bits/utilities/escape-layer/useEscapeLayer.svelte.ts";
+import type { EscapeBehaviorType } from "./bits/utilities/escape-layer/types.ts";
+import type { TextSelectionLayerState } from "./bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts";
+
+declare global {
+	// eslint-disable-next-line vars-on-top, no-var
+	var bitsDismissableLayers: Map<DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>>;
+	// eslint-disable-next-line vars-on-top, no-var
+	var bitsEscapeLayers: Map<EscapeLayerState, ReadableBox<EscapeBehaviorType>>;
+	// eslint-disable-next-line vars-on-top, no-var
+	var bitsTextSelectionLayers: Map<TextSelectionLayerState, ReadableBox<boolean>>;
+}

package/dist/bits/select/components/select-content.svelte

@@ -16,6 +16,7 @@
 		onEscapeKeydown = noop,
 		children,
 		child,
+		preventScroll = false,
 		...restProps
 	}: SelectContentProps = $props();
 
@@ -56,7 +57,7 @@
 		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
-		preventScroll={false}
+		{preventScroll}
 		onPlaced={() => (contentState.isPositioned = true)}
 		forceMount={true}
 	>
@@ -83,7 +84,7 @@
 		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
-		preventScroll={false}
+		{preventScroll}
 		onPlaced={() => (contentState.isPositioned = true)}
 		forceMount={false}
 	>

package/dist/bits/utilities/dismissible-layer/useDismissibleLayer.svelte.js

@@ -5,7 +5,7 @@ import { debounce } from "../../../internal/debounce.js";
 import { noop } from "../../../internal/noop.js";
 import { getOwnerDocument, isOrContainsTarget } from "../../../internal/elements.js";
 import { isElement } from "../../../internal/is.js";
-const layers = new Map();
+globalThis.bitsDismissableLayers ??= new Map();
 export class DismissibleLayerState {
     #interactOutsideProp;
     #behaviorType;
@@ -41,14 +41,16 @@ export class DismissibleLayerState {
         let unsubEvents = noop;
         const cleanup = () => {
             this.#resetState();
-            layers.delete(this);
+            globalThis.bitsDismissableLayers.delete(this);
             this.#handleInteractOutside.destroy();
             unsubEvents();
         };
         $effect(() => {
             if (this.#enabled.current && this.currNode) {
                 afterSleep(1, () => {
-                    layers.set(this, untrack(() => this.#behaviorType));
+                    if (!this.currNode)
+                        return;
+                    globalThis.bitsDismissableLayers.set(this, untrack(() => this.#behaviorType));
                     unsubEvents();
                     unsubEvents = this.#addEventListeners();
                 });
@@ -59,7 +61,7 @@ export class DismissibleLayerState {
         });
         onDestroyEffect(() => {
             this.#resetState.destroy();
-            layers.delete(this);
+            globalThis.bitsDismissableLayers.delete(this);
             this.#handleInteractOutside.destroy();
             this.#unsubClickListener();
             unsubEvents();
@@ -178,7 +180,7 @@ function getTopMostLayer(layersArr) {
     return layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
 }
 function isResponsibleLayer(node) {
-    const layersArr = [...layers];
+    const layersArr = [...globalThis.bitsDismissableLayers];
     /**
      * We first check if we can find a top layer with `close` or `ignore`.
      * If that top layer was found and matches the provided node, then the node is

package/dist/bits/utilities/escape-layer/useEscapeLayer.svelte.js

@@ -2,7 +2,7 @@ import { untrack } from "svelte";
 import { addEventListener } from "../../../internal/events.js";
 import { kbd } from "../../../internal/kbd.js";
 import { noop } from "../../../internal/noop.js";
-const layers = new Map();
+globalThis.bitsEscapeLayers ??= new Map();
 export class EscapeLayerState {
     #onEscapeProp;
     #behaviorType;
@@ -14,12 +14,12 @@ export class EscapeLayerState {
         let unsubEvents = noop;
         $effect(() => {
             if (this.#enabled.current) {
-                layers.set(this, untrack(() => this.#behaviorType));
+                globalThis.bitsEscapeLayers.set(this, untrack(() => this.#behaviorType));
                 unsubEvents = this.#addEventListener();
             }
             return () => {
                 unsubEvents();
-                layers.delete(this);
+                globalThis.bitsEscapeLayers.delete(this);
             };
         });
     }
@@ -41,7 +41,7 @@ export function useEscapeLayer(props) {
     return new EscapeLayerState(props);
 }
 function isResponsibleEscapeLayer(instance) {
-    const layersArr = [...layers];
+    const layersArr = [...globalThis.bitsEscapeLayers];
     /**
      * We first check if we can find a top layer with `close` or `ignore`.
      * If that top layer was found and matches the provided node, then the node is

package/dist/bits/utilities/presence-layer/usePresence.svelte.js

@@ -1,11 +1,13 @@
 import { afterTick } from "svelte-toolbelt";
+import { Previous } from "runed";
+import { untrack } from "svelte";
 import { useStateMachine } from "../../../internal/use-state-machine.svelte.js";
-import { watch } from "../../../internal/box.svelte.js";
 export function usePresence(present, id) {
     let styles = $state({});
     let prevAnimationNameState = $state("none");
     const initialState = present.current ? "mounted" : "unmounted";
     let node = $state(null);
+    const prevPresent = new Previous(() => present.current);
     $effect(() => {
         if (!id.current)
             return;
@@ -28,40 +30,43 @@ export function usePresence(present, id) {
             MOUNT: "mounted",
         },
     });
-    watch(present, (currPresent, prevPresent) => {
-        if (!node) {
-            node = document.getElementById(id.current);
-        }
-        if (!node)
-            return;
-        const hasPresentChanged = currPresent !== prevPresent;
-        if (!hasPresentChanged)
-            return;
-        const prevAnimationName = prevAnimationNameState;
-        const currAnimationName = getAnimationName(node);
-        if (currPresent) {
-            dispatch("MOUNT");
-        }
-        else if (currAnimationName === "none" || styles.display === "none") {
-            // If there is no exit animation or the element is hidden, animations won't run
-            // so we unmount instantly
-            dispatch("UNMOUNT");
-        }
-        else {
-            /**
-             * When `present` changes to `false`, we check changes to animation-name to
-             * determine whether an animation has started. We chose this approach (reading
-             * computed styles) because there is no `animationrun` event and `animationstart`
-             * fires after `animation-delay` has expired which would be too late.
-             */
-            const isAnimating = prevAnimationName !== currAnimationName;
-            if (prevPresent && isAnimating) {
-                dispatch("ANIMATION_OUT");
+    $effect(() => {
+        const currPresent = present.current;
+        untrack(() => {
+            if (!node) {
+                node = document.getElementById(id.current);
             }
-            else {
+            if (!node)
+                return;
+            const hasPresentChanged = currPresent !== prevPresent.current;
+            if (!hasPresentChanged)
+                return;
+            const prevAnimationName = prevAnimationNameState;
+            const currAnimationName = getAnimationName(node);
+            if (currPresent) {
+                dispatch("MOUNT");
+            }
+            else if (currAnimationName === "none" || styles.display === "none") {
+                // If there is no exit animation or the element is hidden, animations won't run
+                // so we unmount instantly
                 dispatch("UNMOUNT");
             }
-        }
+            else {
+                /**
+                 * When `present` changes to `false`, we check changes to animation-name to
+                 * determine whether an animation has started. We chose this approach (reading
+                 * computed styles) because there is no `animationrun` event and `animationstart`
+                 * fires after `animation-delay` has expired which would be too late.
+                 */
+                const isAnimating = prevAnimationName !== currAnimationName;
+                if (prevPresent && isAnimating) {
+                    dispatch("ANIMATION_OUT");
+                }
+                else {
+                    dispatch("UNMOUNT");
+                }
+            }
+        });
     });
     /**
      * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
@@ -90,14 +95,17 @@ export function usePresence(present, id) {
             prevAnimationNameState = getAnimationName(node);
         }
     }
-    watch(state, () => {
-        if (!node) {
-            node = document.getElementById(id.current);
-        }
-        if (!node)
-            return;
-        const currAnimationName = getAnimationName(node);
-        prevAnimationNameState = state.current === "mounted" ? currAnimationName : "none";
+    $effect(() => {
+        state.current;
+        untrack(() => {
+            if (!node) {
+                node = document.getElementById(id.current);
+            }
+            if (!node)
+                return;
+            const currAnimationName = getAnimationName(node);
+            prevAnimationNameState = state.current === "mounted" ? currAnimationName : "none";
+        });
     });
     $effect(() => {
         if (!node)

package/dist/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.js

@@ -4,7 +4,7 @@ import { addEventListener } from "../../../internal/events.js";
 import { noop } from "../../../internal/noop.js";
 import { isHTMLElement } from "../../../internal/is.js";
 import { isOrContainsTarget } from "../../../internal/elements.js";
-const layers = new Map();
+globalThis.bitsTextSelectionLayers ??= new Map();
 export class TextSelectionLayerState {
     #id;
     #onPointerDownProp;
@@ -25,13 +25,13 @@ export class TextSelectionLayerState {
         let unsubEvents = noop;
         $effect(() => {
             if (this.#enabled.current) {
-                layers.set(this, untrack(() => this.#enabled));
+                globalThis.bitsTextSelectionLayers.set(this, untrack(() => this.#enabled));
                 unsubEvents = this.#addEventListeners();
             }
             return () => {
                 unsubEvents();
                 this.#resetSelectionLock();
-                layers.delete(this);
+                globalThis.bitsTextSelectionLayers.delete(this);
             };
         });
     }
@@ -45,7 +45,7 @@ export class TextSelectionLayerState {
             return;
         /**
          * We only lock user-selection overflow if layer is the top most layer and
-         * pointerdown occured inside the node. You are still allowed to select text
+         * pointerdown occurred inside the node. You are still allowed to select text
          * outside the node provided pointerdown occurs outside the node.
          */
         if (!isHighestLayer(this) || !isOrContainsTarget(node, target))
@@ -80,7 +80,7 @@ function setUserSelect(node, value) {
     node.style.webkitUserSelect = value;
 }
 function isHighestLayer(instance) {
-    const layersArr = [...layers];
+    const layersArr = [...globalThis.bitsTextSelectionLayers];
     if (!layersArr.length)
         return false;
     const highestLayer = layersArr.at(-1);

package/package.json

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