@wordpress/dataviews 5.0.1-next.719a03cbe.0 → 6.0.0

package/src/components/dataviews/stories/index.story.tsx

@@ -20,6 +20,7 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	Button,
 } from '@wordpress/components';
 import { __, _n } from '@wordpress/i18n';
 
@@ -53,7 +54,7 @@ const defaultLayouts = {
 	[ LAYOUT_LIST ]: {},
 };
 
-export const Default = () => {
+export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
 		fields: [ 'categories' ],
@@ -86,10 +87,22 @@ export const Default = () => {
 			) }
 			isItemClickable={ () => true }
 			defaultLayouts={ defaultLayouts }
+			perPageSizes={ perPageSizes }
 		/>
 	);
 };
 
+Default.args = {
+	perPageSizes: [ 10, 25, 50, 100 ],
+};
+
+Default.argTypes = {
+	perPageSizes: {
+		control: 'object',
+		description: 'Array of available page sizes',
+	},
+};
+
 export const Empty = () => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
@@ -110,6 +123,27 @@ export const Empty = () => {
 	);
 };
 
+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={ view.search ? 'No sites found' : 'No sites' }
+		/>
+	);
+};
+
 export const FieldsNoSortableNoHidable = () => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
@@ -261,6 +295,19 @@ export const FreeComposition = () => {
 					table: {},
 					grid: {},
 				} }
+				empty={
+					<VStack
+						justify="space-around"
+						alignment="center"
+						className="free-composition-dataviews-empty"
+					>
+						<Text size={ 18 } as="p">
+							No planets
+						</Text>
+						<Text variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</Text>
+						<Button variant="secondary">Create new planet</Button>
+					</VStack>
+				}
 			>
 				<PlanetOverview planets={ planets } />
 			</DataViews>
@@ -300,14 +347,21 @@ export const WithCard = () => {
 	);
 };
 
-export const CustomPerPageSizes = () => {
+export const GroupByLayout = () => {
 	const [ view, setView ] = useState< View >( {
-		...DEFAULT_VIEW,
-		fields: [ 'categories' ],
+		type: LAYOUT_GRID,
+		search: '',
+		page: 1,
+		perPage: 20,
+		filters: [],
+		fields: [ 'satellites' ],
 		titleField: 'title',
 		descriptionField: 'description',
 		mediaField: 'image',
-		perPage: 3,
+		groupByField: 'type',
+		layout: {
+			badgeFields: [ 'satellites' ],
+		},
 	} );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
@@ -320,9 +374,12 @@ export const CustomPerPageSizes = () => {
 			view={ view }
 			fields={ fields }
 			onChangeView={ setView }
-			actions={ actions.filter( ( action ) => ! action.supportsBulk ) }
-			defaultLayouts={ defaultLayouts }
-			perPageSizes={ [ 3, 6, 12, 24 ] }
+			actions={ actions }
+			defaultLayouts={ {
+				[ LAYOUT_GRID ]: {},
+				[ LAYOUT_LIST ]: {},
+				[ LAYOUT_TABLE ]: {},
+			} }
 		/>
 	);
 };

package/src/components/dataviews/stories/style.css

@@ -23,3 +23,9 @@
 .free-composition-dataviews-layout thead {
 	inset-block-start: 67px;
 }
+
+.free-composition-dataviews-empty  {
+	border: 1px solid #000;
+	border-radius: 8px;
+	padding: 24px;
+}

package/src/components/dataviews-context/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
@@ -47,11 +47,15 @@ type DataViewsContextType< Item > = {
 	isItemClickable: ( item: Item ) => boolean;
 	containerWidth: number;
 	containerRef: React.MutableRefObject< HTMLDivElement | null >;
+	resizeObserverRef:
+		| ( ( element?: HTMLDivElement | null ) => void )
+		| React.RefObject< HTMLDivElement >;
 	defaultLayouts: SupportedLayouts;
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;
-	perPageSizes?: [ number, number, number, number ];
+	perPageSizes: number[];
+	empty?: ReactNode;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -72,10 +76,12 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	renderItemLink: undefined,
 	containerWidth: 0,
 	containerRef: createRef(),
+	resizeObserverRef: () => {},
 	defaultLayouts: { list: {}, grid: {}, table: {} },
 	filters: [],
 	isShowingFilter: false,
 	setIsShowingFilter: () => {},
+	perPageSizes: [],
 } );
 
 export default DataViewsContext;

