displayFormat is an empty object for non-date field types

oandregal · oandregal · commit 7f735adf8ec0 · 2025-11-11T12:43:25.000+01:00
diff --git a/packages/dataviews/src/dataform-controls/date.tsx b/packages/dataviews/src/dataform-controls/date.tsx
@@ -258,11 +258,17 @@ function CalendarDateControl< Item >( {
 	hideLabelFromVision,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { id, label, setValue, getValue, isValid } = field;
+	const { id, type, label, setValue, getValue, isValid, displayFormat } =
+		field;
 	const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
 		null
 	);
 
+	let weekStartsOn;
+	if ( type === 'date' ) {
+		weekStartsOn = weekStartsOnToNumber( displayFormat.weekStartsOn );
+	}
+
 	const fieldValue = getValue( { item: data } );
 	const value = typeof fieldValue === 'string' ? fieldValue : undefined;
 	const [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {
@@ -396,9 +402,7 @@ function CalendarDateControl< Item >( {
 						month={ calendarMonth }
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
-						weekStartsOn={ weekStartsOnToNumber(
-							field.displayFormat.weekStartsOn
-						) }
+						weekStartsOn={ weekStartsOn }
 					/>
 				</VStack>
 			</BaseControl>
@@ -413,7 +417,7 @@ function CalendarDateRangeControl< Item >( {
 	hideLabelFromVision,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { id, label, getValue, setValue } = field;
+	const { id, type, label, getValue, setValue, displayFormat } = field;
 	let value: DateRange;
 	const fieldValue = getValue( { item: data } );
 	if (
@@ -424,6 +428,11 @@ function CalendarDateRangeControl< Item >( {
 		value = fieldValue as DateRange;
 	}
 
+	let weekStartsOn;
+	if ( type === 'date' ) {
+		weekStartsOn = weekStartsOnToNumber( displayFormat.weekStartsOn );
+	}
+
 	const onChangeCallback = useCallback(
 		( newValue: DateRange ) => {
 			onChange(
@@ -611,9 +620,7 @@ function CalendarDateRangeControl< Item >( {
 						month={ calendarMonth }
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezone.string || undefined }
-						weekStartsOn={ weekStartsOnToNumber(
-							field.displayFormat.weekStartsOn
-						) }
+						weekStartsOn={ weekStartsOn }
 					/>
 				</VStack>
 			</BaseControl>
diff --git a/packages/dataviews/src/field-types/date.tsx b/packages/dataviews/src/field-types/date.tsx
@@ -48,6 +48,15 @@ export default {
 			return '';
 		}
 
+		// Not all fields have displayFormat, but date fields do.
+		//
+		// At runtime, this method will never be called for non-date fields.
+		// However, the type system does not know this, so we need to check it.
+		// There's an opportunity here to improve the type system.
+		if ( field.type !== 'date' ) {
+			return '';
+		}
+
 		return dateI18n( field.displayFormat.date, value );
 	},
 	enableSorting: true,
diff --git a/packages/dataviews/src/test/normalize-fields.ts b/packages/dataviews/src/test/normalize-fields.ts
@@ -374,7 +374,7 @@ describe( 'normalizeFields: default getValue', () => {
 			);
 		} );
 
-		it( 'always adds displayFormat.date and displayFormat.weekStartsOn for all field types', () => {
+		it( 'adds empty displayFormat for non-date field types', () => {
 			const fields: Field< {} >[] = [
 				{
 					id: 'title',
@@ -386,14 +386,8 @@ describe( 'normalizeFields: default getValue', () => {
 				},
 			];
 			const normalizedFields = normalizeFields( fields );
-			expect( normalizedFields[ 0 ].displayFormat.date ).toBeDefined();
-			expect( normalizedFields[ 1 ].displayFormat.date ).toBeDefined();
-			expect(
-				normalizedFields[ 0 ].displayFormat.weekStartsOn
-			).toBeDefined();
-			expect(
-				normalizedFields[ 1 ].displayFormat.weekStartsOn
-			).toBeDefined();
+			expect( normalizedFields[ 0 ].displayFormat ).toEqual( {} );
+			expect( normalizedFields[ 1 ].displayFormat ).toEqual( {} );
 		} );
 	} );
 } );
diff --git a/packages/dataviews/src/types/field-api.ts b/packages/dataviews/src/types/field-api.ts
@@ -335,7 +335,7 @@ type DisplayFormatDate = {
 		| 'saturday';
 };
 
-export type NormalizedField< Item > = Omit< Field< Item >, 'Edit' > & {
+type NormalizedFieldBase< Item > = Omit< Field< Item >, 'Edit' > & {
 	label: string;
 	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
@@ -349,9 +349,22 @@ export type NormalizedField< Item > = Omit< Field< Item >, 'Edit' > & {
 	enableSorting: boolean;
 	filterBy: NormalizedFilterByConfig | false;
 	readOnly: boolean;
+};
+
+export type NormalizedFieldDate< Item > = NormalizedFieldBase< Item > & {
+	type: 'date';
 	displayFormat: Required< DisplayFormatDate >;
 };
 
+export type NormalizedFieldGeneric< Item > = NormalizedFieldBase< Item > & {
+	type?: Exclude< FieldType, 'date' >;
+	displayFormat: {};
+};
+
+export type NormalizedField< Item > =
+	| NormalizedFieldDate< Item >
+	| NormalizedFieldGeneric< Item >;
+
 /**
  * A collection of dataview fields for a data type.
  */
diff --git a/packages/dataviews/src/utils/normalize-fields.ts b/packages/dataviews/src/utils/normalize-fields.ts
@@ -188,8 +188,15 @@ export default function normalizeFields< Item >(
 
 		const filterBy = getFilterBy( field, fieldTypeDefinition );
 
-		return {
-			...field,
+		// TypeScript is unable to figure out that we're returning the proper types
+		// (either NormalizedFieldDate or NormalizedFieldGeneric)
+		// when the type is part of the object spread below.
+		//
+		// Hence, why we remove it and add back it later.
+		const { type, ...fieldWithoutType } = field;
+
+		const baseField = {
+			...fieldWithoutType,
 			label: field.label || field.id,
 			header: field.header || field.label || field.id,
 			getValue,
@@ -206,21 +213,32 @@ export default function normalizeFields< Item >(
 				true,
 			filterBy,
 			readOnly: field.readOnly ?? fieldTypeDefinition.readOnly ?? false,
-			displayFormat: {
-				date:
-					field.type === 'date' &&
-					field.displayFormat?.date !== undefined &&
-					typeof field.displayFormat.date === 'string'
-						? field.displayFormat.date
-						: getSettings().formats.date,
-				weekStartsOn:
-					field.type === 'date' &&
-					field.displayFormat?.weekStartsOn !== undefined
-						? field.displayFormat.weekStartsOn
-						: numberToWeekStartsOn(
-								getSettings().l10n.startOfWeek
-						  ),
-			},
+		};
+
+		if ( field.type === 'date' ) {
+			return {
+				...baseField,
+				type: 'date' as const,
+				displayFormat: {
+					date:
+						field.displayFormat?.date !== undefined &&
+						typeof field.displayFormat.date === 'string'
+							? field.displayFormat.date
+							: getSettings().formats.date,
+					weekStartsOn:
+						field.displayFormat?.weekStartsOn !== undefined
+							? field.displayFormat.weekStartsOn
+							: numberToWeekStartsOn(
+									getSettings().l10n.startOfWeek
+							  ),
+				},
+			};
+		}
+
+		return {
+			...baseField,
+			type: field.type,
+			displayFormat: {},
 		};
 	} );
 }
