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

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AddFilter;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _i18n = require("@wordpress/i18n");
+var _lockUnlock = require("../../lock-unlock");
+var _inFilter = require("./in-filter");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  DropdownMenuV2,
+  DropdownSubMenuV2,
+  DropdownSubMenuTriggerV2,
+  DropdownMenuItemV2
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const VALID_OPERATORS = [_inFilter.OPERATOR_IN];
+function AddFilter({
+  fields,
+  view,
+  onChangeView
+}) {
+  const filters = [];
+  fields.forEach(field => {
+    if (!field.filters) {
+      return;
+    }
+    field.filters.forEach(filter => {
+      if (VALID_OPERATORS.some(operator => operator === filter)) {
+        filters.push({
+          field: field.id,
+          name: field.header,
+          operator: filter,
+          elements: field.elements || [],
+          isVisible: view.filters.some(f => f.field === field.id && f.operator === filter)
+        });
+      }
+    });
+  });
+  if (filters.length === 0) {
+    return null;
+  }
+  return (0, _react.createElement)(DropdownMenuV2, {
+    label: (0, _i18n.__)('Add filter'),
+    trigger: (0, _react.createElement)(_components.Button, {
+      disabled: filters.length === view.filters?.length,
+      __experimentalIsFocusable: true,
+      icon: _icons.plus,
+      variant: "tertiary",
+      size: "compact"
+    }, (0, _i18n.__)('Add filter'))
+  }, filters.map(filter => {
+    if (filter.isVisible) {
+      return null;
+    }
+    return (0, _react.createElement)(DropdownSubMenuV2, {
+      key: filter.field,
+      trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+        suffix: (0, _react.createElement)(_components.Icon, {
+          icon: _icons.chevronRightSmall
+        })
+      }, filter.name)
+    }, filter.elements.map(element => (0, _react.createElement)(DropdownMenuItemV2, {
+      key: element.value,
+      onSelect: () => {
+        onChangeView(currentView => ({
+          ...currentView,
+          page: 1,
+          filters: [...currentView.filters, {
+            field: filter.field,
+            operator: 'in',
+            value: element.value
+          }]
+        }));
+      },
+      role: "menuitemcheckbox"
+    }, element.label)));
+  }));
+}
+//# sourceMappingURL=add-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_icons","_i18n","_lockUnlock","_inFilter","DropdownMenuV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2","DropdownMenuItemV2","unlock","componentsPrivateApis","VALID_OPERATORS","OPERATOR_IN","AddFilter","fields","view","onChangeView","filters","forEach","field","filter","some","operator","push","id","name","header","elements","isVisible","f","length","_react","createElement","label","__","trigger","Button","disabled","__experimentalIsFocusable","icon","plus","variant","size","map","key","suffix","Icon","chevronRightSmall","element","value","onSelect","currentView","page","role"],"sources":["@wordpress/edit-site/src/components/dataviews/add-filter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tIcon,\n} from '@wordpress/components';\nimport { chevronRightSmall, plus } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { OPERATOR_IN } from './in-filter';\n\nconst {\n\tDropdownMenuV2,\n\tDropdownSubMenuV2,\n\tDropdownSubMenuTriggerV2,\n\tDropdownMenuItemV2,\n} = unlock( componentsPrivateApis );\n\nconst VALID_OPERATORS = [ OPERATOR_IN ];\n\nexport default function AddFilter( { 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: field.elements || [],\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\tif ( filters.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DropdownMenuV2\n\t\t\tlabel={ __( 'Add filter' ) }\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\tdisabled={ filters.length === view.filters?.length }\n\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\ticon={ plus }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Add filter' ) }\n\t\t\t\t</Button>\n\t\t\t}\n\t\t>\n\t\t\t{ filters.map( ( filter ) => {\n\t\t\t\tif ( filter.isVisible ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownSubMenuV2\n\t\t\t\t\t\tkey={ filter.field }\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{ filter.name }\n\t\t\t\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ filter.elements.map( ( element ) => (\n\t\t\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\t\tonSelect={ () => {\n\t\t\t\t\t\t\t\t\tonChangeView( ( currentView ) => ( {\n\t\t\t\t\t\t\t\t\t\t...currentView,\n\t\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t\t...currentView.filters,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator: 'in',\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: element.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} ) );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t\t\t</DropdownMenuItemV2>\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</DropdownMenuV2>\n\t);\n}\n"],"mappings":"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"}

package/build/components/dataviews/dataviews.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DataViews;
+exports.viewTypeSupportsMap = void 0;
 var _react = require("react");
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
@@ -14,6 +15,7 @@ var _viewActions = _interopRequireDefault(require("./view-actions"));
 var _filters = _interopRequireDefault(require("./filters"));
 var _search = _interopRequireDefault(require("./search"));
 var _viewGrid = require("./view-grid");
+var _viewSideBySide = require("./view-side-by-side");
 /**
  * WordPress dependencies
  */
@@ -22,6 +24,20 @@ var _viewGrid = require("./view-grid");
  * Internal dependencies
  */
 
