@wordpress/dataviews 14.1.1-next.v.202604201441.0 → 14.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "14.1.1-next.v.202604201441.0+dab6d8c07",
+	"version": "14.2.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": "^6.20.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/components": "^33.0.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/compose": "^7.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/data": "^10.45.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/date": "^5.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/deprecated": "^4.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/element": "^6.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/i18n": "^6.17.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/icons": "^12.2.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/keycodes": "^4.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/primitives": "^4.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/private-apis": "^1.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/ui": "^0.12.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/warning": "^3.44.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/base-styles": "^7.0.0",
+		"@wordpress/components": "^33.0.0",
+		"@wordpress/compose": "^7.45.0",
+		"@wordpress/data": "^10.45.0",
+		"@wordpress/date": "^5.45.0",
+		"@wordpress/deprecated": "^4.45.0",
+		"@wordpress/element": "^6.45.0",
+		"@wordpress/i18n": "^6.18.0",
+		"@wordpress/icons": "^13.0.0",
+		"@wordpress/keycodes": "^4.45.0",
+		"@wordpress/primitives": "^4.45.0",
+		"@wordpress/private-apis": "^1.45.0",
+		"@wordpress/ui": "^0.12.0",
+		"@wordpress/warning": "^3.45.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -92,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "c788005ba4ee2a34851c1217c51602656aa7c3a6"
+	"gitHead": "8c229eaed0e88c9827e2da3d73a78f9ddd77714b"
 }

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

