make name prop consistent with date field and range field

huntabyte · Aug 2, 2024 · e748967 · e748967
1 parent 4cffcf0
commit e748967
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 21 deletions.
diff --git a/packages/bits-ui/src/lib/bits/date-field/components/date-field-input.svelte b/packages/bits-ui/src/lib/bits/date-field/components/date-field-input.svelte
@@ -9,6 +9,7 @@
 	let {
 		id = useId(),
 		ref = $bindable(null),
+		name = "",
 		children,
 		child,
 		...restProps
@@ -20,6 +21,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		name: box.with(() => name),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, inputState.props));

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
@@ -15,7 +15,6 @@
 		locale = "en",
 		maxValue,
 		minValue,
-		name = "",
 		onPlaceholderChange = noop,
 		onValueChange = noop,
 		placeholder = $bindable(),
@@ -64,7 +63,6 @@
 		readonly: box.with(() => readonly),
 		readonlySegments: box.with(() => readonlySegments),
 		required: box.with(() => required),
-		name: box.with(() => name),
 	});
 </script>
 

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
@@ -74,7 +74,6 @@ export type DateFieldRootStateProps = WritableBoxedValues<{
 		hourCycle: HourCycle | undefined;
 		locale: string;
 		hideTimeZone: boolean;
-		name: string;
 		required: boolean;
 	}>;
 
