@wordpress/dataviews 4.0.0 → 4.1.0

package/build-types/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactElement, ComponentType } from 'react';
+import type { ReactElement, ComponentType, Dispatch, SetStateAction } from 'react';
 /**
  * Internal dependencies
  */
@@ -30,7 +30,10 @@ interface FilterByConfig {
 }
 export type Operator = 'is' | 'isNot' | 'isAny' | 'isNone' | 'isAll' | 'isNotAll';
 export type ItemRecord = Record<string, unknown>;
-export type FieldType = 'text';
+export type FieldType = 'text' | 'integer';
+export type ValidationContext = {
+    elements?: Option[];
+};
 /**
  * A dataview field for a specific property of a data type.
  */
@@ -47,6 +50,10 @@ export type Field<Item> = {
      * The label of the field. Defaults to the id.
      */
     label?: string;
+    /**
+     * A description of the field.
+     */
+    description?: string;
     /**
      * Placeholder for the field.
      */
@@ -57,6 +64,18 @@ export type Field<Item> = {
     render?: ComponentType<{
         item: Item;
     }>;
+    /**
+     * Callback used to render an edit control for the field.
+     */
+    Edit?: ComponentType<DataFormControlProps<Item>>;
+    /**
+     * Callback used to sort the field.
+     */
+    sort?: (a: Item, b: Item, direction: SortDirection) => number;
+    /**
+     * Callback used to validate the field.
+     */
+    isValid?: (item: Item, context?: ValidationContext) => boolean;
     /**
      * Whether the field is sortable.
      */
@@ -102,6 +121,9 @@ export type NormalizedField<Item> = Field<Item> & {
     render: ComponentType<{
         item: Item;
     }>;
+    Edit: ComponentType<DataFormControlProps<Item>>;
+    sort: (a: Item, b: Item, direction: SortDirection) => number;
+    isValid: (item: Item, context?: ValidationContext) => boolean;
 };
 /**
  * A collection of dataview fields for a data type.
@@ -112,7 +134,14 @@ export type Data<Item> = Item[];
  * The form configuration.
  */
 export type Form = {
-    visibleFields?: string[];
+    type?: 'regular' | 'panel';
+    fields?: string[];
+};
+export type DataFormControlProps<Item> = {
+    data: Item;
+    field: NormalizedField<Item>;
+    onChange: Dispatch<SetStateAction<Item>>;
+    hideLabelFromVision?: boolean;
 };
 /**
  * The filters applied to the dataset.
@@ -372,5 +401,11 @@ export interface SupportedLayouts {
     grid?: Omit<ViewGrid, 'type'>;
     table?: Omit<ViewTable, 'type'>;
 }
+export interface DataFormProps<Item> {
+    data: Item;
+    fields: Field<Item>[];
+    form: Form;
+    onChange: Dispatch<SetStateAction<Item>>;
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEzD;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,MAAM,CAAE,KAAK,SAAS,GAAG,GAAG,GAAG;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,cAAc;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,QAAQ,GACjB,IAAI,GACJ,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,UAAU,CAAC;AAEd,MAAM,MAAM,UAAU,GAAG,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;AAEnD,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC;AAE/B;;GAEG;AACH,MAAM,MAAM,KAAK,CAAE,IAAI,IAAK;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAE,CAAC;IAEzC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;CACtC,GAAG,CAAE,IAAI,SAAS,UAAU,GAC1B;IACA;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,KAAM,GAAG,CAAC;CAC1C,GACD;IACA;;;OAGG;IACH,QAAQ,EAAE,CAAE,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,KAAM,GAAG,CAAC;CACzC,CAAE,CAAC;AAEP,MAAM,MAAM,eAAe,CAAE,IAAI,IAAK,KAAK,CAAE,IAAI,CAAE,GAAG;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAE,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,KAAM,GAAG,CAAC;IAC1C,MAAM,EAAE,aAAa,CAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAE,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,MAAM,CAAE,IAAI,IAAK,KAAK,CAAE,IAAI,CAAE,EAAE,CAAC;AAE7C,MAAM,MAAM,IAAI,CAAE,IAAI,IAAK,IAAI,EAAE,CAAC;AAElC;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,MAAM;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC;CACX;AAED,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,QAAQ;IACjB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE;QACN;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,SAAS,EAAE,aAAa,CAAC;KACzB,CAAC;IAEF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,SAAS,EAAE,YAAY,GAAG,UAAU,CAAC;CACrC;AAED,MAAM,WAAW,WAAW;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IAC1C,IAAI,EAAE,OAAO,CAAC;IAEd,MAAM,CAAC,EAAE;QACR;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QAEtB;;WAEG;QACH,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;QAEjC;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAE,MAAM,EAAE,WAAW,CAAE,CAAC;KACvC,CAAC;CACF;AAED,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACzC,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,CAAC,EAAE;QACR;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QAEtB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACF;AAED,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACzC,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,CAAC,EAAE;QACR;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QAEtB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QAEpB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;QAExB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACF;AAED,MAAM,MAAM,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEnD,UAAU,UAAU,CAAE,IAAI;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,CAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,MAAM,CAAE,CAAC;IAEhD;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC;IAEX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,OAAO,CAAC;IAEvC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAW,CAAE,IAAI,CAAG,SAAQ,UAAU,CAAE,IAAI,CAAE;IAC9D;;OAEG;IACH,WAAW,EAAE,CAAE,EACd,KAAK,EACL,UAAU,EACV,iBAAiB,GACjB,EAAE;QACF,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;QACxB,iBAAiB,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;KAC9C,KAAM,YAAY,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY,CAAE,IAAI,CAAG,SAAQ,UAAU,CAAE,IAAI,CAAE;IAC/D;;OAEG;IACH,QAAQ,EAAE,CACT,KAAK,EAAE,IAAI,EAAE,EACb,OAAO,EAAE;QACR,QAAQ,EAAE,GAAG,CAAC;QACd,iBAAiB,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;KAC9C,KACG,IAAI,CAAC;CACV;AAED,MAAM,MAAM,MAAM,CAAE,IAAI,IAAK,WAAW,CAAE,IAAI,CAAE,GAAG,YAAY,CAAE,IAAI,CAAE,CAAC;AAExE,MAAM,WAAW,aAAa,CAAE,IAAI;IACnC,OAAO,EAAE,MAAM,CAAE,IAAI,CAAE,EAAE,CAAC;IAC1B,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,MAAM,EAAE,eAAe,CAAE,IAAI,CAAE,EAAE,CAAC;IAClC,SAAS,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,IAAI,CAAC;IACrC,iBAAiB,EAAE,YAAY,CAAC;IAChC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,EAAE,CAAE,OAAO,EAAE,MAAM,KAAM,IAAI,CAAC;IAC7C,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc,CAAE,IAAI,CAAG,SAAQ,aAAa,CAAE,IAAI,CAAE;IACpE,IAAI,EAAE,SAAS,CAAC;CAChB;AAED,MAAM,WAAW,aAAa,CAAE,IAAI,CAAG,SAAQ,aAAa,CAAE,IAAI,CAAE;IACnE,IAAI,EAAE,QAAQ,CAAC;CACf;AAED,MAAM,WAAW,aAAa,CAAE,IAAI,CAAG,SAAQ,aAAa,CAAE,IAAI,CAAE;IACnE,IAAI,EAAE,QAAQ,CAAC;CACf;AAED,MAAM,MAAM,SAAS,CAAE,IAAI,IACxB,cAAc,CAAE,IAAI,CAAE,GACtB,aAAa,CAAE,IAAI,CAAE,GACrB,aAAa,CAAE,IAAI,CAAE,CAAC;AAEzB,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,IAAI,CAAE,QAAQ,EAAE,MAAM,CAAE,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,CAAE,QAAQ,EAAE,MAAM,CAAE,CAAC;IAChC,KAAK,CAAC,EAAE,IAAI,CAAE,SAAS,EAAE,MAAM,CAAE,CAAC;CAClC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/build-types/validation.d.ts

@@ -0,0 +1,3 @@
+import type { Field, Form } from './types';
+export declare function isItemValid<Item>(item: Item, fields: Field<Item>[], form: Form): boolean;
+//# sourceMappingURL=validation.d.ts.map

package/build-types/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../src/validation.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,WAAW,CAAE,IAAI,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,KAAK,CAAE,IAAI,CAAE,EAAE,EACvB,IAAI,EAAE,IAAI,GACR,OAAO,CAOT"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.0.0",
+	"version": "4.1.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,16 +28,17 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.3.12",
+		"@ariakit/react": "^0.4.7",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^28.4.0",
-		"@wordpress/compose": "^7.4.0",
-		"@wordpress/data": "^10.4.0",
-		"@wordpress/element": "^6.4.0",
-		"@wordpress/i18n": "^5.4.0",
-		"@wordpress/icons": "^10.4.0",
-		"@wordpress/primitives": "^4.4.0",
-		"@wordpress/private-apis": "^1.4.0",
+		"@wordpress/components": "^28.5.0",
+		"@wordpress/compose": "^7.5.0",
+		"@wordpress/data": "^10.5.0",
+		"@wordpress/element": "^6.5.0",
+		"@wordpress/i18n": "^5.5.0",
+		"@wordpress/icons": "^10.5.0",
+		"@wordpress/primitives": "^4.5.0",
+		"@wordpress/private-apis": "^1.5.0",
+		"@wordpress/warning": "^3.5.0",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
+	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
 }

package/src/components/dataform/index.tsx

@@ -1,106 +1,17 @@
-/**
- * External dependencies
- */
-import type { Dispatch, SetStateAction } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { TextControl } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import type { Form, Field, NormalizedField } from '../../types';
-import { normalizeFields } from '../../normalize-fields';
-
-type DataFormProps< Item > = {
-	data: Item;
-	fields: Field< Item >[];
-	form: Form;
-	onChange: Dispatch< SetStateAction< Item > >;
-};
-
-type DataFormControlProps< Item > = {
-	data: Item;
-	field: NormalizedField< Item >;
-	onChange: Dispatch< SetStateAction< Item > >;
-};
-
-function DataFormTextControl< Item >( {
-	data,
-	field,
-	onChange,
-}: DataFormControlProps< Item > ) {
-	const { id, label, placeholder } = field;
-	const value = field.getValue( { item: data } );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
-				[ id ]: newValue,
-			} ) ),
-		[ id, onChange ]
-	);
-
-	return (
-		<TextControl
-			label={ label }
-			placeholder={ placeholder }
-			value={ value ?? '' }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-		/>
-	);
-}
-
-const controls: {
-	[ key: string ]: < Item >(
-		props: DataFormControlProps< Item >
-	) => JSX.Element;
-} = {
-	text: DataFormTextControl,
-};
-
-function getControlForField< Item >( field: NormalizedField< Item > ) {
-	if ( ! field.type ) {
-		return null;
-	}
-
-	if ( ! Object.keys( controls ).includes( field.type ) ) {
-		return null;
-	}
-
-	return controls[ field.type ];
-}
+import type { DataFormProps } from '../../types';
+import { getFormLayout } from '../../dataforms-layouts';
 
 export default function DataForm< Item >( {
-	data,
-	fields,
 	form,
-	onChange,
+	...props
 }: DataFormProps< Item > ) {
-	const visibleFields = useMemo(
-		() =>
-			normalizeFields(
-				fields.filter(
-					( { id } ) => !! form.visibleFields?.includes( id )
-				)
-			),
-		[ fields, form.visibleFields ]
-	);
+	const layout = getFormLayout( form.type ?? 'regular' );
+	if ( ! layout ) {
+		return null;
+	}
 
-	return visibleFields.map( ( field ) => {
-		const DataFormControl = getControlForField( field );
-		return DataFormControl ? (
-			<DataFormControl
-				key={ field.id }
-				data={ data }
-				field={ field }
-				onChange={ onChange }
-			/>
-		) : null;
-	} );
+	return <layout.component form={ form } { ...props } />;
 }

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

