@wordpress/dataviews 0.4.1 → 0.5.0

package/build-module/view-grid.js

@@ -1,38 +1,63 @@
 import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, Tooltip } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ItemActions from './item-actions';
-export default function ViewGrid({
+import SingleSelectionCheckbox from './single-selection-checkbox';
+function GridItem({
+  selection,
   data,
-  fields,
-  view,
-  actions,
+  onSelectionChange,
   getItemId,
-  deferredRendering
+  item,
+  actions,
+  mediaField,
+  primaryField,
+  visibleFields
 }) {
-  const mediaField = fields.find(field => field.id === view.layout.mediaField);
-  const primaryField = fields.find(field => field.id === view.layout.primaryField);
-  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField, view.layout.primaryField].includes(field.id));
-  const shownData = useAsyncList(data, {
-    step: 3
-  });
-  const usedData = deferredRendering ? shownData : data;
-  return createElement(Grid, {
-    gap: 6,
-    columns: 2,
-    alignment: "top",
-    className: "dataviews-view-grid"
-  }, usedData.map(item => createElement(VStack, {
+  const [hasNoPointerEvents, setHasNoPointerEvents] = useState(false);
+  const id = getItemId(item);
+  const isSelected = selection.includes(id);
+  return createElement(VStack, {
     spacing: 0,
-    key: getItemId(item),
-    className: "dataviews-view-grid__card"
+    key: id,
+    className: classnames('dataviews-view-grid__card', {
+      'is-selected': isSelected,
+      'has-no-pointer-events': hasNoPointerEvents
+    }),
+    onMouseDown: event => {
+      if (event.ctrlKey || event.metaKey) {
+        setHasNoPointerEvents(true);
+        if (!isSelected) {
+          onSelectionChange(data.filter(_item => {
+            const itemId = getItemId?.(_item);
+            return itemId === id || selection.includes(itemId);
+          }));
+        } else {
+          onSelectionChange(data.filter(_item => {
+            const itemId = getItemId?.(_item);
+            return itemId !== id && selection.includes(itemId);
+          }));
+        }
+      }
+    },
+    onClick: () => {
+      if (hasNoPointerEvents) {
+        setHasNoPointerEvents(false);
+      }
+    }
   }, createElement("div", {
     className: "dataviews-view-grid__media"
   }, mediaField?.render({
@@ -40,7 +65,15 @@ export default function ViewGrid({
   })), createElement(HStack, {
     justify: "space-between",
     className: "dataviews-view-grid__title-actions"
-  }, createElement(HStack, {
+  }, createElement(SingleSelectionCheckbox, {
+    id: id,
+    item: item,
+    selection: selection,
+    onSelectionChange: onSelectionChange,
+    getItemId: getItemId,
+    data: data,
+    primaryField: primaryField
+  }), createElement(HStack, {
     className: "dataviews-view-grid__primary-field"
   }, primaryField?.render({
     item
@@ -68,6 +101,43 @@ export default function ViewGrid({
     }, createElement("div", {
       className: "dataviews-view-grid__field-value"
     }, renderedValue)));
-  })))));
+  })));
+}
+export default function ViewGrid({
+  data,
+  fields,
+  view,
+  actions,
+  getItemId,
+  deferredRendering,
+  selection,
+  onSelectionChange
+}) {
+  const mediaField = fields.find(field => field.id === view.layout.mediaField);
+  const primaryField = fields.find(field => field.id === view.layout.primaryField);
+  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField, view.layout.primaryField].includes(field.id));
+  const shownData = useAsyncList(data, {
+    step: 3
+  });
+  const usedData = deferredRendering ? shownData : data;
+  return createElement(Grid, {
+    gap: 6,
+    columns: 2,
+    alignment: "top",
+    className: "dataviews-view-grid"
+  }, usedData.map(item => {
+    return createElement(GridItem, {
+      key: getItemId(item),
+      selection: selection,
+      data: data,
+      onSelectionChange: onSelectionChange,
+      getItemId: getItemId,
+      item: item,
+      actions: actions,
+      mediaField: mediaField,
+      primaryField: primaryField,
+      visibleFields: visibleFields
+    });
+  }));
 }
 //# sourceMappingURL=view-grid.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Tooltip","useAsyncList","ItemActions","ViewGrid","data","fields","view","actions","getItemId","deferredRendering","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","shownData","step","usedData","createElement","gap","columns","alignment","className","map","item","spacing","key","render","justify","isCompact","renderedValue","text","header","placement"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\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';\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={ 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\t<VStack\n\t\t\t\t\tspacing={ 0 }\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\tjustify=\"space-between\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t</HStack>\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<Tooltip\n\t\t\t\t\t\t\t\t\t\ttext={ field.header }\n\t\t\t\t\t\t\t\t\t\tplacement=\"left\"\n\t\t\t\t\t\t\t\t\t>\n\t\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\t{ renderedValue }\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Tooltip>\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":["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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"}

package/build-module/view-list.js

