@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

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< {} >[] = [
 				{

package/src/test/normalize-form-fields.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import normalizeFormFields from '../normalize-form-fields';
+import normalizeFormFields from '../dataform-layouts/normalize-form-fields';
 import type { Form } from '../types';
 
 describe( 'normalizeFormFields', () => {
@@ -104,6 +104,7 @@ describe( 'normalizeFormFields', () => {
 						type: 'panel',
 						labelPosition: 'side',
 						openAs: 'dropdown',
+						summary: [],
 					},
 				},
 			] );
@@ -122,6 +123,7 @@ describe( 'normalizeFormFields', () => {
 						type: 'panel',
 						labelPosition: 'top',
 						openAs: 'dropdown',
+						summary: [],
 					},
 				},
 			] );
@@ -140,15 +142,22 @@ describe( 'normalizeFormFields', () => {
 						type: 'card',
 						withHeader: true,
 						isOpened: true,
+						summary: [],
 					},
 				},
 			] );
 		} );
 
-		it( 'card: enforces isOpened=true when withHeader=false', () => {
+		it( 'card: enforces isOpened=true and summary=[] when withHeader=false', () => {
 			const form: Form = {
 				// @ts-ignore - Test intentionally uses invalid type to verify runtime behavior.
-				layout: { type: 'card', withHeader: false, isOpened: false },
+				layout: {
+					type: 'card',
+					withHeader: false,
+					// @ts-ignore - Test intentionally uses invalid type to verify runtime behavior.
+					isOpened: false,
+					summary: [ { id: 'field1', visibility: 'always' } ],
+				},
 				fields: [ 'field1' ],
 			};
 			const result = normalizeFormFields( form );
@@ -159,14 +168,47 @@ describe( 'normalizeFormFields', () => {
 						type: 'card',
 						withHeader: false,
 						isOpened: true,
+						summary: [],
 					},
 				},
 			] );
 		} );
 
-		it( 'card: respects isOpened when withHeader=true', () => {
+		it( 'card: respects isOpened and summary when withHeader=true', () => {
 			const form: Form = {
-				layout: { type: 'card', withHeader: true, isOpened: false },
+				layout: {
+					type: 'card',
+					withHeader: true,
+					isOpened: false,
+					summary: [ { id: 'field1', visibility: 'always' } ],
+				},
+				fields: [ 'field1' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: {
+						type: 'card',
+						withHeader: true,
+						isOpened: false,
+						summary: [ { id: 'field1', visibility: 'always' } ],
+					},
+				},
+			] );
+		} );
+
+		it( 'card: normalizes summary to array of objects when it is a string', () => {
+			const form: Form = {
+				layout: {
+					type: 'card',
+					withHeader: true,
+					isOpened: false,
+					summary: [
+						'field2',
+						{ id: 'field1', visibility: 'always' },
+					],
+				},
 				fields: [ 'field1' ],
 			};
 			const result = normalizeFormFields( form );
@@ -177,6 +219,10 @@ describe( 'normalizeFormFields', () => {
 						type: 'card',
 						withHeader: true,
 						isOpened: false,
+						summary: [
+							{ id: 'field2', visibility: 'when-collapsed' },
+							{ id: 'field1', visibility: 'always' },
+						],
 					},
 				},
 			] );
@@ -207,6 +253,7 @@ describe( 'normalizeFormFields', () => {
 						type: 'panel',
 						labelPosition: 'side',
 						openAs: 'dropdown',
+						summary: [],
 					},
 				},
 			] );
@@ -231,6 +278,7 @@ describe( 'normalizeFormFields', () => {
 						type: 'card',
 						withHeader: false,
 						isOpened: true,
+						summary: [],
 					},
 				},
 				{
@@ -239,6 +287,7 @@ describe( 'normalizeFormFields', () => {
 						type: 'card',
 						withHeader: true,
 						isOpened: false,
+						summary: [],
 					},
 				},
 			] );