@wordpress/dataviews 0.2.0

package/README.md

@@ -0,0 +1,224 @@
+# DataViews
+
+DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/dataviews --save
+```
+
+## Usage
+
+```js
+<DataViews
+	data={ pages }
+	getItemId={ ( item ) => item.id }
+	isLoading={ isLoadingPages }
+	view={ view }
+	onChangeView={ onChangeView }
+	fields={ fields }
+	actions={ [ trashPostAction ] }
+	paginationInfo={ { totalItems, totalPages } }
+	onSelectionChange={ ( items ) => { /* ... */ } }
+/>
+```
+
+## Data
+
+The dataset to work with, represented as a one-dimensional array.
+
+Example:
+
+```js
+[
+	{ id: 1, title: "Title", ... },
+	{ ... }
+]
+```
+
+## View
+
+The view object configures how the dataset is visible to the user.
+
+Example:
+
+```js
+{
+	type: 'table',
+	perPage: 5,
+	page: 1,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
+	search: '',
+	filters: [
+		{ field: 'author', operator: 'in', value: 2 },
+		{ field: 'status', operator: 'in', value: 'publish,draft' }
+	],
+	hiddenFields: [ 'date', 'featured-image' ],
+	layout: {},
+}
+```
+
+-   `type`: view type, one of `table`, `grid`, `list`. See "View types".
+-   `perPage`: number of records to show per page.
+-   `page`: the page that is visible.
+-   `sort.field`: field used for sorting the dataset.
+-   `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
+-   `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".
+    -   `value`: the actual value selected by the user.
+-   `hiddenFields`: the `id` of the fields that are hidden in the UI.
+-   `layout`: config that is specific to a particular layout type.
+    -   `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media.
+    -   `primaryField`: used by the `grid` and `list` layouts. The `id` of the field to be highlighted in each card/list item.
+
+### View <=> data
+
+The view is a representation of the visible state of the dataset. Note, however, that it's the consumer's responsibility to work with the data provider to make sure the user options defined through the view's config (sort, pagination, filters, etc.) are respected.
+
+The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider.
+
+```js
+function MyCustomPageTable() {
+	const [ view, setView ] = useState( {
+		type: 'table',
+		perPage: 5,
+		page: 1,
+		sort: {
+			field: 'date',
+			direction: 'desc',
+		},
+		search: '',
+		filters: [
+			{ field: 'author', operator: 'in', value: 2 },
+			{ field: 'status', operator: 'in', value: 'publish,draft' }
+		],
+		hiddenFields: [ 'date', 'featured-image' ],
+		layout: {},
+	} );
+
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters.forEach( ( filter ) => {
+			if ( filter.field === 'status' && filter.operator === 'in' ) {
+				filters.status = filter.value;
+			}
+			if ( filter.field === 'author' && filter.operator === 'in' ) {
+				filters.author = filter.value;
+			}
+		} );
+		return {
+			per_page: view.perPage,
+			page: view.page,
+			_embed: 'author',
+			order: view.sort?.direction,
+			orderby: view.sort?.field,
+			search: view.search,
+			...filters,
+		};
+	}, [ view ] );
+
+	const {
+		records
+	} = useEntityRecords( 'postType', 'page', queryArgs );
+
+	return (
+		<DataViews
+			data={ records }
+			view={ view }
+			onChangeView={ setView }
+			"..."
+		/>
+	);
+}
+```
+
+## Fields
+
+The fields describe the visible items for each record in the dataset.
+
+Example:
+
+```js
+[
+	{
+		id: 'date',
+		header: __( 'Date' ),
+		getValue: ( { item } ) => item.date,
+		render: ( { item } ) => {
+			return (
+				<time>{ getFormattedDate( item.date ) }</time>
+			);
+		},
+		enableHiding: false
+	},
+	{
+		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' }
+		]
+		enableSorting: false
+	}
+]
+```
+
+-   `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.
+-   `render`: function that renders the field.
+-   `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".
+-   `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.
+    - `operators`: the list of operators supported by the field.
+
+## Actions
+
+Array of operations that can be performed upon each record. Each action is an object with the following properties:
+
+-   `id`: string, required. Unique identifier of the action. For example, `move-to-trash`.
+-   `label`: string, required. User facing description of the action. For example, `Move to Trash`.
+-   `isPrimary`: boolean, optional. Whether the action should be listed inline (primary) or in hidden in the more actions menu (secondary).
+-   `icon`: icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary.
+-   `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input.
+-   `isDestructive`: boolean, optional. Whether the action can delete data, in which case the UI would communicate it via red color.
+-   `callback`: function, required unless `RenderModal` is provided. Callback function that takes the record as input and performs the required action.
+-   `RenderModal`: ReactElement, optional. If an action requires that some UI be rendered in a modal, it can provide a component which takes as props the record as `item` and a `closeModal` function. When this prop is provided, the `callback` property is ignored.
+-   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.
+
+## Types
+
+- Layout types:
+    - `table`: the view uses a table layout.
+    - `grid`: the view uses a grid layout.
+    - `list`: the view uses a list layout.
+- Field types:
+    - `enumeration`: the field value should be taken and can be filtered from a closed list of elements.
+- Operator types:
+    - `in`: operator to be used in filters for fields of type `enumeration`.
+    - `notIn`: operator to be used in filters for fields of type `enumeration`.
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

