@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "9.1.1-next.233ccab9b.0",
+	"version": "10.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",
@@ -28,7 +28,7 @@
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"require": "./build/index.js"
 		},
 		"./wp": {
 			"types": "./build-types/index.d.ts",
@@ -40,25 +40,23 @@
 		"./build-style/": "./build-style/"
 	},
 	"react-native": "src/index",
-	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
-		"@babel/runtime": "7.25.7",
-		"@wordpress/base-styles": "^6.7.1-next.233ccab9b.0",
-		"@wordpress/components": "^30.5.1-next.233ccab9b.0",
-		"@wordpress/compose": "^7.31.1-next.233ccab9b.0",
-		"@wordpress/data": "^10.31.1-next.233ccab9b.0",
-		"@wordpress/date": "^5.31.1-next.233ccab9b.0",
-		"@wordpress/element": "^6.31.1-next.233ccab9b.0",
-		"@wordpress/i18n": "^6.4.1-next.233ccab9b.0",
-		"@wordpress/icons": "^10.31.1-next.233ccab9b.0",
-		"@wordpress/keycodes": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/primitives": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/private-apis": "^1.31.1-next.233ccab9b.0",
-		"@wordpress/url": "^4.31.1-next.233ccab9b.0",
-		"@wordpress/warning": "^3.31.1-next.233ccab9b.0",
+		"@wordpress/base-styles": "^6.9.0",
+		"@wordpress/components": "^30.6.0",
+		"@wordpress/compose": "^7.33.0",
+		"@wordpress/data": "^10.33.0",
+		"@wordpress/date": "^5.33.0",
+		"@wordpress/element": "^6.33.0",
+		"@wordpress/i18n": "^6.6.0",
+		"@wordpress/icons": "^11.0.0",
+		"@wordpress/keycodes": "^4.33.0",
+		"@wordpress/primitives": "^4.33.0",
+		"@wordpress/private-apis": "^1.33.0",
+		"@wordpress/url": "^4.33.0",
+		"@wordpress/warning": "^3.33.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -76,5 +74,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "d11f971521e4b39b07124d5c5516890ff98b0e31"
+	"gitHead": "2bbe0d34ab65458468758c48826296d7a753428b"
 }

package/src/components/dataform/index.tsx

@@ -8,14 +8,15 @@ import { useMemo } from '@wordpress/element';
  */
 import type { DataFormProps } from '../../types';
 import { DataFormProvider } from '../dataform-context';
