next: Link Preview

packages/bits-ui/src/lib/bits/date-range-field/components/date-range-field-input.svelte

@@ -5,7 +5,6 @@
 		getDateRangeFieldRootContext,
 		useDateRangeFieldInput,
 	} from "../date-range-field.svelte.js";
-	import { noop } from "$lib/internal/callbacks.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import DateFieldHiddenInput from "$lib/bits/date-field/components/date-field-hidden-input.svelte";
@@ -14,7 +13,6 @@
 		id = useId(),
 		ref = $bindable(null),
 		name = "",
-		onValueChange = noop,
 		child,
 		children,
 		type,
@@ -25,13 +23,7 @@
 
 	const fieldState = useDateRangeFieldInput({
 		name: box.with(() => name),
-		value: box.with(
-			() => (type === "start" ? rootState.startValue : rootState.endValue),
-			(v) => {
-				type === "start" ? (rootState.startValue = v) : (rootState.endValue = v);
-				onValueChange(v);
-			}
-		),
+		value: type === "start" ? rootState.startValue : rootState.endValue,
 	});
 
 	const inputState = fieldState.createInput({

packages/bits-ui/src/lib/bits/date-range-field/date-range-field.svelte.ts

@@ -7,7 +7,7 @@ import type { DateRange, SegmentPart } from "$lib/shared/index.js";
 import type { DateValue } from "@internationalized/date";
 import { onDestroy, untrack } from "svelte";
 import { useDateFieldRoot } from "../date-field/date-field.svelte.js";
-import type { OnChangeFn, WithRefProps } from "$lib/internal/types.js";
+import type { WithRefProps } from "$lib/internal/types.js";
 import { useRefById } from "$lib/internal/useRefById.svelte.js";
 import { createContext } from "$lib/internal/createContext.js";
 import { getFirstSegment } from "$lib/shared/date/field.js";
@@ -62,8 +62,8 @@ export class DateRangeFieldRootState {
 	labelNode = $state<HTMLElement | null>(null);
 	descriptionNode = $state<HTMLElement | null>(null);
 	validationNode = $state<HTMLElement | null>(null);
-	startValueComplete = $derived.by(() => this.startValue !== undefined);
-	endValueComplete = $derived.by(() => this.endValue !== undefined);
+	startValueComplete = $derived.by(() => this.startValue.value !== undefined);
+	endValueComplete = $derived.by(() => this.endValue.value !== undefined);
 	rangeComplete = $derived(this.startValueComplete && this.endValueComplete);
 	mergedValues = $derived.by(() => {
 		if (this.startValue.value === undefined || this.endValue.value === undefined) {
@@ -137,10 +137,10 @@ export class DateRangeFieldRootState {
 			const value = this.value.value;
 
 			untrack(() => {
-				if (value && value.start !== this.startValue.value) {
+				if (value.start !== undefined && value.start !== this.startValue.value) {
 					this.setStartValue(value.start);
 				}
-				if (value && value.end !== this.endValue.value) {
+				if (value.end !== undefined && value.end !== this.endValue.value) {
 					this.setEndValue(value.end);
 				}
 			});

packages/bits-ui/src/lib/bits/date-range-field/types.ts

@@ -156,11 +156,6 @@ export type DateRangeFieldInputSnippetProps = {
 
 export type DateRangeFieldInputPropsWithoutHTML = WithChild<
 	{
-		/**
-		 * A callback that is called when the value of the specific date field changes.
-		 */
-		onValueChange?: OnChangeFn<DateValue | undefined>;
-
 		/**
 		 * The name to use for the hidden input element associated with this input
 		 * used for form submission.

packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte

@@ -83,7 +83,7 @@
 		value: box.with(
 			() => value as DateRange,
 			(v) => {
-				if (value !== v) {
+				if (!$state.is(value, v)) {
 					value = v;
 					onValueChange(v);
 				}

packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content.svelte

@@ -1,136 +1,79 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx, updatePositioning } from "../ctx.js";
-	import type { ContentEvents, ContentProps } from "../index.js";
-	import { type Transition, createDispatcher } from "$lib/internal/index.js";
+	import { box } from "svelte-toolbelt";
+	import type { ContentProps } from "../index.js";
+	import { useLinkPreviewContent } from "../link-preview.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
 
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
+	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
+	}: ContentProps = $props();
 
-	type $$Props = ContentProps<T, In, Out>;
-	type $$Events = ContentEvents;
+	const contentState = useLinkPreviewContent({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let side: $$Props["side"] = "bottom";
-	export let align: $$Props["align"] = "center";
-	export let sideOffset: $$Props["sideOffset"] = 0;
-	export let alignOffset: $$Props["alignOffset"] = 0;
-	export let collisionPadding: $$Props["collisionPadding"] = 8;
-	export let avoidCollisions: $$Props["avoidCollisions"] = true;
-	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
-	export let sameWidth: $$Props["sameWidth"] = false;
-	export let fitViewport: $$Props["fitViewport"] = false;
-	export let strategy: $$Props["strategy"] = "absolute";
-	export let overlap: $$Props["overlap"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { content },
-		states: { open },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	$: if (id) {
-		ids.content.set(id);
-	}
-
-	const attrs = getAttrs("content");
-	const dispatch = createDispatcher();
-
-	$: builder = $content;
-	$: Object.assign(builder, attrs);
-
-	$: if ($open) {
-		updatePositioning({
-			side,
-			align,
-			sideOffset,
-			alignOffset,
-			collisionPadding,
-			avoidCollisions,
-			collisionBoundary,
-			sameWidth,
-			fitViewport,
-			strategy,
-			overlap,
-		});
-	}
+	const floatingProps = $derived({
+		side,
+		sideOffset,
+		align,
+		avoidCollisions,
+		arrowPadding,
+		sticky,
+		hideWhenDetached,
+		collisionPadding,
+	});
 </script>
 
-{#if asChild && $open}
-	<slot {builder} />
-{:else if transition && $open}
-	<div
-		bind:this={ref}
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerenter={dispatch}
-		on:m-pointerleave={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $open}
-	<div
-		bind:this={ref}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerenter={dispatch}
-		on:m-pointerleave={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $open}
-	<div
-		bind:this={ref}
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerenter={dispatch}
-		on:m-pointerleave={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $open}
-	<div
-		bind:this={ref}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerenter={dispatch}
-		on:m-pointerleave={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if $open}
-	<div
-		bind:this={ref}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerenter={dispatch}
-		on:m-pointerleave={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{/if}
+<PopperLayer
+	{...restProps}
+	{...floatingProps}
+	present={contentState.root.open.value || forceMount}
+	{id}
+	onInteractOutside={(e) => {
+		onInteractOutside?.(e);
+		if (e.defaultPrevented) return;
+		contentState.root.immediateClose();
+	}}
+	onEscapeKeydown={(e) => {
+		// TODO: users should be able to cancel this
+		onEscapeKeydown?.(e);
+		contentState.root.immediateClose();
+	}}
+	onMountAutoFocus={(e) => e.preventDefault()}
+	onDestroyAutoFocus={(e) => e.preventDefault()}
+	trapped={false}
+	loop={false}
+	preventScroll={false}
+>
+	{#snippet popper({ props })}
+		{@const mergedProps = mergeProps(restProps, contentState.props, props)}
+		{#if child}
+			{@render child?.({ props: mergedProps })}
+		{:else}
+			<div {...mergedProps} bind:this={ref}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</PopperLayer>

packages/bits-ui/src/lib/bits/link-preview/components/link-preview-trigger.svelte

@@ -1,46 +1,36 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { TriggerEvents, TriggerProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import { box } from "svelte-toolbelt";
+	import type { TriggerProps } from "../index.js";
+	import { useLinkPreviewTrigger } from "../link-preview.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
 
-	type $$Props = TriggerProps;
-	type $$Events = TriggerEvents;
+	let {
+		ref = $bindable(null),
+		id = useId(),
+		child,
+		children,
+		...restProps
+	}: TriggerProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let el: $$Props["el"] = undefined;
+	const triggerState = useLinkPreviewTrigger({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
-	const {
-		elements: { trigger },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("trigger");
-
-	$: if (id) {
-		ids.trigger.set(id);
-	}
-	$: builder = $trigger;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<svelte:element
-		this="a"
-		bind:this={ref}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-blur={dispatch}
-		on:m-focus={dispatch}
-		on:m-pointerenter={dispatch}
-		on:m-pointerleave={dispatch}
-	>
-		<slot {builder} />
-	</svelte:element>
-{/if}
+<FloatingLayer.Anchor {id}>
+	{#if child}
+		{@render child?.({ props: mergedProps })}
+	{:else}
+		<a {...mergedProps}>
+			{@render children?.()}
+		</a>
+	{/if}
+</FloatingLayer.Anchor>