bits-ui 1.0.0-next.33 → 1.0.0-next.34

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -5,6 +5,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		children,
@@ -45,38 +46,72 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
-</script>
 
-<PopperLayer
-	{...mergedProps}
-	present={contentState.root.open.current || forceMount}
-	{id}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside?.(e);
 		if (e.defaultPrevented) return;
-		contentState.root.immediateClose();
-	}}
-	onEscapeKeydown={(e) => {
+		contentState.root.handleClose();
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown?.(e);
 		if (e.defaultPrevented) return;
-		contentState.root.immediateClose();
-	}}
-	onOpenAutoFocus={(e) => e.preventDefault()}
-	onCloseAutoFocus={(e) => e.preventDefault()}
-	trapFocus={false}
-	loop={false}
-	preventScroll={false}
->
-	{#snippet popper({ props })}
-		{@const mergedProps = mergeProps(props, {
-			style: getFloatingContentCSSVars("link-preview"),
-		})}
-		{#if child}
-			{@render child({ props: mergedProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...mergedProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+		contentState.root.handleClose();
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={true}
+	>
+		{#snippet popper({ props })}
+			{@const mergedProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("link-preview"),
+			})}
+			{#if child}
+				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={false}
+	>
+		{#snippet popper({ props })}
+			{@const mergedProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("link-preview"),
+			})}
+			{#if child}
+				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/menu/components/menu-content-static.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { MenuContentStaticProps } from "../types.js";
+	import type { MenuContentProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		id = useId(),
@@ -17,7 +19,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: MenuContentStaticProps = $props();
+	}: MenuContentProps = $props();
 
 	let isMounted = $state(false);
 
@@ -36,38 +38,76 @@
 			style: { outline: "none" },
 		})
 	);
-</script>
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	present={contentState.parentMenu.open.current || forceMount}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		contentState.parentMenu.onClose();
-	}}
-	onEscapeKeydown={(e) => {
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
 		contentState.parentMenu.onClose();
-	}}
-	trapFocus
-	{loop}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, {
-			style: {
-				outline: "none",
-			},
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-		<Mounted bind:isMounted />
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		enabled={contentState.parentMenu.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		trapFocus
+		{loop}
+		forceMount={true}
+		isStatic
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: {
+					outline: "none",
+					...getFloatingContentCSSVars("menu"),
+				},
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		present={contentState.parentMenu.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		trapFocus
+		{loop}
+		forceMount={false}
+		isStatic
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: {
+					outline: "none",
+					...getFloatingContentCSSVars("menu"),
+				},
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/menu/components/menu-content-static.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { MenuContentStaticProps } from "../types.js";
+import type { MenuContentProps } 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const MenuContentStatic: $$__sveltets_2_IsomorphicComponent<MenuContentStaticProps, {
+declare const MenuContentStatic: $$__sveltets_2_IsomorphicComponent<MenuContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type MenuContentStatic = InstanceType<typeof MenuContentStatic>;

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

@@ -7,6 +7,7 @@
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		id = useId(),
@@ -37,38 +38,74 @@
 			style: { outline: "none" },
 		})
 	);
-</script>
 
-<PopperLayer
-	{...mergedProps}
-	present={contentState.parentMenu.open.current || forceMount}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		contentState.parentMenu.onClose();
-	}}
-	onEscapeKeydown={(e) => {
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
 		contentState.parentMenu.onClose();
-	}}
-	trapFocus
-	{loop}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, {
-			style: {
-				outline: "none",
-				...getFloatingContentCSSVars("menu"),
-			},
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-		<Mounted bind:isMounted />
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		enabled={contentState.parentMenu.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		trapFocus
+		{loop}
+		forceMount={true}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: {
+					outline: "none",
+					...getFloatingContentCSSVars("menu"),
+				},
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		present={contentState.parentMenu.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		trapFocus
+		{loop}
+		forceMount={false}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: {
+					outline: "none",
+					...getFloatingContentCSSVars("menu"),
+				},
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/menu/components/menu-sub-content-static.svelte

@@ -9,6 +9,7 @@
 	import { isHTMLElement } from "../../../internal/is.js";
 	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		id = useId(),
@@ -23,7 +24,7 @@
 		escapeKeydownBehavior = "defer-otherwise-close",
 		onOpenAutoFocus: onOpenAutoFocusProp = noop,
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
-		onFocusOutside: onFocusOutsideProp = noop,
+		onFocusOutside = noop,
 		side = "right",
 		...restProps
 	}: MenuSubContentProps = $props();
@@ -53,15 +54,19 @@
 		}
 	}
 
+	const dataAttr = $derived(subContentState.parentMenu.root.getAttr("sub-content"));
+
 	const mergedProps = $derived(
 		mergeProps(restProps, subContentState.props, {
 			side,
 			onkeydown,
-			"data-menu-sub-content": "",
+			[dataAttr]: "",
 		})
 	);
 
