@wordpress/edit-site 5.20.1 → 5.21.0

package/build/components/dataviews/in-filter.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _blockEditor = require("@wordpress/block-editor");
+var _lockUnlock = require("../../lock-unlock");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  cleanEmptyObject
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+var _default = ({
+  id,
+  fields,
+  view,
+  onChangeView
+}) => {
+  const field = fields.find(f => f.id === id);
+  return (0, _react.createElement)(_components.SelectControl, {
+    value: view.filters[id],
+    prefix: (0, _react.createElement)(_components.__experimentalInputControlPrefixWrapper, {
+      as: "span",
+      className: "dataviews__select-control-prefix"
+    }, field.header + ':'),
+    options: field?.elements || [],
+    onChange: value => {
+      if (value === '') {
+        value = undefined;
+      }
+      onChangeView(currentView => ({
+        ...currentView,
+        filters: cleanEmptyObject({
+          ...currentView.filters,
+          [id]: value
+        })
+      }));
+    }
+  });
+};
+exports.default = _default;
+//# sourceMappingURL=in-filter.js.map

package/build/components/dataviews/in-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_blockEditor","_lockUnlock","cleanEmptyObject","unlock","blockEditorPrivateApis","_default","id","fields","view","onChangeView","field","find","f","_react","createElement","SelectControl","value","filters","prefix","__experimentalInputControlPrefixWrapper","as","className","header","options","elements","onChange","undefined","currentView","exports","default"],"sources":["@wordpress/edit-site/src/components/dataviews/in-filter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n\tSelectControl,\n} from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { cleanEmptyObject } = unlock( blockEditorPrivateApis );\n\nexport default ( { id, fields, view, onChangeView } ) => {\n\tconst field = fields.find( ( f ) => f.id === id );\n\n\treturn (\n\t\t<SelectControl\n\t\t\tvalue={ view.filters[ id ] }\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{ field.header + ':' }\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\toptions={ field?.elements || [] }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tif ( value === '' ) {\n\t\t\t\t\tvalue = undefined;\n\t\t\t\t}\n\n\t\t\t\tonChangeView( ( currentView ) => ( {\n\t\t\t\t\t...currentView,\n\t\t\t\t\tfilters: cleanEmptyObject( {\n\t\t\t\t\t\t...currentView.filters,\n\t\t\t\t\t\t[ id ]: value,\n\t\t\t\t\t} ),\n\t\t\t\t} ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,YAAA,GAAAD,OAAA;AAKA,IAAAE,WAAA,GAAAF,OAAA;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGA,MAAM;EAAEG;AAAiB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAAC,IAAAC,QAAA,GAE/CA,CAAE;EAAEC,EAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAa,CAAC,KAAM;EACxD,MAAMC,KAAK,GAAGH,MAAM,CAACI,IAAI,CAAIC,CAAC,IAAMA,CAAC,CAACN,EAAE,KAAKA,EAAG,CAAC;EAEjD,OACC,IAAAO,MAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAiB,aAAa;IACbC,KAAK,EAAGR,IAAI,CAACS,OAAO,CAAEX,EAAE,CAAI;IAC5BY,MAAM,EACL,IAAAL,MAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAqB,uCAAyB;MACzBC,EAAE,EAAC,MAAM;MACTC,SAAS,EAAC;IAAkC,GAE1CX,KAAK,CAACY,MAAM,GAAG,GACS,CAC3B;IACDC,OAAO,EAAGb,KAAK,EAAEc,QAAQ,IAAI,EAAI;IACjCC,QAAQ,EAAKT,KAAK,IAAM;MACvB,IAAKA,KAAK,KAAK,EAAE,EAAG;QACnBA,KAAK,GAAGU,SAAS;MAClB;MAEAjB,YAAY,CAAIkB,WAAW,KAAQ;QAClC,GAAGA,WAAW;QACdV,OAAO,EAAEf,gBAAgB,CAAE;UAC1B,GAAGyB,WAAW,CAACV,OAAO;UACtB,CAAEX,EAAE,GAAIU;QACT,CAAE;MACH,CAAC,CAAG,CAAC;IACN;EAAG,CACH,CAAC;AAEJ,CAAC;AAAAY,OAAA,CAAAC,OAAA,GAAAxB,QAAA"}

package/build/components/dataviews/index.js

@@ -10,12 +10,5 @@ Object.defineProperty(exports, "DataViews", {
     return _dataviews.default;
   }
 });
-Object.defineProperty(exports, "PAGE_SIZE_VALUES", {
-  enumerable: true,
-  get: function () {
-    return _viewActions.PAGE_SIZE_VALUES;
-  }
-});
 var _dataviews = _interopRequireDefault(require("./dataviews"));
-var _viewActions = require("./view-actions");
 //# sourceMappingURL=index.js.map

package/build/components/dataviews/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_dataviews","_interopRequireDefault","require","_viewActions"],"sources":["@wordpress/edit-site/src/components/dataviews/index.js"],"sourcesContent":["export { default as DataViews } from './dataviews';\nexport { PAGE_SIZE_VALUES } from './view-actions';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA"}
+{"version":3,"names":["_dataviews","_interopRequireDefault","require"],"sources":["@wordpress/edit-site/src/components/dataviews/index.js"],"sourcesContent":["export { default as DataViews } from './dataviews';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA"}

package/build/components/dataviews/pagination.js

@@ -3,31 +3,59 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Pagination = Pagination;
+exports.default = void 0;
 var _react = require("react");
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
-var _viewActions = require("./view-actions");
 /**
  * WordPress dependencies
  */
 
-/**
- * Internal dependencies
- */
+const PAGE_SIZE_VALUES = [5, 20, 50];
+function PageSizeControl({
+  view,
+  onChangeView
+}) {
+  const label = (0, _i18n.__)('Rows per page:');
+  return (0, _react.createElement)(_components.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: (0, _react.createElement)(_components.__experimentalInputControlPrefixWrapper, {
+      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.
 function Pagination({
-  dataView,
-  // If passed, use it, as it's for controlled pagination.
-  totalItems = 0
+  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 (0, _react.createElement)(_components.__experimentalHStack, {
     expanded: false,
     spacing: 3,
@@ -39,18 +67,24 @@ function Pagination({
   // translators: %s: Total number of entries.
   (0, _i18n.sprintf)(
   // translators: %s: Total number of entries.
-  (0, _i18n._n)('%s item', '%s items', _totalItems), _totalItems)), !!_totalItems && (0, _react.createElement)(_components.__experimentalHStack, {
+  (0, _i18n._n)('%s item', '%s items', totalItems), totalItems)), !!totalItems && (0, _react.createElement)(_components.__experimentalHStack, {
     expanded: false,
     spacing: 1
   }, (0, _react.createElement)(_components.Button, {
     variant: "tertiary",
-    onClick: () => dataView.setPageIndex(0),
-    disabled: !dataView.getCanPreviousPage(),
+    onClick: () => onChangeView({
+      ...view,
+      page: 1
+    }),
+    disabled: view.page === 1,
     "aria-label": (0, _i18n.__)('First page')
   }, "\xAB"), (0, _react.createElement)(_components.Button, {
     variant: "tertiary",
-    onClick: () => dataView.previousPage(),
-    disabled: !dataView.getCanPreviousPage(),
+    onClick: () => onChangeView({
+      ...view,
+      page: view.page - 1
+    }),
+    disabled: view.page === 1,
     "aria-label": (0, _i18n.__)('Previous page')
   }, "\u2039"), (0, _react.createElement)(_components.__experimentalHStack, {
     justify: "flex-start",
@@ -58,32 +92,46 @@ function Pagination({
     spacing: 1
   }, (0, _element.createInterpolateElement)((0, _i18n.sprintf)(
   // translators: %1$s: Current page number, %2$s: Total number of pages.
-  (0, _i18n._x)('<CurrenPageControl /> of %2$s', 'paging'), currentPage, numPages), {
+  (0, _i18n._x)('<CurrenPageControl /> of %2$s', 'paging'), view.page, totalPages), {
     CurrenPageControl: (0, _react.createElement)(_components.__experimentalNumberControl, {
       "aria-label": (0, _i18n.__)('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"
     })
   })), (0, _react.createElement)(_components.Button, {
     variant: "tertiary",
-    onClick: () => dataView.nextPage(),
-    disabled: !dataView.getCanNextPage(),
+    onClick: () => onChangeView({
+      ...view,
+      page: view.page + 1
+    }),
+    disabled: view.page >= totalPages,
     "aria-label": (0, _i18n.__)('Next page')
   }, "\u203A"), (0, _react.createElement)(_components.Button, {
     variant: "tertiary",
-    onClick: () => dataView.setPageIndex(dataView.getPageCount() - 1),
-    disabled: !dataView.getCanNextPage(),
+    onClick: () => onChangeView({
+      ...view,
+      page: totalPages
+    }),
+    disabled: view.page >= totalPages,
     "aria-label": (0, _i18n.__)('Last page')
-  }, "\xBB")), (0, _react.createElement)(_viewActions.PageSizeControl, {
-    dataView: dataView
+  }, "\xBB")), (0, _react.createElement)(PageSizeControl, {
+    view: view,
+    onChangeView: onChangeView
   }));
 }
+var _default = Pagination;
+exports.default = _default;
 //# sourceMappingURL=pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_i18n","_viewActions","Pagination","dataView","totalItems","currentPage","getState","pagination","pageIndex","numPages","getPageCount","_totalItems","getCoreRowModel","rows","length","_react","createElement","__experimentalHStack","expanded","spacing","justify","className","__experimentalText","variant","sprintf","_n","Button","onClick","setPageIndex","disabled","getCanPreviousPage","__","previousPage","createInterpolateElement","_x","CurrenPageControl","__experimentalNumberControl","min","max","onChange","value","step","isDragEnabled","spinControls","nextPage","getCanNextPage","PageSizeControl"],"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":"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"}
+{"version":3,"names":["_components","require","_element","_i18n","PAGE_SIZE_VALUES","PageSizeControl","view","onChangeView","label","__","_react","createElement","SelectControl","__nextHasNoMarginBottom","hideLabelFromVision","prefix","__experimentalInputControlPrefixWrapper","as","className","value","perPage","options","map","pageSize","onChange","page","Pagination","paginationInfo","totalItems","totalPages","__experimentalHStack","expanded","spacing","justify","__experimentalText","variant","sprintf","_n","Button","onClick","disabled","createInterpolateElement","_x","CurrenPageControl","__experimentalNumberControl","min","max","step","isDragEnabled","spinControls","_default","exports","default"],"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/components/dataviews/text-filter.js

@@ -6,15 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = TextFilter;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _useDebouncedInput = _interopRequireDefault(require("../../utils/use-debounced-input"));
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -24,16 +19,27 @@ var _useDebouncedInput = _interopRequireDefault(require("../../utils/use-debounc
  */
 
 function TextFilter({
-  className,
-  searchLabel = (0, _i18n.__)('Filter list'),
-  onChange
+  id,
+  view,
+  onChangeView
 }) {
-  const [search, setSearch, debouncedSearch] = (0, _useDebouncedInput.default)();
+  const [search, setSearch, debouncedSearch] = (0, _useDebouncedInput.default)(view.filters[id]);
+  const onChangeViewRef = (0, _element.useRef)(onChangeView);
+  (0, _element.useEffect)(() => {
+    onChangeViewRef.current = onChangeView;
+  }, [onChangeView]);
   (0, _element.useEffect)(() => {
-    onChange(debouncedSearch);
-  }, [debouncedSearch, onChange]);
+    onChangeViewRef.current(currentView => ({
+      ...currentView,
+      page: 1,
+      filters: {
+        ...currentView.filters,
+        [id]: debouncedSearch
+      }
+    }));
+  }, [debouncedSearch]);
+  const searchLabel = (0, _i18n.__)('Filter list');
   return (0, _react.createElement)(_components.SearchControl, {
-    className: (0, _classnames.default)('dataviews__text-filter', className),
     onChange: setSearch,
     value: search,
     label: searchLabel,

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_components","_useDebouncedInput","TextFilter","className","searchLabel","__","onChange","search","setSearch","debouncedSearch","useDebouncedInput","useEffect","_react","createElement","SearchControl","classnames","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":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAKA,IAAAI,kBAAA,GAAAL,sBAAA,CAAAC,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASK,UAAUA,CAAE;EACnCC,SAAS;EACTC,WAAW,GAAG,IAAAC,QAAE,EAAE,aAAc,CAAC;EACjCC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;EAClE,IAAAC,kBAAS,EAAE,MAAM;IAChBL,QAAQ,CAAEG,eAAgB,CAAC;EAC5B,CAAC,EAAE,CAAEA,eAAe,EAAEH,QAAQ,CAAG,CAAC;EAClC,OACC,IAAAM,MAAA,CAAAC,aAAA,EAACb,WAAA,CAAAc,aAAa;IACbX,SAAS,EAAG,IAAAY,mBAAU,EAAE,wBAAwB,EAAEZ,SAAU,CAAG;IAC/DG,QAAQ,EAAGE,SAAW;IACtBQ,KAAK,EAAGT,MAAQ;IAChBU,KAAK,EAAGb,WAAa;IACrBc,WAAW,EAAGd,WAAa;IAC3Be,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ"}
+{"version":3,"names":["_i18n","require","_element","_components","_useDebouncedInput","_interopRequireDefault","TextFilter","id","view","onChangeView","search","setSearch","debouncedSearch","useDebouncedInput","filters","onChangeViewRef","useRef","useEffect","current","currentView","page","searchLabel","__","_react","createElement","SearchControl","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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAKA,IAAAG,kBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASK,UAAUA,CAAE;EAAEC,EAAE;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EAChE,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAG,IAAAC,0BAAiB,EAC/DL,IAAI,CAACM,OAAO,CAAEP,EAAE,CACjB,CAAC;EACD,MAAMQ,eAAe,GAAG,IAAAC,eAAM,EAAEP,YAAa,CAAC;EAC9C,IAAAQ,kBAAS,EAAE,MAAM;IAChBF,eAAe,CAACG,OAAO,GAAGT,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EACrB,IAAAQ,kBAAS,EAAE,MAAM;IAChBF,eAAe,CAACG,OAAO,CAAIC,WAAW,KAAQ;MAC7C,GAAGA,WAAW;MACdC,IAAI,EAAE,CAAC;MACPN,OAAO,EAAE;QACR,GAAGK,WAAW,CAACL,OAAO;QACtB,CAAEP,EAAE,GAAIK;MACT;IACD,CAAC,CAAG,CAAC;EACN,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMS,WAAW,GAAG,IAAAC,QAAE,EAAE,aAAc,CAAC;EACvC,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACrB,WAAA,CAAAsB,aAAa;IACbC,QAAQ,EAAGf,SAAW;IACtBgB,KAAK,EAAGjB,MAAQ;IAChBkB,KAAK,EAAGP,WAAa;IACrBQ,WAAW,EAAGR,WAAa;IAC3BS,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ"}

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

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PAGE_SIZE_VALUES = void 0;
-exports.PageSizeControl = PageSizeControl;
 exports.default = ViewActions;
 var _react = require("react");
 var _components = require("@wordpress/components");
@@ -26,51 +24,69 @@ const {
   DropdownSubMenuV2,
   DropdownSubMenuTriggerV2
 } = (0, _lockUnlock.unlock)(_components.privateApis);
-const PAGE_SIZE_VALUES = [5, 20, 50];
-exports.PAGE_SIZE_VALUES = PAGE_SIZE_VALUES;
-function PageSizeControl({
-  dataView
+const availableViews = [{
+  id: 'list',
+  label: (0, _i18n.__)('List')
+}, {
+  id: 'grid',
+  label: (0, _i18n.__)('Grid')
+}];
+function ViewTypeMenu({
+  view,
+  onChangeView
 }) {
-  const label = (0, _i18n.__)('Rows per page:');
-  return (0, _react.createElement)(_components.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: (0, _react.createElement)(_components.__experimentalInputControlPrefixWrapper, {
-      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 (0, _react.createElement)(DropdownSubMenuV2, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+      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, {
+      key: availableView.id,
+      prefix: availableView.id === view.type && (0, _react.createElement)(_components.Icon, {
+        icon: _icons.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 (0, _react.createElement)(DropdownSubMenuV2, {
     trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
-      suffix: (0, _react.createElement)(_react.Fragment, null, currenPageSize, (0, _react.createElement)(_components.Icon, {
+      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, {
       key: size,
-      prefix: currenPageSize === size && (0, _react.createElement)(_components.Icon, {
+      prefix: view.perPage === size && (0, _react.createElement)(_components.Icon, {
         icon: _icons.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.
       ,
@@ -79,10 +95,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 (0, _react.createElement)(DropdownSubMenuV2, {
@@ -91,18 +109,21 @@ function FieldsVisibilityMenu({
         icon: _icons.chevronRightSmall
       })
     }, (0, _i18n.__)('Fields'))
-  }, hideableFields?.map(field => {
+  }, hidableFields?.map(field => {
     return (0, _react.createElement)(DropdownMenuItemV2, {
       key: field.id,
-      prefix: field.getIsVisible() && (0, _react.createElement)(_components.Icon, {
+      prefix: !view.hiddenFields?.includes(field.id) && (0, _react.createElement)(_components.Icon, {
         icon: _icons.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);
   }));
 }
 
@@ -118,47 +139,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 (0, _react.createElement)(DropdownSubMenuV2, {
     trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
-      suffix: (0, _react.createElement)(_react.Fragment, null, currentSortedField?.columnDef.header, (0, _react.createElement)(_components.Icon, {
+      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 = field.getIsSorted();
+    const sortedDirection = view.sort?.direction;
     return (0, _react.createElement)(DropdownSubMenuV2, {
       key: field.id,
       trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
         suffix: (0, _react.createElement)(_components.Icon, {
           icon: _icons.chevronRightSmall
         })
-      }, field.columnDef.header),
+      }, field.header),
       side: "left"
     }, Object.entries(sortingItemsInfo).map(([direction, info]) => {
+      const isActive = currentSortedField && sortedDirection === direction && field.id === currentSortedField.id;
       return (0, _react.createElement)(DropdownMenuItemV2, {
         key: direction,
         prefix: (0, _react.createElement)(_components.Icon, {
           icon: info.icon
         }),
-        suffix: sortedDirection === direction && (0, _react.createElement)(_components.Icon, {
+        suffix: isActive && (0, _react.createElement)(_components.Icon, {
           icon: _icons.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);
@@ -166,24 +196,32 @@ function SortMenu({
   }));
 }
 function ViewActions({
-  dataView,
-  className
+  fields,
+  view,
+  onChangeView
 }) {
   return (0, _react.createElement)(DropdownMenuV2, {
     label: (0, _i18n.__)('Actions'),
-    className: className,
     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)(SortMenu, {
-    dataView: dataView
+  }, (0, _react.createElement)(DropdownMenuGroupV2, null, (0, _react.createElement)(ViewTypeMenu, {
+    view: view,
+    onChangeView: onChangeView
+  }), (0, _react.createElement)(SortMenu, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
   }), (0, _react.createElement)(FieldsVisibilityMenu, {
-    dataView: dataView
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
   }), (0, _react.createElement)(PageSizeMenu, {
-    dataView: dataView
+    view: view,
+    onChangeView: onChangeView
   })));
 }
 //# sourceMappingURL=view-actions.js.map