@@ -66,7 +66,8 @@ export default function ViewList({
       onClick: () => onSelectionChange([item])
     }, createElement(HStack, {
       spacing: 3,
-      justify: "start"
+      justify: "start",
+      alignment: "flex-start"
     }, createElement("div", {
       className: "dataviews-view-list__media-wrapper"
     }, mediaField?.render({

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

@@ -1 +1 @@
-{"version":3,"names":["classNames","useAsyncList","__experimentalHStack","HStack","__experimentalVStack","VStack","Button","ENTER","SPACE","info","__","ViewList","view","fields","data","isLoading","getItemId","onSelectionChange","onDetailsChange","selection","deferredRendering","shownData","step","usedData","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","onEnter","item","event","keyCode","hasData","length","createElement","className","map","key","role","tabIndex","onKeyDown","onClick","spacing","justify","render","icon","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\tisLoading,\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\tconst hasData = usedData?.length;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ classNames( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData && (\n\t\t\t\t\t<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\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<span className=\"dataviews-view-list__primary-field\">\n\t\t\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t</span>\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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"}
+{"version":3,"names":["classNames","useAsyncList","__experimentalHStack","HStack","__experimentalVStack","VStack","Button","ENTER","SPACE","info","__","ViewList","view","fields","data","isLoading","getItemId","onSelectionChange","onDetailsChange","selection","deferredRendering","shownData","step","usedData","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","onEnter","item","event","keyCode","hasData","length","createElement","className","map","key","role","tabIndex","onKeyDown","onClick","spacing","justify","alignment","render","icon","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\tisLoading,\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\tconst hasData = usedData?.length;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ classNames( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData && (\n\t\t\t\t\t<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\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\n\t\t\t\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\t\t\t\t>\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<span className=\"dataviews-view-list__primary-field\">\n\t\t\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t</span>\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-module/view-table.js

@@ -7,63 +7,56 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { unseen, funnel } from '@wordpress/icons';
 import { Button, Icon, privateApis as componentsPrivateApis, CheckboxControl } from '@wordpress/components';
-import { Children, Fragment, forwardRef, useEffect, useId, useRef, useState } from '@wordpress/element';
+import { forwardRef, useEffect, useId, useRef, useState, Children, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import SingleSelectionCheckbox from './single-selection-checkbox';
 import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
-import { ENUMERATION_TYPE, OPERATORS, SORTING_DIRECTIONS } from './constants';
-import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';
+import { sanitizeOperators } from './utils';
+import { ENUMERATION_TYPE, SORTING_DIRECTIONS } from './constants';
 const {
   DropdownMenuV2: DropdownMenu,
   DropdownMenuGroupV2: DropdownMenuGroup,
   DropdownMenuItemV2: DropdownMenuItem,
   DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-  DropdownMenuSeparatorV2: DropdownMenuSeparator,
   DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-  DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText
+  DropdownMenuSeparatorV2: DropdownMenuSeparator
 } = unlock(componentsPrivateApis);
+function WithSeparators({
+  children
+}) {
+  return Children.toArray(children).filter(Boolean).map((child, i) => createElement(Fragment, {
+    key: i
+  }, i > 0 && createElement(DropdownMenuSeparator, null), child));
+}
 const sortArrows = {
   asc: '↑',
   desc: '↓'
 };
-const sanitizeOperators = field => {
-  let operators = field.filterBy?.operators;
-  if (!operators || !Array.isArray(operators)) {
-    operators = Object.keys(OPERATORS);
-  }
-  return operators.filter(operator => Object.keys(OPERATORS).includes(operator));
-};
 const HeaderMenu = forwardRef(function HeaderMenu({
   field,
   view,
   onChangeView,
-  onHide
+  onHide,
+  setOpenedFilter
 }, ref) {
   const isHidable = field.enableHiding !== false;
   const isSortable = field.enableSorting !== false;
   const isSorted = view.sort?.field === field.id;
-  let filter, filterInView, activeElement, activeOperator, otherFilters;
   const operators = sanitizeOperators(field);
-  if (field.type === 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 (!isSortable && !isHidable && !isFilterable) {
+  // Filter can be added:
+  // 1. If the field is not already part of a view's filters.
+  // 2. If the field meets the type and operator requirements.
+  // 3. If it's not primary. If it is, it should be already visible.
+  const canAddFilter = !view.filters?.some(_filter => field.id === _filter.field) && field.type === ENUMERATION_TYPE && !!operators.length && !field.filterBy?.isPrimary;
+  if (!isSortable && !isHidable && !canAddFilter) {
     return field.header;
   }
   return createElement(DropdownMenu, {
@@ -103,7 +96,23 @@ const HeaderMenu = forwardRef(function HeaderMenu({
         });
       }
     }, createElement(DropdownMenuItemLabel, null, info.label));
-  })), isHidable && createElement(DropdownMenuItem, {
+  })), canAddFilter && createElement(DropdownMenuGroup, null, createElement(DropdownMenuItem, {
+    prefix: createElement(Icon, {
+      icon: funnel
+    }),
+    onClick: () => {
+      setOpenedFilter(field.id);
+      onChangeView({
+        ...view,
+        page: 1,
+        filters: [...(view.filters || []), {
+          field: field.id,
+          value: undefined,
+          operator: operators[0]
+        }]
+      });
+    }
+  }, createElement(DropdownMenuItemLabel, null, __('Add filter')))), isHidable && createElement(DropdownMenuItem, {
     prefix: createElement(Icon, {
       icon: unseen
     }),
@@ -114,67 +123,8 @@ const HeaderMenu = forwardRef(function HeaderMenu({
         hiddenFields: view.hiddenFields.concat(field.id)
       });
     }
-  }, createElement(DropdownMenuItemLabel, null, __('Hide'))), isFilterable && createElement(DropdownMenuGroup, null, createElement(DropdownMenu, {
-    key: filter.field,
-    trigger: createElement(DropdownMenuItem, {
-      prefix: createElement(Icon, {
-        icon: funnel
-      }),
-      suffix: activeElement && createElement("span", {
-        "aria-hidden": "true"
-      }, activeOperator in OPERATORS && `${OPERATORS[activeOperator].label} `, activeElement?.label)
-    }, createElement(DropdownMenuItemLabel, null, __('Filter by')))
-  }, createElement(WithSeparators, null, createElement(DropdownMenuGroup, null, filter.elements.map(element => {
-    const isActive = activeElement?.value === element.value;
-    return createElement(DropdownMenuRadioItemCustom, {
-      key: element.value,
-      name: `view-table-${filter.field}`,
-      value: element.value,
-      checked: isActive,
-      onClick: () => {
-        onChangeView({
-          ...view,
-          page: 1,
-          filters: [...otherFilters, {
-            field: filter.field,
-            operator: activeOperator,
-            value: isActive ? undefined : element.value
-          }]
-        });
-      }
-    }, createElement(DropdownMenuItemLabel, null, element.label), !!element.description && createElement(DropdownMenuItemHelpText, null, element.description));
-  })), filter.operators.length > 1 && createElement(DropdownMenu, {
-    trigger: createElement(DropdownMenuItem, {
-      suffix: createElement("span", {
-        "aria-hidden": "true"
-      }, OPERATORS[activeOperator]?.label)
-    }, createElement(DropdownMenuItemLabel, null, __('Conditions')))
-  }, Object.entries(OPERATORS).map(([operator, {
-    label,
-    key
-  }]) => 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: e.target.value,
-        value: filterInView?.value
-      }]
-    })
-  }, createElement(DropdownMenuItemLabel, null, label)))))))));
+  }, createElement(DropdownMenuItemLabel, null, __('Hide')))));
 });
