@wordpress/dataviews 0.5.5 → 0.7.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 0.7.0 (2024-03-06)
+
+## 0.6.0 (2024-02-21)
+
 ## 0.5.0 (2024-02-09)
 
 ## 0.4.0 (2024-01-24)

package/README.md

@@ -12,85 +12,147 @@ npm install @wordpress/dataviews --save
 
 ## Usage
 
-```js
-<DataViews
-	data={ data }
-	paginationInfo={ { totalItems, totalPages } }
-	view={ view }
-	onChangeView={ onChangeView }
-	fields={ fields }
-	actions={ [ trashPostAction ] }
-	search={ false }
-	searchLabel="Filter list"
-	getItemId={ ( item ) => item.id }
-	isLoading={ isLoadingData }
-	supportedLayouts={ [ 'table' ] }
-	deferredRendering={ true }
-	onSelectionChange={ ( items ) => { /* ... */ } }
-/>
+```jsx
+const Example = () => {
+
+	// Declare data, fields, etc.
+
+	return (
+		<DataViews
+			data={ data }
+			fields={ fields }
+			view={ view }
+			onChangeView={ onChangeView }
+			actions={ actions }
+			paginationInfo={ paginationInfo }
+		/>
+	);
+}
 ```
 
-## Data
+## Properties
+
+### `data`: `Object[]`
 
 The dataset to work with, represented as a one-dimensional array.
 
 Example:
 
 ```js
-[
-	{ id: 1, title: "Title", ... },
-	{ ... }
+const data = [
+	{
+		id: 1,
+		title: "Title",
+		author: "Admin",
+		date: "2012-04-23T18:25:43.511Z"
+	},
+	{ /* ... */ }
 ]
 ```
 
-By default, dataviews would use each record's `id` as an unique identifier. If it's not, the consumer should provide a `getItemId` function that returns one. See "Other props" section.
+By default, dataviews would use each record's `id` as an unique identifier. If it's not, the consumer should provide a `getItemId` function that returns one.
 
-## Pagination Info
+### `fields`: `Object[]`
 
-- `totalItems`: the total number of items in the datasets.
-- `totalPages`: the total number of pages, taking into account the total items in the dataset and the number of items per page provided by the user.
+The fields describe the visible items for each record in the dataset.
 
-## View
+Example:
+
+```js
+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>
+			);
+		}
+	},
+	{
+		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
+	}
+]
+```
+
+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.
+-   `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".
+-   `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.
+    - `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
+
+### `view`: `object`
 
 The view object configures how the dataset is visible to the user.
 
 Example:
 
 ```js
-{
+const view = {
 	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' }
 	],
+	page: 1,
+	perPage: 5,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
 	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`.
+Properties:
+
+-   `type`: view type, one of `table`, `grid`, `list`. See "Layout types".
 -   `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.
+-   `perPage`: number of records to show per page.
+-   `page`: the page that is visible.
+-   `sort`:
+	- `field`: the field used for sorting the dataset.
+	- `direction`: the direction to use for sorting, one of `asc` or `desc`.
 -   `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.
+    -   `primaryField`: used by the `table`, `grid` and `list` layouts. The `id` of the field to be highlighted in each row/card/item.
 
-### onChangeView: syncing view and data
+### `onChangeView`: `function`
 
 The view is a representation of the visible state of the dataset: what type of layout is used to display it (table, grid, etc.), how the dataset is filtered, how it is sorted or paginated.
 
