@wordpress/dataviews 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 0.6.0 (2024-02-21)
+
 ## 0.5.0 (2024-02-09)
 
 ## 0.4.0 (2024-01-24)

package/README.md

@@ -12,85 +12,147 @@ npm install @wordpress/dataviews --save
 
 ## Usage
 
-```js
-<DataViews
-	data={ data }
-	paginationInfo={ { totalItems, totalPages } }
-	view={ view }
-	onChangeView={ onChangeView }
-	fields={ fields }
-	actions={ [ trashPostAction ] }
-	search={ false }
-	searchLabel="Filter list"
-	getItemId={ ( item ) => item.id }
-	isLoading={ isLoadingData }
-	supportedLayouts={ [ 'table' ] }
-	deferredRendering={ true }
-	onSelectionChange={ ( items ) => { /* ... */ } }
-/>
+```jsx
+const Example = () => {
+
+	// Declare data, fields, etc.
+
+	return (
+		<DataViews
+			data={ data }
+			fields={ fields }
+			view={ view }
+			onChangeView={ onChangeView }
+			actions={ actions }
+			paginationInfo={ paginationInfo }
+		/>
+	);
+}
 ```
 
-## Data
+## Properties
+
+### `data`: `Object[]`
 
 The dataset to work with, represented as a one-dimensional array.
 
 Example:
 
 ```js
-[
-	{ id: 1, title: "Title", ... },
-	{ ... }
+const data = [
+	{
+		id: 1,
+		title: "Title",
+		author: "Admin",
+		date: "2012-04-23T18:25:43.511Z"
+	},
+	{ /* ... */ }
 ]
 ```
 
-By default, dataviews would use each record's `id` as an unique identifier. If it's not, the consumer should provide a `getItemId` function that returns one. See "Other props" section.
+By default, dataviews would use each record's `id` as an unique identifier. If it's not, the consumer should provide a `getItemId` function that returns one.
 
-## Pagination Info
+### `fields`: `Object[]`
 
-- `totalItems`: the total number of items in the datasets.
-- `totalPages`: the total number of pages, taking into account the total items in the dataset and the number of items per page provided by the user.
+The fields describe the visible items for each record in the dataset.
 
-## View
+Example:
+
+```js
+const fields = [
+	{
+		id: 'title',
+		header: 'Title',
+		getValue: ({ item }) => item.title,
+		enableHiding: false,
+	},
+	{
+		id: 'date',
+		header: 'Date',
+		getValue: ( { item } ) => item.date,
+		render: ( { item } ) => {
+			return (
+				<time>{ getFormattedDate( item.date ) }</time>
+			);
+		}
+	},
+	{
+		id: 'author',
+		header: __( 'Author' ),
+		getValue: ( { item } ) => item.author,
+		render: ( { item } ) => {
+			return (
+				<a href="...">{ item.author }</a>
+			);
+		},
+		type: 'enumeration',
+		elements: [
+			{ value: 1, label: 'Admin' }
+			{ value: 2, label: 'User' }
+		]
+		enableSorting: false
+	}
+]
+```
+
+Each field is an object with the following properties:
+
+-   `id`: identifier for the field. Unique.
+-   `header`: the field's name to be shown in the UI.
+-   `getValue`: function that returns the value of the field.
+-   `render`: function that renders the field. Optional, `getValue` will be used if `render` is not defined.
+-   `elements`: the set of valid values for the field's value.
+-   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment. See "Field types".
+-   `enableSorting`: whether the data can be sorted by the given field. True by default.
+-   `enableHiding`: whether the field can be hidden. True by default.
+-   `filterBy`: configuration for the filters.
+    - `operators`: the list of operators supported by the field.
+    - `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
+
+### `view`: `object`
 
 The view object configures how the dataset is visible to the user.
 
 Example:
 
 ```js
-{
+const view = {
 	type: 'table',
-	perPage: 5,
-	page: 1,
-	sort: {
-		field: 'date',
-		direction: 'desc',
-	},
 	search: '',
 	filters: [
 		{ field: 'author', operator: 'in', value: 2 },
 		{ field: 'status', operator: 'in', value: 'publish,draft' }
 	],
+	page: 1,
+	perPage: 5,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {},
 }
 ```
 
--   `type`: view type, one of `table`, `grid`, `list`. See "View types".
--   `perPage`: number of records to show per page.
--   `page`: the page that is visible.
--   `sort.field`: field used for sorting the dataset.
--   `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
+Properties:
+
+-   `type`: view type, one of `table`, `grid`, `list`. See "Layout types".
 -   `search`: the text search applied to the dataset.
 -   `filters`: the filters applied to the dataset. Each item describes:
     -   `field`: which field this filter is bound to.
     -   `operator`: which type of filter it is. One of `in`, `notIn`. See "Operator types".
     -   `value`: the actual value selected by the user.
+-   `perPage`: number of records to show per page.
+-   `page`: the page that is visible.
+-   `sort`:
+	- `field`: the field used for sorting the dataset.
+	- `direction`: the direction to use for sorting, one of `asc` or `desc`.
 -   `hiddenFields`: the `id` of the fields that are hidden in the UI.
 -   `layout`: config that is specific to a particular layout type.
     -   `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media.
-    -   `primaryField`: used by the `grid` and `list` layouts. The `id` of the field to be highlighted in each card/list item.
+    -   `primaryField`: used by the `table`, `grid` and `list` layouts. The `id` of the field to be highlighted in each row/card/item.
 
-### onChangeView: syncing view and data
+### `onChangeView`: `function`
 
 The view is a representation of the visible state of the dataset: what type of layout is used to display it (table, grid, etc.), how the dataset is filtered, how it is sorted or paginated.
 
@@ -147,65 +209,17 @@ function MyCustomPageTable() {
 			data={ records }
 			view={ view }
 			onChangeView={ setView }
-			"..."
+			// ...
 		/>
 	);
 }
 ```
 
-## Fields
-
-The fields describe the visible items for each record in the dataset.
-
-Example:
-
-```js
-[
-	{
-		id: 'date',
-		header: __( 'Date' ),
-		getValue: ( { item } ) => item.date,
-		render: ( { item } ) => {
-			return (
-				<time>{ getFormattedDate( item.date ) }</time>
-			);
-		},
-		enableHiding: false
-	},
-	{
-		id: 'author',
-		header: __( 'Author' ),
-		getValue: ( { item } ) => item.author,
-		render: ( { item } ) => {
-			return (
-				<a href="...">{ item.author }</a>
-			);
-		},
-		type: 'enumeration',
-		elements: [
-			{ value: 1, label: 'Admin' }
-			{ value: 2, label: 'User' }
-		]
-		enableSorting: false
-	}
-]
-```
-
--   `id`: identifier for the field. Unique.
--   `header`: the field's name to be shown in the UI.
--   `getValue`: function that returns the value of the field.
--   `render`: function that renders the field.
--   `elements`: the set of valid values for the field's value.
--   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment. See "Field types".
--   `enableSorting`: whether the data can be sorted by the given field. True by default.
--   `enableHiding`: whether the field can be hidden. True by default.
--   `filterBy`: configuration for the filters.
-    - `operators`: the list of operators supported by the field.
-    - `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
+### `actions`: `Object[]`
 
