@wordpress/dataviews 3.0.0 → 4.1.0

package/src/dataforms-layouts/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import FormRegular from './regular';
+import FormPanel from './panel';
+
+const FORM_LAYOUTS = [
+	{
+		type: 'regular',
+		component: FormRegular,
+	},
+	{
+		type: 'panel',
+		component: FormPanel,
+	},
+];
+
+export function getFormLayout( type: string ) {
+	return FORM_LAYOUTS.find( ( layout ) => layout.type === type );
+}

package/src/dataforms-layouts/panel/index.tsx

@@ -0,0 +1,164 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { sprintf, __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../../normalize-fields';
+import type { DataFormProps, NormalizedField } from '../../types';
+
+interface FormFieldProps< Item > {
+	data: Item;
+	field: NormalizedField< Item >;
+	onChange: ( value: any ) => void;
+}
+
+function DropdownHeader( {
+	title,
+	onClose,
+}: {
+	title: string;
+	onClose: () => void;
+} ) {
+	return (
+		<VStack
+			className="dataforms-layouts-panel__dropdown-header"
+			spacing={ 4 }
+		>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+				{ onClose && (
+					<Button
+						className="dataforms-layouts-panel__dropdown-header-action"
+						label={ __( 'Close' ) }
+						icon={ closeSmall }
+						onClick={ onClose }
+					/>
+				) }
+			</HStack>
+		</VStack>
+	);
+}
+
+function FormField< Item >( {
+	data,
+	field,
+	onChange,
+}: FormFieldProps< Item > ) {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
+		null
+	);
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	return (
+		<HStack
+			ref={ setPopoverAnchor }
+			className="dataforms-layouts-panel__field"
+		>
+			<div className="dataforms-layouts-panel__field-label">
+				{ field.label }
+			</div>
+			<div>
+				<Dropdown
+					contentClassName="dataforms-layouts-panel__field-dropdown"
+					popoverProps={ popoverProps }
+					focusOnMount
+					toggleProps={ {
+						size: 'compact',
+						variant: 'tertiary',
+						tooltipPosition: 'middle left',
+					} }
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							className="dataforms-layouts-panel__field-control"
+							size="compact"
+							variant="tertiary"
+							aria-expanded={ isOpen }
+							aria-label={ sprintf(
+								// translators: %s: Field name.
+								__( 'Edit %s' ),
+								field.label
+							) }
+							onClick={ onToggle }
+						>
+							<field.render item={ data } />
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<>
+							<DropdownHeader
+								title={ field.label }
+								onClose={ onClose }
+							/>
+							<field.Edit
+								key={ field.id }
+								data={ data }
+								field={ field }
+								onChange={ onChange }
+								hideLabelFromVision
+							/>
+						</>
+					) }
+				/>
+			</div>
+		</HStack>
+	);
+}
+
+export default function FormPanel< Item >( {
+	data,
+	fields,
+	form,
+	onChange,
+}: DataFormProps< Item > ) {
+	const visibleFields = useMemo(
+		() =>
+			normalizeFields(
+				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+			),
+		[ fields, form.fields ]
+	);
+
+	return (
+		<VStack spacing={ 2 }>
+			{ visibleFields.map( ( field ) => {
+				return (
+					<FormField
+						key={ field.id }
+						data={ data }
+						field={ field }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
+}

package/src/dataforms-layouts/panel/style.scss

@@ -0,0 +1,59 @@
+.dataforms-layouts-panel__field {
+	width: 100%;
+	min-height: $grid-unit-40;
+	justify-content: flex-start !important;
+	align-items: flex-start !important;
+}
+
+.dataforms-layouts-panel__field-label {
+	width: 38%;
+	flex-shrink: 0;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
+}
+
+.dataforms-layouts-panel__field-control {
+	flex-grow: 1;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+
+	.components-button {
+		max-width: 100%;
+		text-align: left;
+		white-space: normal;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
+		min-height: $button-size-compact;
+	}
+
+	.components-dropdown {
+		max-width: 100%;
+	}
+}
+
+.dataforms-layouts-panel__field-dropdown .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
+
+.dataforms-layouts-panel__dropdown-header {
+	margin-bottom: $grid-unit-20;
+}
+
+[class].dataforms-layouts-panel__dropdown-header-action {
+	height: $icon-size;
+
+	&.has-icon {
+		min-width: $icon-size;
+		padding: 0;
+	}
+
+	&:not(.has-icon) {
+		text-decoration: underline;
+	}
+}

package/src/dataforms-layouts/regular/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../../normalize-fields';
+import type { DataFormProps } from '../../types';
+
+export default function FormRegular< Item >( {
+	data,
+	fields,
+	form,
+	onChange,
+}: DataFormProps< Item > ) {
+	const visibleFields = useMemo(
+		() =>
+			normalizeFields(
+				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+			),
+		[ fields, form.fields ]
+	);
+
+	return (
+		<VStack spacing={ 4 }>
+			{ visibleFields.map( ( field ) => {
+				return (
+					<field.Edit
+						key={ field.id }
+						data={ data }
+						field={ field }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
+}

package/src/dataviews-layouts/grid/density-picker.tsx

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { plus, reset } from '@wordpress/icons';
+import { useEffect } from '@wordpress/element';
+
+const viewportBreaks = {
+	xhuge: { min: 3, max: 6, default: 5 },
+	huge: { min: 2, max: 4, default: 4 },
+	xlarge: { min: 2, max: 3, default: 3 },
+	large: { min: 1, max: 2, default: 2 },
+	mobile: { min: 1, max: 2, default: 2 },
+};
+
+function useViewPortBreakpoint() {
+	const isXHuge = useViewportMatch( 'xhuge', '>=' );
+	const isHuge = useViewportMatch( 'huge', '>=' );
+	const isXlarge = useViewportMatch( 'xlarge', '>=' );
+	const isLarge = useViewportMatch( 'large', '>=' );
+	const isMobile = useViewportMatch( 'mobile', '>=' );
+
+	if ( isXHuge ) {
+		return 'xhuge';
+	}
+	if ( isHuge ) {
+		return 'huge';
+	}
+	if ( isXlarge ) {
+		return 'xlarge';
+	}
+	if ( isLarge ) {
+		return 'large';
+	}
+	if ( isMobile ) {
+		return 'mobile';
+	}
+	return null;
+}
+
+// Value is number from 0 to 100 representing how big an item is in the grid
+// 100 being the biggest and 0 being the smallest.
+// The size is relative to the viewport size, if one a given viewport the
+// number of allowed items in a grid is 3 to 6 a 0 ( the smallest ) will mean that the grid will
+// have 6 items in a row, a 100 ( the biggest ) will mean that the grid will have 3 items in a row.
+// A value of 75 will mean that the grid will have 4 items in a row.
+function getRangeValue(
+	density: number,
+	breakValues: { min: number; max: number; default: number }
+) {
+	const inverseDensity = breakValues.max - density;
+	const max = breakValues.max - breakValues.min;
+	return Math.round( ( inverseDensity * 100 ) / max );
+}
+
+export default function DensityPicker( {
+	density,
+	setDensity,
+}: {
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
+} ) {
+	const viewport = useViewPortBreakpoint();
+	useEffect( () => {
+		setDensity( ( _density ) => {
+			if ( ! viewport || ! _density ) {
+				return 0;
+			}
+			const breakValues = viewportBreaks[ viewport ];
+			if ( _density < breakValues.min ) {
+				return breakValues.min;
+			}
+			if ( _density > breakValues.max ) {
+				return breakValues.max;
+			}
+			return _density;
+		} );
+	}, [ setDensity, viewport ] );
+	if ( ! viewport ) {
+		return null;
+	}
+	const breakValues = viewportBreaks[ viewport ];
+	const densityToUse = density || breakValues.default;
+	const rangeValue = getRangeValue( densityToUse, breakValues );
+
+	const step = 100 / ( breakValues.max - breakValues.min + 1 );
+	return (
+		<>
+			<Button
+				size="compact"
+				icon={ reset }
+				disabled={ rangeValue <= 0 }
+				accessibleWhenDisabled
+				label={ __( 'Decrease size' ) }
+				onClick={ () => {
+					setDensity( densityToUse + 1 );
+				} }
+			/>
+			<RangeControl
+				__nextHasNoMarginBottom
+				showTooltip={ false }
+				className="dataviews-density-picker__range-control"
+				label={ __( 'Item size' ) }
+				hideLabelFromVision
+				value={ rangeValue }
+				min={ 0 }
+				max={ 100 }
+				withInputField={ false }
+				onChange={ ( value = 0 ) => {
+					const inverseValue = 100 - value;
+					setDensity(
+						Math.round(
+							( inverseValue *
+								( breakValues.max - breakValues.min ) ) /
+								100 +
+								breakValues.min
+						)
+					);
+				} }
+				step={ step }
+			/>
+			<Button
+				size="compact"
+				icon={ plus }
+				disabled={ rangeValue >= 100 }
+				accessibleWhenDisabled
+				label={ __( 'Increase size' ) }
+				onClick={ () => {
+					setDensity( densityToUse - 1 );
+				} }
+			/>
+		</>
+	);
+}

package/src/{view-grid.tsx → dataviews-layouts/grid/index.tsx}

@@ -19,15 +19,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ItemActions from './item-actions';
-import SingleSelectionCheckbox from './single-selection-checkbox';
-import { useHasAPossibleBulkAction } from './bulk-actions';
-import type { Action, NormalizedField, ViewGridProps } from './types';
-import type { SetSelection } from './private-types';
+import ItemActions from '../../components/dataviews-item-actions';
+import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
+import type { Action, NormalizedField, ViewGridProps } from '../../types';
+import type { SetSelection } from '../../private-types';
 
 interface GridItemProps< Item > {
 	selection: string[];
-	onSelectionChange: SetSelection;
+	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
 	item: Item;
 	actions: Action< Item >[];
@@ -40,7 +40,7 @@ interface GridItemProps< Item > {
 
 function GridItem< Item >( {
 	selection,
-	onSelectionChange,
+	onChangeSelection,
 	getItemId,
 	item,
 	actions,
@@ -53,6 +53,12 @@ function GridItem< Item >( {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render item={ item } />
+	) : null;
+	const renderedPrimaryField = primaryField?.render ? (
+		<primaryField.render item={ item } />
+	) : null;
 	return (
 		<VStack
 			spacing={ 0 }
@@ -67,7 +73,7 @@ function GridItem< Item >( {
 					if ( ! hasBulkAction ) {
 						return;
 					}
-					onSelectionChange(
+					onChangeSelection(
 						selection.includes( id )
 							? selection.filter( ( itemId ) => id !== itemId )
 							: [ ...selection, id ]
@@ -76,22 +82,22 @@ function GridItem< Item >( {
 			} }
 		>
 			<div className="dataviews-view-grid__media">
-				{ mediaField?.render( { item } ) }
+				{ renderedMediaField }
 			</div>
+			<SingleSelectionCheckbox
+				item={ item }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				getItemId={ getItemId }
+				primaryField={ primaryField }
+				disabled={ ! hasBulkAction }
+			/>
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<SingleSelectionCheckbox
-					item={ item }
-					selection={ selection }
-					onSelectionChange={ onSelectionChange }
-					getItemId={ getItemId }
-					primaryField={ primaryField }
-					disabled={ ! hasBulkAction }
-				/>
 				<HStack className="dataviews-view-grid__primary-field">
-					{ primaryField?.render( { item } ) }
+					{ renderedPrimaryField }
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
@@ -104,32 +110,20 @@ function GridItem< Item >( {
 					justify="flex-start"
 				>
 					{ badgeFields.map( ( field ) => {
-						const renderedValue = field.render( {
-							item,
-						} );
-						if ( ! renderedValue ) {
-							return null;
-						}
 						return (
 							<FlexItem
 								key={ field.id }
 								className="dataviews-view-grid__field-value"
 							>
-								{ renderedValue }
+								<field.render item={ item } />
 							</FlexItem>
 						);
 					} ) }
 				</HStack>
 			) }
 			{ !! visibleFields?.length && (
-				<VStack className="dataviews-view-grid__fields" spacing={ 3 }>
+				<VStack className="dataviews-view-grid__fields" spacing={ 1 }>
 					{ visibleFields.map( ( field ) => {
-						const renderedValue = field.render( {
-							item,
-						} );
-						if ( ! renderedValue ) {
-							return null;
-						}
 						return (
 							<Flex
 								className={ clsx(
@@ -151,13 +145,13 @@ function GridItem< Item >( {
 							>
 								<>
 									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.header }
+										{ field.label }
 									</FlexItem>
 									<FlexItem
 										className="dataviews-view-grid__field-value"
 										style={ { maxHeight: 'none' } }
 									>
-										{ renderedValue }
+										<field.render item={ item } />
 									</FlexItem>
 								</>
 							</Flex>
@@ -175,9 +169,10 @@ export default function ViewGrid< Item >( {
 	fields,
 	getItemId,
 	isLoading,
-	onSelectionChange,
+	onChangeSelection,
 	selection,
 	view,
+	density,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
@@ -208,6 +203,9 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
+	const gridStyle = density
+		? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }
+		: {};
 	return (
 		<>
 			{ hasData && (
@@ -216,6 +214,7 @@ export default function ViewGrid< Item >( {
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"
+					style={ gridStyle }
 					aria-busy={ isLoading }
 				>
 					{ data.map( ( item ) => {
@@ -223,7 +222,7 @@ export default function ViewGrid< Item >( {
 							<GridItem
 								key={ getItemId( item ) }
 								selection={ selection }
-								onSelectionChange={ onSelectionChange }
+								onChangeSelection={ onChangeSelection }
 								getItemId={ getItemId }
 								item={ item }
 								actions={ actions }