@wordpress/edit-site 5.20.1 → 5.21.1-next.f8d8eceb.0

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

@@ -2,7 +2,7 @@ import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
-import { Button, Icon, SelectControl, privateApis as componentsPrivateApis, __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper } from '@wordpress/components';
+import { Button, Icon, privateApis as componentsPrivateApis } from '@wordpress/components';
 import { chevronRightSmall, check, blockTable, chevronDown, arrowUp, arrowDown } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -17,50 +17,69 @@ const {
   DropdownSubMenuV2,
   DropdownSubMenuTriggerV2
 } = unlock(componentsPrivateApis);
-export const PAGE_SIZE_VALUES = [5, 20, 50];
-export function PageSizeControl({
-  dataView
+const availableViews = [{
+  id: 'list',
+  label: __('List')
+}, {
+  id: 'grid',
+  label: __('Grid')
+}];
+function ViewTypeMenu({
+  view,
+  onChangeView
 }) {
-  const label = __('Rows per page:');
-  return createElement(SelectControl, {
-    __nextHasNoMarginBottom: true,
-    label: label,
-    hideLabelFromVision: true
-    // TODO: This should probably use a label based on the wanted design
-    // and we could remove InputControlPrefixWrapper usage.
-    ,
-    prefix: createElement(InputControlPrefixWrapper, {
-      as: "span",
-      className: "dataviews__per-page-control-prefix"
-    }, label),
-    value: dataView.getState().pagination.pageSize,
-    options: PAGE_SIZE_VALUES.map(pageSize => ({
-      value: pageSize,
-      label: pageSize
-    })),
-    onChange: value => dataView.setPageSize(+value)
-  });
+  const activeView = availableViews.find(v => view.type === v.id);
+  return createElement(DropdownSubMenuV2, {
+    trigger: createElement(DropdownSubMenuTriggerV2, {
+      suffix: createElement(Fragment, null, activeView.label, createElement(Icon, {
+        icon: chevronRightSmall
+      }))
+    }, __('Layout'))
+  }, availableViews.map(availableView => {
+    return createElement(DropdownMenuItemV2, {
+      key: availableView.id,
+      prefix: availableView.id === view.type && createElement(Icon, {
+        icon: check
+      }),
+      onSelect: event => {
+        // We need to handle this on DropDown component probably..
+        event.preventDefault();
+        onChangeView({
+          ...view,
+          type: availableView.id
+        });
+      }
+      // TODO: check about role and a11y.
+      ,
+      role: "menuitemcheckbox"
+    }, availableView.label);
+  }));
 }
+const PAGE_SIZE_VALUES = [5, 20, 50];
 function PageSizeMenu({
-  dataView
+  view,
+  onChangeView
 }) {
-  const currenPageSize = dataView.getState().pagination.pageSize;
   return createElement(DropdownSubMenuV2, {
     trigger: createElement(DropdownSubMenuTriggerV2, {
-      suffix: createElement(Fragment, null, currenPageSize, createElement(Icon, {
+      suffix: createElement(Fragment, null, view.perPage, createElement(Icon, {
         icon: chevronRightSmall
       }))
     }, __('Rows per page'))
   }, PAGE_SIZE_VALUES.map(size => {
     return createElement(DropdownMenuItemV2, {
       key: size,
-      prefix: currenPageSize === size && createElement(Icon, {
+      prefix: view.perPage === size && createElement(Icon, {
         icon: check
       }),
       onSelect: event => {
         // We need to handle this on DropDown component probably..
         event.preventDefault();
-        dataView.setPageSize(size);
+        onChangeView({
+          ...view,
+          perPage: size,
+          page: 1
+        });
       }
       // TODO: check about role and a11y.
       ,
@@ -69,10 +88,12 @@ function PageSizeMenu({
   }));
 }
 function FieldsVisibilityMenu({
-  dataView
+  view,
+  onChangeView,
+  fields
 }) {
-  const hideableFields = dataView.getAllColumns().filter(columnn => columnn.getCanHide());
-  if (!hideableFields?.length) {
+  const hidableFields = fields.filter(field => field.enableHiding !== false);
+  if (!hidableFields?.length) {
     return null;
   }
   return createElement(DropdownSubMenuV2, {
@@ -81,18 +102,21 @@ function FieldsVisibilityMenu({
         icon: chevronRightSmall
       })
     }, __('Fields'))
-  }, hideableFields?.map(field => {
+  }, hidableFields?.map(field => {
     return createElement(DropdownMenuItemV2, {
       key: field.id,
-      prefix: field.getIsVisible() && createElement(Icon, {
+      prefix: !view.hiddenFields?.includes(field.id) && createElement(Icon, {
         icon: check
       }),
       onSelect: event => {
         event.preventDefault();
-        field.getToggleVisibilityHandler()(event);
+        onChangeView({
+          ...view,
+          hiddenFields: view.hiddenFields?.includes(field.id) ? view.hiddenFields.filter(id => id !== field.id) : [...view.hiddenFields, field.id]
+        });
       },
       role: "menuitemcheckbox"
-    }, field.columnDef.header);
+    }, field.header);
   }));
 }
 
@@ -108,47 +132,56 @@ const sortingItemsInfo = {
   }
 };
 function SortMenu({
-  dataView
+  fields,
+  view,
+  onChangeView
 }) {
-  const sortableFields = dataView.getAllColumns().filter(columnn => columnn.getCanSort());
+  const sortableFields = fields.filter(field => field.enableSorting !== false);
   if (!sortableFields?.length) {
     return null;
   }
-  const currentSortedField = sortableFields.find(field => field.getIsSorted());
+  const currentSortedField = fields.find(field => field.id === view.sort?.field);
   return createElement(DropdownSubMenuV2, {
     trigger: createElement(DropdownSubMenuTriggerV2, {
-      suffix: createElement(Fragment, null, currentSortedField?.columnDef.header, createElement(Icon, {
+      suffix: createElement(Fragment, null, currentSortedField?.header, createElement(Icon, {
         icon: chevronRightSmall
       }))
     }, __('Sort by'))
   }, sortableFields?.map(field => {
-    const sortedDirection = field.getIsSorted();
+    const sortedDirection = view.sort?.direction;
     return createElement(DropdownSubMenuV2, {
       key: field.id,
       trigger: createElement(DropdownSubMenuTriggerV2, {
         suffix: createElement(Icon, {
           icon: chevronRightSmall
         })
-      }, field.columnDef.header),
+      }, field.header),
       side: "left"
     }, Object.entries(sortingItemsInfo).map(([direction, info]) => {
+      const isActive = currentSortedField && sortedDirection === direction && field.id === currentSortedField.id;
       return createElement(DropdownMenuItemV2, {
         key: direction,
         prefix: createElement(Icon, {
           icon: info.icon
         }),
-        suffix: sortedDirection === direction && createElement(Icon, {
+        suffix: isActive && createElement(Icon, {
           icon: check
         }),
         onSelect: event => {
           event.preventDefault();
           if (sortedDirection === direction) {
-            dataView.resetSorting();
+            onChangeView({
+              ...view,
+              sort: undefined
+            });
           } else {
-            dataView.setSorting([{
-              id: field.id,
-              desc: direction === 'desc'
-            }]);
+            onChangeView({
+              ...view,
+              sort: {
+                field: field.id,
+                direction
+              }
+            });
           }
         }
       }, info.label);
@@ -156,24 +189,32 @@ function SortMenu({
   }));
 }
 export default function ViewActions({
-  dataView,
-  className
+  fields,
+  view,
+  onChangeView
 }) {
   return createElement(DropdownMenuV2, {
     label: __('Actions'),
-    className: className,
     trigger: createElement(Button, {
       variant: "tertiary",
       icon: blockTable
     }, __('View'), createElement(Icon, {
       icon: chevronDown
     }))
-  }, createElement(DropdownMenuGroupV2, null, createElement(SortMenu, {
-    dataView: dataView
+  }, createElement(DropdownMenuGroupV2, null, createElement(ViewTypeMenu, {
+    view: view,
+    onChangeView: onChangeView
+  }), createElement(SortMenu, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
   }), createElement(FieldsVisibilityMenu, {
-    dataView: dataView
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
   }), createElement(PageSizeMenu, {
-    dataView: dataView
+    view: view,
+    onChangeView: onChangeView
   })));
 }
 //# sourceMappingURL=view-actions.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Button","Icon","SelectControl","privateApis","componentsPrivateApis","__experimentalInputControlPrefixWrapper","InputControlPrefixWrapper","chevronRightSmall","check","blockTable","chevronDown","arrowUp","arrowDown","__","unlock","DropdownMenuV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2","PAGE_SIZE_VALUES","PageSizeControl","dataView","label","createElement","__nextHasNoMarginBottom","hideLabelFromVision","prefix","as","className","value","getState","pagination","pageSize","options","map","onChange","setPageSize","PageSizeMenu","currenPageSize","trigger","suffix","Fragment","icon","size","key","onSelect","event","preventDefault","role","FieldsVisibilityMenu","hideableFields","getAllColumns","filter","columnn","getCanHide","length","field","id","getIsVisible","getToggleVisibilityHandler","columnDef","header","sortingItemsInfo","asc","desc","SortMenu","sortableFields","getCanSort","currentSortedField","find","getIsSorted","sortedDirection","side","Object","entries","direction","info","resetSorting","setSorting","ViewActions","variant"],"sources":["@wordpress/edit-site/src/components/dataviews/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\tSelectControl,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\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\nexport const PAGE_SIZE_VALUES = [ 5, 20, 50 ];\n\nexport function PageSizeControl( { dataView } ) {\n\tconst label = __( 'Rows per page:' );\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\t// TODO: This should probably use a label based on the wanted design\n\t\t\t// and we could remove InputControlPrefixWrapper usage.\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper\n\t\t\t\t\tas=\"span\"\n\t\t\t\t\tclassName=\"dataviews__per-page-control-prefix\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\tvalue={ dataView.getState().pagination.pageSize }\n\t\t\toptions={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {\n\t\t\t\tvalue: pageSize,\n\t\t\t\tlabel: pageSize,\n\t\t\t} ) ) }\n\t\t\tonChange={ ( value ) => dataView.setPageSize( +value ) }\n\t\t/>\n\t);\n}\n\nfunction PageSizeMenu( { dataView } ) {\n\tconst currenPageSize = dataView.getState().pagination.pageSize;\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{ currenPageSize }\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\tcurrenPageSize === 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\tdataView.setPageSize( size );\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( { dataView } ) {\n\tconst hideableFields = dataView\n\t\t.getAllColumns()\n\t\t.filter( ( columnn ) => columnn.getCanHide() );\n\tif ( ! hideableFields?.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{ hideableFields?.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\tfield.getIsVisible() && <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\tevent.preventDefault();\n\t\t\t\t\t\t\tfield.getToggleVisibilityHandler()( event );\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.columnDef.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( { dataView } ) {\n\tconst sortableFields = dataView\n\t\t.getAllColumns()\n\t\t.filter( ( columnn ) => columnn.getCanSort() );\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = sortableFields.find( ( field ) =>\n\t\tfield.getIsSorted()\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?.columnDef.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 = field.getIsSorted();\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.columnDef.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\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\tsortedDirection === direction && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\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\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\tdataView.resetSorting();\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\tdataView.setSorting( [\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\tid: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdesc:\n\t\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\t\t'desc',\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( { dataView, className } ) {\n\treturn (\n\t\t<DropdownMenuV2\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\tclassName={ className }\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<SortMenu dataView={ dataView } />\n\t\t\t\t<FieldsVisibilityMenu dataView={ dataView } />\n\t\t\t\t<PageSizeMenu dataView={ dataView } />\n\t\t\t</DropdownMenuGroupV2>\n\t\t</DropdownMenuV2>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["Button","Icon","privateApis","componentsPrivateApis","chevronRightSmall","check","blockTable","chevronDown","arrowUp","arrowDown","__","unlock","DropdownMenuV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2","availableViews","id","label","ViewTypeMenu","view","onChangeView","activeView","find","v","type","createElement","trigger","suffix","Fragment","icon","map","availableView","key","prefix","onSelect","event","preventDefault","role","PAGE_SIZE_VALUES","PageSizeMenu","perPage","size","page","FieldsVisibilityMenu","fields","hidableFields","filter","field","enableHiding","length","hiddenFields","includes","header","sortingItemsInfo","asc","desc","SortMenu","sortableFields","enableSorting","currentSortedField","sort","sortedDirection","direction","side","Object","entries","info","isActive","undefined","ViewActions","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\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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"}

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

@@ -0,0 +1,51 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, FlexBlock, Placeholder } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ItemActions from './item-actions';
+export function ViewGrid({
+  data,
+  fields,
+  view,
+  actions
+}) {
+  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);
+  return createElement(Grid, {
+    gap: 8,
+    columns: 2,
+    alignment: "top"
+  }, data.map((item, index) => {
+    return createElement(VStack, {
+      key: index
+    }, createElement("div", {
+      className: "dataviews-view-grid__media"
+    }, mediaField?.render({
+      item,
+      view
+    }) || createElement(Placeholder, {
+      withIllustration: true,
+      style: {
+        width: '100%',
+        minHeight: '200px'
+      }
+    })), createElement(HStack, {
+      justify: "space-between",
+      alignment: "top"
+    }, createElement(FlexBlock, null, createElement(VStack, null, visibleFields.map(field => createElement("div", {
+      key: field.id
+    }, field.render({
+      item,
+      view
+    }))))), createElement(FlexBlock, null, createElement(ItemActions, {
+      item: item,
+      actions: actions
+    }))));
+  }));
+}
+//# sourceMappingURL=view-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","FlexBlock","Placeholder","ItemActions","ViewGrid","data","fields","view","actions","mediaField","find","field","id","layout","visibleFields","filter","hiddenFields","includes","createElement","gap","columns","alignment","map","item","index","key","className","render","withIllustration","style","width","minHeight","justify"],"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":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,SAAS,EACTC,WAAW,QACL,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,WAAW,MAAM,gBAAgB;AAExC,OAAO,SAASC,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,OACCS,aAAA,CAACtB,IAAI;IAACuB,GAAG,EAAG,CAAG;IAACC,OAAO,EAAG,CAAG;IAACC,SAAS,EAAC;EAAK,GAC1ChB,IAAI,CAACiB,GAAG,CAAE,CAAEC,IAAI,EAAEC,KAAK,KAAM;IAC9B,OACCN,aAAA,CAAClB,MAAM;MAACyB,GAAG,EAAGD;IAAO,GACpBN,aAAA;MAAKQ,SAAS,EAAC;IAA4B,GACxCjB,UAAU,EAAEkB,MAAM,CAAE;MAAEJ,IAAI;MAAEhB;IAAK,CAAE,CAAC,IACrCW,aAAA,CAAChB,WAAW;MACX0B,gBAAgB;MAChBC,KAAK,EAAG;QACPC,KAAK,EAAE,MAAM;QACbC,SAAS,EAAE;MACZ;IAAG,CACH,CAEE,CAAC,EAENb,aAAA,CAACpB,MAAM;MAACkC,OAAO,EAAC,eAAe;MAACX,SAAS,EAAC;IAAK,GAC9CH,aAAA,CAACjB,SAAS,QACTiB,aAAA,CAAClB,MAAM,QACJc,aAAa,CAACQ,GAAG,CAAIX,KAAK,IAC3BO,aAAA;MAAKO,GAAG,EAAGd,KAAK,CAACC;IAAI,GAClBD,KAAK,CAACgB,MAAM,CAAE;MAAEJ,IAAI;MAAEhB;IAAK,CAAE,CAC3B,CACJ,CACK,CACE,CAAC,EACZW,aAAA,CAACjB,SAAS,QACTiB,aAAA,CAACf,WAAW;MACXoB,IAAI,EAAGA,IAAM;MACbf,OAAO,EAAGA;IAAS,CACnB,CACS,CACJ,CACD,CAAC;EAEX,CAAE,CACG,CAAC;AAET"}

package/build-module/components/dataviews/view-list.js

@@ -0,0 +1,274 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import { getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, useReactTable, flexRender } from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { chevronDown, chevronUp, unseen, check, arrowUp, arrowDown } from '@wordpress/icons';
+import { Button, Icon, privateApis as componentsPrivateApis, VisuallyHidden } from '@wordpress/components';
+import { useMemo, Children, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import ItemActions from './item-actions';
+const {
+  DropdownMenuV2,
+  DropdownMenuGroupV2,
+  DropdownMenuItemV2,
+  DropdownMenuSeparatorV2
+} = unlock(componentsPrivateApis);
+const EMPTY_OBJECT = {};
+const sortingItemsInfo = {
+  asc: {
+    icon: arrowUp,
+    label: __('Sort ascending')
+  },
+  desc: {
+    icon: arrowDown,
+    label: __('Sort descending')
+  }
+};
+const sortIcons = {
+  asc: chevronUp,
+  desc: chevronDown
+};
+function HeaderMenu({
+  dataView,
+  header
+}) {
+  if (header.isPlaceholder) {
+    return null;
+  }
+  const text = flexRender(header.column.columnDef.header, header.getContext());
+  const isSortable = !!header.column.getCanSort();
+  const isHidable = !!header.column.getCanHide();
+  if (!isSortable && !isHidable) {
+    return text;
+  }
+  const sortedDirection = header.column.getIsSorted();
+  return createElement(DropdownMenuV2, {
+    align: "start",
+    trigger: createElement(Button, {
+      icon: sortIcons[header.column.getIsSorted()],
+      iconPosition: "right",
+      text: text,
+      style: {
+        padding: 0
+      }
+    })
+  }, createElement(WithSeparators, null, isSortable && createElement(DropdownMenuGroupV2, null, Object.entries(sortingItemsInfo).map(([direction, info]) => createElement(DropdownMenuItemV2, {
+    key: direction,
+    prefix: createElement(Icon, {
+      icon: info.icon
+    }),
+    suffix: sortedDirection === direction && createElement(Icon, {
+      icon: check
+    }),
+    onSelect: event => {
+      event.preventDefault();
+      if (sortedDirection === direction) {
+        dataView.resetSorting();
+      } else {
+        dataView.setSorting([{
+          id: header.column.id,
+          desc: direction === 'desc'
+        }]);
+      }
+    }
+  }, info.label))), isHidable && createElement(DropdownMenuItemV2, {
+    prefix: createElement(Icon, {
+      icon: unseen
+    }),
+    onSelect: event => {
+      event.preventDefault();
+      header.column.getToggleVisibilityHandler()(event);
+    }
+  }, __('Hide'))));
+}
+function WithSeparators({
+  children
+}) {
+  return Children.toArray(children).filter(Boolean).map((child, i) => createElement(Fragment, {
+    key: i
+  }, i > 0 && createElement(DropdownMenuSeparatorV2, null), child));
+}
+function ViewList({
+  view,
+  onChangeView,
+  fields,
+  actions,
+  data,
+  isLoading = false,
+  paginationInfo
+}) {
+  const columns = useMemo(() => {
+    const _columns = fields.map(field => {
+      const {
+        render,
+        getValue,
+        ...column
+      } = field;
+      column.cell = props => render({
+        item: props.row.original,
+        view
+      });
+      if (getValue) {
+        column.accessorFn = item => getValue({
+          item
+        });
+      }
+      return column;
+    });
+    if (actions?.length) {
+      _columns.push({
+        header: createElement(VisuallyHidden, null, __('Actions')),
+        id: 'actions',
+        cell: props => {
+          return createElement(ItemActions, {
+            item: props.row.original,
+            actions: actions
+          });
+        },
+        enableHiding: false
+      });
+    }
+    return _columns;
+  }, [fields, actions, view]);
+  const columnVisibility = useMemo(() => {
+    if (!view.hiddenFields?.length) {
+      return;
+    }
+    return view.hiddenFields.reduce((accumulator, fieldId) => ({
+      ...accumulator,
+      [fieldId]: false
+    }), {});
+  }, [view.hiddenFields]);
+  const dataView = useReactTable({
+    data,
+    columns,
+    manualSorting: true,
+    manualFiltering: true,
+    manualPagination: true,
+    enableRowSelection: true,
+    state: {
+      sorting: view.sort ? [{
+        id: view.sort.field,
+        desc: view.sort.direction === 'desc'
+      }] : [],
+      globalFilter: view.search,
+      pagination: {
+        pageIndex: view.page,
+        pageSize: view.perPage
+      },
+      columnVisibility: columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : EMPTY_OBJECT
+    },
+    onSortingChange: sortingUpdater => {
+      onChangeView(currentView => {
+        const sort = typeof sortingUpdater === 'function' ? sortingUpdater(currentView.sort ? [{
+          id: currentView.sort.field,
+          desc: currentView.sort.direction === 'desc'
+        }] : []) : sortingUpdater;
+        if (!sort.length) {
+          return {
+            ...currentView,
+            sort: {}
+          };
+        }
+        const [{
+          id,
+          desc
+        }] = sort;
+        return {
+          ...currentView,
+          sort: {
+            field: id,
+            direction: desc ? 'desc' : 'asc'
+          }
+        };
+      });
+    },
+    onColumnVisibilityChange: columnVisibilityUpdater => {
+      onChangeView(currentView => {
+        const hiddenFields = Object.entries(columnVisibilityUpdater()).reduce((accumulator, [fieldId, value]) => {
+          if (value) {
+            return accumulator.filter(id => id !== fieldId);
+          }
+          return [...accumulator, fieldId];
+        }, [...(currentView.hiddenFields || [])]);
+        return {
+          ...currentView,
+          hiddenFields
+        };
+      });
+    },
+    onGlobalFilterChange: value => {
+      onChangeView({
+        ...view,
+        search: value,
+        page: 0
+      });
+    },
+    onPaginationChange: paginationUpdater => {
+      onChangeView(currentView => {
+        const {
+          pageIndex,
+          pageSize
+        } = paginationUpdater({
+          pageIndex: currentView.page,
+          pageSize: currentView.perPage
+        });
+        return {
+          ...view,
+          page: pageIndex,
+          perPage: pageSize
+        };
+      });
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    pageCount: paginationInfo.totalPages
+  });
+  const {
+    rows
+  } = dataView.getRowModel();
+  const hasRows = !!rows?.length;
+  if (isLoading) {
+    // TODO:Add spinner or progress bar..
+    return createElement("h3", null, __('Loading'));
+  }
+  return createElement("div", {
+    className: "dataviews-list-view-wrapper"
+  }, hasRows && createElement("table", {
+    className: "dataviews-list-view"
+  }, createElement("thead", null, dataView.getHeaderGroups().map(headerGroup => createElement("tr", {
+    key: headerGroup.id
+  }, headerGroup.headers.map(header => createElement("th", {
+    key: header.id,
+    colSpan: header.colSpan,
+    style: {
+      width: header.column.columnDef.width || undefined,
+      maxWidth: header.column.columnDef.maxWidth || undefined
+    }
+  }, createElement(HeaderMenu, {
+    dataView: dataView,
+    header: header
+  })))))), createElement("tbody", null, rows.map(row => createElement("tr", {
+    key: row.id
+  }, row.getVisibleCells().map(cell => createElement("td", {
+    key: cell.id,
+    style: {
+      width: cell.column.columnDef.width || undefined,
+      maxWidth: cell.column.columnDef.maxWidth || undefined
+    }
+  }, flexRender(cell.column.columnDef.cell, cell.getContext()))))))), !hasRows && createElement("p", null, __('no results')));
+}
+export default ViewList;
+//# sourceMappingURL=view-list.js.map