@wordpress/dataviews 4.8.0 → 4.9.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 4.9.0 (2024-11-27)
+
+### Bug Fixes
+
+-   Fix focus loss when removing all filters or resetting ([#67003](https://github.com/WordPress/gutenberg/pull/67003)).
+
 ## 4.8.0 (2024-11-16)
 
 ## 4.7.0 (2024-10-30)
@@ -25,8 +31,7 @@
 ## Internal
 
 -   The "move left/move right" controls in the table layout (popup displayed on cliking header) are always visible. ([#64646](https://github.com/WordPress/gutenberg/pull/64646)). Before this, its visibility depending on filters, enableSorting, and enableHiding.
-- Filters no longer display the elements' description. ([#64674](https://github.com/WordPress/gutenberg/pull/64674))
-
+-   Filters no longer display the elements' description. ([#64674](https://github.com/WordPress/gutenberg/pull/64674))
 
 ## Enhancements
 

package/README.md

@@ -293,23 +293,54 @@ function MyCustomPageTable() {
 
 #### `actions`: `Object[]`
 
-Collection of operations that can be performed upon each record.
-
-Each action is an object with the following properties:
-
--   `id`: string, required. Unique identifier of the action. For example, `move-to-trash`.
--   `label`: string|function, required. User facing description of the action. For example, `Move to Trash`. It can also take a function that takes the selected items as a parameter and returns a string: this can be useful to provide a dynamic label based on the selection.
--   `isPrimary`: boolean, optional. Whether the action should be listed inline (primary) or in hidden in the more actions menu (secondary).
--   `icon`: SVG element. Icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary.
--   `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input.
--   `isDestructive`: boolean, optional. Whether the action can delete data, in which case the UI would communicate it via red color.
--   `supportsBulk`: Whether the action can be used as a bulk action. False by default.
--   `disabled`: Whether the action is disabled. False by default.
--   `context`: where this action would be visible. One of `list`, `single`.
--   `callback`: function, required unless `RenderModal` is provided. Callback function that takes as input the list of items to operate with, and performs the required action.
--   `RenderModal`: ReactElement, optional. If an action requires that some UI be rendered in a modal, it can provide a component which takes as input the the list of `items` to operate with, `closeModal` function, and `onActionPerformed` 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.
--   `modalHeader`: string, optional. The header of the modal.
+A list of actions that can be performed on the dataset. See "Actions API" for more details.
+
+Example:
+
+```js
+const actions = [
+	{
+		id: 'view',
+		label: 'View',
+		isPrimary: true,
+		icon: <Icon icon={ view } />,
+		isEligible: ( item ) => item.status === 'published'
+		callback: ( items ) => {
+			console.log( 'Viewing item:', items[0] );
+		},
+	},
+	{
+		id: 'edit',
+		label: 'Edit',
+		icon: <Icon icon={ edit } />,
+		supportsBulk: true,
+		callback: ( items ) => {
+			console.log( 'Editing items:', items );
+		}
+	},
+	{
+		id: 'delete',
+		label: 'Delete',
+		isDestructive: true,
+		supportsBulk: true,
+		RenderModal: ( { items, closeModal, onActionPerformed } ) => (
+			<div>
+				<p>Are you sure you want to delete { items.length } item(s)?</p>
+				<Button 
+					variant="primary" 
+					onClick={() => {
+						console.log( 'Deleting items:', items );
+						onActionPerformed();
+						closeModal();
+					}}
+				>
+					Confirm Delete
+				</Button>
+			</div>
+		)
+	}
+];
+```
 
 #### `paginationInfo`: `Object`
 
@@ -502,6 +533,164 @@ Parameters:
 
 Returns a boolean indicating if the item is valid (true) or not (false).
 
+## Actions API
+
+### `id`
+
+The unique identifier of the action.
+
+- Type: `string`
+- Required
+- Example: `move-to-trash`
+
+### `label` 
+
+The user facing description of the action.
+
+- Type: `string | function`
+- Required
+- Example:
+
+```js
+{
+	label: Move to Trash
+}
+```
+
+or
+
+```js
+{
+	label: ( items ) => items.length > 1 ? 'Delete items' : 'Delete item'
+}
+```
+
+### `isPrimary`
+
+Whether the action should be displayed inline (primary) or only displayed in the "More actions" menu (secondary).
+
+- Type: `boolean`
+- Optional
+
+### `icon`
+
+Icon to show for primary actions.
+
+- Type: SVG element
+- Required for primary actions, optional for secondary actions.
+
+### `isEligible`
+
+Function that determines whether the action can be performed for a given record.
+
+- Type: `function`
+- Optional. If not present, action is considered eligible for all items.
+- Example:
+
+```js
+{
+	isEligible: ( item ) => item.status === 'published'
+}
+```
+
+### `isDestructive`
+
+Whether the action can delete data, in which case the UI communicates it via a red color.
+
+- Type: `boolean`
+- Optional
+
+### `supportsBulk`
+
+Whether the action can operate over multiple items at once.
+
+- Type: `boolean`
+- Optional
+- Default: `false`
+
+### `disabled`
+
+Whether the action is disabled.
+
+- Type: `boolean`
+- Optional
+- Default: `false`
+
+### `context`
+
+Where this action would be visible.
+
+- Type: `string`
+- Optional
+- One of: `list`, `single`
+
+### `callback`
+
+Function that performs the required action.
+
+- Type: `function`
+- Either `callback` or `RenderModal` must be provided. If `RenderModal` is provided, `callback` will be ignored
+- Example:
+
+```js
+{
+	callback: ( items, { onActionPerformed } ) => {
+		// Perform action.
+		onActionPerformed?.( items );
+	}
+}
+```
+
+### `RenderModal`
+
+Component to render UI in a modal for the action.
+
+- Type: `ReactElement`
+- Either `callback` or `RenderModal` must be provided. If `RenderModal` is provided, `callback` will be ignored.
+- Example:
+
+```jsx
+{
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const onSubmit = ( event ) => {
+			event.preventDefault();
+			// Perform action.
+			closeModal?.();
+			onActionPerformed?.( items );
+		};
+		return (
+			<form onSubmit={ onSubmit }>
+				<p>Modal UI</p>
+				<HStack>
+					<Button variant="tertiary" onClick={ closeModal }>
+						Cancel
+					</Button>
+					<Button variant="primary" type="submit">
+						Submit
+					</Button>
+				</HStack>
+			</form>
+		);
+	}
+}
+```
+
+### `hideModalHeader`
+
+Controls visibility of the modal's header when using `RenderModal`.
+
+- Type: `boolean`
+- Optional
+- When false and using `RenderModal`, the action's label is used in modal header
+
+### `modalHeader`
+
+The header text to show in the modal.
+
+- Type: `string`
+- Optional
+
+
 ## Fields API
 
 ### `id`

package/build/components/dataform/index.js

@@ -4,24 +4,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DataForm;
-var _dataformsLayouts = require("../../dataforms-layouts");
+var _element = require("@wordpress/element");
+var _dataformContext = require("../dataform-context");
+var _normalizeFields = require("../../normalize-fields");
+var _dataFormLayout = require("../../dataforms-layouts/data-form-layout");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
 /**
  * Internal dependencies
  */
 
 function DataForm({
+  data,
   form,
-  ...props
+  fields,
+  onChange
 }) {
-  var _form$type;
-  const layout = (0, _dataformsLayouts.getFormLayout)((_form$type = form.type) !== null && _form$type !== void 0 ? _form$type : 'regular');
-  if (!layout) {
+  const normalizedFields = (0, _element.useMemo)(() => (0, _normalizeFields.normalizeFields)(fields), [fields]);
+  if (!form.fields) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(layout.component, {
-    form: form,
-    ...props
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataformContext.DataFormProvider, {
+    fields: normalizedFields,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataFormLayout.DataFormLayout, {
+      data: data,
+      form: form,
+      onChange: onChange
+    })
   });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_dataformsLayouts","require","_jsxRuntime","DataForm","form","props","_form$type","layout","getFormLayout","type","jsx","component"],"sources":["@wordpress/dataviews/src/components/dataform/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { DataFormProps } from '../../types';\nimport { getFormLayout } from '../../dataforms-layouts';\n\nexport default function DataForm< Item >( {\n\tform,\n\t...props\n}: DataFormProps< Item > ) {\n\tconst layout = getFormLayout( form.type ?? 'regular' );\n\tif ( ! layout ) {\n\t\treturn null;\n\t}\n\n\treturn <layout.component form={ form } { ...props } />;\n}\n"],"mappings":";;;;;;AAIA,IAAAA,iBAAA,GAAAC,OAAA;AAAwD,IAAAC,WAAA,GAAAD,OAAA;AAJxD;AACA;AACA;;AAIe,SAASE,QAAQA,CAAU;EACzCC,IAAI;EACJ,GAAGC;AACmB,CAAC,EAAG;EAAA,IAAAC,UAAA;EAC1B,MAAMC,MAAM,GAAG,IAAAC,+BAAa,GAAAF,UAAA,GAAEF,IAAI,CAACK,IAAI,cAAAH,UAAA,cAAAA,UAAA,GAAI,SAAU,CAAC;EACtD,IAAK,CAAEC,MAAM,EAAG;IACf,OAAO,IAAI;EACZ;EAEA,oBAAO,IAAAL,WAAA,CAAAQ,GAAA,EAACH,MAAM,CAACI,SAAS;IAACP,IAAI,EAAGA,IAAM;IAAA,GAAMC;EAAK,CAAI,CAAC;AACvD","ignoreList":[]}
+{"version":3,"names":["_element","require","_dataformContext","_normalizeFields","_dataFormLayout","_jsxRuntime","DataForm","data","form","fields","onChange","normalizedFields","useMemo","normalizeFields","jsx","DataFormProvider","children","DataFormLayout"],"sources":["@wordpress/dataviews/src/components/dataform/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormProps } from '../../types';\nimport { DataFormProvider } from '../dataform-context';\nimport { normalizeFields } from '../../normalize-fields';\nimport { DataFormLayout } from '../../dataforms-layouts/data-form-layout';\n\nexport default function DataForm< Item >( {\n\tdata,\n\tform,\n\tfields,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst normalizedFields = useMemo(\n\t\t() => normalizeFields( fields ),\n\t\t[ fields ]\n\t);\n\n\tif ( ! form.fields ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataFormProvider fields={ normalizedFields }>\n\t\t\t<DataFormLayout data={ data } form={ form } onChange={ onChange } />\n\t\t</DataFormProvider>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAA0E,IAAAI,WAAA,GAAAJ,OAAA;AAX1E;AACA;AACA;;AAGA;AACA;AACA;;AAMe,SAASK,QAAQA,CAAU;EACzCC,IAAI;EACJC,IAAI;EACJC,MAAM;EACNC;AACsB,CAAC,EAAG;EAC1B,MAAMC,gBAAgB,GAAG,IAAAC,gBAAO,EAC/B,MAAM,IAAAC,gCAAe,EAAEJ,MAAO,CAAC,EAC/B,CAAEA,MAAM,CACT,CAAC;EAED,IAAK,CAAED,IAAI,CAACC,MAAM,EAAG;IACpB,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAJ,WAAA,CAAAS,GAAA,EAACZ,gBAAA,CAAAa,gBAAgB;IAACN,MAAM,EAAGE,gBAAkB;IAAAK,QAAA,eAC5C,IAAAX,WAAA,CAAAS,GAAA,EAACV,eAAA,CAAAa,cAAc;MAACV,IAAI,EAAGA,IAAM;MAACC,IAAI,EAAGA,IAAM;MAACE,QAAQ,EAAGA;IAAU,CAAE;EAAC,CACnD,CAAC;AAErB","ignoreList":[]}

package/build/components/dataform-context/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataFormProvider = DataFormProvider;
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const DataFormContext = (0, _element.createContext)({
+  fields: []
+});
+function DataFormProvider({
+  fields,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DataFormContext.Provider, {
+    value: {
+      fields
+    },
+    children: children
+  });
+}
+var _default = exports.default = DataFormContext;
+//# sourceMappingURL=index.js.map

package/build/components/dataform-context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_jsxRuntime","DataFormContext","createContext","fields","DataFormProvider","children","jsx","Provider","value","_default","exports","default"],"sources":["@wordpress/dataviews/src/components/dataform-context/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedField } from '../../types';\n\ntype DataFormContextType< Item > = {\n\tfields: NormalizedField< Item >[];\n};\n\nconst DataFormContext = createContext< DataFormContextType< any > >( {\n\tfields: [],\n} );\n\nexport function DataFormProvider< Item >( {\n\tfields,\n\tchildren,\n}: React.PropsWithChildren< { fields: NormalizedField< Item >[] } > ) {\n\treturn (\n\t\t<DataFormContext.Provider value={ { fields } }>\n\t\t\t{ children }\n\t\t</DataFormContext.Provider>\n\t);\n}\n\nexport default DataFormContext;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAAmD,IAAAC,WAAA,GAAAD,OAAA;AAHnD;AACA;AACA;;AAGA;AACA;AACA;;AAOA,MAAME,eAAe,GAAG,IAAAC,sBAAa,EAAgC;EACpEC,MAAM,EAAE;AACT,CAAE,CAAC;AAEI,SAASC,gBAAgBA,CAAU;EACzCD,MAAM;EACNE;AACiE,CAAC,EAAG;EACrE,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACL,eAAe,CAACM,QAAQ;IAACC,KAAK,EAAG;MAAEL;IAAO,CAAG;IAAAE,QAAA,EAC3CA;EAAQ,CACe,CAAC;AAE7B;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcV,eAAe","ignoreList":[]}

package/build/components/dataviews/index.js

@@ -52,7 +52,6 @@ function DataViews({
   header
 }) {
   const [selectionState, setSelectionState] = (0, _element.useState)([]);
-  const [density, setDensity] = (0, _element.useState)(0);
   const isUncontrolled = selectionProperty === undefined || onChangeSelection === undefined;
   const selection = isUncontrolled ? selectionState : selectionProperty;
   const [openedFilter, setOpenedFilter] = (0, _element.useState)(null);
@@ -86,8 +85,7 @@ function DataViews({
       setOpenedFilter,
       getItemId,
       isItemClickable,
-      onClickItem,
-      density
+      onClickItem
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dataviews-wrapper",
@@ -102,7 +100,7 @@ function DataViews({
           className: "dataviews__search",
           children: [search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsSearch.default, {
             label: searchLabel
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsFilters.FilterVisibilityToggle, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsFilters.FiltersToggle, {
             filters: filters,
             view: view,
             onChangeView: onChangeView,
@@ -117,9 +115,7 @@ function DataViews({
             flexShrink: 0
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsViewConfig.default, {
-            defaultLayouts: defaultLayouts,
-            density: density,
-            setDensity: setDensity
+            defaultLayouts: defaultLayouts
           }), header]
         })]
       }), isShowingFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsFilters.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsLayout.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsFooter.default, {})]

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_dataviewsContext","_interopRequireDefault","_dataviewsFilters","_interopRequireWildcard","_dataviewsLayout","_dataviewsFooter","_dataviewsSearch","_dataviewsViewConfig","_normalizeFields","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","defaultGetItemId","item","id","defaultIsItemClickable","defaultOnClickItem","EMPTY_ARRAY","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","defaultLayouts","selection","selectionProperty","onChangeSelection","onClickItem","isItemClickable","header","selectionState","setSelectionState","useState","density","setDensity","isUncontrolled","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","useMemo","normalizeFields","_selection","filter","some","filters","useFilters","isShowingFilter","setIsShowingFilter","isPrimary","jsx","Provider","children","jsxs","className","__experimentalHStack","alignment","justify","spacing","expanded","label","FilterVisibilityToggle","style","flexShrink"],"sources":["@wordpress/dataviews/src/components/dataviews/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport {\n\tdefault as DataViewsFilters,\n\tuseFilters,\n\tFilterVisibilityToggle,\n} from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport DataViewsFooter from '../dataviews-footer';\nimport DataViewsSearch from '../dataviews-search';\nimport DataViewsViewConfig from '../dataviews-view-config';\nimport { normalizeFields } from '../../normalize-fields';\nimport type { Action, Field, View, SupportedLayouts } from '../../types';\nimport type { SelectionOrUpdater } from '../../private-types';\n\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection?: string[];\n\tonChangeSelection?: ( items: string[] ) => void;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable?: ( item: Item ) => boolean;\n\theader?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst defaultIsItemClickable = () => false;\nconst defaultOnClickItem = () => {};\nconst EMPTY_ARRAY: any[] = [];\n\nexport default function DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\tonClickItem = defaultOnClickItem,\n\tisItemClickable = defaultIsItemClickable,\n\theader,\n}: DataViewsProps< Item > ) {\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst [ density, setDensity ] = useState< number >( 0 );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst _selection = useMemo( () => {\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId ] );\n\n\tconst filters = useFilters( _fields, view );\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>\n\t\t( filters || [] ).some( ( filter ) => filter.isPrimary )\n\t);\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tselection: _selection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tisItemClickable,\n\t\t\t\tonClickItem,\n\t\t\t\tdensity,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\t\tspacing={ 1 }\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\texpanded={ false }\n\t\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t\t<FilterVisibilityToggle\n\t\t\t\t\t\t\tfilters={ filters }\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\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t\tsetIsShowingFilter={ setIsShowingFilter }\n\t\t\t\t\t\t\tisShowingFilter={ isShowingFilter }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DataViewsViewConfig\n\t\t\t\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\t\t\t\tdensity={ density }\n\t\t\t\t\t\t\tsetDensity={ setDensity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t{ isShowingFilter && <DataViewsFilters /> }\n\t\t\t\t<DataViewsLayout />\n\t\t\t\t<DataViewsFooter />\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_dataviewsContext","_interopRequireDefault","_dataviewsFilters","_interopRequireWildcard","_dataviewsLayout","_dataviewsFooter","_dataviewsSearch","_dataviewsViewConfig","_normalizeFields","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","defaultGetItemId","item","id","defaultIsItemClickable","defaultOnClickItem","EMPTY_ARRAY","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","defaultLayouts","selection","selectionProperty","onChangeSelection","onClickItem","isItemClickable","header","selectionState","setSelectionState","useState","isUncontrolled","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","useMemo","normalizeFields","_selection","filter","some","filters","useFilters","isShowingFilter","setIsShowingFilter","isPrimary","jsx","Provider","children","jsxs","className","__experimentalHStack","alignment","justify","spacing","expanded","label","FiltersToggle","style","flexShrink"],"sources":["@wordpress/dataviews/src/components/dataviews/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport {\n\tdefault as DataViewsFilters,\n\tuseFilters,\n\tFiltersToggle,\n} from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport DataViewsFooter from '../dataviews-footer';\nimport DataViewsSearch from '../dataviews-search';\nimport DataViewsViewConfig from '../dataviews-view-config';\nimport { normalizeFields } from '../../normalize-fields';\nimport type { Action, Field, View, SupportedLayouts } from '../../types';\nimport type { SelectionOrUpdater } from '../../private-types';\n\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection?: string[];\n\tonChangeSelection?: ( items: string[] ) => void;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable?: ( item: Item ) => boolean;\n\theader?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst defaultIsItemClickable = () => false;\nconst defaultOnClickItem = () => {};\nconst EMPTY_ARRAY: any[] = [];\n\nexport default function DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\tonClickItem = defaultOnClickItem,\n\tisItemClickable = defaultIsItemClickable,\n\theader,\n}: DataViewsProps< Item > ) {\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst _selection = useMemo( () => {\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId ] );\n\n\tconst filters = useFilters( _fields, view );\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>\n\t\t( filters || [] ).some( ( filter ) => filter.isPrimary )\n\t);\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tselection: _selection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tisItemClickable,\n\t\t\t\tonClickItem,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\t\tspacing={ 1 }\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\texpanded={ false }\n\t\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t\t<FiltersToggle\n\t\t\t\t\t\t\tfilters={ filters }\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\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t\tsetIsShowingFilter={ setIsShowingFilter }\n\t\t\t\t\t\t\tisShowingFilter={ isShowingFilter }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DataViewsViewConfig\n\t\t\t\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t{ isShowingFilter && <DataViewsFilters /> }\n\t\t\t\t<DataViewsLayout />\n\t\t\t\t<DataViewsFooter />\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/dataviews-context/index.js

@@ -31,8 +31,7 @@ const DataViewsContext = (0, _element.createContext)({
   openedFilter: null,
   getItemId: item => item.id,
   onClickItem: () => {},
-  isItemClickable: () => false,
-  density: 0
+  isItemClickable: () => false
 });
 var _default = exports.default = DataViewsContext;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_constants","DataViewsContext","createContext","view","type","LAYOUT_TABLE","onChangeView","fields","data","paginationInfo","totalItems","totalPages","selection","onChangeSelection","setOpenedFilter","openedFilter","getItemId","item","id","onClickItem","isItemClickable","density","_default","exports","default"],"sources":["@wordpress/dataviews/src/components/dataviews-context/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { View, Action, NormalizedField } from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport { LAYOUT_TABLE } from '../../constants';\n\ntype DataViewsContextType< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: NormalizedField< Item >[];\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\topenedFilter: string | null;\n\tsetOpenedFilter: ( openedFilter: string | null ) => void;\n\tgetItemId: ( item: Item ) => string;\n\tonClickItem: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n\tdensity: number;\n};\n\nconst DataViewsContext = createContext< DataViewsContextType< any > >( {\n\tview: { type: LAYOUT_TABLE },\n\tonChangeView: () => {},\n\tfields: [],\n\tdata: [],\n\tpaginationInfo: {\n\t\ttotalItems: 0,\n\t\ttotalPages: 0,\n\t},\n\tselection: [],\n\tonChangeSelection: () => {},\n\tsetOpenedFilter: () => {},\n\topenedFilter: null,\n\tgetItemId: ( item ) => item.id,\n\tonClickItem: () => {},\n\tisItemClickable: () => false,\n\tdensity: 0,\n} );\n\nexport default DataViewsContext;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,UAAA,GAAAD,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AA0BA,MAAME,gBAAgB,GAAG,IAAAC,sBAAa,EAAiC;EACtEC,IAAI,EAAE;IAAEC,IAAI,EAAEC;EAAa,CAAC;EAC5BC,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtBC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE,EAAE;EACRC,cAAc,EAAE;IACfC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE;EACb,CAAC;EACDC,SAAS,EAAE,EAAE;EACbC,iBAAiB,EAAEA,CAAA,KAAM,CAAC,CAAC;EAC3BC,eAAe,EAAEA,CAAA,KAAM,CAAC,CAAC;EACzBC,YAAY,EAAE,IAAI;EAClBC,SAAS,EAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE;EAC9BC,WAAW,EAAEA,CAAA,KAAM,CAAC,CAAC;EACrBC,eAAe,EAAEA,CAAA,KAAM,KAAK;EAC5BC,OAAO,EAAE;AACV,CAAE,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEWvB,gBAAgB","ignoreList":[]}
+{"version":3,"names":["_element","require","_constants","DataViewsContext","createContext","view","type","LAYOUT_TABLE","onChangeView","fields","data","paginationInfo","totalItems","totalPages","selection","onChangeSelection","setOpenedFilter","openedFilter","getItemId","item","id","onClickItem","isItemClickable","_default","exports","default"],"sources":["@wordpress/dataviews/src/components/dataviews-context/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { View, Action, NormalizedField } from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport { LAYOUT_TABLE } from '../../constants';\n\ntype DataViewsContextType< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: NormalizedField< Item >[];\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\topenedFilter: string | null;\n\tsetOpenedFilter: ( openedFilter: string | null ) => void;\n\tgetItemId: ( item: Item ) => string;\n\tonClickItem: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n};\n\nconst DataViewsContext = createContext< DataViewsContextType< any > >( {\n\tview: { type: LAYOUT_TABLE },\n\tonChangeView: () => {},\n\tfields: [],\n\tdata: [],\n\tpaginationInfo: {\n\t\ttotalItems: 0,\n\t\ttotalPages: 0,\n\t},\n\tselection: [],\n\tonChangeSelection: () => {},\n\tsetOpenedFilter: () => {},\n\topenedFilter: null,\n\tgetItemId: ( item ) => item.id,\n\tonClickItem: () => {},\n\tisItemClickable: () => false,\n} );\n\nexport default DataViewsContext;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,UAAA,GAAAD,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAyBA,MAAME,gBAAgB,GAAG,IAAAC,sBAAa,EAAiC;EACtEC,IAAI,EAAE;IAAEC,IAAI,EAAEC;EAAa,CAAC;EAC5BC,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtBC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE,EAAE;EACRC,cAAc,EAAE;IACfC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE;EACb,CAAC;EACDC,SAAS,EAAE,EAAE;EACbC,iBAAiB,EAAEA,CAAA,KAAM,CAAC,CAAC;EAC3BC,eAAe,EAAEA,CAAA,KAAM,CAAC,CAAC;EACzBC,YAAY,EAAE,IAAI;EAClBC,SAAS,EAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE;EAC9BC,WAAW,EAAEA,CAAA,KAAM,CAAC,CAAC;EACrBC,eAAe,EAAEA,CAAA,KAAM;AACxB,CAAE,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEWtB,gBAAgB","ignoreList":[]}

package/build/components/dataviews-filters/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FilterVisibilityToggle = FilterVisibilityToggle;
+exports.FiltersToggle = FiltersToggle;
 exports.default = void 0;
 exports.useFilters = useFilters;
 var _element = require("@wordpress/element");
@@ -64,7 +64,7 @@ function useFilters(fields, view) {
     return filters;
   }, [fields, view]);
 }
-function FilterVisibilityToggle({
+function FiltersToggle({
   filters,
   view,
   onChangeView,
@@ -72,6 +72,7 @@ function FilterVisibilityToggle({
   isShowingFilter,
   setIsShowingFilter
 }) {
+  const buttonRef = (0, _element.useRef)(null);
   const onChangeViewWithFilterVisibility = (0, _element.useCallback)(_view => {
     onChangeView(_view);
     setIsShowingFilter(true);
@@ -81,40 +82,57 @@ function FilterVisibilityToggle({
   if (filters.length === 0) {
     return null;
   }
-  if (!hasVisibleFilters) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_addFilter.AddFilterMenu, {
+  const addFilterButtonProps = {
+    label: (0, _i18n.__)('Add filter'),
+    'aria-expanded': false,
+    isPressed: false
+  };
+  const toggleFiltersButtonProps = {
+    label: (0, _i18n._x)('Filter', 'verb'),
+    'aria-expanded': isShowingFilter,
+    isPressed: isShowingFilter,
+    onClick: () => {
+      if (!isShowingFilter) {
+        setOpenedFilter(null);
+      }
+      setIsShowingFilter(!isShowingFilter);
+    }
+  };
+  const buttonComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    ref: buttonRef,
+    className: "dataviews-filters__visibility-toggle",
+    size: "compact",
+    icon: _icons.funnel,
+    ...(hasVisibleFilters ? toggleFiltersButtonProps : addFilterButtonProps)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "dataviews-filters__container-visibility-toggle",
+    children: !hasVisibleFilters ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_addFilter.AddFilterMenu, {
       filters: filters,
       view: view,
       onChangeView: onChangeViewWithFilterVisibility,
       setOpenedFilter: setOpenedFilter,
-      trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        className: "dataviews-filters__visibility-toggle",
-        size: "compact",
-        icon: _icons.funnel,
-        label: (0, _i18n.__)('Add filter'),
-        isPressed: false,
-        "aria-expanded": false
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "dataviews-filters__container-visibility-toggle",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-      className: "dataviews-filters__visibility-toggle",
-      size: "compact",
-      icon: _icons.funnel,
-      label: (0, _i18n._x)('Filter', 'verb'),
-      onClick: () => {
-        if (!isShowingFilter) {
-          setOpenedFilter(null);
-        }
-        setIsShowingFilter(!isShowingFilter);
-      },
-      isPressed: isShowingFilter,
-      "aria-expanded": isShowingFilter
-    }), hasVisibleFilters && !!view.filters?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      trigger: buttonComponent
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterVisibilityToggle, {
+      buttonRef: buttonRef,
+      filtersCount: view.filters?.length,
+      children: buttonComponent
+    })
+  });
+}
+function FilterVisibilityToggle({
+  buttonRef,
+  filtersCount,
+  children
+}) {
+  // Focus the `add filter` button when unmounts.
+  (0, _element.useEffect)(() => () => {
+    buttonRef.current?.focus();
+  }, [buttonRef]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [children, !!filtersCount && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "dataviews-filters-toggle__count",
-      children: view.filters?.length
+      children: filtersCount
     })]
   });
 }