@wordpress/dataviews 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -2,4 +2,6 @@
 
 ## Unreleased
 
+## 0.3.0 (2024-01-10)
+
 ## 0.2.0 (2023-12-13)

package/LICENSE.md

@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2023 by the contributors
+    Copyright 2016-2024 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 

package/README.md

@@ -14,14 +14,18 @@ npm install @wordpress/dataviews --save
 
 ```js
 <DataViews
-	data={ pages }
-	getItemId={ ( item ) => item.id }
-	isLoading={ isLoadingPages }
+	data={ data }
+	paginationInfo={ { totalItems, totalPages } }
 	view={ view }
 	onChangeView={ onChangeView }
 	fields={ fields }
 	actions={ [ trashPostAction ] }
-	paginationInfo={ { totalItems, totalPages } }
+	search={ false }
+	searchLabel="Filter list"
+	getItemId={ ( item ) => item.id }
+	isLoading={ isLoadingData }
+	supportedLayouts={ [ 'table' ] }
+	deferredRendering={ true }
 	onSelectionChange={ ( items ) => { /* ... */ } }
 />
 ```
@@ -39,6 +43,13 @@ Example:
 ]
 ```
 
+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.
+
+## Pagination Info
+
+- `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.
+
 ## View
 
 The view object configures how the dataset is visible to the user.
@@ -79,9 +90,11 @@ Example:
     -   `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
+### onChangeView: syncing view and data
+
+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.
 
-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.
+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 `onChangeView` prop allows the consumer to provide a callback to be called when the view config changes, to process the data accordingly.
 
 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.
 
@@ -215,6 +228,17 @@ Array of operations that can be performed upon each record. Each action is an ob
     - `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.
+
 ## 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.

package/build/add-filter.js

@@ -8,8 +8,10 @@ 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");
 var _constants = require("./constants");
+var _dropdownMenuHelper = require("./dropdown-menu-helper");
 /**
  * WordPress dependencies
  */
@@ -20,71 +22,129 @@ var _constants = require("./constants");
 
 const {
   DropdownMenuV2: DropdownMenu,
-  DropdownSubMenuV2: DropdownSubMenu,
-  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
-  DropdownMenuItemV2: DropdownMenuItem
+  DropdownMenuGroupV2: DropdownMenuGroup,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuRadioItemV2: DropdownMenuRadioItem,
+  DropdownMenuSeparatorV2: DropdownMenuSeparator,
+  DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+  DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText
 } = (0, _lockUnlock.unlock)(_components.privateApis);
+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 AddFilter({
-  fields,
+  filters,
   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;
   }
+  const filterCount = view.filters.reduce((acc, filter) => {
+    if (filter.value !== undefined) {
+      return acc + 1;
+    }
+    return acc;
+  }, 0);
   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;
+      label: (0, _i18n.__)('Filters'),
+      size: "compact",
+      icon: _icons.funnel,
+      className: "dataviews-filters-button"
+    }, view.type === _constants.LAYOUT_LIST && filterCount > 0 ? (0, _react.createElement)("span", {
+      className: "dataviews-filters-count"
+    }, filterCount) : null),
+    style: {
+      minWidth: '230px'
     }
