@wordpress/dataviews 14.2.1-next.v.202605131032.0 → 15.0.0

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

@@ -1,5 +1,4 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/variables" as vars;
 @use "../../../dataviews/style" as *;
 
 div.dataviews-view-list {
@@ -12,11 +11,11 @@ div.dataviews-view-list {
 	div[role="row"],
 	div[role="article"] {
 		margin: 0;
-		border-top: 1px solid $gray-100;
+		border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
-			padding: $grid-unit-20 $grid-unit-30;
+			padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
 			box-sizing: border-box;
 		}
 
@@ -24,7 +23,7 @@ div.dataviews-view-list {
 			display: flex;
 			width: max-content;
 			flex: 0 0 auto;
-			gap: $grid-unit-05;
+			gap: var(--wpds-dimension-gap-xs);
 			white-space: nowrap;
 
 			.components-button {
@@ -33,7 +32,7 @@ div.dataviews-view-list {
 			}
 
 			> div {
-				height: $button-size-small;
+				height: vars.$button-size-small;
 			}
 
 			> :not(:last-child) {
@@ -61,11 +60,11 @@ div.dataviews-view-list {
 		}
 
 		&.is-selected.is-selected {
-			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			border-top: 1px solid var(--wpds-color-stroke-surface-brand);
 
 			& + div[role="row"],
 			& + div[role="article"] {
-				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+				border-top: 1px solid var(--wpds-color-stroke-surface-brand);
 			}
 		}
 
@@ -73,18 +72,12 @@ div.dataviews-view-list {
 			&:hover,
 			&.is-hovered,
 			&:focus-within {
-				color: var(--wp-admin-theme-color);
-				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
-
-				& + div[role="row"],
-				& + div[role="article"] {
-					border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
-				}
+				color: var(--wpds-color-fg-interactive-brand);
+				background-color: var(--wpds-color-bg-interactive-brand-weak);
 
 				.dataviews-title-field,
 				.dataviews-view-list__field {
-					color: var(--wp-admin-theme-color);
+					color: var(--wpds-color-fg-interactive-brand);
 				}
 			}
 		}
@@ -96,12 +89,12 @@ div.dataviews-view-list {
 	div[role="article"].is-selected,
 	div[role="article"].is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			color: $gray-900;
+			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			color: var(--wpds-color-fg-interactive-neutral);
 
 			.dataviews-title-field,
 			.dataviews-view-list__field {
-				color: $gray-900;
+				color: var(--wpds-color-fg-interactive-neutral-active);
 			}
 		}
 	}
@@ -110,7 +103,7 @@ div.dataviews-view-list {
 		position: absolute;
 		z-index: 1;
 		inset: 0;
-		scroll-margin: $grid-unit-10 0;
+		scroll-margin: var(--wpds-dimension-gap-sm) 0;
 		appearance: none;
 		border: none;
 		background: none;
@@ -124,8 +117,8 @@ div.dataviews-view-list {
 				position: absolute;
 				content: "";
 				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;
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
+				border-radius: var(--wpds-border-radius-sm);
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
 			}
@@ -133,8 +126,8 @@ div.dataviews-view-list {
 	}
 	.dataviews-view-list__title-field {
 		flex: 1;
-		min-height: $grid-unit-30;
-		line-height: $grid-unit-30;
+		min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+		line-height: var(--wpds-typography-line-height-md);
 		overflow: hidden;
 		// The field should be in front of the main button in case it has a link/button.
 		&:has(a, button) {
@@ -143,13 +136,13 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__media-wrapper {
-		width: $grid-unit-05 * 13;
-		height: $grid-unit-05 * 13;
+		width: calc(var(--wpds-dimension-base) * 13);
+		height: calc(var(--wpds-dimension-base) * 13);
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
-		background-color: $white;
-		border-radius: $radius-medium;
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		border-radius: var(--wpds-border-radius-md);
 
 		img {
 			width: 100%;
@@ -164,24 +157,25 @@ div.dataviews-view-list {
 			left: 0;
 			width: 100%;
 			height: 100%;
-			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-			border-radius: $radius-medium;
+			box-shadow: inset 0 0 0 var(--wpds-border-width-xs) rgba(0, 0, 0, 0.1);
+			border-radius: var(--wpds-border-radius-md);
 		}
 	}
 
 	.dataviews-view-list__field-wrapper {
+		min-height: calc(var(--wpds-dimension-base) * 13); // Ensures title is centrally aligned when all fields are hidden
 		flex-grow: 1;
 		min-width: 0;
 	}
 
 	.dataviews-view-list__field {
-		color: $gray-700;
+		color: var(--wpds-color-fg-interactive-neutral-weak);
 	}
 
 	.dataviews-view-list__fields {
 		display: flex;
-		gap: $grid-unit-15;
-		row-gap: $grid-unit-05;
+		gap: var(--wpds-dimension-gap-md);
+		row-gap: var(--wpds-dimension-gap-xs);
 		flex-wrap: wrap;
 		font-size: 12px;
 
@@ -196,8 +190,8 @@ div.dataviews-view-list {
 		}
 
 		.dataviews-view-list__field-value {
-			min-height: $grid-unit-30;
-			line-height: $grid-unit-05 * 5;
+			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			line-height: var(--wpds-typography-line-height-sm);
 			display: flex;
 			align-items: center;
 		}
@@ -211,26 +205,30 @@ div.dataviews-view-list {
 	&.has-compact-density {
 		div[role="row"] {
 			.dataviews-view-list__item-wrapper {
-				padding: $grid-unit-10 $grid-unit-30;
+				padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-2xl);
 			}
 
 			.dataviews-view-list__title-field {
-				min-height: $grid-unit-20;
-				line-height: $grid-unit-20;
+				min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+				line-height: var(--wpds-typography-line-height-xs);
 			}
 
 			.dataviews-view-list__media-wrapper {
-				width: $grid-unit-05 * 8;
-				height: $grid-unit-05 * 8;
+				width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+			}
+
+			.dataviews-view-list__field-wrapper {
+				min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 			}
 
 			.dataviews-view-list__fields {
-				gap: $grid-unit-10;
-				row-gap: $grid-unit-05;
+				gap: var(--wpds-dimension-gap-sm);
+				row-gap: var(--wpds-dimension-gap-xs);
 
 				.dataviews-view-list__field-value {
-					min-height: $grid-unit-20;
-					line-height: $grid-unit-05 * 4;
+					min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+					line-height: var(--wpds-typography-line-height-xs);
 				}
 			}
 		}
@@ -239,26 +237,30 @@ div.dataviews-view-list {
 	&.has-comfortable-density {
 		div[role="row"] {
 			.dataviews-view-list__item-wrapper {
-				padding: $grid-unit-30 $grid-unit-30;
+				padding: var(--wpds-dimension-padding-2xl) var(--wpds-dimension-padding-2xl);
 			}
 
 			.dataviews-view-list__title-field {
-				min-height: $grid-unit-40;
-				line-height: $grid-unit-40;
+				min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				line-height: var(--wpds-typography-line-height-xl);
 			}
 
 			.dataviews-view-list__media-wrapper {
-				width: $grid-unit-05 * 16;
-				height: $grid-unit-05 * 16;
+				width: calc(var(--wpds-dimension-base) * 16);
+				height: calc(var(--wpds-dimension-base) * 16);
+			}
+
+			.dataviews-view-list__field-wrapper {
+				min-height: calc(var(--wpds-dimension-base) * 16);
 			}
 
 			.dataviews-view-list__fields {
-				gap: $grid-unit-20;
-				row-gap: $grid-unit-10;
+				gap: var(--wpds-dimension-gap-lg);
+				row-gap: var(--wpds-dimension-gap-sm);
 
 				.dataviews-view-list__field-value {
-					min-height: $grid-unit-40;
-					line-height: $grid-unit-05 * 6;
+					min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+					line-height: var(--wpds-typography-line-height-md);
 				}
 			}
 		}
@@ -270,9 +272,9 @@ div.dataviews-view-list {
 }
 
 .dataviews-view-list__group-header {
-	font-size: $font-size-large;
-	font-weight: $font-weight-medium;
-	color: $gray-900;
-	margin: 0 0 $grid-unit-10 0;
-	padding: 0 $grid-unit-30;
+	font-size: var(--wpds-typography-font-size-lg);
+	font-weight: var(--wpds-typography-font-weight-medium);
+	color: var(--wpds-color-fg-content-neutral);
+	margin: 0 0 var(--wpds-dimension-gap-sm) 0;
+	padding: 0 var(--wpds-dimension-padding-2xl);
 }

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

@@ -1,31 +1,28 @@
-@use "sass:math";
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 @use "../utils/grid-items.scss" as *;
 
 .dataviews-view-picker-grid {
 	// When grouped, the density class is on the parent Composite,
 	// and the gap is on child .dataviews-view-grid-items elements.
 	&.has-compact-density .dataviews-view-grid-items {
-		gap: $grid-unit-20;
+		gap: var(--wpds-dimension-gap-lg);
 	}
 
 	&.has-comfortable-density .dataviews-view-grid-items {
-		gap: $grid-unit-40;
+		gap: var(--wpds-dimension-gap-2xl);
 	}
 
 	.dataviews-view-picker-grid__card {
 		height: 100%;
 		justify-content: flex-start;
 		position: relative;
+		isolation: isolate;
 
 		.dataviews-view-picker-grid__title-actions {
-			padding: $grid-unit-10 0 $grid-unit-05;
+			padding: var(--wpds-dimension-padding-sm) 0 var(--wpds-dimension-padding-xs);
 		}
 
 		.dataviews-view-picker-grid__title-field {
-			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
+			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available. Preserve layout when there is no ellipsis button
 			overflow: hidden;
 			align-content: center;
 			text-align: start;
@@ -38,18 +35,16 @@
 
 		&.is-selected {
 			.dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
-				color: $gray-900;
+				color: var(--wpds-color-fg-content-neutral);
 			}
 		}
-		&.is-selected .dataviews-view-picker-grid__media::after,
-		.dataviews-view-picker-grid__media:focus::after {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-		}
 		&.is-selected .dataviews-view-picker-grid__media::after {
-			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			box-shadow:
+				inset 0 0 0 var(--wpds-border-width-xs) var(--wpds-color-stroke-interactive-brand),
+				inset 0 0 0 var(--wpds-border-width-sm) var(--wpds-color-bg-surface-neutral-strong);
 		}
 		.dataviews-view-picker-grid__media:focus::after {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
 		}
 	}
 
@@ -61,13 +56,13 @@
 		}
 
 		[data-active-item="true"] {
-			outline: 2px solid var(--wp-admin-theme-color);
+			outline: 2px solid var(--wpds-color-stroke-focus-brand);
 		}
 	}
 
 	.dataviews-selection-checkbox {
 		// Always show the checkbox in picker mode.
-		top: $grid-unit-10 !important;
+		top: var(--wpds-dimension-padding-sm) !important;
 
 		input {
 			// When the dataview is used as a picker, ensure the checkbox can't be clicked on.
@@ -80,8 +75,8 @@
 		width: 100%;
 		aspect-ratio: 1/1;
 		min-height: 0;
-		background-color: $white;
-		border-radius: $radius-medium;
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		border-radius: var(--wpds-border-radius-md);
 		position: relative;
 
 		img {
@@ -97,8 +92,8 @@
 			left: 0;
 			width: 100%;
 			height: 100%;
-			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-			border-radius: $grid-unit-05;
+			box-shadow: inset 0 0 0 var(--wpds-border-width-xs) rgba(0, 0, 0, 0.1);
+			border-radius: var(--wpds-border-radius-md);
 			pointer-events: none;
 		}
 	}
@@ -109,22 +104,22 @@
 		line-height: 16px;
 
 		&:not(:empty) {
-			padding: 0 0 $grid-unit-15;
+			padding: 0 0 var(--wpds-dimension-padding-md);
 		}
 
 		.dataviews-view-picker-grid__field-value:not(:empty) {
-			min-height: $grid-unit-30;
-			line-height: $grid-unit-05 * 5;
-			padding-top: math.div($grid-unit-05, 2);
+			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			line-height: var(--wpds-typography-line-height-sm);
+			padding-top: calc(var(--wpds-dimension-base) / 2);
 		}
 
 		.dataviews-view-picker-grid__field {
-			min-height: $grid-unit-30;
+			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
 			align-items: center;
 
 			.dataviews-view-picker-grid__field-name {
 				width: 35%;
-				color: $gray-700;
+				color: var(--wpds-color-fg-content-neutral-weak);
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
@@ -145,7 +140,7 @@
 
 	.dataviews-view-picker-grid__badge-fields {
 		&:not(:empty) {
-			padding-bottom: $grid-unit-15;
+			padding-bottom: var(--wpds-dimension-padding-md);
 		}
 	}
 }
@@ -158,19 +153,20 @@
 .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
 	position: absolute;
 	top: -9999em;
-	left: $grid-unit-10;
-	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+	left: var(--wpds-dimension-padding-sm);
+	// Ensure selection checkbox stays above the preview field.
+	z-index: 1;
 
 	@media (hover: none) {
 		// Show checkboxes on devices that do not support hover.
-		top: $grid-unit-10;
+		top: var(--wpds-dimension-padding-sm);
 	}
 }
 
 .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
 .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
 .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
-	top: $grid-unit-10;
+	top: var(--wpds-dimension-padding-sm);
 }
 
 .dataviews-view-picker-grid__media--clickable {
@@ -178,9 +174,9 @@
 }
 
 .dataviews-view-picker-grid-group__header {
-	font-size: $font-size-large;
-	font-weight: $font-weight-medium;
-	color: $gray-900;
-	margin: 0 0 $grid-unit-10 0;
-	padding: 0 $grid-unit-60;
+	font-size: var(--wpds-typography-font-size-lg);
+	font-weight: var(--wpds-typography-font-weight-medium);
+	color: var(--wpds-color-fg-content-neutral);
+	margin: 0 0 var(--wpds-dimension-gap-sm) 0;
+	padding: 0 calc(var(--wpds-dimension-base) * 12);
 }

package/src/components/dataviews-layouts/picker-table/index.tsx

@@ -142,6 +142,21 @@ function TableRow< Item >( {
 			aria-setsize={ paginationInfo.totalItems || undefined }
 			aria-posinset={ posinset }
 			role={ infiniteScrollEnabled ? 'article' : 'option' }
+			onMouseDown={ ( event ) => {
+				if ( event.button !== 0 ) {
+					return;
+				}
+				// Pre-focus the Composite container (parent `tbody`) so that
+				// when the row is focused on click, Ariakit sees the focus
+				// coming from within the Composite and uses `focusSilently`
+				// (which passes `preventScroll: true`). Without this, the
+				// first focus into the Composite scrolls the active row
+				// under the sticky table header, which also causes the click
+				// to land on a different element than the original target.
+				event.currentTarget.parentElement?.focus( {
+					preventScroll: true,
+				} );
+			} }
 			onClick={ () => {
 				// Toggle in/out of selection array
 				if ( isSelected ) {

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

@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/variables" as *;
-
 // Picker-specific table styles
 // The table picker mainly reuses the regular table styles from ../table/style.scss
 // Add any picker-specific overrides here if needed in the future.
@@ -9,7 +7,7 @@
 
 	// Constrain checkbox column to fixed width while other columns share remaining space.
 	.dataviews-view-table__checkbox-column {
-		width: $grid-unit-60;
+		width: calc(var(--wpds-dimension-base) * 12);
 	}
 
 	tbody:focus-visible {
@@ -20,7 +18,7 @@
 		}
 
 		[data-active-item="true"] {
-			outline: 2px solid var(--wp-admin-theme-color);
+			outline: 2px solid var(--wpds-color-stroke-focus-brand);
 		}
 	}
 
@@ -39,16 +37,15 @@
 		cursor: var(--wpds-cursor-control);
 
 		&.is-selected {
-			// Ensure selected rows are visually distinct
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
 		}
 
 		&.is-hovered {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
 		}
 
 		&.is-selected.is-hovered {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
 		}
 	}
 }

package/src/components/dataviews-layouts/table/column-header-menu.tsx

@@ -10,7 +10,7 @@ import { __, isRTL } from '@wordpress/i18n';
 import { arrowLeft, arrowRight, unseen, funnel } from '@wordpress/icons';
 import {
 	Button,
-	Icon,
+	Icon as WCIcon,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef, Children, Fragment, useContext } from '@wordpress/element';
@@ -181,7 +181,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					{ canAddFilter && (
 						<Menu.Group>
 							<Menu.Item
-								prefix={ <Icon icon={ funnel } /> }
+								prefix={ <WCIcon icon={ funnel } /> }
 								onClick={ () => {
 									setOpenedFilter( fieldId );
 									setIsShowingFilter( true );
@@ -209,7 +209,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 						<Menu.Group>
 							{ canMove && (
 								<Menu.Item
-									prefix={ <Icon icon={ arrowLeft } /> }
+									prefix={ <WCIcon icon={ arrowLeft } /> }
 									disabled={
 										isRtl
 											? index >=
@@ -243,7 +243,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 							) }
 							{ canMove && (
 								<Menu.Item
-									prefix={ <Icon icon={ arrowRight } /> }
+									prefix={ <WCIcon icon={ arrowRight } /> }
 									disabled={
 										isRtl
 											? index < 1
@@ -357,7 +357,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 							) }
 							{ isHidable && field && (
 								<Menu.Item
-									prefix={ <Icon icon={ unseen } /> }
+									prefix={ <WCIcon icon={ unseen } /> }
 									onClick={ () => {
 										onHide( field );
 										onChangeView( {