Allow Dataform Select Box to have a custom empty option (#70894)

* Only define "select item" if blank value is not provided

* Update storybook

Author: mikejolley

packages/dataviews/src/components/dataform/stories/index.story.tsx

@@ -71,6 +71,7 @@ const fields = [
 		label: 'Date as options',
 		type: 'datetime' as const,
 		elements: [
+			{ value: '', label: 'Select a date' },
 			{ value: '1970-02-23T12:00:00', label: "Jane's birth date" },
 			{ value: '1950-02-23T12:00:00', label: "John's birth date" },
 		],

packages/dataviews/src/dataform-controls/select.tsx

@@ -26,17 +26,24 @@ export default function Select< Item >( {
 		[ id, onChange ]
 	);
 
-	const elements = [
-		/*
-		 * Value can be undefined when:
-		 *
-		 * - the field is not required
-		 * - in bulk editing
-		 *
-		 */
-		{ label: __( 'Select item' ), value: '' },
-		...( field?.elements ?? [] ),
-	];
+	const fieldElements = field?.elements ?? [];
+	const hasEmptyValue = fieldElements.some(
+		( { value: elementValue } ) => elementValue === ''
+	);
+
+	const elements = hasEmptyValue
+		? fieldElements
+		: [
+				/*
+				 * Value can be undefined when:
+				 *
+				 * - the field is not required
+				 * - in bulk editing
+				 *
+				 */
+				{ label: __( 'Select item' ), value: '' },
+				...fieldElements,
+		  ];
 
 	return (
 		<SelectControl