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

package/dist/bits/dialog/dialog.svelte.js

@@ -1,6 +1,7 @@
+import { useRefById } from "svelte-toolbelt";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { createContext } from "../../internal/create-context.js";
+import { kbd } from "../../internal/kbd.js";
 function createAttrs(variant) {
     return {
         content: `data-${variant}-content`,
@@ -40,27 +41,6 @@ class DialogRootState {
             return;
         this.open.current = false;
     };
-    createTrigger(props) {
-        return new DialogTriggerState(props, this);
-    }
-    createTitle(props) {
-        return new DialogTitleState(props, this);
-    }
-    createContent(props) {
-        return new DialogContentState(props, this);
-    }
-    createOverlay(props) {
-        return new DialogOverlayState(props, this);
-    }
-    createDescription(props) {
-        return new DialogDescriptionState(props, this);
-    }
-    createClose(props) {
-        return new DialogCloseState(props, this);
-    }
-    createCancel(props) {
-        return new AlertDialogCancelState(props, this);
-    }
     sharedProps = $derived.by(() => ({
         "data-state": getDataOpenClosed(this.open.current),
     }));
@@ -69,10 +49,12 @@ class DialogTriggerState {
     #id;
     #ref;
     #root;
+    #disabled;
     constructor(props, root) {
         this.#id = props.id;
         this.#root = root;
         this.#ref = props.ref;
+        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -82,15 +64,41 @@ class DialogTriggerState {
             },
         });
     }
-    #onclick = () => {
+    #onclick = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.button > 0)
+            return;
+        this.#root.handleOpen();
+    };
+    #onpointerdown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch")
+            return e.preventDefault();
+        if (e.button > 0)
+            return;
+        // by default, it will attempt to focus this trigger on pointerdown
+        // since this also opens the dialog we want to prevent that behavior
+        e.preventDefault();
         this.#root.handleOpen();
     };
+    #onkeydown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#root.handleOpen();
+        }
+    };
     props = $derived.by(() => ({
         id: this.#id.current,
         "aria-haspopup": "dialog",
         "aria-expanded": getAriaExpanded(this.#root.open.current),
         "aria-controls": this.#root.contentId,
         [this.#root.attrs.trigger]: "",
+        onpointerdown: this.#onpointerdown,
+        onkeydown: this.#onkeydown,
         onclick: this.#onclick,
         ...this.#root.sharedProps,
     }));
@@ -100,25 +108,73 @@ class DialogCloseState {
     #ref;
     #root;
     #variant;
+    #disabled;
     #attr = $derived.by(() => this.#root.attrs[this.#variant.current]);
     constructor(props, root) {
         this.#root = root;
         this.#ref = props.ref;
         this.#id = props.id;
         this.#variant = props.variant;
+        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.#root.open.current,
+            deps: () => this.#root.open.current,
         });
     }
-    #onclick = () => {
+    #onclick = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.button > 0)
+            return;
+        this.#root.handleClose();
+    };
+    #onpointerdown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch")
+            return e.preventDefault();
+        if (e.button > 0)
+            return;
+        // by default, it will attempt to focus this trigger on pointerdown
+        // since this also opens the dialog we want to prevent that behavior
+        e.preventDefault();
         this.#root.handleClose();
     };
+    #onkeydown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#root.handleClose();
+        }
+    };
     props = $derived.by(() => ({
         id: this.#id.current,
         [this.#attr]: "",
+        onpointerdown: this.#onpointerdown,
         onclick: this.#onclick,
+        onkeydown: this.#onkeydown,
+        ...this.#root.sharedProps,
+    }));
+}
+class DialogActionState {
+    #id;
+    #ref;
+    #root;
+    #attr = $derived.by(() => this.#root.attrs.action);
+    constructor(props, root) {
+        this.#id = props.id;
+        this.#ref = props.ref;
+        this.#root = root;
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        [this.#attr]: "",
         ...this.#root.sharedProps,
     }));
 }
