@wordpress/dataviews 0.6.0 → 0.7.0

package/src/search-widget.js

@@ -8,12 +8,27 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
-import { VisuallyHidden, Icon } from '@wordpress/components';
+import {
+	VisuallyHidden,
+	Icon,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { search } from '@wordpress/icons';
 import { SVG, Circle } from '@wordpress/primitives';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
@@ -24,7 +39,112 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-export default function SearchWidget( { filter, view, onChangeView } ) {
+function ListBox( { view, filter, onChangeView } ) {
+	const compositeStore = useCompositeStore( {
+		virtualFocus: true,
+		focusLoop: true,
+		// When we have no or just one operators, we can set the first item as active.
+		// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
+		// so the first item is not selected, since the focus is on the operators control.
+		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
+	} );
+	const selectedFilter = view.filters.find(
+		( _filter ) => _filter.field === filter.field
+	);
+	const selectedValues = selectedFilter?.value;
+	return (
+		<Composite
+			store={ compositeStore }
+			role="listbox"
+			className="dataviews-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' ),
+				filter.name
+			) }
+			onFocusVisible={ () => {
+				if ( ! compositeStore.getState().activeId ) {
+					compositeStore.move( compositeStore.first() );
+				}
+			} }
+			render={ <Ariakit.CompositeTypeahead store={ compositeStore } /> }
+		>
+			{ filter.elements.map( ( element ) => (
+				<Ariakit.CompositeHover
+					store={ compositeStore }
+					key={ element.value }
+					render={
+						<CompositeItem
+							render={
+								<div
+									aria-label={ element.label }
+									role="option"
+									className="dataviews-search-widget-listitem"
+								/>
+							}
+							onClick={ () => {
+								const currentFilter = view.filters.find(
+									( _filter ) =>
+										_filter.field === filter.field
+								);
+								const newFilters = currentFilter
+									? [
+											...view.filters.map(
+												( _filter ) => {
+													if (
+														_filter.field ===
+														filter.field
+													) {
+														return {
+															..._filter,
+															operator:
+																currentFilter.operator ||
+																filter
+																	.operators[ 0 ],
+															value: element.value,
+														};
+													}
+													return _filter;
+												}
+											),
+									  ]
+									: [
+											...view.filters,
+											{
+												field: filter.field,
+												operator: filter.operators[ 0 ],
+												value: element.value,
+											},
+									  ];
+								onChangeView( {
+									...view,
+									page: 1,
+									filters: newFilters,
+								} );
+							} }
+						/>
+					}
+				>
+					<span className="dataviews-search-widget-listitem-check">
+						{ selectedValues === element.value && (
+							<Icon icon={ radioCheck } />
+						) }
+					</span>
+					<span>
+						{ element.label }
+						{ !! element.description && (
+							<span className="dataviews-search-widget-listitem-description">
+								{ element.description }
+							</span>
+						) }
+					</span>
+				</Ariakit.CompositeHover>
+			) ) }
+		</Composite>
+	);
+}
+
+function ComboboxList( { view, filter, onChangeView } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const deferredSearchValue = useDeferredValue( searchValue );
 	const selectedFilter = view.filters.find(
@@ -97,12 +217,12 @@ export default function SearchWidget( { filter, view, onChangeView } ) {
 						<Ariakit.ComboboxItem
 							key={ element.value }
 							value={ element.value }
-							className="dataviews-search-widget-filter-combobox-item"
+							className="dataviews-search-widget-listitem"
 							hideOnClick={ false }
 							setValueOnClick={ false }
 							focusOnHover
 						>
-							<span className="dataviews-search-widget-filter-combobox-item-check">
+							<span className="dataviews-search-widget-listitem-check">
 								{ selectedValues === element.value && (
 									<Icon icon={ radioCheck } />
 								) }
@@ -113,7 +233,7 @@ export default function SearchWidget( { filter, view, onChangeView } ) {
 									value={ element.label }
 								/>
 								{ !! element.description && (
-									<span className="dataviews-search-widget-filter-combobox-item-description">
+									<span className="dataviews-search-widget-listitem-description">
 										{ element.description }
 									</span>
 								) }
@@ -126,3 +246,8 @@ export default function SearchWidget( { filter, view, onChangeView } ) {
 		</Ariakit.ComboboxProvider>
 	);
 }
+
+export default function SearchWidget( props ) {
+	const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
+	return <Widget { ...props } />;
+}

package/src/single-selection-checkbox.js

@@ -11,6 +11,7 @@ export default function SingleSelectionCheckbox( {
 	data,
 	getItemId,
 	primaryField,
+	disabled,
 } ) {
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
@@ -31,9 +32,14 @@ export default function SingleSelectionCheckbox( {
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
 			__nextHasNoMarginBottom
-			checked={ isSelected }
 			label={ selectionLabel }
+			aria-disabled={ disabled }
+			checked={ isSelected }
 			onChange={ () => {
+				if ( disabled ) {
+					return;
+				}
+
 				if ( ! isSelected ) {
 					onSelectionChange(
 						data.filter( ( _item ) => {

package/src/style.scss

@@ -4,17 +4,16 @@
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
-
-	> div {
-		min-height: 100%;
-	}
 }
 
 .dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40 0;
-	.components-search-control {
-		flex-grow: 1;
+	margin-bottom: $grid-unit-15;
+	flex-shrink: 0;
+	position: sticky;
+	left: 0;
 
+	.components-search-control {
 		.components-base-control__field {
 			max-width: 240px;
 		}
@@ -22,11 +21,18 @@
 }
 
 .dataviews-filters__container {
-	padding: 0 $grid-unit-40;
-}
+	padding-right: $grid-unit-40;
 
-.dataviews-filters__view-actions.components-h-stack {
-	align-items: center;
+	.dataviews-filters__reset-button[aria-disabled="true"] {
+		&,
+		&:hover {
+			opacity: 0;
+		}
+
+		&:focus {
+			opacity: 1;
+		}
+	}
 }
 
 .dataviews-filters-button {
@@ -34,22 +40,25 @@
 }
 
 .dataviews-pagination {
-	margin-top: auto;
 	position: sticky;
 	bottom: 0;
-	background-color: rgba($white, 0.8);
-	backdrop-filter: blur(6px);
+	left: 0;
+	background-color: $white;
 	padding: $grid-unit-15 $grid-unit-40;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
+	flex-shrink: 0;
 }
 
-.dataviews-filters-options {
-	margin: $grid-unit-40 0 $grid-unit-20;
+.dataviews-pagination__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
 }
 
-.dataviews-view-table-wrapper {
-	overflow-x: auto;
+.dataviews-filters-options {
+	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
 .dataviews-view-table {
@@ -118,7 +127,7 @@
 			background-color: #f8f8f8;
 		}
 
-		.components-checkbox-control__input {
+		.components-checkbox-control__input.components-checkbox-control__input {
 			opacity: 0;
 
 			&:checked,
@@ -145,17 +154,18 @@
 		}
 	}
 	thead {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: z-index(".dataviews-view-table thead");
+
 		tr {
 			border: 0;
 		}
 		th {
-			position: sticky;
-			top: -1px;
 			background-color: $white;
 			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
 			padding-top: $grid-unit-10;
 			padding-bottom: $grid-unit-10;
-			z-index: 1;
 			font-size: 11px;
 			text-transform: uppercase;
 			font-weight: 500;
@@ -202,6 +212,12 @@
 	.dataviews-view-table__actions-column {
 		width: 1%;
 	}
+
+	&:has(tr.is-selected) {
+		.components-checkbox-control__input {
+			opacity: 1;
+		}
+	}
 }
 
 .dataviews-view-list__primary-field,
@@ -212,7 +228,6 @@
 	color: $gray-900;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	overflow: hidden;
 	display: block;
 	width: 100%;
 
@@ -228,6 +243,7 @@
 		&:hover {
 			color: $gray-900;
 		}
+		@include link-reset();
 	}
 
 	button.components-button.is-link {
@@ -466,6 +482,10 @@
 .dataviews-no-results,
 .dataviews-loading {
 	padding: 0 $grid-unit-40;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .dataviews-view-table-selection-checkbox label {
@@ -493,9 +513,6 @@
 	margin-left: $grid-unit-10;
 }
 
-.dataviews-view-grid__card.has-no-pointer-events * {
-	pointer-events: none;
-}
 .dataviews-filter-summary__popover {
 	.components-popover__content {
 		width: 230px;
@@ -510,56 +527,62 @@
 	overflow: auto;
 	border-top: 1px solid $gray-200;
 
-	.dataviews-search-widget-filter-combobox-item {
-		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;
+	.dataviews-search-widget-filter-combobox-item-value {
+		[data-user-value] {
+			font-weight: 600;
 		}
+	}
+}
 
-		&:hover,
-		&[data-active-item],
-		&:focus {
-			background-color: var(--wp-admin-theme-color);
-			color: $white;
+.dataviews-search-widget-listbox {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+}
 
-			.dataviews-search-widget-filter-combobox-item-check {
-				fill: $white;
-			}
+.dataviews-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;
 
-			.dataviews-search-widget-filter-combobox-item-description {
-				color: $white;
-			}
-		}
+	&:last-child {
+		margin-block-end: 0;
+	}
 
-		.dataviews-search-widget-filter-combobox-item-check {
-			width: 24px;
-			height: 24px;
-			flex-shrink: 0;
-		}
+	&:hover,
+	&[data-active-item],
+	&:focus {
+		background-color: var(--wp-admin-theme-color);
+		color: $white;
 
-		.dataviews-search-widget-filter-combobox-item-value {
-			[data-user-value] {
-				font-weight: 600;
-			}
+		.dataviews-search-widget-listitem-check {
+			fill: $white;
 		}
 
-		.dataviews-search-widget-filter-combobox-item-description {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			font-size: $helptext-font-size;
-			line-height: 16px;
-			color: $gray-700;
+		.dataviews-search-widget-listitem-description {
+			color: $white;
 		}
 	}
+
+	.dataviews-search-widget-listitem-check {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+	}
+
+	.dataviews-search-widget-listitem-description {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: $helptext-font-size;
+		line-height: 16px;
+		color: $gray-700;
+	}
 }
 
 .dataviews-search-widget-filter-combobox__wrapper {
@@ -615,8 +638,12 @@
 }
 
 .dataviews-filter-summary__operators-container {
-	padding: $grid-unit-10 $grid-unit-10 $grid-unit-05;
-	padding-bottom: 0;
+	padding: $grid-unit-10 $grid-unit-10 0;
+
+	&:has(+ .dataviews-search-widget-listbox) {
+		border-bottom: 1px solid $gray-200;
+		padding-bottom: $grid-unit-10;
+	}
 
 	&:empty {
 		display: none;
@@ -648,7 +675,8 @@
 		}
 
 		&:hover,
-		&:focus-visible {
+		&:focus-visible,
+		&[aria-expanded="true"] {
 			background: $gray-200;
 			color: $gray-900;
 		}
@@ -657,8 +685,9 @@
 			color: var(--wp-admin-theme-color);
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
-			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			&:hover,
+			&[aria-expanded="true"] {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
 			}
 		}
 

package/src/view-actions.js

@@ -56,7 +56,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 						value={ availableView.type }
 						name="view-actions-available-view"
 						checked={ availableView.type === view.type }
-						hideOnClick={ true }
+						hideOnClick
 						onChange={ ( e ) => {
 							onChangeView( {
 								...view,

package/src/view-grid.js

@@ -11,10 +11,10 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Tooltip,
+	Spinner,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +22,8 @@ import { useState } from '@wordpress/element';
 import ItemActions from './item-actions';
 import SingleSelectionCheckbox from './single-selection-checkbox';
 
+import { useHasAPossibleBulkAction } from './bulk-actions';
+
 function GridItem( {
 	selection,
 	data,
@@ -33,7 +35,7 @@ function GridItem( {
 	primaryField,
 	visibleFields,
 } ) {
-	const [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );
+	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	return (
@@ -41,12 +43,12 @@ function GridItem( {
 			spacing={ 0 }
 			key={ id }
 			className={ classnames( 'dataviews-view-grid__card', {
-				'is-selected': isSelected,
-				'has-no-pointer-events': hasNoPointerEvents,
+				'is-selected': hasBulkAction && isSelected,
 			} ) }
-			onMouseDown={ ( event ) => {
-				if ( event.ctrlKey || event.metaKey ) {
-					setHasNoPointerEvents( true );
+			onClickCapture={ ( event ) => {
+				if ( hasBulkAction && ( event.ctrlKey || event.metaKey ) ) {
+					event.stopPropagation();
+					event.preventDefault();
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {
@@ -70,11 +72,6 @@ function GridItem( {
 					}
 				}
 			} }
-			onClick={ () => {
-				if ( hasNoPointerEvents ) {
-					setHasNoPointerEvents( false );
-				}
-			} }
 		>
 			<div className="dataviews-view-grid__media">
 				{ mediaField?.render( { item } ) }
@@ -91,6 +88,7 @@ function GridItem( {
 					getItemId={ getItemId }
 					data={ data }
 					primaryField={ primaryField }
+					disabled={ ! hasBulkAction }
 				/>
 				<HStack className="dataviews-view-grid__primary-field">
 					{ primaryField?.render( { item } ) }
@@ -186,7 +184,7 @@ export default function ViewGrid( {
 						'dataviews-no-results': ! isLoading,
 					} ) }
 				>
-					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
 				</div>
 			) }
 		</>

package/src/view-list.js

@@ -11,6 +11,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Button,
+	Spinner,
 } from '@wordpress/components';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { info } from '@wordpress/icons';
@@ -60,7 +61,7 @@ export default function ViewList( {
 				} ) }
 			>
 				{ ! hasData && (
-					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
 				) }
 			</div>
 		);