@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.0

package/src/{field-types/stories/index.story.tsx → stories/field-types.story.tsx}

@@ -14,10 +14,10 @@ import { starFilled } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import DataViews from '../../components/dataviews/index';
-import DataForm from '../../components/dataform/index';
-import { filterSortAndPaginate } from '../../filter-and-sort-data-view';
-import type { View, Form, Field } from '../../types';
+import DataViews from '../components/dataviews/index';
+import DataForm from '../components/dataform/index';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
+import type { View, Form, Field } from '../types';
 
 const meta = {
 	title: 'DataViews/FieldTypes',
@@ -42,6 +42,7 @@ const meta = {
 				'datetime',
 				'email',
 				'integer',
+				'number',
 				'password',
 				'radio',
 				'select',
@@ -52,10 +53,17 @@ const meta = {
 				'toggleGroup',
 			],
 		},
+		asyncElements: {
+			control: { type: 'boolean' },
+			description:
+				'Whether the filter should fetch elements asynchronously.',
+			options: [ true, false ],
+		},
 	},
 	args: {
 		type: 'regular',
 		Edit: 'default',
+		asyncElements: false,
 	},
 };
 export default meta;
@@ -80,7 +88,6 @@ const USDSuffix = () => (
 		<span>USD</span>
 	</InputControlSuffixWrapper>
 );
