@wordpress/dataviews 4.8.0 → 4.9.0

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

@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import DataForm from '../index';
-import type { CombinedFormField, Field } from '../../../types';
+import type { Field, Form } from '../../../types';
 
 type SamplePost = {
 	title: string;
@@ -27,8 +28,13 @@ const meta = {
 		type: {
 			control: { type: 'select' },
 			description:
-				'Chooses the layout of the form. "regular" is the default layout.',
-			options: [ 'regular', 'panel' ],
+				'Chooses the default layout of each field. "regular" is the default layout.',
+			options: [ 'default', 'regular', 'panel' ],
+		},
+		labelPosition: {
+			control: { type: 'select' },
+			description: 'Chooses the label position of the layout.',
+			options: [ 'default', 'top', 'side', 'none' ],
 		},
 	},
 };
@@ -97,9 +103,33 @@ const fields = [
 			return item.status !== 'private';
 		},
 	},
+	{
+		id: 'sticky',
+		label: 'Sticky',
+		type: 'integer',
+		Edit: ( { field, onChange, data, hideLabelFromVision } ) => {
+			const { id, getValue } = field;
+			return (
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ hideLabelFromVision ? '' : field.label }
+					checked={ getValue( { item: data } ) }
+					onChange={ () =>
+						onChange( { [ id ]: ! getValue( { item: data } ) } )
+					}
+				/>
+			);
+		},
+	},
 ] as Field< SamplePost >[];
 
-export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
+export const Default = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
 	const [ post, setPost ] = useState( {
 		title: 'Hello, World!',
 		order: 2,
@@ -108,29 +138,36 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 		reviewer: 'fulano',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
+		sticky: false,
 	} );
 
