@wordpress/dataviews 11.1.1-next.76cff8c98.0 → 11.2.1-next.06ee73755.0

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

@@ -78,41 +78,26 @@ export function PropertiesSection( {
 			field: descriptionField,
 			isVisibleFlag: 'showDescription',
 		},
-	].filter( ( { field } ) => isDefined( field ) );
+	].filter( ( { field } ) => isDefined( field ) ) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+	} >;
 	const visibleFieldIds = view.fields ?? [];
 	const visibleRegularFieldsCount = regularFields.filter( ( f ) =>
 		visibleFieldIds.includes( f.id )
 	).length;
 
-	let visibleLockedFields = lockedFields.filter(
-		( { field, isVisibleFlag } ) =>
+	const visibleLockedFields = lockedFields.filter(
+		( { isVisibleFlag } ) =>
 			// @ts-expect-error
-			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
-	) as Array< {
-		field: NormalizedField< any >;
-		isVisibleFlag: string;
-	} >;
+			view[ isVisibleFlag ] ?? true
+	);
 
 	// 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;
-	} >;
+	const isSingleVisibleLockedField =
+		totalVisibleFields === 1 && visibleLockedFields.length === 1;
 
 	return (
 		<Stack direction="column" className="dataviews-field-control">
@@ -126,32 +111,23 @@ export function PropertiesSection( {
 				className="dataviews-view-config__properties"
 			>
 				<ItemGroup isBordered isSeparated size="medium">
-					{ visibleLockedFields.map( ( { field, isVisibleFlag } ) => {
-						return (
-							<FieldItem
-								key={ field.id }
-								field={ field }
-								isVisible
-								onToggleVisibility={ () => {
-									onChangeView( {
-										...view,
-										[ isVisibleFlag ]: false,
-									} );
-								} }
-							/>
-						);
-					} ) }
+					{ lockedFields.map( ( { field, isVisibleFlag } ) => {
+						// @ts-expect-error
+						const isVisible = view[ isVisibleFlag ] ?? true;
+						const fieldToRender =
+							isSingleVisibleLockedField && isVisible
+								? { ...field, enableHiding: false }
+								: field;
 
-					{ hiddenLockedFields.map( ( { field, isVisibleFlag } ) => {
 						return (
 							<FieldItem
 								key={ field.id }
-								field={ field }
-								isVisible={ false }
+								field={ fieldToRender }
+								isVisible={ isVisible }
 								onToggleVisibility={ () => {
 									onChangeView( {
 										...view,
-										[ isVisibleFlag ]: true,
+										[ isVisibleFlag ]: ! isVisible,
 									} );
 								} }
 							/>
@@ -161,11 +137,10 @@ export function PropertiesSection( {
 					{ 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;
+						const fieldToRender =
+							totalVisibleFields === 1 && isVisible
+								? { ...field, enableHiding: false }
+								: field;
 
 						return (
 							<FieldItem

package/src/dataform/stories/index.story.tsx

@@ -100,7 +100,7 @@ export const Validation = {
 		layout: {
 			control: { type: 'select' },
 			description: 'Choose the form layout type.',
-			options: [ 'regular', 'panel', 'card' ],
+			options: [ 'regular', 'panel', 'card', 'details' ],
 		},
 		required: {
 			control: { type: 'boolean' },

package/src/dataform/stories/validation.tsx

@@ -86,7 +86,7 @@ const ValidationComponent = ( {
 	custom: 'sync' | 'async' | 'none';
 	pattern: boolean;
 	minMax: boolean;
-	layout: 'regular' | 'panel' | 'card';
+	layout: 'regular' | 'panel' | 'card' | 'details';
 } ) => {
 	type ValidatedItem = {
 		text: string;
@@ -908,6 +908,13 @@ const ValidationComponent = ( {
 			};
 		}
 
+		if ( layout === 'details' ) {
+			return {
+				layout: { type: 'details' as const },
+				fields: groupedFields,
+			};
+		}
+
 		return {
 			layout: { type: 'card' as const },
 			fields: groupedFields,

package/src/hooks/use-form-validity.ts

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import deepMerge from 'deepmerge';
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/types/dataviews.ts

@@ -252,6 +252,13 @@ export interface ViewTable extends ViewBase {
 
 export interface ViewList extends ViewBase {
 	type: 'list';
+
+	layout?: {
+		/**
+		 * The density of the view.
+		 */
+		density?: Density;
+	};
 }
 
 export interface ViewActivity extends ViewBase {

package/build-module/components/dataviews-layouts/table/density-picker.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/dataviews-layouts/table/density-picker.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\nimport type { ViewTable, Density } from '../../../types';\n\nexport default function DensityPicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewTable;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tsize=\"__unstable-large\"\n\t\t\tlabel={ __( 'Density' ) }\n\t\t\tvalue={ view.layout?.density || 'balanced' }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tdensity: value as Density,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tisBlock\n\t\t>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"comfortable\"\n\t\t\t\tvalue=\"comfortable\"\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Comfortable',\n\t\t\t\t\t'Density option for DataView layout'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"balanced\"\n\t\t\t\tvalue=\"balanced\"\n\t\t\t\tlabel={ _x( 'Balanced', 'Density option for DataView layout' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"compact\"\n\t\t\t\tvalue=\"compact\"\n\t\t\t\tlabel={ _x( 'Compact', 'Density option for DataView layout' ) }\n\t\t\t/>\n\t\t</ToggleGroupControl>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,oCAAoC;AAAA,EACpC,0CAA0C;AAAA,OACpC;AACP,SAAS,IAAI,UAAU;AACvB,SAAS,kBAAkB;AAK3B,OAAO,sBAAsB;AAO3B,SAeC,KAfD;AAJa,SAAR,gBAAiC;AACvC,QAAM,UAAU,WAAY,gBAAiB;AAC7C,QAAM,OAAO,QAAQ;AACrB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAQ,GAAI,SAAU;AAAA,MACtB,OAAQ,KAAK,QAAQ,WAAW;AAAA,MAChC,UAAW,CAAE,UAAW;AACvB,gBAAQ,aAAc;AAAA,UACrB,GAAG;AAAA,UACH,QAAQ;AAAA,YACP,GAAG,KAAK;AAAA,YACR,SAAS;AAAA,UACV;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA,SAAO;AAAA,MAEP;AAAA;AAAA,UAAC;AAAA;AAAA,YAEA,OAAM;AAAA,YACN,OAAQ;AAAA,cACP;AAAA,cACA;AAAA,YACD;AAAA;AAAA,UALI;AAAA,QAML;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAEA,OAAM;AAAA,YACN,OAAQ,GAAI,YAAY,oCAAqC;AAAA;AAAA,UAFzD;AAAA,QAGL;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAEA,OAAM;AAAA,YACN,OAAQ,GAAI,WAAW,oCAAqC;AAAA;AAAA,UAFxD;AAAA,QAGL;AAAA;AAAA;AAAA,EACD;AAEF;",
-  "names": []
-}