-    return (0, _react.createElement)(DropdownSubMenu, {
+  }, (0, _react.createElement)(WithSeparators, null, (0, _react.createElement)(DropdownMenuGroup, null, filters.map(filter => {
+    const filterInView = view.filters.find(f => f.field === filter.field);
+    const otherFilters = view.filters.filter(f => f.field !== filter.field);
+    const activeElement = filter.elements.find(element => element.value === filterInView?.value);
+    const activeOperator = filterInView?.operator || filter.operators[0];
+    return (0, _react.createElement)(DropdownMenu, {
       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,
+      trigger: (0, _react.createElement)(DropdownMenuItem, {
+        suffix: activeElement && (0, _react.createElement)("span", {
+          "aria-hidden": "true"
+        }, activeOperator in _constants.OPERATORS && `${_constants.OPERATORS[activeOperator].label} `, activeElement.label)
+      }, (0, _react.createElement)(DropdownMenuItemLabel, null, filter.name)),
+      style: {
+        minWidth: '200px'
+      }
+    }, (0, _react.createElement)(WithSeparators, null, (0, _react.createElement)(DropdownMenuGroup, null, filter.elements.map(element => {
+      const isActive = activeElement?.value === element.value;
+      return (0, _react.createElement)(_dropdownMenuHelper.DropdownMenuRadioItemCustom, {
+        key: element.value,
+        name: `add-filter-${filter.field}`,
+        value: element.value,
+        checked: isActive,
+        onChange: e => {
+          onChangeView({
+            ...view,
+            page: 1,
+            filters: [...otherFilters, {
+              field: filter.field,
+              operator: activeOperator,
+              value: isActive ? undefined : e.target.value
+            }]
+          });
+        }
+      }, (0, _react.createElement)(DropdownMenuItemLabel, null, element.label), !!element.description && (0, _react.createElement)(DropdownMenuItemHelpText, null, element.description));
+    })), filter.operators.length > 1 && (0, _react.createElement)(DropdownMenu, {
+      trigger: (0, _react.createElement)(DropdownMenuItem, {
+        suffix: (0, _react.createElement)("span", {
+          "aria-hidden": "true"
+        }, _constants.OPERATORS[activeOperator]?.label)
+      }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Conditions')))
+    }, Object.entries(_constants.OPERATORS).map(([operator, {
+      label,
+      key
+    }]) => (0, _react.createElement)(DropdownMenuRadioItem, {
+      key: key,
+      name: `add-filter-${filter.field}-conditions`,
+      value: operator,
+      checked: activeOperator === operator,
+      onChange: e => {
+        onChangeView({
+          ...view,
           page: 1,
-          filters: [...currentView.filters, {
+          filters: [...otherFilters, {
             field: filter.field,
-            operator: _constants.OPERATOR_IN,
-            value: element.value
+            operator: e.target.value,
+            value: filterInView?.value
           }]
-        }));
+        });
       }
-    }, element.label)));
-  }));
+    }, (0, _react.createElement)(DropdownMenuItemLabel, null, label)))), (0, _react.createElement)(DropdownMenuItem, {
+      key: 'reset-filter-' + filter.name,
+      disabled: !activeElement,
+      hideOnClick: false,
+      onClick: () => {
+        onChangeView({
+          ...view,
+          page: 1,
+          filters: view.filters.filter(f => f.field !== filter.field)
+        });
+      }
+    }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.sprintf)( /* translators: 1: Filter name. e.g.: "Reset Author". */
+    (0, _i18n.__)('Reset %1$s'), filter.name.toLowerCase())))));
+  })), (0, _react.createElement)(DropdownMenuItem, {
+    disabled: view.search === '' && view.filters?.length === 0,
+    hideOnClick: false,
+    onClick: () => {
+      onChangeView({
+        ...view,
+        page: 1,
+        filters: []
+      });
+    }
+  }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Reset filters')))));
 }
 //# sourceMappingURL=add-filter.js.map

package/build/add-filter.js.map

