v0.10.0

PR Reference: #184

New Components

• Calendar - Presents a calendar view tailored for selecting dates.
• Range Calendar - Presents a calendar view tailored for selecting date ranges.
• Date Picker - Facilitates the selection of dates through an input and calendar-based interface.
• Date Range Picker - Facilitates the selection of date ranges through an input and calendar-based interface.
• Date Field - Enables users to input specific dates within a designated field.
• Date Range Field - Enables users to input specific date ranges within a designated field.

Improvements

Docs Overhaul & Redesign ✨

bits-ui.com has been completely redesigned by the incredible Pavel Stianko / Bitworks, who refuses to be paid for this work as he wants to contribute to the Svelte community just as I do. I'm incredibly grateful for his work and I hope you all enjoy the new docs!

• API references for all components
• At least 1 example for each component (more to come)

Select Component

• fix numerous bugs with multiple behavior (closes #188 & #121)
• prevent onChange from firing on init / multiple times (closes #73)
• add the ability to pass in a custom items array to be used for type inference

Floating Components

• improve positioning behavior (closes #161)
• Remove arrowSize prop from Root components in favor of passing it directly to the Arrow components

Indicator Components (Checkbox & Radio)

• Standardize the Indicator components for checkbox/radio items to a similar API / underlying element

Misc Improvements

• Apply data- attributes to all components for easier global styling
• Add asChild prop to all components that we render an element for to allow for more flexibility in element structure & scoped styles
• Export individual prop types from the library for cleaner imports

Major Breaking Changes

As you're all probably aware, anything pre-1.0 is subject to breaking changes, but this release will introduce a few more than usual, so I wanted to call them out here and provide some guidance on how to migrate.

Replace positioning prop

The positioning prop is confusing and has been something I've wanted to change since I rapidly released this project. It's applied to the Root component which is not intuitive considering it's not actually positioning the Root component but the Content component, so I've decided to remove it in favor of individual props on the Content components of your floating components (see "Components Impacted" below).

The props you can now use to adjust the positioning of your floating content components are:

• side - the preferred side of the trigger the content should be positioned against ("top", "right", "bottom", "left")
• sideOffset - the offset in pixels from the preferred side. This is useful when you want to position your content a little further away from the trigger
• align - the preferred alignment of the content relative to the trigger ("start", "center", "end")
• alignOffset - the offset in pixels from the preferred alignment.
• avoidCollisions - whether or not the content should avoid collisions with the viewport, which defaults to true and is what causes the content to flip sides when it's too close to the edge of the viewport.
• collisionBoundary - The boundary element to check for collisions against. Defaults to the viewport.
• collisionPadding - The amount of padding to apply to the collision boundary, which determines how close the content can get to the edge of the boundary before it flips sides.
• fitViewport - Whether or not the content should be forced to fit within the viewport.
• sameWidth - Whether or not the content should be forced to be the same width as the trigger.
• strategy - The positioning strategy to use for the floating element.
• overlap - Whether or not the floating element can overlap the trigger.

These props are applied to the Content components.

For example, if you wanted to position a Popover component to the right of the trigger, you would now do something like this:

<script lang="ts">
	import { Popover } from "bits-ui";
</script>

<Popover.Root>
	<Popover.Trigger>Open</Popover.Trigger>
	<Popover.Content side="right" align="start">
		Content Here
	</Popover.Content>
</Popover.Root>

Components Impacted: Context Menu, Dropdown Menu, Link Preview, Popover, Select & Tooltip

Move arrowSize prop

Currently, the arrowSize prop is applied to the Root component of several floating components. Similar to the positioning prop, this is not intuitive and I've decided to move it to the Arrow component of the floating components.

For example, if you wanted to change the size of the arrow on a Tooltip component, you would now do something like this:

<script lang="ts">
	import { Tooltip } from "bits-ui";
</script>

<Tooltip.Root>
	<Tooltip.Trigger>Open</Tooltip.Trigger>
	<Tooltip.Content>
		<Tooltip.Arrow size={8} />
	</Tooltip.Content>
</Tooltip.Root>