-## Actions
+Collection of operations that can be performed upon each record.
 
-Array of operations that can be performed upon each record. Each action is an object with the following properties:
+Each action is an object with the following properties:
 
 -   `id`: string, required. Unique identifier of the action. For example, `move-to-trash`.
 -   `label`: string, required. User facing description of the action. For example, `Move to Trash`.
@@ -217,28 +231,59 @@ Array of operations that can be performed upon each record. Each action is an ob
 -   `RenderModal`: ReactElement, optional. If an action requires that some UI be rendered in a modal, it can provide a component which takes as props the record as `item` and a `closeModal` function. When this prop is provided, the `callback` property is ignored.
 -   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.
 
+### `paginationInfo`: `Object`
+
+- `totalItems`: the total number of items in the datasets.
+- `totalPages`: the total number of pages, taking into account the total items in the dataset and the number of items per page provided by the user.
+
+### `search`: `boolean`
+
+Whether the search input is enabled. `true` by default.
+
+### `searchLabel`: `string`
+
+What text to show in the search input. "Search" by default.
+
+### `getItemId`: `function`
+
+Function that receives an item and returns an unique identifier for it. By default, it uses the `id` of the item as unique identifier. If it's not, the consumer should provide their own.
+
+### `isLoading`: `boolean`
+
+Whether the data is loading. `false` by default.
+
+### `supportedLayouts`: `String[]`
+
+Array of layouts supported. By default, all are: `table`, `grid`, `list`.
+
+### `deferredRendering`: `boolean`
+
+Whether the items should be rendered asynchronously. Useful when there's a field that takes a lot of time (e.g.: previews). `false` by default.
+
+### `onSelectionChange`: `function`
+
+Callback that signals the user selected one of more items, and takes them as parameter. So far, only the `list` view implements it.
+
+### `onDetailsChange`: `function`
+
+Callback that signals the user triggered the details for one of more items, and takes them as paremeter. So far, only the `list` view implements it.
+
 ## Types
 