-	function onOpenAutoFocus(e: Event) {
+	function handleOpenAutoFocus(e: Event) {
+		onOpenAutoFocusProp(e);
+		if (e.defaultPrevented) return;
 		afterTick(() => {
 			e.preventDefault();
 			if (subContentState.parentMenu.root.isUsingKeyboard.current) {
@@ -71,40 +76,26 @@
 		});
 	}
 
-	function onCloseAutoFocus(e: Event) {
+	function handleCloseAutoFocus(e: Event) {
+		onCloseAutoFocusProp(e);
+		if (e.defaultPrevented) return;
 		e.preventDefault();
 	}
-</script>
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	{interactOutsideBehavior}
-	{escapeKeydownBehavior}
-	onCloseAutoFocus={(e) => {
-		onCloseAutoFocusProp(e);
-		if (e.defaultPrevented) return;
-		onCloseAutoFocus(e);
-	}}
-	onOpenAutoFocus={(e) => {
-		onOpenAutoFocusProp(e);
-		if (e.defaultPrevented) return;
-		onOpenAutoFocus(e);
-	}}
-	present={subContentState.parentMenu.open.current || forceMount}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		subContentState.parentMenu.onClose();
-	}}
-	onEscapeKeydown={(e) => {
-		// TODO: users should be able to cancel this
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
 		subContentState.parentMenu.onClose();
-	}}
-	onFocusOutside={(e) => {
-		onFocusOutsideProp(e);
+	}
+
+	function handleOnFocusOutside(e: FocusEvent) {
+		onFocusOutside(e);
 		if (e.defaultPrevented) return;
 		// We prevent closing when the trigger is focused to avoid triggering a re-open animation
 		// on pointer interaction.
@@ -112,21 +103,67 @@
 		if (e.target.id !== subContentState.parentMenu.triggerNode?.id) {
 			subContentState.parentMenu.onClose();
 		}
-	}}
-	preventScroll={false}
-	{loop}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, mergedProps, {
-			style: getFloatingContentCSSVars("menu"),
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...subContentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-		<Mounted bind:isMounted />
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{interactOutsideBehavior}
+		{escapeKeydownBehavior}
+		onCloseAutoFocus={handleCloseAutoFocus}
+		onOpenAutoFocus={handleOpenAutoFocus}
+		enabled={subContentState.parentMenu.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onFocusOutside={handleOnFocusOutside}
+		preventScroll={false}
+		{loop}
+		trapFocus={false}
+		isStatic
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, mergedProps, {
+				style: getFloatingContentCSSVars("menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...subContentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{interactOutsideBehavior}
+		{escapeKeydownBehavior}
+		onCloseAutoFocus={handleCloseAutoFocus}
+		onOpenAutoFocus={handleOpenAutoFocus}
+		present={subContentState.parentMenu.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onFocusOutside={handleOnFocusOutside}
+		preventScroll={false}
+		{loop}
+		trapFocus={false}
+		isStatic
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, mergedProps, {
+				style: getFloatingContentCSSVars("menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...subContentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/menu/components/menu-sub-content.svelte

@@ -9,6 +9,7 @@
 	import { isHTMLElement } from "../../../internal/is.js";
 	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		id = useId(),
@@ -63,7 +64,9 @@
 		})
 	);
 
-	function onOpenAutoFocus(e: Event) {
+	function handleOpenAutoFocus(e: Event) {
+		onOpenAutoFocusProp(e);
+		if (e.defaultPrevented) return;
 		afterTick(() => {
 			e.preventDefault();
 			if (subContentState.parentMenu.root.isUsingKeyboard.current) {
@@ -73,38 +76,25 @@
 		});
 	}
 
-	function onCloseAutoFocus(e: Event) {
+	function handleCloseAutoFocus(e: Event) {
+		onCloseAutoFocusProp(e);
+		if (e.defaultPrevented) return;
 		e.preventDefault();
 	}
-</script>
 
-<PopperLayer
-	{...mergedProps}
-	{interactOutsideBehavior}
-	{escapeKeydownBehavior}
-	onCloseAutoFocus={(e) => {
-		onCloseAutoFocusProp(e);
-		if (e.defaultPrevented) return;
-		onCloseAutoFocus(e);
-	}}
-	onOpenAutoFocus={(e) => {
-		onOpenAutoFocusProp(e);
-		if (e.defaultPrevented) return;
-		onOpenAutoFocus(e);
-	}}
-	present={subContentState.parentMenu.open.current || forceMount}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		subContentState.parentMenu.onClose();
-	}}
-	onEscapeKeydown={(e) => {
-		// TODO: users should be able to cancel this
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
 		subContentState.parentMenu.onClose();
-	}}
-	onFocusOutside={(e) => {
+	}
+
+	function handleOnFocusOutside(e: FocusEvent) {
 		onFocusOutside(e);
 		if (e.defaultPrevented) return;
 		// We prevent closing when the trigger is focused to avoid triggering a re-open animation
@@ -113,22 +103,65 @@
 		if (e.target.id !== subContentState.parentMenu.triggerNode?.id) {
 			subContentState.parentMenu.onClose();
 		}
-	}}
-	preventScroll={false}
-	{loop}
-	trapFocus={false}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, mergedProps, {
-			style: getFloatingContentCSSVars("menu"),
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...subContentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-		<Mounted bind:isMounted />
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{interactOutsideBehavior}
+		{escapeKeydownBehavior}
+		onCloseAutoFocus={handleCloseAutoFocus}
+		onOpenAutoFocus={handleOpenAutoFocus}
+		enabled={subContentState.parentMenu.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onFocusOutside={handleOnFocusOutside}
+		preventScroll={false}
+		{loop}
+		trapFocus={false}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, mergedProps, {
+				style: getFloatingContentCSSVars("menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...subContentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{interactOutsideBehavior}
+		{escapeKeydownBehavior}
+		onCloseAutoFocus={handleCloseAutoFocus}
+		onOpenAutoFocus={handleOpenAutoFocus}
+		present={subContentState.parentMenu.open.current}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onFocusOutside={handleOnFocusOutside}
+		preventScroll={false}
+		{loop}
+		trapFocus={false}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, mergedProps, {
+				style: getFloatingContentCSSVars("menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...subContentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayer>
+{/if}