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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "14.2.1-next.v.202605131032.0+f6d6e7149",
+	"version": "15.0.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",
@@ -53,20 +53,20 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^8.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/components": "^33.1.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/compose": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/data": "^10.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/date": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/deprecated": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/element": "^6.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/i18n": "^6.18.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/icons": "^13.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/keycodes": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/primitives": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/private-apis": "^1.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/ui": "^0.13.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/warning": "^3.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/base-styles": "^9.0.0",
+		"@wordpress/components": "^34.0.0",
+		"@wordpress/compose": "^8.0.0",
+		"@wordpress/data": "^10.47.0",
+		"@wordpress/date": "^5.47.0",
+		"@wordpress/deprecated": "^4.47.0",
+		"@wordpress/element": "^7.0.0",
+		"@wordpress/i18n": "^6.20.0",
+		"@wordpress/icons": "^13.2.0",
+		"@wordpress/keycodes": "^4.47.0",
+		"@wordpress/primitives": "^4.47.0",
+		"@wordpress/private-apis": "^1.47.0",
+		"@wordpress/ui": "^0.14.0",
+		"@wordpress/warning": "^3.47.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -83,8 +83,8 @@
 		"storybook": "^10.2.8"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -92,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "0e198c7ac7ca634e73ded9220ce048c0302174dd"
+	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
 }

package/src/components/dataform-controls/date.tsx

