next(breaking): Floating Content child Snippet (#994)

huntabyte · Dec 10, 2024 · cf0cb2f · cf0cb2f
1 parent 273a731
commit cf0cb2f
Show file tree

Hide file tree

Showing 63 changed files with 1,107 additions and 1,079 deletions.
diff --git a/.changeset/fast-poems-tap.md b/.changeset/fast-poems-tap.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+BREAKING: Update `child` snippet behavior of Floating UI-based `Content` components
diff --git a/packages/bits-ui/src/lib/bits/context-menu/components/context-menu-content-static.svelte b/packages/bits-ui/src/lib/bits/context-menu/components/context-menu-content-static.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ContextMenuContentProps } from "../types.js";
+	import type { ContextMenuContentStaticProps } from "../types.js";
 	import { CONTEXT_MENU_TRIGGER_ATTR, useMenuContent } from "$lib/bits/menu/menu.svelte.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import { noop } from "$lib/internal/noop.js";
@@ -22,7 +22,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: ContextMenuContentProps = $props();
+	}: ContextMenuContentStaticProps = $props();
 
 	let isMounted = $state(false);
 

diff --git a/packages/bits-ui/src/lib/bits/context-menu/components/context-menu-content.svelte b/packages/bits-ui/src/lib/bits/context-menu/components/context-menu-content.svelte
@@ -78,15 +78,17 @@
 		{loop}
 		{id}
 	>