@@ -11,6 +11,14 @@ import DataForm from '../index';
 const meta = {
 	title: 'DataViews/DataForm',
 	component: DataForm,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description:
+				'Chooses the layout of the form. "regular" is the default layout.',
+			options: [ 'regular', 'panel' ],
+		},
+	},
 };
 export default meta;
 
@@ -20,22 +28,51 @@ const fields = [
 		label: 'Title',
 		type: 'text' as const,
 	},
+	{
+		id: 'order',
+		label: 'Order',
+		type: 'integer' as const,
+	},
+	{
+		id: 'author',
+		label: 'Author',
+		type: 'integer' as const,
+		elements: [
+			{ value: 1, label: 'Jane' },
+			{ value: 2, label: 'John' },
+		],
+	},
+	{
+		id: 'status',
+		label: 'Status',
+		type: 'text' as const,
+		elements: [
+			{ value: 'draft', label: 'Draft' },
+			{ value: 'published', label: 'Published' },
+		],
+	},
 ];
 
-export const Default = () => {
+export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 	const [ post, setPost ] = useState( {
 		title: 'Hello, World!',
+		order: 2,
+		author: 1,
+		status: 'draft',
 	} );
 
 	const form = {
-		visibleFields: [ 'title' ],
+		fields: [ 'title', 'order', 'author', 'status' ],
 	};
 
 	return (
 		<DataForm
 			data={ post }
 			fields={ fields }
-			form={ form }
+			form={ {
+				...form,
+				type,
+			} }
 			onChange={ setPost }
 		/>
 	);

package/src/components/dataviews/index.tsx

@@ -15,7 +15,11 @@ import { useMemo, useState } from '@wordpress/element';
 import { default as DataViewsBulkActions } from '../dataviews-bulk-actions';
 import DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';
 import DataViewsContext from '../dataviews-context';
-import DataViewsFilters from '../dataviews-filters';
+import {
+	default as DataViewsFilters,
+	useFilters,
+	FilterVisibilityToggle,
+} from '../dataviews-filters';
 import DataViewsLayout from '../dataviews-layout';
 import DataviewsPagination from '../dataviews-pagination';
 import DataViewsSearch from '../dataviews-search';
@@ -23,7 +27,7 @@ import DataViewsViewConfig from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
-import DensityPicker from '../../layouts/grid/density-picker';
+import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 import { LAYOUT_GRID } from '../../constants';
 
 type ItemWithId = { id: string };
@@ -69,6 +73,8 @@ export default function DataViews< Item >( {
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const [ density, setDensity ] = useState< number >( 0 );
+	const [ isShowingFilter, setIsShowingFilter ] =
+		useState< boolean >( false );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -90,6 +96,7 @@ export default function DataViews< Item >( {
 		);
 	}, [ selection, data, getItemId ] );
 
+	const filters = useFilters( _fields, view );
 	return (
 		<DataViewsContext.Provider
 			value={ {
@@ -113,14 +120,18 @@ export default function DataViews< Item >( {
 					alignment="top"
 					justify="start"
 					className="dataviews__view-actions"
+					spacing={ 1 }
 				>
-					<HStack
-						justify="start"
-						className="dataviews-filters__container"
-						wrap
-					>
+					<HStack justify="start" wrap>
 						{ search && <DataViewsSearch label={ searchLabel } /> }
-						<DataViewsFilters />
+						<FilterVisibilityToggle
+							filters={ filters }
+							view={ view }
+							onChangeView={ onChangeView }
+							setOpenedFilter={ setOpenedFilter }
+							setIsShowingFilter={ setIsShowingFilter }
+							isShowingFilter={ isShowingFilter }
+						/>
 					</HStack>
 					{ view.type === LAYOUT_GRID && (
 						<DensityPicker
@@ -140,6 +151,7 @@ export default function DataViews< Item >( {
 						{ header }
 					</HStack>
 				</HStack>
+				{ isShowingFilter && <DataViewsFilters /> }
 				<DataViewsLayout />
 				<DataviewsPagination />
 				<DataViewsBulkActionsToolbar />

package/src/components/dataviews/stories/fixtures.js

@@ -189,6 +189,7 @@ export const fields = [
 	{
 		label: 'Satellites',
 		id: 'satellites',
+		type: 'integer',
 		enableSorting: true,
 	},
 	{

package/src/components/dataviews/style.scss

@@ -9,7 +9,8 @@
 	flex-direction: column;
 }
 
-.dataviews__view-actions {
+.dataviews__view-actions,
+.dataviews-filters__container {
 	box-sizing: border-box;
 	padding: $grid-unit-20 $grid-unit-60;
 	flex-shrink: 0;
@@ -78,7 +79,8 @@
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
-	.dataviews__view-actions {
+	.dataviews__view-actions,
+	.dataviews-filters__container {
 		padding: $grid-unit-15 $grid-unit-30;
 
 		.components-search-control {
@@ -95,3 +97,4 @@
 		padding-right: $grid-unit-30;
 	}
 }
+

package/src/components/dataviews-bulk-actions/index.tsx

@@ -89,6 +89,11 @@ function ActionWithModal< Item >( {
 	const onCloseModal = useCallback( () => {
 		setActionWithModal( undefined );
 	}, [ setActionWithModal ] );
+
+	if ( ! eligibleItems.length ) {
+		return null;
+	}
+
 	const label =
 		typeof action.label === 'string'
 			? action.label

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

@@ -32,29 +32,18 @@ interface AddFilterProps {
 	setOpenedFilter: ( filter: string | null ) => void;
 }
 
-function AddFilter(
-	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
-	ref: Ref< HTMLButtonElement >
-) {
-	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
-		return null;
-	}
+export function AddFilterDropdownMenu( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	trigger,
+}: AddFilterProps & {
+	trigger: React.ReactNode;
+} ) {
 	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
 	return (
-		<DropdownMenu
-			trigger={
-				<Button
-					accessibleWhenDisabled
-					size="compact"
-					className="dataviews-filters__button"
-					variant="tertiary"
-					disabled={ ! inactiveFilters.length }
-					ref={ ref }
-				>
-					{ __( 'Add filter' ) }
-				</Button>
-			}
-		>
+		<DropdownMenu trigger={ trigger }>
 			{ inactiveFilters.map( ( filter ) => {
 				return (
 					<DropdownMenuItem
@@ -85,4 +74,31 @@ function AddFilter(
 	);
 }
 
+function AddFilter(
+	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
+	ref: Ref< HTMLButtonElement >
+) {
+	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
+		return null;
+	}
+	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
+	return (
+		<AddFilterDropdownMenu
+			trigger={
+				<Button
+					accessibleWhenDisabled
+					size="compact"
+					className="dataviews-filters-button"
+					variant="tertiary"
+					disabled={ ! inactiveFilters.length }
+					ref={ ref }
+				>
+					{ __( 'Add filter' ) }
+				</Button>
+			}
+			{ ...{ filters, view, onChangeView, setOpenedFilter } }
+		/>
+	);
+}
+
 export default forwardRef( AddFilter );