@@ -139,7 +195,7 @@ class DialogTitleState {
                 this.#root.titleNode = node;
                 this.#root.titleId = node?.id;
             },
-            condition: () => this.#root.open.current,
+            deps: () => this.#root.open.current,
         });
     }
     props = $derived.by(() => ({
@@ -161,7 +217,7 @@ class DialogDescriptionState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.#root.open.current,
+            deps: () => this.#root.open.current,
             onRefChange: (node) => {
                 this.#root.descriptionNode = node;
                 this.#root.descriptionId = node?.id;
@@ -185,7 +241,7 @@ class DialogContentState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.root.open.current,
+            deps: () => this.root.open.current,
             onRefChange: (node) => {
                 this.root.contentNode = node;
                 this.root.contentId = node?.id;
@@ -199,6 +255,9 @@ class DialogContentState {
         "aria-describedby": this.root.descriptionId,
         "aria-labelledby": this.root.titleId,
         [this.root.attrs.content]: "",
+        style: {
+            pointerEvents: "auto",
+        },
         ...this.root.sharedProps,
     }));
 }
@@ -213,13 +272,16 @@ class DialogOverlayState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.root.open.current,
+            deps: () => this.root.open.current,
         });
     }
     snippetProps = $derived.by(() => ({ open: this.root.open.current }));
     props = $derived.by(() => ({
         id: this.#id.current,
         [this.root.attrs.overlay]: "",
+        style: {
+            pointerEvents: "auto",
+        },
         ...this.root.sharedProps,
     }));
 }
@@ -227,26 +289,54 @@ class AlertDialogCancelState {
     #id;
     #ref;
     #root;
+    #disabled;
     constructor(props, root) {
         this.#id = props.id;
         this.#ref = props.ref;
         this.#root = root;
+        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.#root.open.current,
+            deps: () => this.#root.open.current,
             onRefChange: (node) => {
                 this.#root.cancelNode = node;
             },
         });
     }
-    #onclick = () => {
+    #onclick = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.button > 0)
+            return;
+        this.#root.handleClose();
+    };
+    #onpointerdown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch")
+            return e.preventDefault();
+        if (e.button > 0)
+            return;
+        // by default, it will attempt to focus this trigger on pointerdown
+        // since this also opens the dialog we want to prevent that behavior
+        e.preventDefault();
         this.#root.handleClose();
     };
+    #onkeydown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#root.handleClose();
+        }
+    };
     props = $derived.by(() => ({
         id: this.#id.current,
         [this.#root.attrs.cancel]: "",
+        onpointerdown: this.#onpointerdown,
         onclick: this.#onclick,
+        onkeydown: this.#onkeydown,
         ...this.#root.sharedProps,
     }));
 }
@@ -255,23 +345,27 @@ export function useDialogRoot(props) {
     return setDialogRootContext(new DialogRootState(props));
 }
 export function useDialogTrigger(props) {
-    return getDialogRootContext().createTrigger(props);
+    const root = getDialogRootContext();
+    return new DialogTriggerState(props, root);
 }
 export function useDialogTitle(props) {
-    return getDialogRootContext().createTitle(props);
+    return new DialogTitleState(props, getDialogRootContext());
 }
 export function useDialogContent(props) {
-    return getDialogRootContext().createContent(props);
+    return new DialogContentState(props, getDialogRootContext());
 }
 export function useDialogOverlay(props) {
-    return getDialogRootContext().createOverlay(props);
+    return new DialogOverlayState(props, getDialogRootContext());
 }
 export function useDialogDescription(props) {
-    return getDialogRootContext().createDescription(props);
+    return new DialogDescriptionState(props, getDialogRootContext());
 }
 export function useDialogClose(props) {
-    return getDialogRootContext().createClose(props);
+    return new DialogCloseState(props, getDialogRootContext());
 }
 export function useAlertDialogCancel(props) {
-    return getDialogRootContext().createCancel(props);
+    return new AlertDialogCancelState(props, getDialogRootContext());
+}
+export function useAlertDialogAction(props) {
+    return new DialogActionState(props, getDialogRootContext());
 }