@@ -18,7 +18,7 @@ import {
 import {
 	BaseControl,
 	Button,
-	Icon,
+	Icon as WCIcon,
 	privateApis as componentsPrivateApis,
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
@@ -269,7 +269,7 @@ function ValidatedDateControl< Item >( {
 								: undefined
 						) }
 					>
-						<Icon
+						<WCIcon
 							className="components-validated-control__indicator-icon"
 							icon={ errorIcon }
 							size={ 16 }

package/src/components/dataform-controls/datetime.tsx

@@ -54,7 +54,7 @@ function CalendarDateTimeControl< Item >( {
 	const inputControlRef = useRef< HTMLInputElement >( null );
 	const validationTimeoutRef =
 		useRef< ReturnType< typeof setTimeout > >( undefined );
-	const previousFocusRef = useRef< Element | null >( null );
+	const previousFocusRef = useRef< Element >( null );
 
 	const { minConstraint, maxConstraint, disabledMatchers } =
 		useDisabledDateMatchers( isValid, parseDateTime );

package/src/components/dataform-controls/email.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	Icon,
+	Icon as WCIcon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
 import { envelope } from '@wordpress/icons';
@@ -33,7 +33,7 @@ export default function Email< Item >( {
 				type: 'email',
 				prefix: (
 					<InputControlPrefixWrapper variant="icon">
-						<Icon icon={ envelope } />
+						<WCIcon icon={ envelope } />
 					</InputControlPrefixWrapper>
 				),
 			} }

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

@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
-
 .dataviews-controls__datetime {
 	border: none;
 	padding: 0;
@@ -28,9 +26,9 @@
 }
 
 .dataviews-controls__date-preset {
-	border: 1px solid #ddd;
+	border: 1px solid var(--wpds-color-stroke-surface-neutral);
 
 	&:active {
-		background-color: $black;
+		background-color: var(--wpds-color-bg-interactive-neutral-strong-active);
 	}
 }

package/src/components/dataform-controls/telephone.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	Icon,
+	Icon as WCIcon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
 import { mobile } from '@wordpress/icons';
@@ -33,7 +33,7 @@ export default function Telephone< Item >( {
 				type: 'tel',
 				prefix: (
 					<InputControlPrefixWrapper variant="icon">
-						<Icon icon={ mobile } />
+						<WCIcon icon={ mobile } />
 					</InputControlPrefixWrapper>
 				),
 			} }

package/src/components/dataform-controls/url.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	Icon,
+	Icon as WCIcon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
@@ -33,7 +33,7 @@ export default function Url< Item >( {
 				type: 'url',
 				prefix: (
 					<InputControlPrefixWrapper variant="icon">
-						<Icon icon={ link } />
+						<WCIcon icon={ link } />
 					</InputControlPrefixWrapper>
 				),
 			} }

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

@@ -1,6 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
 .dataforms-layouts-card__field {
 	width: 100%;
 }
@@ -14,15 +11,15 @@
 }
 
 .dataforms-layouts-card__field-description {
-	color: $gray-700;
+	color: var(--wpds-color-fg-content-neutral-weak);
 	display: block;
-	font-size: $font-size-medium;
-	margin-bottom: $grid-unit-20;
+	font-size: var(--wpds-typography-font-size-md);
+	margin-bottom: var(--wpds-dimension-gap-lg);
 }
 
 .dataforms-layouts-card__field-summary {
 	display: flex;
 	flex-direction: row;
-	gap: $grid-unit-20;
+	gap: var(--wpds-dimension-gap-lg);
 	align-items: center;
 }

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

@@ -1,10 +1,8 @@
-@use "@wordpress/base-styles/variables" as *;
-
 .dataforms-layouts-details__summary-content {
 	display: inline-flex;
-	min-height: $grid-unit-30;
+	min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
 }
 
 .dataforms-layouts-details__content {
-	padding-top: $grid-unit-15;
+	padding-top: var(--wpds-dimension-padding-md);
 }

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

@@ -1,5 +1,4 @@
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as vars;
 @use "@wordpress/base-styles/z-index" as *;
 
 .dataforms-layouts-panel__field-trigger {
@@ -7,10 +6,10 @@
 	color: inherit;
 	display: flex;
 	width: 100%;
-	min-height: $grid-unit-30;
+	min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
 	cursor: var(--wpds-cursor-control);
 	align-items: flex-start;
-	border-radius: $radius-small;
+	border-radius: var(--wpds-border-radius-sm);
 	isolation: isolate;
 
 	&--label-side {
@@ -28,14 +27,14 @@
 	}
 
 	&:not(.is-disabled):hover {
-		color: var(--wp-admin-theme-color);
+		color: var(--wpds-color-fg-interactive-brand);
 
 		.dataforms-layouts-panel__field-trigger-icon {
 			opacity: 1;
 		}
 
 		.dataforms-layouts-panel__field-label {
-			color: var(--wp-admin-theme-color);
+			color: var(--wpds-color-fg-interactive-brand);
 		}
 	}
 
@@ -43,7 +42,7 @@
 		cursor: default;
 
 		.dataforms-layouts-panel__field-control {
-			color: $gray-700;
+			color: var(--wpds-color-fg-content-neutral-weak);
 			font-weight: var(--wpds-typography-font-weight-regular);
 		}
 	}
@@ -56,13 +55,13 @@
 
 	&:hover,
 	&:focus-visible {
-		fill: var(--wp-admin-theme-color);
+		fill: var(--wpds-color-fg-interactive-brand);
 	}
 }
 
 .dataforms-layouts-panel__field-trigger-icon {
 	padding: 0;
-	color: var(--wp-admin-theme-color);
+	color: var(--wpds-color-fg-interactive-brand);
 	flex: 0 0 auto;
 	opacity: 0;
 	border-radius: var(--wpds-border-radius-xs);
@@ -71,7 +70,7 @@
 		opacity: 1;
 		outline:
 			var(--wpds-border-width-focus) solid
-			var(--wp-admin-theme-color);
+			var(--wpds-color-stroke-focus-brand);
 	}
 }
 
@@ -86,12 +85,12 @@
 .dataforms-layouts-panel__field-label {
 	width: 38%;
 	flex-shrink: 0;
-	min-height: $grid-unit-30;
+	min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
 	display: flex;
 	align-items: center;
-	line-height: $grid-unit-05 * 5;
+	line-height: var(--wpds-typography-line-height-sm);
 	hyphens: auto;
-	color: $gray-700;
+	color: var(--wpds-color-fg-content-neutral-weak);
 
 	.components-base-control__label {
 		display: inline;
@@ -100,7 +99,7 @@
 	}
 
 	&.has-error {
-		color: $alert-red;
+		color: var(--wpds-color-fg-content-error-weak);
 	}
 }
 
@@ -108,11 +107,11 @@
 	position: relative;
 	z-index: 1;
 	cursor: help;
-	fill: $alert-red;
+	fill: var(--wpds-color-fg-content-error-weak);
 	display: inline-flex;
 	flex-direction: row;
 	align-items: center;
-	gap: $grid-unit-05;
+	gap: var(--wpds-dimension-gap-xs);
 	svg {
 		fill: currentColor;
 	}
@@ -121,7 +120,7 @@
 .dataforms-layouts-panel__field-control {
 	flex-grow: 1;
 	min-width: 0;
-	min-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);
 	display: flex;
 	align-items: center;
@@ -132,6 +131,23 @@
 	> * {
 		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
@@ -151,18 +167,22 @@
 }
 
 .dataforms-layouts-panel__field-dropdown .components-popover__content {
-	min-width: 256px;
-	padding: $grid-unit-20;
+	min-width: 320px;
+	padding: var(--wpds-dimension-padding-lg);
 }
 
 .dataforms-layouts-panel__dropdown-header {
-	margin-bottom: $grid-unit-20;
+	margin-bottom: var(--wpds-dimension-gap-lg);
 }
 
 .dataforms-layouts-panel__modal-footer {
-	margin-top: $grid-unit-20;
+	margin-top: var(--wpds-dimension-gap-lg);
 }
 
 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
 	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
 }
