@wordpress/dataviews 11.0.0 → 11.1.0

package/src/stories/dataviews.story.tsx

@@ -161,45 +161,94 @@ Default.argTypes = {
 	},
 };
 
-export const Empty = () => {
+const PlanetIllustration = () => (
+	<svg
+		width="120"
+		height="120"
+		viewBox="0 0 120 120"
+		fill="none"
+		style={ { opacity: 0.6 } }
+	>
+		<circle cx="60" cy="60" r="35" fill="#9ca3af" />
+		<ellipse
+			cx="60"
+			cy="60"
+			rx="55"
+			ry="12"
+			stroke="#9ca3af"
+			strokeWidth="3"
+			fill="none"
+		/>
+	</svg>
+);
+
+const CustomEmptyComponent = () => (
+	<VStack alignment="center" justify="center" spacing={ 3 }>
+		<PlanetIllustration />
+		<Text>No celestial bodies found</Text>
+	</VStack>
+);
+
+const EmptyComponent = ( {
+	customEmpty,
+	containerHeight,
+	isLoading,
+}: {
+	customEmpty?: boolean;
+	containerHeight?: 'auto' | '50vh' | '100vh';
+	isLoading?: boolean;
+} ) => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
 		fields: [ 'title', 'description', 'categories' ],
 	} );
 
 	return (
-		<DataViews
-			getItemId={ ( item ) => item.id.toString() }
-			paginationInfo={ { totalItems: 0, totalPages: 0 } }
-			data={ [] }
-			view={ view }
-			fields={ fields }
-			onChangeView={ setView }
-			actions={ actions }
-			defaultLayouts={ defaultLayouts }
-		/>
+		<div
+			style={ {
+				display: 'flex',
+				flexDirection: 'column',
+				height: containerHeight,
+			} }
+		>
+			<DataViews
+				getItemId={ ( item ) => item.id.toString() }
+				paginationInfo={ { totalItems: 0, totalPages: 0 } }
+				data={ [] }
+				view={ view }
+				fields={ fields }
+				onChangeView={ setView }
+				actions={ actions }
+				defaultLayouts={ defaultLayouts }
+				isLoading={ isLoading }
+				empty={ customEmpty ? <CustomEmptyComponent /> : undefined }
+			/>
+		</div>
 	);
 };
 
-export const CustomEmpty = () => {
-	const [ view, setView ] = useState< View >( {
-		...DEFAULT_VIEW,
-		fields: [ 'title', 'description', 'categories' ],
-	} );
-
-	return (
-		<DataViews
-			getItemId={ ( item ) => item.id.toString() }
-			paginationInfo={ { totalItems: 0, totalPages: 0 } }
-			data={ [] }
-			view={ view }
-			fields={ fields }
-			onChangeView={ setView }
-			actions={ actions }
-			defaultLayouts={ defaultLayouts }
-			empty={ <p>{ view.search ? 'No sites found' : 'No sites' }</p> }
-		/>
-	);
+export const Empty = {
+	render: EmptyComponent,
+	args: {
+		customEmpty: false,
+		containerHeight: '50vh',
+		isLoading: false,
+	},
+	argTypes: {
+		customEmpty: {
+			control: 'boolean',
+			description: 'Use custom empty state with planet illustration',
+		},
+		containerHeight: {
+			control: 'select',
+			options: [ 'auto', '50vh', '100vh' ],
+			description: 'Height of the container',
+		},
+		isLoading: {
+			control: 'boolean',
+			description: 'Show loading state',
+		},
+	},
 };
 
 const MinimalUIComponent = ( {

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

@@ -733,14 +733,29 @@ export const IntegerComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	formatSeparatorThousand,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	formatSeparatorThousand?: string;
 } ) => {
 	const integerFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'integer' ),
-		[]
+		() =>
+			fields
+				.filter( ( field ) => field.type === 'integer' )
+				.map( ( field ) => {
+					if ( formatSeparatorThousand !== undefined ) {
+						return {
+							...field,
+							format: {
+								separatorThousand: formatSeparatorThousand,
+							},
+						};
+					}
+					return field;
+				} ),
+		[ formatSeparatorThousand ]
 	);
 
 	return (
@@ -753,19 +768,64 @@ export const IntegerComponent = ( {
 	);
 };
 IntegerComponent.storyName = 'integer';
+IntegerComponent.args = {
+	formatSeparatorThousand: ',',
+};
+IntegerComponent.argTypes = {
+	formatSeparatorThousand: {
+		control: 'text',
+		description:
+			'Character used as thousand separator (e.g., "," for "1,234"). Default is ",".',
+	},
+};
 
 export const NumberComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	formatSeparatorThousand,
+	formatSeparatorDecimal,
+	formatDecimals,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	formatSeparatorThousand?: string;
+	formatSeparatorDecimal?: string;
+	formatDecimals?: number;
 } ) => {
 	const numberFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'number' ),
