bits-ui 1.0.0-next.6 → 1.0.0-next.61

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

@@ -1,8 +1,8 @@
 import { untrack } from "svelte";
 import { addEventListener } from "../../../internal/events.js";
 import { kbd } from "../../../internal/kbd.js";
-import { noop } from "../../../internal/callbacks.js";
-const layers = new Map();
+import { noop } from "../../../internal/noop.js";
+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/floating-layer/components/floating-layer-arrow.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useFloatingArrowState } from "../useFloatingLayer.svelte.js";
 	import { Arrow, type ArrowProps } from "../../arrow/index.js";
-	import { mergeProps } from "../../../../internal/mergeProps.js";
-	import { useId } from "../../../../internal/useId.js";
+	import { useId } from "../../../../internal/use-id.js";
 
 	let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
 

package/dist/bits/utilities/floating-layer/components/floating-layer-content.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useFloatingContentState } from "../useFloatingLayer.svelte.js";
 	import type { ContentImplProps } from "./index.js";
-	import { mergeProps } from "../../../../internal/mergeProps.js";
-	import { useId } from "../../../../internal/useId.js";
+	import { useId } from "../../../../internal/use-id.js";
 
 	let {
 		content,

package/dist/bits/utilities/floating-layer/useFloatingLayer.svelte.d.ts

@@ -13,8 +13,6 @@ declare class FloatingRootState {
     customAnchorNode: import("svelte-toolbelt").WritableBox<string | HTMLElement | Measurable | null>;
     triggerNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
     constructor();
-    createAnchor(props: FloatingAnchorStateProps): FloatingAnchorState;
-    createContent(props: FloatingContentStateProps): FloatingContentState;
 }
 export type FloatingContentStateProps = ReadableBoxedValues<{
     id: string;
@@ -51,19 +49,19 @@ declare class FloatingContentState {
     enabled: FloatingContentStateProps["enabled"];
     hasExplicitBoundaries: boolean;
     detectOverflowOptions: {
-        padding: number | Partial<Record<"left" | "right" | "bottom" | "top", number>>;
+        padding: number | Partial<Record<"left" | "right" | "top" | "bottom", number>>;
         boundary: Element[];
         altBoundary: boolean;
     };
     middleware: Middleware[];
     floating: UseFloatingReturn;
-    placedSide: "left" | "right" | "bottom" | "top";
-    placedAlign: "center" | "end" | "start";
+    placedSide: "left" | "right" | "top" | "bottom";
+    placedAlign: "end" | "center" | "start";
     arrowX: number;
     arrowY: number;
     cannotCenterArrow: boolean;
     contentZIndex: string | undefined;
-    arrowBaseSide: "left" | "right" | "bottom" | "top";
+    arrowBaseSide: "left" | "right" | "top" | "bottom";
     wrapperProps: {
         readonly id: string;
         readonly "data-bits-floating-content-wrapper": "";
@@ -342,7 +340,7 @@ declare class FloatingContentState {
             readonly perspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
             readonly perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
             readonly pointerEvents?: import("csstype").Property.PointerEvents | undefined;
-            position: "absolute" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "fixed" | "relative" | "static" | "sticky";
+            position: "relative" | "absolute" | "inherit" | "fixed" | "sticky" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
             readonly printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
             readonly quotes?: import("csstype").Property.Quotes | undefined;
             readonly resize?: import("csstype").Property.Resize | undefined;
@@ -903,8 +901,8 @@ declare class FloatingContentState {
         readonly dir: Direction;
     };
     props: {
-        readonly "data-side": "left" | "right" | "bottom" | "top";
-        readonly "data-align": "center" | "end" | "start";
+        readonly "data-side": "left" | "right" | "top" | "bottom";
+        readonly "data-align": "end" | "center" | "start";
         readonly style: string;
     };
     arrowStyle: {
@@ -917,7 +915,6 @@ declare class FloatingContentState {
         visibility: string | undefined;
     };
     constructor(props: FloatingContentStateProps, root: FloatingRootState);
-    createArrow(props: FloatingArrowStateProps): FloatingArrowState;
 }
 type FloatingArrowStateProps = WithRefProps;
 declare class FloatingArrowState {
@@ -934,7 +931,7 @@ declare class FloatingArrowState {
             transform: string;
             visibility: string | undefined;
         };
-        readonly "data-side": "left" | "right" | "bottom" | "top";
+        readonly "data-side": "left" | "right" | "top" | "bottom";
     };
 }
 type FloatingAnchorStateProps = ReadableBoxedValues<{
@@ -949,6 +946,6 @@ export declare function useFloatingRootState(): FloatingRootState;
 export declare function useFloatingContentState(props: FloatingContentStateProps): FloatingContentState;
 export declare function useFloatingArrowState(props: FloatingArrowStateProps): FloatingArrowState;
 export declare function useFloatingAnchorState(props: FloatingAnchorStateProps): FloatingAnchorState;
-export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "bottom" | "top";
-export declare function getAlignFromPlacement(placement: Placement): "center" | "end" | "start";
+export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
+export declare function getAlignFromPlacement(placement: Placement): "end" | "center" | "start";
 export {};

package/dist/bits/utilities/floating-layer/useFloatingLayer.svelte.js

@@ -1,14 +1,11 @@
 import { untrack } from "svelte";
 import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
-import { box } from "svelte-toolbelt";
+import { box, cssToStyleObj, styleToString, useRefById } from "svelte-toolbelt";
 import { ElementSize } from "runed";
-import { useRefById } from "../../../internal/useRefById.svelte.js";
 import { isNotNull } from "../../../internal/is.js";
-import { styleToString } from "../../../internal/style.js";
-import { useId } from "../../../internal/useId.js";
-import { useFloating } from "../../../internal/floating-svelte/useFloating.svelte.js";
-import { createContext } from "../../../internal/createContext.js";
-import { cssToStyleObj } from "../../../internal/cssToStyleObj.js";
+import { useId } from "../../../internal/use-id.js";
+import { useFloating } from "../../../internal/floating-svelte/use-floating.svelte.js";
+import { createContext } from "../../../internal/create-context.js";
 export const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
 export const ALIGN_OPTIONS = ["start", "center", "end"];
 const OPPOSITE_SIDE = {
@@ -36,12 +33,6 @@ class FloatingRootState {
             }
         });
     }
-    createAnchor(props) {
-        return new FloatingAnchorState(props, this);
-    }
-    createContent(props) {
-        return new FloatingContentState(props, this);
-    }
 }
 class FloatingContentState {
     // state
@@ -218,12 +209,12 @@ class FloatingContentState {
         useRefById({
             id: this.wrapperId,
             ref: this.wrapperRef,
-            condition: () => this.enabled.current,
+            deps: () => this.enabled.current,
         });
         useRefById({
             id: this.id,
             ref: this.contentRef,
-            condition: () => this.enabled.current,
+            deps: () => this.enabled.current,
         });
         this.floating = useFloating({
             strategy: () => this.#strategy.current,
@@ -255,9 +246,6 @@ class FloatingContentState {
             this.floating.floating.current = this.wrapperRef.current;
         });
     }
-    createArrow(props) {
-        return new FloatingArrowState(props, this);
-    }
 }
 class FloatingArrowState {
     #id;
@@ -273,7 +261,7 @@ class FloatingArrowState {
             onRefChange: (node) => {
                 this.#content.arrowRef.current = node;
             },
-            condition: () => this.#content.enabled.current,
+            deps: () => this.#content.enabled.current,
         });
     }
     props = $derived.by(() => ({
@@ -308,13 +296,13 @@ export function useFloatingRootState() {
     return setFloatingRootContext(new FloatingRootState());
 }
 export function useFloatingContentState(props) {
-    return setFloatingContentContext(getFloatingRootContext().createContent(props));
+    return setFloatingContentContext(new FloatingContentState(props, getFloatingRootContext()));
 }
 export function useFloatingArrowState(props) {
-    return getFloatingContentContext().createArrow(props);
+    return new FloatingArrowState(props, getFloatingContentContext());
 }
 export function useFloatingAnchorState(props) {
-    return getFloatingRootContext().createAnchor(props);
+    return new FloatingAnchorState(props, getFloatingRootContext());
 }
 //
 // HELPERS

package/dist/bits/utilities/focus-scope/focus-scope-stack.svelte.js

@@ -1,5 +1,5 @@
 import { box } from "svelte-toolbelt";
-import { useId } from "../../../internal/useId.js";
+import { useId } from "../../../internal/use-id.js";
 const focusStack = box([]);
 export function createFocusScopeStack() {
     const stack = focusStack;
@@ -7,7 +7,7 @@ export function createFocusScopeStack() {
         add(focusScope) {
             // pause the currently active focus scope (top of the stack)
             const activeFocusScope = stack.current[0];
-            if (focusScope !== activeFocusScope) {
+            if (focusScope.id !== activeFocusScope?.id) {
                 activeFocusScope?.pause();
             }
             // remove in case it already exists because it'll be added to the top

package/dist/bits/utilities/focus-scope/focus-scope.svelte

@@ -2,7 +2,7 @@
 	import { box } from "svelte-toolbelt";
 	import type { FocusScopeImplProps } from "./types.js";
 	import { useFocusScope } from "./useFocusScope.svelte.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		id,
@@ -11,6 +11,7 @@
 		onCloseAutoFocus = noop,
 		onOpenAutoFocus = noop,
 		focusScope,
+		forceMount = false,
 	}: FocusScopeImplProps = $props();
 
 	const focusScopeState = useFocusScope({
@@ -19,6 +20,7 @@
 		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
 		id: box.with(() => id),
+		forceMount: box.with(() => forceMount),
 	});
 </script>
 

package/dist/bits/utilities/focus-scope/types.d.ts

@@ -34,4 +34,8 @@ export type FocusScopeImplProps = {
      * When `true` will loop through the tabbable elements in the focus scope.
      */
     loop?: boolean;
+    /**
+     * Whether the content within the focus trap is being force mounted or not.
+     */
+    forceMount?: boolean;
 } & FocusScopeProps;

package/dist/bits/utilities/focus-scope/useFocusScope.svelte.d.ts

@@ -27,13 +27,17 @@ type UseFocusScopeProps = ReadableBoxedValues<{
      * Can be prevented.
      */
     onCloseAutoFocus: EventCallback;
+    /**
+     * Whether force mount is enabled or not
+     */
+    forceMount: boolean;
 }>;
 export type FocusScopeContainerProps = {
     id: string;
     tabindex: number;
     onkeydown: EventCallback<KeyboardEvent>;
 };
-export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, }: UseFocusScopeProps): {
+export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }: UseFocusScopeProps): {
     readonly props: FocusScopeContainerProps;
 };
 export {};

package/dist/bits/utilities/focus-scope/useFocusScope.svelte.js

@@ -1,24 +1,21 @@
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
+import { afterTick, box, executeCallbacks, useRefById } from "svelte-toolbelt";
 import { createFocusScopeAPI, createFocusScopeStack, removeLinks, } from "./focus-scope-stack.svelte.js";
 import { focus, focusFirst, getTabbableCandidates, getTabbableEdges } from "../../../internal/focus.js";
 import { addEventListener } from "../../../internal/events.js";
-import { useRefById } from "../../../internal/useRefById.svelte.js";
 import { isHTMLElement } from "../../../internal/is.js";
-import { executeCallbacks } from "../../../internal/callbacks.js";
 import { kbd } from "../../../internal/kbd.js";
-import { afterTick } from "../../../internal/afterTick.js";
 const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 const AUTOFOCUS_ON_DESTROY = "focusScope.autoFocusOnDestroy";
 const EVENT_OPTIONS = { bubbles: false, cancelable: true };
-export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, }) {
+export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }) {
     const focusScopeStack = createFocusScopeStack();
     const focusScope = createFocusScopeAPI();
     const ref = box(null);
     useRefById({
         id,
         ref,
-        condition: () => enabled.current,
+        deps: () => enabled.current,
     });
     let lastFocusedElement = $state(null);
     $effect(() => {
@@ -76,59 +73,77 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
                 focus(container);
             }
         }
-        const unsubEvents = executeCallbacks(addEventListener(document, "focusin", handleFocusIn), addEventListener(document, "focusout", handleFocusOut));
-        const mutationObserver = new MutationObserver(handleMutations);
-        if (container) {
+        return untrack(() => {
+            const unsubEvents = executeCallbacks(addEventListener(document, "focusin", handleFocusIn), addEventListener(document, "focusout", handleFocusOut));
+            const mutationObserver = new MutationObserver(handleMutations);
             mutationObserver.observe(container, { childList: true, subtree: true });
-        }
-        return () => {
-            unsubEvents();
-            mutationObserver.disconnect();
-        };
+            return () => {
+                unsubEvents();
+                mutationObserver.disconnect();
+            };
+        });
     });
     $effect(() => {
-        let container = untrack(() => ref.current);
+        if (forceMount.current)
+            return;
+        let container = ref.current;
         const previouslyFocusedElement = document.activeElement;
         untrack(() => {
-            if (!container) {
-                container = document.getElementById(untrack(() => id.current));
-            }
+            handleMount(container, previouslyFocusedElement);
+        });
+        return () => {
             if (!container)
                 return;
-            untrack(() => focusScopeStack.add(focusScope));
-            const hasFocusedCandidate = container.contains(previouslyFocusedElement);
-            if (!hasFocusedCandidate) {
-                const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
-                container.addEventListener(AUTOFOCUS_ON_MOUNT, untrack(() => onOpenAutoFocus.current));
-                container.dispatchEvent(mountEvent);
-                if (!mountEvent.defaultPrevented) {
-                    afterTick(() => {
-                        if (!container)
-                            return;
-                        focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
-                        if (document.activeElement === previouslyFocusedElement) {
-                            focus(container);
-                        }
-                    });
-                }
-            }
+            handleDestroy(previouslyFocusedElement);
+        };
+    });
+    $effect(() => {
+        if (!forceMount.current)
+            return;
+        enabled.current;
+        const container = ref.current;
+        const previouslyFocusedElement = document.activeElement;
+        untrack(() => {
+            handleMount(container, previouslyFocusedElement);
         });
         return () => {
             if (!container)
                 return;
-            container.removeEventListener(AUTOFOCUS_ON_MOUNT, untrack(() => onOpenAutoFocus.current));
-            const destroyEvent = new CustomEvent(AUTOFOCUS_ON_DESTROY, EVENT_OPTIONS);
-            container.addEventListener(AUTOFOCUS_ON_DESTROY, untrack(() => onCloseAutoFocus.current));
-            container.dispatchEvent(destroyEvent);
-            setTimeout(() => {
-                if (!destroyEvent.defaultPrevented && previouslyFocusedElement) {
-                    focus(previouslyFocusedElement ?? document.body, { select: true });
-                }
-                container?.removeEventListener(AUTOFOCUS_ON_DESTROY, onCloseAutoFocus.current);
-                focusScopeStack.remove(focusScope);
-            }, 0);
+            handleDestroy(previouslyFocusedElement);
         };
     });
+    function handleMount(container, prevFocusedElement) {
+        if (!container)
+            container = document.getElementById(id.current);
+        if (!container)
+            return;
+        focusScopeStack.add(focusScope);
+        const hasFocusedCandidate = container.contains(prevFocusedElement);
+        if (!hasFocusedCandidate) {
+            const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+            onOpenAutoFocus.current(mountEvent);
+            if (!mountEvent.defaultPrevented) {
+                afterTick(() => {
+                    if (!container)
+                        return;
+                    focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
+                    if (document.activeElement === prevFocusedElement) {
+                        focus(container);
+                    }
+                });
+            }
+        }
+    }
+    function handleDestroy(prevFocusedElement) {
+        const destroyEvent = new CustomEvent(AUTOFOCUS_ON_DESTROY, EVENT_OPTIONS);
+        onCloseAutoFocus.current(destroyEvent);
+        setTimeout(() => {
+            if (!destroyEvent.defaultPrevented && prevFocusedElement) {
+                focus(prevFocusedElement ?? document.body, { select: true });
+            }
+            focusScopeStack.remove(focusScope);
+        }, 0);
+    }
     function handleKeydown(e) {
         if (!enabled.current)
             return;
@@ -163,11 +178,11 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
             }
         }
     }