+
+.dataforms-layouts-panel__summary-button:empty {
+	min-width: vars.$admin-sidebar-width;
+}

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

@@ -6,10 +6,12 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Button, Icon, Tooltip } from '@wordpress/components';
+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';
 
 /**
@@ -111,11 +113,20 @@ export default function SummaryButton< Item >( {
 				<span className={ labelClassName }>{ labelContent }</span>
 			) }
 			{ labelPosition === 'none' && showError && (
-				<Tooltip text={ errorMessage } placement="top">
-					<span className="dataforms-layouts-panel__field-label-error-content">
-						<Icon icon={ errorIcon } size={ 16 } />
-					</span>
-				</Tooltip>
+				<Tooltip.Root>
+					<Tooltip.Trigger
+						render={
+							<span
+								className="dataforms-layouts-panel__field-label-error-content"
+								role="img"
+								aria-label={ errorMessage }
+							>
+								<WCIcon icon={ errorIcon } size={ 16 } />
+							</span>
+						}
+					/>
+					<Tooltip.Popup>{ errorMessage }</Tooltip.Popup>
+				</Tooltip.Root>
 			) }
 			<span
 				id={ `${ controlId }` }

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

@@ -1,8 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Icon, Tooltip } from '@wordpress/components';
+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(
 	showError?: boolean,
@@ -10,12 +12,18 @@ function getLabelContent(
 	fieldLabel?: string
 ) {
 	return showError ? (
-		<Tooltip text={ errorMessage } placement="top">
-			<span className="dataforms-layouts-panel__field-label-error-content">
-				<Icon icon={ errorIcon } size={ 16 } />
-				{ fieldLabel }
-			</span>
-		</Tooltip>
+		<Tooltip.Root>
+			<Tooltip.Trigger
+				render={
+					<span className="dataforms-layouts-panel__field-label-error-content">
+						<WCIcon icon={ errorIcon } size={ 16 } />
+						<VisuallyHidden>{ errorMessage }: </VisuallyHidden>
+						{ fieldLabel }
+					</span>
+				}
+			/>
+			<Tooltip.Popup>{ errorMessage }</Tooltip.Popup>
+		</Tooltip.Root>
 	) : (
 		fieldLabel
 	);

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

@@ -1,26 +1,23 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
 .dataforms-layouts-regular__field {
 	width: 100%;
-	min-height: $grid-unit-40;
+	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 	justify-content: flex-start !important;
 	align-items: flex-start !important;
 
 	.components-base-control__label,
 	.components-input-control__label,
 	.components-form-token-field__label {
-		color: $gray-900;
+		color: var(--wpds-color-fg-content-neutral);
 	}
 }
 
 .dataforms-layouts-regular__field-label {
 	width: 38%;
 	flex-shrink: 0;
-	min-height: $grid-unit-40;
+	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 	display: flex;
 	align-items: center;
-	line-height: $grid-unit-05 * 5;
+	line-height: var(--wpds-typography-line-height-sm);
 	hyphens: auto;
 
 	&--label-position-side {
@@ -34,7 +31,7 @@
 
 .dataforms-layouts-regular__field-control {
 	flex-grow: 1;
-	min-height: $grid-unit-40;
+	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 	display: flex;
 	align-items: center;
 }

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

@@ -1,12 +1,8 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-
 .dataviews-bulk-actions-footer__item-count {
-	color: $gray-900;
+	color: var(--wpds-color-fg-content-neutral);
 }
 
 .dataviews-bulk-actions-footer__container {
 	margin-right: auto;
-	min-height: $grid-unit-40;
+	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 }

package/src/components/dataviews-context/index.ts

@@ -46,10 +46,8 @@ type DataViewsContextType< Item > = {
 	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	containerWidth: number;
-	containerRef: React.MutableRefObject< HTMLDivElement | null >;
-	resizeObserverRef:
-		| ( ( element?: HTMLDivElement | null ) => void )
-		| React.RefObject< HTMLDivElement >;
+	containerRef: React.RefObject< HTMLDivElement | null >;
+	resizeObserverRef: React.Ref< HTMLDivElement | null >;
 	defaultLayouts: NormalizedSupportedLayouts;
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;