@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

package/src/test/dataviews.tsx

@@ -510,6 +510,92 @@ describe( 'DataViews component', () => {
 			await user.keyboard( '{/Control}' );
 		} );
 
+		it( 'supports tabbing to selection and actions when title is visible', async () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						...DEFAULT_VIEW,
+						type: 'grid',
+						fields: [],
+						mediaField: 'image',
+						titleField: 'title',
+					} }
+					isItemClickable={ () => true }
+					actions={ actions }
+				/>
+			);
+
+			// Double check that the title is being rendered.
+			expect( screen.getByText( data[ 0 ].title ) ).toBeInTheDocument();
+
+			const viewOptionsButton = screen.getByRole( 'button', {
+				name: 'View options',
+			} );
+
+			const user = userEvent.setup();
+
+			// Double click to open and then close view options. This is performed
+			// instead of a direct .focus() so that effects have time to complete.
+			await user.click( viewOptionsButton );
+			await user.click( viewOptionsButton );
+
+			await user.tab();
+
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 0 ].title } )
+			).toHaveFocus();
+
+			await user.tab();
+
+			expect(
+				screen.getAllByRole( 'button', { name: 'Actions' } )[ 0 ]
+			).toHaveFocus();
+		} );
+
+		it( 'supports tabbing to selection and actions when title is not visible', async () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						...DEFAULT_VIEW,
+						type: 'grid',
+						fields: [],
+						mediaField: 'image',
+						titleField: 'title',
+						showTitle: false,
+					} }
+					isItemClickable={ () => true }
+					actions={ actions }
+				/>
+			);
+
+			// Double check that the title is not being rendered.
+			expect(
+				screen.queryByText( data[ 0 ].title )
+			).not.toBeInTheDocument();
+
+			const viewOptionsButton = screen.getByRole( 'button', {
+				name: 'View options',
+			} );
+
+			const user = userEvent.setup();
+
+			// Double click to open and then close view options. This is performed
+			// instead of a direct .focus() so that effects have time to complete.
+			await user.click( viewOptionsButton );
+			await user.click( viewOptionsButton );
+			await user.tab();
+
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 0 ].title } )
+			).toHaveFocus();
+
+			await user.tab();
+
+			expect(
+				screen.getAllByRole( 'button', { name: 'Actions' } )[ 0 ]
+			).toHaveFocus();
+		} );
+
 		it( 'accepts an invalid previewSize and the preview size picker falls back to another size', async () => {
 			render(
 				<DataViewWrapper

package/src/types.ts

@@ -103,6 +103,9 @@ export type FieldType =
 	| 'media'
 	| 'boolean'
 	| 'email'
+	| 'telephone'
+	| 'color'
+	| 'url'
 	| 'array';
 
 /**
@@ -515,7 +518,23 @@ export interface ViewGrid extends ViewBase {
 	};
 }
 
-export type View = ViewList | ViewGrid | ViewTable;
+export interface ViewPickerGrid extends ViewBase {
+	type: 'pickerGrid';
+
+	layout?: {
+		/**
+		 * The fields to use as badge fields.
+		 */
+		badgeFields?: string[];
+
+		/**
+		 * The preview size of the grid.
+		 */
+		previewSize?: number;
+	};
+}
+
+export type View = ViewList | ViewGrid | ViewTable | ViewPickerGrid;
 
 interface ActionBase< Item > {
 	/**
@@ -648,6 +667,20 @@ export interface ViewBaseProps< Item > {
 	empty: ReactNode;
 }
 
+export type ViewPickerBaseProps< Item > = Omit<
+	ViewBaseProps< Item >,
+	| 'view'
+	| 'onChangeView'
+	// The following props are not supported for pickers.
+	| 'isItemClickable'
+	| 'onClickItem'
+	| 'renderItemLink'
+	| 'getItemLevel'
+> & {
+	view: View;
+	onChangeView: ( view: View ) => void;
+};
+
 export interface ViewTableProps< Item > extends ViewBaseProps< Item > {
 	view: ViewTable;
 }
@@ -660,21 +693,29 @@ export interface ViewGridProps< Item > extends ViewBaseProps< Item > {
 	view: ViewGrid;
 }
 
+export interface ViewPickerGridProps< Item >
+	extends Omit< ViewPickerBaseProps< Item >, 'view' > {
+	view: ViewPickerGrid;
+}
+
 export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
 	| ViewListProps< Item >;
 
+export type ViewPickerProps< Item > = ViewPickerGridProps< Item >;
+
 export interface SupportedLayouts {
 	list?: Omit< ViewList, 'type' >;
 	grid?: Omit< ViewGrid, 'type' >;
 	table?: Omit< ViewTable, 'type' >;
+	pickerGrid?: Omit< ViewPickerGrid, 'type' >;
 }
 
 /**
  * DataForm layouts.
  */
-export type LayoutType = 'regular' | 'panel' | 'card';
+export type LayoutType = 'regular' | 'panel' | 'card' | 'row';
 export type LabelPosition = 'top' | 'side' | 'none';
 
 export type RegularLayout = {
@@ -724,11 +765,21 @@ export type NormalizedCardLayout =
 			isOpened: boolean;
 	  };
 
-export type Layout = RegularLayout | PanelLayout | CardLayout;
+export type RowLayout = {
+	type: 'row';
+	alignment?: 'start' | 'center' | 'end';
+};
+export type NormalizedRowLayout = {
+	type: 'row';
+	alignment: 'start' | 'center' | 'end';
+};
+
+export type Layout = RegularLayout | PanelLayout | CardLayout | RowLayout;
 export type NormalizedLayout =
 	| NormalizedRegularLayout
 	| NormalizedPanelLayout
-	| NormalizedCardLayout;
+	| NormalizedCardLayout
+	| NormalizedRowLayout;
 
 export type SimpleFormField = {
 	id: string;
@@ -738,6 +789,7 @@ export type SimpleFormField = {
 export type CombinedFormField = {
 	id: string;
 	label?: string;
+	description?: string;
 	layout?: Layout;
 	children: Array< FormField | string >;
 };

package/src/validation.ts

@@ -32,6 +32,9 @@ export function isItemValid< Item >(
 			if (
 				( field.type === 'text' && isEmptyNullOrUndefined( value ) ) ||
 				( field.type === 'email' && isEmptyNullOrUndefined( value ) ) ||
+				( field.type === 'url' && isEmptyNullOrUndefined( value ) ) ||
+				( field.type === 'telephone' &&
+					isEmptyNullOrUndefined( value ) ) ||
 				( field.type === 'integer' &&
 					isEmptyNullOrUndefined( value ) ) ||
 				( field.type === undefined && isEmptyNullOrUndefined( value ) )