@wordpress/dataviews 0.5.2 → 0.5.3

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":"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"}

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "0.5.2",
+	"version": "0.5.3",
 	"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",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36"
+	"gitHead": "b12d75c5c5256fda2a0509bb432e20ddd3354d5e"
 }

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>
+			) }
+		</>
 	);
 }