@wordpress/dataviews 10.1.5 → 10.3.0

package/src/components/dataviews-view-config/properties-section.tsx

@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	BaseControl,
+	Icon,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+import DataViewsContext from '../dataviews-context';
+
+function FieldItem( {
+	field,
+	isVisible,
+	onToggleVisibility,
+}: {
+	field: NormalizedField< any >;
+	isVisible: boolean;
+	onToggleVisibility?: () => void;
+} ) {
+	return (
+		<Item onClick={ field.enableHiding ? onToggleVisibility : undefined }>
+			<HStack expanded justify="flex-start" alignment="center">
+				<div style={ { height: 24, width: 24 } }>
+					{ isVisible && <Icon icon={ check } /> }
+				</div>
+				<span className="dataviews-view-config__label">
+					{ field.label }
+				</span>
+			</HStack>
+		</Item>
+	);
+}
+
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
+export function PropertiesSection( {
+	showLabel = true,
+}: {
+	showLabel?: boolean;
+} ) {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+
+	const togglableFields = [
+		view?.titleField,
+		view?.mediaField,
+		view?.descriptionField,
+	].filter( Boolean );
+
+	// Get all regular fields (non-locked) in their original order from fields prop
+	const regularFields = fields.filter(
+		( f ) =>
+			! togglableFields.includes( f.id ) &&
+			f.type !== 'media' &&
+			f.enableHiding !== false
+	);
+
+	if ( ! regularFields?.length ) {
+		return null;
+	}
+	const titleField = fields.find( ( f ) => f.id === view.titleField );
+	const previewField = fields.find( ( f ) => f.id === view.mediaField );
+	const descriptionField = fields.find(
+		( f ) => f.id === view.descriptionField
+	);
+
+	const lockedFields = [
+		{
+			field: titleField,
+			isVisibleFlag: 'showTitle',
+		},
+		{
+			field: previewField,
+			isVisibleFlag: 'showMedia',
+		},
+		{
+			field: descriptionField,
+			isVisibleFlag: 'showDescription',
+		},
+	].filter( ( { field } ) => isDefined( field ) );
+	const visibleFieldIds = view.fields ?? [];
+	const visibleRegularFieldsCount = regularFields.filter( ( f ) =>
+		visibleFieldIds.includes( f.id )
+	).length;
+
+	let visibleLockedFields = lockedFields.filter(
+		( { field, isVisibleFlag } ) =>
+			// @ts-expect-error
+			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
+	) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+	} >;
+
+	// If only one field (locked or regular) is visible, prevent it from being hidden
+	const totalVisibleFields =
+		visibleLockedFields.length + visibleRegularFieldsCount;
+	if ( totalVisibleFields === 1 ) {
+		if ( visibleLockedFields.length === 1 ) {
+			visibleLockedFields = visibleLockedFields.map( ( locked ) => ( {
+				...locked,
+				field: { ...locked.field, enableHiding: false },
+			} ) );
+		}
+	}
+
+	const hiddenLockedFields = lockedFields.filter(
+		( { field, isVisibleFlag } ) =>
+			// @ts-expect-error
+			isDefined( field ) && ! ( view[ isVisibleFlag ] ?? true )
+	) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+	} >;
+
+	return (
+		<VStack className="dataviews-field-control" spacing={ 0 }>
+			{ showLabel && (
+				<BaseControl.VisualLabel>
+					{ __( 'Properties' ) }
+				</BaseControl.VisualLabel>
+			) }
+			<VStack className="dataviews-view-config__properties" spacing={ 0 }>
+				<ItemGroup isBordered isSeparated size="medium">
+					{ visibleLockedFields.map( ( { field, isVisibleFlag } ) => {
+						return (
+							<FieldItem
+								key={ field.id }
+								field={ field }
+								isVisible
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										[ isVisibleFlag ]: false,
+									} );
+								} }
+							/>
+						);
+					} ) }
+
+					{ hiddenLockedFields.map( ( { field, isVisibleFlag } ) => {
+						return (
+							<FieldItem
+								key={ field.id }
+								field={ field }
+								isVisible={ false }
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										[ isVisibleFlag ]: true,
+									} );
+								} }
+							/>
+						);
+					} ) }
+
+					{ regularFields.map( ( field ) => {
+						// Check if this is the last visible field to prevent hiding
+						const isVisible = visibleFieldIds.includes( field.id );
+						const isLastVisible =
+							totalVisibleFields === 1 && isVisible;
+						const fieldToRender = isLastVisible
+							? { ...field, enableHiding: false }
+							: field;
+
+						return (
+							<FieldItem
+								key={ field.id }
+								field={ fieldToRender }
+								isVisible={ isVisible }
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										fields: isVisible
+											? visibleFieldIds.filter(
+													( fieldId ) =>
+														fieldId !== field.id
+											  )
+											: [ ...visibleFieldIds, field.id ],
+									} );
+								} }
+							/>
+						);
+					} ) }
+				</ItemGroup>
+			</VStack>
+		</VStack>
+	);
+}

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