package/src/components/dataviews-filters/filter.tsx

@@ -309,9 +309,9 @@ const FilterText = ( {
 
 		return createInterpolateElement(
 			sprintf(
-				/* translators: 1: Filter name. 2: Min value. 3: Max value. e.g.: "Item count between (inc): 10-180". */
+				/* translators: 1: Filter name. 2: Min value. 3: Max value. e.g.: "Item count between (inc): 10 and 180". */
 				__(
-					'<Name>%1$s between (inc): </Name><Value>%2$s-%3$s</Value>'
+					'<Name>%1$s between (inc): </Name><Value>%2$s and %3$s</Value>'
 				),
 				filter.name,
 				label[ 0 ],
@@ -497,8 +497,9 @@ export default function Filter( {
 	}
 
 	const isPrimary = filter.isPrimary;
-	const hasValues = filterInView?.value !== undefined;
-	const canResetOrRemove = ! isPrimary || hasValues;
+	const isLocked = filterInView?.isLocked;
+	const hasValues = ! isLocked && filterInView?.value !== undefined;
+	const canResetOrRemove = ! isLocked && ( ! isPrimary || hasValues );
 	return (
 		<Dropdown
 			defaultOpen={ openedFilter === filter.field }
@@ -523,17 +524,26 @@ export default function Filter( {
 								{
 									'has-reset': canResetOrRemove,
 									'has-values': hasValues,
+									'is-not-clickable': isLocked,
 								}
 							) }
 							role="button"
-							tabIndex={ 0 }
-							onClick={ onToggle }
+							tabIndex={ isLocked ? -1 : 0 }
+							onClick={ () => {
+								if ( ! isLocked ) {
+									onToggle();
+								}
+							} }
 							onKeyDown={ ( event ) => {
-								if ( [ ENTER, SPACE ].includes( event.key ) ) {
+								if (
+									! isLocked &&
+									[ ENTER, SPACE ].includes( event.key )
+								) {
 									onToggle();
 									event.preventDefault();
 								}
 							} }
+							aria-disabled={ isLocked }
 							aria-pressed={ isOpen }
 							aria-expanded={ isOpen }
 							ref={ toggleRef }

package/src/components/dataviews-filters/index.tsx

@@ -36,6 +36,10 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 
 			const operators = field.filterBy.operators;
 			const isPrimary = !! field.filterBy?.isPrimary;
+			const isLocked =
+				view.filters?.some(
+					( f ) => f.field === field.id && !! f.isLocked
+				) ?? false;
 			filters.push( {
 				field: field.id,
 				name: field.label,
@@ -45,6 +49,7 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 				),
 				operators,
 				isVisible:
+					isLocked ||
 					isPrimary ||
 					!! view.filters?.some(
 						( f ) =>
@@ -52,11 +57,21 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 							ALL_OPERATORS.includes( f.operator )
 					),
 				isPrimary,
+				isLocked,
 			} );
 		} );
-		// Sort filters by primary property. We need the primary filters to be first.
-		// Then we sort by name.
+
+		// Sort filters by:
+		// - locked filters go first
+		// - primary filters go next
+		// - then, sort by name
 		filters.sort( ( a, b ) => {
+			if ( a.isLocked && ! b.isLocked ) {
+				return -1;
+			}
+			if ( ! a.isLocked && b.isLocked ) {
+				return 1;
+			}
 			if ( a.isPrimary && ! b.isPrimary ) {
 				return -1;
 			}

package/src/components/dataviews-filters/input-widget.tsx

@@ -62,7 +62,13 @@ export default function InputWidget( {
 							..._filter,
 							operator:
 								currentFilter.operator || filter.operators[ 0 ],
-							value: nextValue,
+							// Consider empty strings as undefined:
+							//
+							// - undefined as value means the filter is unset: the filter widget displays no value and the search returns all records
+							// - empty string as value means "search empty string": returns only the records that have an empty string as value
+							//
+							// In practice, this means the filter will not be able to find an empty string as the value.
+							value: nextValue === '' ? undefined : nextValue,
 					  }
 					: _filter
 			),

package/src/components/dataviews-filters/reset-filters.tsx

@@ -28,7 +28,8 @@ export default function ResetFilter( {
 		! view.search &&
 		! view.filters?.some(
 			( _filter ) =>
-				_filter.value !== undefined || ! isPrimary( _filter.field )
+				! _filter.isLocked &&
+				( _filter.value !== undefined || ! isPrimary( _filter.field ) )
 		);
 	return (
 		<Button
@@ -42,7 +43,8 @@ export default function ResetFilter( {
 					...view,
 					page: 1,
 					search: '',
-					filters: [],
+					filters:
+						view.filters?.filter( ( f ) => !! f.isLocked ) || [],
 				} );
 			} }
 		>

package/src/components/dataviews-filters/style.scss

@@ -22,7 +22,9 @@
 	line-height: $default-line-height;
 
 	.components-popover__content {
-		width: 230px;
+		width: 100%;
+		min-width: 230px;
+		max-width: 250px;
 		border-radius: $grid-unit-05;
 	}
 
@@ -78,11 +80,15 @@
 		align-items: center;
 		box-sizing: border-box;
 
+		&.is-not-clickable {
+			cursor: default;
+		}
+
 		&.has-reset {
 			padding-inline-end: $button-size-small + $grid-unit-05;
 		}
 
-		&:hover,
+		&:hover:not(&.is-not-clickable),
 		&:focus-visible,
 		&[aria-expanded="true"] {
 			background: $gray-200;

package/src/components/dataviews-layout/index.tsx

@@ -7,6 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -35,6 +36,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		onClickItem,
 		isItemClickable,
 		renderItemLink,
+		empty = __( 'No results' ),
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -57,6 +59,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 			renderItemLink={ renderItemLink }
 			isItemClickable={ isItemClickable }
 			view={ view }
+			empty={ empty }
 		/>
 	);
 }

package/src/components/dataviews-view-config/index.tsx

@@ -213,10 +213,12 @@ function SortDirectionControl() {
 	);
 }
 
-const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function ItemsPerPageControl() {
 	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
-	const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
+	if ( perPageSizes.length < 2 || perPageSizes.length > 6 ) {
+		return null;
+	}
+
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -238,7 +240,7 @@ function ItemsPerPageControl() {
 				} );
 			} }
 		>
-			{ pageSizeValues.map( ( value ) => {
+			{ perPageSizes.map( ( value ) => {
 				return (
 					<ToggleGroupControlOption
 						key={ value }

package/src/components/stories/index.story.tsx

@@ -266,6 +266,27 @@ export const DateTime = ( {
 	);
 };
 
+export const Date = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const dateFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'date' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ dateFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
 export const Email = ( {
 	type,
 	labelPosition,

package/src/dataform-controls/boolean.tsx

@@ -1,12 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { ToggleControl } from '@wordpress/components';
+import { privateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedToggleControl } = unlock( privateApis );
 
 export default function Boolean< Item >( {
 	field,
@@ -17,7 +20,21 @@ export default function Boolean< Item >( {
 	const { id, getValue, label } = field;
 
 	return (
-		<ToggleControl
+		<ValidatedToggleControl
+			required={ !! field.isValid.required }
+			customValidator={ ( newValue: any ) => {
+				if ( field.isValid?.custom ) {
+					return field.isValid.custom(
+						{
+							...data,
+							[ id ]: newValue,
+						},
+						field
+					);
+				}
+
+				return null;
+			} }
 			hidden={ hideLabelFromVision }
 			__nextHasNoMarginBottom
 			label={ label }