@wordpress/edit-site 5.22.0 → 5.24.0

package/build/components/dataviews/view-actions.js

@@ -18,11 +18,11 @@ var _lockUnlock = require("../../lock-unlock");
  */
 
 const {
-  DropdownMenuV2,
-  DropdownMenuGroupV2,
-  DropdownMenuItemV2,
-  DropdownSubMenuV2,
-  DropdownSubMenuTriggerV2
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuGroupV2: DropdownMenuGroup,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownSubMenuV2: DropdownSubMenu,
+  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger
 } = (0, _lockUnlock.unlock)(_components.privateApis);
 const availableViews = [{
   id: 'list',
@@ -30,20 +30,31 @@ const availableViews = [{
 }, {
   id: 'grid',
   label: (0, _i18n.__)('Grid')
+}, {
+  id: 'side-by-side',
+  label: (0, _i18n.__)('Side by side')
 }];
 function ViewTypeMenu({
   view,
-  onChangeView
+  onChangeView,
+  supportedLayouts
 }) {
-  const activeView = availableViews.find(v => view.type === v.id);
-  return (0, _react.createElement)(DropdownSubMenuV2, {
-    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+  let _availableViews = availableViews;
+  if (supportedLayouts) {
+    _availableViews = _availableViews.filter(_view => supportedLayouts.includes(_view.id));
+  }
+  if (_availableViews.length === 1) {
+    return null;
+  }
+  const activeView = _availableViews.find(v => view.type === v.id);
+  return (0, _react.createElement)(DropdownSubMenu, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
       suffix: (0, _react.createElement)(_react.Fragment, null, activeView.label, (0, _react.createElement)(_components.Icon, {
         icon: _icons.chevronRightSmall
       }))
     }, (0, _i18n.__)('Layout'))
-  }, availableViews.map(availableView => {
-    return (0, _react.createElement)(DropdownMenuItemV2, {
+  }, _availableViews.map(availableView => {
+    return (0, _react.createElement)(DropdownMenuItem, {
       key: availableView.id,
       prefix: availableView.id === view.type && (0, _react.createElement)(_components.Icon, {
         icon: _icons.check
@@ -62,19 +73,19 @@ function ViewTypeMenu({
     }, availableView.label);
   }));
 }
-const PAGE_SIZE_VALUES = [5, 20, 50];
+const PAGE_SIZE_VALUES = [10, 20, 50, 100];
 function PageSizeMenu({
   view,
   onChangeView
 }) {
-  return (0, _react.createElement)(DropdownSubMenuV2, {
-    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+  return (0, _react.createElement)(DropdownSubMenu, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
       suffix: (0, _react.createElement)(_react.Fragment, null, view.perPage, (0, _react.createElement)(_components.Icon, {
         icon: _icons.chevronRightSmall
       }))
     }, (0, _i18n.__)('Rows per page'))
   }, PAGE_SIZE_VALUES.map(size => {
-    return (0, _react.createElement)(DropdownMenuItemV2, {
+    return (0, _react.createElement)(DropdownMenuItem, {
       key: size,
       prefix: view.perPage === size && (0, _react.createElement)(_components.Icon, {
         icon: _icons.check
@@ -103,14 +114,14 @@ function FieldsVisibilityMenu({
   if (!hidableFields?.length) {
     return null;
   }
-  return (0, _react.createElement)(DropdownSubMenuV2, {
-    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+  return (0, _react.createElement)(DropdownSubMenu, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
       suffix: (0, _react.createElement)(_components.Icon, {
         icon: _icons.chevronRightSmall
       })
     }, (0, _i18n.__)('Fields'))
   }, hidableFields?.map(field => {
-    return (0, _react.createElement)(DropdownMenuItemV2, {
+    return (0, _react.createElement)(DropdownMenuItem, {
       key: field.id,
       prefix: !view.hiddenFields?.includes(field.id) && (0, _react.createElement)(_components.Icon, {
         icon: _icons.check
@@ -148,17 +159,17 @@ function SortMenu({
     return null;
   }
   const currentSortedField = fields.find(field => field.id === view.sort?.field);
-  return (0, _react.createElement)(DropdownSubMenuV2, {
-    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+  return (0, _react.createElement)(DropdownSubMenu, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
       suffix: (0, _react.createElement)(_react.Fragment, null, currentSortedField?.header, (0, _react.createElement)(_components.Icon, {
         icon: _icons.chevronRightSmall
       }))
     }, (0, _i18n.__)('Sort by'))
   }, sortableFields?.map(field => {
     const sortedDirection = view.sort?.direction;
-    return (0, _react.createElement)(DropdownSubMenuV2, {
+    return (0, _react.createElement)(DropdownSubMenu, {
       key: field.id,
-      trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+      trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
         suffix: (0, _react.createElement)(_components.Icon, {
           icon: _icons.chevronRightSmall
         })
@@ -166,7 +177,7 @@ function SortMenu({
       side: "left"
     }, Object.entries(sortingItemsInfo).map(([direction, info]) => {
       const isActive = currentSortedField && sortedDirection === direction && field.id === currentSortedField.id;
-      return (0, _react.createElement)(DropdownMenuItemV2, {
+      return (0, _react.createElement)(DropdownMenuItem, {
         key: direction,
         prefix: (0, _react.createElement)(_components.Icon, {
           icon: info.icon
@@ -195,22 +206,28 @@ function SortMenu({
     }));
   }));
 }
+const VIEW_TYPE_ICONS = {
+  list: _icons.blockTable,
+  grid: _icons.grid,
+  'side-by-side': _icons.columns
+};
 function ViewActions({
   fields,
   view,
-  onChangeView
+  onChangeView,
+  supportedLayouts
 }) {
-  return (0, _react.createElement)(DropdownMenuV2, {
-    label: (0, _i18n.__)('Actions'),
+  return (0, _react.createElement)(DropdownMenu, {
     trigger: (0, _react.createElement)(_components.Button, {
       variant: "tertiary",
-      icon: _icons.blockTable
-    }, (0, _i18n.__)('View'), (0, _react.createElement)(_components.Icon, {
-      icon: _icons.chevronDown
-    }))
-  }, (0, _react.createElement)(DropdownMenuGroupV2, null, (0, _react.createElement)(ViewTypeMenu, {
+      size: "compact",
+      icon: VIEW_TYPE_ICONS[view.type] || VIEW_TYPE_ICONS.list,
+      label: (0, _i18n.__)('View options')
+    })
+  }, (0, _react.createElement)(DropdownMenuGroup, null, (0, _react.createElement)(ViewTypeMenu, {
     view: view,
-    onChangeView: onChangeView
+    onChangeView: onChangeView,
+    supportedLayouts: supportedLayouts
   }), (0, _react.createElement)(SortMenu, {
     fields: fields,
     view: view,

package/build/components/dataviews/view-actions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_icons","_i18n","_lockUnlock","DropdownMenuV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2","unlock","componentsPrivateApis","availableViews","id","label","__","ViewTypeMenu","view","onChangeView","activeView","find","v","type","_react","createElement","trigger","suffix","Fragment","Icon","icon","chevronRightSmall","map","availableView","key","prefix","check","onSelect","event","preventDefault","role","PAGE_SIZE_VALUES","PageSizeMenu","perPage","size","page","FieldsVisibilityMenu","fields","hidableFields","filter","field","enableHiding","length","hiddenFields","includes","header","sortingItemsInfo","asc","arrowUp","desc","arrowDown","SortMenu","sortableFields","enableSorting","currentSortedField","sort","sortedDirection","direction","side","Object","entries","info","isActive","undefined","ViewActions","Button","variant","blockTable","chevronDown"],"sources":["@wordpress/edit-site/src/components/dataviews/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport {\n\tchevronRightSmall,\n\tcheck,\n\tblockTable,\n\tchevronDown,\n\tarrowUp,\n\tarrowDown,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tDropdownMenuV2,\n\tDropdownMenuGroupV2,\n\tDropdownMenuItemV2,\n\tDropdownSubMenuV2,\n\tDropdownSubMenuTriggerV2,\n} = unlock( componentsPrivateApis );\n\nconst availableViews = [\n\t{\n\t\tid: 'list',\n\t\tlabel: __( 'List' ),\n\t},\n\t{\n\t\tid: 'grid',\n\t\tlabel: __( 'Grid' ),\n\t},\n];\n\nfunction ViewTypeMenu( { view, onChangeView } ) {\n\tconst activeView = availableViews.find( ( v ) => view.type === v.id );\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ activeView.label }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ availableViews.map( ( availableView ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ availableView.id }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tavailableView.id === view.type && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( { ...view, type: availableView.id } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// TODO: check about role and a11y.\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableView.label }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nconst PAGE_SIZE_VALUES = [ 5, 20, 50 ];\nfunction PageSizeMenu( { view, onChangeView } ) {\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ view.perPage }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ /* TODO: probably label per view type. */ }\n\t\t\t\t\t{ __( 'Rows per page' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( size ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ size }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tview.perPage === size && <Icon icon={ check } />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( { ...view, perPage: size, page: 1 } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// TODO: check about role and a11y.\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ size }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nfunction FieldsVisibilityMenu( { view, onChangeView, fields } ) {\n\tconst hidableFields = fields.filter(\n\t\t( field ) => field.enableHiding !== false\n\t);\n\tif ( ! hidableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Fields' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ hidableFields?.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t! view.hiddenFields?.includes( field.id ) && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\thiddenFields: view.hiddenFields?.includes(\n\t\t\t\t\t\t\t\t\tfield.id\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t? view.hiddenFields.filter(\n\t\t\t\t\t\t\t\t\t\t\t( id ) => id !== field.id\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: [ ...view.hiddenFields, field.id ],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\n// This object is used to construct the sorting options per sortable field.\nconst sortingItemsInfo = {\n\tasc: { icon: arrowUp, label: __( 'Sort ascending' ) },\n\tdesc: { icon: arrowDown, label: __( 'Sort descending' ) },\n};\nfunction SortMenu( { fields, view, onChangeView } ) {\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = fields.find(\n\t\t( field ) => field.id === view.sort?.field\n\t);\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ currentSortedField?.header }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Sort by' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ sortableFields?.map( ( field ) => {\n\t\t\t\tconst sortedDirection = view.sort?.direction;\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownSubMenuV2\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tside=\"left\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( sortingItemsInfo ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\tcurrentSortedField &&\n\t\t\t\t\t\t\t\t\tsortedDirection === direction &&\n\t\t\t\t\t\t\t\t\tfield.id === currentSortedField.id;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\t\t\t\t\tprefix={ <Icon icon={ info.icon } /> }\n\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\tisActive && <Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tsortedDirection === direction\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsort: undefined,\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} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfield: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdirection,\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} );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItemV2>\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</DropdownSubMenuV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nexport default function ViewActions( { fields, view, onChangeView } ) {\n\treturn (\n\t\t<DropdownMenuV2\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\ttrigger={\n\t\t\t\t<Button variant=\"tertiary\" icon={ blockTable }>\n\t\t\t\t\t{ __( 'View' ) }\n\t\t\t\t\t<Icon icon={ chevronDown } />\n\t\t\t\t</Button>\n\t\t\t}\n\t\t>\n\t\t\t<DropdownMenuGroupV2>\n\t\t\t\t<ViewTypeMenu view={ view } onChangeView={ onChangeView } />\n\t\t\t\t<SortMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<FieldsVisibilityMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<PageSizeMenu view={ view } onChangeView={ onChangeView } />\n\t\t\t</DropdownMenuGroupV2>\n\t\t</DropdownMenuV2>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_icons","_i18n","_lockUnlock","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownSubMenuV2","DropdownSubMenu","DropdownSubMenuTriggerV2","DropdownSubMenuTrigger","unlock","componentsPrivateApis","availableViews","id","label","__","ViewTypeMenu","view","onChangeView","supportedLayouts","_availableViews","filter","_view","includes","length","activeView","find","v","type","_react","createElement","trigger","suffix","Fragment","Icon","icon","chevronRightSmall","map","availableView","key","prefix","check","onSelect","event","preventDefault","role","PAGE_SIZE_VALUES","PageSizeMenu","perPage","size","page","FieldsVisibilityMenu","fields","hidableFields","field","enableHiding","hiddenFields","header","sortingItemsInfo","asc","arrowUp","desc","arrowDown","SortMenu","sortableFields","enableSorting","currentSortedField","sort","sortedDirection","direction","side","Object","entries","info","isActive","undefined","VIEW_TYPE_ICONS","list","blockTable","grid","columns","ViewActions","Button","variant"],"sources":["@wordpress/edit-site/src/components/dataviews/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport {\n\tchevronRightSmall,\n\tcheck,\n\tblockTable,\n\tarrowUp,\n\tarrowDown,\n\tgrid,\n\tcolumns,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownSubMenuV2: DropdownSubMenu,\n\tDropdownSubMenuTriggerV2: DropdownSubMenuTrigger,\n} = unlock( componentsPrivateApis );\n\nconst availableViews = [\n\t{\n\t\tid: 'list',\n\t\tlabel: __( 'List' ),\n\t},\n\t{\n\t\tid: 'grid',\n\t\tlabel: __( 'Grid' ),\n\t},\n\t{\n\t\tid: 'side-by-side',\n\t\tlabel: __( 'Side by side' ),\n\t},\n];\n\nfunction ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {\n\tlet _availableViews = availableViews;\n\tif ( supportedLayouts ) {\n\t\t_availableViews = _availableViews.filter( ( _view ) =>\n\t\t\tsupportedLayouts.includes( _view.id )\n\t\t);\n\t}\n\tif ( _availableViews.length === 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = _availableViews.find( ( v ) => view.type === v.id );\n\treturn (\n\t\t<DropdownSubMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ activeView.label }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t}\n\t\t>\n\t\t\t{ _availableViews.map( ( availableView ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ availableView.id }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tavailableView.id === view.type && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( { ...view, type: availableView.id } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// TODO: check about role and a11y.\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableView.label }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenu>\n\t);\n}\n\nconst PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];\nfunction PageSizeMenu( { view, onChangeView } ) {\n\treturn (\n\t\t<DropdownSubMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ view.perPage }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ /* TODO: probably label per view type. */ }\n\t\t\t\t\t{ __( 'Rows per page' ) }\n\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t}\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( size ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ size }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tview.perPage === size && <Icon icon={ check } />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( { ...view, perPage: size, page: 1 } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// TODO: check about role and a11y.\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ size }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenu>\n\t);\n}\n\nfunction FieldsVisibilityMenu( { view, onChangeView, fields } ) {\n\tconst hidableFields = fields.filter(\n\t\t( field ) => field.enableHiding !== false\n\t);\n\tif ( ! hidableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownSubMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Fields' ) }\n\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t}\n\t\t>\n\t\t\t{ hidableFields?.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t! view.hiddenFields?.includes( field.id ) && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\thiddenFields: view.hiddenFields?.includes(\n\t\t\t\t\t\t\t\t\tfield.id\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t? view.hiddenFields.filter(\n\t\t\t\t\t\t\t\t\t\t\t( id ) => id !== field.id\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: [ ...view.hiddenFields, field.id ],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenu>\n\t);\n}\n\n// This object is used to construct the sorting options per sortable field.\nconst sortingItemsInfo = {\n\tasc: { icon: arrowUp, label: __( 'Sort ascending' ) },\n\tdesc: { icon: arrowDown, label: __( 'Sort descending' ) },\n};\nfunction SortMenu( { fields, view, onChangeView } ) {\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = fields.find(\n\t\t( field ) => field.id === view.sort?.field\n\t);\n\treturn (\n\t\t<DropdownSubMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ currentSortedField?.header }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Sort by' ) }\n\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t}\n\t\t>\n\t\t\t{ sortableFields?.map( ( field ) => {\n\t\t\t\tconst sortedDirection = view.sort?.direction;\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownSubMenu\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tside=\"left\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( sortingItemsInfo ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\tcurrentSortedField &&\n\t\t\t\t\t\t\t\t\tsortedDirection === direction &&\n\t\t\t\t\t\t\t\t\tfield.id === currentSortedField.id;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\t\t\t\t\tprefix={ <Icon icon={ info.icon } /> }\n\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\tisActive && <Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tsortedDirection === direction\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsort: undefined,\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} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfield: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdirection,\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} );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\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</DropdownSubMenu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenu>\n\t);\n}\n\nconst VIEW_TYPE_ICONS = { list: blockTable, grid, 'side-by-side': columns };\n\nexport default function ViewActions( {\n\tfields,\n\tview,\n\tonChangeView,\n\tsupportedLayouts,\n} ) {\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={\n\t\t\t\t\t\tVIEW_TYPE_ICONS[ view.type ] || VIEW_TYPE_ICONS.list\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'View options' ) }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<DropdownMenuGroup>\n\t\t\t\t<ViewTypeMenu\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t/>\n\t\t\t\t<SortMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<FieldsVisibilityMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<PageSizeMenu view={ view } onChangeView={ onChangeView } />\n\t\t\t</DropdownMenuGroup>\n\t\t</DropdownMenu>\n\t);\n}\n"],"mappings":"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"}

package/build/components/dataviews/view-grid.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ViewGrid = ViewGrid;
 var _react = require("react");
 var _components = require("@wordpress/components");
+var _compose = require("@wordpress/compose");
 var _itemActions = _interopRequireDefault(require("./item-actions"));
 /**
  * WordPress dependencies
@@ -20,40 +21,62 @@ function ViewGrid({
   data,
   fields,
   view,
-  actions
+  actions,
+  getItemId
 }) {
   const mediaField = fields.find(field => field.id === view.layout.mediaField);
-  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && 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 = (0, _compose.useAsyncList)(data, {
+    step: 3
+  });
   return (0, _react.createElement)(_components.__experimentalGrid, {
     gap: 8,
     columns: 2,
-    alignment: "top"
-  }, data.map((item, index) => {
-    return (0, _react.createElement)(_components.__experimentalVStack, {
-      key: index
-    }, (0, _react.createElement)("div", {
-      className: "dataviews-view-grid__media"
-    }, mediaField?.render({
+    alignment: "top",
+    className: "dataviews-grid-view"
+  }, shownData.map((item, index) => (0, _react.createElement)(_components.__experimentalVStack, {
+    spacing: 3,
+    key: getItemId?.(item) || index,
+    className: "dataviews-view-grid__card"
+  }, (0, _react.createElement)("div", {
+    className: "dataviews-view-grid__media"
+  }, mediaField?.render({
+    item,
+    view
+  })), (0, _react.createElement)(_components.__experimentalHStack, {
+    className: "dataviews-view-grid__title",
+    justify: "space-between"
+  }, primaryField?.render({
+    item,
+    view
+  }), (0, _react.createElement)(_itemActions.default, {
+    item: item,
+    actions: actions,
+    isCompact: true
+  })), (0, _react.createElement)(_components.__experimentalVStack, {
+    className: "dataviews-view-grid__fields",
+    spacing: 3
+  }, visibleFields.map(field => {
+    const renderedValue = field.render({
       item,
       view
-    }) || (0, _react.createElement)(_components.Placeholder, {
-      withIllustration: true,
-      style: {
-        width: '100%',
-        minHeight: '200px'
-      }
-    })), (0, _react.createElement)(_components.__experimentalHStack, {
-      justify: "space-between",
-      alignment: "top"
-    }, (0, _react.createElement)(_components.FlexBlock, null, (0, _react.createElement)(_components.__experimentalVStack, null, visibleFields.map(field => (0, _react.createElement)("div", {
-      key: field.id
+    });
+    if (!renderedValue) {
+      return null;
+    }
+    return (0, _react.createElement)(_components.__experimentalVStack, {
+      className: "dataviews-view-grid__field",
+      key: field.id,
+      spacing: 1
+    }, (0, _react.createElement)("div", {
+      className: "dataviews-view-grid__field-header"
+    }, field.header), (0, _react.createElement)("div", {
+      className: "dataviews-view-grid__field-value"
     }, field.render({
       item,
       view
-    }))))), (0, _react.createElement)(_components.FlexBlock, null, (0, _react.createElement)(_itemActions.default, {
-      item: item,
-      actions: actions
-    }))));
-  }));
+    })));
+  })))));
 }
 //# sourceMappingURL=view-grid.js.map

package/build/components/dataviews/view-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_itemActions","_interopRequireDefault","ViewGrid","data","fields","view","actions","mediaField","find","field","id","layout","visibleFields","filter","hiddenFields","includes","_react","createElement","__experimentalGrid","gap","columns","alignment","map","item","index","__experimentalVStack","key","className","render","Placeholder","withIllustration","style","width","minHeight","__experimentalHStack","justify","FlexBlock","default"],"sources":["@wordpress/edit-site/src/components/dataviews/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\tFlexBlock,\n\tPlaceholder,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\n\nexport function ViewGrid( { data, fields, view, actions } ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\tfield.id !== view.layout.mediaField\n\t);\n\treturn (\n\t\t<Grid gap={ 8 } columns={ 2 } alignment=\"top\">\n\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack key={ index }>\n\t\t\t\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t\t\t\t{ mediaField?.render( { item, view } ) || (\n\t\t\t\t\t\t\t\t<Placeholder\n\t\t\t\t\t\t\t\t\twithIllustration\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\t\tminHeight: '200px',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<HStack justify=\"space-between\" alignment=\"top\">\n\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t\t\t<div key={ field.id }>\n\t\t\t\t\t\t\t\t\t\t\t{ field.render( { item, view } ) }\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAWA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AAdA;AACA;AACA;;AASA;AACA;AACA;;AAGO,SAASG,QAAQA,CAAE;EAAEC,IAAI;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAQ,CAAC,EAAG;EAC3D,MAAMC,UAAU,GAAGH,MAAM,CAACI,IAAI,CAC3BC,KAAK,IAAMA,KAAK,CAACC,EAAE,KAAKL,IAAI,CAACM,MAAM,CAACJ,UACvC,CAAC;EACD,MAAMK,aAAa,GAAGR,MAAM,CAACS,MAAM,CAChCJ,KAAK,IACN,CAAEJ,IAAI,CAACS,YAAY,CAACC,QAAQ,CAAEN,KAAK,CAACC,EAAG,CAAC,IACxCD,KAAK,CAACC,EAAE,KAAKL,IAAI,CAACM,MAAM,CAACJ,UAC3B,CAAC;EACD,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAoB,kBAAI;IAACC,GAAG,EAAG,CAAG;IAACC,OAAO,EAAG,CAAG;IAACC,SAAS,EAAC;EAAK,GAC1ClB,IAAI,CAACmB,GAAG,CAAE,CAAEC,IAAI,EAAEC,KAAK,KAAM;IAC9B,OACC,IAAAR,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAA2B,oBAAM;MAACC,GAAG,EAAGF;IAAO,GACpB,IAAAR,MAAA,CAAAC,aAAA;MAAKU,SAAS,EAAC;IAA4B,GACxCpB,UAAU,EAAEqB,MAAM,CAAE;MAAEL,IAAI;MAAElB;IAAK,CAAE,CAAC,IACrC,IAAAW,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAA+B,WAAW;MACXC,gBAAgB;MAChBC,KAAK,EAAG;QACPC,KAAK,EAAE,MAAM;QACbC,SAAS,EAAE;MACZ;IAAG,CACH,CAEE,CAAC,EAEN,IAAAjB,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAoC,oBAAM;MAACC,OAAO,EAAC,eAAe;MAACd,SAAS,EAAC;IAAK,GAC9C,IAAAL,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAsC,SAAS,QACT,IAAApB,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAA2B,oBAAM,QACJb,aAAa,CAACU,GAAG,CAAIb,KAAK,IAC3B,IAAAO,MAAA,CAAAC,aAAA;MAAKS,GAAG,EAAGjB,KAAK,CAACC;IAAI,GAClBD,KAAK,CAACmB,MAAM,CAAE;MAAEL,IAAI;MAAElB;IAAK,CAAE,CAC3B,CACJ,CACK,CACE,CAAC,EACZ,IAAAW,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAsC,SAAS,QACT,IAAApB,MAAA,CAAAC,aAAA,EAACjB,YAAA,CAAAqC,OAAW;MACXd,IAAI,EAAGA,IAAM;MACbjB,OAAO,EAAGA;IAAS,CACnB,CACS,CACJ,CACD,CAAC;EAEX,CAAE,CACG,CAAC;AAET"}
+{"version":3,"names":["_components","require","_compose","_itemActions","_interopRequireDefault","ViewGrid","data","fields","view","actions","getItemId","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","shownData","useAsyncList","step","_react","createElement","__experimentalGrid","gap","columns","alignment","className","map","item","index","__experimentalVStack","spacing","key","render","__experimentalHStack","justify","default","isCompact","renderedValue","header"],"sources":["@wordpress/edit-site/src/components/dataviews/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} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\n\nexport function ViewGrid( { data, fields, view, actions, getItemId } ) {\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\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{ shownData.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, view } ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__title\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ primaryField?.render( { item, view } ) }\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\tview,\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, view } ) }\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/components/dataviews/view-list.js

@@ -8,11 +8,13 @@ exports.default = void 0;
 var _react = require("react");
 var _reactTable = require("@tanstack/react-table");
 var _i18n = require("@wordpress/i18n");
+var _compose = require("@wordpress/compose");
 var _icons = require("@wordpress/icons");
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _lockUnlock = require("../../lock-unlock");
 var _itemActions = _interopRequireDefault(require("./item-actions"));
+var _constants = require("./constants");
 /**
  * External dependencies
  */
@@ -26,10 +28,12 @@ var _itemActions = _interopRequireDefault(require("./item-actions"));
  */
 
 const {
-  DropdownMenuV2,
-  DropdownMenuGroupV2,
-  DropdownMenuItemV2,
-  DropdownMenuSeparatorV2
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuGroupV2: DropdownMenuGroup,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuSeparatorV2: DropdownMenuSeparator,
+  DropdownSubMenuV2: DropdownSubMenu,
+  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger
 } = (0, _lockUnlock.unlock)(_components.privateApis);
 const EMPTY_OBJECT = {};
 const sortingItemsInfo = {
@@ -60,7 +64,15 @@ function HeaderMenu({
     return text;
   }
   const sortedDirection = header.column.getIsSorted();
-  return (0, _react.createElement)(DropdownMenuV2, {
+  let filter;
+  if (header.column.columnDef.type === _constants.ENUMERATION_TYPE) {
+    filter = {
+      field: header.column.columnDef.id,
+      elements: header.column.columnDef.elements || []
+    };
+  }
+  const isFilterable = !!filter;
+  return (0, _react.createElement)(DropdownMenu, {
     align: "start",
     trigger: (0, _react.createElement)(_components.Button, {
       icon: sortIcons[header.column.getIsSorted()],
@@ -70,7 +82,7 @@ function HeaderMenu({
         padding: 0
       }
     })
-  }, (0, _react.createElement)(WithSeparators, null, isSortable && (0, _react.createElement)(DropdownMenuGroupV2, null, Object.entries(sortingItemsInfo).map(([direction, info]) => (0, _react.createElement)(DropdownMenuItemV2, {
+  }, (0, _react.createElement)(WithSeparators, null, isSortable && (0, _react.createElement)(DropdownMenuGroup, null, Object.entries(sortingItemsInfo).map(([direction, info]) => (0, _react.createElement)(DropdownMenuItem, {
     key: direction,
     prefix: (0, _react.createElement)(_components.Icon, {
       icon: info.icon
@@ -89,7 +101,7 @@ function HeaderMenu({
         }]);
       }
     }
-  }, info.label))), isHidable && (0, _react.createElement)(DropdownMenuItemV2, {
+  }, info.label))), isHidable && (0, _react.createElement)(DropdownMenuItem, {
     prefix: (0, _react.createElement)(_components.Icon, {
       icon: _icons.unseen
     }),
@@ -97,14 +109,50 @@ function HeaderMenu({
       event.preventDefault();
       header.column.getToggleVisibilityHandler()(event);
     }
-  }, (0, _i18n.__)('Hide'))));
+  }, (0, _i18n.__)('Hide')), isFilterable && (0, _react.createElement)(DropdownMenuGroup, null, (0, _react.createElement)(DropdownSubMenu, {
+    key: filter.field,
+    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
+      prefix: (0, _react.createElement)(_components.Icon, {
+        icon: _icons.funnel
+      }),
+      suffix: (0, _react.createElement)(_components.Icon, {
+        icon: _icons.chevronRightSmall
+      })
+    }, (0, _i18n.__)('Filter by'))
+  }, filter.elements.map(element => {
+    let isActive = false;
+    const columnFilters = dataView.getState().columnFilters;
+    const columnFilter = columnFilters.find(f => Object.keys(f)[0].split(':')[0] === filter.field);
+    if (columnFilter) {
+      const value = Object.values(columnFilter)[0];
+      // 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.
+      isActive = element.value == value; // eslint-disable-line eqeqeq
+    }
+
+    return (0, _react.createElement)(DropdownMenuItem, {
+      key: element.value,
+      suffix: isActive && (0, _react.createElement)(_components.Icon, {
+        icon: _icons.check
+      }),
+      onSelect: () => {
+        const otherFilters = columnFilters?.filter(f => {
+          const [field, operator] = Object.keys(f)[0].split(':');
+          return field !== filter.field || operator !== _constants.OPERATOR_IN;
+        });
+        dataView.setColumnFilters([...otherFilters, {
+          [filter.field + ':in']: isActive ? undefined : element.value
+        }]);
+      }
+    }, element.label);
+  })))));
 }
 function WithSeparators({
   children
 }) {
   return _element.Children.toArray(children).filter(Boolean).map((child, i) => (0, _react.createElement)(_element.Fragment, {
     key: i
-  }, i > 0 && (0, _react.createElement)(DropdownMenuSeparatorV2, null), child));
+  }, i > 0 && (0, _react.createElement)(DropdownMenuSeparator, null), child));
 }
 function ViewList({
   view,
@@ -112,6 +160,7 @@ function ViewList({
   fields,
   actions,
   data,
+  getItemId,
   isLoading = false,
   paginationInfo
 }) {
@@ -135,7 +184,7 @@ function ViewList({
     });
     if (actions?.length) {
       _columns.push({
-        header: (0, _react.createElement)(_components.VisuallyHidden, null, (0, _i18n.__)('Actions')),
+        header: (0, _i18n.__)('Actions'),
         id: 'actions',
         cell: props => {
           return (0, _react.createElement)(_itemActions.default, {
@@ -157,8 +206,63 @@ function ViewList({
       [fieldId]: false
     }), {});
   }, [view.hiddenFields]);
+
+  /**
+   * Transform the filters from the view format into the tanstack columns filter format.
+   *
+   * Input:
+   *
+   * view.filters = [
+   *   { field: 'date', operator: 'before', value: '2020-01-01' },
+   *   { field: 'date', operator: 'after', value: '2020-01-01' },
+   * ]
+   *
+   * Output:
+   *
+   * columnFilters = [
+   *   { "date:before": '2020-01-01' },
+   *   { "date:after": '2020-01-01' }
+   * ]
+   *
+   * @param {Array} filters The view filters to transform.
+   * @return {Array} The transformed TanStack column filters.
+   */
+  const toTanStackColumnFilters = filters => filters?.map(filter => ({
+    [filter.field + ':' + filter.operator]: filter.value
+  }));
+
+  /**
+   * Transform the filters from the view format into the tanstack columns filter format.
+   *
+   * Input:
+   *
+   * columnFilters = [
+   *   { "date:before": '2020-01-01'},
+   *   { "date:after": '2020-01-01' }
+   * ]
+   *
+   * Output:
+   *
+   * view.filters = [
+   *   { field: 'date', operator: 'before', value: '2020-01-01' },
+   *   { field: 'date', operator: 'after', value: '2020-01-01' },
+   * ]
+   *
+   * @param {Array} filters The TanStack column filters to transform.
+   * @return {Array} The transformed view filters.
+   */
+  const fromTanStackColumnFilters = filters => filters.map(filter => {
+    const [key, value] = Object.entries(filter)[0];
+    const [field, operator] = key.split(':');
+    return {
+      field,
+      operator,
+      value
+    };
+  });
+  const shownData = (0, _compose.useAsyncList)(data);
   const dataView = (0, _reactTable.useReactTable)({
-    data,
+    data: shownData,
     columns,
     manualSorting: true,
     manualFiltering: true,
@@ -170,12 +274,14 @@ function ViewList({
         desc: view.sort.direction === 'desc'
       }] : [],
       globalFilter: view.search,
+      columnFilters: toTanStackColumnFilters(view.filters),
       pagination: {
         pageIndex: view.page,
         pageSize: view.perPage
       },
       columnVisibility: columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : EMPTY_OBJECT
     },
+    getRowId: getItemId,
     onSortingChange: sortingUpdater => {
       onChangeView(currentView => {
         const sort = typeof sortingUpdater === 'function' ? sortingUpdater(currentView.sort ? [{
@@ -219,7 +325,14 @@ function ViewList({
       onChangeView({
         ...view,
         search: value,
-        page: 0
+        page: 1
+      });
+    },
+    onColumnFiltersChange: columnFiltersUpdater => {
+      onChangeView({
+        ...view,
+        filters: fromTanStackColumnFilters(columnFiltersUpdater()),
+        page: 1
       });
     },
     onPaginationChange: paginationUpdater => {
@@ -263,17 +376,20 @@ function ViewList({
     colSpan: header.colSpan,
     style: {
       width: header.column.columnDef.width || undefined,
+      minWidth: header.column.columnDef.minWidth || undefined,
       maxWidth: header.column.columnDef.maxWidth || undefined
-    }
+    },
+    "data-field-id": header.id
   }, (0, _react.createElement)(HeaderMenu, {
     dataView: dataView,
     header: header
   })))))), (0, _react.createElement)("tbody", null, rows.map(row => (0, _react.createElement)("tr", {
     key: row.id
   }, row.getVisibleCells().map(cell => (0, _react.createElement)("td", {
-    key: cell.id,
+    key: cell.column.id,
     style: {
       width: cell.column.columnDef.width || undefined,
+      minWidth: cell.column.columnDef.minWidth || undefined,
       maxWidth: cell.column.columnDef.maxWidth || undefined
     }
   }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()))))))), !hasRows && (0, _react.createElement)("p", null, (0, _i18n.__)('no results')));