@wordpress/dataviews 0.4.1 → 0.5.0

package/src/search-widget.js

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useDeferredValue } from '@wordpress/element';
+import { VisuallyHidden, Icon } from '@wordpress/components';
+import { search } from '@wordpress/icons';
+import { SVG, Circle } from '@wordpress/primitives';
+
+const radioCheck = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
+	</SVG>
+);
+
+function normalizeSearchInput( input = '' ) {
+	return removeAccents( input.trim().toLowerCase() );
+}
+
+export default function SearchWidget( { filter, view, onChangeView } ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+	const deferredSearchValue = useDeferredValue( searchValue );
+	const selectedFilter = view.filters.find(
+		( _filter ) => _filter.field === filter.field
+	);
+	const selectedValues = selectedFilter?.value;
+	const matches = useMemo( () => {
+		const normalizedSearch = normalizeSearchInput( deferredSearchValue );
+		return filter.elements.filter( ( item ) =>
+			normalizeSearchInput( item.label ).includes( normalizedSearch )
+		);
+	}, [ filter.elements, deferredSearchValue ] );
+	return (
+		<Ariakit.ComboboxProvider
+			value={ searchValue }
+			setSelectedValue={ ( value ) => {
+				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,
+									};
+								}
+								return _filter;
+							} ),
+					  ]
+					: [
+							...view.filters,
+							{
+								field: filter.field,
+								operator: filter.operators[ 0 ],
+								value,
+							},
+					  ];
+				onChangeView( {
+					...view,
+					page: 1,
+					filters: newFilters,
+				} );
+			} }
+			setValue={ setSearchValue }
+		>
+			<div className="dataviews-search-widget-filter-combobox__wrapper">
+				<Ariakit.ComboboxLabel render={ <VisuallyHidden /> }>
+					{ __( 'Search items' ) }
+				</Ariakit.ComboboxLabel>
+				<Ariakit.Combobox
+					autoSelect="always"
+					placeholder={ __( 'Search' ) }
+					className="dataviews-search-widget-filter-combobox__input"
+				/>
+				<div className="dataviews-search-widget-filter-combobox__icon">
+					<Icon icon={ search } />
+				</div>
+			</div>
+			<Ariakit.ComboboxList
+				className="dataviews-search-widget-filter-combobox-list"
+				alwaysVisible
+			>
+				{ matches.map( ( element ) => {
+					return (
+						<Ariakit.ComboboxItem
+							key={ element.value }
+							value={ element.value }
+							className="dataviews-search-widget-filter-combobox-item"
+							hideOnClick={ false }
+							setValueOnClick={ false }
+							focusOnHover
+						>
+							<span className="dataviews-search-widget-filter-combobox-item-check">
+								{ selectedValues === element.value && (
+									<Icon icon={ radioCheck } />
+								) }
+							</span>
+							<span>
+								<Ariakit.ComboboxItemValue
+									className="dataviews-search-widget-filter-combobox-item-value"
+									value={ element.label }
+								/>
+								{ !! element.description && (
+									<span className="dataviews-search-widget-filter-combobox-item-description">
+										{ element.description }
+									</span>
+								) }
+							</span>
+						</Ariakit.ComboboxItem>
+					);
+				} ) }
+				{ ! matches.length && <p>{ __( 'No results found' ) }</p> }
+			</Ariakit.ComboboxList>
+		</Ariakit.ComboboxProvider>
+	);
+}

package/src/search.js

@@ -24,7 +24,7 @@ const Search = memo( function Search( { label, view, onChangeView } ) {
 			search: debouncedSearch,
 		} );
 	}, [ debouncedSearch ] );
