@wordpress/dataviews 4.0.0 → 4.1.0

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/{layouts → dataviews-layouts}/grid/density-picker.tsx

@@ -4,7 +4,7 @@
 import { RangeControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { plus, lineSolid } from '@wordpress/icons';
+import { plus, reset } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
 
 const viewportBreaks = {
@@ -90,7 +90,7 @@ export default function DensityPicker( {
 		<>
 			<Button
 				size="compact"
-				icon={ lineSolid }
+				icon={ reset }
 				disabled={ rangeValue <= 0 }
 				accessibleWhenDisabled
 				label={ __( 'Decrease size' ) }

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

@@ -84,18 +84,18 @@ function GridItem< Item >( {
 			<div className="dataviews-view-grid__media">
 				{ 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 }
-					onChangeSelection={ onChangeSelection }
-					getItemId={ getItemId }
-					primaryField={ primaryField }
-					disabled={ ! hasBulkAction }
-				/>
 				<HStack className="dataviews-view-grid__primary-field">
 					{ renderedPrimaryField }
 				</HStack>

package/src/{layouts → dataviews-layouts}/grid/style.scss

@@ -9,6 +9,7 @@
 	.dataviews-view-grid__card {
 		height: 100%;
 		justify-content: flex-start;
+		position: relative;
 
 		.dataviews-view-grid__title-actions {
 			padding: $grid-unit-10 0 $grid-unit-05;
@@ -22,6 +23,11 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
+
+			.dataviews-view-grid__media::after {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			}
 		}
 	}
 
@@ -61,10 +67,20 @@
 			padding: 0 0 $grid-unit-15;
 		}
 
+		.dataviews-view-grid__field-value:not(:empty) {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			padding-top: math.div($grid-unit-05, 2);
+		}
+
 		.dataviews-view-grid__field {
 			align-items: flex-start;
 			min-height: $grid-unit-30;
 
+			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+				display: none;
+			}
+
 			&:not(.is-column) {
 				align-items: center;
 
@@ -138,3 +154,16 @@
 .dataviews-view-grid__field:empty {
 	display: none;
 }
+
+.dataviews-view-grid__card .dataviews-selection-checkbox {
+	position: absolute;
+	top: -9999em;
+	left: $grid-unit-10;
+	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+}
+
+.dataviews-view-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+	top: $grid-unit-10;
+}

package/src/{layouts → dataviews-layouts}/list/style.scss

@@ -179,7 +179,10 @@
 		}
 
 		.dataviews-view-list__field-value {
-			line-height: $grid-unit-05 * 6;
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			display: flex;
+			align-items: center;
 		}
 	}
 

package/src/{layouts → dataviews-layouts}/table/column-header-menu.tsx

@@ -249,7 +249,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 							} }
 						>
 							<DropdownMenuItemLabel>
-								{ __( 'Hide' ) }
+								{ __( 'Hide column' ) }
 							</DropdownMenuItemLabel>
 						</DropdownMenuItem>
 					) }

package/src/field-types/index.tsx

@@ -0,0 +1,45 @@
+/**
+ * Internal dependencies
+ */
+import type { FieldType, SortDirection, ValidationContext } from '../types';
+import { default as integer } from './integer';
+import { default as text } from './text';
+
+/**
+ *
+ * @param {FieldType} type The field type definition to get.
+ *
+ * @return A field type definition.
+ */
+export default function getFieldTypeDefinition( type?: FieldType ) {
+	if ( 'integer' === type ) {
+		return integer;
+	}
+
+	if ( 'text' === type ) {
+		return text;
+	}
+
+	return {
+		sort: ( a: any, b: any, direction: SortDirection ) => {
+			if ( typeof a === 'number' && typeof b === 'number' ) {
+				return direction === 'asc' ? a - b : b - a;
+			}
+
+			return direction === 'asc'
+				? a.localeCompare( b )
+				: b.localeCompare( a );
+		},
+		isValid: ( value: any, context?: ValidationContext ) => {
+			if ( context?.elements ) {
+				const validValues = context?.elements?.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return false;
+				}
+			}
+
+			return true;
+		},
+		Edit: () => null,
+	};
+}

package/src/field-types/integer.tsx

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalNumberControl as NumberControl,
+	SelectControl,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	SortDirection,
+	ValidationContext,
+	DataFormControlProps,
+} from '../types';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	return direction === 'asc' ? a - b : b - a;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	// TODO: this implicitely means the value is required.
+	if ( value === '' ) {
+		return false;
+	}
+
+	if ( ! Number.isInteger( Number( value ) ) ) {
+		return false;
+	}
+
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( Number( value ) ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+function Edit< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, description } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( ( prevItem: Item ) => ( {
+				...prevItem,
+				[ id ]: newValue,
+			} ) ),
+		[ id, onChange ]
+	);
+
+	if ( field.elements ) {
+		const elements = [
+			/*
+			 * Value can be undefined when:
+			 *
+			 * - the field is not required
+			 * - in bulk editing
+			 *
+			 */
+			{ label: __( 'Select item' ), value: '' },
+			...field.elements,
+		];
+
+		return (
+			<SelectControl
+				label={ label }
+				value={ value }
+				options={ elements }
+				onChange={ onChangeControl }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+		);
+	}
+
+	return (
+		<NumberControl
+			label={ label }
+			help={ description }
+			value={ value }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
+
+export default {
+	sort,
+	isValid,
+	Edit,
+};

package/src/field-types/text.tsx

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl, TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	SortDirection,
+	ValidationContext,
+	DataFormControlProps,
+} from '../types';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	return direction === 'asc'
+		? valueA.localeCompare( valueB )
+		: valueB.localeCompare( valueA );
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements?.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+function Edit< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: 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 ]
+	);
+
+	if ( field.elements ) {
+		const elements = [
+			/*
+			 * Value can be undefined when:
+			 *
+			 * - the field is not required
+			 * - in bulk editing
+			 *
+			 */
+			{ label: __( 'Select item' ), value: '' },
+			...field.elements,
+		];
+
+		return (
+			<SelectControl
+				label={ label }
+				value={ value }
+				options={ elements }
+				onChange={ onChangeControl }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+		);
+	}
+
+	return (
+		<TextControl
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
+
+export default {
+	sort,
+	isValid,
+	Edit,
+};

package/src/filter-and-sort-data-view.ts

@@ -140,21 +140,7 @@ export function filterSortAndPaginate< Item >(
 		} );
 		if ( fieldToSort ) {
 			filteredData.sort( ( a, b ) => {
-				const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-				const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-
-				if (
-					typeof valueA === 'number' &&
-					typeof valueB === 'number'
-				) {
-					return view.sort?.direction === 'asc'
-						? valueA - valueB
-						: valueB - valueA;
-				}
-
-				return view.sort?.direction === 'asc'
-					? valueA.localeCompare( valueB )
-					: valueB.localeCompare( valueA );
+				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
 			} );
 		}
 	}

package/src/index.ts

@@ -1,5 +1,6 @@
 export { default as DataViews } from './components/dataviews';
 export { default as DataForm } from './components/dataform';
-export { VIEW_LAYOUTS } from './layouts';
+export { VIEW_LAYOUTS } from './dataviews-layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
+export { isItemValid } from './validation';