@wordpress/dataviews 3.0.0 → 4.0.0

package/build-types/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ComponentType } from 'react';
 /**
  * Internal dependencies
  */
@@ -46,7 +46,7 @@ export type Field<Item> = {
     /**
      * The label of the field. Defaults to the id.
      */
-    header?: string;
+    label?: string;
     /**
      * Placeholder for the field.
      */
@@ -54,21 +54,9 @@ export type Field<Item> = {
     /**
      * Callback used to render the field. Defaults to `field.getValue`.
      */
-    render?: (args: {
+    render?: ComponentType<{
         item: Item;
-    }) => ReactNode;
-    /**
-     * The width of the field column.
-     */
-    width?: string | number;
-    /**
-     * The minimum width of the field column.
-     */
-    maxWidth?: string | number;
-    /**
-     * The maximum width of the field column.
-     */
-    minWidth?: string | number;
+    }>;
     /**
      * Whether the field is sortable.
      */
@@ -107,13 +95,13 @@ export type Field<Item> = {
     }) => any;
 });
 export type NormalizedField<Item> = Field<Item> & {
-    header: string;
+    label: string;
     getValue: (args: {
         item: Item;
     }) => any;
-    render: (args: {
+    render: ComponentType<{
         item: Item;
-    }) => ReactNode;
+    }>;
 };
 /**
  * A collection of dataview fields for a data type.
@@ -208,10 +196,36 @@ interface ViewBase {
      */
     perPage?: number;
     /**
-     * The hidden fields.
+     * The fields to render
      */
     fields?: string[];
 }
