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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "9.0.1-next.a730c9c8c.0",
+	"version": "9.1.1-next.233ccab9b.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",
@@ -46,19 +46,19 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
-		"@wordpress/base-styles": "^6.6.1-next.a730c9c8c.0",
-		"@wordpress/components": "^30.3.2-next.a730c9c8c.0",
-		"@wordpress/compose": "^7.30.1-next.a730c9c8c.0",
-		"@wordpress/data": "^10.30.1-next.a730c9c8c.0",
-		"@wordpress/date": "^5.30.1-next.a730c9c8c.0",
-		"@wordpress/element": "^6.30.1-next.a730c9c8c.0",
-		"@wordpress/i18n": "^6.3.1-next.a730c9c8c.0",
-		"@wordpress/icons": "^10.30.1-next.a730c9c8c.0",
-		"@wordpress/keycodes": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/primitives": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/private-apis": "^1.30.1-next.a730c9c8c.0",
-		"@wordpress/url": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/warning": "^3.30.1-next.a730c9c8c.0",
+		"@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",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -76,5 +76,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "85a580bd2c55f811c8969b42dbb10209d19d514e"
+	"gitHead": "d11f971521e4b39b07124d5c5516890ff98b0e31"
 }

package/src/components/dataform/stories/index.story.tsx

@@ -525,6 +525,8 @@ const ValidationComponent = ( {
 		integer: number;
 		boolean: boolean;
 		customEdit: string;
+		categories: string[];
+		countries: string[];
 		password: string;
 		toggle?: boolean;
 		toggleGroup?: string;
@@ -541,6 +543,8 @@ const ValidationComponent = ( {
 		color: '#ff6600',
 		integer: 2,
 		boolean: true,
+		categories: [ 'astronomy' ],
+		countries: [ 'us' ],
 		customEdit: 'custom control',
 		password: 'secretpassword123',
 		toggle: undefined,
@@ -755,6 +759,41 @@ const ValidationComponent = ( {
 				custom: maybeCustomRule( customBooleanRule ),
 			},
 		},
+		{
+			id: 'categories',
+			type: 'array' as const,
+			label: 'Categories',
+			isValid: {
+				required,
+			},
+			elements: [
+				{ value: 'astronomy', label: 'Astronomy' },
+				{ value: 'book-review', label: 'Book review' },
+				{ value: 'event', label: 'Event' },
+				{ value: 'photography', label: 'Photography' },
+				{ value: 'travel', label: 'Travel' },
+			],
+		},
+		{
+			id: 'countries',
+			label: 'Countries Visited',
+			type: 'array' as const,
+			placeholder: 'Select countries',
+			description: 'Countries you have visited',
+			isValid: {
+				required,
+				elements: true,
+			},
+			elements: [
+				{ value: 'us', label: 'United States' },
+				{ value: 'ca', label: 'Canada' },
+				{ value: 'uk', label: 'United Kingdom' },
+				{ value: 'fr', label: 'France' },
+				{ value: 'de', label: 'Germany' },
+				{ value: 'jp', label: 'Japan' },
+				{ value: 'au', label: 'Australia' },
+			],
+		},
 		{
 			id: 'customEdit',
 			label: 'Custom Control',
@@ -812,6 +851,8 @@ const ValidationComponent = ( {
 			'color',
 			'integer',
 			'boolean',
+			'categories',
+			'countries',
 			'toggle',
 			'toggleGroup',
 			'password',
@@ -853,11 +894,15 @@ const VisibilityComponent = () => {
 		name: string;
 		email: string;
 		isActive: boolean;
+		homepageDisplay: string;
+		staticHomepage: string;
 	};
 	const [ data, setData ] = useState( {
 		name: '',
 		email: '',
 		isActive: true,
+		homepageDisplay: 'latest',
+		staticHomepage: '',
 	} );
 
 	const _fields: Field< Post >[] = [
@@ -874,9 +919,36 @@ const VisibilityComponent = () => {
 			type: 'email',
 			isVisible: ( post ) => post.isActive === true,
 		},
+		{
+			id: 'homepageDisplay',
+			label: 'Homepage display',
+			elements: [
+				{ value: 'latest', label: 'Latest post' },
+				{ value: 'static', label: 'Static page' },
+			],
+		},
+		{
+			id: 'staticHomepage',
+			label: 'Static homepage',
+			elements: [
+				{ value: 'welcome', label: 'Welcome to my website' },
+				{ value: 'about', label: 'About' },
+			],
+			isVisible: ( post ) => post.homepageDisplay === 'static',
+		},
 	];
 	const form: Form = {
-		fields: [ 'isActive', 'name', 'email' ],
+		layout: { type: 'card' },
+		fields: [
+			{
+				id: 'booleanExample',
+				children: [ 'isActive', 'name', 'email' ],
+			},
+			{
+				id: 'selectExample',
+				children: [ 'homepageDisplay', 'staticHomepage' ],
+			},
+		],
 	};
 	return (
 		<DataForm< Post >

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

@@ -273,7 +273,7 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 						<DataViews.FiltersToggle />
 						<DataViews.Search label={ __( 'moons by planet' ) } />
 					</HStack>
-					<DataViews.Filters />
+					<DataViews.FiltersToggled />
 				</VStack>
 
 				<VStack>

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