next: more things (#680)

huntabyte · Sep 27, 2024 · b8f256c · b8f256c
1 parent 3fde288
commit b8f256c
Show file tree

Hide file tree

Showing 108 changed files with 1,890 additions and 284 deletions.
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
@@ -85,10 +85,10 @@
 >
 	{#snippet popper({ props })}
 		{#if child}
-			{@render child({ props })}
+			{@render child({ props, ...contentState.snippetProps })}
 		{:else}
 			<div {...props}>
-				{@render children?.()}
+				{@render children?.(contentState.snippetProps)}
 			</div>
 		{/if}
 		<Mounted bind:isMounted />

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
@@ -9,6 +9,7 @@
 	import { isElement } from "$lib/internal/is.js";
 	import type { InteractOutsideEvent } from "$lib/bits/utilities/dismissable-layer/types.js";
 	import Mounted from "$lib/bits/utilities/mounted.svelte";
+	import { getFloatingContentCSSVars } from "$lib/internal/floating-svelte/floating-utils.svelte.js";
 
 	let {
 		id = useId(),
@@ -88,22 +89,13 @@
 >
 	{#snippet popper({ props })}
 		{@const finalProps = mergeProps(props, {
-			style: {
-				"--bits-context-menu-content-transform-origin":
-					"var(--bits-floating-transform-origin)",
-				"--bits-context-menu-content-available-width":
-					"var(--bits-floating-available-width)",
-				"--bits-context-menu-content-available-height":
-					"var(--bits-floating-available-height)",
-				"--bits-context-menu-anchor-width": "var(--bits-floating-anchor-width)",
-				"--bits-context-menu-anchor-height": "var(--bits-floating-anchor-height)",
-			},
+			style: getFloatingContentCSSVars("context-menu"),
 		})}
 		{#if child}
-			{@render child({ props: finalProps })}
+			{@render child({ props: finalProps, ...contentState.snippetProps })}
 		{:else}
 			<div {...finalProps}>
-				{@render children?.()}
+				{@render children?.(contentState.snippetProps)}
 			</div>
 		{/if}
 		<Mounted bind:isMounted />

diff --git a/packages/bits-ui/src/lib/bits/date-field/components/date-field.svelte b/packages/bits-ui/src/lib/bits/date-field/components/date-field.svelte
@@ -7,7 +7,6 @@
 	import { getDefaultDate } from "$lib/shared/date/utils.js";
 
 	let {
-		isDateUnavailable,
 		disabled = false,
 		granularity,
 		hideTimeZone = false,
@@ -17,6 +16,7 @@
 		minValue,
 		onPlaceholderChange = noop,
 		onValueChange = noop,
+		isDateInvalid,
 		placeholder = $bindable(),
 		value = $bindable(),
 		readonly = false,
@@ -71,7 +71,7 @@
 		locale: box.with(() => locale),
 		maxValue: box.with(() => maxValue),
 		minValue: box.with(() => minValue),
-		isDateUnavailable: box.with(() => isDateUnavailable),
+		isDateInvalid: box.with(() => isDateInvalid),
 		readonly: box.with(() => readonly),
 		readonlySegments: box.with(() => readonlySegments),
 		required: box.with(() => required),

diff --git a/packages/bits-ui/src/lib/bits/date-field/date-field.svelte.ts b/packages/bits-ui/src/lib/bits/date-field/date-field.svelte.ts
@@ -65,7 +65,7 @@ export type DateFieldRootStateProps = WritableBoxedValues<{
 }> &
 	ReadableBoxedValues<{
 		readonlySegments: SegmentPart[];
-		isDateUnavailable: DateMatcher | undefined;
+		isDateInvalid: DateMatcher | undefined;
 		minValue: DateValue | undefined;
 		maxValue: DateValue | undefined;
 		disabled: boolean;
@@ -80,7 +80,7 @@ export type DateFieldRootStateProps = WritableBoxedValues<{
 export class DateFieldRootState {
 	value: DateFieldRootStateProps["value"];
 	placeholder: WritableBox<DateValue>;
-	isDateUnavailable: DateFieldRootStateProps["isDateUnavailable"];
+	isDateInvalid: DateFieldRootStateProps["isDateInvalid"];
 	minValue: DateFieldRootStateProps["minValue"];
 	maxValue: DateFieldRootStateProps["maxValue"];
 	disabled: DateFieldRootStateProps["disabled"];
@@ -116,7 +116,7 @@ export class DateFieldRootState {
 		 */
 		this.value = props.value;
 		this.placeholder = rangeRoot ? rangeRoot.placeholder : props.placeholder;
-		this.isDateUnavailable = rangeRoot ? rangeRoot.isDateUnavailable : props.isDateUnavailable;
+		this.isDateInvalid = rangeRoot ? rangeRoot.isDateInvalid : props.isDateInvalid;
 		this.minValue = rangeRoot ? rangeRoot.minValue : props.minValue;
 		this.maxValue = rangeRoot ? rangeRoot.maxValue : props.maxValue;
 		this.disabled = rangeRoot ? rangeRoot.disabled : props.disabled;
@@ -340,7 +340,7 @@ export class DateFieldRootState {
 	isInvalid = $derived.by(() => {
 		const value = this.value.current;
 		if (!value) return false;
-		if (this.isDateUnavailable.current?.(value)) return true;
+		if (this.isDateInvalid.current?.(value)) return true;
 		const minValue = this.minValue.current;
 		if (minValue && isBefore(value, minValue)) return true;
 		const maxValue = this.maxValue.current;

diff --git a/packages/bits-ui/src/lib/bits/date-field/types.ts b/packages/bits-ui/src/lib/bits/date-field/types.ts
@@ -34,10 +34,11 @@ export type DateFieldRootPropsWithoutHTML = WithChildren<{
 	onPlaceholderChange?: OnChangeFn<DateValue | undefined>;
 
 	/**
-	 * A function that returns true if the given date is unavailable,
-	 * where if selected, the date field will be marked as invalid.
+	 * A function that returns true if the given date is invalid. This will mark
+	 * the field as invalid and you will be responsible for displaying an error message
+	 * to the user to inform them of the invalid state.
 	 */
-	isDateUnavailable?: DateMatcher;
+	isDateInvalid?: DateMatcher;
 
 	/**
 	 * The minimum acceptable date. When provided, the date field

diff --git a/packages/bits-ui/src/lib/bits/date-picker/components/date-picker.svelte b/packages/bits-ui/src/lib/bits/date-picker/components/date-picker.svelte
@@ -131,12 +131,16 @@
 		open: pickerRootState.props.open,
 	});
 
+	function isUnavailableOrDisabled(date: DateValue) {
+		return isDateDisabled(date) || isDateUnavailable(date);
+	}
+
 	useDateFieldRoot({
 		value: pickerRootState.props.value,
 		disabled: pickerRootState.props.disabled,
 		readonly: pickerRootState.props.readonly,
 		readonlySegments: pickerRootState.props.readonlySegments,
-		isDateUnavailable: pickerRootState.props.isDateUnavailable,
+		isDateInvalid: box.with(() => isUnavailableOrDisabled),
 		minValue: pickerRootState.props.minValue,
 		maxValue: pickerRootState.props.maxValue,
 		granularity: pickerRootState.props.granularity,

diff --git a/packages/bits-ui/src/lib/bits/date-range-field/components/date-range-field.svelte b/packages/bits-ui/src/lib/bits/date-range-field/components/date-range-field.svelte
@@ -23,7 +23,7 @@
 		granularity,
 		locale = "en-US",
 		hideTimeZone = false,
-		isDateUnavailable,
+		isDateInvalid,
 		maxValue,
 		minValue,
 		readonlySegments = [],
@@ -75,7 +75,7 @@
 		granularity: box.with(() => granularity),
 		locale: box.with(() => locale),
 		hideTimeZone: box.with(() => hideTimeZone),
-		isDateUnavailable: box.with(() => isDateUnavailable),
+		isDateInvalid: box.with(() => isDateInvalid),
 		maxValue: box.with(() => maxValue),
 		minValue: box.with(() => minValue),
 		placeholder: box.with(

diff --git a/packages/bits-ui/src/lib/bits/date-range-field/date-range-field.svelte.ts b/packages/bits-ui/src/lib/bits/date-range-field/date-range-field.svelte.ts
@@ -28,7 +28,7 @@ type DateRangeFieldRootStateProps = WithRefProps<
 	}> &
 		ReadableBoxedValues<{
 			readonlySegments: SegmentPart[];
-			isDateUnavailable: DateMatcher | undefined;
+			isDateInvalid: DateMatcher | undefined;
 			minValue: DateValue | undefined;
 			maxValue: DateValue | undefined;
 			disabled: boolean;
@@ -47,7 +47,7 @@ export class DateRangeFieldRootState {
 	value: DateRangeFieldRootStateProps["value"];
 	placeholder: DateRangeFieldRootStateProps["placeholder"];
 	readonlySegments: DateRangeFieldRootStateProps["readonlySegments"];
-	isDateUnavailable: DateRangeFieldRootStateProps["isDateUnavailable"];
+	isDateInvalid: DateRangeFieldRootStateProps["isDateInvalid"];
 	minValue: DateRangeFieldRootStateProps["minValue"];
 	maxValue: DateRangeFieldRootStateProps["maxValue"];
 	disabled: DateRangeFieldRootStateProps["disabled"];
@@ -89,7 +89,7 @@ export class DateRangeFieldRootState {
 		this.startValue = props.startValue;
 		this.endValue = props.endValue;
 		this.placeholder = props.placeholder;
-		this.isDateUnavailable = props.isDateUnavailable;
+		this.isDateInvalid = props.isDateInvalid;
 		this.minValue = props.minValue;
 		this.maxValue = props.maxValue;
 		this.disabled = props.disabled;
@@ -197,7 +197,7 @@ export class DateRangeFieldRootState {
 				disabled: this.disabled,
 				readonly: this.readonly,
 				readonlySegments: this.readonlySegments,
-				isDateUnavailable: this.isDateUnavailable,
+				isDateInvalid: this.isDateInvalid,
 				minValue: this.minValue,
 				maxValue: this.maxValue,
 				hourCycle: this.hourCycle,

diff --git a/packages/bits-ui/src/lib/bits/date-range-field/types.ts b/packages/bits-ui/src/lib/bits/date-range-field/types.ts
@@ -35,7 +35,7 @@ export type DateRangeFieldRootPropsWithoutHTML = WithChild<{
 	 * A function that returns true if the given date is unavailable,
 	 * where if selected, the date field will be marked as invalid.
 	 */
-	isDateUnavailable?: DateMatcher;
+	isDateInvalid?: DateMatcher;
 
 	/**
 	 * The minimum acceptable date. When provided, the date field

diff --git a/packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte b/packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte
@@ -161,12 +161,16 @@
 		open: pickerRootState.props.open,
 	});
 
+	function isUnavailableOrDisabled(date: DateValue) {
+		return isDateDisabled(date) || isDateUnavailable(date);
+	}
+
 	const fieldRootState = useDateRangeFieldRoot({
 		value: pickerRootState.props.value,
 		disabled: pickerRootState.props.disabled,
 		readonly: pickerRootState.props.readonly,
 		readonlySegments: pickerRootState.props.readonlySegments,
-		isDateUnavailable: pickerRootState.props.isDateUnavailable,
+		isDateInvalid: box.with(() => isUnavailableOrDisabled),
 		minValue: pickerRootState.props.minValue,
 		maxValue: pickerRootState.props.maxValue,
 		granularity: pickerRootState.props.granularity,

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
@@ -59,10 +59,10 @@
 	{#snippet popper({ props })}
 		{@const finalProps = mergeProps(props)}
 		{#if child}
-			{@render child({ props: finalProps })}
+			{@render child({ props: finalProps, ...contentState.snippetProps })}
 		{:else}
 			<div {...finalProps}>
-				{@render children?.()}
+				{@render children?.(contentState.snippetProps)}
 			</div>
 		{/if}
 		<Mounted bind:isMounted />

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
@@ -7,6 +7,7 @@
 	import { noop } from "$lib/internal/callbacks.js";
 	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
 	import Mounted from "$lib/bits/utilities/mounted.svelte";
+	import { getFloatingContentCSSVars } from "$lib/internal/floating-svelte/floating-utils.svelte.js";
 
 	let {
 		id = useId(),
@@ -57,22 +58,13 @@
 >
 	{#snippet popper({ props })}
 		{@const finalProps = mergeProps(props, {
-			style: {
-				"--bits-dropdown-menu-content-transform-origin":
-					"var(--bits-floating-transform-origin)",
-				"--bits-dropdown-menu-content-available-width":
-					"var(--bits-floating-available-width)",
-				"--bits-dropdown-menu-content-available-height":
-					"var(--bits-floating-available-height)",
-				"--bits-dropdown-menu-anchor-width": "var(--bits-floating-anchor-width)",
-				"--bits-dropdown-menu-anchor-height": "var(--bits-floating-anchor-height)",
-			},
+			style: getFloatingContentCSSVars("dropdown-menu"),
 		})}
 		{#if child}
-			{@render child({ props: finalProps })}
+			{@render child({ props: finalProps, ...contentState.snippetProps })}
 		{:else}
 			<div {...finalProps}>
-				{@render children?.()}
+				{@render children?.(contentState.snippetProps)}
 			</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
@@ -51,10 +51,10 @@
 >
 	{#snippet popper({ props })}
 		{#if child}
-			{@render child({ props })}
+			{@render child({ props, ...contentState.snippetProps })}
 		{:else}
 			<div {...props}>
-				{@render children?.()}
+				{@render children?.(contentState.snippetProps)}
 			</div>
 		{/if}
 	{/snippet}

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
@@ -5,6 +5,7 @@
 	import { useId } from "$lib/internal/useId.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
+	import { getFloatingContentCSSVars } from "$lib/internal/floating-svelte/floating-utils.svelte.js";
 
 	let {
 		children,
@@ -69,22 +70,13 @@
 >
 	{#snippet popper({ props })}
 		{@const mergedProps = mergeProps(props, {
-			style: {
-				"--bits-link-preview-content-transform-origin":
-					"var(--bits-floating-transform-origin)",
-				"--bits-link-preview-content-available-width":
-					"var(--bits-floating-available-width)",
-				"--bits-link-preview-content-available-height":
-					"var(--bits-floating-available-height)",
-				"--bits-link-preview-anchor-width": "var(--bits-floating-anchor-width)",
-				"--bits-link-preview-anchor-height": "var(--bits-floating-anchor-height)",
-			},
+			style: getFloatingContentCSSVars("link-preview"),
 		})}
 		{#if child}
-			{@render child({ props: mergedProps })}
+			{@render child({ props: mergedProps, ...contentState.snippetProps })}
 		{:else}
 			<div {...mergedProps}>
-				{@render children?.()}
+				{@render children?.(contentState.snippetProps)}
 			</div>
 		{/if}
 	{/snippet}

diff --git a/packages/bits-ui/src/lib/bits/link-preview/link-preview.svelte.ts b/packages/bits-ui/src/lib/bits/link-preview/link-preview.svelte.ts
@@ -231,6 +231,8 @@ class LinkPreviewContentState {
 		e.preventDefault();
 	};
 
+	snippetProps = $derived.by(() => ({ open: this.root.open.current }));
+
 	props = $derived.by(
 		() =>
 			({

diff --git a/packages/bits-ui/src/lib/bits/link-preview/types.ts b/packages/bits-ui/src/lib/bits/link-preview/types.ts
@@ -60,6 +60,14 @@ 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 = WithChild<
 	Pick<
 		FloatingLayerContentProps,
@@ -83,7 +91,8 @@ export type LinkPreviewContentPropsWithoutHTML = WithChild<
 			 * Useful for more control over the transition behavior.
 			 */
 			forceMount?: boolean;
-		}
+		},
+	LinkPreviewContentSnippetProps
 >;
 
 export type LinkPreviewContentProps = LinkPreviewContentPropsWithoutHTML &
@@ -99,7 +108,8 @@ export type LinkPreviewContentStaticPropsWithoutHTML = WithChild<
 			 * Useful for more control over the transition behavior.
 			 */
 			forceMount?: boolean;
-		}
+		},
+	LinkPreviewContentSnippetProps
 >;
 
 export type LinkPreviewContentStaticProps = LinkPreviewContentStaticPropsWithoutHTML &

diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-content-static.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-content-static.svelte
@@ -59,10 +59,10 @@
 			style: contentState.props.style,
 		})}
 		{#if child}
-			{@render child({ props: finalProps })}
+			{@render child({ props: finalProps, ...contentState.snippetProps })}
 		{:else}
 			<div {...finalProps}>
-				{@render children?.()}
+				{@render children?.(contentState.snippetProps)}
 			</div>
 		{/if}
 	{/snippet}

diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-content.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-content.svelte
@@ -67,10 +67,10 @@
 			},
 		})}
 		{#if child}
-			{@render child({ props: finalProps })}
+			{@render child({ props: finalProps, ...contentState.snippetProps })}
 		{:else}
 			<div {...finalProps}>
-				{@render children?.()}
+				{@render children?.(contentState.snippetProps)}
 			</div>
 		{/if}
 	{/snippet}

diff --git a/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts b/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts
@@ -698,6 +698,8 @@ class ListboxContentState {
 		}
 	};
 
+	snippetProps = $derived.by(() => ({ open: this.root.open.current }));
+
 	props = $derived.by(
 		() =>
 			({