@wordpress/dataviews 9.0.1-next.6f42e1382.0 → 9.1.0

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/input-widget.tsx

@@ -32,13 +32,52 @@ export default function InputWidget( {
 	const currentFilter = view.filters?.find(
 		( f ) => f.field === filter.field
 	);
-
-	const field = fields.find( ( f ) => f.id === filter.field );
 	const currentValue = getCurrentValue( filter, currentFilter );
+
+	/*
+	 * We are reusing the field.Edit component for filters. By doing so,
+	 * we get for free a filter control specific to the field type
+	 * and other aspects of the field API (Edit control configuration, etc.).
+	 *
+	 * This approach comes with an issue: the field.Edit controls work with getValue
+	 * and setValue methods, which take an item (Item) as parameter. But, at this point,
+	 * we don't have an item and we don't know how to create one, either.
+	 *
+	 * So, what we do is to prepare the data and the relevant field configuration
+	 * as if Item was a plain object whose keys are the field ids:
+	 *
+	 * {
+	 *   [ fieldOne.id ]: value,
+	 *   [ fieldTwo.id ]: value,
+	 * }
+	 *
+	 */
+	const field = useMemo( () => {
+		const currentField = fields.find( ( f ) => f.id === filter.field );
+		if ( currentField ) {
+			return {
+				...currentField,
+				// Deactivate validation for filters.
+				isValid: {
+					required: false,
+					custom: () => null,
+				},
+				// Configure getValue/setValue as if Item was a plain object.
+				getValue: ( { item }: { item: any } ) =>
+					item[ currentField.id ],
+				setValue: ( { value }: { value: any } ) => ( {
+					[ currentField.id ]: value,
+				} ),
+			};
+		}
+		return currentField;
+	}, [ fields, filter.field ] );
+
 	const data = useMemo( () => {
 		return ( view.filters ?? [] ).reduce(
-			( acc, f ) => {
-				acc[ f.field ] = f.value;
+			( acc, activeFilter ) => {
+				// We can now assume the field is stored as a Item prop.
+				acc[ activeFilter.field ] = activeFilter.value;
 				return acc;
 			},
 			{} as Record< string, any >
@@ -49,7 +88,7 @@ export default function InputWidget( {
 		if ( ! field || ! currentFilter ) {
 			return;
 		}
-		const nextValue = updatedData[ field.id ];
+		const nextValue = field.getValue( { item: updatedData } );
 		if ( fastDeepEqual( nextValue, currentValue ) ) {
 			return;
 		}

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,73 @@
+/**
+ * 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.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 default useFilters;

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';
@@ -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/stories/index.story.tsx

@@ -86,7 +86,7 @@ export const Default = ( {
 					.filter(
 						( item ) => selection?.includes( String( item.id ) )
 					)
-					.map( ( item ) => item.title )
+					.map( ( item ) => item.name.title )
 					.join( ', ' );
 				// eslint-disable-next-line no-alert
 				window.alert( selectedItemNames );

package/src/components/dataviews-view-config/index.tsx

@@ -562,9 +562,10 @@ function FieldControl() {
 		( f ) =>
 			! visibleFieldIds.includes( f.id ) &&
 			! togglableFields.includes( f.id ) &&
-			f.type !== 'media'
+			f.type !== 'media' &&
+			f.enableHiding !== false
 	);
-	const visibleFields = visibleFieldIds
+	let visibleFields = visibleFieldIds
 		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
 		.filter( isDefined );
 
@@ -622,7 +623,7 @@ function FieldControl() {
 			isVisibleFlag: 'showDescription',
 		},
 	].filter( ( { field } ) => isDefined( field ) );
-	const visibleLockedFields = lockedFields.filter(
+	let visibleLockedFields = lockedFields.filter(
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error
 			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
@@ -631,6 +632,20 @@ function FieldControl() {
 		isVisibleFlag: string;
 		ui?: ReactNode;
 	} >;
+
+	// If only one locked field is visible, prevent it from being hidden.
+	if ( visibleLockedFields.length === 1 ) {
+		visibleLockedFields = visibleLockedFields.map( ( locked ) => ( {
+			...locked,
+			field: { ...locked.field, enableHiding: false },
+		} ) );
+	}
+
+	// If no locked fields are visible but there are visibleFields, lock the last visible field.
+	if ( visibleLockedFields.length === 0 && visibleFields.length === 1 ) {
+		visibleFields = [ { ...visibleFields[ 0 ], enableHiding: false } ];
+	}
+
 	const hiddenLockedFields = lockedFields.filter(
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error