@wordpress/dataviews 0.8.0 → 1.0.0

package/src/style.scss

@@ -92,10 +92,6 @@
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
 		}
-
-		.components-checkbox-control__input-container {
-			margin: $grid-unit-05;
-		}
 	}
 	tr {
 		border-bottom: 1px solid $gray-100;
@@ -150,6 +146,14 @@
 			}
 		}
 
+		@media (hover: none) {
+			// Show checkboxes and quick-actions on devices that do not support hover.
+			.components-checkbox-control__input.components-checkbox-control__input,
+			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+				opacity: 1;
+			}
+		}
+
 		&.is-selected {
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-700;
@@ -190,6 +194,12 @@
 			> * {
 				flex-grow: 1;
 			}
+
+			&.dataviews-view-table__primary-field {
+				a {
+					flex-grow: 0;
+				}
+			}
 		}
 	}
 	.dataviews-view-table-header-button {
@@ -231,7 +241,7 @@
 .dataviews-view-table__primary-field {
 	font-size: $default-font-size;
 	font-weight: 500;
-	color: $gray-900;
+	color: $gray-700;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	display: block;
@@ -239,28 +249,31 @@
 
 	a {
 		text-decoration: none;
-		color: inherit;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
-		width: 100%;
+		flex-grow: 0;
+		color: $gray-900;
 
 		&:hover {
-			color: $gray-900;
+			color: var(--wp-admin-theme-color);
 		}
 		@include link-reset();
 	}
 
 	button.components-button.is-link {
 		text-decoration: none;
-		color: inherit;
 		font-weight: inherit;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
 		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 }
 
@@ -322,16 +335,52 @@
 		line-height: 16px;
 
 		&:not(:empty) {
-			padding: $grid-unit-15;
+			padding: $grid-unit-15 0;
 			padding-top: 0;
+			margin: 0 $grid-unit-15;
 		}
 
 		.dataviews-view-grid__field {
-			.dataviews-view-grid__field-value {
+			align-items: flex-start;
+
+			&:not(.is-column) {
+				align-items: center;
+
+				.dataviews-view-grid__field-name {
+					width: 35%;
+				}
+
+				.dataviews-view-grid__field-value {
+					width: 65%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			.dataviews-view-grid__field-name {
 				color: $gray-700;
 			}
 		}
 	}
+
+	.dataviews-view-grid__badge-fields {
+		&:not(:empty) {
+			padding: $grid-unit-15;
+			padding-top: 0;
+		}
+
+		.dataviews-view-grid__field-value {
+			width: fit-content;
+			background: $gray-100;
+			padding: 0 $grid-unit-10;
+			min-height: $grid-unit-30;
+			border-radius: $radius-block-ui;
+			display: flex;
+			align-items: center;
+			font-size: 12px;
+		}
+	}
 }
 
 .dataviews-view-list {
@@ -340,6 +389,7 @@
 
 	li {
 		margin: 0;
+		cursor: pointer;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
@@ -355,14 +405,24 @@
 				background: $gray-100;
 				height: 1px;
 			}
-		}
 
-		&:not(.is-selected):hover {
-			color: var(--wp-admin-theme-color);
+			> * {
+				width: 100%;
+			}
+		}
 
-			.dataviews-view-list__primary-field,
-			.dataviews-view-list__fields {
+		&:not(.is-selected) {
+			.dataviews-view-list__primary-field {
+				color: $gray-900;
+			}
+			&:hover,
+			&:focus-within {
 				color: var(--wp-admin-theme-color);
+
+				.dataviews-view-list__primary-field,
+				.dataviews-view-list__fields {
+					color: var(--wp-admin-theme-color);
+				}
 			}
 		}
 	}
@@ -388,8 +448,9 @@
 	.dataviews-view-list__item {
 		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30;
 		width: 100%;
-		cursor: pointer;
-		&:focus {
+		scroll-margin: $grid-unit-10 0;
+
+		&:focus-visible {
 			&::before {
 				position: absolute;
 				content: "";
@@ -404,6 +465,7 @@
 		}
 		.dataviews-view-list__primary-field {
 			min-height: $grid-unit-05 * 5;
+			overflow: hidden;
 		}
 	}
 
@@ -449,7 +511,7 @@
 		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
-			&:empty {
+			&:has(.dataviews-view-list__field-value:empty) {
 				display: none;
 			}
 		}
@@ -459,26 +521,6 @@
 		justify-content: space-between;
 	}
 
-	.dataviews-view-list__details-button {
-		align-self: center;
-		opacity: 0;
-	}
-
-	li.is-selected,
-	li:hover,
-	li:focus-within {
-		.dataviews-view-list__details-button {
-			opacity: 1;
-		}
-	}
-
-	li.is-selected {
-		.dataviews-view-list__details-button {
-			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
-			}
-		}
-	}
 }
 
 .dataviews-action-modal {
@@ -494,16 +536,14 @@
 	justify-content: center;
 }
 
-.dataviews-view-table-selection-checkbox label {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
+.dataviews-view-table-selection-checkbox {
+	// Experimental override for CheckboxControl size (fragile)
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	line-height: 0;
 }
 
 .dataviews-filters__custom-menu-radio-item-prefix {

package/src/test/filter-and-sort-data-view.js

@@ -0,0 +1,276 @@
+/**
+ * Internal dependencies
+ */
+import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import { data, fields } from '../stories/fixtures';
+
+describe( 'filters', () => {
+	it( 'should return empty if the data is empty', () => {
+		expect( filterSortAndPaginate( null, {}, [] ) ).toStrictEqual( {
+			data: [],
+			paginationInfo: { totalItems: 0, totalPages: 0 },
+		} );
+	} );
+
+	it( 'should return the same data if no filters are applied', () => {
+		expect(
+			filterSortAndPaginate(
+				data,
+				{
+					filters: [],
+				},
+				[]
+			)
+		).toStrictEqual( {
+			data,
+			paginationInfo: { totalItems: data.length, totalPages: 1 },
+		} );
+	} );
+
+	it( 'should search using searchable fields (title)', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'Neptu',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+	} );
+
+	it( 'should search using searchable fields (description)', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'photo',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].description ).toBe( 'NASA photo' );
+	} );
+
+	it( 'should perform case-insensitive and accent-insensitive search', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'nete ven',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].description ).toBe( 'La planète Vénus' );
+	} );
+
+	it( 'should search using IS filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'is',
+						value: 'Ice giant',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should search using IS NOT filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isNot',
+						value: 'Ice giant',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 9 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+		expect( result[ 3 ].title ).toBe( 'Mercury' );
+		expect( result[ 4 ].title ).toBe( 'Venus' );
+		expect( result[ 5 ].title ).toBe( 'Earth' );
+		expect( result[ 6 ].title ).toBe( 'Mars' );
+		expect( result[ 7 ].title ).toBe( 'Jupiter' );
+		expect( result[ 8 ].title ).toBe( 'Saturn' );
+	} );
+
+	it( 'should search using IS ANY filter for STRING values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should search using IS NONE filter for STRING values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isNone',
+						value: [ 'Ice giant', 'Gas giant', 'Terrestrial' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 3 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS ANY filter for ARRAY values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isAny',
+						value: [ 'NASA' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS NONE filter for ARRAY values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isNone',
+						value: [ 'Space' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS ALL filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isAll',
+						value: [ 'Planet', 'Solar system' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 7 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Mercury' );
+		expect( result[ 2 ].title ).toBe( 'Venus' );
+		expect( result[ 3 ].title ).toBe( 'Earth' );
+		expect( result[ 4 ].title ).toBe( 'Mars' );
+		expect( result[ 5 ].title ).toBe( 'Jupiter' );
+		expect( result[ 6 ].title ).toBe( 'Saturn' );
+	} );
+
+	it( 'should search using IS NOT ALL filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isNotAll',
+						value: [ 'Planet', 'Solar system' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 3 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+	} );
+} );
+
+describe( 'sorting', () => {
+	it( 'should sort', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'title', direction: 'desc' },
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Uranus' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+	} );
+} );
+
+describe( 'pagination', () => {
+	it( 'should paginate', () => {
+		const { data: result, paginationInfo } = filterSortAndPaginate(
+			data,
+			{
+				perPage: 2,
+				page: 2,
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'NASA' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+		expect( paginationInfo ).toStrictEqual( {
+			totalItems: data.length,
+			totalPages: 6,
+		} );
+	} );
+} );

package/src/utils.js

@@ -9,58 +9,6 @@ import {
 	OPERATOR_IS_NONE,
 } from './constants';
 
-/**
- * Helper util to sort data by text fields, when sorting is done client side.
- *
- * @param {Object}   params            Function params.
- * @param {Object[]} params.data       Data to sort.
- * @param {Object}   params.view       Current view object.
- * @param {Object[]} params.fields     Array of available fields.
- * @param {string[]} params.textFields Array of the field ids to sort.
- *
- * @return {Object[]} Sorted data.
- */
-export const sortByTextFields = ( { data, view, fields, textFields } ) => {
-	const sortedData = [ ...data ];
-	const fieldId = view.sort.field;
-	if ( textFields.includes( fieldId ) ) {
-		const fieldToSort = fields.find( ( field ) => {
-			return field.id === fieldId;
-		} );
-		sortedData.sort( ( a, b ) => {
-			const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-			const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-			return view.sort.direction === 'asc'
-				? valueA.localeCompare( valueB )
-				: valueB.localeCompare( valueA );
-		} );
-	}
-	return sortedData;
-};
-
-/**
- * Helper util to get the paginated data and the paginateInfo needed,
- * when pagination is done client side.
- *
- * @param {Object}   params      Function params.
- * @param {Object[]} params.data Available data.
- * @param {Object}   params.view Current view object.
- *
- * @return {Object} Paginated data and paginationInfo.
- */
-export function getPaginationResults( { data, view } ) {
-	const start = ( view.page - 1 ) * view.perPage;
-	const totalItems = data?.length || 0;
-	data = data?.slice( start, start + view.perPage );
-	return {
-		data,
-		paginationInfo: {
-			totalItems,
-			totalPages: Math.ceil( totalItems / view.perPage ),
-		},
-	};
-}
-
 export const sanitizeOperators = ( field ) => {
 	let operators = field.filterBy?.operators;