-    const props = $derived({
+    const props = $derived.by(() => ({
         id: id.current,
         tabindex: -1,
         onkeydown: handleKeydown,
-    });
+    }));
     return {
         get props() {
             return props;

package/dist/bits/utilities/mounted.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { untrack } from "svelte";
-	import { noop } from "../../internal/callbacks.js";
+	import { noop } from "../../internal/noop.js";
 
 	let {
 		isMounted = $bindable(false),

package/dist/bits/utilities/popper-layer/popper-layer-force-mount.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { PopperLayerImplProps } from "./types.js";
+	import PopperLayerInner from "./popper-layer-inner.svelte";
+
+	let {
+		popper,
+		onEscapeKeydown,
+		escapeKeydownBehavior,
+		preventOverflowTextSelection,
+		id,
+		onPointerDown,
+		onPointerUp,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		dir,
+		preventScroll,
+		wrapperId,
+		style,
+		onPlaced,
+		onInteractOutside,
+		onCloseAutoFocus,
+		onOpenAutoFocus,
+		onFocusOutside,
+		interactOutsideBehavior = "close",
+		loop,
+		trapFocus = true,
+		isValidEvent = () => false,
+		customAnchor = null,
+		isStatic = false,
+		enabled,
+		...restProps
+	}: Omit<PopperLayerImplProps, "present"> & {
+		enabled: boolean;
+	} = $props();
+</script>
+
+<PopperLayerInner
+	{popper}
+	{onEscapeKeydown}
+	{escapeKeydownBehavior}
+	{preventOverflowTextSelection}
+	{id}
+	{onPointerDown}
+	{onPointerUp}
+	{side}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	{arrowPadding}
+	{avoidCollisions}
+	{collisionBoundary}
+	{collisionPadding}
+	{sticky}
+	{hideWhenDetached}
+	{updatePositionStrategy}
+	{strategy}
+	{dir}
+	{preventScroll}
+	{wrapperId}
+	{style}
+	{onPlaced}
+	{customAnchor}
+	{isStatic}
+	{enabled}
+	{onInteractOutside}
+	{onCloseAutoFocus}
+	{onOpenAutoFocus}
+	{interactOutsideBehavior}
+	{loop}
+	{trapFocus}
+	{isValidEvent}
+	{onFocusOutside}
+	{...restProps}
+	forceMount={true}
+/>

package/dist/bits/{select/components/select-provider.svelte.d.ts → utilities/popper-layer/popper-layer-force-mount.svelte.d.ts}

@@ -1,5 +1,4 @@
-import { type Snippet } from "svelte";
-import { type SelectRootState } from "../select.svelte.js";
+import type { PopperLayerImplProps } from "./types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -13,11 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SelectProvider: $$__sveltets_2_IsomorphicComponent<{
-    rootContext: SelectRootState;
-    children: Snippet;
+declare const PopperLayerForceMount: $$__sveltets_2_IsomorphicComponent<Omit<PopperLayerImplProps, "present"> & {
+    enabled: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
-type SelectProvider = InstanceType<typeof SelectProvider>;
-export default SelectProvider;
+type PopperLayerForceMount = InstanceType<typeof PopperLayerForceMount>;
+export default PopperLayerForceMount;