@wordpress/dataviews 4.4.3 → 4.5.0

package/src/components/dataform-combined-edit/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormCombinedEditProps, NormalizedField } from '../../types';
+
+function Header( { title }: { title: string } ) {
+	return (
+		<VStack className="dataforms-layouts__dropdown-header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+			</HStack>
+		</VStack>
+	);
+}
+
+function DataFormCombinedEdit< Item >( {
+	field,
+	data,
+	onChange,
+	hideLabelFromVision,
+}: DataFormCombinedEditProps< Item > ) {
+	const className = 'dataforms-combined-edit';
+	const visibleChildren = ( field.children ?? [] )
+		.map( ( fieldId ) => field.fields.find( ( { id } ) => id === fieldId ) )
+		.filter(
+			( childField ): childField is NormalizedField< Item > =>
+				!! childField
+		);
+	const children = visibleChildren.map( ( child ) => {
+		return (
+			<div className="dataforms-combined-edit__field" key={ child.id }>
+				<child.Edit
+					data={ data }
+					field={ child }
+					onChange={ onChange }
+				/>
+			</div>
+		);
+	} );
+
+	const Stack = field.direction === 'horizontal' ? HStack : VStack;
+
+	return (
+		<>
+			{ ! hideLabelFromVision && <Header title={ field.label } /> }
+			<Stack spacing={ 4 } className={ className } as="fieldset">
+				{ children }
+			</Stack>
+		</>
+	);
+}
+
+export default DataFormCombinedEdit;

package/src/components/dataform-combined-edit/style.scss

@@ -0,0 +1,12 @@
+.dataforms-layouts-panel__field-dropdown {
+	.dataforms-combined-edit {
+		border: none;
+		padding: 0;
+	}
+}
+
+.dataforms-combined-edit {
+	&__field {
+		flex: 1 1 auto;
+	}
+}

package/src/components/dataviews-filters/style.scss

@@ -160,7 +160,6 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-	max-height: $grid-unit * 23;
 	padding: $grid-unit-05;
 	overflow: auto;
 }

package/src/components/dataviews-view-config/index.tsx

