@wordpress/dataviews 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## Unreleased
 
+## 0.9.0 (2024-04-03)
+
+### Enhancement
+
+- The `enumeration` type has been removed and we'll introduce new field types soon. The existing filters will still work as before given they checked for field.elements, which is still a condition filters should have.
+
+## 0.8.0 (2024-03-21)
+
+### Enhancement
+
+- Two new operators have been added: `isAll` and `isNotAll`. These are meant to represent `AND` operations. For example, `Category is all: Book, Review, Science Fiction` would represent all items that have all three categories selected.
+- DataViews now supports multi-selection. A new set of filter operators has been introduced: `is`, `isNot`, `isAny`, `isNone`. Single-selection operators are `is` and `isNot`, and multi-selection operators are `isAny` and `isNone`. If no operators are declared for a filter, it will support multi-selection. Additionally, the old filter operators `in` and `notIn` operators have been deprecated and will work as `is` and `isNot` respectively. Please, migrate to the new operators as they'll be removed soon.
+
+### Breaking changes
+
+- Removed the `getPaginationResults` and `sortByTextFields` utils and replaced them with a unique `filterSortAndPaginate` function.
+
 ## 0.7.0 (2024-03-06)
 
 ## 0.6.0 (2024-02-21)

package/README.md

@@ -59,17 +59,23 @@ The fields describe the visible items for each record in the dataset.
 Example:
 
 ```js
+const STATUSES = [
+	{ value: 'draft', label: __( 'Draft' ) },
+	{ value: 'future', label: __( 'Scheduled' ) },
+	{ value: 'pending', label: __( 'Pending Review' ) },
+	{ value: 'private', label: __( 'Private' ) },
+	{ value: 'publish', label: __( 'Published' ) },
+	{ value: 'trash', label: __( 'Trash' ) },
+];
 const fields = [
 	{
 		id: 'title',
 		header: 'Title',
-		getValue: ({ item }) => item.title,
 		enableHiding: false,
 	},
 	{
 		id: 'date',
 		header: 'Date',
-		getValue: ( { item } ) => item.date,
 		render: ( { item } ) => {
 			return (
 				<time>{ getFormattedDate( item.date ) }</time>
@@ -79,19 +85,32 @@ const fields = [
 	{
 		id: 'author',
 		header: __( 'Author' ),
-		getValue: ( { item } ) => item.author,
 		render: ( { item } ) => {
 			return (
 				<a href="...">{ item.author }</a>
 			);
 		},
-		type: 'enumeration',
 		elements: [
 			{ value: 1, label: 'Admin' }
 			{ value: 2, label: 'User' }
-		]
+		],
+		filterBy: {
+			operators: [ 'is', 'isNot' ]
+		},
 		enableSorting: false
-	}
+	},
+	{
+		header: __( 'Status' ),
+		id: 'status',
+		getValue: ( { item } ) =>
+			STATUSES.find( ( { value } ) => value === item.status )
+				?.label ?? item.status,
+		elements: STATUSES,
+		filterBy: {
+			operators: [ 'isAny' ],
+		},
+		enableSorting: false,
+	},
 ]
 ```
 
@@ -99,10 +118,10 @@ Each field is an object with the following properties:
 
 -   `id`: identifier for the field. Unique.
 -   `header`: the field's name to be shown in the UI.
--   `getValue`: function that returns the value of the field.
+-   `getValue`: function that returns the value of the field, defaults to `field[id]`.
 -   `render`: function that renders the field. Optional, `getValue` will be used if `render` is not defined.
 -   `elements`: the set of valid values for the field's value.
--   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment. See "Field types".
+-   `type`: the type of the field. See "Field types".
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
 -   `filterBy`: configuration for the filters.
