@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.1-next.47f435fc9.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',
@@ -80,7 +81,6 @@ const USDSuffix = () => (
 		<span>USD</span>
 	</InputControlSuffixWrapper>
 );
-
 type DataType = {
 	id: number;
 	text: string;
@@ -89,6 +89,8 @@ type DataType = {
 	textWithTextarea: string;
 	integer: number;
 	integerWithElements: number;
+	number?: number;
+	numberWithElements?: number;
 	boolean: boolean;
 	booleanWithToggle: boolean;
 	booleanWithElements: boolean;
@@ -127,6 +129,8 @@ const data: DataType[] = [
 		textWithTextarea: 'Textarea',
 		integer: 1,
 		integerWithElements: 1,
+		number: 10.25,
+		numberWithElements: 2,
 		boolean: true,
 		booleanWithToggle: true,
 		booleanWithElements: true,
@@ -135,7 +139,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 +215,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 +261,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 +324,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 +528,7 @@ type ControlTypes =
 	| 'datetime'
 	| 'email'
 	| 'integer'
+	| 'number'
 	| 'password'
 	| 'radio'
 	| 'select'
@@ -622,7 +656,7 @@ const FieldTypeStory = ( {
 	);
 };
 
-export const All = ( {
+export const AllComponent = ( {
 	type,
 	Edit,
 }: {
@@ -631,8 +665,9 @@ export const All = ( {
 } ) => {
 	return <FieldTypeStory fields={ fields } type={ type } Edit={ Edit } />;
 };
+AllComponent.storyName = 'All types';
 
-export const Text = ( {
+export const TextComponent = ( {
 	type,
 	Edit,
 }: {
@@ -646,8 +681,9 @@ export const Text = ( {
 
 	return <FieldTypeStory fields={ textFields } type={ type } Edit={ Edit } />;
 };
+TextComponent.storyName = 'text';
 
-export const Integer = ( {
+export const IntegerComponent = ( {
 	type,
 	Edit,
 }: {
@@ -663,8 +699,27 @@ export const Integer = ( {
 		<FieldTypeStory fields={ integerFields } type={ type } Edit={ Edit } />
 	);
 };
+IntegerComponent.storyName = 'integer';
+
+export const NumberComponent = ( {
+	type,
+	Edit,
+}: {
+	type: PanelTypes;
+	Edit: ControlTypes;
+} ) => {
+	const numberFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'number' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory fields={ numberFields } type={ type } Edit={ Edit } />
+	);
+};
+NumberComponent.storyName = 'number';
 
-export const Boolean = ( {
+export const BooleanComponent = ( {
 	type,
 	Edit,
 }: {
@@ -680,8 +735,9 @@ export const Boolean = ( {
 		<FieldTypeStory fields={ booleanFields } type={ type } Edit={ Edit } />
 	);
 };
+BooleanComponent.storyName = 'boolean';
 
-export const DateTime = ( {
+export const DateTimeComponent = ( {
 	type,
 	Edit,
 }: {
@@ -697,8 +753,9 @@ export const DateTime = ( {
 		<FieldTypeStory fields={ dateTimeFields } type={ type } Edit={ Edit } />
 	);
 };
+DateTimeComponent.storyName = 'datetime';
 
-export const Date = ( {
+export const DateComponent = ( {
 	type,
 	Edit,
 }: {
@@ -712,8 +769,9 @@ export const Date = ( {
 
 	return <FieldTypeStory fields={ dateFields } type={ type } Edit={ Edit } />;
 };
+DateComponent.storyName = 'date';
 
-export const Email = ( {
+export const EmailComponent = ( {
 	type,
 	Edit,
 }: {
@@ -729,8 +787,9 @@ export const Email = ( {
 		<FieldTypeStory fields={ emailFields } type={ type } Edit={ Edit } />
 	);
 };
+EmailComponent.storyName = 'email';
 
-export const Telephone = ( {
+export const TelephoneComponent = ( {
 	type,
 	Edit,
 }: {
@@ -750,8 +809,9 @@ export const Telephone = ( {
 		/>
 	);
 };
+TelephoneComponent.storyName = 'telephone';
 
-export const Url = ( {
+export const UrlComponent = ( {
 	type,
 	Edit,
 }: {
@@ -765,8 +825,9 @@ export const Url = ( {
 
 	return <FieldTypeStory fields={ urlFields } type={ type } Edit={ Edit } />;
 };
+UrlComponent.storyName = 'url';
 
-export const Color = ( {
+export const ColorComponent = ( {
 	type,
 	Edit,
 }: {
@@ -782,8 +843,9 @@ export const Color = ( {
 		<FieldTypeStory fields={ colorFields } type={ type } Edit={ Edit } />
 	);
 };
+ColorComponent.storyName = 'color';
 
-export const Media = ( {
+export const MediaComponent = ( {
 	type,
 	Edit,
 }: {
@@ -799,8 +861,9 @@ export const Media = ( {
 		<FieldTypeStory fields={ mediaFields } type={ type } Edit={ Edit } />
 	);
 };
+MediaComponent.storyName = 'media';
 
-export const Array = ( {
+export const ArrayComponent = ( {
 	type,
 	Edit,
 }: {
@@ -820,8 +883,9 @@ export const Array = ( {
 		/>
 	);
 };
+ArrayComponent.storyName = 'array';
 
-export const Password = ( {
+export const PasswordComponent = ( {
 	type,
 	Edit,
 }: {
@@ -837,8 +901,9 @@ export const Password = ( {
 		<FieldTypeStory fields={ passwordFields } type={ type } Edit={ Edit } />
 	);
 };
+PasswordComponent.storyName = 'password';
 
-export const NoType = ( {
+export const NoTypeComponent = ( {
 	type,
 	Edit,
 }: {
@@ -854,3 +919,4 @@ export const NoType = ( {
 		<FieldTypeStory fields={ noTypeFields } type={ type } Edit={ Edit } />
 	);
 };
+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>,
 	},

package/src/test/{filter-and-sort-data-view.js → filter-sort-and-paginate.js}

@@ -6,8 +6,8 @@ import { subDays, subYears } from 'date-fns';
 /**
  * Internal dependencies
  */
-import { filterSortAndPaginate } from '../filter-and-sort-data-view';
-import { data, fields } from '../components/dataviews/stories/fixtures';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
+import { data, fields } from '../stories/dataviews.fixtures';
 
 describe( 'filters', () => {
 	it( 'should return empty if the data is empty', () => {
@@ -119,7 +119,7 @@ describe( 'filters', () => {
 		);
 
 		// Should find items with "Planet" in categories (case-insensitive)
-		expect( result ).toHaveLength( 8 );
+		expect( result ).toHaveLength( 9 );
 		expect( result.map( ( r ) => r.name.title ) ).toContain( 'Neptune' );
 		expect( result.map( ( r ) => r.name.title ) ).toContain( 'Mercury' );
 		expect( result.map( ( r ) => r.name.title ) ).toContain( 'Earth' );
@@ -158,7 +158,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 16 );
+		expect( result ).toHaveLength( 17 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -175,6 +175,9 @@ describe( 'filters', () => {
 		expect( result[ 13 ].name.title ).toBe( 'Mars' );
 		expect( result[ 14 ].name.title ).toBe( 'Jupiter' );
 		expect( result[ 15 ].name.title ).toBe( 'Saturn' );
+		expect( result[ 16 ].name.title ).toBe(
+			'Thessalonikopolymnianebuchodonossarinacharybdis'
+		);
 	} );
 
 	it( 'should search using IS ANY filter for STRING values', () => {
@@ -210,7 +213,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 10 );
+		expect( result ).toHaveLength( 11 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -221,6 +224,9 @@ describe( 'filters', () => {
 		expect( result[ 7 ].name.title ).toBe( 'Triton' );
 		expect( result[ 8 ].name.title ).toBe( 'Nereid' );
 		expect( result[ 9 ].name.title ).toBe( 'Proteus' );
+		expect( result[ 10 ].name.title ).toBe(
+			'Thessalonikopolymnianebuchodonossarinacharybdis'
+		);
 	} );
 
 	it( 'should search using IS ANY filter for ARRAY values', () => {
@@ -256,7 +262,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 14 );
+		expect( result ).toHaveLength( 15 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -271,6 +277,9 @@ describe( 'filters', () => {
 		expect( result[ 11 ].name.title ).toBe( 'Jupiter' );
 		expect( result[ 12 ].name.title ).toBe( 'Saturn' );
 		expect( result[ 13 ].name.title ).toBe( 'Uranus' );
+		expect( result[ 14 ].name.title ).toBe(
+			'Thessalonikopolymnianebuchodonossarinacharybdis'
+		);
 	} );
 
 	it( 'should search using IS ALL filter', () => {
@@ -339,7 +348,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 18 );
+		expect( result ).toHaveLength( 19 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -358,6 +367,9 @@ describe( 'filters', () => {
 		expect( result[ 15 ].name.title ).toBe( 'Jupiter' );
 		expect( result[ 16 ].name.title ).toBe( 'Saturn' );
 		expect( result[ 17 ].name.title ).toBe( 'Uranus' );
+		expect( result[ 18 ].name.title ).toBe(
+			'Thessalonikopolymnianebuchodonossarinacharybdis'
+		);
 	} );
 
 	it( 'should filter using LESS THAN operator for integer', () => {
@@ -463,7 +475,7 @@ describe( 'filters', () => {
 			fields
 		);
 		// Should return items that don't contain "Solar system" in description
-		expect( result ).toHaveLength( 11 );
+		expect( result ).toHaveLength( 12 );
 		expect(
 			result.filter( ( r ) =>
 				r.name.description.includes( 'Solar system' )
@@ -479,6 +491,7 @@ describe( 'filters', () => {
 			'Moon',
 			'Nereid',
 			'Proteus',
+			'Thessalonikopolymnianebuchodonossarinacharybdis',
 			'Triton',
 			'Venus',
 		] );
@@ -648,7 +661,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result.length ).toBe( 16 );
+		expect( result.length ).toBe( 17 );
 		expect( result.map( ( r ) => r.name.title ) ).not.toContain(
 			'Neptune'
 		);
@@ -722,6 +735,40 @@ describe( 'filters', () => {
 		expect( result.map( ( r ) => r.name.title ) ).toEqual( [ 'Uranus' ] );
 	} );
 
+	it( 'should filter decimal numbers within narrow BETWEEN ranges', () => {
+		const decimalData = [
+			{ id: 1, price: 2.42 },
+			{ id: 2, price: 2.58 },
+			{ id: 3, price: 3.1 },
+		];
+		const decimalFields = [
+			{
+				id: 'price',
+				type: 'number',
+				getValue: ( { item } ) => item.price,
+				filterBy: {
+					operators: [ 'between' ],
+				},
+			},
+		];
+
+		const { data: result } = filterSortAndPaginate(
+			decimalData,
+			{
+				filters: [
+					{
+						field: 'price',
+						operator: 'between',
+						value: [ 2.4, 2.6 ],
+					},
+				],
+			},
+			decimalFields
+		);
+
+		expect( result.map( ( r ) => r.id ).sort() ).toEqual( [ 1, 2 ] );
+	} );
+
 	it( 'should filter dates inclusively between min and max using BETWEEN operator', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
@@ -863,7 +910,7 @@ describe( 'sorting', () => {
 			fields
 		);
 
-		expect( result ).toHaveLength( 18 );
+		expect( result ).toHaveLength( 19 );
 
 		expect( result[ 0 ].type ).toBe( 'Gas giant' );
 		expect( result[ 0 ].name.title ).toBe( 'Saturn' );
@@ -911,7 +958,7 @@ describe( 'sorting', () => {
 			fields
 		);
 
-		expect( result ).toHaveLength( 18 );
+		expect( result ).toHaveLength( 19 );
 		expect( result[ 0 ].name.title ).toBe( 'Saturn' );
 		expect( result[ 1 ].name.title ).toBe( 'Jupiter' );
 		expect( result[ 2 ].name.title ).toBe( 'Uranus' );
@@ -945,7 +992,7 @@ describe( 'sorting', () => {
 			},
 			fields
 		);
-		expect( resultDesc ).toHaveLength( 18 );
+		expect( resultDesc ).toHaveLength( 19 );
 		expect( resultDesc[ 0 ].name.title ).toBe( 'Europa' );
 		expect( resultDesc[ 1 ].name.title ).toBe( 'Earth' );
 		// Skip intermediate items
@@ -961,7 +1008,7 @@ describe( 'sorting', () => {
 			},
 			fields
 		);
-		expect( resultAsc ).toHaveLength( 18 );
+		expect( resultAsc ).toHaveLength( 19 );
 		expect( resultAsc[ 0 ].name.title ).toBe( 'Jupiter' );
 		expect( resultAsc[ 1 ].name.title ).toBe( 'Io' );
 		// Skip intermediate items
@@ -983,7 +1030,7 @@ describe( 'sorting', () => {
 			)
 		);
 
-		expect( result ).toHaveLength( 18 );
+		expect( result ).toHaveLength( 19 );
 		expect( result[ 0 ].name.title ).toBe( 'Saturn' );
 		expect( result[ 1 ].name.title ).toBe( 'Jupiter' );
 		expect( result[ 2 ].name.title ).toBe( 'Uranus' );
@@ -1031,7 +1078,7 @@ describe( 'sorting', () => {
 			}
 		}
 
-		expect( groupCount ).toBe( 4 );
+		expect( groupCount ).toBe( 5 );
 	} );
 } );
 
@@ -1051,7 +1098,7 @@ describe( 'pagination', () => {
 		expect( result[ 1 ].name.title ).toBe( 'Ganymede' );
 		expect( paginationInfo ).toStrictEqual( {
 			totalItems: data.length,
-			totalPages: 9,
+			totalPages: 10,
 		} );
 	} );
 } );

package/src/test/normalize-fields.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { normalizeFields } from '../normalize-fields';
+import normalizeFields from '../utils/normalize-fields';
 import type { Field } from '../types';
 
 describe( 'normalizeFields: default getValue', () => {
@@ -206,6 +206,28 @@ describe( 'normalizeFields: default getValue', () => {
 			} );
 		} );
 
+		it( 'returns the field type definition for number fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'price',
+					type: 'number',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toStrictEqual( {
+				operators: [
+					'is',
+					'isNot',
+					'lessThan',
+					'greaterThan',
+					'lessThanOrEqual',
+					'greaterThanOrEqual',
+					'between',
+				],
+			} );
+		} );
+
 		it( 'returns the field type definition for typed fields (for primary filters)', () => {
 			const fields: Field< {} >[] = [
 				{