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

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

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ContextMenuContentStaticProps } from "../types.js";
+	import type { ContextMenuContentProps } from "../types.js";
 	import { CONTEXT_MENU_TRIGGER_ATTR, useMenuContent } from "../../menu/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(),
@@ -20,7 +22,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: ContextMenuContentStaticProps = $props();
+	}: ContextMenuContentProps = $props();
 
 	let isMounted = $state(false);
 
@@ -35,24 +37,20 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	present={contentState.parentMenu.open.current || forceMount}
-	{preventScroll}
-	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();
-	}}
-	isValidEvent={(e) => {
+	}
+
+	function isValidEvent(e: PointerEvent) {
 		if ("button" in e && e.button === 2) {
 			const target = e.target as HTMLElement;
 			if (!target) return false;
@@ -62,17 +60,69 @@
 			return isAnotherContextTrigger;
 		}
 		return false;
-	}}
-	{loop}
->
-	{#snippet popper({ props })}
-		{#if child}
-			{@render child({ props, ...contentState.snippetProps })}
-		{:else}
-			<div {...props}>
-				{@render children?.()}
-			</div>
-		{/if}
-		<Mounted bind:isMounted />
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		isStatic
+		side="right"
+		sideOffset={2}
+		align="start"
+		enabled={contentState.parentMenu.open.current}
+		{preventScroll}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{isValidEvent}
+		trapFocus
+		{loop}
+		{forceMount}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("context-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}
+		isStatic
+		side="right"
+		sideOffset={2}
+		align="start"
+		present={contentState.parentMenu.open.current}
+		{preventScroll}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{isValidEvent}
+		trapFocus
+		{loop}
+		forceMount={false}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("context-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/context-menu/components/context-menu-content-static.svelte.d.ts

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

package/dist/bits/context-menu/components/context-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(),
@@ -36,26 +37,20 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	{...mergedProps}
-	side="right"
-	sideOffset={2}
-	align="start"
-	present={contentState.parentMenu.open.current || forceMount}
-	{preventScroll}
-	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();
-	}}
-	isValidEvent={(e) => {
+	}
+
+	function isValidEvent(e: PointerEvent) {
 		if ("button" in e && e.button === 2) {
 			const target = e.target as HTMLElement;
 			if (!target) return false;
@@ -65,21 +60,65 @@
 			return isAnotherContextTrigger;
 		}
 		return false;
-	}}
-	trapFocus
-	{loop}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, {
-			style: getFloatingContentCSSVars("context-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}
+		side="right"
+		sideOffset={2}
+		align="start"
+		enabled={contentState.parentMenu.open.current}
+		{preventScroll}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{isValidEvent}
+		trapFocus
+		{loop}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("context-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}
+		side="right"
+		sideOffset={2}
+		align="start"
+		present={contentState.parentMenu.open.current}
+		{preventScroll}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		{isValidEvent}
+		trapFocus
+		{loop}
+		{id}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("context-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

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { DropdownMenuContentStaticProps } from "../types.js";
+	import type { DropdownMenuContentProps } from "../types.js";
 	import { useMenuContent } from "../../menu/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
-	}: DropdownMenuContentStaticProps = $props();
+	}: DropdownMenuContentProps = $props();
 
 	let isMounted = $state(false);
 
@@ -32,35 +34,71 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	present={contentState.parentMenu.open.current || forceMount}
-	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?.()}
-			</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 { DropdownMenuContentStaticProps } from "../types.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<DropdownMenuContentStaticProps, {
+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

@@ -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(),
@@ -33,36 +34,69 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	{...mergedProps}
-	present={contentState.parentMenu.open.current || forceMount}
-	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?.()}
-			</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}

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

@@ -1,20 +1,30 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { LinkPreviewContentStaticProps } from "../types.js";
+	import type { LinkPreviewContentProps } from "../types.js";
 	import { useLinkPreviewContent } from "../link-preview.svelte.js";
 	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,
 		child,
 		id = useId(),
 		ref = $bindable(null),
+		side = "top",
+		sideOffset = 0,
+		align = "center",
+		avoidCollisions = true,
+		arrowPadding = 0,
+		sticky = "partial",
+		hideWhenDetached = false,
+		collisionPadding = 0,
 		onInteractOutside,
 		onEscapeKeydown,
 		forceMount = false,
 		...restProps
-	}: LinkPreviewContentStaticProps = $props();
+	}: LinkPreviewContentProps = $props();
 
 	const contentState = useLinkPreviewContent({
 		id: box.with(() => id),
@@ -24,37 +34,86 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
+	const floatingProps = $derived({
+		side,
+		sideOffset,
+		align,
+		avoidCollisions,
+		arrowPadding,
+		sticky,
+		hideWhenDetached,
+		collisionPadding,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
 
-<PopperLayer
-	isStatic={true}
-	{...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 })}
-		{#if child}
-			{@render child({ props, ...contentState.snippetProps })}
-		{:else}
-			<div {...props}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+		contentState.root.handleClose();
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		enabled={contentState.root.open.current}
+		isStatic
+		{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}
+		isStatic
+		{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/link-preview/components/link-preview-content-static.svelte.d.ts

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