@wordpress/dataviews 11.4.1-next.v.0 → 12.0.0

package/src/field-types/stories/index.story.tsx

@@ -34,6 +34,7 @@ const meta = {
 				'Chooses the Edit function for the field. "Default" means use the default Edit function for the field type.',
 			options: [
 				'default',
+				'adaptiveSelect',
 				'array',
 				'checkbox',
 				'color',
@@ -59,11 +60,18 @@ const meta = {
 				'Whether the filter should fetch elements asynchronously.',
 			options: [ true, false ],
 		},
+		manyElements: {
+			control: { type: 'boolean' },
+			description:
+				'Add 10 more elements to push over the threshold and trigger Combobox rendering',
+			if: { arg: 'Edit', eq: 'adaptiveSelect' },
+		},
 	},
 	args: {
 		type: 'regular',
 		Edit: 'default',
 		asyncElements: false,
+		manyElements: false,
 	},
 };
 export default meta;
@@ -169,6 +177,23 @@ const data: DataType[] = [
 	},
 ];
 
+// Helper function to generate additional elements for demonstrating the threshold
+function generateAdditionalElements(
+	count: number,
+	prefix: string
+): { value: any; label: string }[] {
+	const additional = [];
+	for ( let i = 1; i <= count; i++ ) {
+		additional.push( {
+			value: `${ prefix }${ i + 3 }`,
+			label: `${ prefix.charAt( 0 ).toUpperCase() + prefix.slice( 1 ) } ${
+				i + 3
+			}`,
+		} );
+	}
+	return additional;
+}
+
 const fields: Field< DataType >[] = [
 	{
 		id: 'text',
@@ -528,6 +553,7 @@ const fields: Field< DataType >[] = [
 type PanelTypes = 'regular' | 'panel';
 type ControlTypes =
 	| 'default'
+	| 'adaptiveSelect'
 	| 'array'
 	| 'checkbox'
 	| 'color'
@@ -551,6 +577,7 @@ interface FieldTypeStoryProps {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 }
 
 const FieldTypeStory = ( {
@@ -558,6 +585,7 @@ const FieldTypeStory = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: FieldTypeStoryProps ) => {
 	const storyFields = useMemo( () => {
 		let fieldsToProcess = _fields;
@@ -569,6 +597,27 @@ const FieldTypeStory = ( {
 			} ) );
 		}
 
+		// Expand elements when adaptiveSelect is selected and manyElements is toggled
+		if ( Edit === 'adaptiveSelect' && manyElements ) {
+			fieldsToProcess = fieldsToProcess.map( ( field ) => {
+				if ( field.elements && Array.isArray( field.elements ) ) {
+					const fieldIdPrefix = field.id.replace(
+						'WithElements',
+						''
+					);
+					const additionalElements = generateAdditionalElements(
+						10,
+						fieldIdPrefix
+					);
+					return {
+						...field,
+						elements: [ ...field.elements, ...additionalElements ],
+					};
+				}
+				return field;
+			} );
+		}
+
 		if ( asyncElements ) {
 			fieldsToProcess = fieldsToProcess.map( ( field ) => {
 				if ( field.elements ) {
@@ -578,7 +627,7 @@ const FieldTypeStory = ( {
 						elements: undefined,
 						getElements: () =>
 							new Promise( ( resolve ) =>
-								setTimeout( () => resolve( elements ), 3500 )
+								setTimeout( () => resolve( elements ), 500 )
 							),
 					};
 				}
@@ -587,7 +636,7 @@ const FieldTypeStory = ( {
 		}
 
 		return fieldsToProcess;
-	}, [ _fields, Edit, asyncElements ] );
+	}, [ _fields, Edit, asyncElements, manyElements ] );
 	const form = useMemo(
 		() => ( {
 			layout: { type },
@@ -619,7 +668,7 @@ const FieldTypeStory = ( {
 		null;
 
 	return (
-		<Stack direction="row" gap="xs" align="stretch">
+		<Stack direction="row" gap="sm" align="stretch">
 			<div style={ { flex: 2 } }>
 				<DataViews
 					getItemId={ ( item ) => item.id.toString() }
@@ -649,7 +698,7 @@ const FieldTypeStory = ( {
 				/>
 			</div>
 			{ selectedItem ? (
-				<Stack direction="column" gap="xs" align="top">
+				<Stack direction="column" gap="sm" align="top">
 					<DataForm
 						data={ selectedItem }
 						form={ form }
@@ -673,7 +722,7 @@ const FieldTypeStory = ( {
 			) : (
 				<Stack
 					direction="column"
-					gap="xs"
+					gap="sm"
 					align="center"
 					justify="center"
 				>
@@ -694,10 +743,12 @@ export const AllComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	return (
 		<FieldTypeStory
@@ -705,6 +756,7 @@ export const AllComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -714,10 +766,12 @@ export const TextComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const textFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'text' ),
@@ -730,6 +784,7 @@ export const TextComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -739,11 +794,13 @@ export const IntegerComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 	formatSeparatorThousand,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 	formatSeparatorThousand?: string;
 } ) => {
 	const integerFields = useMemo(
@@ -770,6 +827,7 @@ export const IntegerComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -789,6 +847,7 @@ export const NumberComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 	formatSeparatorThousand,
 	formatSeparatorDecimal,
 	formatDecimals,
@@ -796,6 +855,7 @@ export const NumberComponent = ( {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 	formatSeparatorThousand?: string;
 	formatSeparatorDecimal?: string;
 	formatDecimals?: number;
@@ -840,6 +900,7 @@ export const NumberComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -871,10 +932,12 @@ export const BooleanComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const booleanFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'boolean' ),
@@ -887,6 +950,7 @@ export const BooleanComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -896,12 +960,14 @@ export const DateTimeComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 	formatDatetime,
 	formatWeekStartsOn,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 	formatDatetime?: string;
 	formatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 } ) => {
@@ -937,6 +1003,7 @@ export const DateTimeComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -972,12 +1039,14 @@ export const DateComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 	formatDate,
 	formatWeekStartsOn,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 	formatDate?: string;
 	formatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 } ) => {
@@ -1013,6 +1082,7 @@ export const DateComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -1048,10 +1118,12 @@ export const EmailComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const emailFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'email' ),
@@ -1064,6 +1136,7 @@ export const EmailComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -1073,10 +1146,12 @@ export const TelephoneComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const telephoneFields = fields.filter( ( field ) =>
 		field.id.startsWith( 'telephone' )
@@ -1088,6 +1163,7 @@ export const TelephoneComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -1097,10 +1173,12 @@ export const UrlComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const urlFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'url' ),
@@ -1113,6 +1191,7 @@ export const UrlComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -1122,10 +1201,12 @@ export const ColorComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const colorFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'color' ),
@@ -1138,6 +1219,7 @@ export const ColorComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -1147,10 +1229,12 @@ export const MediaComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const mediaFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'media' ),
@@ -1163,6 +1247,7 @@ export const MediaComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -1172,10 +1257,12 @@ export const ArrayComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const arrayTextFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'array' ),
@@ -1188,6 +1275,7 @@ export const ArrayComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -1197,10 +1285,12 @@ export const PasswordComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const passwordFields = fields.filter( ( field ) =>
 		field.id.startsWith( 'password' )
@@ -1212,6 +1302,7 @@ export const PasswordComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };
@@ -1221,10 +1312,12 @@ export const NoTypeComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	manyElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	manyElements: boolean;
 } ) => {
 	const noTypeFields = useMemo(
 		() => fields.filter( ( field ) => field.type === undefined ),
@@ -1237,6 +1330,7 @@ export const NoTypeComponent = ( {
 			type={ type }
 			Edit={ Edit }
 			asyncElements={ asyncElements }
+			manyElements={ manyElements }
 		/>
 	);
 };