@wordpress/dataviews 1.0.0 → 1.1.0

package/build-style/style.css

@@ -371,37 +371,46 @@
   }
 }
 .dataviews-view-grid .dataviews-view-grid__card {
-  border-radius: 4px;
-  border: 1px solid #e0e0e0;
   height: 100%;
   justify-content: flex-start;
 }
 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions {
-  padding: 4px 8px 4px 4px;
+  padding: 8px 0 4px;
 }
 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field {
-  min-height: 40px;
-}
-.dataviews-view-grid .dataviews-view-grid__card.is-selected {
-  border-color: var(--wp-admin-theme-color);
-  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  min-height: 32px;
 }
 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
+.dataviews-view-grid .dataviews-view-grid__card.is-selected .page-pages-preview-field__button::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+}
 .dataviews-view-grid .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
-  border-bottom: 1px solid #e0e0e0;
   background-color: #f0f0f0;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
 }
 .dataviews-view-grid .dataviews-view-grid__media img {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
+.dataviews-view-grid .dataviews-view-grid__media::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
 .dataviews-view-grid .dataviews-view-grid__fields {
   position: relative;
   font-size: 12px;
@@ -410,7 +419,6 @@
 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
   padding: 12px 0;
   padding-top: 0;
-  margin: 0 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
   align-items: flex-start;
@@ -431,8 +439,7 @@
   color: #757575;
 }
 .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
-  padding: 12px;
-  padding-top: 0;
+  padding-bottom: 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value {
   width: -moz-fit-content;
@@ -595,10 +602,6 @@
   flex-shrink: 0;
 }
 
-.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
-  margin-left: 8px;
-}
-
 .dataviews-filter-summary__popover .components-popover__content {
   width: 230px;
   padding: 0;

package/build-types/constants.d.ts

@@ -0,0 +1,45 @@
+export declare const OPERATOR_IS = "is";
+export declare const OPERATOR_IS_NOT = "isNot";
+export declare const OPERATOR_IS_ANY = "isAny";
+export declare const OPERATOR_IS_NONE = "isNone";
+export declare const OPERATOR_IS_ALL = "isAll";
+export declare const OPERATOR_IS_NOT_ALL = "isNotAll";
+export declare const ALL_OPERATORS: string[];
+export declare const OPERATORS: {
+    is: {
+        key: string;
+        label: string;
+    };
+    isNot: {
+        key: string;
+        label: string;
+    };
+    isAny: {
+        key: string;
+        label: string;
+    };
+    isNone: {
+        key: string;
+        label: string;
+    };
+    isAll: {
+        key: string;
+        label: string;
+    };
+    isNotAll: {
+        key: string;
+        label: string;
+    };
+};
+export declare const SORTING_DIRECTIONS: {
+    asc: {
+        label: string;
+    };
+    desc: {
+        label: string;
+    };
+};
+export declare const LAYOUT_TABLE = "table";
+export declare const LAYOUT_GRID = "grid";
+export declare const LAYOUT_LIST = "list";
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,OAAO,CAAC;AAChC,eAAO,MAAM,eAAe,UAAU,CAAC;AACvC,eAAO,MAAM,eAAe,UAAU,CAAC;AACvC,eAAO,MAAM,gBAAgB,WAAW,CAAC;AACzC,eAAO,MAAM,eAAe,UAAU,CAAC;AACvC,eAAO,MAAM,mBAAmB,aAAa,CAAC;AAE9C,eAAO,MAAM,aAAa,UAOzB,CAAC;AACF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,CAAC;AAGF,eAAO,MAAM,kBAAkB;;;;;;;CAG9B,CAAC;AAGF,eAAO,MAAM,YAAY,UAAU,CAAC;AACpC,eAAO,MAAM,WAAW,SAAS,CAAC;AAClC,eAAO,MAAM,WAAW,SAAS,CAAC"}

package/build-types/filter-and-sort-data-view.d.ts

@@ -0,0 +1,18 @@
+import type { Data, Field, View } from './types';
+/**
+ * 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 declare function filterSortAndPaginate(data: Data, view: View, fields: Field[]): {
+    data: Data;
+    paginationInfo: {
+        totalItems: number;
+        totalPages: number;
+    };
+};
+//# sourceMappingURL=filter-and-sort-data-view.d.ts.map

package/build-types/filter-and-sort-data-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-and-sort-data-view.d.ts","sourceRoot":"","sources":["../src/filter-and-sort-data-view.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAQjD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,KAAK,EAAE,GACb;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,cAAc,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CA6H5E"}

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": "1.0.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.56.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/primitives": "^3.54.0",
-		"@wordpress/private-apis": "^0.38.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": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"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';
 

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/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/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' },