@wordpress/dataviews 3.0.0 → 4.1.0

package/src/{filter-summary.tsx → components/dataviews-filters/filter-summary.tsx}

@@ -35,8 +35,14 @@ import {
 	OPERATOR_IS_NONE,
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
-} from './constants';
-import type { Filter, NormalizedFilter, Operator, Option, View } from './types';
+} from '../../constants';
+import type {
+	Filter,
+	NormalizedFilter,
+	Operator,
+	Option,
+	View,
+} from '../../types';
 
 interface FilterTextProps {
 	activeElements: Option[];
@@ -65,8 +71,10 @@ const FilterText = ( {
 	}
 
 	const filterTextWrappers = {
-		Name: <span className="dataviews-filter-summary__filter-text-name" />,
-		Value: <span className="dataviews-filter-summary__filter-text-value" />,
+		Name: <span className="dataviews-filters__summary-filter-text-name" />,
+		Value: (
+			<span className="dataviews-filters__summary-filter-text-value" />
+		),
 	};
 
 	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
@@ -166,9 +174,9 @@ function OperatorSelector( {
 			<HStack
 				spacing={ 2 }
 				justify="flex-start"
-				className="dataviews-filter-summary__operators-container"
+				className="dataviews-filters__summary-operators-container"
 			>
-				<FlexItem className="dataviews-filter-summary__operators-filter-name">
+				<FlexItem className="dataviews-filters__summary-operators-filter-name">
 					{ filter.name }
 				</FlexItem>
 
@@ -239,13 +247,13 @@ export default function FilterSummary( {
 	return (
 		<Dropdown
 			defaultOpen={ openedFilter === filter.field }
-			contentClassName="dataviews-filter-summary__popover"
+			contentClassName="dataviews-filters__summary-popover"
 			popoverProps={ { placement: 'bottom-start', role: 'dialog' } }
 			onClose={ () => {
 				toggleRef.current?.focus();
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<div className="dataviews-filter-summary__chip-container">
+				<div className="dataviews-filters__summary-chip-container">
 					<Tooltip
 						text={ sprintf(
 							/* translators: 1: Filter name. */
@@ -256,7 +264,7 @@ export default function FilterSummary( {
 					>
 						<div
 							className={ clsx(
-								'dataviews-filter-summary__chip',
+								'dataviews-filters__summary-chip',
 								{
 									'has-reset': canResetOrRemove,
 									'has-values': hasValues,
@@ -289,7 +297,7 @@ export default function FilterSummary( {
 						>
 							<button
 								className={ clsx(
-									'dataviews-filter-summary__chip-remove',
+									'dataviews-filters__summary-chip-remove',
 									{ 'has-values': hasValues }
 								) }
 								onClick={ () => {

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

@@ -0,0 +1,199 @@
+/**
+ * WordPress dependencies
+ */
+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 { 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, NormalizedField, View } from '../../types';
+
+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 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 )
+					),
+				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 );
+		} );
+		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 ( ! 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"
+			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 (
+				<FilterSummary
+					key={ filter.field }
+					filter={ filter }
+					view={ view }
+					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' } }
+			className="dataviews-filters__container"
+			wrap
+		>
+			{ filterComponents }
+		</HStack>
+	);
+}
+
+export default memo( Filters );

package/src/{reset-filters.tsx → components/dataviews-filters/reset-filters.tsx}

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { NormalizedFilter, View } from './types';
+import type { NormalizedFilter, View } from '../../types';
 
 interface ResetFilterProps {
 	filters: NormalizedFilter[];

package/src/{search-widget.tsx → components/dataviews-filters/search-widget.tsx}

@@ -21,8 +21,8 @@ import { SVG, Circle } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Filter, NormalizedFilter, View } from './types';
+import { unlock } from '../../lock-unlock';
+import type { Filter, NormalizedFilter, View } from '../../types';
 
 const {
 	CompositeV2: Composite,
@@ -101,7 +101,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 		<Composite
 			store={ compositeStore }
 			role="listbox"
-			className="dataviews-search-widget-listbox"
+			className="dataviews-filters__search-widget-listbox"
 			aria-label={ sprintf(
 				/* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
 				__( 'List of: %1$s' ),
@@ -124,7 +124,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 								<div
 									aria-label={ element.label }
 									role="option"
-									className="dataviews-search-widget-listitem"
+									className="dataviews-filters__search-widget-listitem"
 								/>
 							}
 							onClick={ () => {
@@ -174,7 +174,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 						/>
 					}
 				>
-					<span className="dataviews-search-widget-listitem-check">
+					<span className="dataviews-filters__search-widget-listitem-check">
 						{ filter.singleSelection &&
 							currentValue === element.value && (
 								<Icon icon={ radioCheck } />
@@ -187,7 +187,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 					<span>
 						{ element.label }
 						{ !! element.description && (
-							<span className="dataviews-search-widget-listitem-description">
+							<span className="dataviews-filters__search-widget-listitem-description">
 								{ element.description }
 							</span>
 						) }
@@ -247,7 +247,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 			} }
 			setValue={ setSearchValue }
 		>
-			<div className="dataviews-search-widget-filter-combobox__wrapper">
+			<div className="dataviews-filters__search-widget-filter-combobox__wrapper">
 				<Ariakit.ComboboxLabel
 					render={
 						<VisuallyHidden>
@@ -260,14 +260,14 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 				<Ariakit.Combobox
 					autoSelect="always"
 					placeholder={ __( 'Search' ) }
-					className="dataviews-search-widget-filter-combobox__input"
+					className="dataviews-filters__search-widget-filter-combobox__input"
 				/>
-				<div className="dataviews-search-widget-filter-combobox__icon">
+				<div className="dataviews-filters__search-widget-filter-combobox__icon">
 					<Icon icon={ search } />
 				</div>
 			</div>
 			<Ariakit.ComboboxList
-				className="dataviews-search-widget-filter-combobox-list"
+				className="dataviews-filters__search-widget-filter-combobox-list"
 				alwaysVisible
 			>
 				{ matches.map( ( element ) => {
@@ -275,12 +275,12 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 						<Ariakit.ComboboxItem
 							key={ element.value }
 							value={ element.value }
-							className="dataviews-search-widget-listitem"
+							className="dataviews-filters__search-widget-listitem"
 							hideOnClick={ false }
 							setValueOnClick={ false }
 							focusOnHover
 						>
-							<span className="dataviews-search-widget-listitem-check">
+							<span className="dataviews-filters__search-widget-listitem-check">
 								{ filter.singleSelection &&
 									currentValue === element.value && (
 										<Icon icon={ radioCheck } />
@@ -292,11 +292,11 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 							</span>
 							<span>
 								<Ariakit.ComboboxItemValue
-									className="dataviews-search-widget-filter-combobox-item-value"
+									className="dataviews-filters__search-widget-filter-combobox-item-value"
 									value={ element.label }
 								/>
 								{ !! element.description && (
-									<span className="dataviews-search-widget-listitem-description">
+									<span className="dataviews-filters__search-widget-listitem-description">
 										{ element.description }
 									</span>
 								) }

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

@@ -0,0 +1,282 @@
+.dataviews-filters__button {
+	position: relative;
+}
+
+.dataviews-filters__container {
+	padding-top: 0;
+}
+
+.dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled="true"] {
+	&,
+	&:hover {
+		opacity: 0;
+	}
+
+	&:focus {
+		opacity: 1;
+	}
+}
+
+.dataviews-filters__summary-popover {
+	.components-popover__content {
+		width: 230px;
+		padding: 0;
+		border-radius: $grid-unit-05;
+	}
+}
+
+.dataviews-filters__summary-operators-container {
+	padding: $grid-unit-10 $grid-unit-10 0;
+
+	&:has(+ .dataviews-filters__search-widget-listbox) {
+		border-bottom: 1px solid $gray-200;
+		padding-bottom: $grid-unit-10;
+	}
+
+	&:empty {
+		display: none;
+	}
+
+	.dataviews-filters__summary-operators-filter-name {
+		color: $gray-700;
+	}
+}
+
+.dataviews-filters__summary-chip-container {
+	position: relative;
+	white-space: pre-wrap;
+
+	.dataviews-filters__summary-chip {
+		border-radius: $grid-unit-20;
+		border: 1px solid transparent;
+		cursor: pointer;
+		padding: $grid-unit-05 $grid-unit-15;
+		min-height: $grid-unit-40;
+		background: $gray-100;
+		color: $gray-800;
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		&.has-reset {
+			padding-inline-end: $button-size-small + $grid-unit-05;
+		}
+
+		&:hover,
+		&:focus-visible,
+		&[aria-expanded="true"] {
+			background: $gray-200;
+			color: $gray-900;
+		}
+
+		&.has-values {
+			color: var(--wp-admin-theme-color);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+			&:hover,
+			&[aria-expanded="true"] {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow:
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+
+		.dataviews-filters-__summary-filter-text-name {
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-filters__summary-chip-remove {
+		width: $icon-size;
+		height: $icon-size;
+		border-radius: 50%;
+		border: 0;
+		padding: 0;
+		position: absolute;
+		right: $grid-unit-05;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		cursor: pointer;
+
+		svg {
+			fill: $gray-700;
+		}
+
+		&:hover,
+		&:focus {
+			background: $gray-200;
+			svg {
+				fill: $gray-900;
+			}
+		}
+
+		&.has-values {
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+			&:hover {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow:
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-filters__search-widget-filter-combobox-list {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+	border-top: 1px solid $gray-200;
+
+	.dataviews-filters__search-widget-filter-combobox-item-value {
+		[data-user-value] {
+			font-weight: 600;
+		}
+	}
+}
+
+.dataviews-filters__search-widget-listbox {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+}
+
+.dataviews-filters__search-widget-listitem {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-10;
+	border-radius: $radius-block-ui;
+	box-sizing: border-box;
+	padding: $grid-unit-10 $grid-unit-15;
+	cursor: default;
+	margin-block-end: 2px;
+
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	&:hover,
+	&[data-active-item],
+	&:focus {
+		background-color: var(--wp-admin-theme-color);
+		color: $white;
+
+		.dataviews-filters__search-widget-listitem-check {
+			fill: $white;
+		}
+
+		.dataviews-filters__search-widget-listitem-description {
+			color: $white;
+		}
+	}
+
+	.dataviews-filters__search-widget-listitem-check {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+	}
+
+	.dataviews-filters__search-widget-listitem-description {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: $helptext-font-size;
+		line-height: 16px;
+		color: $gray-700;
+	}
+}
+
+.dataviews-filters__search-widget-filter-combobox__wrapper {
+	position: relative;
+	padding: $grid-unit-10;
+
+	.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;
+		width: 100%;
+		height: $grid-unit-40;
+
+		// Unset inherited values.
+		margin-left: 0;
+		margin-right: 0;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
+		&:focus {
+			background: $white;
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+
+		&::placeholder {
+			color: $gray-700;
+		}
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+
+	.dataviews-filters__search-widget-filter-combobox__icon {
+		position: absolute;
+		right: $grid-unit-15;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		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/{item-actions.tsx → components/dataviews-item-actions/index.tsx}

@@ -20,8 +20,8 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, ActionModal as ActionModalType } from './types';
+import { unlock } from '../../lock-unlock';
+import type { Action, ActionModal as ActionModalType } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,

package/src/components/dataviews-item-actions/style.scss

@@ -0,0 +1,3 @@
+.dataviews-action-modal {
+	z-index: z-index(".dataviews-action-modal");
+}