@wordpress/dataviews 4.0.0 → 4.2.0

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

@@ -1,65 +1,153 @@
 /**
  * WordPress dependencies
  */
-import { memo, useContext, useRef } from '@wordpress/element';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	memo,
+	useContext,
+	useRef,
+	useMemo,
+	useCallback,
+} from '@wordpress/element';
+import { __experimentalHStack as HStack, Button } from '@wordpress/components';
+import { funnel } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import FilterSummary from './filter-summary';
-import AddFilter from './add-filter';
+import { default as AddFilter, AddFilterDropdownMenu } from './add-filter';
 import ResetFilters from './reset-filters';
 import DataViewsContext from '../dataviews-context';
 import { sanitizeOperators } from '../../utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
-import type { NormalizedFilter } from '../../types';
+import type { NormalizedFilter, NormalizedField, View } from '../../types';
 
-function Filters() {
-	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
-		useContext( DataViewsContext );
-	const addFilterRef = useRef< HTMLButtonElement >( null );
-	const filters: NormalizedFilter[] = [];
-	fields.forEach( ( field ) => {
-		if ( ! field.elements?.length ) {
-			return;
-		}
+export function useFilters( fields: NormalizedField< any >[], view: View ) {
+	return useMemo( () => {
+		const filters: NormalizedFilter[] = [];
+		fields.forEach( ( field ) => {
+			if ( ! field.elements?.length ) {
+				return;
+			}
 
-		const operators = sanitizeOperators( field );
-		if ( operators.length === 0 ) {
-			return;
-		}
+			const operators = sanitizeOperators( field );
+			if ( operators.length === 0 ) {
+				return;
+			}
 
-		const isPrimary = !! field.filterBy?.isPrimary;
-		filters.push( {
-			field: field.id,
-			name: field.label,
-			elements: field.elements,
-			singleSelection: operators.some( ( op ) =>
-				[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
-			),
-			operators,
-			isVisible:
-				isPrimary ||
-				!! view.filters?.some(
-					( f ) =>
-						f.field === field.id &&
-						ALL_OPERATORS.includes( f.operator )
+			const isPrimary = !! field.filterBy?.isPrimary;
+			filters.push( {
+				field: field.id,
+				name: field.label,
+				elements: field.elements,
+				singleSelection: operators.some( ( op ) =>
+					[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
 				),
-			isPrimary,
+				operators,
+				isVisible:
+					isPrimary ||
+					!! view.filters?.some(
+						( f ) =>
+							f.field === field.id &&
+							ALL_OPERATORS.includes( f.operator )
+					),
+				isPrimary,
+			} );
 		} );
-	} );
-	// Sort filters by primary property. We need the primary filters to be first.
-	// Then we sort by name.
-	filters.sort( ( a, b ) => {
-		if ( a.isPrimary && ! b.isPrimary ) {
-			return -1;
-		}
-		if ( ! a.isPrimary && b.isPrimary ) {
-			return 1;
-		}
-		return a.name.localeCompare( b.name );
-	} );
+		// Sort filters by primary property. We need the primary filters to be first.
+		// Then we sort by name.
+		filters.sort( ( a, b ) => {
+			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 FilterVisibilityToggle( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	isShowingFilter,
+	setIsShowingFilter,
+}: {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	setOpenedFilter: ( filter: string | null ) => void;
+	isShowingFilter: boolean;
+	setIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;
+} ) {
+	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;
+	}
+	if ( ! hasVisibleFilters ) {
+		return (
+			<AddFilterDropdownMenu
+				filters={ filters }
+				view={ view }
+				onChangeView={ onChangeViewWithFilterVisibility }
+				setOpenedFilter={ setOpenedFilter }
+				trigger={
+					<Button
+						className="dataviews-filters__visibility-toggle"
+						size="compact"
+						icon={ funnel }
+						label={ __( 'Add filter' ) }
+						isPressed={ false }
+						aria-expanded={ false }
+					/>
+				}
+			/>
+		);
+	}
+	return (
+		<div className="dataviews-filters__container-visibility-toggle">
+			<Button
+				className="dataviews-filters__visibility-toggle"
+				size="compact"
+				icon={ funnel }
+				label={ __( 'Toggle filter display' ) }
+				onClick={ () => {
+					if ( ! isShowingFilter ) {
+						setOpenedFilter( null );
+					}
+					setIsShowingFilter( ! isShowingFilter );
+				} }
+				isPressed={ isShowingFilter }
+				aria-expanded={ isShowingFilter }
+			/>
+			{ hasVisibleFilters && !! view.filters?.length && (
+				<span className="dataviews-filters-toggle__count">
+					{ view.filters?.length }
+				</span>
+			) }
+		</div>
+	);
+}
+
+function Filters() {
+	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
+		useContext( DataViewsContext );
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters = useFilters( fields, view );
 	const addFilter = (
 		<AddFilter
 			key="add-filter"
@@ -70,12 +158,12 @@ function Filters() {
 			setOpenedFilter={ setOpenedFilter }
 		/>
 	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+	if ( visibleFilters.length === 0 ) {
+		return null;
+	}
 	const filterComponents = [
-		...filters.map( ( filter ) => {
-			if ( ! filter.isVisible ) {
-				return null;
-			}
-
+		...visibleFilters.map( ( filter ) => {
 			return (
 				<FilterSummary
 					key={ filter.field }
@@ -90,19 +178,22 @@ function Filters() {
 		addFilter,
 	];
 
-	if ( filterComponents.length > 1 ) {
-		filterComponents.push(
-			<ResetFilters
-				key="reset-filters"
-				filters={ filters }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		);
-	}
+	filterComponents.push(
+		<ResetFilters
+			key="reset-filters"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+		/>
+	);
 
 	return (
-		<HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
+		<HStack
+			justify="flex-start"
+			style={ { width: 'fit-content' } }
+			className="dataviews-filters__container"
+			wrap
+		>
 			{ filterComponents }
 		</HStack>
 	);

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

@@ -184,14 +184,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 								<Icon icon={ check } />
 							) }
 					</span>
-					<span>
-						{ element.label }
-						{ !! element.description && (
-							<span className="dataviews-filters__search-widget-listitem-description">
-								{ element.description }
-							</span>
-						) }
-					</span>
+					<span>{ element.label }</span>
 				</Ariakit.CompositeHover>
 			) ) }
 		</Composite>

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

@@ -2,6 +2,10 @@
 	position: relative;
 }
 
+.dataviews-filters__container {
+	padding-top: 0;
+}
+
 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled="true"] {
 	&,
 	&:hover {
@@ -44,7 +48,7 @@
 
 	.dataviews-filters__summary-chip {
 		border-radius: $grid-unit-20;
-		border: 1px solid transparent;
+		border: $border-width solid transparent;
 		cursor: pointer;
 		padding: $grid-unit-05 $grid-unit-15;
 		min-height: $grid-unit-40;
@@ -250,3 +254,29 @@
 		width: $icon-size;
 	}
 }
+
+.dataviews-filters__container-visibility-toggle {
+	position: relative;
+	flex-shrink: 0;
+}
+
+.dataviews-filters-toggle__count {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translate(50%, -50%);
+	background: var(--wp-admin-theme-color, #3858e9);
+	height: $grid-unit-20;
+	min-width: $grid-unit-20;
+	line-height: $grid-unit-20;
+	padding: 0 $grid-unit-05;
+	text-align: center;
+	border-radius: $grid-unit-10;
+	font-size: 11px;
+	outline: var(--wp-admin-border-width-focus) solid $white;
+	color: $white;
+}
+
+.dataviews-search {
+	width: fit-content;
+}

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

@@ -12,7 +12,7 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
-import { VIEW_LAYOUTS } from '../../layouts';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import type { ViewBaseProps } from '../../types';
 
 export default function DataViewsLayout() {

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

@@ -21,10 +21,31 @@ function DataViewsPagination() {
 		onChangeView,
 		paginationInfo: { totalItems = 0, totalPages },
 	} = useContext( DataViewsContext );
+
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
+
 	const currentPage = view.page ?? 1;
+	const pageSelectOptions = Array.from( Array( totalPages ) ).map(
+		( _, i ) => {
+			const page = i + 1;
+			return {
+				value: page.toString(),
+				label: page.toString(),
+				'aria-label':
+					currentPage === page
+						? sprintf(
+								// translators: Current page number in total number of pages
+								__( 'Page %1$s of %2$s' ),
+								currentPage,
+								totalPages
+						  )
+						: page.toString(),
+			};
+		}
+	);
+
 	return (
 		!! totalItems &&
 		totalPages !== 1 && (
@@ -37,37 +58,35 @@ function DataViewsPagination() {
 				<HStack
 					justify="flex-start"
 					expanded={ false }
-					spacing={ 2 }
-					className="dataviews-pagination__page-selection"
+					spacing={ 1 }
+					className="dataviews-pagination__page-select"
 				>
 					{ createInterpolateElement(
 						sprintf(
-							// translators: %s: Total number of pages.
-							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
+							// translators: 1: Current page number, 2: Total number of pages.
+							_x(
+								'<div>Page</div>%1$s<div>of %2$s</div>',
+								'paging'
+							),
+							'<CurrentPage />',
 							totalPages
 						),
 						{
-							CurrentPageControl: (
+							div: <div aria-hidden />,
+							CurrentPage: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
-									value={ view.page?.toString() }
-									options={ Array.from(
-										Array( totalPages )
-									).map( ( _, i ) => {
-										const page = i + 1;
-										return {
-											value: page.toString(),
-											label: page.toString(),
-										};
-									} ) }
+									value={ currentPage.toString() }
+									options={ pageSelectOptions }
 									onChange={ ( newValue ) => {
 										onChangeView( {
 											...view,
 											page: +newValue,
 										} );
 									} }
-									size="compact"
+									size="small"
 									__nextHasNoMarginBottom
+									variant="minimal"
 								/>
 							),
 						}

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

@@ -5,17 +5,22 @@
 	background-color: $white;
 	padding: $grid-unit-15 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
-	color: $gray-700;
 	flex-shrink: 0;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 }
 
-.dataviews-pagination__page-selection {
+.dataviews-pagination__page-select {
 	font-size: 11px;
-	text-transform: uppercase;
 	font-weight: 500;
-	color: $gray-900;
+	text-transform: uppercase;
+
+	@include break-small() {
+		.components-select-control__input {
+			font-size: 11px !important;
+			font-weight: 500;
+		}
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

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

@@ -30,15 +30,18 @@ const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
 		viewRef.current = view;
 	}, [ onChangeView, view ] );
 	useEffect( () => {
-		onChangeViewRef.current( {
-			...viewRef.current,
-			page: 1,
-			search: debouncedSearch,
-		} );
+		if ( debouncedSearch !== viewRef.current?.search ) {
+			onChangeViewRef.current( {
+				...viewRef.current,
+				page: 1,
+				search: debouncedSearch,
+			} );
+		}
 	}, [ debouncedSearch ] );
 	const searchLabel = label || __( 'Search' );
 	return (
 		<SearchControl
+			className="dataviews-search"
 			__nextHasNoMarginBottom
 			onChange={ setSearch }
 			value={ search }