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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "16.0.0",
+	"version": "17.0.1-next.v.202606191442.0+17fe7db8a",
 	"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",
@@ -48,49 +48,57 @@
 		},
 		"./build-style/": "./build-style/"
 	},
-	"react-native": "src/index",
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^9.1.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
-		"@wordpress/data": "^10.48.0",
-		"@wordpress/date": "^5.48.0",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/icons": "^13.3.0",
-		"@wordpress/keycodes": "^4.48.0",
-		"@wordpress/primitives": "^4.48.0",
-		"@wordpress/private-apis": "^1.48.0",
-		"@wordpress/ui": "^0.15.0",
-		"@wordpress/warning": "^3.48.0",
+		"@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",
 		"clsx": "^2.1.1",
-		"colord": "^2.7.0",
+		"colord": "^2.9.3",
 		"date-fns": "^4.1.0",
-		"deepmerge": "4.3.1",
+		"deepmerge": "^4.3.1",
 		"fast-deep-equal": "^3.1.3",
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "^10.2.8",
-		"@storybook/react-vite": "^10.2.8",
+		"@storybook/addon-docs": "^10.4.3",
+		"@storybook/react-vite": "^10.4.3",
+		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^29.5.14",
 		"esbuild": "^0.27.2",
-		"storybook": "^10.2.8"
+		"storybook": "^10.4.3"
 	},
 	"peerDependencies": {
+		"@types/react": "^18.3.27",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
 }

package/src/components/dataform-controls/style.scss

@@ -29,6 +29,6 @@
 	border: 1px solid var(--wpds-color-stroke-surface-neutral);
 
 	&:active {
-		background-color: var(--wpds-color-bg-interactive-neutral-strong-active);
+		background-color: var(--wpds-color-background-interactive-neutral-strong-active);
 	}
 }

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

@@ -11,7 +11,7 @@
 }
 
 .dataforms-layouts-card__field-description {
-	color: var(--wpds-color-fg-content-neutral-weak);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 	display: block;
 	font-size: var(--wpds-typography-font-size-md);
 	margin-bottom: var(--wpds-dimension-gap-lg);

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

@@ -1,6 +1,6 @@
 .dataforms-layouts-details__summary-content {
 	display: inline-flex;
-	min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-sm);
 }
 
 .dataforms-layouts-details__content {

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

@@ -6,7 +6,7 @@
 	color: inherit;
 	display: flex;
 	width: 100%;
-	min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-sm);
 	cursor: var(--wpds-cursor-control);
 	align-items: flex-start;
 	border-radius: var(--wpds-border-radius-sm);
@@ -14,7 +14,7 @@
 
 	&--label-side {
 		flex-direction: row;
-		gap: var(--wpds-dimension-gap-md);
+		gap: var(--wpds-dimension-gap-sm);
 	}
 
 	&--label-top {
@@ -27,14 +27,14 @@
 	}
 
 	&:not(.is-disabled):hover {
-		color: var(--wpds-color-fg-interactive-brand);
+		color: var(--wpds-color-foreground-interactive-brand);
 
 		.dataforms-layouts-panel__field-trigger-icon {
 			opacity: 1;
 		}
 
 		.dataforms-layouts-panel__field-label {
-			color: var(--wpds-color-fg-interactive-brand);
+			color: var(--wpds-color-foreground-interactive-brand);
 		}
 	}
 
@@ -42,7 +42,7 @@
 		cursor: default;
 
 		.dataforms-layouts-panel__field-control {
-			color: var(--wpds-color-fg-content-neutral-weak);
+			color: var(--wpds-color-foreground-content-neutral-weak);
 			font-weight: var(--wpds-typography-font-weight-regular);
 		}
 	}
@@ -55,13 +55,13 @@
 
 	&:hover,
 	&:focus-visible {
-		fill: var(--wpds-color-fg-interactive-brand);
+		fill: var(--wpds-color-foreground-interactive-brand);
 	}
 }
 
 .dataforms-layouts-panel__field-trigger-icon {
 	padding: 0;
-	color: var(--wpds-color-fg-interactive-brand);
+	color: var(--wpds-color-foreground-interactive-brand);
 	flex: 0 0 auto;
 	opacity: 0;
 	border-radius: var(--wpds-border-radius-xs);
@@ -70,7 +70,7 @@
 		opacity: 1;
 		outline:
 			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 	}
 }
 
@@ -85,12 +85,12 @@
 .dataforms-layouts-panel__field-label {
 	width: 38%;
 	flex-shrink: 0;
-	min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-sm);
 	display: flex;
 	align-items: center;
 	line-height: var(--wpds-typography-line-height-sm);
 	hyphens: auto;