-	const form = {
-		fields: [
-			'title',
-			'order',
-			'author',
-			'reviewer',
-			'status',
-			'password',
-			'date',
-			'birthdate',
-		],
-	};
+	const form = useMemo(
+		() => ( {
+			type,
+			labelPosition,
+			fields: [
+				'title',
+				'order',
+				{
+					id: 'sticky',
+					layout: 'regular',
+					labelPosition: 'side',
+				},
+				'author',
+				'reviewer',
+				'password',
+				'date',
+				'birthdate',
+			],
+		} ),
+		[ type, labelPosition ]
+	) as Form;
 
 	return (
 		<DataForm< SamplePost >
 			data={ post }
 			fields={ fields }
-			form={ {
-				...form,
-				type,
-			} }
+			form={ form }
 			onChange={ ( edits ) =>
 				setPost( ( prev ) => ( {
 					...prev,
@@ -142,40 +179,45 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 };
 
 const CombinedFieldsComponent = ( {
-	type = 'regular',
-	combinedFieldDirection = 'vertical',
+	type,
+	labelPosition,
 }: {
-	type: 'panel' | 'regular';
-	combinedFieldDirection: 'vertical' | 'horizontal';
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
 } ) => {
-	const [ post, setPost ] = useState( {
+	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
 		order: 2,
 		author: 1,
 		status: 'draft',
+		reviewer: 'fulano',
+		date: '2021-01-01T12:00:00',
+		birthdate: '1950-02-23T12:00:00',
 	} );
 
-	const form = {
-		fields: [ 'title', 'status_and_visibility', 'order', 'author' ],
-		combinedFields: [
-			{
-				id: 'status_and_visibility',
-				label: 'Status & Visibility',
-				children: [ 'status', 'password' ],
-				direction: combinedFieldDirection,
-				render: ( { item } ) => item.status,
-			},
-		] as CombinedFormField< any >[],
-	};
+	const form = useMemo(
+		() => ( {
+			type,
+			labelPosition,
+			fields: [
+				'title',
+				{
+					id: 'status',
+					label: 'Status & Visibility',
+					children: [ 'status', 'password' ],
+				},
+				'order',
+				'author',
+			],
+		} ),
+		[ type, labelPosition ]
+	) as Form;
 
 	return (
-		<DataForm
+		<DataForm< SamplePost >
 			data={ post }
 			fields={ fields }
-			form={ {
-				...form,
-				type,
-			} }
+			form={ form }
 			onChange={ ( edits ) =>
 				setPost( ( prev ) => ( {
 					...prev,
@@ -191,11 +233,8 @@ export const CombinedFields = {
 	render: CombinedFieldsComponent,
 	argTypes: {
 		...meta.argTypes,
-		combinedFieldDirection: {
-			control: { type: 'select' },
-			description:
-				'Chooses the direction of the combined field. "vertical" is the default layout.',
-			options: [ 'vertical', 'horizontal' ],
-		},
+	},
+	args: {
+		type: 'panel',
 	},
 };

package/src/components/dataform-context/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+type DataFormContextType< Item > = {
+	fields: NormalizedField< Item >[];
+};
+
+const DataFormContext = createContext< DataFormContextType< any > >( {
+	fields: [],
+} );
+
+export function DataFormProvider< Item >( {
+	fields,
+	children,
+}: React.PropsWithChildren< { fields: NormalizedField< Item >[] } > ) {
+	return (
+		<DataFormContext.Provider value={ { fields } }>
+			{ children }
+		</DataFormContext.Provider>
+	);
+}
+
+export default DataFormContext;

package/src/components/dataviews/index.tsx

@@ -16,7 +16,7 @@ import DataViewsContext from '../dataviews-context';
 import {
 	default as DataViewsFilters,
 	useFilters,
-	FilterVisibilityToggle,
+	FiltersToggle,
 } from '../dataviews-filters';
 import DataViewsLayout from '../dataviews-layout';
 import DataViewsFooter from '../dataviews-footer';
@@ -75,7 +75,6 @@ export default function DataViews< Item >( {
 	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;
@@ -119,7 +118,6 @@ export default function DataViews< Item >( {
 				getItemId,
 				isItemClickable,
 				onClickItem,
-				density,
 			} }
 		>
 			<div className="dataviews-wrapper">
@@ -135,7 +133,7 @@ export default function DataViews< Item >( {
 						className="dataviews__search"
 					>
 						{ search && <DataViewsSearch label={ searchLabel } /> }
-						<FilterVisibilityToggle
+						<FiltersToggle
 							filters={ filters }
 							view={ view }
 							onChangeView={ onChangeView }
@@ -151,8 +149,6 @@ export default function DataViews< Item >( {
 					>
 						<DataViewsViewConfig
 							defaultLayouts={ defaultLayouts }
-							density={ density }
-							setDensity={ setDensity }
 						/>
 						{ header }
 					</HStack>

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

@@ -558,6 +558,7 @@ export const themeFields: Field< Theme >[] = [
 	},
 	{ id: 'requires', label: 'Requires at least' },
 	{ id: 'tested', label: 'Tested up to' },
+	{ id: 'icon', label: 'Icon', render: () => <Icon icon={ image } /> },
 	{
 		id: 'tags',
 		label: 'Tags',

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

@@ -65,6 +65,7 @@ export const Default = () => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
 		fields: [ 'title', 'description', 'categories' ],
+		layout: defaultLayouts[ DEFAULT_VIEW.type ].layout,
 	} );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
@@ -136,16 +137,28 @@ export const FieldsNoSortableNoHidable = () => {
 export const CombinedFields = () => {
 	const defaultLayoutsThemes = {
 		table: {
-			fields: [ 'theme', 'requires', 'tested' ],
+			fields: [ 'theme_with_combined', 'theme_with_simple' ],
 			layout: {
 				primaryField: 'name',
 				combinedFields: [
 					{
-						id: 'theme',
+						id: 'name_tested',
 						label: 'Theme',
-						children: [ 'name', 'description' ],
+						children: [ 'name', 'tested' ],
 						direction: 'vertical',
 					},
+					{
+						id: 'theme_with_combined',
+						label: 'Combine combined fields',
+						children: [ 'icon', 'name_tested' ],
+						direction: 'horizontal',
+					},
+					{
+						id: 'theme_with_simple',
+						label: 'Combine simple fields',
+						children: [ 'icon', 'name' ],
+						direction: 'horizontal',
+					},
 				] as CombinedField[],
 				styles: {
 					theme: {

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

@@ -28,7 +28,6 @@ type DataViewsContextType< Item > = {
 	getItemId: ( item: Item ) => string;
 	onClickItem: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
-	density: number;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -47,7 +46,6 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	getItemId: ( item ) => item.id,
 	onClickItem: () => {},
 	isItemClickable: () => false,
-	density: 0,
 } );
 
 export default DataViewsContext;

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

@@ -7,6 +7,7 @@ import {
 	useRef,
 	useMemo,
 	useCallback,
+	useEffect,
 } from '@wordpress/element';
 import { __experimentalHStack as HStack, Button } from '@wordpress/components';
 import { funnel } from '@wordpress/icons';
@@ -70,7 +71,7 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 	}, [ fields, view ] );
 }
 
-export function FilterVisibilityToggle( {
+export function FiltersToggle( {
 	filters,
 	view,
 	onChangeView,
@@ -85,6 +86,7 @@ export function FilterVisibilityToggle( {
 	isShowingFilter: boolean;
 	setIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;
 } ) {
+	const buttonRef = useRef< HTMLButtonElement >( null );
 	const onChangeViewWithFilterVisibility = useCallback(
 		( _view: View ) => {
 			onChangeView( _view );
@@ -98,48 +100,81 @@ export function FilterVisibilityToggle( {
 	if ( filters.length === 0 ) {
 		return null;
 	}
-	if ( ! hasVisibleFilters ) {
-		return (
-			<AddFilterMenu
-				filters={ filters }
-				view={ view }
-				onChangeView={ onChangeViewWithFilterVisibility }
-				setOpenedFilter={ setOpenedFilter }
-				trigger={
-					<Button
-						className="dataviews-filters__visibility-toggle"
-						size="compact"
-						icon={ funnel }
-						label={ __( 'Add filter' ) }
-						isPressed={ false }
-						aria-expanded={ false }
-					/>
-				}
-			/>
-		);
-	}
+
+	const addFilterButtonProps = {
+		label: __( 'Add filter' ),
+		'aria-expanded': false,
+		isPressed: false,
+	};
+	const toggleFiltersButtonProps = {
+		label: _x( 'Filter', 'verb' ),
+		'aria-expanded': isShowingFilter,
+		isPressed: isShowingFilter,
+		onClick: () => {
+			if ( ! isShowingFilter ) {
+				setOpenedFilter( null );
+			}
+			setIsShowingFilter( ! isShowingFilter );
+		},
+	};
+	const buttonComponent = (
+		<Button
+			ref={ buttonRef }
+			className="dataviews-filters__visibility-toggle"
+			size="compact"
+			icon={ funnel }
+			{ ...( hasVisibleFilters
+				? toggleFiltersButtonProps
+				: addFilterButtonProps ) }
+		/>
+	);
 	return (
 		<div className="dataviews-filters__container-visibility-toggle">
-			<Button
-				className="dataviews-filters__visibility-toggle"
-				size="compact"
-				icon={ funnel }
-				label={ _x( 'Filter', 'verb' ) }
-				onClick={ () => {
-					if ( ! isShowingFilter ) {
-						setOpenedFilter( null );
-					}
-					setIsShowingFilter( ! isShowingFilter );
-				} }
-				isPressed={ isShowingFilter }
-				aria-expanded={ isShowingFilter }
-			/>
-			{ hasVisibleFilters && !! view.filters?.length && (
+			{ ! hasVisibleFilters ? (
+				<AddFilterMenu
+					filters={ filters }
+					view={ view }
+					onChangeView={ onChangeViewWithFilterVisibility }
+					setOpenedFilter={ setOpenedFilter }
+					trigger={ buttonComponent }
+				/>
+			) : (
+				<FilterVisibilityToggle
+					buttonRef={ buttonRef }
+					filtersCount={ view.filters?.length }
+				>
+					{ buttonComponent }
+				</FilterVisibilityToggle>
+			) }
+		</div>
+	);
+}
+
+function FilterVisibilityToggle( {
+	buttonRef,
+	filtersCount,
+	children,
+}: {
+	buttonRef: React.RefObject< HTMLButtonElement >;
+	filtersCount?: number;
+	children: React.ReactNode;
+} ) {
+	// Focus the `add filter` button when unmounts.
+	useEffect(
+		() => () => {
+			buttonRef.current?.focus();
+		},
+		[ buttonRef ]
+	);
+	return (
+		<>
+			{ children }
+			{ !! filtersCount && (
 				<span className="dataviews-filters-toggle__count">
-					{ view.filters?.length }
+					{ filtersCount }
 				</span>
 			) }
-		</div>
+		</>
 	);
 }
 

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

@@ -57,6 +57,13 @@ interface ItemActionsProps< Item > {
 interface CompactItemActionsProps< Item > {
 	item: Item;
 	actions: Action< Item >[];
+	isSmall?: boolean;
+}
+
+interface PrimaryActionsProps< Item > {
+	item: Item;
+	actions: Action< Item >[];
+	registry: ReturnType< typeof useRegistry >;
 }
 
 function ButtonTrigger< Item >( {
@@ -179,6 +186,13 @@ export function ActionsMenuGroup< Item >( {
 	);
 }
 
+function hasOnlyOneActionAndIsPrimary< Item >(
+	primaryActions: Action< Item >[],
+	actions: Action< Item >[]
+) {
+	return primaryActions.length === 1 && actions.length === 1;
+}
+
 export default function ItemActions< Item >( {
 	item,
 	actions,
@@ -199,9 +213,27 @@ export default function ItemActions< Item >( {
 			eligibleActions: _eligibleActions,
 		};
 	}, [ actions, item ] );
+
 	if ( isCompact ) {
-		return <CompactItemActions item={ item } actions={ eligibleActions } />;
+		return (
+			<CompactItemActions
+				item={ item }
+				actions={ eligibleActions }
+				isSmall
+			/>
+		);
+	}
+
+	if ( hasOnlyOneActionAndIsPrimary( primaryActions, actions ) ) {
+		return (
+			<PrimaryActions
+				item={ item }
+				actions={ primaryActions }
+				registry={ registry }
+			/>
+		);
 	}
+
 	return (
 		<HStack
 			spacing={ 1 }
@@ -212,29 +244,11 @@ export default function ItemActions< Item >( {
 				width: 'auto',
 			} }
 		>
-			{ !! primaryActions.length &&
-				primaryActions.map( ( action ) => {
-					if ( 'RenderModal' in action ) {
-						return (
-							<ActionWithModal
-								key={ action.id }
-								action={ action }
-								items={ [ item ] }
-								ActionTrigger={ ButtonTrigger }
-							/>
-						);
-					}
-					return (
-						<ButtonTrigger
-							key={ action.id }
-							action={ action }
-							onClick={ () => {
-								action.callback( [ item ], { registry } );
-							} }
-							items={ [ item ] }
-						/>
-					);
-				} ) }
+			<PrimaryActions
+				item={ item }
+				actions={ primaryActions }
+				registry={ registry }
+			/>
 			<CompactItemActions item={ item } actions={ eligibleActions } />
 		</HStack>
 	);
@@ -243,12 +257,13 @@ export default function ItemActions< Item >( {
 function CompactItemActions< Item >( {
 	item,
 	actions,
+	isSmall,
 }: CompactItemActionsProps< Item > ) {
 	return (
 		<Menu
 			trigger={
 				<Button
-					size="compact"
+					size={ isSmall ? 'small' : 'compact' }
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					accessibleWhenDisabled
@@ -262,3 +277,36 @@ function CompactItemActions< Item >( {
 		</Menu>
 	);
 }
+
+function PrimaryActions< Item >( {
+	item,
+	actions,
+	registry,
+}: PrimaryActionsProps< Item > ) {
+	if ( ! Array.isArray( actions ) || actions.length === 0 ) {
+		return null;
+	}
+
+	return actions.map( ( action ) => {
+		if ( 'RenderModal' in action ) {
+			return (
+				<ActionWithModal
+					key={ action.id }
+					action={ action }
+					items={ [ item ] }
+					ActionTrigger={ ButtonTrigger }
+				/>
+			);
+		}
+		return (
+			<ButtonTrigger
+				key={ action.id }
+				action={ action }
+				onClick={ () => {
+					action.callback( [ item ], { registry } );
+				} }
+				items={ [ item ] }
+			/>
+		);
+	} );
+}

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

@@ -27,7 +27,6 @@ export default function DataViewsLayout() {
 		selection,
 		onChangeSelection,
 		setOpenedFilter,
-		density,
 		onClickItem,
 		isItemClickable,
 	} = useContext( DataViewsContext );
@@ -49,7 +48,6 @@ export default function DataViewsLayout() {
 			onClickItem={ onClickItem }
 			isItemClickable={ isItemClickable }
 			view={ view }
-			density={ density }
 		/>
 	);
 }