package/dist/bits/dialog/exports.d.ts

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/dialog.svelte";
+export { default as Title } from "./components/dialog-title.svelte";
+export { default as Close } from "./components/dialog-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/dialog-content.svelte";
+export { default as Overlay } from "./components/dialog-overlay.svelte";
+export { default as Trigger } from "./components/dialog-trigger.svelte";
+export { default as Description } from "./components/dialog-description.svelte";
+export type { DialogRootProps as RootProps, DialogTitleProps as TitleProps, DialogCloseProps as CloseProps, DialogPortalProps as PortalProps, DialogContentProps as ContentProps, DialogOverlayProps as OverlayProps, DialogTriggerProps as TriggerProps, DialogDescriptionProps as DescriptionProps, } from "./types.js";

package/dist/bits/dialog/exports.js

@@ -0,0 +1,8 @@
+export { default as Root } from "./components/dialog.svelte";
+export { default as Title } from "./components/dialog-title.svelte";
+export { default as Close } from "./components/dialog-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/dialog-content.svelte";
+export { default as Overlay } from "./components/dialog-overlay.svelte";
+export { default as Trigger } from "./components/dialog-trigger.svelte";
+export { default as Description } from "./components/dialog-description.svelte";

package/dist/bits/dialog/index.d.ts

@@ -1,9 +1 @@
-export { default as Root } from "./components/dialog.svelte";
-export { default as Title } from "./components/dialog-title.svelte";
-export { default as Close } from "./components/dialog-close.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { default as Content } from "./components/dialog-content.svelte";
-export { default as Overlay } from "./components/dialog-overlay.svelte";
-export { default as Trigger } from "./components/dialog-trigger.svelte";
-export { default as Description } from "./components/dialog-description.svelte";
-export type { DialogRootProps as RootProps, DialogTitleProps as TitleProps, DialogCloseProps as CloseProps, DialogPortalProps as PortalProps, DialogContentProps as ContentProps, DialogOverlayProps as OverlayProps, DialogTriggerProps as TriggerProps, DialogDescriptionProps as DescriptionProps, } from "./types.js";
+export * as Dialog from "./exports.js";

package/dist/bits/dialog/index.js

@@ -1,8 +1 @@
-export { default as Root } from "./components/dialog.svelte";
-export { default as Title } from "./components/dialog-title.svelte";
-export { default as Close } from "./components/dialog-close.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { default as Content } from "./components/dialog-content.svelte";
-export { default as Overlay } from "./components/dialog-overlay.svelte";
-export { default as Trigger } from "./components/dialog-trigger.svelte";
-export { default as Description } from "./components/dialog-description.svelte";
+export * as Dialog from "./exports.js";

package/dist/bits/dialog/types.d.ts

@@ -3,8 +3,9 @@ import type { DismissibleLayerProps } from "../utilities/dismissible-layer/types
 import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
 import type { FocusScopeProps } from "../utilities/focus-scope/types.js";
 import type { TextSelectionLayerProps } from "../utilities/text-selection-layer/types.js";