-	color: var(--wpds-color-fg-content-neutral-weak);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 
 	.components-base-control__label {
 		display: inline;
@@ -99,7 +99,7 @@
 	}
 
 	&.has-error {
-		color: var(--wpds-color-fg-content-error-weak);
+		color: var(--wpds-color-foreground-content-error-weak);
 	}
 }
 
@@ -107,7 +107,7 @@
 	position: relative;
 	z-index: 1;
 	cursor: help;
-	fill: var(--wpds-color-fg-content-error-weak);
+	fill: var(--wpds-color-foreground-content-error-weak);
 	display: inline-flex;
 	flex-direction: row;
 	align-items: center;
@@ -120,34 +120,21 @@
 .dataforms-layouts-panel__field-control {
 	flex-grow: 1;
 	min-width: 0;
-	min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-sm);
 	line-height: var(--wpds-typography-line-height-md);
 	display: flex;
 	align-items: center;
-	overflow: hidden;
+	overflow: clip;
+	// padding-inline + negative margin-inline creates room within the
+	// clip boundary for focus rings of inner controls.
+	padding-inline: var(--wpds-border-width-focus);
+	margin-inline: calc(-1 * var(--wpds-border-width-focus));
 	word-break: break-word;
 	font-weight: var(--wpds-typography-font-weight-medium);
 
 	> * {
 		min-width: 0;
 	}
-
-	.components-button {
-		max-width: 100%;
-		text-align: left;
-		white-space: normal;
-		text-wrap: balance; // Fallback for Safari.
-		text-wrap: pretty;
-		min-height: vars.$button-size-compact;
-	}
-
-	&.components-button.is-link[aria-disabled="true"] {
-		text-decoration: none;
-	}
-
-	.components-dropdown {
-		max-width: 100%;
-	}
 }
 
 .dataforms-layouts-panel__field-trigger--label-top

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

@@ -10,7 +10,6 @@ import { Button, Icon as WCIcon } from '@wordpress/components';
 import { sprintf, _x } from '@wordpress/i18n';
 import { error as errorIcon, pencil } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 import { useRef } from '@wordpress/element';
 

package/src/components/dataform-layouts/panel/utils/get-label-content.tsx

@@ -3,7 +3,6 @@
  */
 import { Icon as WCIcon } from '@wordpress/components';
 import { error as errorIcon } from '@wordpress/icons';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip, VisuallyHidden } from '@wordpress/ui';
 
 function getLabelContent(

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

@@ -1,20 +1,20 @@
 .dataforms-layouts-regular__field {
 	width: 100%;
-	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-md);
 	justify-content: flex-start !important;
 	align-items: flex-start !important;
 
 	.components-base-control__label,
 	.components-input-control__label,
 	.components-form-token-field__label {
-		color: var(--wpds-color-fg-content-neutral);
+		color: var(--wpds-color-foreground-content-neutral);
 	}
 }
 
 .dataforms-layouts-regular__field-label {
 	width: 38%;
 	flex-shrink: 0;
-	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-md);
 	display: flex;
 	align-items: center;
 	line-height: var(--wpds-typography-line-height-sm);
@@ -31,7 +31,7 @@
 
 .dataforms-layouts-regular__field-control {
 	flex-grow: 1;
-	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-md);
 	display: flex;
 	align-items: center;
 }

package/src/components/dataviews-bulk-actions/style.scss

@@ -1,8 +1,8 @@
 .dataviews-bulk-actions-footer__item-count {
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 }
 
 .dataviews-bulk-actions-footer__container {
 	margin-right: auto;
-	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-md);
 }

package/src/components/dataviews-filters/filter.tsx