-
 type DataType = {
 	id: number;
 	text: string;
@@ -89,6 +96,8 @@ type DataType = {
 	textWithTextarea: string;
 	integer: number;
 	integerWithElements: number;
+	number?: number;
+	numberWithElements?: number;
 	boolean: boolean;
 	booleanWithToggle: boolean;
 	booleanWithElements: boolean;
@@ -127,6 +136,8 @@ const data: DataType[] = [
 		textWithTextarea: 'Textarea',
 		integer: 1,
 		integerWithElements: 1,
+		number: 10.25,
+		numberWithElements: 2,
 		boolean: true,
 		booleanWithToggle: true,
 		booleanWithElements: true,
@@ -135,7 +146,7 @@ const data: DataType[] = [
 		date: '2021-01-01',
 		dateWithElements: '2021-01-01',
 		email: 'hi@example.com',
-		emailWithElements: 'hi@example.com',
+		emailWithElements: 'bob@example.com',
 		telephone: '+1-555-123-4567',
 		telephoneWithElements: '+1-555-123-4567',
 		color: '#ff6600',
@@ -211,6 +222,29 @@ const fields: Field< DataType >[] = [
 			{ value: 2, label: 'Two' },
 			{ value: 3, label: 'Three' },
 		],
+		setValue: ( { value } ) => ( {
+			integerWithElements: parseInt( value, 10 ),
+		} ),
+	},
+	{
+		id: 'number',
+		type: 'number',
+		label: 'Number',
+		description: 'Number field increments by 0.01.',
+	},
+	{
+		id: 'numberWithElements',
+		type: 'number',
+		label: 'Number (with elements)',
+		description: 'Number field with elements.',
+		elements: [
+			{ value: 1, label: 'One' },
+			{ value: 2, label: 'Two' },
+			{ value: 3, label: 'Three' },
+		],
+		setValue: ( { value } ) => ( {
+			numberWithElements: Number( value ),
+		} ),
 	},
 	{
 		id: 'boolean',
@@ -234,6 +268,9 @@ const fields: Field< DataType >[] = [
 			{ value: true, label: 'It is true' },
 			{ value: false, label: 'It is false' },
 		],
+		setValue: ( { value } ) => ( {
+			booleanWithElements: value === 'true' ? true : false,
+		} ),
 	},
 	{
 		id: 'datetime',
@@ -294,6 +331,9 @@ const fields: Field< DataType >[] = [
 			{ value: 'jane@example.com', label: 'Jane Doe' },
 			{ value: 'bob@example.com', label: 'Bob Smith' },
 		],
+		setValue: ( { value } ) => ( {
+			emailWithElements: value,
+		} ),
 	},
 	{
 		id: 'telephone',
@@ -495,6 +535,7 @@ type ControlTypes =
 	| 'datetime'
 	| 'email'
 	| 'integer'
+	| 'number'
 	| 'password'
 	| 'radio'
 	| 'select'
@@ -508,23 +549,44 @@ interface FieldTypeStoryProps {
 	fields: Field< DataType >[];
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 }
 
 const FieldTypeStory = ( {
 	fields: _fields,
 	type,
 	Edit,
+	asyncElements,
 }: FieldTypeStoryProps ) => {
 	const storyFields = useMemo( () => {
-		if ( Edit === 'default' ) {
-			return _fields;
+		let fieldsToProcess = _fields;
+
+		if ( Edit !== 'default' ) {
+			fieldsToProcess = _fields.map( ( field: Field< DataType > ) => ( {
+				...field,
+				Edit,
+			} ) );
+		}
+
+		if ( asyncElements ) {
+			fieldsToProcess = fieldsToProcess.map( ( field ) => {
+				if ( field.elements ) {
+					const elements = field.elements;
+					return {
+						...field,
+						elements: undefined,
+						getElements: () =>
+							new Promise( ( resolve ) =>
+								setTimeout( () => resolve( elements ), 3500 )
+							),
+					};
+				}
+				return field;
+			} );
 		}
 
-		return _fields.map( ( field: Field< DataType > ) => ( {
-			...field,
-			Edit,
-		} ) );
-	}, [ _fields, Edit ] );
+		return fieldsToProcess;
+	}, [ _fields, Edit, asyncElements ] );
 	const form = useMemo(
 		() => ( {
 			layout: { type },
@@ -622,37 +684,59 @@ const FieldTypeStory = ( {
 	);
 };
 
-export const All = ( {
+export const AllComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
-	return <FieldTypeStory fields={ fields } type={ type } Edit={ Edit } />;
+	return (
+		<FieldTypeStory
+			fields={ fields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
 };
+AllComponent.storyName = 'All types';
 
-export const Text = ( {
+export const TextComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const textFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'text' ),
 		[]
 	);
 
-	return <FieldTypeStory fields={ textFields } type={ type } Edit={ Edit } />;
+	return (
+		<FieldTypeStory
+			fields={ textFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
 };
+TextComponent.storyName = 'text';
 
-export const Integer = ( {
+export const IntegerComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const integerFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'integer' ),
@@ -660,16 +744,49 @@ export const Integer = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ integerFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ integerFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+IntegerComponent.storyName = 'integer';
 
-export const Boolean = ( {
+export const NumberComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
+} ) => {
+	const numberFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'number' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ numberFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
+};
+NumberComponent.storyName = 'number';
+
+export const BooleanComponent = ( {
+	type,
+	Edit,
+	asyncElements,
+}: {
+	type: PanelTypes;
+	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const booleanFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'boolean' ),
@@ -677,48 +794,73 @@ export const Boolean = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ booleanFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ booleanFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+BooleanComponent.storyName = 'boolean';
 
-export const DateTime = ( {
+export const DateTimeComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
-	const dateTimeFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'datetime' ),
-		[]
+	const datetimeFields = fields.filter( ( field ) =>
+		field.id.startsWith( 'datetime' )
 	);
 
 	return (
-		<FieldTypeStory fields={ dateTimeFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ datetimeFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+DateTimeComponent.storyName = 'datetime';
 
-export const Date = ( {
+export const DateComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const dateFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'date' ),
 		[]
 	);
 
-	return <FieldTypeStory fields={ dateFields } type={ type } Edit={ Edit } />;
+	return (
+		<FieldTypeStory
+			fields={ dateFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
 };
+DateComponent.storyName = 'date';
 
-export const Email = ( {
+export const EmailComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const emailFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'email' ),
@@ -726,20 +868,27 @@ export const Email = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ emailFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ emailFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+EmailComponent.storyName = 'email';
 
-export const Telephone = ( {
+export const TelephoneComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
-	const telephoneFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'telephone' ),
-		[]
+	const telephoneFields = fields.filter( ( field ) =>
+		field.id.startsWith( 'telephone' )
 	);
 
 	return (
@@ -747,31 +896,45 @@ export const Telephone = ( {
 			fields={ telephoneFields }
 			type={ type }
 			Edit={ Edit }
+			asyncElements={ asyncElements }
 		/>
 	);
 };
+TelephoneComponent.storyName = 'telephone';
 
-export const Url = ( {
+export const UrlComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const urlFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'url' ),
 		[]
 	);
 
-	return <FieldTypeStory fields={ urlFields } type={ type } Edit={ Edit } />;
+	return (
+		<FieldTypeStory
+			fields={ urlFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
 };
+UrlComponent.storyName = 'url';
 
-export const Color = ( {
+export const ColorComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const colorFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'color' ),
@@ -779,16 +942,24 @@ export const Color = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ colorFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ colorFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+ColorComponent.storyName = 'color';
 
-export const Media = ( {
+export const MediaComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const mediaFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'media' ),
@@ -796,16 +967,24 @@ export const Media = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ mediaFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ mediaFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+MediaComponent.storyName = 'media';
 
-export const Array = ( {
+export const ArrayComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const arrayTextFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'array' ),
@@ -817,33 +996,44 @@ export const Array = ( {
 			fields={ arrayTextFields }
 			type={ type }
 			Edit={ Edit }
+			asyncElements={ asyncElements }
 		/>
 	);
 };
+ArrayComponent.storyName = 'array';
 
-export const Password = ( {
+export const PasswordComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
-	const passwordFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'password' ),
-		[]
+	const passwordFields = fields.filter( ( field ) =>
+		field.id.startsWith( 'password' )
 	);
 
 	return (
-		<FieldTypeStory fields={ passwordFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ passwordFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+PasswordComponent.storyName = 'password';
 
-export const NoType = ( {
+export const NoTypeComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const noTypeFields = useMemo(
 		() => fields.filter( ( field ) => field.type === undefined ),
@@ -851,6 +1041,12 @@ export const NoType = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ noTypeFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ noTypeFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+NoTypeComponent.storyName = 'No type';

package/src/style.scss

@@ -1,20 +1,21 @@
-@import "./components/dataviews/style.scss";
-@import "./components/dataviews-bulk-actions/style.scss";
-@import "./components/dataviews-filters/style.scss";
-@import "./components/dataviews-footer/style.scss";
-@import "./components/dataviews-pagination/style.scss";
-@import "./components/dataviews-item-actions/style.scss";
-@import "./components/dataviews-picker/style.scss";
-@import "./components/dataviews-selection-checkbox/style.scss";
-@import "./components/dataviews-view-config/style.scss";
+@use "./components/dataviews/style.scss" as *;
+@use "./components/dataviews-bulk-actions/style.scss" as *;
+@use "./components/dataviews-filters/style.scss" as *;
+@use "./components/dataviews-footer/style.scss" as *;
+@use "./components/dataviews-pagination/style.scss" as *;
+@use "./components/dataviews-item-actions/style.scss" as *;
+@use "./components/dataviews-picker/style.scss" as *;
+@use "./components/dataviews-selection-checkbox/style.scss" as *;
+@use "./components/dataviews-view-config/style.scss" as *;
 
-@import "./dataviews-layouts/grid/style.scss";
-@import "./dataviews-layouts/list/style.scss";
-@import "./dataviews-layouts/table/style.scss";
-@import "./dataviews-layouts/picker-grid/style.scss";
+@use "./dataviews-layouts/grid/style.scss" as *;
+@use "./dataviews-layouts/list/style.scss" as *;
+@use "./dataviews-layouts/table/style.scss" as *;
+@use "./dataviews-layouts/picker-grid/style.scss" as *;
 
-@import "./dataform-controls/style.scss";
-@import "./dataforms-layouts/panel/style.scss";
-@import "./dataforms-layouts/regular/style.scss";
-@import "./dataforms-layouts/card/style.scss";
-@import "./dataforms-layouts/row/style.scss";
+@use "./dataform-controls/style.scss" as *;
+@use "./dataform-layouts/panel/style.scss" as *;
+@use "./dataform-layouts/regular/style.scss" as *;
+@use "./dataform-layouts/card/style.scss" as *;
+@use "./dataform-layouts/row/style.scss" as *;
+@use "./dataform-layouts/style.scss" as *;

package/src/test/dataform.tsx

@@ -144,6 +144,42 @@ describe( 'DataForm component', () => {
 			}
 		} );
 
+		it( 'should allow decimal input for number fields', async () => {
+			const onChange = jest.fn();
+			const fieldsWithNumber = [
+				...fields,
+				{
+					id: 'price',
+					label: 'Price',
+					type: 'number' as const,
+				},
+			];
+			const formWithNumber = {
+				...form,
+				fields: [ ...form.fields, 'price' ],
+			};
+			render(
+				<Dataform
+					onChange={ onChange }
+					fields={ fieldsWithNumber }
+					form={ formWithNumber }
+					data={ { ...data, price: 2.5 } }
+				/>
+			);
+
+			const priceInput = screen.getByRole( 'spinbutton', {
+				name: /price/i,
+			} );
+			expect( priceInput ).toHaveValue( 2.5 );
+
+			const user = userEvent.setup();
+			await user.clear( priceInput );
+			await user.type( priceInput, '3.75' );
+
+			expect( onChange ).toHaveBeenLastCalledWith( { price: 3.75 } );
+			expect( priceInput ).toHaveValue( 3.75 );
+		} );
+
 		it( 'should wrap fields in HStack when labelPosition is set to side', async () => {
 			const { container } = render(
 				<Dataform

package/src/test/dataviews-picker.tsx

@@ -15,7 +15,7 @@ import { useMemo, useState } from '@wordpress/element';
 import DataViewsPicker from '../components/dataviews-picker';
 import { LAYOUT_PICKER_GRID } from '../constants';
 import type { ActionButton, View, ViewPickerGrid } from '../types';
-import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 
 type Data = {
 	id: number;

package/src/test/dataviews.tsx

@@ -15,7 +15,7 @@ import { useMemo, useState } from '@wordpress/element';
 import DataViews from '../components/dataviews';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
 import type { Action, View } from '../types';
-import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 
 type Data = {
 	id: number;
@@ -89,7 +89,6 @@ const actions: Action< Data >[] = [
 	{
 		id: 'delete',
 		label: 'Delete',
-		isDestructive: true,
 		supportsBulk: true,
 		RenderModal: () => <div>Modal Content</div>,
 	},