@wordpress/dataviews 0.9.0 → 1.1.0

package/build-types/normalize-fields.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import type { Field, NormalizedField } from './types';
+/**
+ * Apply default values and normalize the fields config.
+ *
+ * @param fields Fields config.
+ * @return Normalized fields config.
+ */
+export declare function normalizeFields(fields: Field[]): NormalizedField[];
+//# sourceMappingURL=normalize-fields.d.ts.map

package/build-types/normalize-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize-fields.d.ts","sourceRoot":"","sources":["../src/normalize-fields.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEtD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAE,MAAM,EAAE,KAAK,EAAE,GAAI,eAAe,EAAE,CAWpE"}

package/build-types/types.d.ts

@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+type Item = Record<string, any>;
+interface Option {
+    value: any;
+    label: string;
+}
+interface filterByConfig {
+    operators?: Operator[];
+    isPrimary?: boolean;
+}
+type Operator = 'is' | 'isNot' | 'isAny' | 'isNone' | 'isAll' | 'isNotAll';
+export interface Field {
+    /**
+     * The unique identifier of the field.
+     */
+    id: string;
+    /**
+     * The label of the field. Defaults to the id.
+     */
+    header?: string;
+    /**
+     * Callback used to retrieve the value of the field from the item.
+     * Defaults to `item[ field.id ]`.
+     */
+    getValue?: ({ item }: {
+        item: Item;
+    }) => any;
+    /**
+     * Callback used to render the field. Defaults to `field.getValue`.
+     */
+    render?: ({ item }: {
+        item: Item;
+    }) => ReactNode;
+    /**
+     * The width of the field column.
+     */
+    width: string | number | undefined;
+    /**
+     * The minimum width of the field column.
+     */
+    maxWidth: string | number | undefined;
+    /**
+     * The maximum width of the field column.
+     */
+    minWidth: string | number | undefined;
+    /**
+     * Whether the field is sortable.
+     */
+    enableSorting: boolean | undefined;
+    /**
+     * Whether the field is searchable.
+     */
+    enableGlobalSearch: boolean | undefined;
+    /**
+     * Whether the field is filterable.
+     */
+    enableHiding: boolean | undefined;
+    /**
+     * The list of options to pick from when using the field as a filter.
+     */
+    elements: Option[] | undefined;
+    /**
+     * Filter config for the field.
+     */
+    filterBy: filterByConfig | undefined;
+}
+export type NormalizedField = Required<Field>;
+export type Data = Item[];
+export interface Filter {
+    /**
+     * The field to filter by.
+     */
+    field: string;
+    /**
+     * The operator to use.
+     */
+    operator: Operator;
+    /**
+     * The value to filter by.
+     */
+    value: any;
+}
+export interface View {
+    /**
+     * The layout of the view.
+     */
+    type: string;
+    /**
+     * The global search term.
+     */
+    search?: string;
+    /**
+     * The filters to apply.
+     */
+    filters: Filter[];
+    /**
+     * The sorting configuration.
+     */
+    sort?: {
+        /**
+         * The field to sort by.
+         */
+        field: string;
+        /**
+         * The direction to sort by.
+         */
+        direction: string;
+    };
+    /**
+     * The active page
+     */
+    page?: number;
+    /**
+     * The number of items per page
+     */
+    perPage?: number;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build-types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,IAAI,GAAG,MAAM,CAAE,MAAM,EAAE,GAAG,CAAE,CAAC;AAElC,UAAU,MAAM;IACf,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACd;AAED,UAAU,cAAc;IACvB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,QAAQ,GAAG,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAE3E,MAAM,WAAW,KAAK;IACrB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,KAAM,GAAG,CAAC;IAE/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAE,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,KAAM,SAAS,CAAC;IAEnD;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAEnC;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAEtC;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAEtC;;OAEG;IACH,aAAa,EAAE,OAAO,GAAG,SAAS,CAAC;IAEnC;;OAEG;IACH,kBAAkB,EAAE,OAAO,GAAG,SAAS,CAAC;IAExC;;OAEG;IACH,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAElC;;OAEG;IACH,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAE/B;;OAEG;IACH,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAE,KAAK,CAAE,CAAC;AAEhD,MAAM,MAAM,IAAI,GAAG,IAAI,EAAE,CAAC;AAE1B,MAAM,WAAW,MAAM;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC;CACX;AAED,MAAM,WAAW,IAAI;IACpB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE;QACN;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "0.9.0",
+	"version": "1.1.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,15 +29,15 @@
 	"dependencies": {
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.55.0",
-		"@wordpress/components": "^27.3.0",
-		"@wordpress/compose": "^6.32.0",
-		"@wordpress/element": "^5.32.0",
-		"@wordpress/i18n": "^4.55.0",
-		"@wordpress/icons": "^9.46.0",
-		"@wordpress/keycodes": "^3.55.0",
-		"@wordpress/primitives": "^3.53.0",
-		"@wordpress/private-apis": "^0.37.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/primitives": "^3.55.0",
+		"@wordpress/private-apis": "^0.39.0",
 		"classnames": "^2.3.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

package/src/{constants.js → constants.ts}

@@ -1,20 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, isRTL } from '@wordpress/i18n';
-import {
-	blockTable,
-	category,
-	formatListBullets,
-	formatListBulletsRTL,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import ViewTable from './view-table';
-import ViewGrid from './view-grid';
-import ViewList from './view-list';
+import { __ } from '@wordpress/i18n';
 
 // Filter operators.
 export const OPERATOR_IS = 'is';
@@ -69,24 +56,3 @@ export const SORTING_DIRECTIONS = {
 export const LAYOUT_TABLE = 'table';
 export const LAYOUT_GRID = 'grid';
 export const LAYOUT_LIST = 'list';
-
-export const VIEW_LAYOUTS = [
-	{
-		type: LAYOUT_TABLE,
-		label: __( 'Table' ),
-		component: ViewTable,
-		icon: blockTable,
-	},
-	{
-		type: LAYOUT_GRID,
-		label: __( 'Grid' ),
-		component: ViewGrid,
-		icon: category,
-	},
-	{
-		type: LAYOUT_LIST,
-		label: __( 'List' ),
-		component: ViewList,
-		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
-	},
-];

package/src/dataviews.js

@@ -11,7 +11,8 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
-import { VIEW_LAYOUTS, LAYOUT_TABLE, LAYOUT_GRID } from './constants';
+import { LAYOUT_TABLE, LAYOUT_GRID } from './constants';
+import { VIEW_LAYOUTS } from './layouts';
 import BulkActions from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 
@@ -41,8 +42,6 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 	onSelectionChange = defaultOnSelectionChange,
-	onDetailsChange = null,
-	deferredRendering = false,
 } ) {
 	const [ selection, setSelection ] = useState( [] );
 	const [ openedFilter, setOpenedFilter ] = useState( null );
@@ -136,9 +135,7 @@ export default function DataViews( {
 				getItemId={ getItemId }
 				isLoading={ isLoading }
 				onSelectionChange={ onSetSelection }
-				onDetailsChange={ onDetailsChange }
 				selection={ selection }
-				deferredRendering={ deferredRendering }
 				setOpenedFilter={ setOpenedFilter }
 			/>
 			<Pagination

package/src/filter-and-sort-data-view.ts

@@ -0,0 +1,164 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Internal dependencies
+ */
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+} from './constants';
+import { normalizeFields } from './normalize-fields';
+import type { Data, Field, View } from './types';
+
+function normalizeSearchInput( input = '' ) {
+	return removeAccents( input.trim().toLowerCase() );
+}
+
+const EMPTY_ARRAY: Data = [];
+
+/**
+ * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
+ *
+ * @param data   Raw data.
+ * @param view   View config.
+ * @param fields Fields config.
+ *
+ * @return Filtered, sorted and paginated data.
+ */
+export function filterSortAndPaginate(
+	data: Data,
+	view: View,
+	fields: Field[]
+): { data: Data; paginationInfo: { totalItems: number; totalPages: number } } {
+	if ( ! data ) {
+		return {
+			data: EMPTY_ARRAY,
+			paginationInfo: { totalItems: 0, totalPages: 0 },
+		};
+	}
+	const _fields = normalizeFields( fields );
+	let filteredData = [ ...data ];
+	// Handle global search.
+	if ( view.search ) {
+		const normalizedSearch = normalizeSearchInput( view.search );
+		filteredData = filteredData.filter( ( item ) => {
+			return _fields
+				.filter( ( field ) => field.enableGlobalSearch )
+				.map( ( field ) => {
+					return normalizeSearchInput( field.getValue( { item } ) );
+				} )
+				.some( ( field ) => field.includes( normalizedSearch ) );
+		} );
+	}
+
+	if ( view.filters.length > 0 ) {
+		view.filters.forEach( ( filter ) => {
+			const field = _fields.find(
+				( _field ) => _field.id === filter.field
+			);
+			if ( field ) {
+				if (
+					filter.operator === OPERATOR_IS_ANY &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						if ( Array.isArray( fieldValue ) ) {
+							return filter.value.some( ( filterValue: any ) =>
+								fieldValue.includes( filterValue )
+							);
+						} else if ( typeof fieldValue === 'string' ) {
+							return filter.value.includes( fieldValue );
+						}
+						return false;
+					} );
+				} else if (
+					filter.operator === OPERATOR_IS_NONE &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						if ( Array.isArray( fieldValue ) ) {
+							return ! filter.value.some( ( filterValue: any ) =>
+								fieldValue.includes( filterValue )
+							);
+						} else if ( typeof fieldValue === 'string' ) {
+							return ! filter.value.includes( fieldValue );
+						}
+						return false;
+					} );
+				} else if (
+					filter.operator === OPERATOR_IS_ALL &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value.every( ( value: any ) => {
+							return field.getValue( { item } ).includes( value );
+						} );
+					} );
+				} else if (
+					filter.operator === OPERATOR_IS_NOT_ALL &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value.every( ( value: any ) => {
+							return ! field
+								.getValue( { item } )
+								.includes( value );
+						} );
+					} );
+				} else if ( filter.operator === OPERATOR_IS ) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value === field.getValue( { item } );
+					} );
+				} else if ( filter.operator === OPERATOR_IS_NOT ) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value !== field.getValue( { item } );
+					} );
+				}
+			}
+		} );
+	}
+
+	// Handle sorting.
+	if ( view.sort ) {
+		const fieldId = view.sort.field;
+		const fieldToSort = _fields.find( ( field ) => {
+			return field.id === fieldId;
+		} );
+		if ( fieldToSort ) {
+			filteredData.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 );
+			} );
+		}
+	}
+
+	// Handle pagination.
+	let totalItems = filteredData.length;
+	let totalPages = 1;
+	if ( view.page !== undefined && view.perPage !== undefined ) {
+		const start = ( view.page - 1 ) * view.perPage;
+		totalItems = filteredData?.length || 0;
+		totalPages = Math.ceil( totalItems / view.perPage );
+		filteredData = filteredData?.slice( start, start + view.perPage );
+	}
+
+	return {
+		data: filteredData,
+		paginationInfo: {
+			totalItems,
+			totalPages,
+		},
+	};
+}

