@wordpress/edit-site 5.23.0 → 5.24.0

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

@@ -0,0 +1,55 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { Button, privateApis as componentsPrivateApis, Icon } from '@wordpress/components';
+import { chevronDown } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { OPERATOR_IN } from './constants';
+import { unlock } from '../../lock-unlock';
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem
+} = unlock(componentsPrivateApis);
+export default function FilterSummary({
+  filter,
+  view,
+  onChangeView
+}) {
+  const filterInView = view.filters.find(f => f.field === filter.field);
+  const activeElement = filter.elements.find(element => element.value === filterInView?.value);
+  return createElement(DropdownMenu, {
+    key: filter.field,
+    trigger: createElement(Button, {
+      variant: "tertiary",
+      size: "compact",
+      label: filter.name
+    }, activeElement !== undefined ? sprintf( /* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */
+    __('%1$s is %2$s'), filter.name, activeElement.label) : filter.name, createElement(Icon, {
+      icon: chevronDown,
+      style: {
+        flexShrink: 0
+      }
+    }))
+  }, filter.elements.map(element => {
+    return createElement(DropdownMenuCheckboxItem, {
+      key: element.value,
+      value: element.value,
+      checked: activeElement?.value === element.value,
+      onSelect: () => onChangeView(currentView => ({
+        ...currentView,
+        page: 1,
+        filters: [...view.filters.filter(f => f.field !== filter.field), {
+          field: filter.field,
+          operator: OPERATOR_IN,
+          value: activeElement?.value === element.value ? undefined : element.value
+        }]
+      }))
+    }, element.label);
+  }));
+}
+//# sourceMappingURL=filter-summary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Button","privateApis","componentsPrivateApis","Icon","chevronDown","__","sprintf","OPERATOR_IN","unlock","DropdownMenuV2","DropdownMenu","DropdownMenuCheckboxItemV2","DropdownMenuCheckboxItem","FilterSummary","filter","view","onChangeView","filterInView","filters","find","f","field","activeElement","elements","element","value","createElement","key","trigger","variant","size","label","name","undefined","icon","style","flexShrink","map","checked","onSelect","currentView","page","operator"],"sources":["@wordpress/edit-site/src/components/dataviews/filter-summary.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tIcon,\n} from '@wordpress/components';\nimport { chevronDown } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IN } from './constants';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,\n} = unlock( componentsPrivateApis );\n\nexport default function FilterSummary( { filter, view, onChangeView } ) {\n\tconst filterInView = view.filters.find( ( f ) => f.field === filter.field );\n\tconst activeElement = filter.elements.find(\n\t\t( element ) => element.value === filterInView?.value\n\t);\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tkey={ filter.field }\n\t\t\ttrigger={\n\t\t\t\t<Button variant=\"tertiary\" size=\"compact\" label={ filter.name }>\n\t\t\t\t\t{ activeElement !== undefined\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t/* translators: 1: Filter name. 2: filter value. e.g.: \"Author is Admin\". */\n\t\t\t\t\t\t\t\t__( '%1$s is %2$s' ),\n\t\t\t\t\t\t\t\tfilter.name,\n\t\t\t\t\t\t\t\tactiveElement.label\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: filter.name }\n\t\t\t\t\t<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />\n\t\t\t\t</Button>\n\t\t\t}\n\t\t>\n\t\t\t{ filter.elements.map( ( element ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\tvalue={ element.value }\n\t\t\t\t\t\tchecked={ activeElement?.value === element.value }\n\t\t\t\t\t\tonSelect={ () =>\n\t\t\t\t\t\t\tonChangeView( ( currentView ) => ( {\n\t\t\t\t\t\t\t\t...currentView,\n\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t...view.filters.filter(\n\t\t\t\t\t\t\t\t\t\t( f ) => f.field !== filter.field\n\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\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\toperator: OPERATOR_IN,\n\t\t\t\t\t\t\t\t\t\tvalue:\n\t\t\t\t\t\t\t\t\t\t\tactiveElement?.value ===\n\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t\t: element.value,\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>\n\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,MAAM,EACNC,WAAW,IAAIC,qBAAqB,EACpCC,IAAI,QACE,uBAAuB;AAC9B,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,SAASC,WAAW,QAAQ,aAAa;AACzC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EACLC,cAAc,EAAEC,YAAY;EAC5BC,0BAA0B,EAAEC;AAC7B,CAAC,GAAGJ,MAAM,CAAEN,qBAAsB,CAAC;AAEnC,eAAe,SAASW,aAAaA,CAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACvE,MAAMC,YAAY,GAAGF,IAAI,CAACG,OAAO,CAACC,IAAI,CAAIC,CAAC,IAAMA,CAAC,CAACC,KAAK,KAAKP,MAAM,CAACO,KAAM,CAAC;EAC3E,MAAMC,aAAa,GAAGR,MAAM,CAACS,QAAQ,CAACJ,IAAI,CACvCK,OAAO,IAAMA,OAAO,CAACC,KAAK,KAAKR,YAAY,EAAEQ,KAChD,CAAC;EAED,OACCC,aAAA,CAAChB,YAAY;IACZiB,GAAG,EAAGb,MAAM,CAACO,KAAO;IACpBO,OAAO,EACNF,aAAA,CAAC1B,MAAM;MAAC6B,OAAO,EAAC,UAAU;MAACC,IAAI,EAAC,SAAS;MAACC,KAAK,EAAGjB,MAAM,CAACkB;IAAM,GAC5DV,aAAa,KAAKW,SAAS,GAC1B3B,OAAO,EACP;IACAD,EAAE,CAAE,cAAe,CAAC,EACpBS,MAAM,CAACkB,IAAI,EACXV,aAAa,CAACS,KACd,CAAC,GACDjB,MAAM,CAACkB,IAAI,EACdN,aAAA,CAACvB,IAAI;MAAC+B,IAAI,EAAG9B,WAAa;MAAC+B,KAAK,EAAG;QAAEC,UAAU,EAAE;MAAE;IAAG,CAAE,CACjD;EACR,GAECtB,MAAM,CAACS,QAAQ,CAACc,GAAG,CAAIb,OAAO,IAAM;IACrC,OACCE,aAAA,CAACd,wBAAwB;MACxBe,GAAG,EAAGH,OAAO,CAACC,KAAO;MACrBA,KAAK,EAAGD,OAAO,CAACC,KAAO;MACvBa,OAAO,EAAGhB,aAAa,EAAEG,KAAK,KAAKD,OAAO,CAACC,KAAO;MAClDc,QAAQ,EAAGA,CAAA,KACVvB,YAAY,CAAIwB,WAAW,KAAQ;QAClC,GAAGA,WAAW;QACdC,IAAI,EAAE,CAAC;QACPvB,OAAO,EAAE,CACR,GAAGH,IAAI,CAACG,OAAO,CAACJ,MAAM,CACnBM,CAAC,IAAMA,CAAC,CAACC,KAAK,KAAKP,MAAM,CAACO,KAC7B,CAAC,EACD;UACCA,KAAK,EAAEP,MAAM,CAACO,KAAK;UACnBqB,QAAQ,EAAEnC,WAAW;UACrBkB,KAAK,EACJH,aAAa,EAAEG,KAAK,KACpBD,OAAO,CAACC,KAAK,GACVQ,SAAS,GACTT,OAAO,CAACC;QACb,CAAC;MAEH,CAAC,CAAG;IACJ,GAECD,OAAO,CAACO,KACe,CAAC;EAE7B,CAAE,CACW,CAAC;AAEjB"}

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

