@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "9.1.1-next.f56bd8138.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.f56bd8138.0",
-		"@wordpress/components": "^30.5.1-next.f56bd8138.0",
-		"@wordpress/compose": "^7.31.1-next.f56bd8138.0",
-		"@wordpress/data": "^10.31.1-next.f56bd8138.0",
-		"@wordpress/date": "^5.31.1-next.f56bd8138.0",
-		"@wordpress/element": "^6.31.1-next.f56bd8138.0",
-		"@wordpress/i18n": "^6.4.1-next.f56bd8138.0",
-		"@wordpress/icons": "^10.31.1-next.f56bd8138.0",
-		"@wordpress/keycodes": "^4.31.1-next.f56bd8138.0",
-		"@wordpress/primitives": "^4.31.1-next.f56bd8138.0",
-		"@wordpress/private-apis": "^1.31.1-next.f56bd8138.0",
-		"@wordpress/url": "^4.31.1-next.f56bd8138.0",
-		"@wordpress/warning": "^3.31.1-next.f56bd8138.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": "ea4a281fd857f48338877590de8c8eb9b9a8cef4"
+	"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

@@ -7,13 +7,7 @@ import type { ReactNode, ComponentProps, ReactElement } from 'react';
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import {
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
 import { useResizeObserver, throttle } from '@wordpress/compose';
 
 /**
@@ -22,7 +16,8 @@ import { useResizeObserver, throttle } from '@wordpress/compose';
 import DataViewsContext from '../dataviews-context';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import {
-	default as DataViewsFilters,
+	Filters,
+	FiltersToggled,
 	useFilters,
 	FiltersToggle,
 } from '../dataviews-filters';
@@ -35,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 > = {
@@ -93,7 +88,6 @@ function DefaultUI( {
 	search = true,
 	searchLabel = undefined,
 }: DefaultUIProps ) {
-	const { isShowingFilter } = useContext( DataViewsContext );
 	return (
 		<>
 			<HStack
@@ -119,9 +113,7 @@ function DefaultUI( {
 					{ header }
 				</HStack>
 			</HStack>
-			{ isShowingFilter && (
-				<DataViewsFilters className="dataviews-filters__container" />
-			) }
+			<FiltersToggled className="dataviews-filters__container" />
 			<DataViewsLayout />
 			<DataViewsFooter />
 		</>
@@ -295,8 +287,9 @@ function DataViews< Item >( {
 // Populate the DataViews sub components
 const DataViewsSubComponents = DataViews as typeof DataViews & {
 	BulkActionToolbar: typeof BulkActionsFooter;
-	Filters: typeof DataViewsFilters;
+	Filters: typeof Filters;
 	FiltersToggle: typeof FiltersToggle;
+	FiltersToggled: typeof FiltersToggled;
 	Layout: typeof DataViewsLayout;
 	LayoutSwitcher: typeof ViewTypeMenu;
 	Pagination: typeof DataViewsPagination;
@@ -306,7 +299,8 @@ const DataViewsSubComponents = DataViews as typeof DataViews & {
 };
 
 DataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;
-DataViewsSubComponents.Filters = DataViewsFilters;
+DataViewsSubComponents.Filters = Filters;
+DataViewsSubComponents.FiltersToggled = FiltersToggled;
 DataViewsSubComponents.FiltersToggle = FiltersToggle;
 DataViewsSubComponents.Layout = DataViewsLayout;
 DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;

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/filters-toggled.tsx

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import Filters from './filters';
+
+function FiltersToggled( props: { className?: string } ) {
+	const { isShowingFilter } = useContext( DataViewsContext );
+	if ( ! isShowingFilter ) {
+		return null;
+	}
+	return <Filters { ...props } />;
+}
+
+export default FiltersToggled;

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

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { memo, useContext, useRef } from '@wordpress/element';
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Filter from './filter';
+import { default as AddFilter } from './add-filter';
+import ResetFilters from './reset-filters';
+import useFilters from './use-filters';
+import DataViewsContext from '../dataviews-context';
+
+function Filters( { className }: { className?: string } ) {
+	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
+		useContext( DataViewsContext );
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters = useFilters( fields, view );
+	const addFilter = (
+		<AddFilter
+			key="add-filter"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+			ref={ addFilterRef }
+			setOpenedFilter={ setOpenedFilter }
+		/>
+	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+	if ( visibleFilters.length === 0 ) {
+		return null;
+	}
+	const filterComponents = [
+		...visibleFilters.map( ( filter ) => {
+			return (
+				<Filter
+					key={ filter.field }
+					filter={ filter }
+					view={ view }
+					fields={ fields }
+					onChangeView={ onChangeView }
+					addFilterRef={ addFilterRef }
+					openedFilter={ openedFilter }
+				/>
+			);
+		} ),
+		addFilter,
+	];
+
+	filterComponents.push(
+		<ResetFilters
+			key="reset-filters"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+		/>
+	);
+
+	return (
+		<HStack
+			justify="flex-start"
+			style={ { width: 'fit-content' } }
+			wrap
+			className={ className }
+		>
+			{ filterComponents }
+		</HStack>
+	);
+}
+
+export default memo( Filters );

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

@@ -1,246 +1,4 @@
-/**
- * WordPress dependencies
- */
-import {
-	memo,
-	useContext,
-	useRef,
-	useMemo,
-	useCallback,
-	useEffect,
-} from '@wordpress/element';
-import { __experimentalHStack as HStack, Button } from '@wordpress/components';
-import { funnel } from '@wordpress/icons';
-import { __, _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Filter from './filter';
-import { default as AddFilter, AddFilterMenu } from './add-filter';
-import ResetFilters from './reset-filters';
-import DataViewsContext from '../dataviews-context';
-import { ALL_OPERATORS, SINGLE_SELECTION_OPERATORS } from '../../constants';
-import type { NormalizedFilter, NormalizedField, View } from '../../types';
-
-export function useFilters( fields: NormalizedField< any >[], view: View ) {
-	return useMemo( () => {
-		const filters: NormalizedFilter[] = [];
-		fields.forEach( ( field ) => {
-			if (
-				field.filterBy === false ||
-				( ! field.elements?.length && ! field.Edit )
-			) {
-				return;
-			}
-
-			const operators = field.filterBy.operators;
-			const isPrimary = !! field.filterBy?.isPrimary;
-			const isLocked =
-				view.filters?.some(
-					( f ) => f.field === field.id && !! f.isLocked
-				) ?? false;
-			filters.push( {
-				field: field.id,
-				name: field.label,
-				elements: field.elements ?? [],
-				singleSelection: operators.some( ( op ) =>
-					SINGLE_SELECTION_OPERATORS.includes( op )
-				),
-				operators,
-				isVisible:
-					isLocked ||
-					isPrimary ||
-					!! view.filters?.some(
-						( f ) =>
-							f.field === field.id &&
-							ALL_OPERATORS.includes( f.operator )
-					),
-				isPrimary,
-				isLocked,
-			} );
-		} );
-
-		// Sort filters by:
-		// - locked filters go first
-		// - primary filters go next
-		// - then, sort by name
-		filters.sort( ( a, b ) => {
-			if ( a.isLocked && ! b.isLocked ) {
-				return -1;
-			}
-			if ( ! a.isLocked && b.isLocked ) {
-				return 1;
-			}
-			if ( a.isPrimary && ! b.isPrimary ) {
-				return -1;
-			}
-			if ( ! a.isPrimary && b.isPrimary ) {
-				return 1;
-			}
-			return a.name.localeCompare( b.name );
-		} );
-		return filters;
-	}, [ fields, view ] );
-}
-
-export function FiltersToggle() {
-	const {
-		filters,
-		view,
-		onChangeView,
-		setOpenedFilter,
-		isShowingFilter,
-		setIsShowingFilter,
-	} = useContext( DataViewsContext );
-
-	const buttonRef = useRef< HTMLButtonElement >( null );
-	const onChangeViewWithFilterVisibility = useCallback(
-		( _view: View ) => {
-			onChangeView( _view );
-			setIsShowingFilter( true );
-		},
-		[ onChangeView, setIsShowingFilter ]
-	);
-	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
-
-	const hasVisibleFilters = !! visibleFilters.length;
-	if ( filters.length === 0 ) {
-		return null;
-	}
-
-	const addFilterButtonProps = {
-		label: __( 'Add filter' ),
-		'aria-expanded': false,
-		isPressed: false,
-	};
-	const toggleFiltersButtonProps = {
-		label: _x( 'Filter', 'verb' ),
-		'aria-expanded': isShowingFilter,
-		isPressed: isShowingFilter,
-		onClick: () => {
-			if ( ! isShowingFilter ) {
-				setOpenedFilter( null );
-			}
-			setIsShowingFilter( ! isShowingFilter );
-		},
-	};
-	const buttonComponent = (
-		<Button
-			ref={ buttonRef }
-			className="dataviews-filters__visibility-toggle"
-			size="compact"
-			icon={ funnel }
-			{ ...( hasVisibleFilters
-				? toggleFiltersButtonProps
-				: addFilterButtonProps ) }
-		/>
-	);
-	return (
-		<div className="dataviews-filters__container-visibility-toggle">
-			{ ! hasVisibleFilters ? (
-				<AddFilterMenu
-					filters={ filters }
-					view={ view }
-					onChangeView={ onChangeViewWithFilterVisibility }
-					setOpenedFilter={ setOpenedFilter }
-					triggerProps={ { render: buttonComponent } }
-				/>
-			) : (
-				<FilterVisibilityToggle
-					buttonRef={ buttonRef }
-					filtersCount={ view.filters?.length }
-				>
-					{ buttonComponent }
-				</FilterVisibilityToggle>
-			) }
-		</div>
-	);
-}
-
-function FilterVisibilityToggle( {
-	buttonRef,
-	filtersCount,
-	children,
-}: {
-	buttonRef: React.RefObject< HTMLButtonElement >;
-	filtersCount?: number;
-	children: React.ReactNode;
-} ) {
-	// Focus the `add filter` button when unmounts.
-	useEffect(
-		() => () => {
-			buttonRef.current?.focus();
-		},
-		[ buttonRef ]
-	);
-	return (
-		<>
-			{ children }
-			{ !! filtersCount && (
-				<span className="dataviews-filters-toggle__count">
-					{ filtersCount }
-				</span>
-			) }
-		</>
-	);
-}
-
-function Filters( { className }: { className?: string } ) {
-	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
-		useContext( DataViewsContext );
-	const addFilterRef = useRef< HTMLButtonElement >( null );
-	const filters = useFilters( fields, view );
-	const addFilter = (
-		<AddFilter
-			key="add-filter"
-			filters={ filters }
-			view={ view }
-			onChangeView={ onChangeView }
-			ref={ addFilterRef }
-			setOpenedFilter={ setOpenedFilter }
-		/>
-	);
-	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
-	if ( visibleFilters.length === 0 ) {
-		return null;
-	}
-	const filterComponents = [
-		...visibleFilters.map( ( filter ) => {
-			return (
-				<Filter
-					key={ filter.field }
-					filter={ filter }
-					view={ view }
-					fields={ fields }
-					onChangeView={ onChangeView }
-					addFilterRef={ addFilterRef }
-					openedFilter={ openedFilter }
-				/>
-			);
-		} ),
-		addFilter,
-	];
-
-	filterComponents.push(
-		<ResetFilters
-			key="reset-filters"
-			filters={ filters }
-			view={ view }
-			onChangeView={ onChangeView }
-		/>
-	);
-
-	return (
-		<HStack
-			justify="flex-start"
-			style={ { width: 'fit-content' } }
-			wrap
-			className={ className }
-		>
-			{ filterComponents }
-		</HStack>
-	);
-}
-
-export default memo( Filters );
+export { default as Filters } from './filters';
+export { default as FiltersToggle } from './toggle';
+export { default as useFilters } from './use-filters';
+export { default as FiltersToggled } from './filters-toggled';

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 } } />;
 }