package/src/filter-summary.js

@@ -18,7 +18,9 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef, createInterpolateElement } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
-import { ENTER, SPACE } from '@wordpress/keycodes';
+
+const ENTER = 'Enter';
+const SPACE = ' ';
 
 /**
  * Internal dependencies
@@ -229,9 +231,7 @@ export default function FilterSummary( {
 							tabIndex={ 0 }
 							onClick={ onToggle }
 							onKeyDown={ ( event ) => {
-								if (
-									[ ENTER, SPACE ].includes( event.keyCode )
-								) {
+								if ( [ ENTER, SPACE ].includes( event.key ) ) {
 									onToggle();
 									event.preventDefault();
 								}

package/src/index.js

@@ -1,3 +1,3 @@
 export { default as DataViews } from './dataviews';
-export { VIEW_LAYOUTS } from './constants';
+export { VIEW_LAYOUTS } from './layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';

package/src/layouts.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockTable,
+	category,
+	formatListBullets,
+	formatListBulletsRTL,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ViewTable from './view-table';
+import ViewGrid from './view-grid';
+import ViewList from './view-list';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from './constants';
+
+export const VIEW_LAYOUTS = [
+	{
+		type: LAYOUT_TABLE,
+		label: __( 'Table' ),
+		component: ViewTable,
+		icon: blockTable,
+	},
+	{
+		type: LAYOUT_GRID,
+		label: __( 'Grid' ),
+		component: ViewGrid,
+		icon: category,
+	},
+	{
+		type: LAYOUT_LIST,
+		label: __( 'List' ),
+		component: ViewList,
+		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
+	},
+];

package/src/normalize-fields.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { Field, NormalizedField } from './types';
+
+/**
+ * Apply default values and normalize the fields config.
+ *
+ * @param fields Fields config.
+ * @return Normalized fields config.
+ */
+export function normalizeFields( fields: Field[] ): NormalizedField[] {
+	return fields.map( ( field ) => {
+		const getValue = field.getValue || ( ( { item } ) => item[ field.id ] );
+
+		return {
+			...field,
+			header: field.header || field.id,
+			getValue,
+			render: field.render || getValue,
+		};
+	} );
+}

