next: things (#687)

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -22,7 +22,7 @@
 		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
 		onOpenAutoFocus = noop,
-		onInteractOutsideStart = noop,
+		onInteractOutside = noop,
 		preventScroll = true,
 		trapFocus = true,
 		...restProps
@@ -73,7 +73,7 @@
 						enabled={present.current}
 						{interactOutsideBehavior}
 						onInteractOutside={(e) => {
-							onInteractOutsideStart(e);
+							onInteractOutside(e);
 							if (e.defaultPrevented) return;
 							contentState.root.handleClose();
 						}}

packages/bits-ui/src/lib/bits/alert-dialog/types.ts

@@ -23,4 +23,4 @@ export type AlertDialogContentPropsWithoutHTML = Omit<
 	DialogContentPropsWithoutHTML,
 	"onInteractOutside"
 >;
-export type AlertDialogContentProps = Omit<DialogContentProps, "onInteractOutside">;
+export type AlertDialogContentProps = DialogContentProps;

packages/bits-ui/src/lib/bits/context-menu/components/context-menu-content-static.svelte

@@ -19,7 +19,6 @@
 		onInteractOutside = noop,
 		// we need to explicitly pass this prop to the PopperLayer to override
 		// the default menu behavior of handling outside interactions on the trigger
-		onInteractOutsideStart = noop,
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
@@ -48,18 +47,14 @@
 		}
 	}
 
-	const mergedProps = $derived(
-		mergeProps(restProps, contentState.props, {
-			onInteractOutsideStart: handleInteractOutsideStart,
-		})
-	);
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
 <PopperLayer
 	isStatic={true}
 	{...mergedProps}
 	present={contentState.parentMenu.open.current || forceMount}
-	{onInteractOutsideStart}
+	onInteractOutsideStart={handleInteractOutsideStart}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;

packages/bits-ui/src/lib/bits/context-menu/components/context-menu-content.svelte

@@ -20,7 +20,6 @@
 		onInteractOutside = noop,
 		// we need to explicitly pass this prop to the PopperLayer to override
 		// the default menu behavior of handling outside interactions on the trigger
-		onInteractOutsideStart = noop,
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
@@ -49,11 +48,7 @@
 		}
 	}
 
-	const mergedProps = $derived(
-		mergeProps(restProps, contentState.props, {
-			onInteractOutsideStart: handleInteractOutsideStart,
-		})
-	);
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
 <PopperLayer
@@ -62,7 +57,7 @@
 	sideOffset={2}
 	align="start"
 	present={contentState.parentMenu.open.current || forceMount}
-	{onInteractOutsideStart}
+	onInteractOutsideStart={handleInteractOutsideStart}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;

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

@@ -25,6 +25,7 @@
 		required = false,
 		controlledPlaceholder = false,
 		controlledValue = false,
+		errorMessageId,
 		children,
 	}: RootProps = $props();
 
@@ -77,6 +78,8 @@
 		readonlySegments: box.with(() => readonlySegments),
 		required: box.with(() => required),
 		onInvalid: box.with(() => onInvalid),
+		errorMessageId: box.with(() => errorMessageId),
+		isInvalidProp: box.with(() => undefined),
 	});
 </script>
 

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

@@ -1,6 +1,6 @@
 import type { Updater } from "svelte/store";
 import type { DateValue } from "@internationalized/date";
-import type { WritableBox } from "svelte-toolbelt";
+import { type WritableBox, box } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
 import type { DateRangeFieldRootState } from "../date-range-field/date-range-field.svelte.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