+// To do: convert to view type registry.
+const viewTypeSupportsMap = {
+  list: {},
+  grid: {},
+  'side-by-side': {
+    preview: true
+  }
+};
+exports.viewTypeSupportsMap = viewTypeSupportsMap;
+const viewTypeMap = {
+  list: _viewList.default,
+  grid: _viewGrid.ViewGrid,
+  'side-by-side': _viewSideBySide.ViewSideBySide
+};
 function DataViews({
   view,
   onChangeView,
@@ -31,9 +47,10 @@ function DataViews({
   actions,
   data,
   isLoading = false,
-  paginationInfo
+  paginationInfo,
+  supportedLayouts
 }) {
-  const ViewComponent = view.type === 'list' ? _viewList.default : _viewGrid.ViewGrid;
+  const ViewComponent = viewTypeMap[view.type];
   const _fields = (0, _element.useMemo)(() => {
     return fields.map(field => ({
       ...field,
@@ -56,11 +73,13 @@ function DataViews({
     view: view,
     onChangeView: onChangeView
   })), (0, _react.createElement)(_components.__experimentalHStack, {
-    justify: "end"
+    justify: "end",
+    expanded: false
   }, (0, _react.createElement)(_viewActions.default, {
     fields: fields,
     view: view,
-    onChangeView: onChangeView
+    onChangeView: onChangeView,
+    supportedLayouts: supportedLayouts
   }))), (0, _react.createElement)(ViewComponent, {
     fields: _fields,
     view: view,

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_viewList","_interopRequireDefault","_pagination","_viewActions","_filters","_search","_viewGrid","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","isLoading","paginationInfo","ViewComponent","type","ViewList","ViewGrid","_fields","useMemo","map","field","render","getValue","_react","createElement","className","__experimentalVStack","spacing","justify","__experimentalHStack","default","label"],"sources":["@wordpress/edit-site/src/components/dataviews/dataviews.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ViewList from './view-list';\nimport Pagination from './pagination';\nimport ViewActions from './view-actions';\nimport Filters from './filters';\nimport Search from './search';\nimport { ViewGrid } from './view-grid';\n\nexport default function DataViews( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions,\n\tdata,\n\tisLoading = false,\n\tpaginationInfo,\n} ) {\n\tconst ViewComponent = view.type === 'list' ? ViewList : ViewGrid;\n\tconst _fields = useMemo( () => {\n\t\treturn fields.map( ( field ) => ( {\n\t\t\t...field,\n\t\t\trender: field.render || field.getValue,\n\t\t} ) );\n\t}, [ fields ] );\n\treturn (\n\t\t<div className=\"dataviews-wrapper\">\n\t\t\t<VStack spacing={ 4 } justify=\"flex-start\">\n\t\t\t\t<HStack>\n\t\t\t\t\t<HStack justify=\"start\">\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<Search\n\t\t\t\t\t\t\t\tlabel={ searchLabel }\n\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Filters\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<HStack justify=\"end\">\n\t\t\t\t\t\t<ViewActions\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t<ViewComponent\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\tpaginationInfo={ paginationInfo }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tisLoading={ isLoading }\n\t\t\t\t/>\n\t\t\t\t<Pagination\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,WAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,YAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,QAAA,GAAAH,sBAAA,CAAAH,OAAA;AACA,IAAAO,OAAA,GAAAJ,sBAAA,CAAAH,OAAA;AACA,IAAAQ,SAAA,GAAAR,OAAA;AAjBA;AACA;AACA;;AAOA;AACA;AACA;;AAQe,SAASS,SAASA,CAAE;EAClCC,IAAI;EACJC,YAAY;EACZC,MAAM;EACNC,MAAM,GAAG,IAAI;EACbC,WAAW,GAAGC,SAAS;EACvBC,OAAO;EACPC,IAAI;EACJC,SAAS,GAAG,KAAK;EACjBC;AACD,CAAC,EAAG;EACH,MAAMC,aAAa,GAAGV,IAAI,CAACW,IAAI,KAAK,MAAM,GAAGC,iBAAQ,GAAGC,kBAAQ;EAChE,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC9B,OAAOb,MAAM,CAACc,GAAG,CAAIC,KAAK,KAAQ;MACjC,GAAGA,KAAK;MACRC,MAAM,EAAED,KAAK,CAACC,MAAM,IAAID,KAAK,CAACE;IAC/B,CAAC,CAAG,CAAC;EACN,CAAC,EAAE,CAAEjB,MAAM,CAAG,CAAC;EACf,OACC,IAAAkB,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAmB,GACjC,IAAAF,MAAA,CAAAC,aAAA,EAAChC,WAAA,CAAAkC,oBAAM;IAACC,OAAO,EAAG,CAAG;IAACC,OAAO,EAAC;EAAY,GACzC,IAAAL,MAAA,CAAAC,aAAA,EAAChC,WAAA,CAAAqC,oBAAM,QACN,IAAAN,MAAA,CAAAC,aAAA,EAAChC,WAAA,CAAAqC,oBAAM;IAACD,OAAO,EAAC;EAAO,GACpBtB,MAAM,IACP,IAAAiB,MAAA,CAAAC,aAAA,EAACxB,OAAA,CAAA8B,OAAM;IACNC,KAAK,EAAGxB,WAAa;IACrBJ,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA;EAAc,CAC7B,CACD,EACD,IAAAmB,MAAA,CAAAC,aAAA,EAACzB,QAAA,CAAA+B,OAAO;IACPzB,MAAM,EAAGA,MAAQ;IACjBF,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA;EAAc,CAC7B,CACM,CAAC,EACT,IAAAmB,MAAA,CAAAC,aAAA,EAAChC,WAAA,CAAAqC,oBAAM;IAACD,OAAO,EAAC;EAAK,GACpB,IAAAL,MAAA,CAAAC,aAAA,EAAC1B,YAAA,CAAAgC,OAAW;IACXzB,MAAM,EAAGA,MAAQ;IACjBF,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA;EAAc,CAC7B,CACM,CACD,CAAC,EACT,IAAAmB,MAAA,CAAAC,aAAA,EAACX,aAAa;IACbR,MAAM,EAAGY,OAAS;IAClBd,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA,YAAc;IAC7BQ,cAAc,EAAGA,cAAgB;IACjCH,OAAO,EAAGA,OAAS;IACnBC,IAAI,EAAGA,IAAM;IACbC,SAAS,EAAGA;EAAW,CACvB,CAAC,EACF,IAAAY,MAAA,CAAAC,aAAA,EAAC3B,WAAA,CAAAiC,OAAU;IACV3B,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA,YAAc;IAC7BQ,cAAc,EAAGA;EAAgB,CACjC,CACM,CACJ,CAAC;AAER"}
+{"version":3,"names":["_components","require","_element","_viewList","_interopRequireDefault","_pagination","_viewActions","_filters","_search","_viewGrid","_viewSideBySide","viewTypeSupportsMap","list","grid","preview","exports","viewTypeMap","ViewList","ViewGrid","ViewSideBySide","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","isLoading","paginationInfo","supportedLayouts","ViewComponent","type","_fields","useMemo","map","field","render","getValue","_react","createElement","className","__experimentalVStack","spacing","justify","__experimentalHStack","default","label","expanded"],"sources":["@wordpress/edit-site/src/components/dataviews/dataviews.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ViewList from './view-list';\nimport Pagination from './pagination';\nimport ViewActions from './view-actions';\nimport Filters from './filters';\nimport Search from './search';\nimport { ViewGrid } from './view-grid';\nimport { ViewSideBySide } from './view-side-by-side';\n\n// To do: convert to view type registry.\nexport const viewTypeSupportsMap = {\n\tlist: {},\n\tgrid: {},\n\t'side-by-side': {\n\t\tpreview: true,\n\t},\n};\n\nconst viewTypeMap = {\n\tlist: ViewList,\n\tgrid: ViewGrid,\n\t'side-by-side': ViewSideBySide,\n};\n\nexport default function DataViews( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions,\n\tdata,\n\tisLoading = false,\n\tpaginationInfo,\n\tsupportedLayouts,\n} ) {\n\tconst ViewComponent = viewTypeMap[ view.type ];\n\tconst _fields = useMemo( () => {\n\t\treturn fields.map( ( field ) => ( {\n\t\t\t...field,\n\t\t\trender: field.render || field.getValue,\n\t\t} ) );\n\t}, [ fields ] );\n\treturn (\n\t\t<div className=\"dataviews-wrapper\">\n\t\t\t<VStack spacing={ 4 } justify=\"flex-start\">\n\t\t\t\t<HStack>\n\t\t\t\t\t<HStack justify=\"start\">\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<Search\n\t\t\t\t\t\t\t\tlabel={ searchLabel }\n\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Filters\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<HStack justify=\"end\" expanded={ false }>\n\t\t\t\t\t\t<ViewActions\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t<ViewComponent\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\tpaginationInfo={ paginationInfo }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tisLoading={ isLoading }\n\t\t\t\t/>\n\t\t\t\t<Pagination\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/build/components/dataviews/filters.js

@@ -7,7 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Filters;
 var _react = require("react");
 var _i18n = require("@wordpress/i18n");
-var _inFilter = _interopRequireDefault(require("./in-filter"));
+var _inFilter = _interopRequireWildcard(require("./in-filter"));
+var _addFilter = _interopRequireDefault(require("./add-filter"));
+var _resetFilters = _interopRequireDefault(require("./reset-filters"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * WordPress dependencies
  */
@@ -16,59 +20,59 @@ var _inFilter = _interopRequireDefault(require("./in-filter"));
  * Internal dependencies
  */
 
+const VALID_OPERATORS = [_inFilter.OPERATOR_IN];
 function Filters({
   fields,
   view,
   onChangeView
 }) {
-  const filterIndex = {};
+  const filters = [];
   fields.forEach(field => {
     if (!field.filters) {
       return;
     }
     field.filters.forEach(filter => {
-      let id = field.id;
-      if ('string' === typeof filter) {
-        filterIndex[id] = {
-          id,
+      if (VALID_OPERATORS.some(operator => operator === filter)) {
+        filters.push({
+          field: field.id,
           name: field.header,
-          type: filter
-        };
-      }
-      if ('object' === typeof filter) {
-        id = filter.id || field.id;
-        filterIndex[id] = {
-          id,
-          name: filter.name || field.header,
-          type: filter.type
-        };
-      }
-      if ('enumeration' === filterIndex[id]?.type) {
-        const elements = [{
-          value: filter.resetValue || '',
-          label: filter.resetLabel || (0, _i18n.__)('All')
-        }, ...(field.elements || [])];
-        filterIndex[id] = {
-          ...filterIndex[id],
-          elements
-        };
+          operator: filter,
+          elements: [{
+            value: '',
+            label: (0, _i18n.__)('All')
+          }, ...(field.elements || [])],
+          isVisible: view.filters.some(f => f.field === field.id && f.operator === filter)
+        });
       }
     });
   });
-  return view.visibleFilters?.map(filterName => {
-    const filter = filterIndex[filterName];
-    if (!filter) {
+  const filterComponents = filters?.map(filter => {
+    if (!filter.isVisible) {
       return null;
     }
-    if (filter.type === 'enumeration') {
+    if (_inFilter.OPERATOR_IN === filter.operator) {
       return (0, _react.createElement)(_inFilter.default, {
-        key: filterName,
+        key: filter.field + '.' + filter.operator,
         filter: filter,
         view: view,
         onChangeView: onChangeView
       });
     }
     return null;
-  }) || (0, _i18n.__)('No filters available');
+  });
+  filterComponents.push((0, _react.createElement)(_addFilter.default, {
+    key: "add-filter",
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
+  }));
+  if (filterComponents.length > 1) {
+    filterComponents.push((0, _react.createElement)(_resetFilters.default, {
+      key: "reset-filters",
+      view: view,
+      onChangeView: onChangeView
+    }));
+  }
+  return filterComponents;
 }
 //# sourceMappingURL=filters.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_inFilter","_interopRequireDefault","Filters","fields","view","onChangeView","filterIndex","forEach","field","filters","filter","id","name","header","type","elements","value","resetValue","label","resetLabel","__","visibleFilters","map","filterName","_react","createElement","default","key"],"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 InFilter from './in-filter';\n\nexport default function Filters( { fields, view, onChangeView } ) {\n\tconst filterIndex = {};\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\tlet id = field.id;\n\t\t\tif ( 'string' === typeof filter ) {\n\t\t\t\tfilterIndex[ id ] = {\n\t\t\t\t\tid,\n\t\t\t\t\tname: field.header,\n\t\t\t\t\ttype: filter,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tif ( 'object' === typeof filter ) {\n\t\t\t\tid = filter.id || field.id;\n\t\t\t\tfilterIndex[ id ] = {\n\t\t\t\t\tid,\n\t\t\t\t\tname: filter.name || field.header,\n\t\t\t\t\ttype: filter.type,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tif ( 'enumeration' === filterIndex[ id ]?.type ) {\n\t\t\t\tconst elements = [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: filter.resetValue || '',\n\t\t\t\t\t\tlabel: filter.resetLabel || __( 'All' ),\n\t\t\t\t\t},\n\t\t\t\t\t...( field.elements || [] ),\n\t\t\t\t];\n\t\t\t\tfilterIndex[ id ] = {\n\t\t\t\t\t...filterIndex[ id ],\n\t\t\t\t\telements,\n\t\t\t\t};\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn (\n\t\tview.visibleFilters?.map( ( filterName ) => {\n\t\t\tconst filter = filterIndex[ filterName ];\n\n\t\t\tif ( ! filter ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tif ( filter.type === 'enumeration' ) {\n\t\t\t\treturn (\n\t\t\t\t\t<InFilter\n\t\t\t\t\t\tkey={ filterName }\n\t\t\t\t\t\tfilter={ filter }\n\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn null;\n\t\t} ) || __( 'No filters available' )\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGe,SAASG,OAAOA,CAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACjE,MAAMC,WAAW,GAAG,CAAC,CAAC;EACtBH,MAAM,CAACI,OAAO,CAAIC,KAAK,IAAM;IAC5B,IAAK,CAAEA,KAAK,CAACC,OAAO,EAAG;MACtB;IACD;IAEAD,KAAK,CAACC,OAAO,CAACF,OAAO,CAAIG,MAAM,IAAM;MACpC,IAAIC,EAAE,GAAGH,KAAK,CAACG,EAAE;MACjB,IAAK,QAAQ,KAAK,OAAOD,MAAM,EAAG;QACjCJ,WAAW,CAAEK,EAAE,CAAE,GAAG;UACnBA,EAAE;UACFC,IAAI,EAAEJ,KAAK,CAACK,MAAM;UAClBC,IAAI,EAAEJ;QACP,CAAC;MACF;MAEA,IAAK,QAAQ,KAAK,OAAOA,MAAM,EAAG;QACjCC,EAAE,GAAGD,MAAM,CAACC,EAAE,IAAIH,KAAK,CAACG,EAAE;QAC1BL,WAAW,CAAEK,EAAE,CAAE,GAAG;UACnBA,EAAE;UACFC,IAAI,EAAEF,MAAM,CAACE,IAAI,IAAIJ,KAAK,CAACK,MAAM;UACjCC,IAAI,EAAEJ,MAAM,CAACI;QACd,CAAC;MACF;MAEA,IAAK,aAAa,KAAKR,WAAW,CAAEK,EAAE,CAAE,EAAEG,IAAI,EAAG;QAChD,MAAMC,QAAQ,GAAG,CAChB;UACCC,KAAK,EAAEN,MAAM,CAACO,UAAU,IAAI,EAAE;UAC9BC,KAAK,EAAER,MAAM,CAACS,UAAU,IAAI,IAAAC,QAAE,EAAE,KAAM;QACvC,CAAC,EACD,IAAKZ,KAAK,CAACO,QAAQ,IAAI,EAAE,CAAE,CAC3B;QACDT,WAAW,CAAEK,EAAE,CAAE,GAAG;UACnB,GAAGL,WAAW,CAAEK,EAAE,CAAE;UACpBI;QACD,CAAC;MACF;IACD,CAAE,CAAC;EACJ,CAAE,CAAC;EAEH,OACCX,IAAI,CAACiB,cAAc,EAAEC,GAAG,CAAIC,UAAU,IAAM;IAC3C,MAAMb,MAAM,GAAGJ,WAAW,CAAEiB,UAAU,CAAE;IAExC,IAAK,CAAEb,MAAM,EAAG;MACf,OAAO,IAAI;IACZ;IAEA,IAAKA,MAAM,CAACI,IAAI,KAAK,aAAa,EAAG;MACpC,OACC,IAAAU,MAAA,CAAAC,aAAA,EAACzB,SAAA,CAAA0B,OAAQ;QACRC,GAAG,EAAGJ,UAAY;QAClBb,MAAM,EAAGA,MAAQ;QACjBN,IAAI,EAAGA,IAAM;QACbC,YAAY,EAAGA;MAAc,CAC7B,CAAC;IAEJ;IAEA,OAAO,IAAI;EACZ,CAAE,CAAC,IAAI,IAAAe,QAAE,EAAE,sBAAuB,CAAC;AAErC"}
+{"version":3,"names":["_i18n","require","_inFilter","_interopRequireWildcard","_addFilter","_interopRequireDefault","_resetFilters","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","VALID_OPERATORS","OPERATOR_IN","Filters","fields","view","onChangeView","filters","forEach","field","filter","some","operator","push","id","name","header","elements","value","label","__","isVisible","f","filterComponents","map","_react","createElement","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":"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"}

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

@@ -3,44 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.OPERATOR_IN = void 0;
 var _react = require("react");
 var _components = require("@wordpress/components");
-var _blockEditor = require("@wordpress/block-editor");
-var _lockUnlock = require("../../lock-unlock");
+var _i18n = require("@wordpress/i18n");
 /**
  * WordPress dependencies
  */
 
-/**
- * Internal dependencies
- */
-
-const {
-  cleanEmptyObject
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+const OPERATOR_IN = 'in';
+exports.OPERATOR_IN = OPERATOR_IN;
 var _default = ({
   filter,
   view,
   onChangeView
 }) => {
+  const valueFound = view.filters.find(f => f.field === filter.field && f.operator === OPERATOR_IN);
+  const activeValue = !valueFound || !valueFound.hasOwnProperty('value') ? '' : valueFound.value;
+  const id = `dataviews__filters-in-${filter.field}`;
   return (0, _react.createElement)(_components.SelectControl, {
-    value: view.filters[filter.id],
+    id: id,
+    __nextHasNoMarginBottom: true,
+    value: activeValue,
     prefix: (0, _react.createElement)(_components.__experimentalInputControlPrefixWrapper, {
-      as: "span",
+      as: "label",
+      htmlFor: id,
       className: "dataviews__select-control-prefix"
-    }, filter.name + ':'),
+    }, (0, _i18n.sprintf)( /* translators: filter name. */
+    (0, _i18n.__)('%s:'), filter.name)),
     options: filter.elements,
     onChange: value => {
-      if (value === '') {
-        value = undefined;
-      }
+      const filters = view.filters.filter(f => f.field !== filter.field || f.operator !== OPERATOR_IN);
+      filters.push({
+        field: filter.field,
+        operator: OPERATOR_IN,
+        value
+      });
       onChangeView(currentView => ({
         ...currentView,
-        filters: cleanEmptyObject({
-          ...currentView.filters,
-          [filter.id]: value
-        })
+        page: 1,
+        filters
       }));
     }
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_blockEditor","_lockUnlock","cleanEmptyObject","unlock","blockEditorPrivateApis","_default","filter","view","onChangeView","_react","createElement","SelectControl","value","filters","id","prefix","__experimentalInputControlPrefixWrapper","as","className","name","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 ( { filter, view, onChangeView } ) => {\n\treturn (\n\t\t<SelectControl\n\t\t\tvalue={ view.filters[ filter.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{ filter.name + ':' }\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\toptions={ filter.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[ filter.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,MAAM;EAAEC,IAAI;EAAEC;AAAa,CAAC,KAAM;EACpD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAAa,aAAa;IACbC,KAAK,EAAGL,IAAI,CAACM,OAAO,CAAEP,MAAM,CAACQ,EAAE,CAAI;IACnCC,MAAM,EACL,IAAAN,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAAkB,uCAAyB;MACzBC,EAAE,EAAC,MAAM;MACTC,SAAS,EAAC;IAAkC,GAE1CZ,MAAM,CAACa,IAAI,GAAG,GACU,CAC3B;IACDC,OAAO,EAAGd,MAAM,CAACe,QAAU;IAC3BC,QAAQ,EAAKV,KAAK,IAAM;MACvB,IAAKA,KAAK,KAAK,EAAE,EAAG;QACnBA,KAAK,GAAGW,SAAS;MAClB;MAEAf,YAAY,CAAIgB,WAAW,KAAQ;QAClC,GAAGA,WAAW;QACdX,OAAO,EAAEX,gBAAgB,CAAE;UAC1B,GAAGsB,WAAW,CAACX,OAAO;UACtB,CAAEP,MAAM,CAACQ,EAAE,GAAIF;QAChB,CAAE;MACH,CAAC,CAAG,CAAC;IACN;EAAG,CACH,CAAC;AAEJ,CAAC;AAAAa,OAAA,CAAAC,OAAA,GAAArB,QAAA"}
+{"version":3,"names":["_components","require","_i18n","OPERATOR_IN","exports","_default","filter","view","onChangeView","valueFound","filters","find","f","field","operator","activeValue","hasOwnProperty","value","id","_react","createElement","SelectControl","__nextHasNoMarginBottom","prefix","__experimentalInputControlPrefixWrapper","as","htmlFor","className","sprintf","__","name","options","elements","onChange","push","currentView","page","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 { __, sprintf } from '@wordpress/i18n';\n\nexport const OPERATOR_IN = 'in';\n\nexport default ( { filter, view, onChangeView } ) => {\n\tconst valueFound = view.filters.find(\n\t\t( f ) => f.field === filter.field && f.operator === OPERATOR_IN\n\t);\n\n\tconst activeValue =\n\t\t! valueFound || ! valueFound.hasOwnProperty( 'value' )\n\t\t\t? ''\n\t\t\t: valueFound.value;\n\n\tconst id = `dataviews__filters-in-${ filter.field }`;\n\n\treturn (\n\t\t<SelectControl\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom\n\t\t\tvalue={ activeValue }\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName=\"dataviews__select-control-prefix\"\n\t\t\t\t>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: filter name. */\n\t\t\t\t\t\t__( '%s:' ),\n\t\t\t\t\t\tfilter.name\n\t\t\t\t\t) }\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\toptions={ filter.elements }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tconst filters = view.filters.filter(\n\t\t\t\t\t( f ) =>\n\t\t\t\t\t\tf.field !== filter.field || f.operator !== OPERATOR_IN\n\t\t\t\t);\n\n\t\t\t\tfilters.push( {\n\t\t\t\t\tfield: filter.field,\n\t\t\t\t\toperator: OPERATOR_IN,\n\t\t\t\t\tvalue,\n\t\t\t\t} );\n\n\t\t\t\tonChangeView( ( currentView ) => ( {\n\t\t\t\t\t...currentView,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tfilters,\n\t\t\t\t} ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AAPA;AACA;AACA;;AAOO,MAAME,WAAW,GAAG,IAAI;AAACC,OAAA,CAAAD,WAAA,GAAAA,WAAA;AAAA,IAAAE,QAAA,GAEjBA,CAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAa,CAAC,KAAM;EACpD,MAAMC,UAAU,GAAGF,IAAI,CAACG,OAAO,CAACC,IAAI,CACjCC,CAAC,IAAMA,CAAC,CAACC,KAAK,KAAKP,MAAM,CAACO,KAAK,IAAID,CAAC,CAACE,QAAQ,KAAKX,WACrD,CAAC;EAED,MAAMY,WAAW,GAChB,CAAEN,UAAU,IAAI,CAAEA,UAAU,CAACO,cAAc,CAAE,OAAQ,CAAC,GACnD,EAAE,GACFP,UAAU,CAACQ,KAAK;EAEpB,MAAMC,EAAE,GAAI,yBAAyBZ,MAAM,CAACO,KAAO,EAAC;EAEpD,OACC,IAAAM,MAAA,CAAAC,aAAA,EAACpB,WAAA,CAAAqB,aAAa;IACbH,EAAE,EAAGA,EAAI;IACTI,uBAAuB;IACvBL,KAAK,EAAGF,WAAa;IACrBQ,MAAM,EACL,IAAAJ,MAAA,CAAAC,aAAA,EAACpB,WAAA,CAAAwB,uCAAyB;MACzBC,EAAE,EAAC,OAAO;MACVC,OAAO,EAAGR,EAAI;MACdS,SAAS,EAAC;IAAkC,GAE1C,IAAAC,aAAO,GACR;IACA,IAAAC,QAAE,EAAE,KAAM,CAAC,EACXvB,MAAM,CAACwB,IACR,CAC0B,CAC3B;IACDC,OAAO,EAAGzB,MAAM,CAAC0B,QAAU;IAC3BC,QAAQ,EAAKhB,KAAK,IAAM;MACvB,MAAMP,OAAO,GAAGH,IAAI,CAACG,OAAO,CAACJ,MAAM,CAChCM,CAAC,IACFA,CAAC,CAACC,KAAK,KAAKP,MAAM,CAACO,KAAK,IAAID,CAAC,CAACE,QAAQ,KAAKX,WAC7C,CAAC;MAEDO,OAAO,CAACwB,IAAI,CAAE;QACbrB,KAAK,EAAEP,MAAM,CAACO,KAAK;QACnBC,QAAQ,EAAEX,WAAW;QACrBc;MACD,CAAE,CAAC;MAEHT,YAAY,CAAI2B,WAAW,KAAQ;QAClC,GAAGA,WAAW;QACdC,IAAI,EAAE,CAAC;QACP1B;MACD,CAAC,CAAG,CAAC;IACN;EAAG,CACH,CAAC;AAEJ,CAAC;AAAAN,OAAA,CAAAiC,OAAA,GAAAhC,QAAA"}

package/build/components/dataviews/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,5 +9,13 @@ Object.defineProperty(exports, "DataViews", {
     return _dataviews.default;
   }
 });
-var _dataviews = _interopRequireDefault(require("./dataviews"));
+Object.defineProperty(exports, "viewTypeSupportsMap", {
+  enumerable: true,
+  get: function () {
+    return _dataviews.viewTypeSupportsMap;
+  }
+});
+var _dataviews = _interopRequireWildcard(require("./dataviews"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["_dataviews","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set"],"sources":["@wordpress/edit-site/src/components/dataviews/index.js"],"sourcesContent":["export { default as DataViews, viewTypeSupportsMap } from './dataviews';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAwE,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA"}

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

@@ -13,6 +13,55 @@ var _icons = require("@wordpress/icons");
  * WordPress dependencies
  */
 
+function PrimaryActionTrigger({
+  action,
+  onClick
+}) {
+  return (0, _react.createElement)(_components.Button, {
+    label: action.label,
+    icon: action.icon,
+    isDestructive: action.isDestructive,
+    size: "compact",
+    onClick: onClick
+  });
+}
+function SecondaryActionTrigger({
+  action,
+  onClick
+}) {
+  return (0, _react.createElement)(_components.MenuItem, {
+    onClick: onClick,
+    isDestructive: action.isDestructive
+  }, action.label);
+}
+function ActionWithModal({
+  action,
+  item,
+  ActionTrigger
+}) {
+  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(false);
+  const actionTriggerProps = {
+    action,
+    onClick: () => setIsModalOpen(true)
+  };
+  const {
+    RenderModal,
+    hideModalHeader
+  } = action;
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(ActionTrigger, {
+    ...actionTriggerProps
+  }), isModalOpen && (0, _react.createElement)(_components.Modal, {
+    title: !hideModalHeader && action.label,
+    __experimentalHideHeader: !!hideModalHeader,
+    onRequestClose: () => {
+      setIsModalOpen(false);
+    },
+    overlayClassName: "dataviews-action-modal"
+  }, (0, _react.createElement)(RenderModal, {
+    item: item,
+    closeModal: () => setIsModalOpen(false)
+  })));
+}
 function ItemActions({
   item,
   actions
@@ -43,20 +92,39 @@ function ItemActions({
   }
   return (0, _react.createElement)(_components.__experimentalHStack, {
     justify: "flex-end"
-  }, !!primaryActions.length && primaryActions.map(action => (0, _react.createElement)(_components.Button, {
-    label: action.label,
-    key: action.id,
-    icon: action.icon,
-    onClick: () => action.perform(item),
-    isDestructive: action.isDestructive,
-    size: "compact"
-  })), !!secondaryActions.length && (0, _react.createElement)(_components.DropdownMenu, {
+  }, !!primaryActions.length && primaryActions.map(action => {
+    if (!!action.RenderModal) {
+      return (0, _react.createElement)(ActionWithModal, {
+        key: action.id,
+        action: action,
+        item: item,
+        ActionTrigger: PrimaryActionTrigger
+      });
+    }
+    return (0, _react.createElement)(PrimaryActionTrigger, {
+      key: action.id,
+      action: action,
+      item: item,
+      onClick: () => action.callback(item)
+    });
+  }), !!secondaryActions.length && (0, _react.createElement)(_components.DropdownMenu, {
     icon: _icons.moreVertical,
     label: (0, _i18n.__)('Actions')
-  }, () => (0, _react.createElement)(_components.MenuGroup, null, secondaryActions.map(action => (0, _react.createElement)(_components.MenuItem, {
-    key: action.id,
-    onClick: () => action.perform(item),
-    isDestructive: action.isDestructive
-  }, action.label)))));
+  }, () => (0, _react.createElement)(_components.MenuGroup, null, secondaryActions.map(action => {
+    if (!!action.RenderModal) {
+      return (0, _react.createElement)(ActionWithModal, {
+        key: action.id,
+        action: action,
+        item: item,
+        ActionTrigger: SecondaryActionTrigger
+      });
+    }
+    return (0, _react.createElement)(SecondaryActionTrigger, {
+      key: action.id,
+      action: action,
+      item: item,
+      onClick: () => action.callback(item)
+    });
+  }))));
 }
 //# sourceMappingURL=item-actions.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_element","_icons","ItemActions","item","actions","primaryActions","secondaryActions","useMemo","reduce","accumulator","action","isEligible","isPrimary","icon","push","length","_react","createElement","__experimentalHStack","justify","map","Button","label","key","id","onClick","perform","isDestructive","size","DropdownMenu","moreVertical","__","MenuGroup","MenuItem"],"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\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { moreVertical } from '@wordpress/icons';\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\t<Button\n\t\t\t\t\t\tlabel={ action.label }\n\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\ticon={ action.icon }\n\t\t\t\t\t\tonClick={ () => action.perform( item ) }\n\t\t\t\t\t\tisDestructive={ action.isDestructive }\n\t\t\t\t\t\tsize=\"compact\"\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\t<MenuItem\n\t\t\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\t\t\tonClick={ () => action.perform( item ) }\n\t\t\t\t\t\t\t\t\tisDestructive={ action.isDestructive }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ action.label }\n\t\t\t\t\t\t\t\t</MenuItem>\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":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAOA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAYe,SAASI,WAAWA,CAAE;EAAEC,IAAI;EAAEC;AAAQ,CAAC,EAAG;EACxD,MAAM;IAAEC,cAAc;IAAEC;EAAiB,CAAC,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC3D,OAAOH,OAAO,CAACI,MAAM,CACpB,CAAEC,WAAW,EAAEC,MAAM,KAAM;MAC1B;MACA;MACA,IAAKA,MAAM,CAACC,UAAU,IAAI,CAAED,MAAM,CAACC,UAAU,CAAER,IAAK,CAAC,EAAG;QACvD,OAAOM,WAAW;MACnB;MACA,IAAKC,MAAM,CAACE,SAAS,IAAI,CAAC,CAAEF,MAAM,CAACG,IAAI,EAAG;QACzCJ,WAAW,CAACJ,cAAc,CAACS,IAAI,CAAEJ,MAAO,CAAC;MAC1C,CAAC,MAAM;QACND,WAAW,CAACH,gBAAgB,CAACQ,IAAI,CAAEJ,MAAO,CAAC;MAC5C;MACA,OAAOD,WAAW;IACnB,CAAC,EACD;MAAEJ,cAAc,EAAE,EAAE;MAAEC,gBAAgB,EAAE;IAAG,CAC5C,CAAC;EACF,CAAC,EAAE,CAAEF,OAAO,EAAED,IAAI,CAAG,CAAC;EACtB,IAAK,CAAEE,cAAc,CAACU,MAAM,IAAI,CAAET,gBAAgB,CAACS,MAAM,EAAG;IAC3D,OAAO,IAAI;EACZ;EACA,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACpB,WAAA,CAAAqB,oBAAM;IAACC,OAAO,EAAC;EAAU,GACvB,CAAC,CAAEd,cAAc,CAACU,MAAM,IACzBV,cAAc,CAACe,GAAG,CAAIV,MAAM,IAC3B,IAAAM,MAAA,CAAAC,aAAA,EAACpB,WAAA,CAAAwB,MAAM;IACNC,KAAK,EAAGZ,MAAM,CAACY,KAAO;IACtBC,GAAG,EAAGb,MAAM,CAACc,EAAI;IACjBX,IAAI,EAAGH,MAAM,CAACG,IAAM;IACpBY,OAAO,EAAGA,CAAA,KAAMf,MAAM,CAACgB,OAAO,CAAEvB,IAAK,CAAG;IACxCwB,aAAa,EAAGjB,MAAM,CAACiB,aAAe;IACtCC,IAAI,EAAC;EAAS,CACd,CACA,CAAC,EACF,CAAC,CAAEtB,gBAAgB,CAACS,MAAM,IAC3B,IAAAC,MAAA,CAAAC,aAAA,EAACpB,WAAA,CAAAgC,YAAY;IAAChB,IAAI,EAAGiB,mBAAc;IAACR,KAAK,EAAG,IAAAS,QAAE,EAAE,SAAU;EAAG,GAC1D,MACD,IAAAf,MAAA,CAAAC,aAAA,EAACpB,WAAA,CAAAmC,SAAS,QACP1B,gBAAgB,CAACc,GAAG,CAAIV,MAAM,IAC/B,IAAAM,MAAA,CAAAC,aAAA,EAACpB,WAAA,CAAAoC,QAAQ;IACRV,GAAG,EAAGb,MAAM,CAACc,EAAI;IACjBC,OAAO,EAAGA,CAAA,KAAMf,MAAM,CAACgB,OAAO,CAAEvB,IAAK,CAAG;IACxCwB,aAAa,EAAGjB,MAAM,CAACiB;EAAe,GAEpCjB,MAAM,CAACY,KACA,CACT,CACQ,CAEC,CAER,CAAC;AAEX"}
+{"version":3,"names":["_components","require","_i18n","_element","_icons","PrimaryActionTrigger","action","onClick","_react","createElement","Button","label","icon","isDestructive","size","SecondaryActionTrigger","MenuItem","ActionWithModal","item","ActionTrigger","isModalOpen","setIsModalOpen","useState","actionTriggerProps","RenderModal","hideModalHeader","Fragment","Modal","title","__experimentalHideHeader","onRequestClose","overlayClassName","closeModal","ItemActions","actions","primaryActions","secondaryActions","useMemo","reduce","accumulator","isEligible","isPrimary","push","length","__experimentalHStack","justify","map","key","id","callback","DropdownMenu","moreVertical","__","MenuGroup"],"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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"}

package/build/components/dataviews/pagination.js

@@ -74,12 +74,13 @@ function Pagination({
       min: 1,
       max: totalPages,
       onChange: value => {
-        if (!value || value < 1 || value > totalPages) {
+        const _value = +value;
+        if (!_value || _value < 1 || _value > totalPages) {
           return;
         }
         onChangeView({
           ...view,
-          page: value
+          page: _value
         });
       },
       step: "1",