package/src/search-widget.js

@@ -39,6 +39,7 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
+const EMPTY_ARRAY = [];
 const getCurrentValue = ( filterDefinition, currentFilter ) => {
 	if ( filterDefinition.singleSelection ) {
 		return currentFilter?.value;
@@ -52,7 +53,7 @@ const getCurrentValue = ( filterDefinition, currentFilter ) => {
 		return [ currentFilter.value ];
 	}
 
-	return [];
+	return EMPTY_ARRAY;
 };
 
 const getNewValue = ( filterDefinition, currentFilter, value ) => {
@@ -73,7 +74,7 @@ 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.
+		// When we have no or just one operator, 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,
@@ -198,7 +199,7 @@ function ComboboxList( { view, filter, onChangeView } ) {
 	}, [ filter.elements, deferredSearchValue ] );
 	return (
 		<Ariakit.ComboboxProvider
-			value={ searchValue }
+			resetValueOnSelect={ false }
 			selectedValue={ currentValue }
 			setSelectedValue={ ( value ) => {
 				const newFilters = currentFilter

package/src/single-selection-checkbox.js

@@ -32,7 +32,7 @@ export default function SingleSelectionCheckbox( {
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
 			__nextHasNoMarginBottom
-			label={ selectionLabel }
+			aria-label={ selectionLabel }
 			aria-disabled={ disabled }
 			checked={ isSelected }
 			onChange={ () => {

package/src/stories/fixtures.js

@@ -171,7 +171,6 @@ export const fields = [
 		id: 'type',
 		maxWidth: 400,
 		enableHiding: false,
-		type: 'enumeration',
 		elements: [
 			{ value: 'Not a planet', label: 'Not a planet' },
 			{ value: 'Ice giant', label: 'Ice giant' },
@@ -189,7 +188,6 @@ export const fields = [
 	{
 		header: 'Categories',
 		id: 'categories',
-		type: 'enumeration',
 		elements: [
 			{ value: 'Space', label: 'Space' },
 			{ value: 'NASA', label: 'NASA' },