-function WithSeparators({
-  children
-}) {
-  return Children.toArray(children).filter(Boolean).map((child, i) => createElement(Fragment, {
-    key: i
-  }, i > 0 && createElement(DropdownMenuSeparator, null), child));
-}
 function BulkSelectionCheckbox({
   selection,
   onSelectionChange,
@@ -196,46 +146,6 @@ function BulkSelectionCheckbox({
     label: areAllSelected ? __('Deselect all') : __('Select all')
   });
 }
-function SingleSelectionCheckbox({
-  selection,
-  onSelectionChange,
-  item,
-  data,
-  getItemId,
-  primaryField
-}) {
-  const id = getItemId(item);
-  const isSelected = selection.includes(id);
-  let selectionLabel;
-  if (primaryField?.getValue && item) {
-    // eslint-disable-next-line @wordpress/valid-sprintf
-    selectionLabel = sprintf( /* translators: %s: item title. */
-    isSelected ? __('Deselect item: %s') : __('Select item: %s'), primaryField.getValue({
-      item
-    }));
-  } else {
-    selectionLabel = isSelected ? __('Select a new item') : __('Deselect item');
-  }
-  return createElement(CheckboxControl, {
-    className: "dataviews-view-table-selection-checkbox",
-    __nextHasNoMarginBottom: true,
-    checked: isSelected,
-    label: selectionLabel,
-    onChange: () => {
-      if (!isSelected) {
-        onSelectionChange(data.filter(_item => {
-          const itemId = getItemId?.(_item);
-          return itemId === id || selection.includes(itemId);
-        }));
-      } else {
-        onSelectionChange(data.filter(_item => {
-          const itemId = getItemId?.(_item);
-          return itemId !== id && selection.includes(itemId);
-        }));
-      }
-    }
-  });
-}
 function ViewTable({
   view,
   onChangeView,
@@ -246,7 +156,8 @@ function ViewTable({
   isLoading = false,
   deferredRendering,
   selection,
-  onSelectionChange
+  onSelectionChange,
+  setOpenedFilter
 }) {
   const hasBulkActions = actions?.some(action => action.supportsBulk);
   const headerMenuRefs = useRef(new Map());
@@ -326,7 +237,8 @@ function ViewTable({
     field: field,
     view: view,
     onChangeView: onChangeView,
-    onHide: onHide
+    onHide: onHide,
+    setOpenedFilter: setOpenedFilter
   }))), !!actions?.length && createElement("th", {
     "data-field-id": "actions",
     className: "dataviews-view-table__actions-column"