-- Layout types:
-    - `table`: the view uses a table layout.
-    - `grid`: the view uses a grid layout.
-    - `list`: the view uses a list layout.
-- Field types:
-    - `enumeration`: the field value should be taken and can be filtered from a closed list of elements.
-- Operator types:
-    - `in`: operator to be used in filters for fields of type `enumeration`.
-    - `notIn`: operator to be used in filters for fields of type `enumeration`.
-
-## Other properties
-
-- `search`: whether the search input is enabled. `true` by default.
-- `searchLabel`: what text to show in the search input. "Filter list" by default.
-- `getItemId`: function that receives an item and returns an unique identifier for it. By default, it uses the `id` of the item as unique identifier. If it's not, the consumer should provide their own.
-- `isLoading`: whether the data is loading. `false` by default.
-- `supportedLayouts`: array of layouts supported. By default, all are: `table`, `grid`, `list`.
-- `deferredRendering`: whether the items should be rendered asynchronously. Useful when there's a field that takes a lot of time (e.g.: previews). `false` by default.
-- `onSelectionChange`: callback that signals the user selected one of more items, and takes them as parameter. So far, only the `list` view implements it.
-- `onDetailsChange`: callback that signals the user triggered the details for one of more items, and takes them as paremeter. So far, only the `list` view implements it.
+### Layouts
+
+- `table`: the view uses a table layout.
+- `grid`: the view uses a grid layout.
+- `list`: the view uses a list layout.
+
+### Fields
+
+- `enumeration`: the field value should be taken and can be filtered from a closed list of elements.
+
+### Operators
+
+- `in`: operator to be used in filters for fields of type `enumeration`.
+- `notIn`: operator to be used in filters for fields of type `enumeration`.
 
 ## Contributing to this package
 

package/build/view-grid.js