@@ -22,7 +22,8 @@ export default function ArrayControl< Item >( {
 	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { label, placeholder, getValue, setValue, isValid } = field;
+	const { label, placeholder, description, getValue, setValue, isValid } =
+		field;
 	const value = getValue( { item: data } );
 	const disabled = field.isDisabled( { item: data, field } );
 
@@ -88,7 +89,7 @@ export default function ArrayControl< Item >( {
 				return true;
 			} }
 			__experimentalExpandOnFocus={ elements && elements.length > 0 }
-			__experimentalShowHowTo={ ! field.isValid?.elements }
+			help={ description ?? ( field.isValid?.elements ? '' : undefined ) }
 			displayTransform={ ( token: any ) => {
 				// For existing tokens (element objects), display their label
 				if ( typeof token === 'object' && 'label' in token ) {

package/src/components/dataform-layouts/card/index.tsx

@@ -9,9 +9,6 @@ import {
 	useRef,
 	useState,
 } from '@wordpress/element';
-// TODO: enable in the ESlint rule once we complete
-// https://github.com/WordPress/gutenberg/issues/76135.
-// eslint-disable-next-line @wordpress/use-recommended-components
 import { Card, CollapsibleCard, Stack } from '@wordpress/ui';
 
 /**

package/src/components/dataviews-filters/search-widget.tsx

@@ -12,13 +12,9 @@ import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
-import {
-	VisuallyHidden,
-	Icon,
-	Composite,
-	Spinner,
-} from '@wordpress/components';
+import { Icon, Composite, Spinner } from '@wordpress/components';
 import { search, check } from '@wordpress/icons';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -267,15 +263,9 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 			setValue={ setSearchValue }
 		>
 			<div className="dataviews-filters__search-widget-filter-combobox__wrapper">
-				<Ariakit.ComboboxLabel
-					render={
-						<VisuallyHidden>
-							{ __( 'Search items' ) }
-						</VisuallyHidden>
-					}
-				>
+				<VisuallyHidden render={ <Ariakit.ComboboxLabel /> }>
 					{ __( 'Search items' ) }
-				</Ariakit.ComboboxLabel>
+				</VisuallyHidden>
 				<Ariakit.Combobox
 					autoSelect="always"
 					placeholder={ __( 'Search' ) }

package/src/components/dataviews-layouts/activity/activity-item.tsx

@@ -6,11 +6,10 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { VisuallyHidden } from '@wordpress/components';
 import { useRef, useContext, useMemo } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
-import { Stack } from '@wordpress/ui';
+import { Stack, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -162,8 +161,8 @@ function ActivityItem< Item >(
 								className="dataviews-view-activity__item-field"
 							>
 								<VisuallyHidden
-									as="span"
 									className="dataviews-view-activity__item-field-label"
+									render={ <span /> }
 								>
 									{ field.label }
 								</VisuallyHidden>

package/src/components/dataviews-layouts/grid/composite-grid.tsx

@@ -43,7 +43,7 @@ import type {
 } from '../../../types';
 import type { SetSelection } from '../../../types/private';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 import { useGridColumns } from './preview-size-picker';
 import { GridItems } from '../utils/grid-items';
 import {
@@ -273,7 +273,7 @@ const GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(
 						>
 							{ badgeFields.map( ( field ) => {
 								return (
-									<Badge
+									<WCBadge
 										key={ field.id }
 										className="dataviews-view-grid__field-value"
 									>
@@ -281,7 +281,7 @@ const GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(
 											item={ item }
 											field={ field }
 										/>
-									</Badge>
+									</WCBadge>
 								);
 							} ) }
 						</Stack>

package/src/components/dataviews-layouts/list/index.tsx

@@ -11,7 +11,6 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 	Spinner,
-	VisuallyHidden,
 	Composite,
 } from '@wordpress/components';
 import {
@@ -25,7 +24,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
 import { useRegistry } from '@wordpress/data';
-import { Stack } from '@wordpress/ui';
+import { Stack, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -355,8 +354,8 @@ function ListItem< Item >( {
 									className="dataviews-view-list__field"
 								>
 									<VisuallyHidden
-										as="span"
 										className="dataviews-view-list__field-label"
+										render={ <span /> }
 									>
 										{ field.label }
 									</VisuallyHidden>

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

@@ -33,7 +33,7 @@ import type {
 } from '../../../types';
 import type { SetSelection } from '../../../types/private';
 import { GridItems } from '../utils/grid-items';
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 import getDataByGroup from '../utils/get-data-by-group';
 import { useGridColumns } from '../grid/preview-size-picker';
 import {
@@ -175,7 +175,7 @@ function GridItem< Item >( {
 					>
 						{ badgeFields.map( ( field ) => {
 							return (
-								<Badge
+								<WCBadge
 									key={ field.id }
 									className="dataviews-view-picker-grid__field-value"
 								>
@@ -183,7 +183,7 @@ function GridItem< Item >( {
 										item={ item }
 										field={ field }
 									/>
-								</Badge>
+								</WCBadge>
 							);
 						} ) }
 					</Stack>

package/src/dataform/stories/layout-card.tsx

@@ -11,7 +11,7 @@ import DataForm from '../index';
 import type { Field, Form } from '../../types';
 import { unlock } from '../../lock-unlock';
 
-const { Badge } = unlock( privateApis );
+const { Badge: WCBadge } = unlock( privateApis );
 
 const LayoutCardComponent = ( {
 	withHeader,
@@ -115,7 +115,7 @@ const LayoutCardComponent = ( {
 			label: 'Due date',
 			type: 'text',
 			render: ( { item } ) => {
-				return <Badge>Due on: { item.dueDate }</Badge>;
+				return <WCBadge>Due on: { item.dueDate }</WCBadge>;
 			},
 		},
 		{
@@ -123,7 +123,7 @@ const LayoutCardComponent = ( {
 			type: 'text',
 			readOnly: true,
 			render: ( { item } ) => {
-				return <Badge>{ item.plan }</Badge>;
+				return <WCBadge>{ item.plan }</WCBadge>;
 			},
 		},
 	];

package/src/dataviews/stories/empty.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -41,7 +41,7 @@ const PlanetIllustration = () => (
 const CustomEmptyComponent = () => (
 	<Stack direction="column" align="center" justify="center" gap="md">
 		<PlanetIllustration />
-		<Text>No celestial bodies found</Text>
+		<WCText>No celestial bodies found</WCText>
 	</Stack>
 );
 

package/src/dataviews/stories/fixtures.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { trash, image, Icon, category } from '@wordpress/icons';
-import { Button, __experimentalText as Text } from '@wordpress/components';
+import { Button, __experimentalText as WCText } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -642,7 +642,7 @@ export const actions: Action< SpaceObject >[] = [
 					: `Are you sure you want to delete "${ items[ 0 ].name.title }"?`;
 			return (
 				<Stack direction="column" gap="xl">
-					<Text>{ label }</Text>
+					<WCText>{ label }</WCText>
 					<Stack direction="row" gap="sm" justify="right">
 						<Button
 							__next40pxDefaultSize

package/src/dataviews/stories/free-composition.tsx

@@ -8,13 +8,10 @@ import {
 } from '@wordpress/element';
 import {
 	__experimentalHeading as Heading,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Button,
 } from '@wordpress/components';
 import { __, _n } from '@wordpress/i18n';
-// TODO: enable in the ESlint rule once we complete
-// https://github.com/WordPress/gutenberg/issues/76135.
-// eslint-disable-next-line @wordpress/use-recommended-components
 import { Card, Stack } from '@wordpress/ui';
 
 /**
@@ -56,7 +53,7 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 					<Card.Root>
 						<Card.Content>
 							<Stack direction="column" gap="sm">
-								<Text size={ 18 } as="p">
+								<WCText size={ 18 } as="p">
 									{ createInterpolateElement(
 										_n(
 											'<PlanetsNumber /> planet',
@@ -71,9 +68,9 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 											),
 										}
 									) }
-								</Text>
+								</WCText>
 
-								<Text size={ 18 } as="p">
+								<WCText size={ 18 } as="p">
 									{ createInterpolateElement(
 										_n(
 											'<SatellitesNumber /> moon',
@@ -86,7 +83,7 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 											),
 										}
 									) }
-								</Text>
+								</WCText>
 							</Stack>
 						</Card.Content>
 					</Card.Root>
@@ -173,10 +170,10 @@ export const FreeCompositionComponent = () => {
 					align="center"
 					className="free-composition-dataviews-empty"
 				>
-					<Text size={ 18 } as="p">
+					<WCText size={ 18 } as="p">
 						No planets
-					</Text>
-					<Text variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</Text>
+					</WCText>
+					<WCText variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</WCText>
 					<Button variant="secondary">Create new planet</Button>
 				</Stack>
 			}

package/src/dataviews/stories/layout-activity.tsx

@@ -15,7 +15,7 @@ import {
 	pin,
 	link,
 } from '@wordpress/icons';
-import { Button, __experimentalText as Text } from '@wordpress/components';
+import { Button, __experimentalText as WCText } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -555,7 +555,7 @@ export const orderEventActions: Action< OrderEvent >[] = [
 			};
 			return (
 				<Stack direction="column" gap="xl">
-					<Text>{ label }</Text>
+					<WCText>{ label }</WCText>
 					<Stack direction="row" gap="sm" justify="right">
 						<Button
 							__next40pxDefaultSize

package/src/dataviews/stories/with-card.tsx

@@ -2,9 +2,6 @@
  * WordPress dependencies
  */
 import { useState, useMemo } from '@wordpress/element';
-// TODO: enable in the ESlint rule once we complete
-// https://github.com/WordPress/gutenberg/issues/76135.
-// eslint-disable-next-line @wordpress/use-recommended-components
 import { Card } from '@wordpress/ui';
 
 /**