-import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { ScrollLockProps } from "../utilities/scroll-lock/index.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { PortalProps } from "../utilities/portal/index.js";
 export type DialogRootPropsWithoutHTML = WithChildren<{
     /**
@@ -28,27 +29,25 @@ export type DialogRootProps = DialogRootPropsWithoutHTML;
 export type DialogContentSnippetProps = {
     open: boolean;
 };
-export type DialogContentPropsWithoutHTML = WithChild<Omit<EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & FocusScopeProps & TextSelectionLayerProps & {
-    preventScroll?: boolean;
-}, "loop">, DialogContentSnippetProps>;
-export type DialogContentProps = DialogContentPropsWithoutHTML & Without<PrimitiveDivAttributes, DialogContentPropsWithoutHTML>;
+export type DialogContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & FocusScopeProps & TextSelectionLayerProps & ScrollLockProps, "loop">, DialogContentSnippetProps>;
+export type DialogContentProps = DialogContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogContentPropsWithoutHTML>;
 export type DialogOverlaySnippetProps = {
     open: boolean;
 };
 export type DialogOverlayPropsWithoutHTML = WithChild<PresenceLayerProps, DialogOverlaySnippetProps>;
-export type DialogOverlayProps = DialogOverlayPropsWithoutHTML & Without<PrimitiveDivAttributes, DialogOverlayPropsWithoutHTML>;
+export type DialogOverlayProps = DialogOverlayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogOverlayPropsWithoutHTML>;
 export type DialogPortalPropsWithoutHTML = PortalProps;
 export type DialogPortalProps = DialogPortalPropsWithoutHTML;
 export type DialogTriggerPropsWithoutHTML = WithChild;
-export type DialogTriggerProps = DialogTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, DialogTriggerPropsWithoutHTML>;
+export type DialogTriggerProps = DialogTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, DialogTriggerPropsWithoutHTML>;
 export type DialogTitlePropsWithoutHTML = WithChild<{
     /**
      * The heading level of the dialog title.
      */
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 }>;
-export type DialogTitleProps = DialogTitlePropsWithoutHTML & Without<PrimitiveDivAttributes, DialogTitlePropsWithoutHTML>;
+export type DialogTitleProps = DialogTitlePropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogTitlePropsWithoutHTML>;
 export type DialogClosePropsWithoutHTML = DialogTriggerPropsWithoutHTML;
 export type DialogCloseProps = DialogTriggerProps;
 export type DialogDescriptionPropsWithoutHTML = WithChild;
-export type DialogDescriptionProps = DialogDescriptionPropsWithoutHTML & Without<PrimitiveDivAttributes, DialogDescriptionPropsWithoutHTML>;
+export type DialogDescriptionProps = DialogDescriptionPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogDescriptionPropsWithoutHTML>;

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

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentStaticProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { DropdownMenuContentProps } from "../types.js";
 	import { useMenuContent } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { noop } from "../../../internal/callbacks.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(),
@@ -18,7 +19,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: ContentStaticProps = $props();
+	}: DropdownMenuContentProps = $props();
 
 	let isMounted = $state(false);
 
@@ -33,38 +34,71 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	present={contentState.parentMenu.open.current || forceMount}
-	onInteractOutsideStart={(e) => {
-		contentState.handleInteractOutside(e);
-	}}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		contentState.handleInteractOutside(e);
 		if (e.defaultPrevented) return;
 		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)}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.(contentState.snippetProps)}
-			</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: getFloatingContentCSSVars("dropdown-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: getFloatingContentCSSVars("dropdown-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/dropdown-menu/components/dropdown-menu-content-static.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ContentStaticProps } from "../index.js";
+import type { DropdownMenuContentProps } 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 DropdownMenuContentStatic: $$__sveltets_2_IsomorphicComponent<ContentStaticProps, {
+declare const DropdownMenuContentStatic: $$__sveltets_2_IsomorphicComponent<DropdownMenuContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DropdownMenuContentStatic = InstanceType<typeof DropdownMenuContentStatic>;

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { DropdownMenuContentProps } from "../types.js";
 	import { useMenuContent } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { noop } from "../../../internal/callbacks.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(),
@@ -19,7 +19,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: ContentProps = $props();
+	}: DropdownMenuContentProps = $props();
 
 	let isMounted = $state(false);
 
@@ -34,39 +34,69 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	{...mergedProps}
-	present={contentState.parentMenu.open.current || forceMount}
-	onInteractOutsideStart={(e) => {
-		contentState.handleInteractOutside(e);
-	}}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		contentState.handleInteractOutside(e);
 		if (e.defaultPrevented) return;
 		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: getFloatingContentCSSVars("dropdown-menu"),
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.(contentState.snippetProps)}
-			</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: getFloatingContentCSSVars("dropdown-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: getFloatingContentCSSVars("dropdown-menu"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:isMounted />
+		{/snippet}
+	</PopperLayer>
+{/if}