@wordpress/dataviews 17.0.1-next.v.202606191442.0 → 17.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "17.0.1-next.v.202606191442.0+17fe7db8a",
+	"version": "17.1.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -52,20 +52,20 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.29",
-		"@wordpress/base-styles": "^10.0.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/components": "^35.1.1-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/compose": "^8.1.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/data": "^10.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/date": "^5.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/deprecated": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/i18n": "^6.21.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/icons": "^14.0.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/keycodes": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/primitives": "^4.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/private-apis": "^1.48.2-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/ui": "^0.16.1-next.v.202606191442.0+17fe7db8a",
-		"@wordpress/warning": "^3.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/base-styles": "^10.2.0",
+		"@wordpress/components": "^36.1.0",
+		"@wordpress/compose": "^8.3.0",
+		"@wordpress/data": "^10.50.0",
+		"@wordpress/date": "^5.50.0",
+		"@wordpress/deprecated": "^4.50.0",
+		"@wordpress/element": "^8.2.0",
+		"@wordpress/i18n": "^6.23.0",
+		"@wordpress/icons": "^15.1.0",
+		"@wordpress/keycodes": "^4.50.0",
+		"@wordpress/primitives": "^4.50.0",
+		"@wordpress/private-apis": "^1.50.0",
+		"@wordpress/ui": "^0.17.0",
+		"@wordpress/warning": "^3.50.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"date-fns": "^4.1.0",
@@ -100,5 +100,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
+	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
 }

package/src/components/dataform-layouts/panel/dropdown.tsx