@@ -147,65 +209,17 @@ function MyCustomPageTable() {
 			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.
-    - `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
+### `actions`: `Object[]`
 
-## Actions
+Collection of operations that can be performed upon each record.
 
-Array of operations that can be performed upon each record. Each action is an object with the following properties:
+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`.
@@ -217,28 +231,59 @@ Array of operations that can be performed upon each record. Each action is an ob
 -   `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.
 
+### `paginationInfo`: `Object`
+
+- `totalItems`: the total number of items in the datasets.
+- `totalPages`: the total number of pages, taking into account the total items in the dataset and the number of items per page provided by the user.
+
+### `search`: `boolean`
+
+Whether the search input is enabled. `true` by default.
+
+### `searchLabel`: `string`
+
+What text to show in the search input. "Search" by default.
+
+### `getItemId`: `function`
+
+Function that receives an item and returns an unique identifier for it. By default, it uses the `id` of the item as unique identifier. If it's not, the consumer should provide their own.
+
+### `isLoading`: `boolean`
+
+Whether the data is loading. `false` by default.
+
+### `supportedLayouts`: `String[]`
+
+Array of layouts supported. By default, all are: `table`, `grid`, `list`.
+
+### `deferredRendering`: `boolean`
+
+Whether the items should be rendered asynchronously. Useful when there's a field that takes a lot of time (e.g.: previews). `false` by default.
+
+### `onSelectionChange`: `function`
+
+Callback that signals the user selected one of more items, and takes them as parameter. So far, only the `list` view implements it.
+
+### `onDetailsChange`: `function`
+
+Callback that signals the user triggered the details for one of more items, and takes them as paremeter. So far, only the `list` view implements it.
+
 ## 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`.
-
-## Other properties
-
-- `search`: whether the search input is enabled. `true` by default.
-- `searchLabel`: what text to show in the search input. "Filter list" by default.
-- `getItemId`: function that receives an item and returns an unique identifier for it. By default, it uses the `id` of the item as unique identifier. If it's not, the consumer should provide their own.
-- `isLoading`: whether the data is loading. `false` by default.
-- `supportedLayouts`: array of layouts supported. By default, all are: `table`, `grid`, `list`.
-- `deferredRendering`: whether the items should be rendered asynchronously. Useful when there's a field that takes a lot of time (e.g.: previews). `false` by default.
-- `onSelectionChange`: callback that signals the user selected one of more items, and takes them as parameter. So far, only the `list` view implements it.
-- `onDetailsChange`: callback that signals the user triggered the details for one of more items, and takes them as paremeter. So far, only the `list` view implements it.
+### Layouts
+
+- `table`: the view uses a table layout.
+- `grid`: the view uses a grid layout.
+- `list`: the view uses a list layout.
+
+### Fields
+
+- `enumeration`: the field value should be taken and can be filtered from a closed list of elements.
+
+### 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`.
 
 ## Contributing to this package
 

package/build/add-filter.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 _lockUnlock = require("./lock-unlock");
@@ -39,7 +38,6 @@ function AddFilter({
     trigger: (0, _react.createElement)(_components.Button, {
       __experimentalIsFocusable: true,
       size: "compact",
-      icon: _icons.plus,
       className: "dataviews-filters-button",
       variant: "tertiary",
       disabled: !inactiveFilters.length,

package/build/add-filter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_icons","_i18n","_element","_lockUnlock","DropdownMenuV2","DropdownMenu","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","unlock","componentsPrivateApis","AddFilter","filters","view","onChangeView","setOpenedFilter","ref","length","every","isPrimary","inactiveFilters","filter","isVisible","_react","createElement","trigger","Button","__experimentalIsFocusable","size","icon","plus","className","variant","disabled","__","map","key","field","onClick","page","value","undefined","operator","operators","name","_default","exports","default","forwardRef"],"sources":["@wordpress/dataviews/src/add-filter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n} from '@wordpress/components';\nimport { plus } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\nfunction AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) {\n\tif ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {\n\t\treturn null;\n\t}\n\tconst inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t\tclassName=\"dataviews-filters-button\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tdisabled={ ! inactiveFilters.length }\n\t\t\t\t\tref={ ref }\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{ inactiveFilters.map( ( filter ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetOpenedFilter( filter.field );\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t...( view.filters || [] ),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\tvalue: undefined,\n\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t{ filter.name }\n\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nexport default forwardRef( AddFilter );\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAdA;AACA;AACA;;AASA;AACA;AACA;;AAGA,MAAM;EACLK,cAAc,EAAEC,YAAY;EAC5BC,kBAAkB,EAAEC,gBAAgB;EACpCC,uBAAuB,EAAEC;AAC1B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;AAEnC,SAASC,SAASA,CAAE;EAAEC,OAAO;EAAEC,IAAI;EAAEC,YAAY;EAAEC;AAAgB,CAAC,EAAEC,GAAG,EAAG;EAC3E,IAAK,CAAEJ,OAAO,CAACK,MAAM,IAAIL,OAAO,CAACM,KAAK,CAAE,CAAE;IAAEC;EAAU,CAAC,KAAMA,SAAU,CAAC,EAAG;IAC1E,OAAO,IAAI;EACZ;EACA,MAAMC,eAAe,GAAGR,OAAO,CAACS,MAAM,CAAIA,MAAM,IAAM,CAAEA,MAAM,CAACC,SAAU,CAAC;EAC1E,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACpB,YAAY;IACZqB,OAAO,EACN,IAAAF,MAAA,CAAAC,aAAA,EAAC3B,WAAA,CAAA6B,MAAM;MACNC,yBAAyB;MACzBC,IAAI,EAAC,SAAS;MACdC,IAAI,EAAGC,WAAM;MACbC,SAAS,EAAC,0BAA0B;MACpCC,OAAO,EAAC,UAAU;MAClBC,QAAQ,EAAG,CAAEb,eAAe,CAACH,MAAQ;MACrCD,GAAG,EAAGA;IAAK,GAET,IAAAkB,QAAE,EAAE,YAAa,CACZ;EACR,GAECd,eAAe,CAACe,GAAG,CAAId,MAAM,IAAM;IACpC,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAClB,gBAAgB;MAChB8B,GAAG,EAAGf,MAAM,CAACgB,KAAO;MACpBC,OAAO,EAAGA,CAAA,KAAM;QACfvB,eAAe,CAAEM,MAAM,CAACgB,KAAM,CAAC;QAC/BvB,YAAY,CAAE;UACb,GAAGD,IAAI;UACP0B,IAAI,EAAE,CAAC;UACP3B,OAAO,EAAE,CACR,IAAKC,IAAI,CAACD,OAAO,IAAI,EAAE,CAAE,EACzB;YACCyB,KAAK,EAAEhB,MAAM,CAACgB,KAAK;YACnBG,KAAK,EAAEC,SAAS;YAChBC,QAAQ,EAAErB,MAAM,CAACsB,SAAS,CAAE,CAAC;UAC9B,CAAC;QAEH,CAAE,CAAC;MACJ;IAAG,GAEH,IAAApB,MAAA,CAAAC,aAAA,EAAChB,qBAAqB,QACnBa,MAAM,CAACuB,IACa,CACN,CAAC;EAErB,CAAE,CACW,CAAC;AAEjB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc,IAAAC,mBAAU,EAAErC,SAAU,CAAC"}
+{"version":3,"names":["_components","require","_i18n","_element","_lockUnlock","DropdownMenuV2","DropdownMenu","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","unlock","componentsPrivateApis","AddFilter","filters","view","onChangeView","setOpenedFilter","ref","length","every","isPrimary","inactiveFilters","filter","isVisible","_react","createElement","trigger","Button","__experimentalIsFocusable","size","className","variant","disabled","__","map","key","field","onClick","page","value","undefined","operator","operators","name","_default","exports","default","forwardRef"],"sources":["@wordpress/dataviews/src/add-filter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\nfunction AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) {\n\tif ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {\n\t\treturn null;\n\t}\n\tconst inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tclassName=\"dataviews-filters-button\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tdisabled={ ! inactiveFilters.length }\n\t\t\t\t\tref={ ref }\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{ inactiveFilters.map( ( filter ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetOpenedFilter( filter.field );\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t...( view.filters || [] ),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\tvalue: undefined,\n\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t{ filter.name }\n\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nexport default forwardRef( AddFilter );\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AAbA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,MAAM;EACLI,cAAc,EAAEC,YAAY;EAC5BC,kBAAkB,EAAEC,gBAAgB;EACpCC,uBAAuB,EAAEC;AAC1B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;AAEnC,SAASC,SAASA,CAAE;EAAEC,OAAO;EAAEC,IAAI;EAAEC,YAAY;EAAEC;AAAgB,CAAC,EAAEC,GAAG,EAAG;EAC3E,IAAK,CAAEJ,OAAO,CAACK,MAAM,IAAIL,OAAO,CAACM,KAAK,CAAE,CAAE;IAAEC;EAAU,CAAC,KAAMA,SAAU,CAAC,EAAG;IAC1E,OAAO,IAAI;EACZ;EACA,MAAMC,eAAe,GAAGR,OAAO,CAACS,MAAM,CAAIA,MAAM,IAAM,CAAEA,MAAM,CAACC,SAAU,CAAC;EAC1E,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACpB,YAAY;IACZqB,OAAO,EACN,IAAAF,MAAA,CAAAC,aAAA,EAAC1B,WAAA,CAAA4B,MAAM;MACNC,yBAAyB;MACzBC,IAAI,EAAC,SAAS;MACdC,SAAS,EAAC,0BAA0B;MACpCC,OAAO,EAAC,UAAU;MAClBC,QAAQ,EAAG,CAAEX,eAAe,CAACH,MAAQ;MACrCD,GAAG,EAAGA;IAAK,GAET,IAAAgB,QAAE,EAAE,YAAa,CACZ;EACR,GAECZ,eAAe,CAACa,GAAG,CAAIZ,MAAM,IAAM;IACpC,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAClB,gBAAgB;MAChB4B,GAAG,EAAGb,MAAM,CAACc,KAAO;MACpBC,OAAO,EAAGA,CAAA,KAAM;QACfrB,eAAe,CAAEM,MAAM,CAACc,KAAM,CAAC;QAC/BrB,YAAY,CAAE;UACb,GAAGD,IAAI;UACPwB,IAAI,EAAE,CAAC;UACPzB,OAAO,EAAE,CACR,IAAKC,IAAI,CAACD,OAAO,IAAI,EAAE,CAAE,EACzB;YACCuB,KAAK,EAAEd,MAAM,CAACc,KAAK;YACnBG,KAAK,EAAEC,SAAS;YAChBC,QAAQ,EAAEnB,MAAM,CAACoB,SAAS,CAAE,CAAC;UAC9B,CAAC;QAEH,CAAE,CAAC;MACJ;IAAG,GAEH,IAAAlB,MAAA,CAAAC,aAAA,EAAChB,qBAAqB,QACnBa,MAAM,CAACqB,IACa,CACN,CAAC;EAErB,CAAE,CACW,CAAC;AAEjB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc,IAAAC,mBAAU,EAAEnC,SAAU,CAAC"}

package/build/dataviews.js

@@ -72,9 +72,6 @@ function DataViews({
   const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(actions, data);
   return (0, _react.createElement)("div", {
     className: "dataviews-wrapper"
-  }, (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 3,
-    justify: "flex-start"
   }, (0, _react.createElement)(_components.__experimentalHStack, {
     alignment: "top",
     justify: "start",
@@ -121,6 +118,6 @@ function DataViews({
     view: view,
     onChangeView: onChangeView,
     paginationInfo: paginationInfo
-  })));
+  }));
 }
 //# sourceMappingURL=dataviews.js.map

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","__experimentalVStack","spacing","justify","__experimentalHStack","alignment","wrap","default","label","LAYOUT_TABLE","LAYOUT_GRID"],"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, 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<VStack spacing={ 3 } justify=\"flex-start\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tclassName=\"dataviews-filters__view-actions\"\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\tclassName=\"dataviews-filters__container\"\n\t\t\t\t\t\twrap\n\t\t\t\t\t>\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\topenedFilter={ openedFilter }\n\t\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&\n\t\t\t\t\t\thasPossibleBulkAction && (\n\t\t\t\t\t\t\t<BulkActions\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSetSelection }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\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\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\tonDetailsChange={ onDetailsChange }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tdeferredRendering={ deferredRendering }\n\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\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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"}
+{"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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"}

package/build/reset-filters.js

@@ -23,6 +23,7 @@ function ResetFilter({
     __experimentalIsFocusable: true,
     size: "compact",
     variant: "tertiary",
+    className: "dataviews-filters__reset-button",
     onClick: () => {
       onChangeView({
         ...view,
@@ -31,6 +32,6 @@ function ResetFilter({
         filters: []
       });
     }
-  }, (0, _i18n.__)('Reset filters'));
+  }, (0, _i18n.__)('Reset'));
 }
 //# sourceMappingURL=reset-filters.js.map

package/build/reset-filters.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","ResetFilter","filters","view","onChangeView","isPrimary","field","some","_filter","isDisabled","search","value","undefined","_react","createElement","Button","disabled","__experimentalIsFocusable","size","variant","onClick","page","__"],"sources":["@wordpress/dataviews/src/reset-filters.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ResetFilter( { filters, view, onChangeView } ) {\n\tconst isPrimary = ( field ) =>\n\t\tfilters.some(\n\t\t\t( _filter ) => _filter.field === field && _filter.isPrimary\n\t\t);\n\tconst isDisabled =\n\t\t! view.search &&\n\t\t! view.filters?.some(\n\t\t\t( _filter ) =>\n\t\t\t\t_filter.value !== undefined || ! isPrimary( _filter.field )\n\t\t);\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isDisabled }\n\t\t\t__experimentalIsFocusable\n\t\t\tsize=\"compact\"\n\t\t\tvariant=\"tertiary\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tsearch: '',\n\t\t\t\t\tfilters: [],\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ __( 'Reset filters' ) }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIe,SAASE,WAAWA,CAAE;EAAEC,OAAO;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACtE,MAAMC,SAAS,GAAKC,KAAK,IACxBJ,OAAO,CAACK,IAAI,CACTC,OAAO,IAAMA,OAAO,CAACF,KAAK,KAAKA,KAAK,IAAIE,OAAO,CAACH,SACnD,CAAC;EACF,MAAMI,UAAU,GACf,CAAEN,IAAI,CAACO,MAAM,IACb,CAAEP,IAAI,CAACD,OAAO,EAAEK,IAAI,CACjBC,OAAO,IACRA,OAAO,CAACG,KAAK,KAAKC,SAAS,IAAI,CAAEP,SAAS,CAAEG,OAAO,CAACF,KAAM,CAC5D,CAAC;EACF,OACC,IAAAO,MAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAiB,MAAM;IACNC,QAAQ,EAAGP,UAAY;IACvBQ,yBAAyB;IACzBC,IAAI,EAAC,SAAS;IACdC,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAGA,CAAA,KAAM;MACfhB,YAAY,CAAE;QACb,GAAGD,IAAI;QACPkB,IAAI,EAAE,CAAC;QACPX,MAAM,EAAE,EAAE;QACVR,OAAO,EAAE;MACV,CAAE,CAAC;IACJ;EAAG,GAED,IAAAoB,QAAE,EAAE,eAAgB,CACf,CAAC;AAEX"}
+{"version":3,"names":["_components","require","_i18n","ResetFilter","filters","view","onChangeView","isPrimary","field","some","_filter","isDisabled","search","value","undefined","_react","createElement","Button","disabled","__experimentalIsFocusable","size","variant","className","onClick","page","__"],"sources":["@wordpress/dataviews/src/reset-filters.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ResetFilter( { filters, view, onChangeView } ) {\n\tconst isPrimary = ( field ) =>\n\t\tfilters.some(\n\t\t\t( _filter ) => _filter.field === field && _filter.isPrimary\n\t\t);\n\tconst isDisabled =\n\t\t! view.search &&\n\t\t! view.filters?.some(\n\t\t\t( _filter ) =>\n\t\t\t\t_filter.value !== undefined || ! isPrimary( _filter.field )\n\t\t);\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isDisabled }\n\t\t\t__experimentalIsFocusable\n\t\t\tsize=\"compact\"\n\t\t\tvariant=\"tertiary\"\n\t\t\tclassName=\"dataviews-filters__reset-button\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tsearch: '',\n\t\t\t\t\tfilters: [],\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ __( 'Reset' ) }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIe,SAASE,WAAWA,CAAE;EAAEC,OAAO;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACtE,MAAMC,SAAS,GAAKC,KAAK,IACxBJ,OAAO,CAACK,IAAI,CACTC,OAAO,IAAMA,OAAO,CAACF,KAAK,KAAKA,KAAK,IAAIE,OAAO,CAACH,SACnD,CAAC;EACF,MAAMI,UAAU,GACf,CAAEN,IAAI,CAACO,MAAM,IACb,CAAEP,IAAI,CAACD,OAAO,EAAEK,IAAI,CACjBC,OAAO,IACRA,OAAO,CAACG,KAAK,KAAKC,SAAS,IAAI,CAAEP,SAAS,CAAEG,OAAO,CAACF,KAAM,CAC5D,CAAC;EACF,OACC,IAAAO,MAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAiB,MAAM;IACNC,QAAQ,EAAGP,UAAY;IACvBQ,yBAAyB;IACzBC,IAAI,EAAC,SAAS;IACdC,OAAO,EAAC,UAAU;IAClBC,SAAS,EAAC,iCAAiC;IAC3CC,OAAO,EAAGA,CAAA,KAAM;MACfjB,YAAY,CAAE;QACb,GAAGD,IAAI;QACPmB,IAAI,EAAE,CAAC;QACPZ,MAAM,EAAE,EAAE;QACVR,OAAO,EAAE;MACV,CAAE,CAAC;IACJ;EAAG,GAED,IAAAqB,QAAE,EAAE,OAAQ,CACP,CAAC;AAEX"}

package/build/search-widget.js

@@ -13,6 +13,7 @@ var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
 var _primitives = require("@wordpress/primitives");
+var _lockUnlock = require("./lock-unlock");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -24,6 +25,15 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * WordPress dependencies
  */
 
+/**
+ * Internal dependencies
+ */
+
+const {
+  CompositeV2: Composite,
+  CompositeItemV2: CompositeItem,
+  useCompositeStoreV2: useCompositeStore
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 const radioCheck = (0, _react.createElement)(_primitives.SVG, {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
@@ -35,9 +45,78 @@ const radioCheck = (0, _react.createElement)(_primitives.SVG, {
 function normalizeSearchInput(input = '') {
   return (0, _removeAccents.default)(input.trim().toLowerCase());
 }
-function SearchWidget({
+function ListBox({
+  view,
   filter,
+  onChangeView
+}) {
+  const compositeStore = useCompositeStore({
+    virtualFocus: true,
+    focusLoop: true,
+    // When we have no or just one operators, we can set the first item as active.
+    // We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
+    // so the first item is not selected, since the focus is on the operators control.
+    defaultActiveId: filter.operators?.length === 1 ? undefined : null
+  });
+  const selectedFilter = view.filters.find(_filter => _filter.field === filter.field);
+  const selectedValues = selectedFilter?.value;
+  return (0, _react.createElement)(Composite, {
+    store: compositeStore,
+    role: "listbox",
+    className: "dataviews-search-widget-listbox",
+    "aria-label": (0, _i18n.sprintf)( /* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
+    (0, _i18n.__)('List of: %1$s'), filter.name),
+    onFocusVisible: () => {
+      if (!compositeStore.getState().activeId) {
+        compositeStore.move(compositeStore.first());
+      }
+    },
+    render: (0, _react.createElement)(Ariakit.CompositeTypeahead, {
+      store: compositeStore
+    })
+  }, filter.elements.map(element => (0, _react.createElement)(Ariakit.CompositeHover, {
+    store: compositeStore,
+    key: element.value,
+    render: (0, _react.createElement)(CompositeItem, {
+      render: (0, _react.createElement)("div", {
+        "aria-label": element.label,
+        role: "option",
+        className: "dataviews-search-widget-listitem"
+      }),
+      onClick: () => {
+        const currentFilter = view.filters.find(_filter => _filter.field === filter.field);
+        const newFilters = currentFilter ? [...view.filters.map(_filter => {
+          if (_filter.field === filter.field) {
+            return {
+              ..._filter,
+              operator: currentFilter.operator || filter.operators[0],
+              value: element.value
+            };
+          }
+          return _filter;
+        })] : [...view.filters, {
+          field: filter.field,
+          operator: filter.operators[0],
+          value: element.value
+        }];
+        onChangeView({
+          ...view,
+          page: 1,
+          filters: newFilters
+        });
+      }
+    })
+  }, (0, _react.createElement)("span", {
+    className: "dataviews-search-widget-listitem-check"
+  }, selectedValues === element.value && (0, _react.createElement)(_components.Icon, {
+    icon: radioCheck
+  })), (0, _react.createElement)("span", null, element.label, !!element.description && (0, _react.createElement)("span", {
+    className: "dataviews-search-widget-listitem-description"
+  }, element.description)))));
+}
+function ComboboxList({
   view,
+  filter,
   onChangeView
 }) {
   const [searchValue, setSearchValue] = (0, _element.useState)('');
@@ -92,20 +171,26 @@ function SearchWidget({
     return (0, _react.createElement)(Ariakit.ComboboxItem, {
       key: element.value,
       value: element.value,
-      className: "dataviews-search-widget-filter-combobox-item",
+      className: "dataviews-search-widget-listitem",
       hideOnClick: false,
       setValueOnClick: false,
       focusOnHover: true
     }, (0, _react.createElement)("span", {
-      className: "dataviews-search-widget-filter-combobox-item-check"
+      className: "dataviews-search-widget-listitem-check"
     }, selectedValues === element.value && (0, _react.createElement)(_components.Icon, {
       icon: radioCheck
     })), (0, _react.createElement)("span", null, (0, _react.createElement)(Ariakit.ComboboxItemValue, {
       className: "dataviews-search-widget-filter-combobox-item-value",
       value: element.label
     }), !!element.description && (0, _react.createElement)("span", {
-      className: "dataviews-search-widget-filter-combobox-item-description"
+      className: "dataviews-search-widget-listitem-description"
     }, element.description)));
   }), !matches.length && (0, _react.createElement)("p", null, (0, _i18n.__)('No results found'))));
 }
+function SearchWidget(props) {
+  const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
+  return (0, _react.createElement)(Widget, {
+    ...props
+  });
+}
 //# sourceMappingURL=search-widget.js.map