-	const searchLabel = label || __( 'Filter list' );
+	const searchLabel = label || __( 'Search' );
 	return (
 		<SearchControl
 			__nextHasNoMarginBottom

package/src/single-selection-checkbox.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { CheckboxControl } from '@wordpress/components';
+
+export default function SingleSelectionCheckbox( {
+	selection,
+	onSelectionChange,
+	item,
+	data,
+	getItemId,
+	primaryField,
+} ) {
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	let selectionLabel;
+	if ( primaryField?.getValue && item ) {
+		// eslint-disable-next-line @wordpress/valid-sprintf
+		selectionLabel = sprintf(
+			/* translators: %s: item title. */
+			isSelected ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
+			primaryField.getValue( { item } )
+		);
+	} else {
+		selectionLabel = isSelected
+			? __( 'Select a new item' )
+			: __( 'Deselect item' );
+	}
+	return (
+		<CheckboxControl
+			className="dataviews-view-table-selection-checkbox"
+			__nextHasNoMarginBottom
+			checked={ isSelected }
+			label={ selectionLabel }
+			onChange={ () => {
+				if ( ! isSelected ) {
+					onSelectionChange(
+						data.filter( ( _item ) => {
+							const itemId = getItemId?.( _item );
+							return (
+								itemId === id || selection.includes( itemId )
+							);
+						} )
+					);
+				} else {
+					onSelectionChange(
+						data.filter( ( _item ) => {
+							const itemId = getItemId?.( _item );
+							return (
+								itemId !== id && selection.includes( itemId )
+							);
+						} )
+					);
+				}
+			} }
+		/>
+	);
+}

package/src/style.scss

@@ -11,13 +11,20 @@
 }
 
 .dataviews-filters__view-actions {
-	padding: $grid-unit-15 $grid-unit-40;
+	padding: $grid-unit-15 $grid-unit-40 0;
 	.components-search-control {
 		flex-grow: 1;
-		max-width: 240px;
+
+		.components-base-control__field {
+			max-width: 240px;
+		}
 	}
 }
 
+.dataviews-filters__container {
+	padding: 0 $grid-unit-40;
+}
+
 .dataviews-filters__view-actions.components-h-stack {
 	align-items: center;
 }
@@ -26,24 +33,6 @@
 	position: relative;
 }
 
-.dataviews-filters-count {
-	position: absolute;
-	top: 0;
-	right: 0;
-	height: $grid-unit-20;
-	color: var(--wp-components-color-accent-inverted, $white);
-	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-	border-radius: $grid-unit-10;
-	min-width: $grid-unit-20;
-	padding: 0 $grid-unit-05;
-	transform: translateX(40%) translateY(-40%);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 11px;
-	font-weight: 300;
-}
-
 .dataviews-pagination {
 	margin-top: auto;
 	position: sticky;
@@ -87,10 +76,6 @@
 		padding: $grid-unit-15;
 		white-space: nowrap;
 
-		@include break-huge() {
-			min-width: 200px;
-		}
-
 		&[data-field-id="actions"] {
 			text-align: right;
 		}
@@ -278,12 +263,20 @@
 		justify-content: flex-start;
 
 		.dataviews-view-grid__title-actions {
-			padding: 0 $grid-unit-05;
+			padding: $grid-unit-05 $grid-unit $grid-unit-05 $grid-unit-05;
 		}
 
 		.dataviews-view-grid__primary-field {
 			min-height: $grid-unit-50;
 		}
+		&.is-selected {
+			border-color: var(--wp-admin-theme-color);
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
 	}
 
 	.dataviews-view-grid__media {
@@ -301,10 +294,6 @@
 		}
 	}
 
-	.dataviews-view-grid__primary-field {
-		padding: $grid-unit-10;
-	}
-
 	.dataviews-view-grid__fields {
 		position: relative;
 		font-size: 12px;
@@ -391,16 +380,14 @@
 				border-radius: $grid-unit-05;
 			}
 		}