@@ -91,7 +90,6 @@ export class DateFieldRootState {
 	hourCycle: DateFieldRootStateProps["hourCycle"];
 	locale: DateFieldRootStateProps["locale"];
 	hideTimeZone: DateFieldRootStateProps["hideTimeZone"];
-	name: DateFieldRootStateProps["name"];
 	required: DateFieldRootStateProps["required"];
 	descriptionId = useId();
 	formatter: Formatter;
@@ -107,6 +105,7 @@ export class DateFieldRootState {
 	states = initSegmentStates();
 	dayPeriodNode = $state<HTMLElement | null>(null);
 	rangeRoot: DateRangeFieldRootState | undefined = undefined;
+	name = $state("");
 
 	constructor(props: DateFieldRootStateProps, rangeRoot?: DateRangeFieldRootState) {
 		this.rangeRoot = rangeRoot;
@@ -128,7 +127,6 @@ export class DateFieldRootState {
 		this.locale = rangeRoot ? rangeRoot.locale : props.locale;
 		this.hideTimeZone = rangeRoot ? rangeRoot.hideTimeZone : props.hideTimeZone;
 		this.required = rangeRoot ? rangeRoot.required : props.required;
-		this.name = props.name;
 		this.formatter = createFormatter(this.locale.current);
 		this.initialSegments = initializeSegmentValues(this.inferredGranularity);
 		this.segmentValues = this.initialSegments;
@@ -185,6 +183,10 @@ export class DateFieldRootState {
 		});
 	}
 
+	setName = (name: string) => {
+		this.name = name;
+	};
+
 	/**
 	 * Sets the field node for the `DateFieldRootState` instance. We use this method so we can
 	 * keep `#fieldNode` private to prevent accidental usage of the incorrect field node.
@@ -569,17 +571,26 @@ export class DateFieldRootState {
 	}
 }
 
-type DateFieldInputStateProps = WithRefProps;
+type DateFieldInputStateProps = WithRefProps &
+	ReadableBoxedValues<{
+		name: string;
+	}>;
 
 class DateFieldInputState {
 	#id: DateFieldInputStateProps["id"];
 	#ref: DateFieldInputStateProps["ref"];
+	#name: DateFieldInputStateProps["name"];
 	root: DateFieldRootState;
 
 	constructor(props: DateFieldInputStateProps, root: DateFieldRootState) {
 		this.#id = props.id;
 		this.#ref = props.ref;
 		this.root = root;
+		this.#name = props.name;
+
+		$effect(() => {
+			this.root.setName(this.#name.current);
+		});
 
 		useRefById({
 			id: this.#id,
@@ -614,7 +625,7 @@ class DateFieldInputState {
 
 class DateFieldHiddenInputState {
 	#root: DateFieldRootState;
-	shouldRender = $derived.by(() => this.#root.name.current !== "");
+	shouldRender = $derived.by(() => this.#root.name !== "");
 	isoValue = $derived.by(() =>
 		this.#root.value.current ? this.#root.value.current.toString() : ""
 	);
@@ -625,7 +636,7 @@ class DateFieldHiddenInputState {
 
 	props = $derived.by(() => {
 		return {
-			name: this.#root.name.current,
+			name: this.#root.name,
 			value: this.isoValue,
 			required: this.#root.required.current,
 			"aria-hidden": getAriaHidden(true),

diff --git a/packages/bits-ui/src/lib/bits/date-field/types.ts b/packages/bits-ui/src/lib/bits/date-field/types.ts
@@ -115,14 +115,6 @@ export type DateFieldRootPropsWithoutHTML = {
 	 */
 	hideTimeZone?: boolean;
 
-	/**
-	 * The name to use for the hidden input element of the date field,
-	 * which is used to submit the ISO string value of the date field
-	 * to a server. If not provided, the hidden input element will not
-	 * be rendered.
-	 */
-	name?: string;
-
 	/**
 	 * Whether or not the hidden input of the date field requires a value
 	 * to be submitted.
@@ -138,7 +130,18 @@ export type DateFieldRootProps = DateFieldRootPropsWithoutHTML;
 
 export type DateFieldInputSnippetProps = { segments: Array<{ part: SegmentPart; value: string }> };
 
-export type DateFieldInputPropsWithoutHTML = WithChild<{}, DateFieldInputSnippetProps>;
+export type DateFieldInputPropsWithoutHTML = WithChild<
+	{
+		/**
+		 * The name to use for the hidden input element of the date field,
+		 * which is used to submit the ISO string value of the date field
+		 * to a server. If not provided, the hidden input element will not
+		 * be rendered.
+		 */
+		name?: string;
+	},
+	DateFieldInputSnippetProps
+>;
 
 export type DateFieldInputProps = DateFieldInputPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, DateFieldInputPropsWithoutHTML>;

diff --git a/packages/bits-ui/src/tests/date-field/DateFieldTest.svelte b/packages/bits-ui/src/tests/date-field/DateFieldTest.svelte
@@ -1,18 +1,20 @@
 <script lang="ts" context="module">
 	import { DateField, type DateFieldRootProps, type WithoutChildrenOrChild } from "$lib/index.js";
-	export type DateFieldTestProps = WithoutChildrenOrChild<DateFieldRootProps>;
+	export type DateFieldTestProps = WithoutChildrenOrChild<DateFieldRootProps> & {
+		name?: string;
+	};
 </script>
 
 <script lang="ts">
-	let { value, placeholder, ...restProps }: DateFieldTestProps = $props();
+	let { value, placeholder, name, ...restProps }: DateFieldTestProps = $props();
 </script>
 
 <main>
 	<div data-testid="value">{value}</div>
 	<DateField.Root bind:value bind:placeholder {...restProps}>
 		<div>
 			<DateField.Label data-testid="label">Label</DateField.Label>
-			<DateField.Input data-testid="input">
+			<DateField.Input data-testid="input" {name}>
 				{#snippet children({ segments })}
 					{#each segments as { part, value }}
 						<DateField.Segment

diff --git a/sites/TODO.md b/sites/TODO.md
@@ -2,7 +2,7 @@
 
 These are outstanding tasks that need to be completed or addressed before the project is ready for release.
 
--   [ ] Make the component which receives the `name` prop consistent across the `DateField` and `DateRangeField`, `DatePicker` and `DateRangePicker` components.
+-   [x] Make the component which receives the `name` prop consistent across the `DateField` and `DateRangeField`, `DatePicker` and `DateRangePicker` components.
 -   [ ] Determine how to handle validation for the various date and time components. Ideally in a way that those using libraries like `sveltekit-superforms` and those that aren't can both benefit from.
 -   [ ] Determine the ideal approach for managing the `data-<component>` attributes.
 -   [ ] Expose the various `open` states via snippet props for all compoents with the `forceMount` prop for controlled transitions and animations. Thinking more about this, we don't need to pass it via `children`, only via the `child` snippet.