@@ -81,6 +81,8 @@ export type DateFieldRootStateProps = WritableBoxedValues<{
 		locale: string;
 		hideTimeZone: boolean;
 		required: boolean;
+		errorMessageId: string | undefined;
+		isInvalidProp: boolean | undefined;
 	}>;
 
 export class DateFieldRootState {
@@ -98,6 +100,8 @@ export class DateFieldRootState {
 	hideTimeZone: DateFieldRootStateProps["hideTimeZone"];
 	required: DateFieldRootStateProps["required"];
 	onInvalid: DateFieldRootStateProps["onInvalid"];
+	errorMessageId: DateFieldRootStateProps["errorMessageId"];
+	isInvalidProp: DateFieldRootStateProps["isInvalidProp"];
 	descriptionId = useId();
 	formatter: Formatter;
 	initialSegments: SegmentValueObj;
@@ -123,7 +127,7 @@ export class DateFieldRootState {
 		 */
 		this.value = props.value;
 		this.placeholder = rangeRoot ? rangeRoot.placeholder : props.placeholder;
-		this.validate = rangeRoot ? rangeRoot.validate : props.validate;
+		this.validate = rangeRoot ? box(undefined) : props.validate;
 		this.minValue = rangeRoot ? rangeRoot.minValue : props.minValue;
 		this.maxValue = rangeRoot ? rangeRoot.maxValue : props.maxValue;
 		this.disabled = rangeRoot ? rangeRoot.disabled : props.disabled;
@@ -135,6 +139,8 @@ export class DateFieldRootState {
 		this.hideTimeZone = rangeRoot ? rangeRoot.hideTimeZone : props.hideTimeZone;
 		this.required = rangeRoot ? rangeRoot.required : props.required;
 		this.onInvalid = rangeRoot ? rangeRoot.onInvalid : props.onInvalid;
+		this.errorMessageId = rangeRoot ? rangeRoot.errorMessageId : props.errorMessageId;
+		this.isInvalidProp = props.isInvalidProp;
 		this.formatter = createFormatter(this.locale.current);
 		this.initialSegments = initializeSegmentValues(this.inferredGranularity);
 		this.segmentValues = this.initialSegments;
@@ -387,6 +393,7 @@ export class DateFieldRootState {
 
 	isInvalid = $derived.by(() => {
 		if (this.validationStatus === false) return false;
+		if (this.isInvalidProp.current) return true;
 		return true;
 	});
 
@@ -571,10 +578,10 @@ export class DateFieldRootState {
 
 		const descriptionId = this.descriptionNode?.id;
 		const hasDescription = isFirstSegment(segmentId, this.#fieldNode) && descriptionId;
-		const validationId = this.validationNode?.id;
+		const errorMsgId = this.errorMessageId?.current;
 
 		const describedBy = hasDescription
-			? `${descriptionId} ${this.isInvalid && validationId ? validationId : ""}`
+			? `${descriptionId} ${this.isInvalid && errorMsgId ? errorMsgId : ""}`
 			: undefined;
 
 		const contenteditable = !(

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

@@ -152,6 +152,12 @@ export type DateFieldRootPropsWithoutHTML = WithChildren<{
 	 * @defaultValue false
 	 */
 	controlledPlaceholder?: boolean;
+
+	/**
+	 * The `id` of the element which contains the error messages for the date field when the
+	 * date is invalid.
+	 */
+	errorMessageId?: string;
 }>;
 
 export type DateFieldRootProps = DateFieldRootPropsWithoutHTML;

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

@@ -44,6 +44,7 @@
 		controlledPlaceholder = false,
 		controlledValue = false,
 		controlledOpen = false,
+		errorMessageId,
 		children,
 	}: RootProps = $props();
 
@@ -148,6 +149,8 @@
 		locale: pickerRootState.props.locale,
 		required: pickerRootState.props.required,
 		placeholder: pickerRootState.props.placeholder,
+		errorMessageId: box.with(() => errorMessageId),
+		isInvalidProp: box.with(() => undefined),
 	});
 </script>
 

packages/bits-ui/src/lib/bits/date-picker/types.ts

@@ -285,6 +285,12 @@ export type DatePickerRootPropsWithoutHTML = WithChildren<{
 	 * @defaultValue false
 	 */
 	controlledOpen?: boolean;
+
+	/**
+	 * The `id` of the element which contains the error messages for the date field when the
+	 * date is invalid.
+	 */
+	errorMessageId?: string;
 }>;
 
 export type DatePickerRootProps = DatePickerRootPropsWithoutHTML;

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

@@ -34,6 +34,7 @@
 		onEndValueChange = noop,
 		controlledPlaceholder = false,
 		controlledValue = false,
+		errorMessageId,
 		...restProps
 	}: RootProps = $props();
 
@@ -117,6 +118,7 @@
 			}
 		),
 		onInvalid: box.with(() => onInvalid),
+		errorMessageId: box.with(() => errorMessageId),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));