@@ -8,6 +8,7 @@ exports.default = ViewGrid;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _itemActions = _interopRequireDefault(require("./item-actions"));
@@ -116,6 +117,7 @@ function ViewGrid({
   fields,
   view,
   actions,
+  isLoading,
   getItemId,
   deferredRendering,
   selection,
@@ -128,11 +130,13 @@ function ViewGrid({
     step: 3
   });
   const usedData = deferredRendering ? shownData : data;
-  return (0, _react.createElement)(_components.__experimentalGrid, {
+  const hasData = !!usedData?.length;
+  return (0, _react.createElement)(_react.Fragment, null, hasData && (0, _react.createElement)(_components.__experimentalGrid, {
     gap: 6,
     columns: 2,
     alignment: "top",
-    className: "dataviews-view-grid"
+    className: "dataviews-view-grid",
+    "aria-busy": isLoading
   }, usedData.map(item => {
     return (0, _react.createElement)(GridItem, {
       key: getItemId(item),
@@ -146,6 +150,11 @@ function ViewGrid({
       primaryField: primaryField,
       visibleFields: visibleFields
     });
-  }));
+  })), !hasData && (0, _react.createElement)("div", {
+    className: (0, _classnames.default)({
+      'dataviews-loading': isLoading,
+      'dataviews-no-results': !isLoading
+    })
+  }, (0, _react.createElement)("p", null, isLoading ? (0, _i18n.__)('Loading…') : (0, _i18n.__)('No results'))));
 }
 //# sourceMappingURL=view-grid.js.map

package/build/view-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_compose","_element","_itemActions","_singleSelectionCheckbox","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","hasNoPointerEvents","setHasNoPointerEvents","useState","id","isSelected","includes","_react","createElement","__experimentalVStack","spacing","key","className","classnames","onMouseDown","event","ctrlKey","metaKey","filter","_item","itemId","onClick","render","__experimentalHStack","justify","default","isCompact","map","field","renderedValue","Tooltip","text","header","placement","ViewGrid","fields","view","deferredRendering","find","layout","hiddenFields","shownData","useAsyncList","step","usedData","__experimentalGrid","gap","columns","alignment"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tTooltip,\n} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n} ) {\n\tconst [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'has-no-pointer-events': hasNoPointerEvents,\n\t\t\t} ) }\n\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tsetHasNoPointerEvents( true );\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( hasNoPointerEvents ) {\n\t\t\t\t\tsetHasNoPointerEvents( false );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\titem,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ field.header } placement=\"left\">\n\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-value\">\n\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tgetItemId,\n\tdeferredRendering,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\treturn (\n\t\t<Grid\n\t\t\tgap={ 6 }\n\t\t\tcolumns={ 2 }\n\t\t\talignment=\"top\"\n\t\t\tclassName=\"dataviews-view-grid\"\n\t\t>\n\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<GridItem\n\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_compose","_element","_itemActions","_singleSelectionCheckbox","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","hasNoPointerEvents","setHasNoPointerEvents","useState","id","isSelected","includes","_react","createElement","__experimentalVStack","spacing","key","className","classnames","onMouseDown","event","ctrlKey","metaKey","filter","_item","itemId","onClick","render","__experimentalHStack","justify","default","isCompact","map","field","renderedValue","Tooltip","text","header","placement","ViewGrid","fields","view","isLoading","deferredRendering","find","layout","hiddenFields","shownData","useAsyncList","step","usedData","hasData","length","Fragment","__experimentalGrid","gap","columns","alignment","__"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useAsyncList } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n} ) {\n\tconst [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'has-no-pointer-events': hasNoPointerEvents,\n\t\t\t} ) }\n\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tsetHasNoPointerEvents( true );\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( hasNoPointerEvents ) {\n\t\t\t\t\tsetHasNoPointerEvents( false );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\titem,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ field.header } placement=\"left\">\n\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-value\">\n\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tisLoading,\n\tgetItemId,\n\tdeferredRendering,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst hasData = !! usedData?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 6 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,YAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,wBAAA,GAAAP,sBAAA,CAAAC,OAAA;AAtBA;AACA;AACA;;AAGA;AACA;AACA;;AAWA;AACA;AACA;;AAIA,SAASO,QAAQA,CAAE;EAClBC,SAAS;EACTC,IAAI;EACJC,iBAAiB;EACjBC,SAAS;EACTC,IAAI;EACJC,OAAO;EACPC,UAAU;EACVC,YAAY;EACZC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,kBAAkB,EAAEC,qBAAqB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EACvE,MAAMC,EAAE,GAAGT,SAAS,CAAEC,IAAK,CAAC;EAC5B,MAAMS,UAAU,GAAGb,SAAS,CAACc,QAAQ,CAAEF,EAAG,CAAC;EAC3C,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACvB,WAAA,CAAAwB,oBAAM;IACNC,OAAO,EAAG,CAAG;IACbC,GAAG,EAAGP,EAAI;IACVQ,SAAS,EAAG,IAAAC,mBAAU,EAAE,2BAA2B,EAAE;MACpD,aAAa,EAAER,UAAU;MACzB,uBAAuB,EAAEJ;IAC1B,CAAE,CAAG;IACLa,WAAW,EAAKC,KAAK,IAAM;MAC1B,IAAKA,KAAK,CAACC,OAAO,IAAID,KAAK,CAACE,OAAO,EAAG;QACrCf,qBAAqB,CAAE,IAAK,CAAC;QAC7B,IAAK,CAAEG,UAAU,EAAG;UACnBX,iBAAiB,CAChBD,IAAI,CAACyB,MAAM,CAAIC,KAAK,IAAM;YACzB,MAAMC,MAAM,GAAGzB,SAAS,GAAIwB,KAAM,CAAC;YACnC,OACCC,MAAM,KAAKhB,EAAE,IACbZ,SAAS,CAACc,QAAQ,CAAEc,MAAO,CAAC;UAE9B,CAAE,CACH,CAAC;QACF,CAAC,MAAM;UACN1B,iBAAiB,CAChBD,IAAI,CAACyB,MAAM,CAAIC,KAAK,IAAM;YACzB,MAAMC,MAAM,GAAGzB,SAAS,GAAIwB,KAAM,CAAC;YACnC,OACCC,MAAM,KAAKhB,EAAE,IACbZ,SAAS,CAACc,QAAQ,CAAEc,MAAO,CAAC;UAE9B,CAAE,CACH,CAAC;QACF;MACD;IACD,CAAG;IACHC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKpB,kBAAkB,EAAG;QACzBC,qBAAqB,CAAE,KAAM,CAAC;MAC/B;IACD;EAAG,GAEH,IAAAK,MAAA,CAAAC,aAAA;IAAKI,SAAS,EAAC;EAA4B,GACxCd,UAAU,EAAEwB,MAAM,CAAE;IAAE1B;EAAK,CAAE,CAC3B,CAAC,EACN,IAAAW,MAAA,CAAAC,aAAA,EAACvB,WAAA,CAAAsC,oBAAM;IACNC,OAAO,EAAC,eAAe;IACvBZ,SAAS,EAAC;EAAoC,GAE9C,IAAAL,MAAA,CAAAC,aAAA,EAAClB,wBAAA,CAAAmC,OAAuB;IACvBrB,EAAE,EAAGA,EAAI;IACTR,IAAI,EAAGA,IAAM;IACbJ,SAAS,EAAGA,SAAW;IACvBE,iBAAiB,EAAGA,iBAAmB;IACvCC,SAAS,EAAGA,SAAW;IACvBF,IAAI,EAAGA,IAAM;IACbM,YAAY,EAAGA;EAAc,CAC7B,CAAC,EACF,IAAAQ,MAAA,CAAAC,aAAA,EAACvB,WAAA,CAAAsC,oBAAM;IAACX,SAAS,EAAC;EAAoC,GACnDb,YAAY,EAAEuB,MAAM,CAAE;IAAE1B;EAAK,CAAE,CAC1B,CAAC,EACT,IAAAW,MAAA,CAAAC,aAAA,EAACnB,YAAA,CAAAoC,OAAW;IAAC7B,IAAI,EAAGA,IAAM;IAACC,OAAO,EAAGA,OAAS;IAAC6B,SAAS;EAAA,CAAE,CACnD,CAAC,EACT,IAAAnB,MAAA,CAAAC,aAAA,EAACvB,WAAA,CAAAwB,oBAAM;IAACG,SAAS,EAAC,6BAA6B;IAACF,OAAO,EAAG;EAAG,GAC1DV,aAAa,CAAC2B,GAAG,CAAIC,KAAK,IAAM;IACjC,MAAMC,aAAa,GAAGD,KAAK,CAACN,MAAM,CAAE;MACnC1B;IACD,CAAE,CAAC;IACH,IAAK,CAAEiC,aAAa,EAAG;MACtB,OAAO,IAAI;IACZ;IACA,OACC,IAAAtB,MAAA,CAAAC,aAAA,EAACvB,WAAA,CAAAwB,oBAAM;MACNG,SAAS,EAAC,4BAA4B;MACtCD,GAAG,EAAGiB,KAAK,CAACxB,EAAI;MAChBM,OAAO,EAAG;IAAG,GAEb,IAAAH,MAAA,CAAAC,aAAA,EAACvB,WAAA,CAAA6C,OAAO;MAACC,IAAI,EAAGH,KAAK,CAACI,MAAQ;MAACC,SAAS,EAAC;IAAM,GAC9C,IAAA1B,MAAA,CAAAC,aAAA;MAAKI,SAAS,EAAC;IAAkC,GAC9CiB,aACE,CACG,CACF,CAAC;EAEX,CAAE,CACK,CACD,CAAC;AAEX;AAEe,SAASK,QAAQA,CAAE;EACjCzC,IAAI;EACJ0C,MAAM;EACNC,IAAI;EACJvC,OAAO;EACPwC,SAAS;EACT1C,SAAS;EACT2C,iBAAiB;EACjB9C,SAAS;EACTE;AACD,CAAC,EAAG;EACH,MAAMI,UAAU,GAAGqC,MAAM,CAACI,IAAI,CAC3BX,KAAK,IAAMA,KAAK,CAACxB,EAAE,KAAKgC,IAAI,CAACI,MAAM,CAAC1C,UACvC,CAAC;EACD,MAAMC,YAAY,GAAGoC,MAAM,CAACI,IAAI,CAC7BX,KAAK,IAAMA,KAAK,CAACxB,EAAE,KAAKgC,IAAI,CAACI,MAAM,CAACzC,YACvC,CAAC;EACD,MAAMC,aAAa,GAAGmC,MAAM,CAACjB,MAAM,CAChCU,KAAK,IACN,CAAEQ,IAAI,CAACK,YAAY,CAACnC,QAAQ,CAAEsB,KAAK,CAACxB,EAAG,CAAC,IACxC,CAAE,CAAEgC,IAAI,CAACI,MAAM,CAAC1C,UAAU,EAAEsC,IAAI,CAACI,MAAM,CAACzC,YAAY,CAAE,CAACO,QAAQ,CAC9DsB,KAAK,CAACxB,EACP,CACF,CAAC;EACD,MAAMsC,SAAS,GAAG,IAAAC,qBAAY,EAAElD,IAAI,EAAE;IAAEmD,IAAI,EAAE;EAAE,CAAE,CAAC;EACnD,MAAMC,QAAQ,GAAGP,iBAAiB,GAAGI,SAAS,GAAGjD,IAAI;EACrD,MAAMqD,OAAO,GAAG,CAAC,CAAED,QAAQ,EAAEE,MAAM;EACnC,OACC,IAAAxC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAyC,QAAA,QACGF,OAAO,IACR,IAAAvC,MAAA,CAAAC,aAAA,EAACvB,WAAA,CAAAgE,kBAAI;IACJC,GAAG,EAAG,CAAG;IACTC,OAAO,EAAG,CAAG;IACbC,SAAS,EAAC,KAAK;IACfxC,SAAS,EAAC,qBAAqB;IAC/B,aAAYyB;EAAW,GAErBQ,QAAQ,CAAClB,GAAG,CAAI/B,IAAI,IAAM;IAC3B,OACC,IAAAW,MAAA,CAAAC,aAAA,EAACjB,QAAQ;MACRoB,GAAG,EAAGhB,SAAS,CAAEC,IAAK,CAAG;MACzBJ,SAAS,EAAGA,SAAW;MACvBC,IAAI,EAAGA,IAAM;MACbC,iBAAiB,EAAGA,iBAAmB;MACvCC,SAAS,EAAGA,SAAW;MACvBC,IAAI,EAAGA,IAAM;MACbC,OAAO,EAAGA,OAAS;MACnBC,UAAU,EAAGA,UAAY;MACzBC,YAAY,EAAGA,YAAc;MAC7BC,aAAa,EAAGA;IAAe,CAC/B,CAAC;EAEJ,CAAE,CACG,CACN,EACC,CAAE8C,OAAO,IACV,IAAAvC,MAAA,CAAAC,aAAA;IACCI,SAAS,EAAG,IAAAC,mBAAU,EAAE;MACvB,mBAAmB,EAAEwB,SAAS;MAC9B,sBAAsB,EAAE,CAAEA;IAC3B,CAAE;EAAG,GAEL,IAAA9B,MAAA,CAAAC,aAAA,aAAK6B,SAAS,GAAG,IAAAgB,QAAE,EAAE,UAAW,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAM,CACvD,CAEL,CAAC;AAEL"}