package/build/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 _constants = require("./constants");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownSubMenuV2: DropdownSubMenu,
+  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
+  DropdownMenuItemV2: DropdownMenuItem
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+function AddFilter({
+  fields,
+  view,
+  onChangeView
+}) {
+  const filters = [];
+  fields.forEach(field => {
+    if (!field.type) {
+      return;
+    }
+    switch (field.type) {
+      case _constants.ENUMERATION_TYPE:
+        filters.push({
+          field: field.id,
+          name: field.header,
+          elements: field.elements || [],
+          isVisible: view.filters.some(f => f.field === field.id)
+        });
+    }
+  });
+  if (filters.length === 0) {
+    return null;
+  }
+  return (0, _react.createElement)(DropdownMenu, {
+    label: (0, _i18n.__)('Add filter'),
+    trigger: (0, _react.createElement)(_components.Button, {
+      disabled: filters.length === view.filters?.length,
+      __experimentalIsFocusable: true,
+      variant: "tertiary",
+      size: "compact"
+    }, (0, _react.createElement)(_components.Icon, {
+      icon: _icons.plus,
+      style: {
+        flexShrink: 0
+      }
+    }), (0, _i18n.__)('Add filter'))
+  }, filters.map(filter => {
+    if (filter.isVisible) {
+      return null;
+    }
+    return (0, _react.createElement)(DropdownSubMenu, {
+      key: filter.field,
+      trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
+        suffix: (0, _react.createElement)(_components.Icon, {
+          icon: _icons.chevronRightSmall
+        })
+      }, filter.name)
+    }, filter.elements.map(element => (0, _react.createElement)(DropdownMenuItem, {
+      key: element.value,
+      onSelect: () => {
+        onChangeView(currentView => ({
+          ...currentView,
+          page: 1,
+          filters: [...currentView.filters, {
+            field: filter.field,
+            operator: _constants.OPERATOR_IN,
+            value: element.value
+          }]
+        }));
+      }
+    }, element.label)));
+  }));
+}
+//# sourceMappingURL=add-filter.js.map