@@ -58,44 +58,7 @@
 		}
 	}
 }
-.dataviews-field-control__field {
-	height: $grid-unit-40;
-}
-
-.dataviews-field-control__actions {
-	position: absolute;
-	top: -9999em;
-}
-.dataviews-field-control__actions.dataviews-field-control__actions {
-	gap: $grid-unit-05;
-}
-
-.dataviews-field-control__field:hover,
-.dataviews-field-control__field:focus-within,
-.dataviews-field-control__field.is-interacting {
-	.dataviews-field-control__actions {
-		position: unset;
-		top: unset;
-	}
-}
-
-.dataviews-field-control__icon {
-	display: flex;
-	width: $icon-size;
-}
-
-.dataviews-field-control__label-sub-label-container {
-	flex-grow: 1;
-}
-
-.dataviews-field-control__label {
-	display: block;
-}
 
-.dataviews-field-control__sub-label {
-	margin-top: $grid-unit-10;
-	margin-bottom: 0;
-	font-size: 11px;
-	font-style: normal;
-	color: $gray-700;
+.dataviews-view-config__label {
+	text-wrap: nowrap;
 }

package/src/constants.ts

@@ -186,3 +186,4 @@ export const LAYOUT_LIST = 'list';
 
 // Picker view layouts.
 export const LAYOUT_PICKER_GRID = 'pickerGrid';
+export const LAYOUT_PICKER_TABLE = 'pickerTable';

package/src/dataform-controls/datetime.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { format, isValid as isValidDate } from 'date-fns';
+import { format } from 'date-fns';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import {
 } from '@wordpress/components';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { getDate, getSettings } from '@wordpress/date';
+import { getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -22,18 +22,11 @@ import type { DataFormControlProps } from '../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
 import RelativeDateControl from './utils/relative-date-control';
 import getCustomValidity from './utils/get-custom-validity';
+import parseDateTime from '../field-types/utils/parse-date-time';
 import { unlock } from '../lock-unlock';
 
 const { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );
 
-const parseDateTime = ( dateTimeString?: string ): Date | null => {
-	if ( ! dateTimeString ) {
-		return null;
-	}
-	const parsed = getDate( dateTimeString );
-	return parsed && isValidDate( parsed ) ? parsed : null;
-};
-
 const formatDateTime = ( date?: Date | string ): string => {
 	if ( ! date ) {
 		return '';

package/src/dataform-controls/password.tsx

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	Button,
+} from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { seen, unseen } from '@wordpress/icons';
@@ -34,17 +37,18 @@ export default function Password< Item >( {
 				validity,
 				type: isVisible ? 'text' : 'password',
 				suffix: (
-					<Button
-						icon={ isVisible ? unseen : seen }
-						onClick={ toggleVisibility }
-						size="small"
-						variant="tertiary"
-						aria-label={
-							isVisible
-								? __( 'Hide password' )
-								: __( 'Show password' )
-						}
-					/>
+					<InputControlSuffixWrapper variant="control">
+						<Button
+							icon={ isVisible ? unseen : seen }
+							onClick={ toggleVisibility }
+							size="small"
+							label={
+								isVisible
+									? __( 'Hide password' )
+									: __( 'Show password' )
+							}
+						/>
+					</InputControlSuffixWrapper>
 				),
 			} }
 		/>

package/src/dataform-layouts/card/index.tsx

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
+import {
+	Button,
+	Card,
+	CardBody,
+	CardHeader as OriginalCardHeader,
+} from '@wordpress/components';
 import { useCallback, useContext, useMemo, useState } from '@wordpress/element';
 import { chevronDown, chevronUp } from '@wordpress/icons';
 
@@ -11,20 +16,40 @@ import { chevronDown, chevronUp } from '@wordpress/icons';
 import { getFormFieldLayout } from '..';
 import DataFormContext from '../../components/dataform-context';
 import type {
-	NormalizedCardLayout,
-	CardLayout,
 	FieldLayoutProps,
-	Form,
-	Layout,
+	NormalizedCardLayout,
 	NormalizedField,
+	NormalizedForm,
+	NormalizedLayout,
 } from '../../types';
 import { DataFormLayout } from '../data-form-layout';
-import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT, normalizeLayout } from '../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form';
 import { getSummaryFields } from '../get-summary-fields';
 
-export function useCollapsibleCard( initialIsOpen: boolean = true ) {
-	const [ isOpen, setIsOpen ] = useState( initialIsOpen );
+const NonCollapsibleCardHeader = ( {
+	children,
+	...props
+}: {
+	children: React.ReactNode;
+} ) => (
+	<OriginalCardHeader isBorderless { ...props }>
+		<div
+			style={ {
+				height: '40px', // This is to match the chevron's __next40pxDefaultSize
+				width: '100%',
+				display: 'flex',
+				justifyContent: 'space-between',
+				alignItems: 'center',
+			} }
+		>
+			{ children }
+		</div>
+	</OriginalCardHeader>
+);
+
+export function useCardHeader( layout: NormalizedCardLayout ) {
+	const { isOpened, isCollapsible } = layout;
+	const [ isOpen, setIsOpen ] = useState( isOpened );
 
 	const toggle = useCallback( () => {
 		setIsOpen( ( prev ) => ! prev );
@@ -38,13 +63,14 @@ export function useCollapsibleCard( initialIsOpen: boolean = true ) {
 			children: React.ReactNode;
 			[ key: string ]: any;
 		} ) => (
-			<CardHeader
+			<OriginalCardHeader
 				{ ...props }
 				onClick={ toggle }
 				style={ {
 					cursor: 'pointer',
 					...props.style,
 				} }
+				isBorderless
 			>
 				<div
 					style={ {
@@ -63,12 +89,17 @@ export function useCollapsibleCard( initialIsOpen: boolean = true ) {
 					aria-expanded={ isOpen }
 					aria-label={ isOpen ? 'Collapse' : 'Expand' }
 				/>
-			</CardHeader>
+			</OriginalCardHeader>
 		),
 		[ toggle, isOpen ]
 	);
 
-	return { isOpen, CollapsibleCardHeader };
+	const effectiveIsOpen = isCollapsible ? isOpen : true;
+	const CardHeaderComponent = isCollapsible
+		? CollapsibleCardHeader
+		: NonCollapsibleCardHeader;
+
+	return { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };
 }
 
 function isSummaryFieldVisible< Item >(
@@ -130,23 +161,17 @@ export default function FormCardField< Item >( {
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
+	const layout = field.layout as NormalizedCardLayout;
 
-	const layout: NormalizedCardLayout = normalizeLayout( {
-		...field.layout,
-		type: 'card',
-	} as CardLayout ) as NormalizedCardLayout;
-
-	const form: Form = useMemo(
-		(): Form => ( {
-			layout: DEFAULT_LAYOUT as Layout,
-			fields: isCombinedField( field ) ? field.children : [],
+	const form: NormalizedForm = useMemo(
+		() => ( {
+			layout: DEFAULT_LAYOUT as NormalizedLayout,
+			fields: field.children ?? [],
 		} ),
 		[ field ]
 	);
 
-	const { isOpen, CollapsibleCardHeader } = useCollapsibleCard(
-		layout.isOpened
-	);
+	const { isOpen, CardHeader } = useCardHeader( layout );
 
 	const summaryFields = getSummaryFields< Item >( layout.summary, fields );
 
@@ -154,12 +179,29 @@ export default function FormCardField< Item >( {
 		isSummaryFieldVisible( summaryField, layout.summary, isOpen )
 	);
 
-	if ( isCombinedField( field ) ) {
+	const sizeCard = {
+		blockStart: 'medium' as const,
+		blockEnd: 'medium' as const,
+		inlineStart: 'medium' as const,
+		inlineEnd: 'medium' as const,
+	};
+
+	if ( !! field.children ) {
 		const withHeader = !! field.label && layout.withHeader;
+
+		const sizeCardBody = {
+			blockStart: withHeader
+				? ( 'none' as const )
+				: ( 'medium' as const ),
+			blockEnd: 'medium' as const,
+			inlineStart: 'medium' as const,
+			inlineEnd: 'medium' as const,
+		};
+
 		return (
-			<Card className="dataforms-layouts-card__field">
+			<Card className="dataforms-layouts-card__field" size={ sizeCard }>
 				{ withHeader && (
-					<CollapsibleCardHeader className="dataforms-layouts-card__field-header">
+					<CardHeader className="dataforms-layouts-card__field-header">
 						<span className="dataforms-layouts-card__field-header-label">
 							{ field.label }
 						</span>
@@ -177,12 +219,15 @@ export default function FormCardField< Item >( {
 									) }
 								</div>
 							) }
-					</CollapsibleCardHeader>
+					</CardHeader>
 				) }
 				{ ( isOpen || ! withHeader ) && (
 					// If it doesn't have a header, keep it open.
 					// Otherwise, the card will not be visible.
-					<CardBody className="dataforms-layouts-card__field-control">
+					<CardBody
+						size={ sizeCardBody }
+						className="dataforms-layouts-card__field-control"
+					>
 						{ field.description && (
 							<div className="dataforms-layouts-card__field-description">
 								{ field.description }
@@ -213,10 +258,18 @@ export default function FormCardField< Item >( {
 		return null;
 	}
 	const withHeader = !! fieldDefinition.label && layout.withHeader;
+
+	const sizeCardBody = {
+		blockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),
+		blockEnd: 'medium' as const,
+		inlineStart: 'medium' as const,
+		inlineEnd: 'medium' as const,
+	};
+
 	return (
-		<Card className="dataforms-layouts-card__field">
+		<Card className="dataforms-layouts-card__field" size={ sizeCard }>
 			{ withHeader && (
-				<CollapsibleCardHeader className="dataforms-layouts-card__field-header">
+				<CardHeader className="dataforms-layouts-card__field-header">
 					<span className="dataforms-layouts-card__field-header-label">
 						{ fieldDefinition.label }
 					</span>
@@ -231,12 +284,15 @@ export default function FormCardField< Item >( {
 							) ) }
 						</div>
 					) }
-				</CollapsibleCardHeader>
+				</CardHeader>
 			) }
 			{ ( isOpen || ! withHeader ) && (
 				// If it doesn't have a header, keep it open.
 				// Otherwise, the card will not be visible.
-				<CardBody className="dataforms-layouts-card__field-control">
+				<CardBody
+					size={ sizeCardBody }
+					className="dataforms-layouts-card__field-control"
+				>
 					<RegularLayout
 						data={ data }
 						field={ field }

package/src/dataform-layouts/data-form-layout.tsx

@@ -2,22 +2,19 @@
  * WordPress dependencies
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { useContext, useMemo } from '@wordpress/element';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type {
 	FieldValidity,
-	Form,
-	FormField,
 	FormValidity,
-	SimpleFormField,
+	NormalizedForm,
+	NormalizedFormField,
 } from '../types';
 import { getFormFieldLayout } from './index';
 import DataFormContext from '../components/dataform-context';
-import { isCombinedField } from './is-combined-field';
-import normalizeFormFields, { normalizeLayout } from './normalize-form-fields';
 
 const DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (
 	<VStack className="dataforms-layouts__wrapper" spacing={ 4 }>
@@ -34,46 +31,38 @@ export function DataFormLayout< Item >( {
 	as,
 }: {
 	data: Item;
-	form: Form;
+	form: NormalizedForm;
 	onChange: ( value: any ) => void;
 	validity?: FormValidity;
 	children?: (
 		FieldLayout: ( props: {
 			data: Item;
-			field: FormField;
+			field: NormalizedFormField;
 			onChange: ( value: any ) => void;
 			hideLabelFromVision?: boolean;
 			validity?: FieldValidity;
 		} ) => React.JSX.Element | null,
-		childField: FormField,
+		childField: NormalizedFormField,
 		childFieldValidity?: FieldValidity
 	) => React.JSX.Element;
 	as?: React.ComponentType< { children: React.ReactNode } >;
 } ) {
 	const { fields: fieldDefinitions } = useContext( DataFormContext );
 
-	function getFieldDefinition( field: SimpleFormField | string ) {
-		const fieldId = typeof field === 'string' ? field : field.id;
-
+	function getFieldDefinition( field: NormalizedFormField ) {
 		return fieldDefinitions.find(
-			( fieldDefinition ) => fieldDefinition.id === fieldId
+			( fieldDefinition ) => fieldDefinition.id === field.id
 		);
 	}
 
-	const normalizedFormFields = useMemo(
-		() => normalizeFormFields( form ),
-		[ form ]
-	);
-
-	const normalizedFormLayout = normalizeLayout( form.layout );
 	const Wrapper =
 		as ??
-		getFormFieldLayout( normalizedFormLayout.type )?.wrapper ??
+		getFormFieldLayout( form.layout.type )?.wrapper ??
 		DEFAULT_WRAPPER;
 
 	return (
-		<Wrapper layout={ normalizedFormLayout }>
-			{ normalizedFormFields.map( ( formField ) => {
+		<Wrapper layout={ form.layout }>
+			{ form.fields.map( ( formField ) => {
 				const FieldLayout = getFormFieldLayout( formField.layout.type )
 					?.component;
 
@@ -81,7 +70,7 @@ export function DataFormLayout< Item >( {
 					return null;
 				}
 
-				const fieldDefinition = ! isCombinedField( formField )
+				const fieldDefinition = ! formField.children
 					? getFieldDefinition( formField )
 					: undefined;