next(breaking): Floating Content child Snippet

[huntabyte]

We're introducing a breaking change to improve performance and fix issues with floating content components that use Svelte transitions.

Current Behavior & Issue

Our floating <X.Content> components currently wrap user content in a positioning div. While this simplifies styling by separating positioning logic from content styles, it creates performance issues when used with Svelte transitions or conditional rendering.

The current internal implementation:

<div {...wrapperProps}>
    {@render child({ props })}
</div>

When using transitions, this results in:

<div {...wrapperProps}>
    {#if open} 
        <div transition:fade>
            <!-- content -->
        </div>
    {/if}
</div>

The key issue is that the wrapper div remains in the DOM even when content is hidden, continuously recalculating positions on viewport changes. This creates unnecessary performance overhead, especially with multiple floating components (see Issue #877).

New Implementation

To resolve this, we're updating the child snippet API for all Floating UI-based Content components. The new API provides more granular control over wrapper and content elements:

type ChildSnippetProps = {
    // Props for the positioning wrapper
    // Do not style this element - styling should be applied to the content element
    wrapperProps: Record<string, unknown>
    
    // Props for your content element
    // Apply your custom styles here
    props: Record<string, unknown>
    
    // Content visibility state
    // Use this for conditional rendering with Svelte transitions
    open: boolean
}

Migration Impact

This is a breaking change that will affect applications using the child snippet with Floating UI-based Content components in bits-ui@1.0.0-next . While we understand this may require updates to your code, we're making this change early to minimize the long-term impact as adoption grows beyond bits-ui@0.X.

We recommend encapsulating these components in your own reusable components to minimize the impact of such changes across your application.

Before:

<DropdownMenu.Content>
	{#snippet child({ props, open })}
		{#if open}
			<div {...props} transition:slide>
				<!-- ... -->
			</div> 
		{/if}
	{/snippet}
</DropdownMenu.Content>

After:

<DropdownMenu.Content>
	{#snippet child({ wrapperProps, props, open })}
		{#if open}
			<div {...wrapperProps>
				<div {...props} transition:slide>
					<!-- ... -->
				</div>
			</div> 
		{/if}
	{/snippet}
</DropdownMenu.Content>

Components Impacted

• Combobox
• ContextMenu
• DatePicker
• DateRangePicker
• DropdownMenu
• LinkPreview
• Menubar
• Popover
• Select
• Tooltip

[changeset-bot]

🦋 Changeset detected

Latest commit: 759424d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
bits-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
bits-ui	✅ Ready (View Log)	Visit Preview	759424d