-		{#snippet popper({ props })}
+		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
 				style: getFloatingContentCSSVars("context-menu"),
 			})}
 			{#if child}
-				{@render child({ props: finalProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...finalProps}>
-					{@render children?.()}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
 				</div>
 			{/if}
 			<Mounted bind:isMounted />
@@ -107,15 +109,17 @@
 		{loop}
 		{id}
 	>
-		{#snippet popper({ props })}
+		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
 				style: getFloatingContentCSSVars("context-menu"),
 			})}
 			{#if child}
-				{@render child({ props: finalProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...finalProps}>
-					{@render children?.()}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
 				</div>
 			{/if}
 			<Mounted bind:isMounted />

diff --git a/packages/bits-ui/src/lib/bits/dropdown-menu/components/dropdown-menu-content-static.svelte b/packages/bits-ui/src/lib/bits/dropdown-menu/components/dropdown-menu-content-static.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { DropdownMenuContentProps } from "../types.js";
+	import type { DropdownMenuContentStaticProps } from "../types.js";
 	import { useMenuContent } from "$lib/bits/menu/menu.svelte.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import { noop } from "$lib/internal/noop.js";
@@ -19,7 +19,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: DropdownMenuContentProps = $props();
+	}: DropdownMenuContentStaticProps = $props();
 
 	let isMounted = $state(false);
 

diff --git a/packages/bits-ui/src/lib/bits/dropdown-menu/components/dropdown-menu-content.svelte b/packages/bits-ui/src/lib/bits/dropdown-menu/components/dropdown-menu-content.svelte
@@ -60,15 +60,17 @@
 		forceMount={true}
 		{id}
 	>
-		{#snippet popper({ props })}
+		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
 				style: getFloatingContentCSSVars("dropdown-menu"),
 			})}
 			{#if child}
-				{@render child({ props: finalProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...finalProps}>
-					{@render children?.()}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
 				</div>
 			{/if}
 			<Mounted bind:isMounted />
@@ -85,15 +87,17 @@
 		forceMount={false}
 		{id}
 	>
-		{#snippet popper({ props })}
+		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
 				style: getFloatingContentCSSVars("dropdown-menu"),
 			})}
 			{#if child}
-				{@render child({ props: finalProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...finalProps}>
-					{@render children?.()}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
 				</div>
 			{/if}
 			<Mounted bind:isMounted />

diff --git a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content-static.svelte b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content-static.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { LinkPreviewContentProps } from "../types.js";
+	import type { LinkPreviewContentStaticProps } from "../types.js";
 	import { useLinkPreviewContent } from "../link-preview.svelte.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
@@ -12,19 +12,11 @@
 		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
-	}: LinkPreviewContentProps = $props();
+	}: LinkPreviewContentStaticProps = $props();
 
 	const contentState = useLinkPreviewContent({
 		id: box.with(() => id),
@@ -34,18 +26,7 @@
 		),
 	});
 
-	const floatingProps = $derived({
-		side,
-		sideOffset,
-		align,
-		avoidCollisions,
-		arrowPadding,
-		sticky,
-		hideWhenDetached,
-		collisionPadding,
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 
 	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside?.(e);

diff --git a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content.svelte b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content.svelte
@@ -75,15 +75,17 @@
 		preventScroll={false}
 		forceMount={true}
 	>
-		{#snippet popper({ props })}
+		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {
 				style: getFloatingContentCSSVars("link-preview"),
 			})}
 			{#if child}
-				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+				{@render child({ props: mergedProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...mergedProps}>
-					{@render children?.()}
+				<div {...wrapperProps}>
+					<div {...mergedProps}>
+						{@render children?.()}
+					</div>
 				</div>
 			{/if}
 		{/snippet}
@@ -102,15 +104,17 @@
 		preventScroll={false}
 		forceMount={false}
 	>
-		{#snippet popper({ props })}
+		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {
 				style: getFloatingContentCSSVars("link-preview"),
 			})}
 			{#if child}
-				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+				{@render child({ props: mergedProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...mergedProps}>
-					{@render children?.()}
+				<div {...wrapperProps}>
+					<div {...mergedProps}>
+						{@render children?.()}
+					</div>
 				</div>
 			{/if}
 			<Mounted onMountedChange={(m) => (contentState.root.contentMounted = m)} />

diff --git a/packages/bits-ui/src/lib/bits/link-preview/types.ts b/packages/bits-ui/src/lib/bits/link-preview/types.ts
@@ -14,6 +14,7 @@ import type {
 	WithChildren,
 	Without,
 } from "$lib/internal/types.js";
+import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "$lib/shared/types.js";
 
 export type LinkPreviewRootPropsWithoutHTML = WithChildren<{
 	/**
@@ -69,14 +70,6 @@ export type LinkPreviewRootPropsWithoutHTML = WithChildren<{
 
 export type LinkPreviewRootProps = LinkPreviewRootPropsWithoutHTML;
 
-export type LinkPreviewContentSnippetProps = {
-	/**
-	 * Whether the content is open or closed. Used alongside the `forceMount` prop to
-	 * conditionally render the content using Svelte transitions.
-	 */
-	open: boolean;
-};
-
 export type LinkPreviewContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<
 	Pick<
 		FloatingLayerContentProps,
@@ -101,13 +94,13 @@ export type LinkPreviewContentPropsWithoutHTML = WithChildNoChildrenSnippetProps
 			 */
 			forceMount?: boolean;
 		},
-	LinkPreviewContentSnippetProps
+	FloatingContentSnippetProps
 >;
 
 export type LinkPreviewContentProps = LinkPreviewContentPropsWithoutHTML &
 	Without<BitsPrimitiveDivAttributes, LinkPreviewContentPropsWithoutHTML>;
 
-export type LinkPreviewContentStaticPropsWithoutHTML = WithChild<
+export type LinkPreviewContentStaticPropsWithoutHTML = WithChildNoChildrenSnippetProps<
 	Pick<FloatingLayerContentProps, "dir"> &
 		Omit<DismissibleLayerProps, "onInteractOutsideStart"> &
 		EscapeLayerProps & {
@@ -118,7 +111,7 @@ export type LinkPreviewContentStaticPropsWithoutHTML = WithChild<
 			 */
 			forceMount?: boolean;
 		},
-	LinkPreviewContentSnippetProps
+	StaticContentSnippetProps
 >;
 
 export type LinkPreviewContentStaticProps = LinkPreviewContentStaticPropsWithoutHTML &

diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-content-static.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-content-static.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { MenuContentProps } from "../types.js";
+	import type { MenuContentStaticProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import { noop } from "$lib/internal/noop.js";
@@ -19,7 +19,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
-	}: MenuContentProps = $props();
+	}: MenuContentStaticProps = $props();
 
 	let isMounted = $state(false);
 

diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-content.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-content.svelte
@@ -63,18 +63,20 @@
 		forceMount={true}
 		{id}
 	>
-		{#snippet popper({ props })}
+		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
 				style: {
 					outline: "none",
 					...getFloatingContentCSSVars("menu"),
 				},
 			})}
 			{#if child}
-				{@render child({ props: finalProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...finalProps}>
-					{@render children?.()}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
 				</div>
 			{/if}
 			<Mounted bind:isMounted />
@@ -91,18 +93,20 @@
 		forceMount={false}
 		{id}
 	>
-		{#snippet popper({ props })}
+		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
 				style: {
 					outline: "none",
 					...getFloatingContentCSSVars("menu"),
 				},
 			})}
 			{#if child}
-				{@render child({ props: finalProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...finalProps}>
-					{@render children?.()}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
 				</div>
 			{/if}
 			<Mounted bind:isMounted />

diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-sub-content-static.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-sub-content-static.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { afterTick, box, mergeProps } from "svelte-toolbelt";
-	import type { MenuSubContentProps } from "../types.js";
+	import type { MenuSubContentStaticProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
 	import { useId } from "$lib/internal/use-id.js";
@@ -25,9 +25,8 @@
 		onOpenAutoFocus: onOpenAutoFocusProp = noop,
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		onFocusOutside = noop,
-		side = "right",
 		...restProps
-	}: MenuSubContentProps = $props();
+	}: MenuSubContentStaticProps = $props();
 
 	let isMounted = $state(false);
 
@@ -58,7 +57,6 @@
 
 	const mergedProps = $derived(
 		mergeProps(restProps, subContentState.props, {
-			side,
 			onkeydown,
 			[dataAttr]: "",
 		})
@@ -69,7 +67,7 @@
 		if (e.defaultPrevented) return;
 		afterTick(() => {
 			e.preventDefault();
-			if (subContentState.parentMenu.root.isUsingKeyboard.current) {
+			if (subContentState.parentMenu.root.isUsingKeyboard) {
 				const subContentEl = subContentState.parentMenu.contentNode;
 				subContentEl?.focus();
 			}