package/build-module/view-grid.js

@@ -1,4 +1,4 @@
-import { createElement } from "react";
+import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -8,6 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, Tooltip } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 
@@ -108,6 +109,7 @@ export default function ViewGrid({
   fields,
   view,
   actions,
+  isLoading,
   getItemId,
   deferredRendering,
   selection,
@@ -120,11 +122,13 @@ export default function ViewGrid({
     step: 3
   });
   const usedData = deferredRendering ? shownData : data;
-  return createElement(Grid, {
+  const hasData = !!usedData?.length;
+  return createElement(Fragment, null, hasData && createElement(Grid, {
     gap: 6,
     columns: 2,
     alignment: "top",
-    className: "dataviews-view-grid"
+    className: "dataviews-view-grid",
+    "aria-busy": isLoading
   }, usedData.map(item => {
     return createElement(GridItem, {
       key: getItemId(item),
@@ -138,6 +142,11 @@ export default function ViewGrid({
       primaryField: primaryField,
       visibleFields: visibleFields
     });
-  }));
+  })), !hasData && createElement("div", {
+    className: classnames({
+      'dataviews-loading': isLoading,
+      'dataviews-no-results': !isLoading
+    })
+  }, createElement("p", null, isLoading ? __('Loading…') : __('No results'))));
 }
 //# sourceMappingURL=view-grid.js.map

package/build-module/view-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Tooltip","useAsyncList","useState","ItemActions","SingleSelectionCheckbox","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","hasNoPointerEvents","setHasNoPointerEvents","id","isSelected","includes","createElement","spacing","key","className","onMouseDown","event","ctrlKey","metaKey","filter","_item","itemId","onClick","render","justify","isCompact","map","field","renderedValue","text","header","placement","ViewGrid","fields","view","deferredRendering","find","layout","hiddenFields","shownData","step","usedData","gap","columns","alignment"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tTooltip,\n} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n} ) {\n\tconst [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'has-no-pointer-events': hasNoPointerEvents,\n\t\t\t} ) }\n\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tsetHasNoPointerEvents( true );\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( hasNoPointerEvents ) {\n\t\t\t\t\tsetHasNoPointerEvents( false );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\titem,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ field.header } placement=\"left\">\n\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-value\">\n\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tgetItemId,\n\tdeferredRendering,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\treturn (\n\t\t<Grid\n\t\t\tgap={ 6 }\n\t\t\tcolumns={ 2 }\n\t\t\talignment=\"top\"\n\t\t\tclassName=\"dataviews-view-grid\"\n\t\t>\n\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<GridItem\n\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["classnames","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Tooltip","__","useAsyncList","useState","ItemActions","SingleSelectionCheckbox","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","hasNoPointerEvents","setHasNoPointerEvents","id","isSelected","includes","createElement","spacing","key","className","onMouseDown","event","ctrlKey","metaKey","filter","_item","itemId","onClick","render","justify","isCompact","map","field","renderedValue","text","header","placement","ViewGrid","fields","view","isLoading","deferredRendering","find","layout","hiddenFields","shownData","step","usedData","hasData","length","Fragment","gap","columns","alignment"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useAsyncList } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n} ) {\n\tconst [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'has-no-pointer-events': hasNoPointerEvents,\n\t\t\t} ) }\n\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tsetHasNoPointerEvents( true );\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( hasNoPointerEvents ) {\n\t\t\t\t\tsetHasNoPointerEvents( false );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\titem,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ field.header } placement=\"left\">\n\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-value\">\n\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tisLoading,\n\tgetItemId,\n\tdeferredRendering,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst hasData = !! usedData?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 6 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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"}

package/build-style/style-rtl.css

@@ -171,7 +171,7 @@
 }
 .dataviews-view-table th {
   text-align: right;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: #1e1e1e;
   font-weight: normal;
   font-size: 13px;
 }