package/build/add-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_icons","_i18n","_lockUnlock","_constants","DropdownMenuV2","DropdownMenu","DropdownSubMenuV2","DropdownSubMenu","DropdownSubMenuTriggerV2","DropdownSubMenuTrigger","DropdownMenuItemV2","DropdownMenuItem","unlock","componentsPrivateApis","AddFilter","fields","view","onChangeView","filters","forEach","field","type","ENUMERATION_TYPE","push","id","name","header","elements","isVisible","some","f","length","_react","createElement","label","__","trigger","Button","disabled","__experimentalIsFocusable","variant","size","Icon","icon","plus","style","flexShrink","map","filter","key","suffix","chevronRightSmall","element","value","onSelect","currentView","page","operator","OPERATOR_IN"],"sources":["@wordpress/dataviews/src/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 { ENUMERATION_TYPE, OPERATOR_IN } from './constants';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownSubMenuV2: DropdownSubMenu,\n\tDropdownSubMenuTriggerV2: DropdownSubMenuTrigger,\n\tDropdownMenuItemV2: DropdownMenuItem,\n} = unlock( componentsPrivateApis );\n\nexport default function AddFilter( { fields, view, onChangeView } ) {\n\tconst filters = [];\n\tfields.forEach( ( field ) => {\n\t\tif ( ! field.type ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( field.type ) {\n\t\t\tcase ENUMERATION_TYPE:\n\t\t\t\tfilters.push( {\n\t\t\t\t\tfield: field.id,\n\t\t\t\t\tname: field.header,\n\t\t\t\t\telements: field.elements || [],\n\t\t\t\t\tisVisible: view.filters.some(\n\t\t\t\t\t\t( f ) => f.field === field.id\n\t\t\t\t\t),\n\t\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<DropdownMenu\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\tvariant=\"tertiary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ plus } style={ { flexShrink: 0 } } />\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<DropdownSubMenu\n\t\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTrigger\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</DropdownSubMenuTrigger>\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<DropdownMenuItem\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: OPERATOR_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>\n\t\t\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</DropdownSubMenu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n"],"mappings":"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"}

package/build/constants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VIEW_LAYOUTS = exports.OPERATOR_NOT_IN = exports.OPERATOR_IN = exports.LAYOUT_TABLE = exports.LAYOUT_LIST = exports.LAYOUT_GRID = exports.ENUMERATION_TYPE = void 0;
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _viewTable = _interopRequireDefault(require("./view-table"));
+var _viewGrid = _interopRequireDefault(require("./view-grid"));
+var _viewList = _interopRequireDefault(require("./view-list"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+// Field types.
+const ENUMERATION_TYPE = 'enumeration';
+
+// Filter operators.
+exports.ENUMERATION_TYPE = ENUMERATION_TYPE;
+const OPERATOR_IN = 'in';
+exports.OPERATOR_IN = OPERATOR_IN;
+const OPERATOR_NOT_IN = 'notIn';
+
+// View layouts.
+exports.OPERATOR_NOT_IN = OPERATOR_NOT_IN;
+const LAYOUT_TABLE = 'table';
+exports.LAYOUT_TABLE = LAYOUT_TABLE;
+const LAYOUT_GRID = 'grid';
+exports.LAYOUT_GRID = LAYOUT_GRID;
+const LAYOUT_LIST = 'list';
+exports.LAYOUT_LIST = LAYOUT_LIST;
+const VIEW_LAYOUTS = [{
+  type: LAYOUT_TABLE,
+  label: (0, _i18n.__)('Table'),
+  component: _viewTable.default,
+  icon: _icons.blockTable
+}, {
+  type: LAYOUT_GRID,
+  label: (0, _i18n.__)('Grid'),
+  component: _viewGrid.default,
+  icon: _icons.category
+}, {
+  type: LAYOUT_LIST,
+  label: (0, _i18n.__)('List'),
+  component: _viewList.default,
+  icon: (0, _i18n.isRTL)() ? _icons.formatListBulletsRTL : _icons.formatListBullets
+}];
+exports.VIEW_LAYOUTS = VIEW_LAYOUTS;
+//# sourceMappingURL=constants.js.map

package/build/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_icons","_viewTable","_interopRequireDefault","_viewGrid","_viewList","ENUMERATION_TYPE","exports","OPERATOR_IN","OPERATOR_NOT_IN","LAYOUT_TABLE","LAYOUT_GRID","LAYOUT_LIST","VIEW_LAYOUTS","type","label","__","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';\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,GAAG,aAAa;;AAE7C;AAAAC,OAAA,CAAAD,gBAAA,GAAAA,gBAAA;AACO,MAAME,WAAW,GAAG,IAAI;AAACD,OAAA,CAAAC,WAAA,GAAAA,WAAA;AACzB,MAAMC,eAAe,GAAG,OAAO;;AAEtC;AAAAF,OAAA,CAAAE,eAAA,GAAAA,eAAA;AACO,MAAMC,YAAY,GAAG,OAAO;AAACH,OAAA,CAAAG,YAAA,GAAAA,YAAA;AAC7B,MAAMC,WAAW,GAAG,MAAM;AAACJ,OAAA,CAAAI,WAAA,GAAAA,WAAA;AAC3B,MAAMC,WAAW,GAAG,MAAM;AAACL,OAAA,CAAAK,WAAA,GAAAA,WAAA;AAE3B,MAAMC,YAAY,GAAG,CAC3B;EACCC,IAAI,EAAEJ,YAAY;EAClBK,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EACpBC,SAAS,EAAEC,kBAAS;EACpBC,IAAI,EAAEC;AACP,CAAC,EACD;EACCN,IAAI,EAAEH,WAAW;EACjBI,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO,CAAC;EACnBC,SAAS,EAAEI,iBAAQ;EACnBF,IAAI,EAAEG;AACP,CAAC,EACD;EACCR,IAAI,EAAEF,WAAW;EACjBG,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO,CAAC;EACnBC,SAAS,EAAEM,iBAAQ;EACnBJ,IAAI,EAAE,IAAAK,WAAK,EAAC,CAAC,GAAGC,2BAAoB,GAAGC;AACxC,CAAC,CACD;AAACnB,OAAA,CAAAM,YAAA,GAAAA,YAAA"}

package/build/dataviews.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DataViews;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _pagination = _interopRequireDefault(require("./pagination"));
+var _viewActions = _interopRequireDefault(require("./view-actions"));
+var _filters = _interopRequireDefault(require("./filters"));
+var _search = _interopRequireDefault(require("./search"));
+var _constants = require("./constants");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function DataViews({
+  view,
+  onChangeView,
+  fields,
+  search = true,
+  searchLabel = undefined,
+  actions,
+  data,
+  getItemId,
+  isLoading = false,
+  paginationInfo,
+  supportedLayouts,
+  onSelectionChange,
+  deferredRendering
+}) {
+  const [selection, setSelection] = (0, _element.useState)([]);
+  const onSetSelection = items => {
+    setSelection(items.map(item => item.id));
+    onSelectionChange(items);
+  };
+  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]);
+  return (0, _react.createElement)("div", {
+    className: "dataviews-wrapper"
+  }, (0, _react.createElement)(_components.__experimentalVStack, {
+    spacing: 0,
+    justify: "flex-start"
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
+    alignment: "flex-start",
+    className: "dataviews__filters-view-actions"
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
+    justify: "start",
+    wrap: true
+  }, search && (0, _react.createElement)(_search.default, {
+    label: searchLabel,
+    view: view,
+    onChangeView: onChangeView
+  }), (0, _react.createElement)(_filters.default, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
+  })), (0, _react.createElement)(_viewActions.default, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView,
+    supportedLayouts: supportedLayouts
+  })), (0, _react.createElement)(ViewComponent, {
+    fields: _fields,
+    view: view,
+    onChangeView: onChangeView,
+    paginationInfo: paginationInfo,
+    actions: actions,
+    data: data,
+    getItemId: getItemId,
+    isLoading: isLoading,
+    onSelectionChange: onSetSelection,
+    selection: selection,
+    deferredRendering: deferredRendering
+  }), (0, _react.createElement)(_pagination.default, {
+    view: view,
+    onChangeView: onChangeView,
+    paginationInfo: paginationInfo
+  })));
+}
+//# sourceMappingURL=dataviews.js.map

package/build/dataviews.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_element","_pagination","_interopRequireDefault","_viewActions","_filters","_search","_constants","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","supportedLayouts","onSelectionChange","deferredRendering","selection","setSelection","useState","onSetSelection","items","map","item","id","ViewComponent","VIEW_LAYOUTS","find","v","type","component","_fields","useMemo","field","render","getValue","_react","createElement","className","__experimentalVStack","spacing","justify","__experimentalHStack","alignment","wrap","default","label"],"sources":["@wordpress/dataviews/src/dataviews.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useMemo, useState } 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 } from './constants';\n\nexport default function DataViews( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions,\n\tdata,\n\tgetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tsupportedLayouts,\n\tonSelectionChange,\n\tdeferredRendering,\n} ) {\n\tconst [ selection, setSelection ] = useState( [] );\n\n\tconst onSetSelection = ( items ) => {\n\t\tsetSelection( items.map( ( item ) => item.id ) );\n\t\tonSelectionChange( items );\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\treturn (\n\t\t<div className=\"dataviews-wrapper\">\n\t\t\t<VStack spacing={ 0 } justify=\"flex-start\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\tclassName=\"dataviews__filters-view-actions\"\n\t\t\t\t>\n\t\t\t\t\t<HStack justify=\"start\" wrap>\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<ViewActions\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\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t\t/>\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\tgetItemId={ getItemId }\n\t\t\t\t\tisLoading={ isLoading }\n\t\t\t\t\tonSelectionChange={ onSetSelection }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tdeferredRendering={ deferredRendering }\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/filter-summary.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FilterSummary;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+var _constants = require("./constants");
+var _lockUnlock = require("./lock-unlock");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuGroupV2: DropdownMenuGroup,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuSeparatorV2: DropdownMenuSeparator,
+  DropdownSubMenuV2: DropdownSubMenu,
+  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const FilterText = ({
+  activeElement,
+  filterInView,
+  filter
+}) => {
+  if (activeElement === undefined) {
+    return filter.name;
+  }
+  if (activeElement !== undefined && filterInView?.operator === _constants.OPERATOR_IN) {
+    return (0, _i18n.sprintf)( /* translators: 1: Filter name. 2: Filter value. e.g.: "Author is Admin". */
+    (0, _i18n.__)('%1$s is %2$s'), filter.name, activeElement.label);
+  }
+  if (activeElement !== undefined && filterInView?.operator === _constants.OPERATOR_NOT_IN) {
+    return (0, _i18n.sprintf)( /* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not Admin". */
+    (0, _i18n.__)('%1$s is not %2$s'), filter.name, activeElement.label);
+  }
+  return (0, _i18n.sprintf)( /* translators: 1: Filter name e.g.: "Unknown status for Author". */
+  (0, _i18n.__)('Unknown status for %1$s'), filter.name);
+};
+function WithSeparators({
+  children
+}) {
+  return _element.Children.toArray(children).filter(Boolean).map((child, i) => (0, _react.createElement)(_element.Fragment, {
+    key: i
+  }, i > 0 && (0, _react.createElement)(DropdownMenuSeparator, null), child));
+}
+function FilterSummary({
+  filter,
+  view,
+  onChangeView
+}) {
+  const filterInView = view.filters.find(f => f.field === filter.field);
+  const activeElement = filter.elements.find(element => element.value === filterInView?.value);
+  return (0, _react.createElement)(DropdownMenu, {
+    key: filter.field,
+    trigger: (0, _react.createElement)(_components.Button, {
+      variant: "tertiary",
+      size: "compact",
+      label: filter.name
+    }, (0, _react.createElement)(FilterText, {
+      activeElement: activeElement,
+      filterInView: filterInView,
+      filter: filter
+    }), (0, _react.createElement)(_components.Icon, {
+      icon: _icons.chevronDown,
+      style: {
+        flexShrink: 0
+      }
+    }))
+  }, (0, _react.createElement)(WithSeparators, null, (0, _react.createElement)(DropdownMenuGroup, null, filter.elements.map(element => {
+    return (0, _react.createElement)(DropdownMenuItem, {
+      key: element.value,
+      role: "menuitemradio",
+      "aria-checked": activeElement?.value === element.value,
+      prefix: activeElement?.value === element.value && (0, _react.createElement)(_components.Icon, {
+        icon: _icons.check
+      }),
+      onSelect: () => onChangeView(currentView => ({
+        ...currentView,
+        page: 1,
+        filters: [...view.filters.filter(f => f.field !== filter.field), {
+          field: filter.field,
+          operator: filterInView?.operator || filter.operators[0],
+          value: activeElement?.value === element.value ? undefined : element.value
+        }]
+      }))
+    }, element.label);
+  })), filter.operators.length > 1 && (0, _react.createElement)(DropdownSubMenu, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
+      suffix: (0, _react.createElement)(_element.Fragment, null, filterInView.operator === _constants.OPERATOR_IN ? (0, _i18n.__)('Is') : (0, _i18n.__)('Is not'), (0, _react.createElement)(_components.Icon, {
+        icon: _icons.chevronRightSmall
+      }), ' ')
+    }, (0, _i18n.__)('Conditions'))
+  }, (0, _react.createElement)(DropdownMenuItem, {
+    key: "in-filter",
+    role: "menuitemradio",
+    "aria-checked": filterInView?.operator === _constants.OPERATOR_IN,
+    prefix: filterInView?.operator === _constants.OPERATOR_IN && (0, _react.createElement)(_components.Icon, {
+      icon: _icons.check
+    }),
+    onSelect: () => onChangeView(currentView => ({
+      ...currentView,
+      page: 1,
+      filters: [...view.filters.filter(f => f.field !== filter.field), {
+        field: filter.field,
+        operator: _constants.OPERATOR_IN,
+        value: filterInView?.value
+      }]
+    }))
+  }, (0, _i18n.__)('Is')), (0, _react.createElement)(DropdownMenuItem, {
+    key: "not-in-filter",
+    role: "menuitemradio",
+    "aria-checked": filterInView?.operator === _constants.OPERATOR_NOT_IN,
+    prefix: filterInView?.operator === _constants.OPERATOR_NOT_IN && (0, _react.createElement)(_components.Icon, {
+      icon: _icons.check
+    }),
+    onSelect: () => onChangeView(currentView => ({
+      ...currentView,
+      page: 1,
+      filters: [...view.filters.filter(f => f.field !== filter.field), {
+        field: filter.field,
+        operator: _constants.OPERATOR_NOT_IN,
+        value: filterInView?.value
+      }]
+    }))
+  }, (0, _i18n.__)('Is not')))));
+}
+//# sourceMappingURL=filter-summary.js.map