@@ -1 +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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"}
+{"version":3,"names":["_components","require","_icons","_i18n","_element","_lockUnlock","_constants","_dropdownMenuHelper","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuRadioItemV2","DropdownMenuRadioItem","DropdownMenuSeparatorV2","DropdownMenuSeparator","DropdownMenuItemLabelV2","DropdownMenuItemLabel","DropdownMenuItemHelpTextV2","DropdownMenuItemHelpText","unlock","componentsPrivateApis","WithSeparators","children","Children","toArray","filter","Boolean","map","child","i","_react","createElement","Fragment","key","AddFilter","filters","view","onChangeView","length","filterCount","reduce","acc","value","undefined","trigger","Button","__experimentalIsFocusable","label","__","size","icon","funnel","className","type","LAYOUT_LIST","style","minWidth","filterInView","find","f","field","otherFilters","activeElement","elements","element","activeOperator","operator","operators","suffix","OPERATORS","name","isActive","DropdownMenuRadioItemCustom","checked","onChange","e","page","target","description","Object","entries","disabled","hideOnClick","onClick","sprintf","toLowerCase","search"],"sources":["@wordpress/dataviews/src/add-filter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n} from '@wordpress/components';\nimport { funnel } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Children, Fragment } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\nimport { LAYOUT_LIST, OPERATORS } from './constants';\nimport { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuRadioItemV2: DropdownMenuRadioItem,\n\tDropdownMenuSeparatorV2: DropdownMenuSeparator,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n\tDropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,\n} = unlock( componentsPrivateApis );\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 AddFilter( { filters, view, onChangeView } ) {\n\tif ( filters.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst filterCount = view.filters.reduce( ( acc, filter ) => {\n\t\tif ( filter.value !== undefined ) {\n\t\t\treturn acc + 1;\n\t\t}\n\t\treturn acc;\n\t}, 0 );\n\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\tlabel={ __( 'Filters' ) }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ funnel }\n\t\t\t\t\tclassName=\"dataviews-filters-button\"\n\t\t\t\t>\n\t\t\t\t\t{ view.type === LAYOUT_LIST && filterCount > 0 ? (\n\t\t\t\t\t\t<span className=\"dataviews-filters-count\">\n\t\t\t\t\t\t\t{ filterCount }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null }\n\t\t\t\t</Button>\n\t\t\t}\n\t\t\tstyle={ {\n\t\t\t\tminWidth: '230px',\n\t\t\t} }\n\t\t>\n\t\t\t<WithSeparators>\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t{ filters.map( ( filter ) => {\n\t\t\t\t\t\tconst filterInView = view.filters.find(\n\t\t\t\t\t\t\t( f ) => f.field === filter.field\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst otherFilters = view.filters.filter(\n\t\t\t\t\t\t\t( f ) => f.field !== filter.field\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst activeElement = filter.elements.find(\n\t\t\t\t\t\t\t( element ) => element.value === filterInView?.value\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst activeOperator =\n\t\t\t\t\t\t\tfilterInView?.operator || filter.operators[ 0 ];\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\tactiveElement && (\n\t\t\t\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ activeOperator in\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATORS &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t`${ OPERATORS[ activeOperator ].label } ` }\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ activeElement.label }\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\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\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ filter.name }\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tminWidth: '200px',\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<WithSeparators>\n\t\t\t\t\t\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t\t\t\t\t\t{ filter.elements.map( ( element ) => {\n\t\t\t\t\t\t\t\t\t\t\tconst isActive =\n\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\telement.value;\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuRadioItemCustom\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\t\t\t\t\t\t\tname={ `add-filter-${ filter.field }` }\n\t\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\t\tchecked={ isActive }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( e ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...otherFilters,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\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\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactiveOperator,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: isActive\n\t\t\t\t\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\t\t\t\t: e\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.target\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.value,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemHelpText>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\telement.description\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemHelpText>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuRadioItemCustom>\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</DropdownMenuGroup>\n\t\t\t\t\t\t\t\t\t{ filter.operators.length > 1 && (\n\t\t\t\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATORS[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactiveOperator\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t]?.label\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Conditions' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\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\t\t{ Object.entries( OPERATORS ).map(\n\t\t\t\t\t\t\t\t\t\t\t\t( [\n\t\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\t{ label, key },\n\t\t\t\t\t\t\t\t\t\t\t\t] ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tname={ `add-filter-${ filter.field }-conditions` }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={ operator }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactiveOperator ===\n\t\t\t\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\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( e ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...otherFilters,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\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\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.target\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.value,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: filterInView?.value,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuRadioItem>\n\t\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</DropdownMenu>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ 'reset-filter-' + filter.name }\n\t\t\t\t\t\t\t\t\t\tdisabled={ ! activeElement }\n\t\t\t\t\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\t\t\t\tfilters: view.filters.filter(\n\t\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\t\tf.field !== filter.field\n\t\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} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: 1: Filter name. e.g.: \"Reset Author\". */\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Reset %1$s' ),\n\t\t\t\t\t\t\t\t\t\t\t\tfilter.name.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t</WithSeparators>\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t\t<DropdownMenuItem\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tview.search === '' && view.filters?.length === 0\n\t\t\t\t\t}\n\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\tfilters: [],\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ __( 'Reset filters' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t</WithSeparators>\n\t\t</DropdownMenu>\n\t);\n}\n"],"mappings":"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"}

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.OPERATOR_NOT_IN = exports.OPERATOR_IN = exports.LAYOUT_TABLE = exports.LAYOUT_LIST = exports.LAYOUT_GRID = exports.ENUMERATION_TYPE = void 0;
+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;
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _viewTable = _interopRequireDefault(require("./view-table"));
@@ -26,9 +26,31 @@ exports.ENUMERATION_TYPE = ENUMERATION_TYPE;
 const OPERATOR_IN = 'in';
 exports.OPERATOR_IN = OPERATOR_IN;
 const OPERATOR_NOT_IN = 'notIn';
