@wordpress/edit-site 5.20.1 → 5.21.0

package/build-module/components/dataviews/pagination.js

@@ -2,26 +2,53 @@ import { createElement } from "react";
 /**
  * WordPress dependencies
  */
-import { Button, __experimentalHStack as HStack, __experimentalText as Text, __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { Button, __experimentalHStack as HStack, __experimentalText as Text, __experimentalNumberControl as NumberControl, __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, SelectControl } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __, _x, _n } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { PageSizeControl } from './view-actions';
+const PAGE_SIZE_VALUES = [5, 20, 50];
+function PageSizeControl({
+  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__select-control-prefix"
+    }, label),
+    value: view.perPage,
+    options: PAGE_SIZE_VALUES.map(pageSize => ({
+      value: pageSize,
+      label: pageSize
+    })),
+    onChange: value => onChangeView({
+      ...view,
+      perPage: value,
+      page: 1
+    })
+  });
+}
 
 // For now this is copied from the patterns list Pagination component, because
 // the datatable pagination starts from index zero(`0`). Eventually all lists will be
 // using this one.
-export function Pagination({
-  dataView,
-  // If passed, use it, as it's for controlled pagination.
-  totalItems = 0
+function Pagination({
+  view,
+  onChangeView,
+  paginationInfo: {
+    totalItems = 0,
+    totalPages
+  }
 }) {
-  const currentPage = dataView.getState().pagination.pageIndex + 1;
-  const numPages = dataView.getPageCount();
-  const _totalItems = totalItems || dataView.getCoreRowModel().rows.length;
+  if (!totalItems || !totalPages) {
+    return null;
+  }
   return createElement(HStack, {
     expanded: false,
     spacing: 3,
@@ -33,18 +60,24 @@ export function Pagination({
   // translators: %s: Total number of entries.
   sprintf(
   // translators: %s: Total number of entries.
-  _n('%s item', '%s items', _totalItems), _totalItems)), !!_totalItems && createElement(HStack, {
+  _n('%s item', '%s items', totalItems), totalItems)), !!totalItems && createElement(HStack, {
     expanded: false,
     spacing: 1
   }, createElement(Button, {
     variant: "tertiary",
-    onClick: () => dataView.setPageIndex(0),
-    disabled: !dataView.getCanPreviousPage(),
+    onClick: () => onChangeView({
+      ...view,
+      page: 1
+    }),
+    disabled: view.page === 1,
     "aria-label": __('First page')
   }, "\xAB"), createElement(Button, {
     variant: "tertiary",
-    onClick: () => dataView.previousPage(),
-    disabled: !dataView.getCanPreviousPage(),
+    onClick: () => onChangeView({
+      ...view,
+      page: view.page - 1
+    }),
+    disabled: view.page === 1,
     "aria-label": __('Previous page')
   }, "\u2039"), createElement(HStack, {
     justify: "flex-start",
@@ -52,32 +85,45 @@ export function Pagination({
     spacing: 1
   }, createInterpolateElement(sprintf(
   // translators: %1$s: Current page number, %2$s: Total number of pages.
-  _x('<CurrenPageControl /> of %2$s', 'paging'), currentPage, numPages), {
+  _x('<CurrenPageControl /> of %2$s', 'paging'), view.page, totalPages), {
     CurrenPageControl: createElement(NumberControl, {
       "aria-label": __('Current page'),
       min: 1,
-      max: numPages,
+      max: totalPages,
       onChange: value => {
-        if (value > numPages) return;
-        dataView.setPageIndex(value - 1);
+        if (!value || value < 1 || value > totalPages) {
+          return;
+        }
+        onChangeView({
+          ...view,
+          page: value
+        });
       },
       step: "1",
-      value: currentPage,
+      value: view.page,
       isDragEnabled: false,
       spinControls: "none"
     })
   })), createElement(Button, {
     variant: "tertiary",
-    onClick: () => dataView.nextPage(),
-    disabled: !dataView.getCanNextPage(),
+    onClick: () => onChangeView({
+      ...view,
+      page: view.page + 1
+    }),
+    disabled: view.page >= totalPages,
     "aria-label": __('Next page')
   }, "\u203A"), createElement(Button, {
     variant: "tertiary",
-    onClick: () => dataView.setPageIndex(dataView.getPageCount() - 1),
-    disabled: !dataView.getCanNextPage(),
+    onClick: () => onChangeView({
+      ...view,
+      page: totalPages
+    }),
+    disabled: view.page >= totalPages,
     "aria-label": __('Last page')
   }, "\xBB")), createElement(PageSizeControl, {
-    dataView: dataView
+    view: view,
+    onChangeView: onChangeView
   }));
 }
+export default Pagination;
 //# sourceMappingURL=pagination.js.map

package/build-module/components/dataviews/pagination.js.map

@@ -1 +1 @@
-{"version":3,"names":["Button","__experimentalHStack","HStack","__experimentalText","Text","__experimentalNumberControl","NumberControl","createInterpolateElement","sprintf","__","_x","_n","PageSizeControl","Pagination","dataView","totalItems","currentPage","getState","pagination","pageIndex","numPages","getPageCount","_totalItems","getCoreRowModel","rows","length","createElement","expanded","spacing","justify","className","variant","onClick","setPageIndex","disabled","getCanPreviousPage","previousPage","CurrenPageControl","min","max","onChange","value","step","isDragEnabled","spinControls","nextPage","getCanNextPage"],"sources":["@wordpress/edit-site/src/components/dataviews/pagination.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { createInterpolateElement } from '@wordpress/element';\nimport { sprintf, __, _x, _n } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { PageSizeControl } from './view-actions';\n\n// For now this is copied from the patterns list Pagination component, because\n// the datatable pagination starts from index zero(`0`). Eventually all lists will be\n// using this one.\nexport function Pagination( {\n\tdataView,\n\t// If passed, use it, as it's for controlled pagination.\n\ttotalItems = 0,\n} ) {\n\tconst currentPage = dataView.getState().pagination.pageIndex + 1;\n\tconst numPages = dataView.getPageCount();\n\tconst _totalItems = totalItems || dataView.getCoreRowModel().rows.length;\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"space-between\"\n\t\t\tclassName=\"dataviews-pagination\"\n\t\t>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{\n\t\t\t\t\t// translators: %s: Total number of entries.\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t// translators: %s: Total number of entries.\n\t\t\t\t\t\t_n( '%s item', '%s items', _totalItems ),\n\t\t\t\t\t\t_totalItems\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</Text>\n\t\t\t{ !! _totalItems && (\n\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => dataView.setPageIndex( 0 ) }\n\t\t\t\t\t\tdisabled={ ! dataView.getCanPreviousPage() }\n\t\t\t\t\t\taria-label={ __( 'First page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t«\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => dataView.previousPage() }\n\t\t\t\t\t\tdisabled={ ! dataView.getCanPreviousPage() }\n\t\t\t\t\t\taria-label={ __( 'Previous page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t‹\n\t\t\t\t\t</Button>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t// translators: %1$s: Current page number, %2$s: Total number of pages.\n\t\t\t\t\t\t\t\t_x( '<CurrenPageControl /> of %2$s', 'paging' ),\n\t\t\t\t\t\t\t\tcurrentPage,\n\t\t\t\t\t\t\t\tnumPages\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tCurrenPageControl: (\n\t\t\t\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\t\tmax={ numPages }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( value > numPages ) return;\n\t\t\t\t\t\t\t\t\t\t\tdataView.setPageIndex( value - 1 );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tstep=\"1\"\n\t\t\t\t\t\t\t\t\t\tvalue={ currentPage }\n\t\t\t\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t\t\t\t\tspinControls=\"none\"\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) }\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => dataView.nextPage() }\n\t\t\t\t\t\tdisabled={ ! dataView.getCanNextPage() }\n\t\t\t\t\t\taria-label={ __( 'Next page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t›\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tdataView.setPageIndex( dataView.getPageCount() - 1 )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ ! dataView.getCanNextPage() }\n\t\t\t\t\t\taria-label={ __( 'Last page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t»\n\t\t\t\t\t</Button>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t<PageSizeControl dataView={ dataView } />\n\t\t</HStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,MAAM,EACNC,oBAAoB,IAAIC,MAAM,EAC9BC,kBAAkB,IAAIC,IAAI,EAC1BC,2BAA2B,IAAIC,aAAa,QACtC,uBAAuB;AAC9B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,OAAO,EAAEC,EAAE,EAAEC,EAAE,EAAEC,EAAE,QAAQ,iBAAiB;;AAErD;AACA;AACA;AACA,SAASC,eAAe,QAAQ,gBAAgB;;AAEhD;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAE;EAC3BC,QAAQ;EACR;EACAC,UAAU,GAAG;AACd,CAAC,EAAG;EACH,MAAMC,WAAW,GAAGF,QAAQ,CAACG,QAAQ,CAAC,CAAC,CAACC,UAAU,CAACC,SAAS,GAAG,CAAC;EAChE,MAAMC,QAAQ,GAAGN,QAAQ,CAACO,YAAY,CAAC,CAAC;EACxC,MAAMC,WAAW,GAAGP,UAAU,IAAID,QAAQ,CAACS,eAAe,CAAC,CAAC,CAACC,IAAI,CAACC,MAAM;EACxE,OACCC,aAAA,CAACxB,MAAM;IACNyB,QAAQ,EAAG,KAAO;IAClBC,OAAO,EAAG,CAAG;IACbC,OAAO,EAAC,eAAe;IACvBC,SAAS,EAAC;EAAsB,GAEhCJ,aAAA,CAACtB,IAAI;IAAC2B,OAAO,EAAC;EAAO;EAEnB;EACAvB,OAAO;EACN;EACAG,EAAE,CAAE,SAAS,EAAE,UAAU,EAAEW,WAAY,CAAC,EACxCA,WACD,CAEI,CAAC,EACL,CAAC,CAAEA,WAAW,IACfI,aAAA,CAACxB,MAAM;IAACyB,QAAQ,EAAG,KAAO;IAACC,OAAO,EAAG;EAAG,GACvCF,aAAA,CAAC1B,MAAM;IACN+B,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAGA,CAAA,KAAMlB,QAAQ,CAACmB,YAAY,CAAE,CAAE,CAAG;IAC5CC,QAAQ,EAAG,CAAEpB,QAAQ,CAACqB,kBAAkB,CAAC,CAAG;IAC5C,cAAa1B,EAAE,CAAE,YAAa;EAAG,GACjC,MAEO,CAAC,EACTiB,aAAA,CAAC1B,MAAM;IACN+B,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAGA,CAAA,KAAMlB,QAAQ,CAACsB,YAAY,CAAC,CAAG;IACzCF,QAAQ,EAAG,CAAEpB,QAAQ,CAACqB,kBAAkB,CAAC,CAAG;IAC5C,cAAa1B,EAAE,CAAE,eAAgB;EAAG,GACpC,QAEO,CAAC,EACTiB,aAAA,CAACxB,MAAM;IACN2B,OAAO,EAAC,YAAY;IACpBF,QAAQ,EAAG,KAAO;IAClBC,OAAO,EAAG;EAAG,GAEXrB,wBAAwB,CACzBC,OAAO;EACN;EACAE,EAAE,CAAE,+BAA+B,EAAE,QAAS,CAAC,EAC/CM,WAAW,EACXI,QACD,CAAC,EACD;IACCiB,iBAAiB,EAChBX,aAAA,CAACpB,aAAa;MACb,cAAaG,EAAE,CAAE,cAAe,CAAG;MACnC6B,GAAG,EAAG,CAAG;MACTC,GAAG,EAAGnB,QAAU;MAChBoB,QAAQ,EAAKC,KAAK,IAAM;QACvB,IAAKA,KAAK,GAAGrB,QAAQ,EAAG;QACxBN,QAAQ,CAACmB,YAAY,CAAEQ,KAAK,GAAG,CAAE,CAAC;MACnC,CAAG;MACHC,IAAI,EAAC,GAAG;MACRD,KAAK,EAAGzB,WAAa;MACrB2B,aAAa,EAAG,KAAO;MACvBC,YAAY,EAAC;IAAM,CACnB;EAEH,CACD,CACO,CAAC,EACTlB,aAAA,CAAC1B,MAAM;IACN+B,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAGA,CAAA,KAAMlB,QAAQ,CAAC+B,QAAQ,CAAC,CAAG;IACrCX,QAAQ,EAAG,CAAEpB,QAAQ,CAACgC,cAAc,CAAC,CAAG;IACxC,cAAarC,EAAE,CAAE,WAAY;EAAG,GAChC,QAEO,CAAC,EACTiB,aAAA,CAAC1B,MAAM;IACN+B,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAGA,CAAA,KACTlB,QAAQ,CAACmB,YAAY,CAAEnB,QAAQ,CAACO,YAAY,CAAC,CAAC,GAAG,CAAE,CACnD;IACDa,QAAQ,EAAG,CAAEpB,QAAQ,CAACgC,cAAc,CAAC,CAAG;IACxC,cAAarC,EAAE,CAAE,WAAY;EAAG,GAChC,MAEO,CACD,CACR,EACDiB,aAAA,CAACd,eAAe;IAACE,QAAQ,EAAGA;EAAU,CAAE,CACjC,CAAC;AAEX"}
+{"version":3,"names":["Button","__experimentalHStack","HStack","__experimentalText","Text","__experimentalNumberControl","NumberControl","__experimentalInputControlPrefixWrapper","InputControlPrefixWrapper","SelectControl","createInterpolateElement","sprintf","__","_x","_n","PAGE_SIZE_VALUES","PageSizeControl","view","onChangeView","label","createElement","__nextHasNoMarginBottom","hideLabelFromVision","prefix","as","className","value","perPage","options","map","pageSize","onChange","page","Pagination","paginationInfo","totalItems","totalPages","expanded","spacing","justify","variant","onClick","disabled","CurrenPageControl","min","max","step","isDragEnabled","spinControls"],"sources":["@wordpress/edit-site/src/components/dataviews/pagination.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n\tSelectControl,\n} from '@wordpress/components';\nimport { createInterpolateElement } from '@wordpress/element';\nimport { sprintf, __, _x, _n } from '@wordpress/i18n';\n\nconst PAGE_SIZE_VALUES = [ 5, 20, 50 ];\nfunction PageSizeControl( { view, onChangeView } ) {\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__select-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={ view.perPage }\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 ) =>\n\t\t\t\tonChangeView( { ...view, perPage: value, page: 1 } )\n\t\t\t}\n\t\t/>\n\t);\n}\n\n// For now this is copied from the patterns list Pagination component, because\n// the datatable pagination starts from index zero(`0`). Eventually all lists will be\n// using this one.\nfunction Pagination( {\n\tview,\n\tonChangeView,\n\tpaginationInfo: { totalItems = 0, totalPages },\n} ) {\n\tif ( ! totalItems || ! totalPages ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"space-between\"\n\t\t\tclassName=\"dataviews-pagination\"\n\t\t>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{\n\t\t\t\t\t// translators: %s: Total number of entries.\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t// translators: %s: Total number of entries.\n\t\t\t\t\t\t_n( '%s item', '%s items', totalItems ),\n\t\t\t\t\t\ttotalItems\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</Text>\n\t\t\t{ !! totalItems && (\n\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => onChangeView( { ...view, page: 1 } ) }\n\t\t\t\t\t\tdisabled={ view.page === 1 }\n\t\t\t\t\t\taria-label={ __( 'First page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t«\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( { ...view, page: view.page - 1 } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ view.page === 1 }\n\t\t\t\t\t\taria-label={ __( 'Previous page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t‹\n\t\t\t\t\t</Button>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t// translators: %1$s: Current page number, %2$s: Total number of pages.\n\t\t\t\t\t\t\t\t_x( '<CurrenPageControl /> of %2$s', 'paging' ),\n\t\t\t\t\t\t\t\tview.page,\n\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tCurrenPageControl: (\n\t\t\t\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\t\tmax={ totalPages }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t! value ||\n\t\t\t\t\t\t\t\t\t\t\t\tvalue < 1 ||\n\t\t\t\t\t\t\t\t\t\t\t\tvalue > totalPages\n\t\t\t\t\t\t\t\t\t\t\t) {\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}\n\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\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\tpage: value,\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\tstep=\"1\"\n\t\t\t\t\t\t\t\t\t\tvalue={ view.page }\n\t\t\t\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t\t\t\t\tspinControls=\"none\"\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) }\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( { ...view, page: view.page + 1 } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ view.page >= totalPages }\n\t\t\t\t\t\taria-label={ __( 'Next page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t›\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( { ...view, page: totalPages } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ view.page >= totalPages }\n\t\t\t\t\t\taria-label={ __( 'Last page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t»\n\t\t\t\t\t</Button>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t<PageSizeControl view={ view } onChangeView={ onChangeView } />\n\t\t</HStack>\n\t);\n}\n\nexport default Pagination;\n"],"mappings":"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"}

package/build-module/components/dataviews/text-filter.js

@@ -1,14 +1,9 @@
 import { createElement } from "react";
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 
 /**
@@ -16,16 +11,27 @@ import { SearchControl } from '@wordpress/components';
  */
 import useDebouncedInput from '../../utils/use-debounced-input';
 export default function TextFilter({
-  className,
-  searchLabel = __('Filter list'),
-  onChange
+  id,
+  view,
+  onChangeView
 }) {
-  const [search, setSearch, debouncedSearch] = useDebouncedInput();
+  const [search, setSearch, debouncedSearch] = useDebouncedInput(view.filters[id]);
+  const onChangeViewRef = useRef(onChangeView);
+  useEffect(() => {
+    onChangeViewRef.current = onChangeView;
+  }, [onChangeView]);
   useEffect(() => {
-    onChange(debouncedSearch);
-  }, [debouncedSearch, onChange]);
+    onChangeViewRef.current(currentView => ({
+      ...currentView,
+      page: 1,
+      filters: {
+        ...currentView.filters,
+        [id]: debouncedSearch
+      }
+    }));
+  }, [debouncedSearch]);
+  const searchLabel = __('Filter list');
   return createElement(SearchControl, {
-    className: classnames('dataviews__text-filter', className),
     onChange: setSearch,
     value: search,
     label: searchLabel,

package/build-module/components/dataviews/text-filter.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","useEffect","SearchControl","useDebouncedInput","TextFilter","className","searchLabel","onChange","search","setSearch","debouncedSearch","createElement","value","label","placeholder","size"],"sources":["@wordpress/edit-site/src/components/dataviews/text-filter.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useDebouncedInput from '../../utils/use-debounced-input';\n\nexport default function TextFilter( {\n\tclassName,\n\tsearchLabel = __( 'Filter list' ),\n\tonChange,\n} ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput();\n\tuseEffect( () => {\n\t\tonChange( debouncedSearch );\n\t}, [ debouncedSearch, onChange ] );\n\treturn (\n\t\t<SearchControl\n\t\t\tclassName={ classnames( 'dataviews__text-filter', className ) }\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,aAAa,QAAQ,uBAAuB;;AAErD;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,iCAAiC;AAE/D,eAAe,SAASC,UAAUA,CAAE;EACnCC,SAAS;EACTC,WAAW,GAAGN,EAAE,CAAE,aAAc,CAAC;EACjCO;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAGP,iBAAiB,CAAC,CAAC;EAClEF,SAAS,CAAE,MAAM;IAChBM,QAAQ,CAAEG,eAAgB,CAAC;EAC5B,CAAC,EAAE,CAAEA,eAAe,EAAEH,QAAQ,CAAG,CAAC;EAClC,OACCI,aAAA,CAACT,aAAa;IACbG,SAAS,EAAGN,UAAU,CAAE,wBAAwB,EAAEM,SAAU,CAAG;IAC/DE,QAAQ,EAAGE,SAAW;IACtBG,KAAK,EAAGJ,MAAQ;IAChBK,KAAK,EAAGP,WAAa;IACrBQ,WAAW,EAAGR,WAAa;IAC3BS,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ"}
+{"version":3,"names":["__","useEffect","useRef","SearchControl","useDebouncedInput","TextFilter","id","view","onChangeView","search","setSearch","debouncedSearch","filters","onChangeViewRef","current","currentView","page","searchLabel","createElement","onChange","value","label","placeholder","size"],"sources":["@wordpress/edit-site/src/components/dataviews/text-filter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useDebouncedInput from '../../utils/use-debounced-input';\n\nexport default function TextFilter( { id, view, onChangeView } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.filters[ id ]\n\t);\n\tconst onChangeViewRef = useRef( onChangeView );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t}, [ onChangeView ] );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current( ( currentView ) => ( {\n\t\t\t...currentView,\n\t\t\tpage: 1,\n\t\t\tfilters: {\n\t\t\t\t...currentView.filters,\n\t\t\t\t[ id ]: debouncedSearch,\n\t\t\t},\n\t\t} ) );\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = __( 'Filter list' );\n\treturn (\n\t\t<SearchControl\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,aAAa,QAAQ,uBAAuB;;AAErD;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,iCAAiC;AAE/D,eAAe,SAASC,UAAUA,CAAE;EAAEC,EAAE;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EAChE,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAGP,iBAAiB,CAC/DG,IAAI,CAACK,OAAO,CAAEN,EAAE,CACjB,CAAC;EACD,MAAMO,eAAe,GAAGX,MAAM,CAAEM,YAAa,CAAC;EAC9CP,SAAS,CAAE,MAAM;IAChBY,eAAe,CAACC,OAAO,GAAGN,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EACrBP,SAAS,CAAE,MAAM;IAChBY,eAAe,CAACC,OAAO,CAAIC,WAAW,KAAQ;MAC7C,GAAGA,WAAW;MACdC,IAAI,EAAE,CAAC;MACPJ,OAAO,EAAE;QACR,GAAGG,WAAW,CAACH,OAAO;QACtB,CAAEN,EAAE,GAAIK;MACT;IACD,CAAC,CAAG,CAAC;EACN,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMM,WAAW,GAAGjB,EAAE,CAAE,aAAc,CAAC;EACvC,OACCkB,aAAA,CAACf,aAAa;IACbgB,QAAQ,EAAGT,SAAW;IACtBU,KAAK,EAAGX,MAAQ;IAChBY,KAAK,EAAGJ,WAAa;IACrBK,WAAW,EAAGL,WAAa;IAC3BM,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ"}

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