+export interface CombinedField {
+    id: string;
+    label: string;
+    /**
+     * The fields to use as columns.
+     */
+    children: string[];
+    /**
+     * The direction of the stack.
+     */
+    direction: 'horizontal' | 'vertical';
+}
+export interface ColumnStyle {
+    /**
+     * The width of the field column.
+     */
+    width?: string | number;
+    /**
+     * The minimum width of the field column.
+     */
+    maxWidth?: string | number;
+    /**
+     * The maximum width of the field column.
+     */
+    minWidth?: string | number;
+}
 export interface ViewTable extends ViewBase {
     type: 'table';
     layout?: {
@@ -220,9 +234,13 @@ export interface ViewTable extends ViewBase {
          */
         primaryField?: string;
         /**
-         * The field to use as the media field.
+         * The fields to use as columns.
          */
-        mediaField?: string;
+        combinedFields?: CombinedField[];
+        /**
+         * The styles for the columns.
+         */
+        styles?: Record<string, ColumnStyle>;
     };
 }
 export interface ViewList extends ViewBase {
@@ -333,10 +351,11 @@ export interface ViewBaseProps<Item> {
     getItemId: (item: Item) => string;
     isLoading?: boolean;
     onChangeView: (view: View) => void;
-    onSelectionChange: SetSelection;
+    onChangeSelection: SetSelection;
     selection: string[];
     setOpenedFilter: (fieldId: string) => void;
     view: View;
+    density: number;
 }
 export interface ViewTableProps<Item> extends ViewBaseProps<Item> {
     view: ViewTable;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "3.0.0",
+	"version": "4.0.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",
@@ -30,14 +30,14 @@
 	"dependencies": {
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^28.3.0",
-		"@wordpress/compose": "^7.3.0",
-		"@wordpress/data": "^10.3.0",
-		"@wordpress/element": "^6.3.0",
-		"@wordpress/i18n": "^5.3.0",
-		"@wordpress/icons": "^10.3.0",
-		"@wordpress/primitives": "^4.3.0",
-		"@wordpress/private-apis": "^1.3.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",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
+	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
 }

package/src/{dataform.tsx → components/dataform/index.tsx}

@@ -12,8 +12,8 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { Form, Field, NormalizedField } from './types';
-import { normalizeFields } from './normalize-fields';
+import type { Form, Field, NormalizedField } from '../../types';
+import { normalizeFields } from '../../normalize-fields';
 
 type DataFormProps< Item > = {
 	data: Item;
@@ -33,7 +33,7 @@ function DataFormTextControl< Item >( {
 	field,
 	onChange,
 }: DataFormControlProps< Item > ) {
-	const { id, header, placeholder } = field;
+	const { id, label, placeholder } = field;
 	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
@@ -47,9 +47,9 @@ function DataFormTextControl< Item >( {
 
 	return (
 		<TextControl
-			label={ header }
+			label={ label }
 			placeholder={ placeholder }
-			value={ value }
+			value={ value ?? '' }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
 		/>

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataForm from '../index';
+
+const meta = {
+	title: 'DataViews/DataForm',
+	component: DataForm,
+};
+export default meta;
+
+const fields = [
+	{
+		id: 'title',
+		label: 'Title',
+		type: 'text' as const,
+	},
+];
+
+export const Default = () => {
+	const [ post, setPost ] = useState( {
+		title: 'Hello, World!',
+	} );
+
+	const form = {
+		visibleFields: [ 'title' ],
+	};
+
+	return (
+		<DataForm
+			data={ post }
+			fields={ fields }
+			form={ form }
+			onChange={ setPost }
+		/>
+	);
+};

package/src/components/dataviews/index.tsx

@@ -0,0 +1,149 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+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 DataViewsLayout from '../dataviews-layout';
+import DataviewsPagination from '../dataviews-pagination';
+import DataViewsSearch from '../dataviews-search';
+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 { LAYOUT_GRID } from '../../constants';
+
+type ItemWithId = { id: string };
+
+type DataViewsProps< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: Field< Item >[];
+	search?: boolean;
+	searchLabel?: string;
+	actions?: Action< Item >[];
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	defaultLayouts: SupportedLayouts;
+	selection?: string[];
+	onChangeSelection?: ( items: string[] ) => void;
+	header?: ReactNode;
+} & ( Item extends ItemWithId
+	? { getItemId?: ( item: Item ) => string }
+	: { getItemId: ( item: Item ) => string } );
+
+const defaultGetItemId = ( item: ItemWithId ) => item.id;
+
+export default function DataViews< Item >( {
+	view,
+	onChangeView,
+	fields,
+	search = true,
+	searchLabel = undefined,
+	actions = [],
+	data,
+	getItemId = defaultGetItemId,
+	isLoading = false,
+	paginationInfo,
+	defaultLayouts,
+	selection: selectionProperty,
+	onChangeSelection,
+	header,
+}: DataViewsProps< Item > ) {
+	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const [ density, setDensity ] = useState< number >( 0 );
+	const isUncontrolled =
+		selectionProperty === undefined || onChangeSelection === undefined;
+	const selection = isUncontrolled ? selectionState : selectionProperty;
+	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
+	function setSelectionWithChange( value: SelectionOrUpdater ) {
+		const newValue =
+			typeof value === 'function' ? value( selection ) : value;
+		if ( isUncontrolled ) {
+			setSelectionState( newValue );
+		}
+		if ( onChangeSelection ) {
+			onChangeSelection( newValue );
+		}
+	}
+	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
+	const _selection = useMemo( () => {
+		return selection.filter( ( id ) =>
+			data.some( ( item ) => getItemId( item ) === id )
+		);
+	}, [ selection, data, getItemId ] );
+
+	return (
+		<DataViewsContext.Provider
+			value={ {
+				view,
+				onChangeView,
+				fields: _fields,
+				actions,
+				data,
+				isLoading,
+				paginationInfo,
+				selection: _selection,
+				onChangeSelection: setSelectionWithChange,
+				openedFilter,
+				setOpenedFilter,
+				getItemId,
+				density,
+			} }
+		>
+			<div className="dataviews-wrapper">
+				<HStack
+					alignment="top"
+					justify="start"
+					className="dataviews__view-actions"
+				>
+					<HStack
+						justify="start"
+						className="dataviews-filters__container"
+						wrap
+					>
+						{ search && <DataViewsSearch label={ searchLabel } /> }
+						<DataViewsFilters />
+					</HStack>
+					{ view.type === LAYOUT_GRID && (
+						<DensityPicker
+							density={ density }
+							setDensity={ setDensity }
+						/>
+					) }
+					<DataViewsBulkActions />
+					<HStack
+						spacing={ 1 }
+						expanded={ false }
+						style={ { flexShrink: 0 } }
+					>
+						<DataViewsViewConfig
+							defaultLayouts={ defaultLayouts }
+						/>
+						{ header }
+					</HStack>
+				</HStack>
+				<DataViewsLayout />
+				<DataviewsPagination />
+				<DataViewsBulkActionsToolbar />
+			</div>
+		</DataViewsContext.Provider>
+	);
+}

package/src/{stories → components/dataviews/stories}/fixtures.js

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { LAYOUT_TABLE } from '../constants';
+import { LAYOUT_TABLE } from '../../../constants';
 
 export const data = [
 	{
@@ -160,27 +160,24 @@ export const actions = [
 
 export const fields = [
 	{
-		header: 'Image',
+		label: 'Image',
 		id: 'image',
 		render: ( { item } ) => {
 			return (
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
 			);
 		},
-		width: 50,
 		enableSorting: false,
 	},
 	{
-		header: 'Title',
+		label: 'Title',
 		id: 'title',
-		maxWidth: 400,
 		enableHiding: false,
 		enableGlobalSearch: true,
 	},
 	{
-		header: 'Type',
+		label: 'Type',
 		id: 'type',
-		maxWidth: 400,
 		enableHiding: false,
 		elements: [
 			{ value: 'Not a planet', label: 'Not a planet' },
@@ -190,19 +187,18 @@ export const fields = [
 		],
 	},
 	{
-		header: 'Satellites',
+		label: 'Satellites',
 		id: 'satellites',
 		enableSorting: true,
 	},
 	{
-		header: 'Description',
+		label: 'Description',
 		id: 'description',
-		maxWidth: 200,
 		enableSorting: false,
 		enableGlobalSearch: true,
 	},
 	{
-		header: 'Categories',
+		label: 'Categories',
 		id: 'categories',
 		elements: [
 			{ value: 'Space', label: 'Space' },

package/src/{stories → components/dataviews/stories}/index.story.js

@@ -6,10 +6,10 @@ import { useState, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DataViews } from '../index';
+import DataViews from '../index';
 import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
-import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../../constants';
+import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
 
 const meta = {
 	title: 'DataViews/DataViews',
@@ -39,6 +39,20 @@ Default.args = {
 		[ LAYOUT_TABLE ]: {
 			layout: {
 				primaryField: 'title',
+				styles: {
+					image: {
+						width: 50,
+					},
+					title: {
+						maxWidth: 400,
+					},
+					type: {
+						maxWidth: 400,
+					},
+					description: {
+						maxWidth: 200,
+					},
+				},
 			},
 		},
 		[ LAYOUT_GRID ]: {

package/src/components/dataviews/style.scss

@@ -0,0 +1,97 @@
+.dataviews-wrapper {
+	height: 100%;
+	overflow: auto;
+	box-sizing: border-box;
+	scroll-padding-bottom: $grid-unit-80;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: dataviews-wrapper / inline-size;
+	display: flex;
+	flex-direction: column;
+}
+
+.dataviews__view-actions {
+	box-sizing: border-box;
+	padding: $grid-unit-20 $grid-unit-60;
+	flex-shrink: 0;
+	position: sticky;
+	left: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+	.components-search-control {
+		.components-base-control__field {
+			max-width: 240px;
+		}
+	}
+}
+
+.dataviews-view-list__primary-field,
+.dataviews-view-grid__primary-field,
+.dataviews-view-table__primary-field {
+	font-size: $default-font-size;
+	font-weight: 500;
+	color: $gray-700;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+
+	a {
+		text-decoration: none;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		flex-grow: 0;
+		color: $gray-900;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+		@include link-reset();
+	}
+
+	button.components-button.is-link {
+		text-decoration: none;
+		font-weight: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 $grid-unit-60;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews__view-actions {
+		padding: $grid-unit-15 $grid-unit-30;
+
+		.components-search-control {
+			.components-base-control__field {
+				max-width: 112px;
+			}
+		}
+	}
+
+	.dataviews-view-grid,
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}