+exports.OPERATOR_NOT_IN = OPERATOR_NOT_IN;
+const OPERATORS = {
+  [OPERATOR_IN]: {
+    key: 'in-filter',
+    label: (0, _i18n.__)('Is')
+  },
+  [OPERATOR_NOT_IN]: {
+    key: 'not-in-filter',
+    label: (0, _i18n.__)('Is not')
+  }
+};
+
+// Sorting
+exports.OPERATORS = OPERATORS;
+const SORTING_DIRECTIONS = {
+  asc: {
+    label: (0, _i18n.__)('Sort ascending')
+  },
+  desc: {
+    label: (0, _i18n.__)('Sort descending')
+  }
+};
 
 // View layouts.
-exports.OPERATOR_NOT_IN = OPERATOR_NOT_IN;
+exports.SORTING_DIRECTIONS = SORTING_DIRECTIONS;
 const LAYOUT_TABLE = 'table';
 exports.LAYOUT_TABLE = LAYOUT_TABLE;
 const LAYOUT_GRID = 'grid';

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","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"}
+{"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,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;AAACF,OAAA,CAAAE,eAAA,GAAAA,eAAA;AAChC,MAAMC,SAAS,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;AAAAN,OAAA,CAAAG,SAAA,GAAAA,SAAA;AACO,MAAMI,kBAAkB,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;AAAAN,OAAA,CAAAO,kBAAA,GAAAA,kBAAA;AACO,MAAMG,YAAY,GAAG,OAAO;AAACV,OAAA,CAAAU,YAAA,GAAAA,YAAA;AAC7B,MAAMC,WAAW,GAAG,MAAM;AAACX,OAAA,CAAAW,WAAA,GAAAA,WAAA;AAC3B,MAAMC,WAAW,GAAG,MAAM;AAACZ,OAAA,CAAAY,WAAA,GAAAA,WAAA;AAE3B,MAAMC,YAAY,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;AAACxB,OAAA,CAAAa,YAAA,GAAAA,YAAA"}

package/build/dataviews.js

@@ -21,6 +21,8 @@ var _constants = require("./constants");
  * Internal dependencies
  */
 
