@wordpress/dataviews 4.4.6 → 4.6.0

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

@@ -7,63 +7,40 @@ ul.dataviews-view-list {
 
 	li {
 		margin: 0;
-		cursor: pointer;
 		border-top: 1px solid $gray-100;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
-			border-radius: $grid-unit-05;
-
-			> * {
-				width: 100%;
-			}
+			padding: $grid-unit-20 $grid-unit-30;
 		}
 
 		.dataviews-view-list__item-actions {
-			position: absolute;
-			top: $grid-unit-20;
-			right: 0;
-
+			flex: 0;
+			overflow: hidden;
 
 			> div {
 				height: $button-size-small;
 			}
 
 			.components-button {
+				position: relative;
+				z-index: 1;
 				opacity: 0;
 			}
 		}
 
-		&:has(.dataviews-view-list__fields:empty) {
-			.dataviews-view-list__item-actions {
-				top: 50%;
-				transform: translateY(-50%);
-			}
-		}
-
-		&.is-selected,
-		&.is-hovered,
-		&:focus-within {
+		&:where(.is-selected, .is-hovered, :focus-within) {
 			.dataviews-view-list__item-actions {
-				background: #f8f8f8;
-				padding-left: $grid-unit-10;
-				margin-right: $grid-unit-30;
-				box-shadow: -12px 0 8px 0 #f8f8f8;
+				flex-basis: min-content;
+				overflow: unset;
+				margin-inline: $grid-unit-10 0;
 
 				.components-button {
 					opacity: 1;
-					position: static;
 				}
 			}
 		}
 
-		&.is-selected {
-			.dataviews-view-list__item-actions {
-				background-color: rgb(247 248 255);
-				box-shadow: -12px 0 8px 0 rgb(247 248 255);
-			}
-		}
-
 		&.is-selected.is-selected {
 			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 
@@ -105,27 +82,38 @@ ul.dataviews-view-list {
 	}
 
 	.dataviews-view-list__item {
-		box-sizing: border-box;
-		padding: $grid-unit-20 $grid-unit-30;
-		width: 100%;
+		position: absolute;
+		z-index: 1;
+		inset: 0;
 		scroll-margin: $grid-unit-10 0;
+		appearance: none;
+		border: none;
+		background: none;
+		padding: 0;
+		cursor: pointer;
 
 		&:focus-visible {
+			outline: none;
+
 			&::before {
 				position: absolute;
 				content: "";
-				top: var(--wp-admin-border-width-focus);
-				right: var(--wp-admin-border-width-focus);
-				bottom: var(--wp-admin-border-width-focus);
-				left: var(--wp-admin-border-width-focus);
+				inset: var(--wp-admin-border-width-focus);
 				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 				border-radius: $radius-small;
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
 			}
 		}
-		.dataviews-view-list__primary-field {
-			min-height: $grid-unit-30;
-			line-height: $grid-unit-30;
-			overflow: hidden;
+	}
+	.dataviews-view-list__primary-field {
+		flex: 1;
+		min-height: $grid-unit-30;
+		line-height: $grid-unit-30;
+		overflow: hidden;
+		// The field should be in front of the main button in case it has a link/button.
+		&:has(a, button) {
+			z-index: 1;
 		}
 	}
 
@@ -164,6 +152,7 @@ ul.dataviews-view-list {
 
 	.dataviews-view-list__field-wrapper {
 		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
+		flex-grow: 1;
 	}
 
 	.dataviews-view-list__fields {

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 ) )