@@ -152,8 +152,8 @@ function PanelDropdown< Item >( {
 						validity={ validity }
 						touched={ touched }
 						disabled={ fieldDefinition.readOnly === true }
+						isOpen={ isOpen }
 						onClick={ onToggle }
-						aria-expanded={ isOpen }
 					/>
 				) }
 				renderContent={ ( { onClose } ) => (

package/src/components/dataform-layouts/panel/modal.tsx

@@ -197,7 +197,7 @@ function PanelModal< Item >( {
 				touched={ touched }
 				disabled={ fieldDefinition.readOnly === true }
 				onClick={ () => setIsOpen( true ) }
-				aria-expanded={ isOpen }
+				isOpen={ isOpen }
 			/>
 			{ isOpen && (
 				<ModalContent

package/src/components/dataform-layouts/panel/style.scss

@@ -107,14 +107,11 @@
 	position: relative;
 	z-index: 1;
 	cursor: help;
-	fill: var(--wpds-color-foreground-content-error-weak);
+	color: var(--wpds-color-foreground-content-error-weak);
 	display: inline-flex;
 	flex-direction: row;
 	align-items: center;
 	gap: var(--wpds-dimension-gap-xs);
-	svg {
-		fill: currentColor;
-	}
 }
 
 .dataforms-layouts-panel__field-control {

package/src/components/dataform-layouts/panel/summary-button.tsx

@@ -34,8 +34,8 @@ export default function SummaryButton< Item >( {
 	validity,
 	touched,
 	disabled,
+	isOpen,
 	onClick,
-	'aria-expanded': ariaExpanded,
 }: {
 	data: Item;
 	field: NormalizedFormField;
@@ -44,8 +44,8 @@ export default function SummaryButton< Item >( {
 	validity?: FieldValidity;
 	touched: boolean;
 	disabled?: boolean;
+	isOpen: boolean;
 	onClick: () => void;
-	'aria-expanded'?: boolean;
 } ) {
 	const { labelPosition, editVisibility } =
 		field.layout as NormalizedPanelLayout;
@@ -81,11 +81,20 @@ export default function SummaryButton< Item >( {
 		  );
 
 	const rowRef = useRef< HTMLDivElement >( null );
+	const editButtonRef = useRef< HTMLButtonElement >( null );
 
-	const handleRowClick = () => {
-		const selection =
-			rowRef.current?.ownerDocument.defaultView?.getSelection();
-		if ( selection && selection.toString().length > 0 ) {
+	const handleRowClick = ( event: React.MouseEvent ) => {
+		// Prevent a drag-to-select from opening the flyout — focus could move
+		// in and lose the selection. Skip the guard for double-clicks (standard
+		// button behavior), an already-open flyout, and the edit button.
+		if (
+			! isOpen &&
+			event.detail < 2 &&
+			! editButtonRef.current?.contains( event.target as Node ) &&
+			rowRef.current?.ownerDocument.defaultView
+				?.getSelection()
+				?.toString()
+		) {
 			return;
 		}
 		onClick();
@@ -165,11 +174,12 @@ export default function SummaryButton< Item >( {
 			</span>
 			{ ! disabled && (
 				<Button
+					ref={ editButtonRef }
 					className="dataforms-layouts-panel__field-trigger-icon"
 					label={ ariaLabel }
 					icon={ pencil }
 					size="small"
-					aria-expanded={ ariaExpanded }
+					aria-expanded={ isOpen }
 					aria-haspopup="dialog"
 					aria-describedby={ `${ controlId }` }
 				/>

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

@@ -171,7 +171,7 @@
 }
 
 .dataviews-filters__search-widget-filter-combobox-list {
-	max-height: calc(var(--wpds-dimension-base) * 46);
+	max-height: 184px;
 	padding: var(--wpds-dimension-padding-xs);
 	overflow: auto;
 	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);

package/src/components/dataviews-layouts/activity/style.scss

@@ -109,8 +109,8 @@
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 3 - 1px);
-				height: calc(var(--wpds-dimension-base) * 3 - 1px);
+				width: calc(var(--wpds-dimension-size-3xs) - 1px);
+				height: calc(var(--wpds-dimension-size-3xs) - 1px);
 			}
 			.dataviews-view-activity__item-content {
 				margin: var(--wpds-dimension-gap-md) 0;
@@ -126,8 +126,8 @@
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 6 + 1px);
-				height: calc(var(--wpds-dimension-base) * 6 + 1px);
+				width: calc(var(--wpds-dimension-size-sm) + 1px);
+				height: calc(var(--wpds-dimension-size-sm) + 1px);
 			}
 			.dataviews-view-activity__item-content {
 				margin: var(--wpds-dimension-gap-md) 0;
@@ -144,8 +144,8 @@
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 8 + 1px);
-				height: calc(var(--wpds-dimension-base) * 8 + 1px);
+				width: calc(var(--wpds-dimension-size-md) + 1px);
+				height: calc(var(--wpds-dimension-size-md) + 1px);
 			}
 			.dataviews-view-activity__item-content {
 				margin: var(--wpds-dimension-gap-sm) 0 var(--wpds-dimension-gap-lg);
@@ -156,8 +156,8 @@
 		&.is-comfortable,
 		&.is-balanced {
 			.dataviews-view-activity__item-bullet {
-				width: calc(var(--wpds-dimension-base) * 2 + 1px);
-				height: calc(var(--wpds-dimension-base) * 2 + 1px);
+				width: calc(var(--wpds-dimension-size-4xs) + 1px);
+				height: calc(var(--wpds-dimension-size-4xs) + 1px);
 				position: relative;
 				top: 50%;
 				transform: translateY(-50%);

package/src/components/dataviews-layouts/grid/style.scss

@@ -147,7 +147,13 @@
 		.dataviews-view-grid__field-value:not(:empty) {
 			min-height: var(--wpds-dimension-size-sm);
 			line-height: var(--wpds-typography-line-height-sm);
-			padding-top: calc(var(--wpds-dimension-base) / 2);
+			// Top half of the slack between the row height and the line box,
+			// optically centering a single line within the row.
+			padding-top:
+				calc((
+					var(--wpds-dimension-size-sm) -
+					var(--wpds-typography-line-height-sm)
+				) / 2);
 		}
 
 		.dataviews-view-grid__field {

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

@@ -1,5 +1,14 @@
 @use "../../../dataviews/style" as *;
 
+// Square media (thumbnail) size per density. The compact density uses the
+// `--wpds-dimension-size-md` token; these larger densities have no matching
+// token, so they're kept as local constants. The field wrapper reuses the
+// same value as its `min-height` to keep the title centered against the media.
+// TODO: Replace with `--wpds-dimension-size-*` tokens if 48px and 64px are
+// added to the WPDS element size scale.
+$media-size: 48px;
+$media-size-comfortable: 64px;
+
 div.dataviews-view-list {
 	list-style-type: none;
 }
@@ -135,8 +144,8 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__media-wrapper {
-		width: calc(var(--wpds-dimension-base) * 13);
-		height: calc(var(--wpds-dimension-base) * 13);
+		width: $media-size;
+		height: $media-size;
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
@@ -162,7 +171,7 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__field-wrapper {
-		min-height: calc(var(--wpds-dimension-base) * 13); // Ensures title is centrally aligned when all fields are hidden
+		min-height: $media-size; // Ensures title is centrally aligned when all fields are hidden
 		flex-grow: 1;
 		min-width: 0;
 	}
@@ -245,12 +254,12 @@ div.dataviews-view-list {
 			}
 
 			.dataviews-view-list__media-wrapper {
-				width: calc(var(--wpds-dimension-base) * 16);
-				height: calc(var(--wpds-dimension-base) * 16);
+				width: $media-size-comfortable;
+				height: $media-size-comfortable;
 			}
 
 			.dataviews-view-list__field-wrapper {
-				min-height: calc(var(--wpds-dimension-base) * 16);
+				min-height: $media-size-comfortable;
 			}
 
 			.dataviews-view-list__fields {

package/src/components/dataviews-layouts/picker-activity/style.scss

@@ -44,8 +44,8 @@
 				}
 			}
 			.dataviews-view-picker-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 3 - 1px);
-				height: calc(var(--wpds-dimension-base) * 3 - 1px);
+				width: calc(var(--wpds-dimension-size-3xs) - 1px);
+				height: calc(var(--wpds-dimension-size-3xs) - 1px);
 			}
 			.dataviews-view-picker-activity__item-content {
 				margin: var(--wpds-dimension-gap-md) 0;
@@ -61,8 +61,8 @@
 				}
 			}
 			.dataviews-view-picker-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 6 + 1px);
-				height: calc(var(--wpds-dimension-base) * 6 + 1px);
+				width: calc(var(--wpds-dimension-size-sm) + 1px);
+				height: calc(var(--wpds-dimension-size-sm) + 1px);
 			}
 			.dataviews-view-picker-activity__item-content {
 				margin: var(--wpds-dimension-gap-md) 0;
@@ -79,8 +79,8 @@
 				}
 			}
 			.dataviews-view-picker-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 8 + 1px);
-				height: calc(var(--wpds-dimension-base) * 8 + 1px);
+				width: calc(var(--wpds-dimension-size-md) + 1px);
+				height: calc(var(--wpds-dimension-size-md) + 1px);
 			}
 			.dataviews-view-picker-activity__item-content {
 				margin: var(--wpds-dimension-gap-sm) 0 var(--wpds-dimension-gap-lg);
@@ -91,8 +91,8 @@
 		&.is-comfortable,
 		&.is-balanced {
 			.dataviews-view-picker-activity__item-bullet {
-				width: calc(var(--wpds-dimension-base) * 2 + 1px);
-				height: calc(var(--wpds-dimension-base) * 2 + 1px);
+				width: calc(var(--wpds-dimension-size-4xs) + 1px);
+				height: calc(var(--wpds-dimension-size-4xs) + 1px);
 				position: relative;
 				top: 50%;
 				transform: translateY(-50%);

package/src/components/dataviews-layouts/picker-grid/style.scss

@@ -110,7 +110,13 @@
 		.dataviews-view-picker-grid__field-value:not(:empty) {
 			min-height: var(--wpds-dimension-size-sm);
 			line-height: var(--wpds-typography-line-height-sm);
-			padding-top: calc(var(--wpds-dimension-base) / 2);
+			// Top half of the slack between the row height and the line box,
+			// optically centering a single line within the row.
+			padding-top:
+				calc((
+					var(--wpds-dimension-size-sm) -
+					var(--wpds-typography-line-height-sm)
+				) / 2);
 		}
 
 		.dataviews-view-picker-grid__field {
@@ -178,5 +184,5 @@
 	font-weight: var(--wpds-typography-font-weight-medium);
 	color: var(--wpds-color-foreground-content-neutral);
 	margin: 0 0 var(--wpds-dimension-gap-sm) 0;
-	padding: 0 calc(var(--wpds-dimension-base) * 12);
+	padding: 0 48px;
 }

package/src/components/dataviews-layouts/picker-table/style.scss

@@ -7,7 +7,9 @@
 
 	// Constrain checkbox column to fixed width while other columns share remaining space.
 	.dataviews-view-table__checkbox-column {
-		width: calc(var(--wpds-dimension-base) * 12);
+		// TODO: Replace with a `--wpds-dimension-size-*` token if 48px is added
+		// to the WPDS element size scale.
+		width: 48px;
 	}
 
 	tbody:focus-visible {

package/src/dataviews/style.scss

@@ -16,7 +16,7 @@
 	flex-grow: 1;
 	min-height: 0;
 	box-sizing: border-box;
-	scroll-padding-bottom: calc(var(--wpds-dimension-base) * 16);
+	scroll-padding-bottom: 64px;
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: dataviews-wrapper / inline-size;
 	display: flex;