@@ -569,7 +569,7 @@
   margin-block-end: 0;
 }
 .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item], .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus {
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  background-color: var(--wp-admin-theme-color);
   color: #fff;
 }
 .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover .dataviews-search-widget-filter-combobox-item-check, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item] .dataviews-search-widget-filter-combobox-item-check, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus .dataviews-search-widget-filter-combobox-item-check {
@@ -656,7 +656,7 @@
 }
 .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input:focus {
   background: #fff;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::placeholder {
   color: #757575;

package/build-style/style.css

@@ -171,7 +171,7 @@
 }
 .dataviews-view-table th {
   text-align: left;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: #1e1e1e;
   font-weight: normal;
   font-size: 13px;
 }
@@ -569,7 +569,7 @@
   margin-block-end: 0;
 }
 .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item], .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus {
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  background-color: var(--wp-admin-theme-color);
   color: #fff;
 }
 .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover .dataviews-search-widget-filter-combobox-item-check, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item] .dataviews-search-widget-filter-combobox-item-check, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus .dataviews-search-widget-filter-combobox-item-check {
@@ -656,7 +656,7 @@
 }
 .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input:focus {
   background: #fff;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::placeholder {
   color: #757575;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "0.5.2",
+	"version": "0.6.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.51.1",
-		"@wordpress/components": "^26.0.2",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.1",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/primitives": "^3.49.1",
-		"@wordpress/private-apis": "^0.33.1",
+		"@wordpress/a11y": "^3.52.0",
+		"@wordpress/components": "^27.0.0",
+		"@wordpress/compose": "^6.29.0",
+		"@wordpress/element": "^5.29.0",
+		"@wordpress/i18n": "^4.52.0",
+		"@wordpress/icons": "^9.43.0",
+		"@wordpress/keycodes": "^3.52.0",
+		"@wordpress/primitives": "^3.50.0",
+		"@wordpress/private-apis": "^0.34.0",
 		"classnames": "^2.3.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36"
+	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
 }

