@wordpress/edit-site 5.21.1-next.f8d8eceb.0 → 5.23.0

package/src/components/dataviews/add-filter.js

@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as componentsPrivateApis,
+	Button,
+	Icon,
+} from '@wordpress/components';
+import { chevronRightSmall, plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { OPERATOR_IN } from './in-filter';
+
+const {
+	DropdownMenuV2,
+	DropdownSubMenuV2,
+	DropdownSubMenuTriggerV2,
+	DropdownMenuItemV2,
+} = unlock( componentsPrivateApis );
+
+const VALID_OPERATORS = [ OPERATOR_IN ];
+
+export default function AddFilter( { fields, view, onChangeView } ) {
+	const filters = [];
+	fields.forEach( ( field ) => {
+		if ( ! field.filters ) {
+			return;
+		}
+
+		field.filters.forEach( ( filter ) => {
+			if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {
+				filters.push( {
+					field: field.id,
+					name: field.header,
+					operator: filter,
+					elements: field.elements || [],
+					isVisible: view.filters.some(
+						( f ) => f.field === field.id && f.operator === filter
+					),
+				} );
+			}
+		} );
+	} );
+
+	if ( filters.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<DropdownMenuV2
+			label={ __( 'Add filter' ) }
+			trigger={
+				<Button
+					disabled={ filters.length === view.filters?.length }
+					__experimentalIsFocusable
+					icon={ plus }
+					variant="tertiary"
+					size="compact"
+				>
+					{ __( 'Add filter' ) }
+				</Button>
+			}
+		>
+			{ filters.map( ( filter ) => {
+				if ( filter.isVisible ) {
+					return null;
+				}
+
+				return (
+					<DropdownSubMenuV2
+						key={ filter.field }
+						trigger={
+							<DropdownSubMenuTriggerV2
+								suffix={ <Icon icon={ chevronRightSmall } /> }
+							>
+								{ filter.name }
+							</DropdownSubMenuTriggerV2>
+						}
+					>
+						{ filter.elements.map( ( element ) => (
+							<DropdownMenuItemV2
+								key={ element.value }
+								onSelect={ () => {
+									onChangeView( ( currentView ) => ( {
+										...currentView,
+										page: 1,
+										filters: [
+											...currentView.filters,
+											{
+												field: filter.field,
+												operator: 'in',
+												value: element.value,
+											},
+										],
+									} ) );
+								} }
+								role="menuitemcheckbox"
+							>
+								{ element.label }
+							</DropdownMenuItemV2>
+						) ) }
+					</DropdownSubMenuV2>
+				);
+			} ) }
+		</DropdownMenuV2>
+	);
+}

package/src/components/dataviews/dataviews.js

@@ -16,6 +16,22 @@ import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
 import { ViewGrid } from './view-grid';
+import { ViewSideBySide } from './view-side-by-side';
+
+// To do: convert to view type registry.
+export const viewTypeSupportsMap = {
+	list: {},
+	grid: {},
+	'side-by-side': {
+		preview: true,
+	},
+};
+
+const viewTypeMap = {
+	list: ViewList,
+	grid: ViewGrid,
+	'side-by-side': ViewSideBySide,
+};
 
 export default function DataViews( {
 	view,
@@ -27,8 +43,9 @@ export default function DataViews( {
 	data,
 	isLoading = false,
 	paginationInfo,
+	supportedLayouts,
 } ) {
-	const ViewComponent = view.type === 'list' ? ViewList : ViewGrid;
+	const ViewComponent = viewTypeMap[ view.type ];
 	const _fields = useMemo( () => {
 		return fields.map( ( field ) => ( {
 			...field,
@@ -53,11 +70,12 @@ export default function DataViews( {
 							onChangeView={ onChangeView }
 						/>
 					</HStack>
-					<HStack justify="end">
+					<HStack justify="end" expanded={ false }>
 						<ViewActions
 							fields={ fields }
 							view={ view }
 							onChangeView={ onChangeView }
+							supportedLayouts={ supportedLayouts }
 						/>
 					</HStack>
 				</HStack>

package/src/components/dataviews/filters.js

@@ -6,70 +6,77 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import InFilter from './in-filter';
+import { default as InFilter, OPERATOR_IN } from './in-filter';
+import AddFilter from './add-filter';
+import ResetFilters from './reset-filters';
+
+const VALID_OPERATORS = [ OPERATOR_IN ];
 
 export default function Filters( { fields, view, onChangeView } ) {
-	const filterIndex = {};
+	const filters = [];
 	fields.forEach( ( field ) => {
 		if ( ! field.filters ) {
 			return;
 		}
 
 		field.filters.forEach( ( filter ) => {
-			let id = field.id;
-			if ( 'string' === typeof filter ) {
-				filterIndex[ id ] = {
-					id,
+			if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {
+				filters.push( {
+					field: field.id,
 					name: field.header,
-					type: filter,
-				};
-			}
-
-			if ( 'object' === typeof filter ) {
-				id = filter.id || field.id;
-				filterIndex[ id ] = {
-					id,
-					name: filter.name || field.header,
-					type: filter.type,
-				};
-			}
-
-			if ( 'enumeration' === filterIndex[ id ]?.type ) {
-				const elements = [
-					{
-						value: filter.resetValue || '',
-						label: filter.resetLabel || __( 'All' ),
-					},
-					...( field.elements || [] ),
-				];
-				filterIndex[ id ] = {
-					...filterIndex[ id ],
-					elements,
-				};
+					operator: filter,
+					elements: [
+						{
+							value: '',
+							label: __( 'All' ),
+						},
+						...( field.elements || [] ),
+					],
+					isVisible: view.filters.some(
+						( f ) => f.field === field.id && f.operator === filter
+					),
+				} );
 			}
 		} );
 	} );
 
-	return (
-		view.visibleFilters?.map( ( filterName ) => {
-			const filter = filterIndex[ filterName ];
+	const filterComponents = filters?.map( ( filter ) => {
+		if ( ! filter.isVisible ) {
+			return null;
+		}
 
-			if ( ! filter ) {
-				return null;
-			}
+		if ( OPERATOR_IN === filter.operator ) {
+			return (
+				<InFilter
+					key={ filter.field + '.' + filter.operator }
+					filter={ filter }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+			);
+		}
 
-			if ( filter.type === 'enumeration' ) {
-				return (
-					<InFilter
-						key={ filterName }
-						filter={ filter }
-						view={ view }
-						onChangeView={ onChangeView }
-					/>
-				);
-			}
+		return null;
+	} );
 
-			return null;
-		} ) || __( 'No filters available' )
+	filterComponents.push(
+		<AddFilter
+			key="add-filter"
+			fields={ fields }
+			view={ view }
+			onChangeView={ onChangeView }
+		/>
 	);
+
+	if ( filterComponents.length > 1 ) {
+		filterComponents.push(
+			<ResetFilters
+				key="reset-filters"
+				view={ view }
+				onChangeView={ onChangeView }
+			/>
+		);
+	}
+
+	return filterComponents;
 }

package/src/components/dataviews/in-filter.js

@@ -5,39 +5,57 @@ import {
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 	SelectControl,
 } from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+export const OPERATOR_IN = 'in';
 
 export default ( { filter, view, onChangeView } ) => {
+	const valueFound = view.filters.find(
+		( f ) => f.field === filter.field && f.operator === OPERATOR_IN
+	);
+
+	const activeValue =
+		! valueFound || ! valueFound.hasOwnProperty( 'value' )
+			? ''
+			: valueFound.value;
+
+	const id = `dataviews__filters-in-${ filter.field }`;
+
 	return (
 		<SelectControl
-			value={ view.filters[ filter.id ] }
+			id={ id }
+			__nextHasNoMarginBottom
+			value={ activeValue }
 			prefix={
 				<InputControlPrefixWrapper
-					as="span"
+					as="label"
+					htmlFor={ id }
 					className="dataviews__select-control-prefix"
 				>
-					{ filter.name + ':' }
+					{ sprintf(
+						/* translators: filter name. */
+						__( '%s:' ),
+						filter.name
+					) }
 				</InputControlPrefixWrapper>
 			}
 			options={ filter.elements }
 			onChange={ ( value ) => {
-				if ( value === '' ) {
-					value = undefined;
-				}
+				const filters = view.filters.filter(
+					( f ) =>
+						f.field !== filter.field || f.operator !== OPERATOR_IN
+				);
+
+				filters.push( {
+					field: filter.field,
+					operator: OPERATOR_IN,
+					value,
+				} );
 
 				onChangeView( ( currentView ) => ( {
 					...currentView,
-					filters: cleanEmptyObject( {
-						...currentView.filters,
-						[ filter.id ]: value,
-					} ),
+					page: 1,
+					filters,
 				} ) );
 			} }
 		/>

package/src/components/dataviews/index.js

@@ -1 +1 @@
-export { default as DataViews } from './dataviews';
+export { default as DataViews, viewTypeSupportsMap } from './dataviews';

package/src/components/dataviews/item-actions.js

@@ -6,12 +6,62 @@ import {
 	MenuGroup,
 	MenuItem,
 	Button,
+	Modal,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { moreVertical } from '@wordpress/icons';
 
+function PrimaryActionTrigger( { action, onClick } ) {
+	return (
+		<Button
+			label={ action.label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+		/>
+	);
+}
+
+function SecondaryActionTrigger( { action, onClick } ) {
+	return (
+		<MenuItem onClick={ onClick } isDestructive={ action.isDestructive }>
+			{ action.label }
+		</MenuItem>
+	);
+}
+
+function ActionWithModal( { action, item, ActionTrigger } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => setIsModalOpen( true ),
+	};
+	const { RenderModal, hideModalHeader } = action;
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<Modal
+					title={ ! hideModalHeader && action.label }
+					__experimentalHideHeader={ !! hideModalHeader }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="dataviews-action-modal"
+				>
+					<RenderModal
+						item={ item }
+						closeModal={ () => setIsModalOpen( false ) }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
 export default function ItemActions( { item, actions } ) {
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(
@@ -37,29 +87,54 @@ export default function ItemActions( { item, actions } ) {
 	return (
 		<HStack justify="flex-end">
 			{ !! primaryActions.length &&
-				primaryActions.map( ( action ) => (
-					<Button
-						label={ action.label }
-						key={ action.id }
-						icon={ action.icon }
-						onClick={ () => action.perform( item ) }
-						isDestructive={ action.isDestructive }
-						size="compact"
-					/>
-				) ) }
+				primaryActions.map( ( action ) => {
+					if ( !! action.RenderModal ) {
+						return (
+							<ActionWithModal
+								key={ action.id }
+								action={ action }
+								item={ item }
+								ActionTrigger={ PrimaryActionTrigger }
+							/>
+						);
+					}
+					return (
+						<PrimaryActionTrigger
+							key={ action.id }
+							action={ action }
+							item={ item }
+							onClick={ () => action.callback( item ) }
+						/>
+					);
+				} ) }
 			{ !! secondaryActions.length && (
 				<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
 					{ () => (
 						<MenuGroup>
-							{ secondaryActions.map( ( action ) => (
-								<MenuItem
-									key={ action.id }
-									onClick={ () => action.perform( item ) }
-									isDestructive={ action.isDestructive }
-								>
-									{ action.label }
-								</MenuItem>
-							) ) }
+							{ secondaryActions.map( ( action ) => {
+								if ( !! action.RenderModal ) {
+									return (
+										<ActionWithModal
+											key={ action.id }
+											action={ action }
+											item={ item }
+											ActionTrigger={
+												SecondaryActionTrigger
+											}
+										/>
+									);
+								}
+								return (
+									<SecondaryActionTrigger
+										key={ action.id }
+										action={ action }
+										item={ item }
+										onClick={ () =>
+											action.callback( item )
+										}
+									/>
+								);
+							} ) }
 						</MenuGroup>
 					) }
 				</DropdownMenu>

package/src/components/dataviews/pagination.js

@@ -83,16 +83,17 @@ function Pagination( {
 										min={ 1 }
 										max={ totalPages }
 										onChange={ ( value ) => {
+											const _value = +value;
 											if (
-												! value ||
-												value < 1 ||
-												value > totalPages
+												! _value ||
+												_value < 1 ||
+												_value > totalPages
 											) {
 												return;
 											}
 											onChangeView( {
 												...view,
-												page: value,
+												page: _value,
 											} );
 										} }
 										step="1"

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

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default ( { view, onChangeView } ) => {
+	return (
+		<Button
+			disabled={ view.search === '' && view.filters?.length === 0 }
+			__experimentalIsFocusable
+			size="compact"
+			variant="tertiary"
+			onClick={ () => {
+				onChangeView( ( currentView ) => ( {
+					...currentView,
+					page: 1,
+					search: '',
+					filters: [],
+				} ) );
+			} }
+		>
+			{ __( 'Reset filters' ) }
+		</Button>
+	);
+};

package/src/components/dataviews/search.js

@@ -31,6 +31,7 @@ export default function Search( { label, view, onChangeView } ) {
 	const searchLabel = label || __( 'Filter list' );
 	return (
 		<SearchControl
+			__nextHasNoMarginBottom
 			onChange={ setSearch }
 			value={ search }
 			label={ searchLabel }

package/src/components/dataviews/style.scss

@@ -31,7 +31,7 @@
 	td,
 	th {
 		padding: $grid-unit-15;
-		&:last-child {
+		&[data-field-id="actions"] {
 			text-align: right;
 		}
 	}
@@ -49,3 +49,7 @@
 		object-fit: cover;
 	}
 }
+
+.dataviews-action-modal {
+	z-index: z-index(".dataviews-action-modal");
+}

package/src/components/dataviews/view-actions.js

@@ -10,9 +10,10 @@ import {
 	chevronRightSmall,
 	check,
 	blockTable,
-	chevronDown,
 	arrowUp,
 	arrowDown,
+	grid,
+	columns,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -38,10 +39,23 @@ const availableViews = [
 		id: 'grid',
 		label: __( 'Grid' ),
 	},
+	{
+		id: 'side-by-side',
+		label: __( 'Side by side' ),
+	},
 ];
 
-function ViewTypeMenu( { view, onChangeView } ) {
-	const activeView = availableViews.find( ( v ) => view.type === v.id );
+function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
+	let _availableViews = availableViews;
+	if ( supportedLayouts ) {
+		_availableViews = _availableViews.filter( ( _view ) =>
+			supportedLayouts.includes( _view.id )
+		);
+	}
+	if ( _availableViews.length === 1 ) {
+		return null;
+	}
+	const activeView = _availableViews.find( ( v ) => view.type === v.id );
 	return (
 		<DropdownSubMenuV2
 			trigger={
@@ -57,7 +71,7 @@ function ViewTypeMenu( { view, onChangeView } ) {
 				</DropdownSubMenuTriggerV2>
 			}
 		>
-			{ availableViews.map( ( availableView ) => {
+			{ _availableViews.map( ( availableView ) => {
 				return (
 					<DropdownMenuItemV2
 						key={ availableView.id }
@@ -82,7 +96,7 @@ function ViewTypeMenu( { view, onChangeView } ) {
 	);
 }
 
-const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
+const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function PageSizeMenu( { view, onChangeView } ) {
 	return (
 		<DropdownSubMenuV2
@@ -261,19 +275,35 @@ function SortMenu( { fields, view, onChangeView } ) {
 	);
 }
 
-export default function ViewActions( { fields, view, onChangeView } ) {
+const VIEW_TYPE_ICONS = { list: blockTable, grid, 'side-by-side': columns };
+
+export default function ViewActions( {
+	fields,
+	view,
+	onChangeView,
+	supportedLayouts,
+} ) {
 	return (
 		<DropdownMenuV2
 			label={ __( 'Actions' ) }
 			trigger={
-				<Button variant="tertiary" icon={ blockTable }>
+				<Button
+					variant="tertiary"
+					size="compact"
+					icon={
+						VIEW_TYPE_ICONS[ view.type ] || VIEW_TYPE_ICONS.list
+					}
+				>
 					{ __( 'View' ) }
-					<Icon icon={ chevronDown } />
 				</Button>
 			}
 		>
 			<DropdownMenuGroupV2>
-				<ViewTypeMenu view={ view } onChangeView={ onChangeView } />
+				<ViewTypeMenu
+					view={ view }
+					onChangeView={ onChangeView }
+					supportedLayouts={ supportedLayouts }
+				/>
 				<SortMenu
 					fields={ fields }
 					view={ view }