-		[]
+		() =>
+			fields
+				.filter( ( field ) => field.type === 'number' )
+				.map( ( field ) => {
+					if (
+						formatSeparatorThousand !== undefined ||
+						formatSeparatorDecimal !== undefined ||
+						formatDecimals !== undefined
+					) {
+						const format: {
+							separatorThousand?: string;
+							separatorDecimal?: string;
+							decimals?: number;
+						} = {};
+						if ( formatSeparatorThousand !== undefined ) {
+							format.separatorThousand = formatSeparatorThousand;
+						}
+						if ( formatSeparatorDecimal !== undefined ) {
+							format.separatorDecimal = formatSeparatorDecimal;
+						}
+						if ( formatDecimals !== undefined ) {
+							format.decimals = formatDecimals;
+						}
+						return {
+							...field,
+							format,
+						};
+					}
+					return field;
+				} ),
+		[ formatSeparatorThousand, formatSeparatorDecimal, formatDecimals ]
 	);
 
 	return (
@@ -778,6 +838,28 @@ export const NumberComponent = ( {
 	);
 };
 NumberComponent.storyName = 'number';
+NumberComponent.args = {
+	formatSeparatorThousand: ',',
+	formatSeparatorDecimal: '.',
+	formatDecimals: 2,
+};
+NumberComponent.argTypes = {
+	formatSeparatorThousand: {
+		control: 'text',
+		description:
+			'Character used as thousand separator (e.g., "," for "1,234"). Default is ",".',
+	},
+	formatSeparatorDecimal: {
+		control: 'text',
+		description:
+			'Character used as decimal separator (e.g., "." for "1.23"). Default is ".".',
+	},
+	formatDecimals: {
+		control: { type: 'number', min: 0, max: 100, step: 1 },
+		description:
+			'Number of decimal places to display (0-100). Default is 2.',
+	},
+};
 
 export const BooleanComponent = ( {
 	type,

package/src/test/filter-sort-and-paginate.js

@@ -307,7 +307,7 @@ describe( 'filters', () => {
 		expect( result[ 7 ].name.title ).toBe( 'Uranus' );
 	} );
 
-	it( 'should search using IS NOT ALL filter', () => {
+	it( 'should search using IS NOT ALL filter (deprecated operator)', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{
@@ -321,6 +321,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
+		expect( console ).toHaveWarned();
 		expect( result ).toHaveLength( 10 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );

package/src/test/normalize-fields.ts

@@ -348,13 +348,10 @@ describe( 'normalizeFields: default getValue', () => {
 				},
 			];
 			const normalizedFields = normalizeFields( fields );
-			expect( normalizedFields[ 0 ].format ).toBeDefined();
-			expect( normalizedFields[ 0 ].format.date ).toBeDefined();
-			expect( typeof normalizedFields[ 0 ].format.date ).toBe( 'string' );
-			expect( normalizedFields[ 0 ].format.weekStartsOn ).toBeDefined();
-			expect( typeof normalizedFields[ 0 ].format.weekStartsOn ).toBe(
-				'number'
-			);
+			expect( normalizedFields[ 0 ].format ).toEqual( {
+				date: expect.any( String ),
+				weekStartsOn: expect.any( Number ),
+			} );
 		} );
 
 		it( 'preserves custom format when provided', () => {
@@ -369,8 +366,10 @@ describe( 'normalizeFields: default getValue', () => {
 				},
 			];
 			const normalizedFields = normalizeFields( fields );
-			expect( normalizedFields[ 0 ].format.date ).toBe( 'F j, Y' );
-			expect( normalizedFields[ 0 ].format.weekStartsOn ).toBe( 1 );
+			expect( normalizedFields[ 0 ].format ).toEqual( {
+				date: 'F j, Y',
+				weekStartsOn: 1,
+			} );
 		} );
 
 		it( 'adds empty format for non-date field types', () => {
@@ -379,14 +378,91 @@ describe( 'normalizeFields: default getValue', () => {
 					id: 'title',
 					type: 'text',
 				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].format ).toEqual( {} );
+		} );
+
+		it( 'applies default format for number fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'price',
+					type: 'number',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].format ).toEqual( {
+				separatorThousand: ',',
+				separatorDecimal: '.',
+				decimals: 2,
+			} );
+		} );
+
+		it( 'preserves custom format for number fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'price',
+					type: 'number',
+					format: {
+						separatorThousand: ' ',
+						separatorDecimal: ',',
+						decimals: 3,
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].format ).toEqual( {
+				separatorThousand: ' ',
+				separatorDecimal: ',',
+				decimals: 3,
+			} );
+		} );
+
+		it( 'applies partial custom format for number fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'price',
+					type: 'number',
+					format: {
+						decimals: 0,
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].format ).toEqual( {
+				separatorThousand: ',',
+				separatorDecimal: '.',
+				decimals: 0,
+			} );
+		} );
+
+		it( 'applies default format for integer fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'count',
+					type: 'integer',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].format ).toEqual( {
+				separatorThousand: ',',
+			} );
+		} );
+
+		it( 'preserves custom format for integer fields', () => {
+			const fields: Field< {} >[] = [
 				{
 					id: 'count',
 					type: 'integer',
+					format: {
+						separatorThousand: '.',
+					},
 				},
 			];
 			const normalizedFields = normalizeFields( fields );
-			expect( normalizedFields[ 0 ].format ).toEqual( {} );
-			expect( normalizedFields[ 1 ].format ).toEqual( {} );
+			expect( normalizedFields[ 0 ].format ).toEqual( {
+				separatorThousand: '.',
+			} );
 		} );
 	} );
 } );