package/build/filter-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_icons","_i18n","_element","_constants","_lockUnlock","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuSeparatorV2","DropdownMenuSeparator","DropdownSubMenuV2","DropdownSubMenu","DropdownSubMenuTriggerV2","DropdownSubMenuTrigger","unlock","componentsPrivateApis","FilterText","activeElement","filterInView","filter","undefined","name","operator","OPERATOR_IN","sprintf","__","label","OPERATOR_NOT_IN","WithSeparators","children","Children","toArray","Boolean","map","child","i","_react","createElement","Fragment","key","FilterSummary","view","onChangeView","filters","find","f","field","elements","element","value","trigger","Button","variant","size","Icon","icon","chevronDown","style","flexShrink","role","prefix","check","onSelect","currentView","page","operators","length","suffix","chevronRightSmall"],"sources":["@wordpress/dataviews/src/filter-summary.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tIcon,\n} from '@wordpress/components';\nimport { chevronDown, chevronRightSmall, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Children, Fragment } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IN, OPERATOR_NOT_IN } from './constants';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuSeparatorV2: DropdownMenuSeparator,\n\tDropdownSubMenuV2: DropdownSubMenu,\n\tDropdownSubMenuTriggerV2: DropdownSubMenuTrigger,\n} = unlock( componentsPrivateApis );\n\nconst FilterText = ( { activeElement, filterInView, filter } ) => {\n\tif ( activeElement === undefined ) {\n\t\treturn filter.name;\n\t}\n\n\tif (\n\t\tactiveElement !== undefined &&\n\t\tfilterInView?.operator === OPERATOR_IN\n\t) {\n\t\treturn sprintf(\n\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is Admin\". */\n\t\t\t__( '%1$s is %2$s' ),\n\t\t\tfilter.name,\n\t\t\tactiveElement.label\n\t\t);\n\t}\n\n\tif (\n\t\tactiveElement !== undefined &&\n\t\tfilterInView?.operator === OPERATOR_NOT_IN\n\t) {\n\t\treturn sprintf(\n\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is not Admin\". */\n\t\t\t__( '%1$s is not %2$s' ),\n\t\t\tfilter.name,\n\t\t\tactiveElement.label\n\t\t);\n\t}\n\n\treturn sprintf(\n\t\t/* translators: 1: Filter name e.g.: \"Unknown status for Author\". */\n\t\t__( 'Unknown status for %1$s' ),\n\t\tfilter.name\n\t);\n};\n\nfunction WithSeparators( { children } ) {\n\treturn Children.toArray( children )\n\t\t.filter( Boolean )\n\t\t.map( ( child, i ) => (\n\t\t\t<Fragment key={ i }>\n\t\t\t\t{ i > 0 && <DropdownMenuSeparator /> }\n\t\t\t\t{ child }\n\t\t\t</Fragment>\n\t\t) );\n}\n\nexport default function FilterSummary( { filter, view, onChangeView } ) {\n\tconst filterInView = view.filters.find( ( f ) => f.field === filter.field );\n\tconst activeElement = filter.elements.find(\n\t\t( element ) => element.value === filterInView?.value\n\t);\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tkey={ filter.field }\n\t\t\ttrigger={\n\t\t\t\t<Button variant=\"tertiary\" size=\"compact\" label={ filter.name }>\n\t\t\t\t\t<FilterText\n\t\t\t\t\t\tactiveElement={ activeElement }\n\t\t\t\t\t\tfilterInView={ filterInView }\n\t\t\t\t\t\tfilter={ filter }\n\t\t\t\t\t/>\n\t\t\t\t\t<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />\n\t\t\t\t</Button>\n\t\t\t}\n\t\t>\n\t\t\t<WithSeparators>\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t{ filter.elements.map( ( element ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\tactiveElement?.value === element.value\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t\tactiveElement?.value === element.value && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\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\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...view.filters.filter(\n\t\t\t\t\t\t\t\t\t\t\t\t( f ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tf.field !== filter.field\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilterInView?.operator ||\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\tvalue:\n\t\t\t\t\t\t\t\t\t\t\t\t\tactiveElement?.value ===\n\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 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>\n\t\t\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t\t{ filter.operators.length > 1 && (\n\t\t\t\t\t<DropdownSubMenu\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{ filterInView.operator === OPERATOR_IN\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Is' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Is not' ) }\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />{ ' ' }\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\t\t{ __( 'Conditions' ) }\n\t\t\t\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\tkey=\"in-filter\"\n\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\tfilterInView?.operator === OPERATOR_IN\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\tfilterInView?.operator === OPERATOR_IN && (\n\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonSelect={ () =>\n\t\t\t\t\t\t\t\tonChangeView( ( currentView ) => ( {\n\t\t\t\t\t\t\t\t\t...currentView,\n\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t...view.filters.filter(\n\t\t\t\t\t\t\t\t\t\t\t( f ) => f.field !== filter.field\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\toperator: OPERATOR_IN,\n\t\t\t\t\t\t\t\t\t\t\tvalue: filterInView?.value,\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>\n\t\t\t\t\t\t\t{ __( 'Is' ) }\n\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\tkey=\"not-in-filter\"\n\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\tfilterInView?.operator === OPERATOR_NOT_IN\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\tfilterInView?.operator === OPERATOR_NOT_IN && (\n\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonSelect={ () =>\n\t\t\t\t\t\t\t\tonChangeView( ( currentView ) => ( {\n\t\t\t\t\t\t\t\t\t...currentView,\n\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t...view.filters.filter(\n\t\t\t\t\t\t\t\t\t\t\t( f ) => f.field !== filter.field\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\toperator: OPERATOR_NOT_IN,\n\t\t\t\t\t\t\t\t\t\t\tvalue: filterInView?.value,\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>\n\t\t\t\t\t\t\t{ __( 'Is not' ) }\n\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t</DropdownSubMenu>\n\t\t\t\t) }\n\t\t\t</WithSeparators>\n\t\t</DropdownMenu>\n\t);\n}\n"],"mappings":"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"}