+const defaultGetItemId = item => item.id;
+const defaultOnSelectionChange = () => {};
 function DataViews({
   view,
   onChangeView,
@@ -29,18 +31,19 @@ function DataViews({
   searchLabel = undefined,
   actions,
   data,
-  getItemId,
+  getItemId = defaultGetItemId,
   isLoading = false,
   paginationInfo,
   supportedLayouts,
-  onSelectionChange,
-  deferredRendering
+  onSelectionChange = defaultOnSelectionChange,
+  onDetailsChange = null,
+  deferredRendering = false
 }) {
   const [selection, setSelection] = (0, _element.useState)([]);
-  const onSetSelection = items => {
+  const onSetSelection = (0, _element.useCallback)(items => {
     setSelection(items.map(item => item.id));
     onSelectionChange(items);
-  };
+  }, [setSelection, onSelectionChange]);
   const ViewComponent = _constants.VIEW_LAYOUTS.find(v => v.type === view.type).component;
   const _fields = (0, _element.useMemo)(() => {
     return fields.map(field => ({
@@ -55,7 +58,7 @@ function DataViews({
     justify: "flex-start"
   }, (0, _react.createElement)(_components.__experimentalHStack, {
     alignment: "flex-start",
-    className: "dataviews__filters-view-actions"
+    className: "dataviews-filters__view-actions"
   }, (0, _react.createElement)(_components.__experimentalHStack, {
     justify: "start",
     wrap: true
@@ -64,11 +67,11 @@ function DataViews({
     view: view,
     onChangeView: onChangeView
   }), (0, _react.createElement)(_filters.default, {
-    fields: fields,
+    fields: _fields,
     view: view,
     onChangeView: onChangeView
   })), (0, _react.createElement)(_viewActions.default, {
-    fields: fields,
+    fields: _fields,
     view: view,
     onChangeView: onChangeView,
     supportedLayouts: supportedLayouts
@@ -76,12 +79,12 @@ function DataViews({
     fields: _fields,
     view: view,
     onChangeView: onChangeView,
-    paginationInfo: paginationInfo,
     actions: actions,
     data: data,
     getItemId: getItemId,
     isLoading: isLoading,
     onSelectionChange: onSetSelection,
+    onDetailsChange: onDetailsChange,
     selection: selection,
     deferredRendering: deferredRendering
   }), (0, _react.createElement)(_pagination.default, {

package/build/dataviews.js.map

@@ -1 +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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"}
+{"version":3,"names":["_components","require","_element","_pagination","_interopRequireDefault","_viewActions","_filters","_search","_constants","defaultGetItemId","item","id","defaultOnSelectionChange","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","supportedLayouts","onSelectionChange","onDetailsChange","deferredRendering","selection","setSelection","useState","onSetSelection","useCallback","items","map","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, useCallback } 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\nconst defaultGetItemId = ( item ) => item.id;\nconst defaultOnSelectionChange = () => {};\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\n\tconst onSetSelection = useCallback(\n\t\t( items ) => {\n\t\t\tsetSelection( items.map( ( item ) => item.id ) );\n\t\t\tonSelectionChange( items );\n\t\t},\n\t\t[ setSelection, 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\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\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/>\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/dropdown-menu-helper.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownMenuRadioItemCustom = void 0;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _primitives = require("@wordpress/primitives");
+var _lockUnlock = require("./lock-unlock");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  DropdownMenuItemV2: DropdownMenuItem
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const radioCheck = (0, _react.createElement)(_primitives.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0, _react.createElement)(_primitives.Circle, {
+  cx: 12,
+  cy: 12,
+  r: 3
+}));
+
+/**
+ * A custom implementation of a radio menu item using the standard menu item
+ * component, which allows deselecting selected values.
+ */
+const DropdownMenuRadioItemCustom = (0, _element.forwardRef)(function DropdownMenuRadioItemCustom({
+  checked,
+  name,
+  value,
+  hideOnClick,
+  onChange,
+  onClick,
+  ...props
+}, ref) {
+  const onClickHandler = e => {
+    onClick?.(e);
+    onChange?.({
+      ...e,
+      target: {
+        ...e.target,
+        value
+      }
+    });
+  };
+  return (0, _react.createElement)(DropdownMenuItem, {
+    ref: ref,
+    role: "menuitemradio",
+    name: name,
+    "aria-checked": checked,
+    hideOnClick: !!hideOnClick,
+    prefix: checked ? (0, _react.createElement)(_components.Icon, {
+      icon: radioCheck
+    }) : (0, _react.createElement)("span", {
+      className: "dataviews-filters__custom-menu-radio-item-prefix",
+      "aria-hidden": "true"
+    }),
+    onClick: onClickHandler,
+    ...props
+  });
+});
+exports.DropdownMenuRadioItemCustom = DropdownMenuRadioItemCustom;
+//# sourceMappingURL=dropdown-menu-helper.js.map

package/build/dropdown-menu-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_element","_primitives","_lockUnlock","DropdownMenuItemV2","DropdownMenuItem","unlock","componentsPrivateApis","radioCheck","_react","createElement","SVG","xmlns","viewBox","Circle","cx","cy","r","DropdownMenuRadioItemCustom","forwardRef","checked","name","value","hideOnClick","onChange","onClick","props","ref","onClickHandler","e","target","role","prefix","Icon","icon","className","exports"],"sources":["@wordpress/dataviews/src/dropdown-menu-helper.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst { DropdownMenuItemV2: DropdownMenuItem } = unlock(\n\tcomponentsPrivateApis\n);\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\n/**\n * A custom implementation of a radio menu item using the standard menu item\n * component, which allows deselecting selected values.\n */\nexport const DropdownMenuRadioItemCustom = forwardRef(\n\tfunction DropdownMenuRadioItemCustom(\n\t\t{ checked, name, value, hideOnClick, onChange, onClick, ...props },\n\t\tref\n\t) {\n\t\tconst onClickHandler = ( e ) => {\n\t\t\tonClick?.( e );\n\t\t\tonChange?.( { ...e, target: { ...e.target, value } } );\n\t\t};\n\t\treturn (\n\t\t\t<DropdownMenuItem\n\t\t\t\tref={ ref }\n\t\t\t\trole=\"menuitemradio\"\n\t\t\t\tname={ name }\n\t\t\t\taria-checked={ checked }\n\t\t\t\thideOnClick={ !! hideOnClick }\n\t\t\t\tprefix={\n\t\t\t\t\tchecked ? (\n\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"dataviews-filters__custom-menu-radio-item-prefix\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tonClick={ onClickHandler }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AAbA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,MAAM;EAAEI,kBAAkB,EAAEC;AAAiB,CAAC,GAAG,IAAAC,kBAAM,EACtDC,uBACD,CAAC;AAED,MAAMC,UAAU,GACf,IAAAC,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAS,GAAG;EAACC,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1D,IAAAJ,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAY,MAAM;EAACC,EAAE,EAAG,EAAI;EAACC,EAAE,EAAG,EAAI;EAACC,CAAC,EAAG;AAAG,CAAS,CACxC,CACL;;AAED;AACA;AACA;AACA;AACO,MAAMC,2BAA2B,GAAG,IAAAC,mBAAU,EACpD,SAASD,2BAA2BA,CACnC;EAAEE,OAAO;EAAEC,IAAI;EAAEC,KAAK;EAAEC,WAAW;EAAEC,QAAQ;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAClEC,GAAG,EACF;EACD,MAAMC,cAAc,GAAKC,CAAC,IAAM;IAC/BJ,OAAO,GAAII,CAAE,CAAC;IACdL,QAAQ,GAAI;MAAE,GAAGK,CAAC;MAAEC,MAAM,EAAE;QAAE,GAAGD,CAAC,CAACC,MAAM;QAAER;MAAM;IAAE,CAAE,CAAC;EACvD,CAAC;EACD,OACC,IAAAb,MAAA,CAAAC,aAAA,EAACL,gBAAgB;IAChBsB,GAAG,EAAGA,GAAK;IACXI,IAAI,EAAC,eAAe;IACpBV,IAAI,EAAGA,IAAM;IACb,gBAAeD,OAAS;IACxBG,WAAW,EAAG,CAAC,CAAEA,WAAa;IAC9BS,MAAM,EACLZ,OAAO,GACN,IAAAX,MAAA,CAAAC,aAAA,EAACX,WAAA,CAAAkC,IAAI;MAACC,IAAI,EAAG1B;IAAY,CAAE,CAAC,GAE5B,IAAAC,MAAA,CAAAC,aAAA;MACCyB,SAAS,EAAC,kDAAkD;MAC5D,eAAY;IAAM,CACZ,CAER;IACDV,OAAO,EAAGG,cAAgB;IAAA,GACrBF;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAACU,OAAA,CAAAlB,2BAAA,GAAAA,2BAAA"}