@@ -1,16 +1,11 @@
 import { createElement } from "react";
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import { default as InFilter, OPERATOR_IN } from './in-filter';
+import FilterSummary from './filter-summary';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
-const VALID_OPERATORS = [OPERATOR_IN];
+import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
 export default function Filters({
   fields,
   view,
@@ -18,37 +13,29 @@ export default function Filters({
 }) {
   const filters = [];
   fields.forEach(field => {
-    if (!field.filters) {
+    if (!field.type) {
       return;
     }
-    field.filters.forEach(filter => {
-      if (VALID_OPERATORS.some(operator => operator === filter)) {
+    switch (field.type) {
+      case ENUMERATION_TYPE:
         filters.push({
           field: field.id,
           name: field.header,
-          operator: filter,
-          elements: [{
-            value: '',
-            label: __('All')
-          }, ...(field.elements || [])],
-          isVisible: view.filters.some(f => f.field === field.id && f.operator === filter)
+          elements: field.elements || [],
+          isVisible: view.filters.some(f => f.field === field.id && f.operator === OPERATOR_IN)
         });
-      }
-    });
+    }
   });
-  const filterComponents = filters?.map(filter => {
+  const filterComponents = filters.map(filter => {
     if (!filter.isVisible) {
       return null;
     }
-    if (OPERATOR_IN === filter.operator) {
-      return createElement(InFilter, {
-        key: filter.field + '.' + filter.operator,
-        filter: filter,
-        view: view,
-        onChangeView: onChangeView
-      });
-    }
-    return null;
+    return createElement(FilterSummary, {
+      key: filter.field + '.' + filter.operator,
+      filter: filter,
+      view: view,
+      onChangeView: onChangeView
+    });
   });
   filterComponents.push(createElement(AddFilter, {
     key: "add-filter",

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

@@ -1 +1 @@
-{"version":3,"names":["__","default","InFilter","OPERATOR_IN","AddFilter","ResetFilters","VALID_OPERATORS","Filters","fields","view","onChangeView","filters","forEach","field","filter","some","operator","push","id","name","header","elements","value","label","isVisible","f","filterComponents","map","createElement","key","length"],"sources":["@wordpress/edit-site/src/components/dataviews/filters.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as InFilter, OPERATOR_IN } from './in-filter';\nimport AddFilter from './add-filter';\nimport ResetFilters from './reset-filters';\n\nconst VALID_OPERATORS = [ OPERATOR_IN ];\n\nexport default function Filters( { fields, view, onChangeView } ) {\n\tconst filters = [];\n\tfields.forEach( ( field ) => {\n\t\tif ( ! field.filters ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfield.filters.forEach( ( filter ) => {\n\t\t\tif ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {\n\t\t\t\tfilters.push( {\n\t\t\t\t\tfield: field.id,\n\t\t\t\t\tname: field.header,\n\t\t\t\t\toperator: filter,\n\t\t\t\t\telements: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvalue: '',\n\t\t\t\t\t\t\tlabel: __( 'All' ),\n\t\t\t\t\t\t},\n\t\t\t\t\t\t...( field.elements || [] ),\n\t\t\t\t\t],\n\t\t\t\t\tisVisible: view.filters.some(\n\t\t\t\t\t\t( f ) => f.field === field.id && f.operator === filter\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t} );\n\n\tconst filterComponents = filters?.map( ( filter ) => {\n\t\tif ( ! filter.isVisible ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( OPERATOR_IN === filter.operator ) {\n\t\t\treturn (\n\t\t\t\t<InFilter\n\t\t\t\t\tkey={ filter.field + '.' + filter.operator }\n\t\t\t\t\tfilter={ filter }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn null;\n\t} );\n\n\tfilterComponents.push(\n\t\t<AddFilter\n\t\t\tkey=\"add-filter\"\n\t\t\tfields={ fields }\n\t\t\tview={ view }\n\t\t\tonChangeView={ onChangeView }\n\t\t/>\n\t);\n\n\tif ( filterComponents.length > 1 ) {\n\t\tfilterComponents.push(\n\t\t\t<ResetFilters\n\t\t\t\tkey=\"reset-filters\"\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn filterComponents;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,OAAO,IAAIC,QAAQ,EAAEC,WAAW,QAAQ,aAAa;AAC9D,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,YAAY,MAAM,iBAAiB;AAE1C,MAAMC,eAAe,GAAG,CAAEH,WAAW,CAAE;AAEvC,eAAe,SAASI,OAAOA,CAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACjE,MAAMC,OAAO,GAAG,EAAE;EAClBH,MAAM,CAACI,OAAO,CAAIC,KAAK,IAAM;IAC5B,IAAK,CAAEA,KAAK,CAACF,OAAO,EAAG;MACtB;IACD;IAEAE,KAAK,CAACF,OAAO,CAACC,OAAO,CAAIE,MAAM,IAAM;MACpC,IAAKR,eAAe,CAACS,IAAI,CAAIC,QAAQ,IAAMA,QAAQ,KAAKF,MAAO,CAAC,EAAG;QAClEH,OAAO,CAACM,IAAI,CAAE;UACbJ,KAAK,EAAEA,KAAK,CAACK,EAAE;UACfC,IAAI,EAAEN,KAAK,CAACO,MAAM;UAClBJ,QAAQ,EAAEF,MAAM;UAChBO,QAAQ,EAAE,CACT;YACCC,KAAK,EAAE,EAAE;YACTC,KAAK,EAAEvB,EAAE,CAAE,KAAM;UAClB,CAAC,EACD,IAAKa,KAAK,CAACQ,QAAQ,IAAI,EAAE,CAAE,CAC3B;UACDG,SAAS,EAAEf,IAAI,CAACE,OAAO,CAACI,IAAI,CACzBU,CAAC,IAAMA,CAAC,CAACZ,KAAK,KAAKA,KAAK,CAACK,EAAE,IAAIO,CAAC,CAACT,QAAQ,KAAKF,MACjD;QACD,CAAE,CAAC;MACJ;IACD,CAAE,CAAC;EACJ,CAAE,CAAC;EAEH,MAAMY,gBAAgB,GAAGf,OAAO,EAAEgB,GAAG,CAAIb,MAAM,IAAM;IACpD,IAAK,CAAEA,MAAM,CAACU,SAAS,EAAG;MACzB,OAAO,IAAI;IACZ;IAEA,IAAKrB,WAAW,KAAKW,MAAM,CAACE,QAAQ,EAAG;MACtC,OACCY,aAAA,CAAC1B,QAAQ;QACR2B,GAAG,EAAGf,MAAM,CAACD,KAAK,GAAG,GAAG,GAAGC,MAAM,CAACE,QAAU;QAC5CF,MAAM,EAAGA,MAAQ;QACjBL,IAAI,EAAGA,IAAM;QACbC,YAAY,EAAGA;MAAc,CAC7B,CAAC;IAEJ;IAEA,OAAO,IAAI;EACZ,CAAE,CAAC;EAEHgB,gBAAgB,CAACT,IAAI,CACpBW,aAAA,CAACxB,SAAS;IACTyB,GAAG,EAAC,YAAY;IAChBrB,MAAM,EAAGA,MAAQ;IACjBC,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA;EAAc,CAC7B,CACF,CAAC;EAED,IAAKgB,gBAAgB,CAACI,MAAM,GAAG,CAAC,EAAG;IAClCJ,gBAAgB,CAACT,IAAI,CACpBW,aAAA,CAACvB,YAAY;MACZwB,GAAG,EAAC,eAAe;MACnBpB,IAAI,EAAGA,IAAM;MACbC,YAAY,EAAGA;IAAc,CAC7B,CACF,CAAC;EACF;EAEA,OAAOgB,gBAAgB;AACxB"}
+{"version":3,"names":["FilterSummary","AddFilter","ResetFilters","ENUMERATION_TYPE","OPERATOR_IN","Filters","fields","view","onChangeView","filters","forEach","field","type","push","id","name","header","elements","isVisible","some","f","operator","filterComponents","map","filter","createElement","key","length"],"sources":["@wordpress/edit-site/src/components/dataviews/filters.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport FilterSummary from './filter-summary';\nimport AddFilter from './add-filter';\nimport ResetFilters from './reset-filters';\nimport { ENUMERATION_TYPE, OPERATOR_IN } from './constants';\n\nexport default function Filters( { fields, view, onChangeView } ) {\n\tconst filters = [];\n\tfields.forEach( ( field ) => {\n\t\tif ( ! field.type ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( field.type ) {\n\t\t\tcase ENUMERATION_TYPE:\n\t\t\t\tfilters.push( {\n\t\t\t\t\tfield: field.id,\n\t\t\t\t\tname: field.header,\n\t\t\t\t\telements: field.elements || [],\n\t\t\t\t\tisVisible: view.filters.some(\n\t\t\t\t\t\t( f ) =>\n\t\t\t\t\t\t\tf.field === field.id && f.operator === OPERATOR_IN\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t}\n\t} );\n\n\tconst filterComponents = filters.map( ( filter ) => {\n\t\tif ( ! filter.isVisible ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<FilterSummary\n\t\t\t\tkey={ filter.field + '.' + filter.operator }\n\t\t\t\tfilter={ filter }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tfilterComponents.push(\n\t\t<AddFilter\n\t\t\tkey=\"add-filter\"\n\t\t\tfields={ fields }\n\t\t\tview={ view }\n\t\t\tonChangeView={ onChangeView }\n\t\t/>\n\t);\n\n\tif ( filterComponents.length > 1 ) {\n\t\tfilterComponents.push(\n\t\t\t<ResetFilters\n\t\t\t\tkey=\"reset-filters\"\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn filterComponents;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,aAAa,MAAM,kBAAkB;AAC5C,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,SAASC,gBAAgB,EAAEC,WAAW,QAAQ,aAAa;AAE3D,eAAe,SAASC,OAAOA,CAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACjE,MAAMC,OAAO,GAAG,EAAE;EAClBH,MAAM,CAACI,OAAO,CAAIC,KAAK,IAAM;IAC5B,IAAK,CAAEA,KAAK,CAACC,IAAI,EAAG;MACnB;IACD;IAEA,QAASD,KAAK,CAACC,IAAI;MAClB,KAAKT,gBAAgB;QACpBM,OAAO,CAACI,IAAI,CAAE;UACbF,KAAK,EAAEA,KAAK,CAACG,EAAE;UACfC,IAAI,EAAEJ,KAAK,CAACK,MAAM;UAClBC,QAAQ,EAAEN,KAAK,CAACM,QAAQ,IAAI,EAAE;UAC9BC,SAAS,EAAEX,IAAI,CAACE,OAAO,CAACU,IAAI,CACzBC,CAAC,IACFA,CAAC,CAACT,KAAK,KAAKA,KAAK,CAACG,EAAE,IAAIM,CAAC,CAACC,QAAQ,KAAKjB,WACzC;QACD,CAAE,CAAC;IACL;EACD,CAAE,CAAC;EAEH,MAAMkB,gBAAgB,GAAGb,OAAO,CAACc,GAAG,CAAIC,MAAM,IAAM;IACnD,IAAK,CAAEA,MAAM,CAACN,SAAS,EAAG;MACzB,OAAO,IAAI;IACZ;IAEA,OACCO,aAAA,CAACzB,aAAa;MACb0B,GAAG,EAAGF,MAAM,CAACb,KAAK,GAAG,GAAG,GAAGa,MAAM,CAACH,QAAU;MAC5CG,MAAM,EAAGA,MAAQ;MACjBjB,IAAI,EAAGA,IAAM;MACbC,YAAY,EAAGA;IAAc,CAC7B,CAAC;EAEJ,CAAE,CAAC;EAEHc,gBAAgB,CAACT,IAAI,CACpBY,aAAA,CAACxB,SAAS;IACTyB,GAAG,EAAC,YAAY;IAChBpB,MAAM,EAAGA,MAAQ;IACjBC,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA;EAAc,CAC7B,CACF,CAAC;EAED,IAAKc,gBAAgB,CAACK,MAAM,GAAG,CAAC,EAAG;IAClCL,gBAAgB,CAACT,IAAI,CACpBY,aAAA,CAACvB,YAAY;MACZwB,GAAG,EAAC,eAAe;MACnBnB,IAAI,EAAGA,IAAM;MACbC,YAAY,EAAGA;IAAc,CAC7B,CACF,CAAC;EACF;EAEA,OAAOc,gBAAgB;AACxB"}

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

@@ -2,11 +2,22 @@ import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
-import { DropdownMenu, MenuGroup, MenuItem, Button, Modal, __experimentalHStack as HStack } from '@wordpress/components';
+import { Button, Modal, __experimentalHStack as HStack, privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { moreVertical } from '@wordpress/icons';
-function PrimaryActionTrigger({
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+const {
+  DropdownMenuV2Ariakit: DropdownMenu,
+  DropdownMenuGroupV2Ariakit: DropdownMenuGroup,
+  DropdownMenuItemV2Ariakit: DropdownMenuItem,
+  DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel
+} = unlock(componentsPrivateApis);
+function ButtonTrigger({
   action,
   onClick
 }) {
@@ -18,14 +29,13 @@ function PrimaryActionTrigger({
     onClick: onClick
   });
 }
-function SecondaryActionTrigger({
+function DropdownMenuItemTrigger({
   action,
   onClick
 }) {
-  return createElement(MenuItem, {
-    onClick: onClick,
-    isDestructive: action.isDestructive
-  }, action.label);
+  return createElement(DropdownMenuItem, {
+    onClick: onClick
+  }, createElement(DropdownMenuItemLabel, null, action.label));
 }
 function ActionWithModal({
   action,
@@ -55,9 +65,30 @@ function ActionWithModal({
     closeModal: () => setIsModalOpen(false)
   })));
 }
+function ActionsDropdownMenuGroup({
+  actions,
+  item
+}) {
+  return createElement(DropdownMenuGroup, null, actions.map(action => {
+    if (!!action.RenderModal) {
+      return createElement(ActionWithModal, {
+        key: action.id,
+        action: action,
+        item: item,
+        ActionTrigger: DropdownMenuItemTrigger
+      });
+    }
+    return createElement(DropdownMenuItemTrigger, {
+      key: action.id,
+      action: action,
+      onClick: () => action.callback(item)
+    });
+  }));
+}
 export default function ItemActions({
   item,
-  actions
+  actions,
+  isCompact
 }) {
   const {
     primaryActions,
@@ -83,41 +114,64 @@ export default function ItemActions({
   if (!primaryActions.length && !secondaryActions.length) {
     return null;
   }
+  if (isCompact) {
+    return createElement(CompactItemActions, {
+      item: item,
+      primaryActions: primaryActions,
+      secondaryActions: secondaryActions
+    });
+  }
   return createElement(HStack, {
-    justify: "flex-end"
+    spacing: 1,
+    justify: "flex-end",
+    style: {
+      flexShrink: '0',
+      width: 'auto'
+    }
   }, !!primaryActions.length && primaryActions.map(action => {
     if (!!action.RenderModal) {
       return createElement(ActionWithModal, {
         key: action.id,
         action: action,
         item: item,
-        ActionTrigger: PrimaryActionTrigger
+        ActionTrigger: ButtonTrigger
       });
     }
-    return createElement(PrimaryActionTrigger, {
+    return createElement(ButtonTrigger, {
       key: action.id,
       action: action,
-      item: item,
       onClick: () => action.callback(item)
     });
   }), !!secondaryActions.length && createElement(DropdownMenu, {
-    icon: moreVertical,
-    label: __('Actions')
-  }, () => createElement(MenuGroup, null, secondaryActions.map(action => {
-    if (!!action.RenderModal) {
-      return createElement(ActionWithModal, {
-        key: action.id,
-        action: action,
-        item: item,
-        ActionTrigger: SecondaryActionTrigger
-      });
-    }
-    return createElement(SecondaryActionTrigger, {
-      key: action.id,
-      action: action,
-      item: item,
-      onClick: () => action.callback(item)
-    });
-  }))));
+    trigger: createElement(Button, {
+      size: "compact",
+      icon: moreVertical,
+      label: __('Actions')
+    }),
+    placement: "bottom-end"
+  }, createElement(ActionsDropdownMenuGroup, {
+    actions: secondaryActions,
+    item: item
+  })));
+}
+function CompactItemActions({
+  item,
+  primaryActions,
+  secondaryActions
+}) {
+  return createElement(DropdownMenu, {
+    trigger: createElement(Button, {
+      size: "compact",
+      icon: moreVertical,
+      label: __('Actions')
+    }),
+    placement: "bottom-end"
+  }, !!primaryActions.length && createElement(ActionsDropdownMenuGroup, {
+    actions: primaryActions,
+    item: item
+  }), !!secondaryActions.length && createElement(ActionsDropdownMenuGroup, {
+    actions: secondaryActions,
+    item: item
+  }));
 }
 //# sourceMappingURL=item-actions.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["DropdownMenu","MenuGroup","MenuItem","Button","Modal","__experimentalHStack","HStack","__","useMemo","useState","moreVertical","PrimaryActionTrigger","action","onClick","createElement","label","icon","isDestructive","size","SecondaryActionTrigger","ActionWithModal","item","ActionTrigger","isModalOpen","setIsModalOpen","actionTriggerProps","RenderModal","hideModalHeader","Fragment","title","__experimentalHideHeader","onRequestClose","overlayClassName","closeModal","ItemActions","actions","primaryActions","secondaryActions","reduce","accumulator","isEligible","isPrimary","push","length","justify","map","key","id","callback"],"sources":["@wordpress/edit-site/src/components/dataviews/item-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tButton,\n\tModal,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { moreVertical } from '@wordpress/icons';\n\nfunction PrimaryActionTrigger( { action, onClick } ) {\n\treturn (\n\t\t<Button\n\t\t\tlabel={ action.label }\n\t\t\ticon={ action.icon }\n\t\t\tisDestructive={ action.isDestructive }\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t/>\n\t);\n}\n\nfunction SecondaryActionTrigger( { action, onClick } ) {\n\treturn (\n\t\t<MenuItem onClick={ onClick } isDestructive={ action.isDestructive }>\n\t\t\t{ action.label }\n\t\t</MenuItem>\n\t);\n}\n\nfunction ActionWithModal( { action, item, ActionTrigger } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst actionTriggerProps = {\n\t\taction,\n\t\tonClick: () => setIsModalOpen( true ),\n\t};\n\tconst { RenderModal, hideModalHeader } = action;\n\treturn (\n\t\t<>\n\t\t\t<ActionTrigger { ...actionTriggerProps } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ ! hideModalHeader && action.label }\n\t\t\t\t\t__experimentalHideHeader={ !! hideModalHeader }\n\t\t\t\t\tonRequestClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\toverlayClassName=\"dataviews-action-modal\"\n\t\t\t\t>\n\t\t\t\t\t<RenderModal\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\t/>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default function ItemActions( { item, actions } ) {\n\tconst { primaryActions, secondaryActions } = useMemo( () => {\n\t\treturn actions.reduce(\n\t\t\t( accumulator, action ) => {\n\t\t\t\t// If an action is eligible for all items, doesn't need\n\t\t\t\t// to provide the `isEligible` function.\n\t\t\t\tif ( action.isEligible && ! action.isEligible( item ) ) {\n\t\t\t\t\treturn accumulator;\n\t\t\t\t}\n\t\t\t\tif ( action.isPrimary && !! action.icon ) {\n\t\t\t\t\taccumulator.primaryActions.push( action );\n\t\t\t\t} else {\n\t\t\t\t\taccumulator.secondaryActions.push( action );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t},\n\t\t\t{ primaryActions: [], secondaryActions: [] }\n\t\t);\n\t}, [ actions, item ] );\n\tif ( ! primaryActions.length && ! secondaryActions.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<HStack justify=\"flex-end\">\n\t\t\t{ !! primaryActions.length &&\n\t\t\t\tprimaryActions.map( ( action ) => {\n\t\t\t\t\tif ( !! action.RenderModal ) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ActionWithModal\n\t\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tActionTrigger={ PrimaryActionTrigger }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PrimaryActionTrigger\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tonClick={ () => action.callback( item ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t{ !! secondaryActions.length && (\n\t\t\t\t<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>\n\t\t\t\t\t{ () => (\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t{ secondaryActions.map( ( action ) => {\n\t\t\t\t\t\t\t\tif ( !! action.RenderModal ) {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ActionWithModal\n\t\t\t\t\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tActionTrigger={\n\t\t\t\t\t\t\t\t\t\t\t\tSecondaryActionTrigger\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}\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<SecondaryActionTrigger\n\t\t\t\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\taction.callback( item )\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);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["Button","Modal","__experimentalHStack","HStack","privateApis","componentsPrivateApis","__","useMemo","useState","moreVertical","unlock","DropdownMenuV2Ariakit","DropdownMenu","DropdownMenuGroupV2Ariakit","DropdownMenuGroup","DropdownMenuItemV2Ariakit","DropdownMenuItem","DropdownMenuItemLabelV2Ariakit","DropdownMenuItemLabel","ButtonTrigger","action","onClick","createElement","label","icon","isDestructive","size","DropdownMenuItemTrigger","ActionWithModal","item","ActionTrigger","isModalOpen","setIsModalOpen","actionTriggerProps","RenderModal","hideModalHeader","Fragment","title","__experimentalHideHeader","onRequestClose","overlayClassName","closeModal","ActionsDropdownMenuGroup","actions","map","key","id","callback","ItemActions","isCompact","primaryActions","secondaryActions","reduce","accumulator","isEligible","isPrimary","push","length","CompactItemActions","spacing","justify","style","flexShrink","width","trigger","placement"],"sources":["@wordpress/edit-site/src/components/dataviews/item-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tModal,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { moreVertical } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tDropdownMenuV2Ariakit: DropdownMenu,\n\tDropdownMenuGroupV2Ariakit: DropdownMenuGroup,\n\tDropdownMenuItemV2Ariakit: DropdownMenuItem,\n\tDropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\nfunction ButtonTrigger( { action, onClick } ) {\n\treturn (\n\t\t<Button\n\t\t\tlabel={ action.label }\n\t\t\ticon={ action.icon }\n\t\t\tisDestructive={ action.isDestructive }\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuItemTrigger( { action, onClick } ) {\n\treturn (\n\t\t<DropdownMenuItem onClick={ onClick }>\n\t\t\t<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>\n\t\t</DropdownMenuItem>\n\t);\n}\n\nfunction ActionWithModal( { action, item, ActionTrigger } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst actionTriggerProps = {\n\t\taction,\n\t\tonClick: () => setIsModalOpen( true ),\n\t};\n\tconst { RenderModal, hideModalHeader } = action;\n\treturn (\n\t\t<>\n\t\t\t<ActionTrigger { ...actionTriggerProps } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ ! hideModalHeader && action.label }\n\t\t\t\t\t__experimentalHideHeader={ !! hideModalHeader }\n\t\t\t\t\tonRequestClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\toverlayClassName=\"dataviews-action-modal\"\n\t\t\t\t>\n\t\t\t\t\t<RenderModal\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\t/>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ActionsDropdownMenuGroup( { actions, item } ) {\n\treturn (\n\t\t<DropdownMenuGroup>\n\t\t\t{ actions.map( ( action ) => {\n\t\t\t\tif ( !! action.RenderModal ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActionWithModal\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tActionTrigger={ DropdownMenuItemTrigger }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemTrigger\n\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\tonClick={ () => action.callback( item ) }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenuGroup>\n\t);\n}\n\nexport default function ItemActions( { item, actions, isCompact } ) {\n\tconst { primaryActions, secondaryActions } = useMemo( () => {\n\t\treturn actions.reduce(\n\t\t\t( accumulator, action ) => {\n\t\t\t\t// If an action is eligible for all items, doesn't need\n\t\t\t\t// to provide the `isEligible` function.\n\t\t\t\tif ( action.isEligible && ! action.isEligible( item ) ) {\n\t\t\t\t\treturn accumulator;\n\t\t\t\t}\n\t\t\t\tif ( action.isPrimary && !! action.icon ) {\n\t\t\t\t\taccumulator.primaryActions.push( action );\n\t\t\t\t} else {\n\t\t\t\t\taccumulator.secondaryActions.push( action );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t},\n\t\t\t{ primaryActions: [], secondaryActions: [] }\n\t\t);\n\t}, [ actions, item ] );\n\tif ( ! primaryActions.length && ! secondaryActions.length ) {\n\t\treturn null;\n\t}\n\tif ( isCompact ) {\n\t\treturn (\n\t\t\t<CompactItemActions\n\t\t\t\titem={ item }\n\t\t\t\tprimaryActions={ primaryActions }\n\t\t\t\tsecondaryActions={ secondaryActions }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<HStack\n\t\t\tspacing={ 1 }\n\t\t\tjustify=\"flex-end\"\n\t\t\tstyle={ {\n\t\t\t\tflexShrink: '0',\n\t\t\t\twidth: 'auto',\n\t\t\t} }\n\t\t>\n\t\t\t{ !! primaryActions.length &&\n\t\t\t\tprimaryActions.map( ( action ) => {\n\t\t\t\t\tif ( !! action.RenderModal ) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ActionWithModal\n\t\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tActionTrigger={ ButtonTrigger }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ButtonTrigger\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\tonClick={ () => action.callback( item ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t{ !! secondaryActions.length && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ttrigger={\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t>\n\t\t\t\t\t<ActionsDropdownMenuGroup\n\t\t\t\t\t\tactions={ secondaryActions }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n\nfunction CompactItemActions( { item, primaryActions, secondaryActions } ) {\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tplacement=\"bottom-end\"\n\t\t>\n\t\t\t{ !! primaryActions.length && (\n\t\t\t\t<ActionsDropdownMenuGroup\n\t\t\t\t\tactions={ primaryActions }\n\t\t\t\t\titem={ item }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! secondaryActions.length && (\n\t\t\t\t<ActionsDropdownMenuGroup\n\t\t\t\t\tactions={ secondaryActions }\n\t\t\t\t\titem={ item }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"],"mappings":"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"}

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

@@ -41,6 +41,7 @@ function Pagination({
       page: 1
     }),
     disabled: view.page === 1,
+    __experimentalIsFocusable: true,
     label: __('First page'),
     icon: previous,
     showTooltip: true,
@@ -51,6 +52,7 @@ function Pagination({
       page: view.page - 1
     }),
     disabled: view.page === 1,
+    __experimentalIsFocusable: true,
     label: __('Previous page'),
     icon: chevronLeft,
     showTooltip: true,
@@ -91,6 +93,7 @@ function Pagination({
       page: view.page + 1
     }),
     disabled: view.page >= totalPages,
+    __experimentalIsFocusable: true,
     label: __('Next page'),
     icon: chevronRight,
     showTooltip: true,
@@ -101,6 +104,7 @@ function Pagination({
       page: totalPages
     }),
     disabled: view.page >= totalPages,
+    __experimentalIsFocusable: true,
     label: __('Last page'),
     icon: next,
     showTooltip: true,

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

@@ -1 +1 @@
-{"version":3,"names":["Button","__experimentalHStack","HStack","__experimentalText","Text","__experimentalNumberControl","NumberControl","createInterpolateElement","sprintf","__","_x","_n","chevronRight","chevronLeft","previous","next","Pagination","view","onChangeView","paginationInfo","totalItems","totalPages","createElement","expanded","spacing","justify","className","variant","onClick","page","disabled","label","icon","showTooltip","size","CurrenPageControl","min","max","onChange","value","_value","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} from '@wordpress/components';\nimport { createInterpolateElement } from '@wordpress/element';\nimport { sprintf, __, _x, _n } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft, previous, next } from '@wordpress/icons';\n\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={ 3 }>\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<Button\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tonChangeView( { ...view, page: 1 } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ view.page === 1 }\n\t\t\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\t\t\ticon={ previous }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tonChangeView( { ...view, page: view.page - 1 } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ view.page === 1 }\n\t\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\t\ticon={ chevronLeft }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\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={ 2 }\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\tconst _value = +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\t_value < 1 ||\n\t\t\t\t\t\t\t\t\t\t\t\t_value > 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<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<Button\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tonChangeView( { ...view, page: view.page + 1 } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ view.page >= totalPages }\n\t\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\t\ticon={ chevronRight }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tonChangeView( { ...view, page: totalPages } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ view.page >= totalPages }\n\t\t\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\t\t\ticon={ next }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n\nexport default Pagination;\n"],"mappings":"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"}
+{"version":3,"names":["Button","__experimentalHStack","HStack","__experimentalText","Text","__experimentalNumberControl","NumberControl","createInterpolateElement","sprintf","__","_x","_n","chevronRight","chevronLeft","previous","next","Pagination","view","onChangeView","paginationInfo","totalItems","totalPages","createElement","expanded","spacing","justify","className","variant","onClick","page","disabled","__experimentalIsFocusable","label","icon","showTooltip","size","CurrenPageControl","min","max","onChange","value","_value","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} from '@wordpress/components';\nimport { createInterpolateElement } from '@wordpress/element';\nimport { sprintf, __, _x, _n } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft, previous, next } from '@wordpress/icons';\n\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={ 3 }>\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<Button\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tonChangeView( { ...view, page: 1 } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ view.page === 1 }\n\t\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\t\t\ticon={ previous }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tonChangeView( { ...view, page: view.page - 1 } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ view.page === 1 }\n\t\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\t\ticon={ chevronLeft }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\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={ 2 }\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\tconst _value = +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\t_value < 1 ||\n\t\t\t\t\t\t\t\t\t\t\t\t_value > 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<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<Button\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tonChangeView( { ...view, page: view.page + 1 } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ view.page >= totalPages }\n\t\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\t\ticon={ chevronRight }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tonChangeView( { ...view, page: totalPages } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ view.page >= totalPages }\n\t\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\t\t\ticon={ next }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n\nexport default Pagination;\n"],"mappings":"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"}

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

@@ -11,11 +11,11 @@ import { __ } from '@wordpress/i18n';
  */
 import { unlock } from '../../lock-unlock';
 const {
-  DropdownMenuV2,
-  DropdownMenuGroupV2,
-  DropdownMenuItemV2,
-  DropdownSubMenuV2,
-  DropdownSubMenuTriggerV2
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuGroupV2: DropdownMenuGroup,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownSubMenuV2: DropdownSubMenu,
+  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger
 } = unlock(componentsPrivateApis);
 const availableViews = [{
   id: 'list',
@@ -40,14 +40,14 @@ function ViewTypeMenu({
     return null;
   }
   const activeView = _availableViews.find(v => view.type === v.id);
-  return createElement(DropdownSubMenuV2, {
-    trigger: createElement(DropdownSubMenuTriggerV2, {
+  return createElement(DropdownSubMenu, {
+    trigger: createElement(DropdownSubMenuTrigger, {
       suffix: createElement(Fragment, null, activeView.label, createElement(Icon, {
         icon: chevronRightSmall
       }))
     }, __('Layout'))
   }, _availableViews.map(availableView => {
-    return createElement(DropdownMenuItemV2, {
+    return createElement(DropdownMenuItem, {
       key: availableView.id,
       prefix: availableView.id === view.type && createElement(Icon, {
         icon: check
@@ -71,14 +71,14 @@ function PageSizeMenu({
   view,
   onChangeView
 }) {
-  return createElement(DropdownSubMenuV2, {
-    trigger: createElement(DropdownSubMenuTriggerV2, {
+  return createElement(DropdownSubMenu, {
+    trigger: createElement(DropdownSubMenuTrigger, {
       suffix: createElement(Fragment, null, view.perPage, createElement(Icon, {
         icon: chevronRightSmall
       }))
     }, __('Rows per page'))
   }, PAGE_SIZE_VALUES.map(size => {
-    return createElement(DropdownMenuItemV2, {
+    return createElement(DropdownMenuItem, {
       key: size,
       prefix: view.perPage === size && createElement(Icon, {
         icon: check
@@ -107,14 +107,14 @@ function FieldsVisibilityMenu({
   if (!hidableFields?.length) {
     return null;
   }
-  return createElement(DropdownSubMenuV2, {
-    trigger: createElement(DropdownSubMenuTriggerV2, {
+  return createElement(DropdownSubMenu, {
+    trigger: createElement(DropdownSubMenuTrigger, {
       suffix: createElement(Icon, {
         icon: chevronRightSmall
       })
     }, __('Fields'))
   }, hidableFields?.map(field => {
-    return createElement(DropdownMenuItemV2, {
+    return createElement(DropdownMenuItem, {
       key: field.id,
       prefix: !view.hiddenFields?.includes(field.id) && createElement(Icon, {
         icon: check
@@ -152,17 +152,17 @@ function SortMenu({
     return null;
   }
   const currentSortedField = fields.find(field => field.id === view.sort?.field);
-  return createElement(DropdownSubMenuV2, {
-    trigger: createElement(DropdownSubMenuTriggerV2, {
+  return createElement(DropdownSubMenu, {
+    trigger: createElement(DropdownSubMenuTrigger, {
       suffix: createElement(Fragment, null, currentSortedField?.header, createElement(Icon, {
         icon: chevronRightSmall
       }))
     }, __('Sort by'))
   }, sortableFields?.map(field => {
     const sortedDirection = view.sort?.direction;
-    return createElement(DropdownSubMenuV2, {
+    return createElement(DropdownSubMenu, {
       key: field.id,
-      trigger: createElement(DropdownSubMenuTriggerV2, {
+      trigger: createElement(DropdownSubMenuTrigger, {
         suffix: createElement(Icon, {
           icon: chevronRightSmall
         })
@@ -170,7 +170,7 @@ function SortMenu({
       side: "left"
     }, Object.entries(sortingItemsInfo).map(([direction, info]) => {
       const isActive = currentSortedField && sortedDirection === direction && field.id === currentSortedField.id;
-      return createElement(DropdownMenuItemV2, {
+      return createElement(DropdownMenuItem, {
         key: direction,
         prefix: createElement(Icon, {
           icon: info.icon
@@ -210,14 +210,14 @@ export default function ViewActions({
   onChangeView,
   supportedLayouts
 }) {
-  return createElement(DropdownMenuV2, {
-    label: __('Actions'),
+  return createElement(DropdownMenu, {
     trigger: createElement(Button, {
       variant: "tertiary",
       size: "compact",
-      icon: VIEW_TYPE_ICONS[view.type] || VIEW_TYPE_ICONS.list
-    }, __('View'))
-  }, createElement(DropdownMenuGroupV2, null, createElement(ViewTypeMenu, {
+      icon: VIEW_TYPE_ICONS[view.type] || VIEW_TYPE_ICONS.list,
+      label: __('View options')
+    })
+  }, createElement(DropdownMenuGroup, null, createElement(ViewTypeMenu, {
     view: view,
     onChangeView: onChangeView,
     supportedLayouts: supportedLayouts