-import { normalizeFields } from '../../normalize-fields';
-import { DataFormLayout } from '../../dataforms-layouts/data-form-layout';
+import normalizeFields from '../../utils/normalize-fields';
+import { DataFormLayout } from '../../dataform-layouts/data-form-layout';
 
 export default function DataForm< Item >( {
 	data,
 	form,
 	fields,
 	onChange,
+	validity,
 }: DataFormProps< Item > ) {
 	const normalizedFields = useMemo(
 		() => normalizeFields( fields ),
@@ -28,7 +29,12 @@ export default function DataForm< Item >( {
 
 	return (
 		<DataFormProvider fields={ normalizedFields }>
-			<DataFormLayout data={ data } form={ form } onChange={ onChange } />
+			<DataFormLayout
+				data={ data }
+				form={ form }
+				onChange={ onChange }
+				validity={ validity }
+			/>
 		</DataFormProvider>
 	);
 }

package/src/components/dataform-context/index.tsx

@@ -20,7 +20,9 @@ DataFormContext.displayName = 'DataFormContext';
 export function DataFormProvider< Item >( {
 	fields,
 	children,
-}: React.PropsWithChildren< { fields: NormalizedField< Item >[] } > ) {
+}: React.PropsWithChildren< {
+	fields: NormalizedField< Item >[];
+} > ) {
 	return (
 		<DataFormContext.Provider value={ { fields } }>
 			{ children }

package/src/components/dataviews/index.tsx

@@ -30,9 +30,9 @@ import DataViewsViewConfig, {
 	DataviewsViewConfigDropdown,
 	ViewTypeMenu,
 } from '../dataviews-view-config';
-import { normalizeFields } from '../../normalize-fields';
+import normalizeFields from '../../utils/normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
-import type { SelectionOrUpdater } from '../../private-types';
+import type { SelectionOrUpdater } from '../../types/private';
 type ItemWithId = { id: string };
 
 type DataViewsProps< Item > = {

package/src/components/dataviews/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
+
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
 	height: 100%;

package/src/components/dataviews-bulk-actions/index.tsx

@@ -22,7 +22,7 @@ import { closeSmall } from '@wordpress/icons';
 import DataViewsContext from '../dataviews-context';
 import { ActionModal } from '../dataviews-item-actions';
 import type { Action, ActionModal as ActionModalType } from '../../types';
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import type { ActionTriggerProps } from '../dataviews-item-actions';
 
 interface ActionWithModalProps< Item > {
@@ -171,7 +171,6 @@ function ActionTrigger< Item >( {
 			accessibleWhenDisabled
 			label={ label }
 			icon={ action.icon }
-			isDestructive={ action.isDestructive }
 			size="compact"
 			onClick={ onClick }
 			isBusy={ isBusy }

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 
 .dataviews-bulk-actions-footer__item-count {
 	color: $gray-900;

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

@@ -18,7 +18,7 @@ import type {
 	SupportedLayouts,
 	NormalizedFilter,
 } from '../../types';
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import { LAYOUT_TABLE } from '../../constants';
 
 type DataViewsContextType< Item > = {

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

@@ -55,12 +55,13 @@ import {
 } from '../../constants';
 import type {
 	Filter,
+	NormalizedField,
 	NormalizedFilter,
 	Operator,
 	Option,
 	View,
-	NormalizedField,
 } from '../../types';
+import useElements from '../../hooks/use-elements';
 
 interface FilterTextProps {
 	activeElements: Option[];
@@ -480,8 +481,13 @@ export default function Filter( {
 
 	let activeElements: Option[] = [];
 
-	if ( filter.elements.length > 0 ) {
-		activeElements = filter.elements.filter( ( element ) => {
+	const { elements } = useElements( {
+		elements: filter.elements,
+		getElements: filter.getElements,
+	} );
+
+	if ( elements.length > 0 ) {
+		activeElements = elements.filter( ( element ) => {
 			if ( filter.singleSelection ) {
 				return element.value === filterInView?.value;
 			}
@@ -594,12 +600,12 @@ export default function Filter( {
 				return (
 					<VStack spacing={ 0 } justify="flex-start">
 						<OperatorSelector { ...commonProps } />
-						{ commonProps.filter.elements.length > 0 ? (
+						{ commonProps.filter.hasElements ? (
 							<SearchWidget
 								{ ...commonProps }
 								filter={ {
 									...commonProps.filter,
-									elements: commonProps.filter.elements,
+									elements,
 								} }
 							/>
 						) : (

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

@@ -12,7 +12,12 @@ 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 } from '@wordpress/components';
+import {
+	VisuallyHidden,
+	Icon,
+	Composite,
+	Spinner,
+} from '@wordpress/components';
 import { search, check } from '@wordpress/icons';
 
 /**
@@ -20,6 +25,7 @@ import { search, check } from '@wordpress/icons';
  */
 import { getCurrentValue } from './utils';
 import type { Filter, NormalizedFilter, View, Option } from '../../types';
+import useElements from '../../hooks/use-elements';
 
 interface SearchWidgetProps {
 	view: View;
@@ -322,6 +328,27 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 }
 
 export default function SearchWidget( props: SearchWidgetProps ) {
-	const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
-	return <Widget { ...props } />;
+	const { elements, isLoading } = useElements( {
+		elements: props.filter.elements,
+		getElements: props.filter.getElements,
+	} );
+
+	if ( isLoading ) {
+		return (
+			<div className="dataviews-filters__search-widget-no-elements">
+				<Spinner />
+			</div>
+		);
+	}
+
+	if ( elements.length === 0 ) {
+		return (
+			<div className="dataviews-filters__search-widget-no-elements">
+				{ __( 'No elements found' ) }
+			</div>
+		);
+	}
+
+	const Widget = elements.length > 10 ? ComboboxList : ListBox;
+	return <Widget { ...props } filter={ { ...props.filter, elements } } />;
 }

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

@@ -1,3 +1,8 @@
+@use "sass:math";
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
+
 .dataviews-filters__button {
 	position: relative;
 }
@@ -39,6 +44,7 @@
 	padding: $grid-unit-10 $grid-unit-20;
 
 	&:has(+ .dataviews-filters__search-widget-listbox),
+	&:has(+ .dataviews-filters__search-widget-no-elements),
 	&:has(+ .dataviews-filters__user-input-widget) {
 		border-bottom: 1px solid $gray-200;
 	}
@@ -317,9 +323,7 @@
 	.dataviews-filters__search-widget-filter-combobox__input {
 		@include input-control;
 		display: block;
-		padding: 0 $grid-unit-40 0 $grid-unit-10;
-		background: $gray-100;
-		border: none;
+		padding: 0 $grid-unit-10 0 $grid-unit-40;
 		width: 100%;
 		height: $grid-unit-40;
 
@@ -354,13 +358,17 @@
 
 	.dataviews-filters__search-widget-filter-combobox__icon {
 		position: absolute;
-		right: $grid-unit-15;
-		top: 50%;
-		transform: translateY(-50%);
+		inset-inline-start: $grid-unit-15;
+		top: 0;
+		bottom: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: $icon-size;
+
+		&:dir(ltr) {
+			transform: scaleX(-1);
+		}
 	}
 }
 
@@ -398,3 +406,10 @@
 		padding-left: $grid-unit-10;
 	}
 }
+
+.dataviews-filters__search-widget-no-elements {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: $grid-unit-20;
+}

package/src/components/dataviews-filters/use-filters.ts

@@ -15,7 +15,7 @@ function useFilters( fields: NormalizedField< any >[], view: View ) {
 		fields.forEach( ( field ) => {
 			if (
 				field.filterBy === false ||
-				( ! field.elements?.length && ! field.Edit )
+				( ! field.hasElements && ! field.Edit )
 			) {
 				return;
 			}
@@ -29,7 +29,9 @@ function useFilters( fields: NormalizedField< any >[], view: View ) {
 			filters.push( {
 				field: field.id,
 				name: field.label,
-				elements: field.elements ?? [],
+				elements: field.elements,
+				getElements: field.getElements,
+				hasElements: field.hasElements,
 				singleSelection: operators.some( ( op ) =>
 					SINGLE_SELECTION_OPERATORS.includes( op )
 				),

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

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .dataviews-footer {
 	position: sticky;
 	bottom: 0;

package/src/components/dataviews-item-actions/index.tsx

@@ -77,7 +77,6 @@ function ButtonTrigger< Item >( {
 			icon={ action.icon }
 			disabled={ !! action.disabled }
 			accessibleWhenDisabled
-			isDestructive={ action.isDestructive }
 			size="compact"
 			onClick={ onClick }
 		/>
@@ -105,9 +104,14 @@ export function ActionModal< Item >( {
 }: ActionModalProps< Item > ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
+
+	const modalHeader =
+		typeof action.modalHeader === 'function'
+			? action.modalHeader( items )
+			: action.modalHeader;
 	return (
 		<Modal
-			title={ action.modalHeader || label }
+			title={ modalHeader || label }
 			__experimentalHideHeader={ !! action.hideModalHeader }
 			onRequestClose={ closeModal }
 			focusOnMount={ action.modalFocusOnMount ?? true }

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .dataviews-action-modal {
 	z-index: z-index(".dataviews-action-modal");
 }

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
+
 .dataviews-pagination__page-select {
 	font-size: 11px;
 	font-weight: 500;

package/src/components/dataviews-picker/footer.tsx

@@ -15,7 +15,7 @@ import { __, sprintf, _n } from '@wordpress/i18n';
  */
 import DataViewsPagination from '../dataviews-pagination';
 import DataViewsContext from '../dataviews-context';
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import type { Action } from '../../types';
 
 const EMPTY_ARRAY: [] = [];
@@ -99,8 +99,7 @@ function ActionButtons< Item >( {
 					return null;
 				}
 
-				const { id, label, icon, isPrimary, isDestructive, callback } =
-					action;
+				const { id, label, icon, isPrimary, callback } = action;
 
 				const _label =
 					typeof label === 'string' ? label : label( items );
@@ -122,7 +121,6 @@ function ActionButtons< Item >( {
 							setActionInProgress( null );
 						} }
 						size="compact"
-						isDestructive={ isDestructive }
 						variant={ variant }
 					>
 						{ _label }

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

@@ -29,9 +29,9 @@ import DataViewsViewConfig, {
 	DataviewsViewConfigDropdown,
 	ViewTypeMenu,
 } from '../dataviews-view-config';
-import { normalizeFields } from '../../normalize-fields';
+import normalizeFields from '../../utils/normalize-fields';
 import type { ActionButton, Field, View, SupportedLayouts } from '../../types';
-import type { SelectionOrUpdater } from '../../private-types';
+import type { SelectionOrUpdater } from '../../types/private';
 type ItemWithId = { id: string };
 
 const isItemClickable = () => false;

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

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 // For mobile viewports:
 // - align bulk selection checkbox to the left.
 // - align footer actions to the right.

package/src/components/dataviews-selection-checkbox/index.tsx

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import type { NormalizedField } from '../../types';
 
 interface DataViewsSelectionCheckboxProps< Item > {

package/src/components/dataviews-selection-checkbox/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
+
 .dataviews-selection-checkbox {
 	// Experimental override for CheckboxControl size (fragile)
 	--checkbox-input-size: 24px;

package/src/components/dataviews-view-config/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .dataviews-view-config {
 	width: 320px;
 	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */

package/src/dataform-controls/array.tsx

@@ -1,20 +1,16 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
-import { privateApis } from '@wordpress/components';
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import { _n, sprintf } from '@wordpress/i18n';
+import { privateApis, Spinner } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
 import { unlock } from '../lock-unlock';
+import getCustomValidity from './utils/get-custom-validity';
+import useElements from '../hooks/use-elements';
 
 const { ValidatedFormTokenField } = unlock( privateApis );
 
@@ -23,17 +19,15 @@ export default function ArrayControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { label, placeholder, elements, getValue, setValue } = field;
+	const { label, placeholder, getValue, setValue, isValid } = field;
 	const value = getValue( { item: data } );
 
-	const [ customValidity, setCustomValidity ] = useState<
-		| {
-				type: 'validating' | 'valid' | 'invalid';
-				message: string;
-		  }
-		| undefined
-	>( undefined );
+	const { elements, isLoading } = useElements( {
+		elements: field.elements,
+		getElements: field.getElements,
+	} );
 
 	// Convert stored values to element objects for the token field
 	const arrayValueAsElements = useMemo(
@@ -49,69 +43,6 @@ export default function ArrayControl< Item >( {
 		[ value, elements ]
 	);
 
-	const validateTokens = useCallback(
-		( tokens: ( string | { value: string; label?: string } )[] ) => {
-			// Extract actual values from tokens for validation
-			const tokenValues = tokens.map( ( token ) => {
-				if ( typeof token === 'object' && 'value' in token ) {
-					return token.value;
-				}
-				return token;
-			} );
-
-			// First, check if elements validation is required and any tokens are invalid
-			if ( field.isValid?.elements && elements ) {
-				const invalidTokens = tokenValues.filter( ( tokenValue ) => {
-					return ! elements.some(
-						( element ) => element.value === tokenValue
-					);
-				} );
-
-				if ( invalidTokens.length > 0 ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message: sprintf(
-							/* translators: %s: list of invalid tokens */
-							_n(
-								'Please select from the available options: %s is invalid.',
-								'Please select from the available options: %s are invalid.',
-								invalidTokens.length
-							),
-							invalidTokens.join( ', ' )
-						),
-					} );
-					return;
-				}
-			}
-
-			// Then check custom validation if provided.
-			if ( field.isValid?.custom ) {
-				const result = field.isValid?.custom?.(
-					deepMerge(
-						data,
-						setValue( {
-							item: data,
-							value: tokenValues,
-						} ) as Partial< Item >
-					),
-					field
-				);
-
-				if ( result ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message: result,
-					} );
-					return;
-				}
-			}
-
-			// If no validation errors, clear custom validity
-			setCustomValidity( undefined );
-		},
-		[ elements, data, field, setValue ]
-	);
-
 	const onChangeControl = useCallback(
 		( tokens: ( string | { value: string; label?: string } )[] ) => {
 			const valueTokens = tokens.map( ( token ) => {
@@ -127,11 +58,14 @@ export default function ArrayControl< Item >( {
 		[ onChange, setValue, data ]
 	);
 
+	if ( isLoading ) {
+		return <Spinner />;
+	}
+
 	return (
 		<ValidatedFormTokenField
-			required={ !! field.isValid?.required }
-			onValidate={ validateTokens }
-			customValidity={ customValidity }
+			required={ !! isValid?.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ hideLabelFromVision ? undefined : label }
 			value={ arrayValueAsElements }
 			onChange={ onChangeControl }