@@ -16,7 +16,6 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, useRef } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Stack, Tooltip } from '@wordpress/ui';
 
 /**

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

@@ -52,7 +52,7 @@
 	}
 
 	.dataviews-filters__summary-operators-filter-name {
-		color: var(--wpds-color-fg-content-neutral-weak);
+		color: var(--wpds-color-foreground-content-neutral-weak);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -76,8 +76,8 @@
 		border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
 		cursor: var(--wpds-cursor-control);
 		padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
-		min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
-		color: var(--wpds-color-fg-interactive-neutral);
+		min-height: var(--wpds-dimension-size-md);
+		color: var(--wpds-color-foreground-interactive-neutral);
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -88,26 +88,26 @@
 		}
 
 		&.has-reset {
-			padding-inline-end: calc(#{vars.$icon-size} + var(--wpds-dimension-padding-xs));
+			padding-inline-end: calc(var(--wpds-dimension-size-sm) + var(--wpds-dimension-padding-xs));
 		}
 
 		&:hover:not(&.is-not-clickable),
 		&:focus-visible,
 		&[aria-expanded="true"] {
-			color: var(--wpds-color-fg-interactive-neutral);
+			color: var(--wpds-color-foreground-interactive-neutral);
 			border-color: var(--wpds-color-stroke-interactive-neutral-active);
-			background-color: var(--wpds-color-bg-interactive-neutral-weak-active);
+			background-color: var(--wpds-color-background-interactive-neutral-weak-active);
 		}
 
 		&.has-values {
-			color: var(--wpds-color-fg-interactive-brand);
-			background: var(--wpds-color-bg-interactive-brand-weak);
+			color: var(--wpds-color-foreground-interactive-brand);
+			background: var(--wpds-color-background-interactive-brand-weak);
 			border-color: var(--wpds-color-stroke-interactive-brand);
 
 			&:hover:not(&.is-not-clickable),
 			&[aria-expanded="true"] {
-				color: var(--wpds-color-fg-interactive-brand-active);
-				background: var(--wpds-color-bg-interactive-brand-weak-active);
+				color: var(--wpds-color-foreground-interactive-brand-active);
+				background: var(--wpds-color-background-interactive-brand-weak-active);
 				border-color: var(--wpds-color-stroke-interactive-brand-active);
 			}
 		}
@@ -116,7 +116,7 @@
 			outline: none;
 			box-shadow:
 				0 0 0 var(--wpds-border-width-focus)
-				var(--wpds-color-stroke-focus-brand);
+				var(--wpds-color-stroke-focus);
 		}
 
 		.dataviews-filters-__summary-filter-text-name {
@@ -125,9 +125,8 @@
 	}
 
 	.dataviews-filters__summary-chip-remove {
-		// TODO: use size token when available.
-		width: vars.$icon-size;
-		height: vars.$icon-size;
+		width: var(--wpds-dimension-size-sm);
+		height: var(--wpds-dimension-size-sm);
 		border-radius: var(--wpds-border-radius-md);
 		border: 0;
 		padding: 0;
@@ -142,23 +141,23 @@
 		cursor: var(--wpds-cursor-control);
 
 		svg {
-			fill: var(--wpds-color-fg-interactive-neutral);
+			fill: var(--wpds-color-foreground-interactive-neutral);
 		}
 
 		&:hover,
 		&:focus {
-			background: var(--wpds-color-bg-interactive-neutral-weak-active);
+			background: var(--wpds-color-background-interactive-neutral-weak-active);
 			svg {
-				fill: var(--wpds-color-fg-interactive-neutral-active);
+				fill: var(--wpds-color-foreground-interactive-neutral-active);
 			}
 		}
 
 		&.has-values {
 			svg {
-				fill: var(--wpds-color-fg-interactive-brand);
+				fill: var(--wpds-color-foreground-interactive-brand);
 			}
 			&:hover {
-				background: var(--wpds-color-bg-interactive-brand-weak-active);
+				background: var(--wpds-color-background-interactive-brand-weak-active);
 			}
 		}
 
@@ -166,7 +165,7 @@
 			outline: none;
 			box-shadow:
 				0 0 0 var(--wpds-border-width-focus)
-				var(--wpds-color-stroke-focus-brand);
+				var(--wpds-color-stroke-focus);
 		}
 	}
 }
@@ -197,7 +196,7 @@
 	box-sizing: border-box;
 	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
 	cursor: default;
-	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-md);
 	@include body-medium();
 
 	&:last-child {
@@ -207,24 +206,24 @@
 	&:hover,
 	&[data-active-item],
 	&:focus {
-		background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+		background-color: var(--wpds-color-background-interactive-brand-weak-active);
 
 		.dataviews-filters__search-widget-listitem-single-selection {
 			border-color: var(--wpds-color-stroke-interactive-brand-active);
-			background: var(--wpds-color-bg-surface-neutral-strong);
+			background: var(--wpds-color-background-surface-neutral-strong);
 			&.is-selected {
 				border-color: var(--wpds-color-stroke-interactive-brand-active);
-				background: var(--wpds-color-bg-interactive-brand-strong-active);
+				background: var(--wpds-color-background-interactive-brand-strong-active);
 			}
 		}
 
 		.dataviews-filters__search-widget-listitem-multi-selection {
 			border-color: var(--wpds-color-stroke-interactive-brand-active);
-			background: var(--wpds-color-bg-surface-neutral-strong);
+			background: var(--wpds-color-background-surface-neutral-strong);
 
 			&.is-selected {
 				border-color: var(--wpds-color-stroke-interactive-brand-active);
-				background: var(--wpds-color-bg-interactive-brand-strong-active);
+				background: var(--wpds-color-background-interactive-brand-strong-active);
 			}
 		}
 	}
@@ -242,7 +241,7 @@
 		text-overflow: ellipsis;
 		font-size: var(--wpds-typography-font-size-sm);
 		line-height: 16px;
-		color: var(--wpds-color-fg-content-neutral-weak);
+		color: var(--wpds-color-foreground-content-neutral-weak);
 	}
 
 	.dataviews-filters__search-widget-listitem-single-selection {
@@ -251,7 +250,7 @@
 		padding: 0;
 
 		&.is-selected {
-			background: var(--wpds-color-bg-interactive-brand-strong);
+			background: var(--wpds-color-background-interactive-brand-strong);
 			border-color: var(--wpds-color-stroke-interactive-brand);
 
 			&::before {
@@ -265,10 +264,10 @@
 				left: 50%;
 				transform: translate(-50%, -50%);
 				margin: 0;
-				background-color: var(--wpds-color-fg-interactive-brand-strong);
+				background-color: var(--wpds-color-foreground-interactive-brand-strong);
 
 				// This border serves as a background color in Windows High Contrast mode.
-				border: 4px solid var(--wpds-color-fg-interactive-brand-strong);
+				border: 4px solid var(--wpds-color-foreground-interactive-brand-strong);
 
 				@include break-small() {
 					width: vars.$radio-input-size * 0.5;
@@ -284,8 +283,8 @@
 
 		@include checkbox-control;
 		position: relative;
-		background: var(--wpds-color-bg-interactive-neutral-weak);
-		color: var(--wpds-color-fg-content-neutral);
+		background: var(--wpds-color-background-interactive-neutral-weak);
+		color: var(--wpds-color-foreground-content-neutral);
 		margin: 0;
 		padding: 0;
 		width: var(--checkbox-size);
@@ -300,13 +299,13 @@
 		}
 
 		&.is-selected {
-			background: var(--wpds-color-bg-interactive-brand-strong);
+			background: var(--wpds-color-background-interactive-brand-strong);
 			border-color: var(--wpds-color-stroke-interactive-brand);
 
 			svg {
 				--checkmark-size: var(--checkbox-size);
 
-				fill: var(--wpds-color-fg-interactive-neutral-strong);
+				fill: var(--wpds-color-foreground-interactive-neutral-strong);
 				position: absolute;
 				left: 50%;
 				top: 50%;
@@ -329,9 +328,9 @@
 	.dataviews-filters__search-widget-filter-combobox__input {
 		@include input-control;
 		display: block;
-		padding: 0 var(--wpds-dimension-padding-sm) 0 calc(var(--wpds-dimension-base) * 8);
+		padding: 0 var(--wpds-dimension-padding-sm) 0 var(--wpds-dimension-size-md);
 		width: 100%;
-		height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+		height: var(--wpds-dimension-size-md);
 
 		// Unset inherited values.
 		margin-left: 0;
@@ -344,14 +343,14 @@
 		}
 
 		&:focus {
-			background: var(--wpds-color-bg-surface-neutral-strong);
+			background: var(--wpds-color-background-surface-neutral-strong);
 			box-shadow:
 				inset 0 0 0 var(--wpds-border-width-focus)
-				var(--wpds-color-stroke-focus-brand);
+				var(--wpds-color-stroke-focus);
 		}
 
 		&::placeholder {
-			color: var(--wpds-color-fg-content-neutral-weak);
+			color: var(--wpds-color-foreground-content-neutral-weak);
 		}
 
 		&::-webkit-search-decoration,
@@ -370,7 +369,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: vars.$icon-size;
+		width: var(--wpds-dimension-size-sm);
 
 		&:dir(ltr) {
 			transform: scaleX(-1);
@@ -388,16 +387,16 @@
 	top: 0;
 	right: 0;
 	transform: translate(50%, -50%);
-	background: var(--wpds-color-bg-interactive-brand-strong);
-	height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
-	min-width: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+	background: var(--wpds-color-background-interactive-brand-strong);
+	height: var(--wpds-dimension-size-2xs);
+	min-width: var(--wpds-dimension-size-2xs);
 	line-height: var(--wpds-typography-line-height-xs);
 	padding: 0 var(--wpds-dimension-padding-xs);
 	text-align: center;
 	border-radius: var(--wpds-border-radius-lg);
 	font-size: 11px;
-	outline: var(--wpds-border-width-focus) solid var(--wpds-color-bg-surface-neutral-strong);
-	color: var(--wpds-color-fg-interactive-neutral-strong);
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-background-surface-neutral-strong);
+	color: var(--wpds-color-foreground-interactive-neutral-strong);
 	box-sizing: border-box;
 }