@wordpress/dataviews 10.3.1-next.2f1c7c01b.0 → 10.4.1-next.dc3f6d3c1.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/date.tsx

@@ -51,6 +51,7 @@ import type {
 	NormalizedField,
 } from '../types';
 import getCustomValidity from './utils/get-custom-validity';
+import { weekStartsOnToNumber } from '../utils/week-starts-on';
 
 const { DateCalendar, DateRangeCalendar } = unlock( componentsPrivateApis );
 
@@ -257,11 +258,24 @@ function CalendarDateControl< Item >( {
 	hideLabelFromVision,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { id, label, setValue, getValue, isValid } = field;
+	const {
+		id,
+		type,
+		label,
+		setValue,
+		getValue,
+		isValid,
+		format: fieldFormat,
+	} = field;
 	const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
 		null
 	);
 
+	let weekStartsOn;
+	if ( type === 'date' ) {
+		weekStartsOn = weekStartsOnToNumber( fieldFormat.weekStartsOn );
+	}
+
 	const fieldValue = getValue( { item: data } );
 	const value = typeof fieldValue === 'string' ? fieldValue : undefined;
 	const [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {
@@ -320,7 +334,6 @@ function CalendarDateControl< Item >( {
 
 	const {
 		timezone: { string: timezoneString },
-		l10n: { startOfWeek },
 	} = getSettings();
 
 	const displayLabel = isValid?.required
@@ -396,7 +409,7 @@ function CalendarDateControl< Item >( {
 						month={ calendarMonth }
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
-						weekStartsOn={ startOfWeek }
+						weekStartsOn={ weekStartsOn }
 					/>
 				</VStack>
 			</BaseControl>
@@ -411,7 +424,7 @@ function CalendarDateRangeControl< Item >( {
 	hideLabelFromVision,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { id, label, getValue, setValue } = field;
+	const { id, type, label, getValue, setValue, format: fieldFormat } = field;
 	let value: DateRange;
 	const fieldValue = getValue( { item: data } );
 	if (
@@ -422,6 +435,11 @@ function CalendarDateRangeControl< Item >( {
 		value = fieldValue as DateRange;
 	}
 
+	let weekStartsOn;
+	if ( type === 'date' ) {
+		weekStartsOn = weekStartsOnToNumber( fieldFormat.weekStartsOn );
+	}
+
 	const onChangeCallback = useCallback(
 		( newValue: DateRange ) => {
 			onChange(
@@ -521,7 +539,7 @@ function CalendarDateRangeControl< Item >( {
 		[ value, updateDateRange ]
 	);
 
-	const { timezone, l10n } = getSettings();
+	const { timezone } = getSettings();
 
 	const displayLabel = field.isValid?.required
 		? `${ label } (${ __( 'Required' ) })`
@@ -609,7 +627,7 @@ function CalendarDateRangeControl< Item >( {
 						month={ calendarMonth }
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezone.string || undefined }
-						weekStartsOn={ l10n.startOfWeek }
+						weekStartsOn={ weekStartsOn }
 					/>
 				</VStack>
 			</BaseControl>

package/src/dataform-controls/email.tsx

@@ -5,7 +5,7 @@ import {
 	Icon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
-import { atSymbol } from '@wordpress/icons';
+import { envelope } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export default function Email< Item >( {
 				type: 'email',
 				prefix: (
 					<InputControlPrefixWrapper variant="icon">
-						<Icon icon={ atSymbol } />
+						<Icon icon={ envelope } />
 					</InputControlPrefixWrapper>
 				),
 			} }

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

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	NormalizedForm,
+	NormalizedDetailsLayout,
+	FieldLayoutProps,
+} from '../../types';
+import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
+import { DEFAULT_LAYOUT } from '../normalize-form';
+
+export default function FormDetailsField< Item >( {
+	data,
+	field,
+	onChange,
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+
+	const form: NormalizedForm = useMemo(
+		() => ( {
+			layout: DEFAULT_LAYOUT,
+			fields: field.children ?? [],
+		} ),
+		[ field ]
+	);
+
+	if ( ! field.children ) {
+		return null;
+	}
+
+	// Find the summary field definition if specified
+	const summaryFieldId =
+		( field.layout as NormalizedDetailsLayout ).summary ?? '';
+	const summaryField = summaryFieldId
+		? fields.find( ( fieldDef ) => fieldDef.id === summaryFieldId )
+		: undefined;
+
+	// Render the summary content
+	let summaryContent;
+	if ( summaryField && summaryField.render ) {
+		// Use the field's render function to display the current value
+		summaryContent = (
+			<summaryField.render item={ data } field={ summaryField } />
+		);
+	} else {
+		// Fall back to the label
+		summaryContent = field.label || __( 'More details' );
+	}
+
+	return (
+		<details className="dataforms-layouts-details__details">
+			<summary className="dataforms-layouts-details__summary">
+				{ summaryContent }
+			</summary>
+			<div className="dataforms-layouts-details__content">
+				<DataFormLayout
+					data={ data }
+					form={ form }
+					onChange={ onChange }
+				/>
+			</div>
+		</details>
+	);
+}

package/src/dataform-layouts/details/style.scss

@@ -0,0 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.dataforms-layouts-details__content {
+	padding-top: $grid-unit-15;
+}

package/src/dataform-layouts/index.tsx

@@ -14,6 +14,7 @@ import FormRegularField from './regular';
 import FormPanelField from './panel';
 import FormCardField from './card';
 import FormRowField from './row';
+import FormDetailsField from './details';
 
 const FORM_FIELD_LAYOUTS = [
 	{
@@ -67,6 +68,10 @@ const FORM_FIELD_LAYOUTS = [
 			</VStack>
 		),
 	},
+	{
+		type: 'details',
+		component: FormDetailsField,
+	},
 ];
 
 export function getFormFieldLayout( type: string ) {

package/src/dataform-layouts/normalize-form.ts

@@ -11,6 +11,7 @@ import type {
 	NormalizedPanelLayout,
 	NormalizedCardLayout,
 	NormalizedRowLayout,
+	NormalizedDetailsLayout,
 	NormalizedCardSummaryField,
 	CardSummaryField,
 } from '../types';
@@ -94,6 +95,11 @@ function normalizeLayout( layout?: Layout ): NormalizedLayout {
 			alignment: layout?.alignment ?? 'center',
 			styles: layout?.styles ?? {},
 		} satisfies NormalizedRowLayout;
+	} else if ( layout?.type === 'details' ) {
+		normalizedLayout = {
+			type: 'details',
+			summary: layout?.summary ?? '',
+		} satisfies NormalizedDetailsLayout;
 	}
 
 	return normalizedLayout;

package/src/dataviews-layouts/index.ts

@@ -16,11 +16,13 @@ import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
 import ViewPickerGrid from './picker-grid';
+import ViewPickerTable from './picker-table';
 import {
 	LAYOUT_GRID,
 	LAYOUT_LIST,
 	LAYOUT_TABLE,
 	LAYOUT_PICKER_GRID,
+	LAYOUT_PICKER_TABLE,
 } from '../constants';
 import PreviewSizePicker from './utils/preview-size-picker';
 import DensityPicker from './table/density-picker';
@@ -54,4 +56,12 @@ export const VIEW_LAYOUTS = [
 		viewConfigOptions: PreviewSizePicker,
 		isPicker: true,
 	},
+	{
+		type: LAYOUT_PICKER_TABLE,
+		label: __( 'Table' ),
+		component: ViewPickerTable,
+		icon: blockTable,
+		viewConfigOptions: DensityPicker,
+		isPicker: true,
+	},
 ];

package/src/dataviews-layouts/list/style.scss

@@ -24,6 +24,7 @@ div.dataviews-view-list {
 			width: max-content;
 			flex: 0 0 auto;
 			gap: $grid-unit-05;
+			white-space: nowrap;
 
 			.components-button {
 				position: relative;