@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.1-next.47f435fc9.0

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

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