@@ -8,6 +8,7 @@ import type { ChangeEvent } from 'react';
  */
 import {
 	Button,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Dropdown,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -27,6 +28,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { memo, useContext, useMemo } from '@wordpress/element';
 import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
 import warning from '@wordpress/warning';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -55,6 +57,8 @@ interface ViewTypeMenuProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
+const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 };
+
 function ViewTypeMenu( {
 	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: ViewTypeMenuProps ) {
@@ -510,7 +514,7 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigContent( {
+function DataviewsViewConfigDropdown( {
 	density,
 	setDensity,
 }: {
@@ -518,25 +522,52 @@ function DataviewsViewConfigContent( {
 	setDensity: React.Dispatch< React.SetStateAction< number > >;
 } ) {
 	const { view } = useContext( DataViewsContext );
+	const popoverId = useInstanceId(
+		_DataViewsViewConfig,
+		'dataviews-view-config-dropdown'
+	);
+
 	return (
-		<VStack className="dataviews-view-config" spacing={ 6 }>
-			<SettingsSection title={ __( 'Appearance' ) }>
-				<HStack expanded className="is-divided-in-two">
-					<SortFieldControl />
-					<SortDirectionControl />
-				</HStack>
-				{ view.type === LAYOUT_GRID && (
-					<DensityPicker
-						density={ density }
-						setDensity={ setDensity }
+		<Dropdown
+			popoverProps={ {
+				...DATAVIEWS_CONFIG_POPOVER_PROPS,
+				id: popoverId,
+			} }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				return (
+					<Button
+						size="compact"
+						icon={ cog }
+						label={ _x( 'View options', 'View is used as a noun' ) }
+						onClick={ onToggle }
+						aria-expanded={ isOpen ? 'true' : 'false' }
+						aria-controls={ popoverId }
 					/>
-				) }
-				<ItemsPerPageControl />
-			</SettingsSection>
-			<SettingsSection title={ __( 'Properties' ) }>
-				<FieldControl />
-			</SettingsSection>
-		</VStack>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<VStack className="dataviews-view-config" spacing={ 6 }>
+						<SettingsSection title={ __( 'Appearance' ) }>
+							<HStack expanded className="is-divided-in-two">
+								<SortFieldControl />
+								<SortDirectionControl />
+							</HStack>
+							{ view.type === LAYOUT_GRID && (
+								<DensityPicker
+									density={ density }
+									setDensity={ setDensity }
+								/>
+							) }
+							<ItemsPerPageControl />
+						</SettingsSection>
+						<SettingsSection title={ __( 'Properties' ) }>
+							<FieldControl />
+						</SettingsSection>
+					</VStack>
+				</DropdownContentWrapper>
+			) }
+		/>
 	);
 }
 
@@ -552,28 +583,9 @@ function _DataViewsViewConfig( {
 	return (
 		<>
 			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
-			<Dropdown
-				popoverProps={ { placement: 'bottom-end', offset: 9 } }
-				contentClassName="dataviews-view-config"
-				renderToggle={ ( { onToggle } ) => {
-					return (
-						<Button
-							size="compact"
-							icon={ cog }
-							label={ _x(
-								'View options',
-								'View is used as a noun'
-							) }
-							onClick={ onToggle }
-						/>
-					);
-				} }
-				renderContent={ () => (
-					<DataviewsViewConfigContent
-						density={ density }
-						setDensity={ setDensity }
-					/>
-				) }
+			<DataviewsViewConfigDropdown
+				density={ density }
+				setDensity={ setDensity }
 			/>
 		</>
 	);

package/src/components/dataviews-view-config/style.scss

@@ -1,12 +1,9 @@
 .dataviews-view-config {
-	.components-popover__content {
-		width: 320px;
-		/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
-		container-type: inline-size;
-		padding: $grid-unit-20;
-		font-size: $default-font-size;
-		line-height: $default-line-height;
-	}
+	width: 320px;
+	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
+	container-type: inline-size;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
 }
 
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {

package/src/dataforms-layouts/get-visible-fields.ts

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeCombinedFields } from '../normalize-fields';
+import type {
+	Field,
+	CombinedFormField,
+	NormalizedCombinedFormField,
+} from '../types';
+
+export function getVisibleFields< Item >(
+	fields: Field< Item >[],
+	formFields: string[] = [],
+	combinedFields?: CombinedFormField< Item >[]
+): Field< Item >[] {
+	const visibleFields: Array<
+		Field< Item > | NormalizedCombinedFormField< Item >
+	> = [ ...fields ];
+	if ( combinedFields ) {
+		visibleFields.push(
+			...normalizeCombinedFields( combinedFields, fields )
+		);
+	}
+	return formFields
+		.map( ( fieldId ) =>
+			visibleFields.find( ( { id } ) => id === fieldId )
+		)
+		.filter( ( field ): field is Field< Item > => !! field );
+}

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

@@ -17,7 +17,8 @@ import { closeSmall } from '@wordpress/icons';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps, NormalizedField, Field } from '../../types';
+import { getVisibleFields } from '../get-visible-fields';
+import type { DataFormProps, NormalizedField } from '../../types';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -44,12 +45,10 @@ function DropdownHeader( {
 				<Spacer />
 				{ onClose && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
-						className="dataforms-layouts-panel__dropdown-header-action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }
 						onClick={ onClose }
+						size="small"
 					/>
 				) }
 			</HStack>
@@ -144,13 +143,13 @@ export default function FormPanel< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				( form.fields ?? [] )
-					.map( ( fieldId ) =>
-						fields.find( ( { id } ) => id === fieldId )
-					)
-					.filter( ( field ): field is Field< Item > => !! field )
+				getVisibleFields< Item >(
+					fields,
+					form.fields,
+					form.combinedFields
+				)
 			),
-		[ fields, form.fields ]
+		[ fields, form.fields, form.combinedFields ]
 	);
 
 	return (

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

@@ -44,16 +44,3 @@
 .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

@@ -8,7 +8,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps, Field } from '../../types';
+import { getVisibleFields } from '../get-visible-fields';
+import type { DataFormProps } from '../../types';
 
 export default function FormRegular< Item >( {
 	data,
@@ -19,13 +20,13 @@ export default function FormRegular< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				( form.fields ?? [] )
-					.map( ( fieldId ) =>
-						fields.find( ( { id } ) => id === fieldId )
-					)
-					.filter( ( field ): field is Field< Item > => !! field )
+				getVisibleFields< Item >(
+					fields,
+					form.fields,
+					form.combinedFields
+				)
 			),
-		[ fields, form.fields ]
+		[ fields, form.fields, form.combinedFields ]
 	);
 
 	return (

package/src/normalize-fields.ts

@@ -2,8 +2,14 @@
  * Internal dependencies
  */
 import getFieldTypeDefinition from './field-types';
-import type { Field, NormalizedField } from './types';
+import type {
+	CombinedFormField,
+	Field,
+	NormalizedField,
+	NormalizedCombinedFormField,
+} from './types';
 import { getControl } from './dataform-controls';
+import DataFormCombinedEdit from './components/dataform-combined-edit';
 
 /**
  * Apply default values and normalize the fields config.
@@ -66,3 +72,29 @@ export function normalizeFields< Item >(
 		};
 	} );
 }
+
+/**
+ * Apply default values and normalize the fields config.
+ *
+ * @param combinedFields combined field list.
+ * @param fields         Fields config.
+ * @return Normalized fields config.
+ */
+export function normalizeCombinedFields< Item >(
+	combinedFields: CombinedFormField< Item >[],
+	fields: Field< Item >[]
+): NormalizedCombinedFormField< Item >[] {
+	return combinedFields.map( ( combinedField ) => {
+		return {
+			...combinedField,
+			Edit: DataFormCombinedEdit,
+			fields: normalizeFields(
+				combinedField.children
+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< Item > => !! field )
+			),
+		};
+	} );
+}

package/src/style.scss

@@ -6,6 +6,7 @@
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
 @import "./components/dataviews-view-config/style.scss";
+@import "./components/dataform-combined-edit/style.scss";
 
 @import "./dataviews-layouts/grid/style.scss";
 @import "./dataviews-layouts/list/style.scss";

package/src/types.ts

@@ -174,14 +174,6 @@ export type Fields< Item > = Field< Item >[];
 
 export type Data< Item > = Item[];
 
-/**
- * The form configuration.
- */
-export type Form = {
-	type?: 'regular' | 'panel';
-	fields?: string[];
-};
-
 export type DataFormControlProps< Item > = {
 	data: Item;
 	field: NormalizedField< Item >;
@@ -524,9 +516,37 @@ export interface SupportedLayouts {
 	table?: Omit< ViewTable, 'type' >;
 }
 
+export interface CombinedFormField< Item > extends CombinedField {
+	render?: ComponentType< { item: Item } >;
+}
+
+export interface DataFormCombinedEditProps< Item > {
+	field: NormalizedCombinedFormField< Item >;
+	data: Item;
+	onChange: ( value: Record< string, any > ) => void;
+	hideLabelFromVision?: boolean;
+}
+
+export type NormalizedCombinedFormField< Item > = CombinedFormField< Item > & {
+	fields: NormalizedField< Item >[];
+	Edit?: ComponentType< DataFormCombinedEditProps< Item > >;
+};
+
+/**
+ * The form configuration.
+ */
+export type Form< Item > = {
+	type?: 'regular' | 'panel';
+	fields?: string[];
+	/**
+	 * The fields to combine.
+	 */
+	combinedFields?: CombinedFormField< Item >[];
+};
+
 export interface DataFormProps< Item > {
 	data: Item;
 	fields: Field< Item >[];
-	form: Form;
+	form: Form< Item >;
 	onChange: ( value: Record< string, any > ) => void;
 }

package/src/validation.ts

@@ -7,7 +7,7 @@ import type { Field, Form } from './types';
 export function isItemValid< Item >(
 	item: Item,
 	fields: Field< Item >[],
-	form: Form
+	form: Form< Item >
 ): boolean {
 	const _fields = normalizeFields(
 		fields.filter( ( { id } ) => !! form.fields?.includes( id ) )