@wordpress/dataviews 0.2.0 → 0.3.0

package/build/view-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_compose","_itemActions","_interopRequireDefault","ViewGrid","data","fields","view","actions","getItemId","deferredRendering","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","shownData","useAsyncList","step","usedData","_react","createElement","__experimentalGrid","gap","columns","alignment","className","map","item","index","__experimentalVStack","spacing","key","render","__experimentalHStack","justify","FlexBlock","default","isCompact","renderedValue","header"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tgetItemId,\n\tdeferredRendering,\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={ 8 }\n\t\t\tcolumns={ 2 }\n\t\t\talignment=\"top\"\n\t\t\tclassName=\"dataviews-grid-view\"\n\t\t>\n\t\t\t{ usedData.map( ( item, index ) => (\n\t\t\t\t<VStack\n\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\tkey={ getItemId?.( item ) || index }\n\t\t\t\t\tclassName=\"dataviews-view-grid__card\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__primary-field\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tisCompact\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-header\">\n\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t</div>\n\t\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\t{ field.render( { item } ) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_compose","_itemActions","_interopRequireDefault","ViewGrid","data","fields","view","actions","getItemId","deferredRendering","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","shownData","useAsyncList","step","usedData","_react","createElement","__experimentalGrid","gap","columns","alignment","className","map","item","__experimentalVStack","spacing","key","render","__experimentalHStack","justify","FlexBlock","default","isCompact","renderedValue","header"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tgetItemId,\n\tdeferredRendering,\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={ 8 }\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\t<VStack\n\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\tclassName=\"dataviews-view-grid__card\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__primary-field\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tisCompact\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-header\">\n\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t</div>\n\t\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\t{ renderedValue }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":"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"}

package/build/view-list.js

@@ -10,6 +10,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
 var _keycodes = require("@wordpress/keycodes");
+var _icons = require("@wordpress/icons");
+var _i18n = require("@wordpress/i18n");
 /**
  * External dependencies
  */
@@ -24,6 +26,7 @@ function ViewList({
   data,
   getItemId,
   onSelectionChange,
+  onDetailsChange,
   selection,
   deferredRendering
 }) {
@@ -43,41 +46,51 @@ function ViewList({
     }
   };
   return (0, _react.createElement)("ul", {
-    className: "dataviews-list-view"
-  }, usedData.map((item, index) => {
+    className: "dataviews-view-list"
+  }, usedData.map(item => {
     return (0, _react.createElement)("li", {
-      key: getItemId?.(item) || index
+      key: getItemId(item),
+      className: (0, _classnames.default)({
+        'is-selected': selection.includes(item.id)
+      })
+    }, (0, _react.createElement)(_components.__experimentalHStack, {
+      className: "dataviews-view-list__item-wrapper"
     }, (0, _react.createElement)("div", {
       role: "button",
       tabIndex: 0,
       "aria-pressed": selection.includes(item.id),
       onKeyDown: onEnter(item),
-      className: (0, _classnames.default)('dataviews-list-view__item', {
-        'dataviews-list-view__item-selected': selection.includes(item.id)
-      }),
+      className: "dataviews-view-list__item",
       onClick: () => onSelectionChange([item])
     }, (0, _react.createElement)(_components.__experimentalHStack, {
-      spacing: 3
+      spacing: 3,
+      justify: "start"
     }, (0, _react.createElement)("div", {
-      className: "dataviews-list-view__media-wrapper"
+      className: "dataviews-view-list__media-wrapper"
     }, mediaField?.render({
       item
     }) || (0, _react.createElement)("div", {
-      className: "dataviews-list-view__media-placeholder"
-    })), (0, _react.createElement)(_components.__experimentalHStack, null, (0, _react.createElement)(_components.__experimentalVStack, {
+      className: "dataviews-view-list__media-placeholder"
+    })), (0, _react.createElement)(_components.__experimentalVStack, {
       spacing: 1
     }, primaryField?.render({
       item
     }), (0, _react.createElement)("div", {
-      className: "dataviews-list-view__fields"
+      className: "dataviews-view-list__fields"
     }, visibleFields.map(field => {
       return (0, _react.createElement)("span", {
         key: field.id,
-        className: "dataviews-list-view__field"
+        className: "dataviews-view-list__field"
       }, field.render({
         item
       }));
-    })))))));
+    }))))), onDetailsChange && (0, _react.createElement)(_components.Button, {
+      className: "dataviews-view-list__details-button",
+      onClick: () => onDetailsChange([item]),
+      icon: _icons.info,
+      label: (0, _i18n.__)('View details'),
+      size: "compact"
+    })));
   }));
 }
 //# sourceMappingURL=view-list.js.map