@@ -120,8 +139,8 @@ const view = {
 	type: 'table',
 	search: '',
 	filters: [
-		{ field: 'author', operator: 'in', value: 2 },
-		{ field: 'status', operator: 'in', value: 'publish,draft' }
+		{ field: 'author', operator: 'is', value: 2 },
+		{ field: 'status', operator: 'isAny', value: [ 'publish', 'draft'] }
 	],
 	page: 1,
 	perPage: 5,
@@ -140,7 +159,7 @@ Properties:
 -   `search`: the text search applied to the dataset.
 -   `filters`: the filters applied to the dataset. Each item describes:
     -   `field`: which field this filter is bound to.
-    -   `operator`: which type of filter it is. One of `in`, `notIn`. See "Operator types".
+    -   `operator`: which type of filter it is. See "Operator types".
     -   `value`: the actual value selected by the user.
 -   `perPage`: number of records to show per page.
 -   `page`: the page that is visible.
@@ -172,8 +191,8 @@ function MyCustomPageTable() {
 		},
 		search: '',
 		filters: [
-			{ field: 'author', operator: 'in', value: 2 },
-			{ field: 'status', operator: 'in', value: 'publish,draft' }
+			{ field: 'author', operator: 'is', value: 2 },
+			{ field: 'status', operator: 'isAny', value: [ 'publish', 'draft' ] }
 		],
 		hiddenFields: [ 'date', 'featured-image' ],
 		layout: {},
@@ -182,10 +201,10 @@ function MyCustomPageTable() {
 	const queryArgs = useMemo( () => {
 		const filters = {};
 		view.filters.forEach( ( filter ) => {
-			if ( filter.field === 'status' && filter.operator === 'in' ) {
+			if ( filter.field === 'status' && filter.operator === 'isAny' ) {
 				filters.status = filter.value;
 			}
-			if ( filter.field === 'author' && filter.operator === 'in' ) {
+			if ( filter.field === 'author' && filter.operator === 'is' ) {
 				filters.author = filter.value;
 			}
 		} );
@@ -278,12 +297,24 @@ Callback that signals the user triggered the details for one of more items, and
 
 ### Fields
 
-- `enumeration`: the field value should be taken and can be filtered from a closed list of elements.
+> The `enumeration` type was removed as it was deemed redundant with the field.elements metadata. New types will be introduced soon.
 
 ### Operators
 
-- `in`: operator to be used in filters for fields of type `enumeration`.
-- `notIn`: operator to be used in filters for fields of type `enumeration`.
+Allowed operators:
+
+| Operator | Selection | Description | Example |
+| --- | ---  | --- | --- |
+| `is` | Single item | `EQUAL TO`. The item's field is equal to a single value. | Author is Admin |
+| `isNot` | Single item | `NOT EQUAL TO`. The item's field is not equal to a single value. | Author is not Admin |
+| `isAny` | Multiple items | `OR`. The item's field is present in a list of values. | Author is any: Admin, Editor |
+| `isNone` | Multiple items | `NOT OR`. The item's field is not present in a list of values. | Author is none: Admin, Editor |
+| `isAll` | Multiple items | `AND`. The item's field has all of the values in the list. | Category is all: Book, Review, Science Fiction |
+| `isNotAll` | Multiple items | `NOT AND`. The item's field doesn't have all of the values in the list. | Category is not all: Book, Review, Science Fiction |
+
+`is` and `isNot` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotALl` are multi-selection. By default, a filter with no operators declared will support the `isAny` and `isNone` multi-selection operators. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded and the filter won't allow selecting more than one item.
+
+> The legacy operators `in` and `notIn` have been deprecated and will be removed soon. In the meantime, they work as `is` and `isNot` operators, respectively.
 
 ## Contributing to this package
 

package/build/constants.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIEW_LAYOUTS = exports.SORTING_DIRECTIONS = exports.OPERATOR_NOT_IN = exports.OPERATOR_IN = exports.OPERATORS = exports.LAYOUT_TABLE = exports.LAYOUT_LIST = exports.LAYOUT_GRID = exports.ENUMERATION_TYPE = void 0;
+exports.VIEW_LAYOUTS = exports.SORTING_DIRECTIONS = exports.OPERATOR_IS_NOT_ALL = exports.OPERATOR_IS_NOT = exports.OPERATOR_IS_NONE = exports.OPERATOR_IS_ANY = exports.OPERATOR_IS_ALL = exports.OPERATOR_IS = exports.OPERATORS = exports.LAYOUT_TABLE = exports.LAYOUT_LIST = exports.LAYOUT_GRID = exports.ALL_OPERATORS = void 0;
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _viewTable = _interopRequireDefault(require("./view-table"));
@@ -18,20 +18,38 @@ var _viewList = _interopRequireDefault(require("./view-list"));
  * Internal dependencies
  */
 
-// Field types.
-const ENUMERATION_TYPE = exports.ENUMERATION_TYPE = 'enumeration';
-
 // Filter operators.
-const OPERATOR_IN = exports.OPERATOR_IN = 'in';
-const OPERATOR_NOT_IN = exports.OPERATOR_NOT_IN = 'notIn';
+const OPERATOR_IS = exports.OPERATOR_IS = 'is';
+const OPERATOR_IS_NOT = exports.OPERATOR_IS_NOT = 'isNot';
+const OPERATOR_IS_ANY = exports.OPERATOR_IS_ANY = 'isAny';
+const OPERATOR_IS_NONE = exports.OPERATOR_IS_NONE = 'isNone';
+const OPERATOR_IS_ALL = exports.OPERATOR_IS_ALL = 'isAll';
+const OPERATOR_IS_NOT_ALL = exports.OPERATOR_IS_NOT_ALL = 'isNotAll';
+const ALL_OPERATORS = exports.ALL_OPERATORS = [OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_IS_ANY, OPERATOR_IS_NONE, OPERATOR_IS_ALL, OPERATOR_IS_NOT_ALL];
 const OPERATORS = exports.OPERATORS = {
-  [OPERATOR_IN]: {
-    key: 'in-filter',
+  [OPERATOR_IS]: {
+    key: 'is-filter',
     label: (0, _i18n.__)('Is')
   },
-  [OPERATOR_NOT_IN]: {
-    key: 'not-in-filter',
+  [OPERATOR_IS_NOT]: {
+    key: 'is-not-filter',
     label: (0, _i18n.__)('Is not')
+  },
+  [OPERATOR_IS_ANY]: {
+    key: 'is-any-filter',
+    label: (0, _i18n.__)('Is any')
+  },
+  [OPERATOR_IS_NONE]: {
+    key: 'is-none-filter',
+    label: (0, _i18n.__)('Is none')
+  },
+  [OPERATOR_IS_ALL]: {
+    key: 'is-all-filter',
+    label: (0, _i18n.__)('Is all')
+  },
+  [OPERATOR_IS_NOT_ALL]: {
+    key: 'is-not-all-filter',
+    label: (0, _i18n.__)('Is not all')
   }
 };
 

package/build/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_icons","_viewTable","_interopRequireDefault","_viewGrid","_viewList","ENUMERATION_TYPE","exports","OPERATOR_IN","OPERATOR_NOT_IN","OPERATORS","key","label","__","SORTING_DIRECTIONS","asc","desc","LAYOUT_TABLE","LAYOUT_GRID","LAYOUT_LIST","VIEW_LAYOUTS","type","component","ViewTable","icon","blockTable","ViewGrid","category","ViewList","isRTL","formatListBulletsRTL","formatListBullets"],"sources":["@wordpress/dataviews/src/constants.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './view-table';\nimport ViewGrid from './view-grid';\nimport ViewList from './view-list';\n\n// Field types.\nexport const ENUMERATION_TYPE = 'enumeration';\n\n// Filter operators.\nexport const OPERATOR_IN = 'in';\nexport const OPERATOR_NOT_IN = 'notIn';\nexport const OPERATORS = {\n\t[ OPERATOR_IN ]: {\n\t\tkey: 'in-filter',\n\t\tlabel: __( 'Is' ),\n\t},\n\t[ OPERATOR_NOT_IN ]: {\n\t\tkey: 'not-in-filter',\n\t\tlabel: __( 'Is not' ),\n\t},\n};\n\n// Sorting\nexport const SORTING_DIRECTIONS = {\n\tasc: { label: __( 'Sort ascending' ) },\n\tdesc: { label: __( 'Sort descending' ) },\n};\n\n// View layouts.\nexport const LAYOUT_TABLE = 'table';\nexport const LAYOUT_GRID = 'grid';\nexport const LAYOUT_LIST = 'list';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t},\n];\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAUA,IAAAE,UAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,SAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,SAAA,GAAAF,sBAAA,CAAAH,OAAA;AAhBA;AACA;AACA;;AASA;AACA;AACA;;AAKA;AACO,MAAMM,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,aAAa;;AAE7C;AACO,MAAME,WAAW,GAAAD,OAAA,CAAAC,WAAA,GAAG,IAAI;AACxB,MAAMC,eAAe,GAAAF,OAAA,CAAAE,eAAA,GAAG,OAAO;AAC/B,MAAMC,SAAS,GAAAH,OAAA,CAAAG,SAAA,GAAG;EACxB,CAAEF,WAAW,GAAI;IAChBG,GAAG,EAAE,WAAW;IAChBC,KAAK,EAAE,IAAAC,QAAE,EAAE,IAAK;EACjB,CAAC;EACD,CAAEJ,eAAe,GAAI;IACpBE,GAAG,EAAE,eAAe;IACpBC,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;EACrB;AACD,CAAC;;AAED;AACO,MAAMC,kBAAkB,GAAAP,OAAA,CAAAO,kBAAA,GAAG;EACjCC,GAAG,EAAE;IAAEH,KAAK,EAAE,IAAAC,QAAE,EAAE,gBAAiB;EAAE,CAAC;EACtCG,IAAI,EAAE;IAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,iBAAkB;EAAE;AACxC,CAAC;;AAED;AACO,MAAMI,YAAY,GAAAV,OAAA,CAAAU,YAAA,GAAG,OAAO;AAC5B,MAAMC,WAAW,GAAAX,OAAA,CAAAW,WAAA,GAAG,MAAM;AAC1B,MAAMC,WAAW,GAAAZ,OAAA,CAAAY,WAAA,GAAG,MAAM;AAE1B,MAAMC,YAAY,GAAAb,OAAA,CAAAa,YAAA,GAAG,CAC3B;EACCC,IAAI,EAAEJ,YAAY;EAClBL,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EACpBS,SAAS,EAAEC,kBAAS;EACpBC,IAAI,EAAEC;AACP,CAAC,EACD;EACCJ,IAAI,EAAEH,WAAW;EACjBN,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO,CAAC;EACnBS,SAAS,EAAEI,iBAAQ;EACnBF,IAAI,EAAEG;AACP,CAAC,EACD;EACCN,IAAI,EAAEF,WAAW;EACjBP,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO,CAAC;EACnBS,SAAS,EAAEM,iBAAQ;EACnBJ,IAAI,EAAE,IAAAK,WAAK,EAAC,CAAC,GAAGC,2BAAoB,GAAGC;AACxC,CAAC,CACD"}
+{"version":3,"names":["_i18n","require","_icons","_viewTable","_interopRequireDefault","_viewGrid","_viewList","OPERATOR_IS","exports","OPERATOR_IS_NOT","OPERATOR_IS_ANY","OPERATOR_IS_NONE","OPERATOR_IS_ALL","OPERATOR_IS_NOT_ALL","ALL_OPERATORS","OPERATORS","key","label","__","SORTING_DIRECTIONS","asc","desc","LAYOUT_TABLE","LAYOUT_GRID","LAYOUT_LIST","VIEW_LAYOUTS","type","component","ViewTable","icon","blockTable","ViewGrid","category","ViewList","isRTL","formatListBulletsRTL","formatListBullets"],"sources":["@wordpress/dataviews/src/constants.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './view-table';\nimport ViewGrid from './view-grid';\nimport ViewList from './view-list';\n\n// Filter operators.\nexport const OPERATOR_IS = 'is';\nexport const OPERATOR_IS_NOT = 'isNot';\nexport const OPERATOR_IS_ANY = 'isAny';\nexport const OPERATOR_IS_NONE = 'isNone';\nexport const OPERATOR_IS_ALL = 'isAll';\nexport const OPERATOR_IS_NOT_ALL = 'isNotAll';\n\nexport const ALL_OPERATORS = [\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n\tOPERATOR_IS_ALL,\n\tOPERATOR_IS_NOT_ALL,\n];\nexport const OPERATORS = {\n\t[ OPERATOR_IS ]: {\n\t\tkey: 'is-filter',\n\t\tlabel: __( 'Is' ),\n\t},\n\t[ OPERATOR_IS_NOT ]: {\n\t\tkey: 'is-not-filter',\n\t\tlabel: __( 'Is not' ),\n\t},\n\t[ OPERATOR_IS_ANY ]: {\n\t\tkey: 'is-any-filter',\n\t\tlabel: __( 'Is any' ),\n\t},\n\t[ OPERATOR_IS_NONE ]: {\n\t\tkey: 'is-none-filter',\n\t\tlabel: __( 'Is none' ),\n\t},\n\t[ OPERATOR_IS_ALL ]: {\n\t\tkey: 'is-all-filter',\n\t\tlabel: __( 'Is all' ),\n\t},\n\t[ OPERATOR_IS_NOT_ALL ]: {\n\t\tkey: 'is-not-all-filter',\n\t\tlabel: __( 'Is not all' ),\n\t},\n};\n\n// Sorting\nexport const SORTING_DIRECTIONS = {\n\tasc: { label: __( 'Sort ascending' ) },\n\tdesc: { label: __( 'Sort descending' ) },\n};\n\n// View layouts.\nexport const LAYOUT_TABLE = 'table';\nexport const LAYOUT_GRID = 'grid';\nexport const LAYOUT_LIST = 'list';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t},\n];\n"],"mappings":"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"}

package/build/dataviews.js

@@ -14,6 +14,7 @@ var _filters = _interopRequireDefault(require("./filters"));
 var _search = _interopRequireDefault(require("./search"));
 var _constants = require("./constants");
 var _bulkActions = _interopRequireDefault(require("./bulk-actions"));
+var _normalizeFields = require("./normalize-fields");
 /**
  * WordPress dependencies
  */
@@ -39,7 +40,7 @@ function DataViews({
   fields,
   search = true,
   searchLabel = undefined,
-  actions,
+  actions = [],
   data,
   getItemId = defaultGetItemId,
   isLoading = false,
@@ -63,12 +64,7 @@ function DataViews({
     onSelectionChange(items);
   }, [setSelection, getItemId, onSelectionChange]);
   const ViewComponent = _constants.VIEW_LAYOUTS.find(v => v.type === view.type).component;
-  const _fields = (0, _element.useMemo)(() => {
-    return fields.map(field => ({
-      ...field,
-      render: field.render || field.getValue
-    }));
-  }, [fields]);
+  const _fields = (0, _element.useMemo)(() => (0, _normalizeFields.normalizeFields)(fields), [fields]);
   const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(actions, data);
   return (0, _react.createElement)("div", {
     className: "dataviews-wrapper"

package/build/dataviews.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_pagination","_interopRequireDefault","_viewActions","_filters","_search","_constants","_bulkActions","defaultGetItemId","item","id","defaultOnSelectionChange","useSomeItemHasAPossibleBulkAction","actions","data","useMemo","some","action","supportsBulk","isEligible","DataViews","view","onChangeView","fields","search","searchLabel","undefined","getItemId","isLoading","paginationInfo","supportedLayouts","onSelectionChange","onDetailsChange","deferredRendering","selection","setSelection","useState","openedFilter","setOpenedFilter","useEffect","length","newSelection","filter","includes","onSetSelection","useCallback","items","map","ViewComponent","VIEW_LAYOUTS","find","v","type","component","_fields","field","render","getValue","hasPossibleBulkAction","_react","createElement","className","__experimentalHStack","alignment","justify","wrap","default","label","LAYOUT_TABLE","LAYOUT_GRID"],"sources":["@wordpress/dataviews/src/dataviews.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useMemo, useState, useCallback, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Pagination from './pagination';\nimport ViewActions from './view-actions';\nimport Filters from './filters';\nimport Search from './search';\nimport { VIEW_LAYOUTS, LAYOUT_TABLE, LAYOUT_GRID } from './constants';\nimport BulkActions from './bulk-actions';\n\nconst defaultGetItemId = ( item ) => item.id;\nconst defaultOnSelectionChange = () => {};\n\nfunction useSomeItemHasAPossibleBulkAction( actions, data ) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn action.supportsBulk && action.isEligible( item );\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\nexport default function DataViews( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tsupportedLayouts,\n\tonSelectionChange = defaultOnSelectionChange,\n\tonDetailsChange = null,\n\tdeferredRendering = false,\n} ) {\n\tconst [ selection, setSelection ] = useState( [] );\n\tconst [ openedFilter, setOpenedFilter ] = useState( null );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\tselection.length > 0 &&\n\t\t\tselection.some(\n\t\t\t\t( id ) => ! data.some( ( item ) => getItemId( item ) === id )\n\t\t\t)\n\t\t) {\n\t\t\tconst newSelection = selection.filter( ( id ) =>\n\t\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t\t);\n\t\t\tsetSelection( newSelection );\n\t\t\tonSelectionChange(\n\t\t\t\tdata.filter( ( item ) =>\n\t\t\t\t\tnewSelection.includes( getItemId( item ) )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [ selection, data, getItemId, onSelectionChange ] );\n\n\tconst onSetSelection = useCallback(\n\t\t( items ) => {\n\t\t\tsetSelection( items.map( ( item ) => getItemId( item ) ) );\n\t\t\tonSelectionChange( items );\n\t\t},\n\t\t[ setSelection, getItemId, onSelectionChange ]\n\t);\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type\n\t).component;\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\n\tconst hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(\n\t\tactions,\n\t\tdata\n\t);\n\treturn (\n\t\t<div className=\"dataviews-wrapper\">\n\t\t\t<HStack\n\t\t\t\talignment=\"top\"\n\t\t\t\tjustify=\"start\"\n\t\t\t\tclassName=\"dataviews-filters__view-actions\"\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tclassName=\"dataviews-filters__container\"\n\t\t\t\t\twrap\n\t\t\t\t>\n\t\t\t\t\t{ search && (\n\t\t\t\t\t\t<Search\n\t\t\t\t\t\t\tlabel={ searchLabel }\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) }\n\t\t\t\t\t<Filters\n\t\t\t\t\t\tfields={ _fields }\n\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\topenedFilter={ openedFilter }\n\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&\n\t\t\t\t\thasPossibleBulkAction && (\n\t\t\t\t\t\t<BulkActions\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tonSelectionChange={ onSetSelection }\n\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t<ViewActions\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\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t<ViewComponent\n\t\t\t\tfields={ _fields }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\tactions={ actions }\n\t\t\t\tdata={ data }\n\t\t\t\tgetItemId={ getItemId }\n\t\t\t\tisLoading={ isLoading }\n\t\t\t\tonSelectionChange={ onSetSelection }\n\t\t\t\tonDetailsChange={ onDetailsChange }\n\t\t\t\tselection={ selection }\n\t\t\t\tdeferredRendering={ deferredRendering }\n\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t/>\n\t\t\t<Pagination\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_element","_pagination","_interopRequireDefault","_viewActions","_filters","_search","_constants","_bulkActions","_normalizeFields","defaultGetItemId","item","id","defaultOnSelectionChange","useSomeItemHasAPossibleBulkAction","actions","data","useMemo","some","action","supportsBulk","isEligible","DataViews","view","onChangeView","fields","search","searchLabel","undefined","getItemId","isLoading","paginationInfo","supportedLayouts","onSelectionChange","onDetailsChange","deferredRendering","selection","setSelection","useState","openedFilter","setOpenedFilter","useEffect","length","newSelection","filter","includes","onSetSelection","useCallback","items","map","ViewComponent","VIEW_LAYOUTS","find","v","type","component","_fields","normalizeFields","hasPossibleBulkAction","_react","createElement","className","__experimentalHStack","alignment","justify","wrap","default","label","LAYOUT_TABLE","LAYOUT_GRID"],"sources":["@wordpress/dataviews/src/dataviews.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useMemo, useState, useCallback, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Pagination from './pagination';\nimport ViewActions from './view-actions';\nimport Filters from './filters';\nimport Search from './search';\nimport { VIEW_LAYOUTS, LAYOUT_TABLE, LAYOUT_GRID } from './constants';\nimport BulkActions from './bulk-actions';\nimport { normalizeFields } from './normalize-fields';\n\nconst defaultGetItemId = ( item ) => item.id;\nconst defaultOnSelectionChange = () => {};\n\nfunction useSomeItemHasAPossibleBulkAction( actions, data ) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn action.supportsBulk && action.isEligible( item );\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\nexport default function DataViews( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = [],\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tsupportedLayouts,\n\tonSelectionChange = defaultOnSelectionChange,\n\tonDetailsChange = null,\n\tdeferredRendering = false,\n} ) {\n\tconst [ selection, setSelection ] = useState( [] );\n\tconst [ openedFilter, setOpenedFilter ] = useState( null );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\tselection.length > 0 &&\n\t\t\tselection.some(\n\t\t\t\t( id ) => ! data.some( ( item ) => getItemId( item ) === id )\n\t\t\t)\n\t\t) {\n\t\t\tconst newSelection = selection.filter( ( id ) =>\n\t\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t\t);\n\t\t\tsetSelection( newSelection );\n\t\t\tonSelectionChange(\n\t\t\t\tdata.filter( ( item ) =>\n\t\t\t\t\tnewSelection.includes( getItemId( item ) )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [ selection, data, getItemId, onSelectionChange ] );\n\n\tconst onSetSelection = useCallback(\n\t\t( items ) => {\n\t\t\tsetSelection( items.map( ( item ) => getItemId( item ) ) );\n\t\t\tonSelectionChange( items );\n\t\t},\n\t\t[ setSelection, getItemId, onSelectionChange ]\n\t);\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type\n\t).component;\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\n\tconst hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(\n\t\tactions,\n\t\tdata\n\t);\n\treturn (\n\t\t<div className=\"dataviews-wrapper\">\n\t\t\t<HStack\n\t\t\t\talignment=\"top\"\n\t\t\t\tjustify=\"start\"\n\t\t\t\tclassName=\"dataviews-filters__view-actions\"\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tclassName=\"dataviews-filters__container\"\n\t\t\t\t\twrap\n\t\t\t\t>\n\t\t\t\t\t{ search && (\n\t\t\t\t\t\t<Search\n\t\t\t\t\t\t\tlabel={ searchLabel }\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) }\n\t\t\t\t\t<Filters\n\t\t\t\t\t\tfields={ _fields }\n\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\topenedFilter={ openedFilter }\n\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&\n\t\t\t\t\thasPossibleBulkAction && (\n\t\t\t\t\t\t<BulkActions\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tonSelectionChange={ onSetSelection }\n\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t<ViewActions\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\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t<ViewComponent\n\t\t\t\tfields={ _fields }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\tactions={ actions }\n\t\t\t\tdata={ data }\n\t\t\t\tgetItemId={ getItemId }\n\t\t\t\tisLoading={ isLoading }\n\t\t\t\tonSelectionChange={ onSetSelection }\n\t\t\t\tonDetailsChange={ onDetailsChange }\n\t\t\t\tselection={ selection }\n\t\t\t\tdeferredRendering={ deferredRendering }\n\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t/>\n\t\t\t<Pagination\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/build/filter-and-sort-data-view.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterSortAndPaginate = filterSortAndPaginate;
+var _removeAccents = _interopRequireDefault(require("remove-accents"));
+var _constants = require("./constants");
+var _normalizeFields = require("./normalize-fields");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function normalizeSearchInput(input = '') {
+  return (0, _removeAccents.default)(input.trim().toLowerCase());
+}
+const EMPTY_ARRAY = [];
+
+/**
+ * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
+ *
+ * @param {any[]}    data   Raw data.
+ * @param {Object}   view   View config.
+ * @param {Object[]} fields Fields config.
+ *
+ * @return {Object} { data: any[], paginationInfo: { totalItems: number, totalPages: number } }
+ */
+function filterSortAndPaginate(data, view, fields) {
+  if (!data) {
+    return {
+      data: EMPTY_ARRAY,
+      paginationInfo: {
+        totalItems: 0,
+        totalPages: 0
+      }
+    };
+  }
+  const _fields = (0, _normalizeFields.normalizeFields)(fields);
+  let filteredData = [...data];
+  // Handle global search.
+  if (view.search) {
+    const normalizedSearch = normalizeSearchInput(view.search);
+    filteredData = filteredData.filter(item => {
+      return _fields.filter(field => field.enableGlobalSearch).map(field => {
+        return normalizeSearchInput(field.getValue({
+          item
+        }));
+      }).some(field => field.includes(normalizedSearch));
+    });
+  }
+  if (view.filters.length > 0) {
+    view.filters.forEach(filter => {
+      const field = _fields.find(_field => _field.id === filter.field);
+      if (filter.operator === _constants.OPERATOR_IS_ANY && filter?.value?.length > 0) {
+        filteredData = filteredData.filter(item => {
+          const fieldValue = field.getValue({
+            item
+          });
+          if (Array.isArray(fieldValue)) {
+            return filter.value.some(filterValue => fieldValue.includes(filterValue));
+          } else if (typeof fieldValue === 'string') {
+            return filter.value.includes(fieldValue);
+          }
+          return false;
+        });
+      } else if (filter.operator === _constants.OPERATOR_IS_NONE && filter?.value?.length > 0) {
+        filteredData = filteredData.filter(item => {
+          const fieldValue = field.getValue({
+            item
+          });
+          if (Array.isArray(fieldValue)) {
+            return !filter.value.some(filterValue => fieldValue.includes(filterValue));
+          } else if (typeof fieldValue === 'string') {
+            return !filter.value.includes(fieldValue);
+          }
+          return false;
+        });
+      } else if (filter.operator === _constants.OPERATOR_IS_ALL && filter?.value?.length > 0) {
+        filteredData = filteredData.filter(item => {
+          return filter.value.every(value => {
+            return field.getValue({
+              item
+            }).includes(value);
+          });
+        });
+      } else if (filter.operator === _constants.OPERATOR_IS_NOT_ALL && filter?.value?.length > 0) {
+        filteredData = filteredData.filter(item => {
+          return filter.value.every(value => {
+            return !field.getValue({
+              item
+            }).includes(value);
+          });
+        });
+      } else if (filter.operator === _constants.OPERATOR_IS) {
+        filteredData = filteredData.filter(item => {
+          return filter.value === field.getValue({
+            item
+          });
+        });
+      } else if (filter.operator === _constants.OPERATOR_IS_NOT) {
+        filteredData = filteredData.filter(item => {
+          return filter.value !== field.getValue({
+            item
+          });
+        });
+      }
+    });
+  }
+
+  // Handle sorting.
+  if (view.sort) {
+    const fieldId = view.sort.field;
+    const fieldToSort = _fields.find(field => {
+      return field.id === fieldId;
+    });
+    filteredData.sort((a, b) => {
+      var _fieldToSort$getValue, _fieldToSort$getValue2;
+      const valueA = (_fieldToSort$getValue = fieldToSort.getValue({
+        item: a
+      })) !== null && _fieldToSort$getValue !== void 0 ? _fieldToSort$getValue : '';
+      const valueB = (_fieldToSort$getValue2 = fieldToSort.getValue({
+        item: b
+      })) !== null && _fieldToSort$getValue2 !== void 0 ? _fieldToSort$getValue2 : '';
+      return view.sort.direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+    });
+  }
+
+  // Handle pagination.
+  const hasPagination = view.page && view.perPage;
+  const start = hasPagination ? (view.page - 1) * view.perPage : 0;
+  const totalItems = filteredData?.length || 0;
+  const totalPages = hasPagination ? Math.ceil(totalItems / view.perPage) : 1;
+  filteredData = hasPagination ? filteredData?.slice(start, start + view.perPage) : filteredData;
+  return {
+    data: filteredData,
+    paginationInfo: {
+      totalItems,
+      totalPages
+    }
+  };
+}
+//# sourceMappingURL=filter-and-sort-data-view.js.map

package/build/filter-and-sort-data-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_removeAccents","_interopRequireDefault","require","_constants","_normalizeFields","normalizeSearchInput","input","removeAccents","trim","toLowerCase","EMPTY_ARRAY","filterSortAndPaginate","data","view","fields","paginationInfo","totalItems","totalPages","_fields","normalizeFields","filteredData","search","normalizedSearch","filter","item","field","enableGlobalSearch","map","getValue","some","includes","filters","length","forEach","find","_field","id","operator","OPERATOR_IS_ANY","value","fieldValue","Array","isArray","filterValue","OPERATOR_IS_NONE","OPERATOR_IS_ALL","every","OPERATOR_IS_NOT_ALL","OPERATOR_IS","OPERATOR_IS_NOT","sort","fieldId","fieldToSort","a","b","_fieldToSort$getValue","_fieldToSort$getValue2","valueA","valueB","direction","localeCompare","hasPagination","page","perPage","start","Math","ceil","slice"],"sources":["@wordpress/dataviews/src/filter-and-sort-data-view.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * Internal dependencies\n */\nimport {\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_NONE,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_ALL,\n\tOPERATOR_IS_NOT_ALL,\n} from './constants';\nimport { normalizeFields } from './normalize-fields';\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nconst EMPTY_ARRAY = [];\n\n/**\n * Applies the filtering, sorting and pagination to the raw data based on the view configuration.\n *\n * @param {any[]}    data   Raw data.\n * @param {Object}   view   View config.\n * @param {Object[]} fields Fields config.\n *\n * @return {Object} { data: any[], paginationInfo: { totalItems: number, totalPages: number } }\n */\nexport function filterSortAndPaginate( data, view, fields ) {\n\tif ( ! data ) {\n\t\treturn {\n\t\t\tdata: EMPTY_ARRAY,\n\t\t\tpaginationInfo: { totalItems: 0, totalPages: 0 },\n\t\t};\n\t}\n\tconst _fields = normalizeFields( fields );\n\tlet filteredData = [ ...data ];\n\t// Handle global search.\n\tif ( view.search ) {\n\t\tconst normalizedSearch = normalizeSearchInput( view.search );\n\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\treturn _fields\n\t\t\t\t.filter( ( field ) => field.enableGlobalSearch )\n\t\t\t\t.map( ( field ) => {\n\t\t\t\t\treturn normalizeSearchInput( field.getValue( { item } ) );\n\t\t\t\t} )\n\t\t\t\t.some( ( field ) => field.includes( normalizedSearch ) );\n\t\t} );\n\t}\n\n\tif ( view.filters.length > 0 ) {\n\t\tview.filters.forEach( ( filter ) => {\n\t\t\tconst field = _fields.find(\n\t\t\t\t( _field ) => _field.id === filter.field\n\t\t\t);\n\t\t\tif (\n\t\t\t\tfilter.operator === OPERATOR_IS_ANY &&\n\t\t\t\tfilter?.value?.length > 0\n\t\t\t) {\n\t\t\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\t\t\tconst fieldValue = field.getValue( { item } );\n\t\t\t\t\tif ( Array.isArray( fieldValue ) ) {\n\t\t\t\t\t\treturn filter.value.some( ( filterValue ) =>\n\t\t\t\t\t\t\tfieldValue.includes( filterValue )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else if ( typeof fieldValue === 'string' ) {\n\t\t\t\t\t\treturn filter.value.includes( fieldValue );\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\t} );\n\t\t\t} else if (\n\t\t\t\tfilter.operator === OPERATOR_IS_NONE &&\n\t\t\t\tfilter?.value?.length > 0\n\t\t\t) {\n\t\t\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\t\t\tconst fieldValue = field.getValue( { item } );\n\t\t\t\t\tif ( Array.isArray( fieldValue ) ) {\n\t\t\t\t\t\treturn ! filter.value.some( ( filterValue ) =>\n\t\t\t\t\t\t\tfieldValue.includes( filterValue )\n\t\t\t\t\t\t);\n\t\t\t\t\t} else if ( typeof fieldValue === 'string' ) {\n\t\t\t\t\t\treturn ! filter.value.includes( fieldValue );\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\t} );\n\t\t\t} else if (\n\t\t\t\tfilter.operator === OPERATOR_IS_ALL &&\n\t\t\t\tfilter?.value?.length > 0\n\t\t\t) {\n\t\t\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\t\t\treturn filter.value.every( ( value ) => {\n\t\t\t\t\t\treturn field.getValue( { item } ).includes( value );\n\t\t\t\t\t} );\n\t\t\t\t} );\n\t\t\t} else if (\n\t\t\t\tfilter.operator === OPERATOR_IS_NOT_ALL &&\n\t\t\t\tfilter?.value?.length > 0\n\t\t\t) {\n\t\t\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\t\t\treturn filter.value.every( ( value ) => {\n\t\t\t\t\t\treturn ! field.getValue( { item } ).includes( value );\n\t\t\t\t\t} );\n\t\t\t\t} );\n\t\t\t} else if ( filter.operator === OPERATOR_IS ) {\n\t\t\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\t\t\treturn filter.value === field.getValue( { item } );\n\t\t\t\t} );\n\t\t\t} else if ( filter.operator === OPERATOR_IS_NOT ) {\n\t\t\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\t\t\treturn filter.value !== field.getValue( { item } );\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t}\n\n\t// Handle sorting.\n\tif ( view.sort ) {\n\t\tconst fieldId = view.sort.field;\n\t\tconst fieldToSort = _fields.find( ( field ) => {\n\t\t\treturn field.id === fieldId;\n\t\t} );\n\t\tfilteredData.sort( ( a, b ) => {\n\t\t\tconst valueA = fieldToSort.getValue( { item: a } ) ?? '';\n\t\t\tconst valueB = fieldToSort.getValue( { item: b } ) ?? '';\n\t\t\treturn view.sort.direction === 'asc'\n\t\t\t\t? valueA.localeCompare( valueB )\n\t\t\t\t: valueB.localeCompare( valueA );\n\t\t} );\n\t}\n\n\t// Handle pagination.\n\tconst hasPagination = view.page && view.perPage;\n\tconst start = hasPagination ? ( view.page - 1 ) * view.perPage : 0;\n\tconst totalItems = filteredData?.length || 0;\n\tconst totalPages = hasPagination\n\t\t? Math.ceil( totalItems / view.perPage )\n\t\t: 1;\n\tfilteredData = hasPagination\n\t\t? filteredData?.slice( start, start + view.perPage )\n\t\t: filteredData;\n\n\treturn {\n\t\tdata: filteredData,\n\t\tpaginationInfo: {\n\t\t\ttotalItems,\n\t\t\ttotalPages,\n\t\t},\n\t};\n}\n"],"mappings":"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"}

package/build/filter-summary.js

@@ -27,28 +27,44 @@ var _constants = require("./constants");
  */
 
 const FilterText = ({
-  activeElement,
+  activeElements,
   filterInView,
   filter
 }) => {
-  if (activeElement === undefined) {
+  if (activeElements === undefined || activeElements.length === 0) {
     return filter.name;
   }
   const filterTextWrappers = {
-    Span1: (0, _react.createElement)("span", {
+    Name: (0, _react.createElement)("span", {
       className: "dataviews-filter-summary__filter-text-name"
     }),
-    Span2: (0, _react.createElement)("span", {
+    Value: (0, _react.createElement)("span", {
       className: "dataviews-filter-summary__filter-text-value"
     })
   };
-  if (activeElement !== undefined && filterInView?.operator === _constants.OPERATOR_IN) {
-    return (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: 1: Filter name. 2: Filter value. e.g.: "Author is Admin". */
-    (0, _i18n.__)('<Span1>%1$s </Span1><Span2>is %2$s</Span2>'), filter.name, activeElement.label), filterTextWrappers);
+  if (filterInView?.operator === _constants.OPERATOR_IS_ANY) {
+    return (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: 1: Filter name. 3: Filter value. e.g.: "Author is any: Admin, Editor". */
+    (0, _i18n.__)('<Name>%1$s is any: </Name><Value>%2$s</Value>'), filter.name, activeElements.map(element => element.label).join(', ')), filterTextWrappers);
   }
-  if (activeElement !== undefined && filterInView?.operator === _constants.OPERATOR_NOT_IN) {
-    return (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not Admin". */
-    (0, _i18n.__)('<Span1>%1$s </Span1><Span2>is not %2$s</Span2>'), filter.name, activeElement.label), filterTextWrappers);
+  if (filterInView?.operator === _constants.OPERATOR_IS_NONE) {
+    return (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: 1: Filter name. 3: Filter value. e.g.: "Author is none: Admin, Editor". */
+    (0, _i18n.__)('<Name>%1$s is none: </Name><Value>%2$s</Value>'), filter.name, activeElements.map(element => element.label).join(', ')), filterTextWrappers);
+  }
+  if (filterInView?.operator === _constants.OPERATOR_IS_ALL) {
+    return (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: 1: Filter name. 3: Filter value. e.g.: "Author is all: Admin, Editor". */
+    (0, _i18n.__)('<Name>%1$s is all: </Name><Value>%2$s</Value>'), filter.name, activeElements.map(element => element.label).join(', ')), filterTextWrappers);
+  }
+  if (filterInView?.operator === _constants.OPERATOR_IS_NOT_ALL) {
+    return (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not all: Admin, Editor". */
+    (0, _i18n.__)('<Name>%1$s is not all: </Name><Value>%2$s</Value>'), filter.name, activeElements.map(element => element.label).join(', ')), filterTextWrappers);
+  }
+  if (filterInView?.operator === _constants.OPERATOR_IS) {
+    return (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: 1: Filter name. 3: Filter value. e.g.: "Author is: Admin". */
+    (0, _i18n.__)('<Name>%1$s is: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === _constants.OPERATOR_IS_NOT) {
+    return (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not: Admin". */
+    (0, _i18n.__)('<Name>%1$s is not: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
   }
   return (0, _i18n.sprintf)( /* translators: 1: Filter name e.g.: "Unknown status for Author". */
   (0, _i18n.__)('Unknown status for %1$s'), filter.name);
@@ -110,7 +126,12 @@ function FilterSummary({
     onChangeView
   } = commonProps;
   const filterInView = view.filters.find(f => f.field === filter.field);
-  const activeElement = filter.elements.find(element => element.value === filterInView?.value);
+  const activeElements = filter.elements.filter(element => {
+    if (filter.singleSelection) {
+      return element.value === filterInView?.value;
+    }
+    return filterInView?.value?.includes(element.value);
+  });
   const isPrimary = filter.isPrimary;
   const hasValues = filterInView?.value !== undefined;
   const canResetOrRemove = !isPrimary || hasValues;
@@ -151,7 +172,7 @@ function FilterSummary({
       "aria-expanded": isOpen,
       ref: toggleRef
     }, (0, _react.createElement)(FilterText, {
-      activeElement: activeElement,
+      activeElements: activeElements,
       filterInView: filterInView,
       filter: filter
     }))), canResetOrRemove && (0, _react.createElement)(_components.Tooltip, {