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

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/toggle.tsx

@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useRef, useCallback, useEffect } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { funnel } from '@wordpress/icons';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { AddFilterMenu } from './add-filter';
+import DataViewsContext from '../dataviews-context';
+import type { View } from '../../types';
+
+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>
+			) }
+		</>
+	);
+}
+
+export default FiltersToggle;

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

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ALL_OPERATORS, SINGLE_SELECTION_OPERATORS } from '../../constants';
+import type { NormalizedFilter, NormalizedField, View } from '../../types';
+
+function useFilters( fields: NormalizedField< any >[], view: View ) {
+	return useMemo( () => {
+		const filters: NormalizedFilter[] = [];
+		fields.forEach( ( field ) => {
+			if (
+				field.filterBy === false ||
+				( ! field.hasElements && ! 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,
+				getElements: field.getElements,
+				hasElements: field.hasElements,
+				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 default useFilters;

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

@@ -7,13 +7,7 @@ import type { ReactNode } 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';
@@ -34,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;
@@ -84,7 +79,6 @@ function DefaultUI( {
 	search = true,
 	searchLabel = undefined,
 }: DefaultUIProps ) {
-	const { isShowingFilter } = useContext( DataViewsContext );
 	return (
 		<>
 			<HStack
@@ -109,9 +103,7 @@ function DefaultUI( {
 					<DataViewsViewConfig />
 				</HStack>
 			</HStack>
-			{ isShowingFilter && (
-				<DataViewsFilters className="dataviews-filters__container" />
-			) }
+			<FiltersToggled className="dataviews-filters__container" />
 			<DataViewsLayout />
 			<DataViewsPickerFooter />
 		</>
@@ -263,7 +255,8 @@ function DataViewsPicker< Item >( {
 const DataViewsPickerSubComponents =
 	DataViewsPicker as typeof DataViewsPicker & {
 		BulkActionToolbar: typeof DataViewsPickerFooter;
-		Filters: typeof DataViewsFilters;
+		Filters: typeof Filters;
+		FiltersToggled: typeof FiltersToggled;
 		FiltersToggle: typeof FiltersToggle;
 		Layout: typeof DataViewsLayout;
 		LayoutSwitcher: typeof ViewTypeMenu;
@@ -273,7 +266,8 @@ const DataViewsPickerSubComponents =
 	};
 
 DataViewsPickerSubComponents.BulkActionToolbar = DataViewsPickerFooter;
-DataViewsPickerSubComponents.Filters = DataViewsFilters;
+DataViewsPickerSubComponents.Filters = Filters;
+DataViewsPickerSubComponents.FiltersToggled = FiltersToggled;
 DataViewsPickerSubComponents.FiltersToggle = FiltersToggle;
 DataViewsPickerSubComponents.Layout = DataViewsLayout;
 DataViewsPickerSubComponents.LayoutSwitcher = ViewTypeMenu;

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 }

package/src/dataform-controls/checkbox.tsx

@@ -1,19 +1,15 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useState, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
 import { unlock } from '../lock-unlock';
+import getCustomValidity from './utils/get-custom-validity';
 
 const { ValidatedCheckboxControl } = unlock( privateApis );
 
@@ -22,14 +18,9 @@ export default function Checkbox< Item >( {
 	onChange,
 	data,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { getValue, setValue, label, description } = field;
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedCheckboxControl
-			>[ 'customValidity' ]
-		>( undefined );
+	const { getValue, setValue, label, description, isValid } = field;
 
 	const onChangeControl = useCallback( () => {
 		onChange(
@@ -37,37 +28,10 @@ export default function Checkbox< Item >( {
 		);
 	}, [ data, getValue, onChange, setValue ] );
 
-	const onValidateControl = useCallback(
-		( newValue: any ) => {
-			const message = field.isValid?.custom?.(
-				deepMerge(
-					data,
-					setValue( {
-						item: data,
-						value: newValue,
-					} ) as Partial< Item >
-				),
-				field
-			);
-
-			if ( message ) {
-				setCustomValidity( {
-					type: 'invalid',
-					message,
-				} );
-				return;
-			}
-
-			setCustomValidity( undefined );
-		},
-		[ data, field, setValue ]
-	);
-
 	return (
 		<ValidatedCheckboxControl
 			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
+			customValidity={ getCustomValidity( isValid, validity ) }
 			hidden={ hideLabelFromVision }
 			label={ label }
 			help={ description }