package/build/view-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_components","_keycodes","ViewList","view","fields","data","getItemId","onSelectionChange","selection","deferredRendering","shownData","useAsyncList","step","usedData","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","onEnter","item","event","keyCode","ENTER","SPACE","_react","createElement","className","map","index","key","role","tabIndex","onKeyDown","classNames","onClick","__experimentalHStack","spacing","render","__experimentalVStack"],"sources":["@wordpress/dataviews/src/view-list.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useAsyncList } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\nexport default function ViewList( {\n\tview,\n\tfields,\n\tdata,\n\tgetItemId,\n\tonSelectionChange,\n\tselection,\n\tdeferredRendering,\n} ) {\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\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.primaryField, view.layout.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onEnter = ( item ) => ( event ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( [ ENTER, SPACE ].includes( keyCode ) ) {\n\t\t\tonSelectionChange( [ item ] );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ul className=\"dataviews-list-view\">\n\t\t\t{ usedData.map( ( item, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<li key={ getItemId?.( item ) || index }>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t\taria-pressed={ selection.includes( item.id ) }\n\t\t\t\t\t\t\tonKeyDown={ onEnter( item ) }\n\t\t\t\t\t\t\tclassName={ classNames(\n\t\t\t\t\t\t\t\t'dataviews-list-view__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'dataviews-list-view__item-selected':\n\t\t\t\t\t\t\t\t\t\tselection.includes( item.id ),\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => onSelectionChange( [ item ] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack spacing={ 3 }>\n\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__media-wrapper\">\n\t\t\t\t\t\t\t\t\t{ mediaField?.render( { item } ) || (\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__media-placeholder\"></div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__fields\">\n\t\t\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-list-view__field\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ field.render( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_components","_keycodes","_icons","_i18n","ViewList","view","fields","data","getItemId","onSelectionChange","onDetailsChange","selection","deferredRendering","shownData","useAsyncList","step","usedData","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","onEnter","item","event","keyCode","ENTER","SPACE","_react","createElement","className","map","key","classNames","__experimentalHStack","role","tabIndex","onKeyDown","onClick","spacing","justify","render","__experimentalVStack","Button","icon","info","label","__","size"],"sources":["@wordpress/dataviews/src/view-list.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useAsyncList } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n} from '@wordpress/components';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\nimport { info } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ViewList( {\n\tview,\n\tfields,\n\tdata,\n\tgetItemId,\n\tonSelectionChange,\n\tonDetailsChange,\n\tselection,\n\tdeferredRendering,\n} ) {\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\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.primaryField, view.layout.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onEnter = ( item ) => ( event ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( [ ENTER, SPACE ].includes( keyCode ) ) {\n\t\t\tonSelectionChange( [ item ] );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ul className=\"dataviews-view-list\">\n\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\tclassName={ classNames( {\n\t\t\t\t\t\t\t'is-selected': selection.includes( item.id ),\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack className=\"dataviews-view-list__item-wrapper\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t\t\taria-pressed={ selection.includes( item.id ) }\n\t\t\t\t\t\t\t\tonKeyDown={ onEnter( item ) }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\t\t\tonClick={ () => onSelectionChange( [ item ] ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack spacing={ 3 } justify=\"start\">\n\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t\t\t\t\t\t\t{ mediaField?.render( { item } ) || (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-placeholder\"></div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__fields\">\n\t\t\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ field.render( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ onDetailsChange && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__details-button\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonDetailsChange( [ item ] )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'View details' ) }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":"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"}

package/build/view-table.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
 var _icons = require("@wordpress/icons");
@@ -14,6 +15,11 @@ var _element = require("@wordpress/element");
 var _lockUnlock = require("./lock-unlock");
 var _itemActions = _interopRequireDefault(require("./item-actions"));
 var _constants = require("./constants");
+var _dropdownMenuHelper = require("./dropdown-menu-helper");
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -26,94 +32,76 @@ const {
   DropdownMenuV2: DropdownMenu,
   DropdownMenuGroupV2: DropdownMenuGroup,
   DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuRadioItemV2: DropdownMenuRadioItem,
   DropdownMenuSeparatorV2: DropdownMenuSeparator,
-  DropdownSubMenuV2: DropdownSubMenu,
-  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger
+  DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+  DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText
 } = (0, _lockUnlock.unlock)(_components.privateApis);
-const sortingItemsInfo = {
-  asc: {
-    icon: _icons.arrowUp,
-    label: (0, _i18n.__)('Sort ascending')
-  },
-  desc: {
-    icon: _icons.arrowDown,
-    label: (0, _i18n.__)('Sort descending')
-  }
+const sortArrows = {
+  asc: '↑',
+  desc: '↓'
 };
-const sortIcons = {
-  asc: _icons.chevronUp,
-  desc: _icons.chevronDown
+const sanitizeOperators = field => {
+  let operators = field.filterBy?.operators;
+  if (!operators || !Array.isArray(operators)) {
+    operators = Object.keys(_constants.OPERATORS);
+  }
+  return operators.filter(operator => Object.keys(_constants.OPERATORS).includes(operator));
 };
-function HeaderMenu({
+const HeaderMenu = (0, _element.forwardRef)(function HeaderMenu({
   field,
   view,
-  onChangeView
-}) {
-  const isSortable = field.enableSorting !== false;
+  onChangeView,
+  onHide
+}, ref) {
   const isHidable = field.enableHiding !== false;
-  if (!isSortable && !isHidable) {
-    return field.header;
-  }
+  const isSortable = field.enableSorting !== false;
   const isSorted = view.sort?.field === field.id;
-  let filter, filterInView;
-  const otherFilters = [];
-  if (field.type === _constants.ENUMERATION_TYPE) {
-    let columnOperators = field.filterBy?.operators;
-    if (!columnOperators || !Array.isArray(columnOperators)) {
-      columnOperators = [_constants.OPERATOR_IN, _constants.OPERATOR_NOT_IN];
-    }
-    const operators = columnOperators.filter(operator => [_constants.OPERATOR_IN, _constants.OPERATOR_NOT_IN].includes(operator));
-    if (operators.length >= 0) {
-      filter = {
-        field: field.id,
-        operators,
-        elements: field.elements || []
-      };
-      filterInView = {
-        field: filter.field,
-        operator: filter.operators[0],
-        value: undefined
-      };
-    }
+  let filter, filterInView, activeElement, activeOperator, otherFilters;
+  const operators = sanitizeOperators(field);
+  if (field.type === _constants.ENUMERATION_TYPE && operators.length > 0) {
+    filter = {
+      field: field.id,
+      operators,
+      elements: field.elements || []
+    };
+    filterInView = view.filters.find(f => f.field === filter.field);
+    otherFilters = view.filters.filter(f => f.field !== filter.field);
+    activeElement = filter.elements.find(element => element.value === filterInView?.value);
+    activeOperator = filterInView?.operator || filter.operators[0];
   }
   const isFilterable = !!filter;
-  if (isFilterable) {
-    const columnFilters = view.filters;
-    columnFilters.forEach(columnFilter => {
-      if (columnFilter.field === filter.field) {
-        filterInView = {
-          ...columnFilter
-        };
-      } else {
-        otherFilters.push(columnFilter);
-      }
-    });
+  if (!isSortable && !isHidable && !isFilterable) {
+    return field.header;
   }
   return (0, _react.createElement)(DropdownMenu, {
     align: "start",
     trigger: (0, _react.createElement)(_components.Button, {
-      icon: isSorted && sortIcons[view.sort.direction],
-      iconPosition: "right",
-      text: field.header,
-      style: {
-        padding: 0
-      },
-      size: "compact"
-    })
-  }, (0, _react.createElement)(WithSeparators, null, isSortable && (0, _react.createElement)(DropdownMenuGroup, null, Object.entries(sortingItemsInfo).map(([direction, info]) => {
-    const isActive = isSorted && view.sort.direction === direction;
-    return (0, _react.createElement)(DropdownMenuItem, {
-      key: direction,
-      role: "menuitemradio",
-      "aria-checked": isActive,
-      prefix: (0, _react.createElement)(_components.Icon, {
-        icon: info.icon
-      }),
-      suffix: isActive && (0, _react.createElement)(_components.Icon, {
-        icon: _icons.check
-      }),
-      onSelect: event => {
-        event.preventDefault();
+      size: "compact",
+      className: "dataviews-view-table-header-button",
+      ref: ref,
+      variant: "tertiary"
+    }, field.header, isSorted && (0, _react.createElement)("span", {
+      "aria-hidden": "true"
+    }, isSorted && sortArrows[view.sort.direction])),
+    style: {
+      minWidth: '240px'
+    }
+  }, (0, _react.createElement)(WithSeparators, null, isSortable && (0, _react.createElement)(DropdownMenuGroup, null, Object.entries(_constants.SORTING_DIRECTIONS).map(([direction, info]) => {
+    const isChecked = isSorted && view.sort.direction === direction;
+    const value = `${field.id}-${direction}`;
+    return (0, _react.createElement)(DropdownMenuRadioItem, {
+      key: value
+      // All sorting radio items share the same name, so that
+      // selecting a sorting option automatically deselects the
+      // previously selected one, even if it is displayed in
+      // another submenu. The field and direction are passed via
+      // the `value` prop.
+      ,
+      name: "view-table-sorting",
+      value: value,
+      checked: isChecked,
+      onChange: () => {
         onChangeView({
           ...view,
           sort: {
@@ -122,96 +110,72 @@ function HeaderMenu({
           }
         });
       }
-    }, info.label);
+    }, (0, _react.createElement)(DropdownMenuItemLabel, null, info.label));
   })), isHidable && (0, _react.createElement)(DropdownMenuItem, {
-    role: "menuitemradio",
-    "aria-checked": false,
     prefix: (0, _react.createElement)(_components.Icon, {
       icon: _icons.unseen
     }),
-    onSelect: event => {
-      event.preventDefault();
+    onClick: () => {
+      onHide(field);
       onChangeView({
         ...view,
         hiddenFields: view.hiddenFields.concat(field.id)
       });
     }
-  }, (0, _i18n.__)('Hide')), isFilterable && (0, _react.createElement)(DropdownMenuGroup, null, (0, _react.createElement)(DropdownSubMenu, {
+  }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Hide'))), isFilterable && (0, _react.createElement)(DropdownMenuGroup, null, (0, _react.createElement)(DropdownMenu, {
     key: filter.field,
-    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
+    trigger: (0, _react.createElement)(DropdownMenuItem, {
       prefix: (0, _react.createElement)(_components.Icon, {
         icon: _icons.funnel
       }),
-      suffix: (0, _react.createElement)(_components.Icon, {
-        icon: _icons.chevronRightSmall
-      })
-    }, (0, _i18n.__)('Filter by'))
+      suffix: activeElement && (0, _react.createElement)("span", {
+        "aria-hidden": "true"
+      }, activeOperator in _constants.OPERATORS && `${_constants.OPERATORS[activeOperator].label} `, activeElement?.label)
+    }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Filter by')))
   }, (0, _react.createElement)(WithSeparators, null, (0, _react.createElement)(DropdownMenuGroup, null, filter.elements.map(element => {
-    let isActive = false;
-    if (filterInView) {
-      // Intentionally use loose comparison, so it does type conversion.
-      // This covers the case where a top-level filter for the same field converts a number into a string.
-      /* eslint-disable eqeqeq */
-      isActive = element.value == filterInView.value;
-      /* eslint-enable eqeqeq */
-    }
-
-    return (0, _react.createElement)(DropdownMenuItem, {
+    const isActive = activeElement?.value === element.value;
+    return (0, _react.createElement)(_dropdownMenuHelper.DropdownMenuRadioItemCustom, {
       key: element.value,
-      role: "menuitemradio",
-      "aria-checked": isActive,
-      prefix: isActive && (0, _react.createElement)(_components.Icon, {
-        icon: _icons.check
-      }),
-      onSelect: () => {
+      name: `view-table-${filter.field}`,
+      value: element.value,
+      checked: isActive,
+      onClick: () => {
         onChangeView({
           ...view,
+          page: 1,
           filters: [...otherFilters, {
             field: filter.field,
-            operator: filterInView?.operator,
+            operator: activeOperator,
             value: isActive ? undefined : element.value
           }]
         });
       }
-    }, element.label);
-  })), filter.operators.length > 1 && (0, _react.createElement)(DropdownSubMenu, {
-    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
-      suffix: (0, _react.createElement)(_element.Fragment, null, filterInView.operator === _constants.OPERATOR_IN ? (0, _i18n.__)('Is') : (0, _i18n.__)('Is not'), (0, _react.createElement)(_components.Icon, {
-        icon: _icons.chevronRightSmall
-      }), ' ')
-    }, (0, _i18n.__)('Conditions'))
-  }, (0, _react.createElement)(DropdownMenuItem, {
-    key: "in-filter",
-    role: "menuitemradio",
-    "aria-checked": filterInView?.operator === _constants.OPERATOR_IN,
-    prefix: filterInView?.operator === _constants.OPERATOR_IN && (0, _react.createElement)(_components.Icon, {
-      icon: _icons.check
-    }),
-    onSelect: () => onChangeView({
-      ...view,
-      filters: [...otherFilters, {
-        field: filter.field,
-        operator: _constants.OPERATOR_IN,
-        value: filterInView?.value
-      }]
-    })
-  }, (0, _i18n.__)('Is')), (0, _react.createElement)(DropdownMenuItem, {
-    key: "not-in-filter",
-    role: "menuitemradio",
-    "aria-checked": filterInView?.operator === _constants.OPERATOR_NOT_IN,
-    prefix: filterInView?.operator === _constants.OPERATOR_NOT_IN && (0, _react.createElement)(_components.Icon, {
-      icon: _icons.check
-    }),
-    onSelect: () => onChangeView({
+    }, (0, _react.createElement)(DropdownMenuItemLabel, null, element.label), !!element.description && (0, _react.createElement)(DropdownMenuItemHelpText, null, element.description));
+  })), filter.operators.length > 1 && (0, _react.createElement)(DropdownMenu, {
+    trigger: (0, _react.createElement)(DropdownMenuItem, {
+      suffix: (0, _react.createElement)("span", {
+        "aria-hidden": "true"
+      }, _constants.OPERATORS[activeOperator]?.label)
+    }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Conditions')))
+  }, Object.entries(_constants.OPERATORS).map(([operator, {
+    label,
+    key
+  }]) => (0, _react.createElement)(DropdownMenuRadioItem, {
+    key: key,
+    name: `view-table-${filter.field}-conditions`,
+    value: operator,
+    checked: activeOperator === operator,
+    onChange: e => onChangeView({
       ...view,
+      page: 1,
       filters: [...otherFilters, {
         field: filter.field,
-        operator: _constants.OPERATOR_NOT_IN,
+        operator: e.target.value,
         value: filterInView?.value
       }]
     })
-  }, (0, _i18n.__)('Is not'))))))));
-}
+  }, (0, _react.createElement)(DropdownMenuItemLabel, null, label)))))))));
+});
 function WithSeparators({
   children
 }) {
@@ -229,25 +193,43 @@ function ViewTable({
   isLoading = false,
   deferredRendering
 }) {
+  const headerMenuRefs = (0, _element.useRef)(new Map());
+  const headerMenuToFocusRef = (0, _element.useRef)();
+  const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = (0, _element.useState)();
+  (0, _element.useEffect)(() => {
+    if (headerMenuToFocusRef.current) {
+      headerMenuToFocusRef.current.focus();
+      headerMenuToFocusRef.current = undefined;
+    }
+  });
+  const asyncData = (0, _compose.useAsyncList)(data);
+  const tableNoticeId = (0, _element.useId)();
+  if (nextHeaderMenuToFocus) {
+    // If we need to force focus, we short-circuit rendering here
+    // to prevent any additional work while we handle that.
+    // Clearing out the focus directive is necessary to make sure
+    // future renders don't cause unexpected focus jumps.
+    headerMenuToFocusRef.current = nextHeaderMenuToFocus;
+    setNextHeaderMenuToFocus();
+    return;
+  }
+  const onHide = field => {
+    const hidden = headerMenuRefs.current.get(field.id);
+    const fallback = headerMenuRefs.current.get(hidden.fallback);
+    setNextHeaderMenuToFocus(fallback?.node);
+  };
   const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField, view.layout.primaryField].includes(field.id));
-  const shownData = (0, _compose.useAsyncList)(data);
-  const usedData = deferredRendering ? shownData : data;
+  const usedData = deferredRendering ? asyncData : data;
   const hasData = !!usedData?.length;
-  if (isLoading) {
-    // TODO:Add spinner or progress bar..
-    return (0, _react.createElement)("div", {
-      className: "dataviews-loading"
-    }, (0, _react.createElement)("h3", null, (0, _i18n.__)('Loading')));
-  }
   const sortValues = {
     asc: 'ascending',
     desc: 'descending'
   };
-  return (0, _react.createElement)("div", {
-    className: "dataviews-table-view-wrapper"
-  }, hasData && (0, _react.createElement)("table", {
-    className: "dataviews-table-view"
-  }, (0, _react.createElement)("thead", null, (0, _react.createElement)("tr", null, visibleFields.map(field => (0, _react.createElement)("th", {
+  return (0, _react.createElement)("div", null, (0, _react.createElement)("table", {
+    className: "dataviews-view-table",
+    "aria-busy": isLoading,
+    "aria-describedby": tableNoticeId
+  }, (0, _react.createElement)("thead", null, (0, _react.createElement)("tr", null, visibleFields.map((field, index) => (0, _react.createElement)("th", {
     key: field.id,
     style: {
       width: field.width || undefined,
@@ -258,13 +240,26 @@ function ViewTable({
     "aria-sort": view.sort?.field === field.id && sortValues[view.sort.direction],
     scope: "col"
   }, (0, _react.createElement)(HeaderMenu, {
+    ref: node => {
+      if (node) {
+        headerMenuRefs.current.set(field.id, {
+          node,
+          fallback: visibleFields[index > 0 ? index - 1 : 1]?.id
+        });
+      } else {
+        headerMenuRefs.current.delete(field.id);
+      }
+    },
     field: field,
     view: view,
-    onChangeView: onChangeView
+    onChangeView: onChangeView,
+    onHide: onHide
   }))), !!actions?.length && (0, _react.createElement)("th", {
     "data-field-id": "actions"
-  }, (0, _i18n.__)('Actions')))), (0, _react.createElement)("tbody", null, usedData.map((item, index) => (0, _react.createElement)("tr", {
-    key: getItemId?.(item) || index
+  }, (0, _react.createElement)("span", {
+    className: "dataviews-view-table-header"
+  }, (0, _i18n.__)('Actions'))))), (0, _react.createElement)("tbody", null, hasData && usedData.map(item => (0, _react.createElement)("tr", {
+    key: getItemId(item)
   }, visibleFields.map(field => (0, _react.createElement)("td", {
     key: field.id,
     style: {
@@ -277,9 +272,13 @@ function ViewTable({
   }))), !!actions?.length && (0, _react.createElement)("td", null, (0, _react.createElement)(_itemActions.default, {
     item: item,
     actions: actions
-  })))))), !hasData && (0, _react.createElement)("div", {
-    className: "dataviews-no-results"
-  }, (0, _react.createElement)("p", null, (0, _i18n.__)('No results'))));
+  })))))), (0, _react.createElement)("div", {
+    className: (0, _classnames.default)({
+      'dataviews-loading': isLoading,
+      'dataviews-no-results': !hasData && !isLoading
+    }),
+    id: tableNoticeId
+  }, !hasData && (0, _react.createElement)("p", null, isLoading ? (0, _i18n.__)('Loading…') : (0, _i18n.__)('No results'))));
 }
 var _default = ViewTable;
 exports.default = _default;