-		h3 {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+		.dataviews-view-list__primary-field {
+			min-height: $grid-unit-05 * 5;
 		}
 	}
 
 	.dataviews-view-list__media-wrapper {
-		width: $grid-unit-40;
-		height: $grid-unit-40;
+		width: $grid-unit-50;
+		height: $grid-unit-50;
 		border-radius: $grid-unit-05;
 		overflow: hidden;
 		position: relative;
@@ -433,17 +420,13 @@
 
 	.dataviews-view-list__fields {
 		color: $gray-700;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		display: flex;
+		gap: $grid-unit-10;
+		flex-wrap: wrap;
+		font-size: 12px;
+		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
-			margin-right: $grid-unit-15;
-
-			&:last-child {
-				margin-right: 0;
-			}
-
 			&:empty {
 				display: none;
 			}
@@ -505,3 +488,235 @@
 .dataviews-bulk-edit-button.components-button {
 	flex-shrink: 0;
 }
+
+.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
+	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;
+		padding: 0;
+		border-radius: $grid-unit-05;
+	}
+}
+
+.dataviews-search-widget-filter-combobox-list {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	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;
+		}
+
+		&:hover,
+		&[data-active-item],
+		&:focus {
+			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+			color: $white;
+
+			.dataviews-search-widget-filter-combobox-item-check {
+				fill: $white;
+			}
+
+			.dataviews-search-widget-filter-combobox-item-description {
+				color: $white;
+			}
+		}
+
+		.dataviews-search-widget-filter-combobox-item-check {
+			width: 24px;
+			height: 24px;
+			flex-shrink: 0;
+		}
+
+		.dataviews-search-widget-filter-combobox-item-value {
+			[data-user-value] {
+				font-weight: 600;
+			}
+		}
+
+		.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-filter-combobox__wrapper {
+	position: relative;
+	padding: $grid-unit-10;
+
+	.dataviews-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-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		}
+
+		&::placeholder {
+			color: $gray-700;
+		}
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+
+	.dataviews-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-filter-summary__operators-container {
+	padding: $grid-unit-10 $grid-unit-10 $grid-unit-05;
+	padding-bottom: 0;
+
+	&:empty {
+		display: none;
+	}
+
+	.dataviews-filter-summary__operators-filter-name {
+		color: $gray-700;
+	}
+}
+
+.dataviews-filter-summary__reset {
+	padding: $grid-unit-05;
+	border-top: 1px solid $gray-200;
+}
+
+.dataviews-filter-summary__chip-container {
+	position: relative;
+	white-space: pre-wrap;
+
+	.dataviews-filter-summary__chip {
+		border-radius: $grid-unit-20;
+		border: 1px solid transparent;
+		cursor: pointer;
+		padding: 0 $grid-unit-15;
+		height: $grid-unit-40;
+		background: $gray-100;
+		color: $gray-700;
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		&.has-reset {
+			padding-inline-end: $button-size-small + $grid-unit-05;
+		}
+
+		&:hover,
+		&:focus-visible {
+			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 {
+				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-filter-summary__filter-text-name {
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-filter-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);
+		}
+	}
+}

package/src/utils.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { OPERATORS } from './constants';
+
 /**
  * Helper util to sort data by text fields, when sorting is done client side.
  *
@@ -49,3 +54,13 @@ export function getPaginationResults( { data, view } ) {
 		},
 	};
 }
+
+export const sanitizeOperators = ( field ) => {
+	let operators = field.filterBy?.operators;
+	if ( ! operators || ! Array.isArray( operators ) ) {
+		operators = Object.keys( OPERATORS );
+	}
+	return operators.filter( ( operator ) =>
+		Object.keys( OPERATORS ).includes( operator )
+	);
+};

package/src/view-actions.js

@@ -83,8 +83,7 @@ function PageSizeMenu( { view, onChangeView } ) {
 					suffix={ <span aria-hidden="true">{ view.perPage }</span> }
 				>
 					<DropdownMenuItemLabel>
-						{ /* TODO: probably label per view type. */ }
-						{ __( 'Rows per page' ) }
+						{ __( 'Items per page' ) }
 					</DropdownMenuItemLabel>
 				</DropdownMenuItem>
 			}