package/src/stories/index.story.js

@@ -6,9 +6,9 @@ import { useState, useMemo, useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DataViews, LAYOUT_GRID, LAYOUT_TABLE } from '../index';
-
+import { DataViews } from '../index';
 import { DEFAULT_VIEW, actions, data } from './fixtures';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
 
 const meta = {
 	title: 'DataViews (Experimental)/DataViews',
@@ -17,7 +17,9 @@ const meta = {
 export default meta;
 
 const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_TABLE ]: {
+		primaryField: 'title',
+	},
 	[ LAYOUT_GRID ]: {
 		mediaField: 'image',
 		primaryField: 'title',
@@ -100,23 +102,19 @@ export const Default = ( props ) => {
 		};
 	}, [ view ] );
 	const onChangeView = useCallback(
-		( viewUpdater ) => {
-			let updatedView =
-				typeof viewUpdater === 'function'
-					? viewUpdater( view )
-					: viewUpdater;
-			if ( updatedView.type !== view.type ) {
-				updatedView = {
-					...updatedView,
+		( newView ) => {
+			if ( newView.type !== view.type ) {
+				newView = {
+					...newView,
 					layout: {
-						...defaultConfigPerViewType[ updatedView.type ],
+						...defaultConfigPerViewType[ newView.type ],
 					},
 				};
 			}
 
-			setView( updatedView );
+			setView( newView );
 		},
-		[ view, setView ]
+		[ view.type, setView ]
 	);
 	return (
 		<DataViews
@@ -131,7 +129,5 @@ export const Default = ( props ) => {
 };
 Default.args = {
 	actions,
-	getItemId: ( item ) => item.id,
-	isLoading: false,
 	supportedLayouts: [ LAYOUT_TABLE, LAYOUT_GRID ],
 };

package/src/style.scss

@@ -67,7 +67,7 @@
 	}
 	th {
 		text-align: left;
-		color: var(--wp-components-color-foreground, $gray-900);
+		color: $gray-900;
 		font-weight: normal;
 		font-size: $default-font-size;
 	}
@@ -527,7 +527,7 @@
 		&:hover,
 		&[data-active-item],
 		&:focus {
-			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+			background-color: var(--wp-admin-theme-color);
 			color: $white;
 
 			.dataviews-search-widget-filter-combobox-item-check {
@@ -587,7 +587,7 @@
 
 		&: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));
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 
 		&::placeholder {

package/src/view-grid.js

@@ -12,6 +12,7 @@ import {
 	__experimentalVStack as VStack,
 	Tooltip,
 } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 
@@ -128,6 +129,7 @@ export default function ViewGrid( {
 	fields,
 	view,
 	actions,
+	isLoading,
 	getItemId,
 	deferredRendering,
 	selection,
@@ -148,29 +150,45 @@ export default function ViewGrid( {
 	);
 	const shownData = useAsyncList( data, { step: 3 } );
 	const usedData = deferredRendering ? shownData : data;
+	const hasData = !! usedData?.length;
 	return (
-		<Grid
-			gap={ 6 }
-			columns={ 2 }
-			alignment="top"
-			className="dataviews-view-grid"
-		>
-			{ usedData.map( ( item ) => {
-				return (
-					<GridItem
-						key={ getItemId( item ) }
-						selection={ selection }
-						data={ data }
-						onSelectionChange={ onSelectionChange }
-						getItemId={ getItemId }
-						item={ item }
-						actions={ actions }
-						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
-					/>
-				);
-			} ) }
-		</Grid>
+		<>
+			{ hasData && (
+				<Grid
+					gap={ 6 }
+					columns={ 2 }
+					alignment="top"
+					className="dataviews-view-grid"
+					aria-busy={ isLoading }
+				>
+					{ usedData.map( ( item ) => {
+						return (
+							<GridItem
+								key={ getItemId( item ) }
+								selection={ selection }
+								data={ data }
+								onSelectionChange={ onSelectionChange }
+								getItemId={ getItemId }
+								item={ item }
+								actions={ actions }
+								mediaField={ mediaField }
+								primaryField={ primaryField }
+								visibleFields={ visibleFields }
+							/>
+						);
+					} ) }
+				</Grid>
+			) }
+			{ ! hasData && (
+				<div
+					className={ classnames( {
+						'dataviews-loading': isLoading,
+						'dataviews-no-results': ! isLoading,
+					} ) }
+				>
+					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+				</div>
+			) }
+		</>
 	);
 }