@wordpress/dataviews 10.0.1-next.ff1cebbba.0 → 10.1.0

package/CHANGELOG.md

@@ -2,7 +2,13 @@
 
 ## Unreleased
 
-## 10.0.0-next.0 (2025-10-16)
+## 10.1.0 (2025-10-21)
+
+### Enhancements
+
+- Dataviews: Use text based buttons for actions instead of text. [#72417](https://github.com/WordPress/gutenberg/pull/72417)
+
+## 10.0.0 (2025-10-17)
 
 ### Bug Fixes
 
@@ -18,6 +24,8 @@
 - DataForm control for `date` supports `required` and `custom` validation [#72048](https://github.com/WordPress/gutenberg/pull/72048).
 - DataForm control for `datetime` supports `required` and `custom` validation. [#72060](https://github.com/WordPress/gutenberg/pull/72060).
 - Standardise DataForm typography. [#72284](https://github.com/WordPress/gutenberg/pull/72284).
+- Dataviews: Add support for dynamic modal headers. [#72384](https://github.com/WordPress/gutenberg/pull/72384)
+- Field API: support async loading elements. [#72254](https://github.com/WordPress/gutenberg/pull/72254)
 
 ### Breaking changes
 
@@ -26,6 +34,7 @@
 - Remove `Data< Item >` type, as it is no longer used internally for a long time. [#72051](https://github.com/WordPress/gutenberg/pull/72051)
 - Remove `isDestructive` prop from actions API. Destructive actions should be communicated via flow (opens modal to confirm) and color should be used in the modal. [#72111](https://github.com/WordPress/gutenberg/pull/72111)
 - The `isValid.custom` default function that comes with the field type no longer checks for elements. This is now the `isValid.elements` responsibility and can be toggle on/off separately. [#72325](https://github.com/WordPress/gutenberg/pull/72325)
+- DataForm: make validation controlled by leveraging a `validity` prop. This also removes `isItemValid` and introduces `useFormValidity` hook to calculate the `validity` prop. [#71412](https://github.com/WordPress/gutenberg/pull/71412)
 
 ### Features
 

package/README.md

@@ -697,6 +697,54 @@ return (
 );
 ```
 
+### validity
+
+Object that determines the validation status of each field. There's a `useFormValidity` hook that can be used to create the validity object — see the utility below. This section documents the `validity` object in case you want to create it via other means.
+
+The top-level props of the `validity` object are the field IDs. Fields declare their validity status for each of the validation rules supported: `required`, `elements`, `custom`. If a rule is valid, it should not be present in the object; if a field is valid for all the rules, it should not be present in the object either.
+
+For example:
+
+```json
+{
+  "title": {
+    "required": {
+      "type": "invalid"
+    }
+  },
+  "author": {
+    "elements": {
+      "type": "invalid",
+      "message": "Value must be one of the elements."
+    }
+  },
+  "publisher": {
+    "custom": {
+      "type": "validating",
+      "message": "Validating..."
+    }
+  },
+  "isbn": {
+    "custom": {
+      "type": "valid",
+      "message": "Valid."
+    }
+  }
+}
+```
+
+Each rule, can have a `type` and a `message`.
+
+The `message` is the text to be displayed in the UI controls. The message for the `required` rule is optional, and the built-in browser message will be used if not provided.
+
+The `type` can be:
+
+- `validating`: when the value is being validated (e.g., custom async rule)
+- `invalid`: when the value is invalid according to the rule
+- `valid`: when the value _became_ valid after having been invalid (e.g., custom async rule)
+
+Note the `valid` status. This is useful for displaying a "Valid." message when the field transitions from invalid to valid.  The `useFormValidity` hook implements this only for the custom async validation.
+
 ## Utilities
 
 ### `filterSortAndPaginate`
@@ -716,17 +764,39 @@ Returns an object containing:
     -   `totalItems`: total number of items for the current view config.
     -   `totalPages`: total number of pages for the current view config.
 
-### `isItemValid`
+### `useFormValidity`
 
-Utility is used to determine whether or not the given item's value is valid according to the current fields and form configuration.
+Hook to determine the form validation status.
 
 Parameters:
 
--   `item`: the item, as described in the "data" property of DataForm.
--   `fields`: the fields config, as described in the "fields" property of DataForm.
--   `form`: the form config, as described in the "form" property of DataForm.
+-   `item`: the item being edited.
+-   `fields`: the fields config, as described in the "fields" property of DataViews.
+-   `form`: the form config, as described in the "form" property of DataViews.
+
+Returns an object containing:
+
+-   `isValid`: a boolean indicating if the form is valid.
+-   `validity`: an object containing the errors. Each property is a field ID, containing a description of each error type. See `validity` prop for more info. For example:
 
-Returns a boolean indicating if the item is valid (true) or not (false).
+```js
+{
+	fieldId: {
+		required: {
+			type: 'invalid',
+			message: 'Required.' // Optional
+		},
+		elements: {
+			type: 'invalid',
+			message: 'Value must be one of the elements.' // Optional
+		},
+		custom: {
+			type: 'validating',
+			message: 'Validating...'
+		}
+	}
+}
+```
 
 ## Actions API
 
@@ -875,8 +945,9 @@ Controls visibility of the modal's header when using `RenderModal`.
 
 The header text to show in the modal.
 
--   Type: `string`
+-   Type: `string | (items: Item[]) => string`
 -   Optional
+-   If a function is provided, it receives the selected items as an argument and should return the header text
 
 ### `modalSize`
 
@@ -1367,10 +1438,28 @@ Example:
 		{ value: '2', label: 'Product B' },
 		{ value: '3', label: 'Product C' },
 		{ value: '4', label: 'Product D' },
-	];
+	]
 }
 ```
 
+### `getElements`
+
+Async function that fetches elements only when they are needed, enabling lazy loading. It returns a promise that resolves to an array of elements.
+
+Note this function may be called many times in the lifetime of the DataViews/DataForm component. For example, if elements are used in the `render` method of a field, it'll trigger as many times as records displayed in the page. It's the consumer responsibility to cache the results to avoid unnecessary costly operations (network requests, etc.).
+
+```js
+{
+	getElements: () => {
+		return Promise.resolve( [
+			{ value: '1', label: 'Product A' },
+			{ value: '2', label: 'Product B' },
+			{ value: '3', label: 'Product C' },
+			{ value: '4', label: 'Product D' },
+		] );
+	}
+}
+```
 
 ### `filterBy`
 

package/build/components/dataform/index.js

@@ -40,7 +40,8 @@ function DataForm({
   data,
   form,
   fields,
-  onChange
+  onChange,
+  validity
 }) {
   const normalizedFields = (0, import_element.useMemo)(
     () => (0, import_normalize_fields.default)(fields),
@@ -49,6 +50,14 @@ function DataForm({
   if (!form.fields) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dataform_context.DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_data_form_layout.DataFormLayout, { data, form, onChange }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dataform_context.DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_data_form_layout.DataFormLayout,
+    {
+      data,
+      form,
+      onChange,
+      validity
+    }
+  ) });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../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 '../../utils/normalize-fields';\nimport { DataFormLayout } from '../../dataform-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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BG;AA3BH,qBAAwB;AAMxB,8BAAiC;AACjC,8BAA4B;AAC5B,8BAA+B;AAEhB,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,uBAAmB;AAAA,IACxB,UAAM,wBAAAA,SAAiB,MAAO;AAAA,IAC9B,CAAE,MAAO;AAAA,EACV;AAEA,MAAK,CAAE,KAAK,QAAS;AACpB,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,4CAAiB,QAAS,kBAC1B,sDAAC,0CAAe,MAAc,MAAc,UAAsB,GACnE;AAEF;",
+  "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 '../../utils/normalize-fields';\nimport { DataFormLayout } from '../../dataform-layouts/data-form-layout';\n\nexport default function DataForm< Item >( {\n\tdata,\n\tform,\n\tfields,\n\tonChange,\n\tvalidity,\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\n\t\t\t\tdata={ data }\n\t\t\t\tform={ form }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t</DataFormProvider>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BG;AA5BH,qBAAwB;AAMxB,8BAAiC;AACjC,8BAA4B;AAC5B,8BAA+B;AAEhB,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,uBAAmB;AAAA,IACxB,UAAM,wBAAAA,SAAiB,MAAO;AAAA,IAC9B,CAAE,MAAO;AAAA,EACV;AAEA,MAAK,CAAE,KAAK,QAAS;AACpB,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,4CAAiB,QAAS,kBAC1B;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GACD;AAEF;",
   "names": ["normalizeFields"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../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} );\nDataFormContext.displayName = 'DataFormContext';\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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBE;AArBF,qBAA8B;AAW9B,MAAM,sBAAkB,8BAA6C;AAAA,EACpE,QAAQ,CAAC;AACV,CAAE;AACF,gBAAgB,cAAc;AAEvB,SAAS,iBAA0B;AAAA,EACzC;AAAA,EACA;AACD,GAAsE;AACrE,SACC,4CAAC,gBAAgB,UAAhB,EAAyB,OAAQ,EAAE,OAAO,GACxC,UACH;AAEF;AAEA,IAAO,2BAAQ;",
+  "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} );\nDataFormContext.displayName = 'DataFormContext';\n\nexport function DataFormProvider< Item >( {\n\tfields,\n\tchildren,\n}: React.PropsWithChildren< {\n\tfields: NormalizedField< Item >[];\n} > ) {\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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BE;AAvBF,qBAA8B;AAW9B,MAAM,sBAAkB,8BAA6C;AAAA,EACpE,QAAQ,CAAC;AACV,CAAE;AACF,gBAAgB,cAAc;AAEvB,SAAS,iBAA0B;AAAA,EACzC;AAAA,EACA;AACD,GAEM;AACL,SACC,4CAAC,gBAAgB,UAAhB,EAAyB,OAAQ,EAAE,OAAO,GACxC,UACH;AAEF;AAEA,IAAO,2BAAQ;",
   "names": []
 }

package/build/components/dataviews-bulk-actions/index.js

@@ -133,12 +133,10 @@ function ActionTrigger({
     {
       disabled: isBusy,
       accessibleWhenDisabled: true,
-      label,
-      icon: action.icon,
       size: "compact",
       onClick,
       isBusy,
-      tooltipPosition: "top"
+      children: label
     }
   );
 }
@@ -285,7 +283,7 @@ function FooterContent({
   }, [selection, data, getItemId, selectableItems]);
   const actionsToShow = (0, import_element.useMemo)(
     () => actions.filter((action) => {
-      return action.supportsBulk && action.icon && selectedItems.some(
+      return action.supportsBulk && selectedItems.some(
         (item) => !action.isEligible || action.isEligible(item)
       );
     }),

package/build/components/dataviews-bulk-actions/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-bulk-actions/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCheckboxControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useRef, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { ActionModal } from '../dataviews-item-actions';\nimport type { Action, ActionModal as ActionModalType } from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport type { ActionTriggerProps } from '../dataviews-item-actions';\n\ninterface ActionWithModalProps< Item > {\n\taction: ActionModalType< Item >;\n\titems: Item[];\n\tActionTriggerComponent: (\n\t\tprops: ActionTriggerProps< Item >\n\t) => ReactElement;\n}\n\nfunction ActionWithModal< Item >( {\n\taction,\n\titems,\n\tActionTriggerComponent,\n}: ActionWithModalProps< Item > ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst actionTriggerProps = {\n\t\taction,\n\t\tonClick: () => {\n\t\t\tsetIsModalOpen( true );\n\t\t},\n\t\titems,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<ActionTriggerComponent { ...actionTriggerProps } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ action }\n\t\t\t\t\titems={ items }\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\ninterface BulkSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nexport function BulkSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\tdata,\n\tactions,\n\tgetItemId,\n}: BulkSelectionCheckboxProps< Item > ) {\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn actions.some(\n\t\t\t\t( action ) =>\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ data, actions ] );\n\tconst selectedItems = data.filter(\n\t\t( item ) =>\n\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\tselectableItems.includes( item )\n\t);\n\tconst areAllSelected = selectedItems.length === selectableItems.length;\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\tchecked={ areAllSelected }\n\t\t\tindeterminate={ ! areAllSelected && !! selectedItems.length }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( areAllSelected ) {\n\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t} else {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselectableItems.map( ( item ) => getItemId( item ) )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tareAllSelected ? __( 'Deselect all' ) : __( 'Select all' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\ninterface ActionButtonProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tactionInProgress: string | null;\n\tsetActionInProgress: ( actionId: string | null ) => void;\n}\n\ninterface ToolbarContentProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nfunction ActionTrigger< Item >( {\n\taction,\n\tonClick,\n\tisBusy,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isBusy }\n\t\t\taccessibleWhenDisabled\n\t\t\tlabel={ label }\n\t\t\ticon={ action.icon }\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t\tisBusy={ isBusy }\n\t\t\ttooltipPosition=\"top\"\n\t\t/>\n\t);\n}\n\nconst EMPTY_ARRAY: [] = [];\n\nfunction ActionButton< Item >( {\n\taction,\n\tselectedItems,\n\tactionInProgress,\n\tsetActionInProgress,\n}: ActionButtonProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst selectedEligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter( ( item ) => {\n\t\t\treturn ! action.isEligible || action.isEligible( item );\n\t\t} );\n\t}, [ action, selectedItems ] );\n\tif ( 'RenderModal' in action ) {\n\t\treturn (\n\t\t\t<ActionWithModal\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\titems={ selectedEligibleItems }\n\t\t\t\tActionTriggerComponent={ ActionTrigger }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<ActionTrigger\n\t\t\tkey={ action.id }\n\t\t\taction={ action }\n\t\t\tonClick={ async () => {\n\t\t\t\tsetActionInProgress( action.id );\n\t\t\t\tawait action.callback( selectedItems, {\n\t\t\t\t\tregistry,\n\t\t\t\t} );\n\t\t\t\tsetActionInProgress( null );\n\t\t\t} }\n\t\t\titems={ selectedEligibleItems }\n\t\t\tisBusy={ actionInProgress === action.id }\n\t\t/>\n\t);\n}\n\nfunction renderFooterContent< Item >(\n\tdata: Item[],\n\tactions: Action< Item >[],\n\tgetItemId: ( item: Item ) => string,\n\tselection: string[],\n\tactionsToShow: Action< Item >[],\n\tselectedItems: Item[],\n\tactionInProgress: string | null,\n\tsetActionInProgress: ( actionId: string | null ) => void,\n\tonChangeSelection: SetSelection\n) {\n\tconst message =\n\t\tselectedItems.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d Item selected',\n\t\t\t\t\t\t'%d Items selected',\n\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t),\n\t\t\t\t\tselectedItems.length\n\t\t\t  )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n( '%d Item', '%d Items', data.length ),\n\t\t\t\t\tdata.length\n\t\t\t  );\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tclassName=\"dataviews-bulk-actions-footer__container\"\n\t\t\tspacing={ 3 }\n\t\t>\n\t\t\t<BulkSelectionCheckbox\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\tdata={ data }\n\t\t\t\tactions={ actions }\n\t\t\t\tgetItemId={ getItemId }\n\t\t\t/>\n\t\t\t<span className=\"dataviews-bulk-actions-footer__item-count\">\n\t\t\t\t{ message }\n\t\t\t</span>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataviews-bulk-actions-footer__action-buttons\"\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t{ actionsToShow.map( ( action ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\t\tactionInProgress={ actionInProgress }\n\t\t\t\t\t\t\tsetActionInProgress={ setActionInProgress }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ selectedItems.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\tdisabled={ !! actionInProgress }\n\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( EMPTY_ARRAY );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n\nfunction FooterContent< Item >( {\n\tselection,\n\tactions,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: ToolbarContentProps< Item > ) {\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\tconst footerContentRef = useRef< JSX.Element | null >( null );\n\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst actionsToShow = useMemo(\n\t\t() =>\n\t\t\tactions.filter( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\taction.icon &&\n\t\t\t\t\tselectedItems.some(\n\t\t\t\t\t\t( item ) =>\n\t\t\t\t\t\t\t! action.isEligible || action.isEligible( item )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ),\n\t\t[ actions, selectedItems ]\n\t);\n\tif ( ! actionInProgress ) {\n\t\tif ( footerContentRef.current ) {\n\t\t\tfooterContentRef.current = null;\n\t\t}\n\t\treturn renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t} else if ( ! footerContentRef.current ) {\n\t\tfooterContentRef.current = renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t}\n\treturn footerContentRef.current;\n}\n\nexport function BulkActionsFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tactions = EMPTY_ARRAY,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\treturn (\n\t\t<FooterContent\n\t\t\tselection={ selection }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tdata={ data }\n\t\t\tactions={ actions }\n\t\t\tgetItemId={ getItemId }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDE;AAzCF,wBAIO;AACP,kBAAgC;AAChC,qBAAsD;AACtD,kBAA4B;AAC5B,mBAA2B;AAK3B,+BAA6B;AAC7B,oCAA4B;AAa5B,SAAS,gBAAyB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,CAAE,aAAa,cAAe,QAAI,yBAAU,KAAM;AACxD,QAAM,qBAAqB;AAAA,IAC1B;AAAA,IACA,SAAS,MAAM;AACd,qBAAgB,IAAK;AAAA,IACtB;AAAA,IACA;AAAA,EACD;AACA,SACC,4EACC;AAAA,gDAAC,0BAAyB,GAAG,oBAAqB;AAAA,IAChD,eACD;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAa,MAAM,eAAgB,KAAM;AAAA;AAAA,IAC1C;AAAA,KAEF;AAEF;AAEO,SAAS,0BACf,SACA,MACC;AACD,aAAO,wBAAS,MAAM;AACrB,WAAO,QAAQ,KAAM,CAAE,WAAY;AAClC,aACC,OAAO,iBACL,CAAE,OAAO,cAAc,OAAO,WAAY,IAAK;AAAA,IAEnD,CAAE;AAAA,EACH,GAAG,CAAE,SAAS,IAAK,CAAE;AACtB;AAEO,SAAS,kCACf,SACA,MACC;AACD,aAAO,wBAAS,MAAM;AACrB,WAAO,KAAK,KAAM,CAAE,SAAU;AAC7B,aAAO,QAAQ,KAAM,CAAE,WAAY;AAClC,eACC,OAAO,iBACL,CAAE,OAAO,cAAc,OAAO,WAAY,IAAK;AAAA,MAEnD,CAAE;AAAA,IACH,CAAE;AAAA,EACH,GAAG,CAAE,SAAS,IAAK,CAAE;AACtB;AAUO,SAAS,sBAA+B;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwC;AACvC,QAAM,sBAAkB,wBAAS,MAAM;AACtC,WAAO,KAAK,OAAQ,CAAE,SAAU;AAC/B,aAAO,QAAQ;AAAA,QACd,CAAE,WACD,OAAO,iBACL,CAAE,OAAO,cAAc,OAAO,WAAY,IAAK;AAAA,MACnD;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,MAAM,OAAQ,CAAE;AACrB,QAAM,gBAAgB,KAAK;AAAA,IAC1B,CAAE,SACD,UAAU,SAAU,UAAW,IAAK,CAAE,KACtC,gBAAgB,SAAU,IAAK;AAAA,EACjC;AACA,QAAM,iBAAiB,cAAc,WAAW,gBAAgB;AAChE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,yBAAuB;AAAA,MACvB,SAAU;AAAA,MACV,eAAgB,CAAE,kBAAkB,CAAC,CAAE,cAAc;AAAA,MACrD,UAAW,MAAM;AAChB,YAAK,gBAAiB;AACrB,4BAAmB,CAAC,CAAE;AAAA,QACvB,OAAO;AACN;AAAA,YACC,gBAAgB,IAAK,CAAE,SAAU,UAAW,IAAK,CAAE;AAAA,UACpD;AAAA,QACD;AAAA,MACD;AAAA,MACA,cACC,qBAAiB,gBAAI,cAAe,QAAI,gBAAI,YAAa;AAAA;AAAA,EAE3D;AAEF;AAiBA,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,QACL,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,OAAO,MAAO,KAAM;AACvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,wBAAsB;AAAA,MACtB;AAAA,MACA,MAAO,OAAO;AAAA,MACd,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,iBAAgB;AAAA;AAAA,EACjB;AAEF;AAEA,MAAM,cAAkB,CAAC;AAEzB,SAAS,aAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAC9B,QAAM,eAAW,yBAAY;AAC7B,QAAM,4BAAwB,wBAAS,MAAM;AAC5C,WAAO,cAAc,OAAQ,CAAE,SAAU;AACxC,aAAO,CAAE,OAAO,cAAc,OAAO,WAAY,IAAK;AAAA,IACvD,CAAE;AAAA,EACH,GAAG,CAAE,QAAQ,aAAc,CAAE;AAC7B,MAAK,iBAAiB,QAAS;AAC9B,WACC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAQ;AAAA,QACR,wBAAyB;AAAA;AAAA,MAHnB,OAAO;AAAA,IAId;AAAA,EAEF;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MAEA;AAAA,MACA,SAAU,YAAY;AACrB,4BAAqB,OAAO,EAAG;AAC/B,cAAM,OAAO,SAAU,eAAe;AAAA,UACrC;AAAA,QACD,CAAE;AACF,4BAAqB,IAAK;AAAA,MAC3B;AAAA,MACA,OAAQ;AAAA,MACR,QAAS,qBAAqB,OAAO;AAAA;AAAA,IAV/B,OAAO;AAAA,EAWd;AAEF;AAEA,SAAS,oBACR,MACA,SACA,WACA,WACA,eACA,eACA,kBACA,qBACA,mBACC;AACD,QAAM,UACL,cAAc,SAAS,QACpB;AAAA;AAAA,QAEA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IACf;AAAA,IACA,cAAc;AAAA,EACd,QACA;AAAA;AAAA,QAEA,gBAAI,WAAW,YAAY,KAAK,MAAO;AAAA,IACvC,KAAK;AAAA,EACL;AACJ,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,UAAW;AAAA,MACX,WAAU;AAAA,MACV,SAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD;AAAA,QACA,4CAAC,UAAK,WAAU,6CACb,mBACH;AAAA,QACA;AAAA,UAAC,kBAAAA;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,UAAW;AAAA,YACX,SAAU;AAAA,YAER;AAAA,4BAAc,IAAK,CAAE,WAAY;AAClC,uBACC;AAAA,kBAAC;AAAA;AAAA,oBAEA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA;AAAA,kBAJM,OAAO;AAAA,gBAKd;AAAA,cAEF,CAAE;AAAA,cACA,cAAc,SAAS,KACxB;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAO;AAAA,kBACP,aAAW;AAAA,kBACX,iBAAgB;AAAA,kBAChB,MAAK;AAAA,kBACL,WAAQ,gBAAI,QAAS;AAAA,kBACrB,UAAW,CAAC,CAAE;AAAA,kBACd,wBAAyB;AAAA,kBACzB,SAAU,MAAM;AACf,sCAAmB,WAAY;AAAA,kBAChC;AAAA;AAAA,cACD;AAAA;AAAA;AAAA,QAEF;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAiC;AAChC,QAAM,CAAE,kBAAkB,mBAAoB,QAAI;AAAA,IACjD;AAAA,EACD;AACA,QAAM,uBAAmB,uBAA8B,IAAK;AAE5D,QAAM,kBAAc;AAAA,IACnB,MAAM,QAAQ,OAAQ,CAAE,WAAY,OAAO,YAAa;AAAA,IACxD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,sBAAkB,wBAAS,MAAM;AACtC,WAAO,KAAK,OAAQ,CAAE,SAAU;AAC/B,aAAO,YAAY;AAAA,QAClB,CAAE,WAAY,CAAE,OAAO,cAAc,OAAO,WAAY,IAAK;AAAA,MAC9D;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,MAAM,WAAY,CAAE;AAEzB,QAAM,oBAAgB,wBAAS,MAAM;AACpC,WAAO,KAAK;AAAA,MACX,CAAE,SACD,UAAU,SAAU,UAAW,IAAK,CAAE,KACtC,gBAAgB,SAAU,IAAK;AAAA,IACjC;AAAA,EACD,GAAG,CAAE,WAAW,MAAM,WAAW,eAAgB,CAAE;AAEnD,QAAM,oBAAgB;AAAA,IACrB,MACC,QAAQ,OAAQ,CAAE,WAAY;AAC7B,aACC,OAAO,gBACP,OAAO,QACP,cAAc;AAAA,QACb,CAAE,SACD,CAAE,OAAO,cAAc,OAAO,WAAY,IAAK;AAAA,MACjD;AAAA,IAEF,CAAE;AAAA,IACH,CAAE,SAAS,aAAc;AAAA,EAC1B;AACA,MAAK,CAAE,kBAAmB;AACzB,QAAK,iBAAiB,SAAU;AAC/B,uBAAiB,UAAU;AAAA,IAC5B;AACA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,WAAY,CAAE,iBAAiB,SAAU;AACxC,qBAAiB,UAAU;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACA,SAAO,iBAAiB;AACzB;AAEO,SAAS,oBAAoB;AACnC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACD,QAAI,2BAAY,yBAAAC,OAAiB;AACjC,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCheckboxControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useRef, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { ActionModal } from '../dataviews-item-actions';\nimport type { Action, ActionModal as ActionModalType } from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport type { ActionTriggerProps } from '../dataviews-item-actions';\n\ninterface ActionWithModalProps< Item > {\n\taction: ActionModalType< Item >;\n\titems: Item[];\n\tActionTriggerComponent: (\n\t\tprops: ActionTriggerProps< Item >\n\t) => ReactElement;\n}\n\nfunction ActionWithModal< Item >( {\n\taction,\n\titems,\n\tActionTriggerComponent,\n}: ActionWithModalProps< Item > ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst actionTriggerProps = {\n\t\taction,\n\t\tonClick: () => {\n\t\t\tsetIsModalOpen( true );\n\t\t},\n\t\titems,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<ActionTriggerComponent { ...actionTriggerProps } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ action }\n\t\t\t\t\titems={ items }\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\ninterface BulkSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nexport function BulkSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\tdata,\n\tactions,\n\tgetItemId,\n}: BulkSelectionCheckboxProps< Item > ) {\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn actions.some(\n\t\t\t\t( action ) =>\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ data, actions ] );\n\tconst selectedItems = data.filter(\n\t\t( item ) =>\n\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\tselectableItems.includes( item )\n\t);\n\tconst areAllSelected = selectedItems.length === selectableItems.length;\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\tchecked={ areAllSelected }\n\t\t\tindeterminate={ ! areAllSelected && !! selectedItems.length }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( areAllSelected ) {\n\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t} else {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselectableItems.map( ( item ) => getItemId( item ) )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tareAllSelected ? __( 'Deselect all' ) : __( 'Select all' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\ninterface ActionButtonProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tactionInProgress: string | null;\n\tsetActionInProgress: ( actionId: string | null ) => void;\n}\n\ninterface ToolbarContentProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nfunction ActionTrigger< Item >( {\n\taction,\n\tonClick,\n\tisBusy,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isBusy }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t\tisBusy={ isBusy }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nconst EMPTY_ARRAY: [] = [];\n\nfunction ActionButton< Item >( {\n\taction,\n\tselectedItems,\n\tactionInProgress,\n\tsetActionInProgress,\n}: ActionButtonProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst selectedEligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter( ( item ) => {\n\t\t\treturn ! action.isEligible || action.isEligible( item );\n\t\t} );\n\t}, [ action, selectedItems ] );\n\tif ( 'RenderModal' in action ) {\n\t\treturn (\n\t\t\t<ActionWithModal\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\titems={ selectedEligibleItems }\n\t\t\t\tActionTriggerComponent={ ActionTrigger }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<ActionTrigger\n\t\t\tkey={ action.id }\n\t\t\taction={ action }\n\t\t\tonClick={ async () => {\n\t\t\t\tsetActionInProgress( action.id );\n\t\t\t\tawait action.callback( selectedItems, {\n\t\t\t\t\tregistry,\n\t\t\t\t} );\n\t\t\t\tsetActionInProgress( null );\n\t\t\t} }\n\t\t\titems={ selectedEligibleItems }\n\t\t\tisBusy={ actionInProgress === action.id }\n\t\t/>\n\t);\n}\n\nfunction renderFooterContent< Item >(\n\tdata: Item[],\n\tactions: Action< Item >[],\n\tgetItemId: ( item: Item ) => string,\n\tselection: string[],\n\tactionsToShow: Action< Item >[],\n\tselectedItems: Item[],\n\tactionInProgress: string | null,\n\tsetActionInProgress: ( actionId: string | null ) => void,\n\tonChangeSelection: SetSelection\n) {\n\tconst message =\n\t\tselectedItems.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d Item selected',\n\t\t\t\t\t\t'%d Items selected',\n\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t),\n\t\t\t\t\tselectedItems.length\n\t\t\t  )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n( '%d Item', '%d Items', data.length ),\n\t\t\t\t\tdata.length\n\t\t\t  );\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tclassName=\"dataviews-bulk-actions-footer__container\"\n\t\t\tspacing={ 3 }\n\t\t>\n\t\t\t<BulkSelectionCheckbox\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\tdata={ data }\n\t\t\t\tactions={ actions }\n\t\t\t\tgetItemId={ getItemId }\n\t\t\t/>\n\t\t\t<span className=\"dataviews-bulk-actions-footer__item-count\">\n\t\t\t\t{ message }\n\t\t\t</span>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataviews-bulk-actions-footer__action-buttons\"\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t{ actionsToShow.map( ( action ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\t\tactionInProgress={ actionInProgress }\n\t\t\t\t\t\t\tsetActionInProgress={ setActionInProgress }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ selectedItems.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\tdisabled={ !! actionInProgress }\n\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( EMPTY_ARRAY );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n\nfunction FooterContent< Item >( {\n\tselection,\n\tactions,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: ToolbarContentProps< Item > ) {\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\tconst footerContentRef = useRef< JSX.Element | null >( null );\n\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst actionsToShow = useMemo(\n\t\t() =>\n\t\t\tactions.filter( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\tselectedItems.some(\n\t\t\t\t\t\t( item ) =>\n\t\t\t\t\t\t\t! action.isEligible || action.isEligible( item )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ),\n\t\t[ actions, selectedItems ]\n\t);\n\tif ( ! actionInProgress ) {\n\t\tif ( footerContentRef.current ) {\n\t\t\tfooterContentRef.current = null;\n\t\t}\n\t\treturn renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t} else if ( ! footerContentRef.current ) {\n\t\tfooterContentRef.current = renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t}\n\treturn footerContentRef.current;\n}\n\nexport function BulkActionsFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tactions = EMPTY_ARRAY,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\treturn (\n\t\t<FooterContent\n\t\t\tselection={ selection }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tdata={ data }\n\t\t\tactions={ actions }\n\t\t\tgetItemId={ getItemId }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["HStack", "DataViewsContext"]
 }

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

@@ -40,6 +40,7 @@ var import_icons = require("@wordpress/icons");
 var import_search_widget = __toESM(require("./search-widget"));
 var import_input_widget = __toESM(require("./input-widget"));
 var import_constants = require("../../constants");
+var import_use_elements = __toESM(require("../../hooks/use-elements"));
 const ENTER = "Enter";
 const SPACE = " ";
 const FilterText = ({
@@ -400,8 +401,12 @@ function Filter({
     (f) => f.field === filter.field
   );
   let activeElements = [];
-  if (filter.elements.length > 0) {
-    activeElements = filter.elements.filter((element) => {
+  const { elements } = (0, import_use_elements.default)({
+    elements: filter.elements,
+    getElements: filter.getElements
+  });
+  if (elements.length > 0) {
+    activeElements = elements.filter((element) => {
       if (filter.singleSelection) {
         return element.value === filterInView?.value;
       }
@@ -513,13 +518,13 @@ function Filter({
       renderContent: () => {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 0, justify: "flex-start", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OperatorSelector, { ...commonProps }),
-          commonProps.filter.elements.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          commonProps.filter.hasElements ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_search_widget.default,
             {
               ...commonProps,
               filter: {
                 ...commonProps.filter,
-                elements: commonProps.filter.elements
+                elements
               }
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_widget.default, { ...commonProps, fields })

package/build/components/dataviews-filters/filter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-filters/filter.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n\tSelectControl,\n\tTooltip,\n\tIcon,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, createInterpolateElement } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\n\nconst ENTER = 'Enter';\nconst SPACE = ' ';\n\n/**\n * Internal dependencies\n */\nimport SearchWidget from './search-widget';\nimport InputWidget from './input-widget';\nimport {\n\tOPERATORS,\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n\tOPERATOR_IS_ALL,\n\tOPERATOR_IS_NOT_ALL,\n\tOPERATOR_LESS_THAN,\n\tOPERATOR_GREATER_THAN,\n\tOPERATOR_LESS_THAN_OR_EQUAL,\n\tOPERATOR_GREATER_THAN_OR_EQUAL,\n\tOPERATOR_CONTAINS,\n\tOPERATOR_NOT_CONTAINS,\n\tOPERATOR_STARTS_WITH,\n\tOPERATOR_BEFORE,\n\tOPERATOR_AFTER,\n\tOPERATOR_BEFORE_INC,\n\tOPERATOR_AFTER_INC,\n\tOPERATOR_BETWEEN,\n\tOPERATOR_ON,\n\tOPERATOR_NOT_ON,\n\tOPERATOR_IN_THE_PAST,\n\tOPERATOR_OVER,\n} from '../../constants';\nimport type {\n\tFilter,\n\tNormalizedFilter,\n\tOperator,\n\tOption,\n\tView,\n\tNormalizedField,\n} from '../../types';\n\ninterface FilterTextProps {\n\tactiveElements: Option[];\n\tfilterInView?: Filter;\n\tfilter: NormalizedFilter;\n}\n\ninterface OperatorSelectorProps {\n\tfilter: NormalizedFilter;\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n}\n\ninterface FilterProps extends OperatorSelectorProps {\n\taddFilterRef: RefObject< HTMLButtonElement >;\n\topenedFilter: string | null;\n\tfields: NormalizedField< any >[];\n}\n\nconst FilterText = ( {\n\tactiveElements,\n\tfilterInView,\n\tfilter,\n}: FilterTextProps ) => {\n\tif ( activeElements === undefined || activeElements.length === 0 ) {\n\t\treturn filter.name;\n\t}\n\n\tconst filterTextWrappers = {\n\t\tName: <span className=\"dataviews-filters__summary-filter-text-name\" />,\n\t\tValue: (\n\t\t\t<span className=\"dataviews-filters__summary-filter-text-value\" />\n\t\t),\n\t};\n\n\tif ( filterInView?.operator === OPERATOR_IS_ANY ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is any: Admin, Editor\". */\n\t\t\t\t__( '<Name>%1$s is any: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements.map( ( element ) => element.label ).join( ', ' )\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS_NONE ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is none: Admin, Editor\". */\n\t\t\t\t__( '<Name>%1$s is none: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements.map( ( element ) => element.label ).join( ', ' )\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS_ALL ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is all: Admin, Editor\". */\n\t\t\t\t__( '<Name>%1$s is all: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements.map( ( element ) => element.label ).join( ', ' )\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS_NOT_ALL ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is not all: Admin, Editor\". */\n\t\t\t\t__( '<Name>%1$s is not all: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements.map( ( element ) => element.label ).join( ', ' )\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is: Admin\". */\n\t\t\t\t__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS_NOT ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is not: Admin\". */\n\t\t\t\t__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_LESS_THAN ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Price is less than: 10\". */\n\t\t\t\t__( '<Name>%1$s is less than: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_GREATER_THAN ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Price is greater than: 10\". */\n\t\t\t\t__( '<Name>%1$s is greater than: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_LESS_THAN_OR_EQUAL ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Price is less than or equal to: 10\". */\n\t\t\t\t__(\n\t\t\t\t\t'<Name>%1$s is less than or equal to: </Name><Value>%2$s</Value>'\n\t\t\t\t),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_GREATER_THAN_OR_EQUAL ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Price is greater than or equal to: 10\". */\n\t\t\t\t__(\n\t\t\t\t\t'<Name>%1$s is greater than or equal to: </Name><Value>%2$s</Value>'\n\t\t\t\t),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_CONTAINS ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Title contains: Mars\". */\n\t\t\t\t__( '<Name>%1$s contains: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_NOT_CONTAINS ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Description doesn't contain: photo\". */\n\t\t\t\t__( \"<Name>%1$s doesn't contain: </Name><Value>%2$s</Value>\" ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_STARTS_WITH ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Title starts with: Mar\". */\n\t\t\t\t__( '<Name>%1$s starts with: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_BEFORE ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is before: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is before: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_AFTER ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is after: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is after: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_BEFORE_INC ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is on or before: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is on or before: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_AFTER_INC ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is on or after: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is on or after: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_BETWEEN ) {\n\t\tconst { label } = activeElements[ 0 ];\n\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Min value. 3: Max value. e.g.: \"Item count between (inc): 10 and 180\". */\n\t\t\t\t__(\n\t\t\t\t\t'<Name>%1$s between (inc): </Name><Value>%2$s and %3$s</Value>'\n\t\t\t\t),\n\t\t\t\tfilter.name,\n\t\t\t\tlabel[ 0 ],\n\t\t\t\tlabel[ 1 ]\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_ON ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_NOT_ON ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is not: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IN_THE_PAST ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is in the past: 1 days\". */\n\t\t\t\t__( '<Name>%1$s is in the past: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\t`${ activeElements[ 0 ].value.value } ${ activeElements[ 0 ].value.unit }`\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_OVER ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is over: 1 days ago\". */\n\t\t\t\t__( '<Name>%1$s is over: </Name><Value>%2$s</Value> ago' ),\n\t\t\t\tfilter.name,\n\t\t\t\t`${ activeElements[ 0 ].value.value } ${ activeElements[ 0 ].value.unit }`\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\treturn sprintf(\n\t\t/* translators: 1: Filter name e.g.: \"Unknown status for Author\". */\n\t\t__( 'Unknown status for %1$s' ),\n\t\tfilter.name\n\t);\n};\n\nfunction OperatorSelector( {\n\tfilter,\n\tview,\n\tonChangeView,\n}: OperatorSelectorProps ) {\n\tconst operatorOptions = filter.operators?.map( ( operator ) => ( {\n\t\tvalue: operator,\n\t\tlabel: OPERATORS[ operator ]?.label,\n\t} ) );\n\tconst currentFilter = view.filters?.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst value = currentFilter?.operator || filter.operators[ 0 ];\n\treturn (\n\t\toperatorOptions.length > 1 && (\n\t\t\t<HStack\n\t\t\t\tspacing={ 2 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tclassName=\"dataviews-filters__summary-operators-container\"\n\t\t\t>\n\t\t\t\t<FlexItem className=\"dataviews-filters__summary-operators-filter-name\">\n\t\t\t\t\t{ filter.name }\n\t\t\t\t</FlexItem>\n\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-filters__summary-operators-filter-select\"\n\t\t\t\t\tlabel={ __( 'Conditions' ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\toptions={ operatorOptions }\n\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\tconst operator = newValue as Operator;\n\t\t\t\t\t\tconst currentOperator = currentFilter?.operator;\n\t\t\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ).map(\n\t\t\t\t\t\t\t\t\t\t( _filter ) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t_filter.field === filter.field\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t// Reset the value only when switching between operators that have different value types.\n\t\t\t\t\t\t\t\t\t\t\t\tconst OPERATORS_SHOULD_RESET_VALUE =\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\tOPERATOR_BETWEEN,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_IN_THE_PAST,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_OVER,\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\tconst shouldResetValue =\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentOperator &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t( OPERATORS_SHOULD_RESET_VALUE.includes(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentOperator\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\tOPERATORS_SHOULD_RESET_VALUE.includes(\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\n\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: shouldResetValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: _filter.value,\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};\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn _filter;\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  ]\n\t\t\t\t\t\t\t: [\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\toperator,\n\t\t\t\t\t\t\t\t\t\tvalue: undefined,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t  ];\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: newFilters,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t)\n\t);\n}\n\nexport default function Filter( {\n\taddFilterRef,\n\topenedFilter,\n\tfields,\n\t...commonProps\n}: FilterProps ) {\n\tconst toggleRef = useRef< HTMLDivElement >( null );\n\tconst { filter, view, onChangeView } = commonProps;\n\tconst filterInView = view.filters?.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\n\tlet activeElements: Option[] = [];\n\n\tif ( filter.elements.length > 0 ) {\n\t\tactiveElements = filter.elements.filter( ( element ) => {\n\t\t\tif ( filter.singleSelection ) {\n\t\t\t\treturn element.value === filterInView?.value;\n\t\t\t}\n\t\t\treturn filterInView?.value?.includes( element.value );\n\t\t} );\n\t} else if ( filterInView?.value !== undefined ) {\n\t\tactiveElements = [\n\t\t\t{\n\t\t\t\tvalue: filterInView.value,\n\t\t\t\tlabel: filterInView.value,\n\t\t\t},\n\t\t];\n\t}\n\n\tconst isPrimary = filter.isPrimary;\n\tconst isLocked = filterInView?.isLocked;\n\tconst hasValues = ! isLocked && filterInView?.value !== undefined;\n\tconst canResetOrRemove = ! isLocked && ( ! isPrimary || hasValues );\n\treturn (\n\t\t<Dropdown\n\t\t\tdefaultOpen={ openedFilter === filter.field }\n\t\t\tcontentClassName=\"dataviews-filters__summary-popover\"\n\t\t\tpopoverProps={ { placement: 'bottom-start', role: 'dialog' } }\n\t\t\tonClose={ () => {\n\t\t\t\ttoggleRef.current?.focus();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<div className=\"dataviews-filters__summary-chip-container\">\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\ttext={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: Filter name. */\n\t\t\t\t\t\t\t__( 'Filter by: %1$s' ),\n\t\t\t\t\t\t\tfilter.name.toLowerCase()\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'dataviews-filters__summary-chip',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'has-reset': canResetOrRemove,\n\t\t\t\t\t\t\t\t\t'has-values': hasValues,\n\t\t\t\t\t\t\t\t\t'is-not-clickable': isLocked,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={ isLocked ? -1 : 0 }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif ( ! isLocked ) {\n\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t! isLocked &&\n\t\t\t\t\t\t\t\t\t[ ENTER, SPACE ].includes( event.key )\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-disabled={ isLocked }\n\t\t\t\t\t\t\taria-pressed={ isOpen }\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\tref={ toggleRef }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FilterText\n\t\t\t\t\t\t\t\tactiveElements={ activeElements }\n\t\t\t\t\t\t\t\tfilterInView={ filterInView }\n\t\t\t\t\t\t\t\tfilter={ filter }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t\t{ canResetOrRemove && (\n\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\ttext={ isPrimary ? __( 'Reset' ) : __( 'Remove' ) }\n\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-filters__summary-chip-remove',\n\t\t\t\t\t\t\t\t\t{ 'has-values': hasValues }\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\tpage: 1,\n\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( _filter ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t_filter.field !== filter.field\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// If the filter is not primary and can be removed, it will be added\n\t\t\t\t\t\t\t\t\t// back to the available filters from `Add filter` component.\n\t\t\t\t\t\t\t\t\tif ( ! isPrimary ) {\n\t\t\t\t\t\t\t\t\t\taddFilterRef.current?.focus();\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t// If is primary, focus the toggle button.\n\t\t\t\t\t\t\t\t\t\ttoggleRef.current?.focus();\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<Icon icon={ closeSmall } />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\trenderContent={ () => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 0 } justify=\"flex-start\">\n\t\t\t\t\t\t<OperatorSelector { ...commonProps } />\n\t\t\t\t\t\t{ commonProps.filter.elements.length > 0 ? (\n\t\t\t\t\t\t\t<SearchWidget\n\t\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\t\tfilter={ {\n\t\t\t\t\t\t\t\t\t...commonProps.filter,\n\t\t\t\t\t\t\t\t\telements: commonProps.filter.elements,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<InputWidget { ...commonProps } fields={ fields } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["HStack", "clsx", "VStack", "SearchWidget", "InputWidget"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n\tSelectControl,\n\tTooltip,\n\tIcon,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, createInterpolateElement } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\n\nconst ENTER = 'Enter';\nconst SPACE = ' ';\n\n/**\n * Internal dependencies\n */\nimport SearchWidget from './search-widget';\nimport InputWidget from './input-widget';\nimport {\n\tOPERATORS,\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n\tOPERATOR_IS_ALL,\n\tOPERATOR_IS_NOT_ALL,\n\tOPERATOR_LESS_THAN,\n\tOPERATOR_GREATER_THAN,\n\tOPERATOR_LESS_THAN_OR_EQUAL,\n\tOPERATOR_GREATER_THAN_OR_EQUAL,\n\tOPERATOR_CONTAINS,\n\tOPERATOR_NOT_CONTAINS,\n\tOPERATOR_STARTS_WITH,\n\tOPERATOR_BEFORE,\n\tOPERATOR_AFTER,\n\tOPERATOR_BEFORE_INC,\n\tOPERATOR_AFTER_INC,\n\tOPERATOR_BETWEEN,\n\tOPERATOR_ON,\n\tOPERATOR_NOT_ON,\n\tOPERATOR_IN_THE_PAST,\n\tOPERATOR_OVER,\n} from '../../constants';\nimport type {\n\tFilter,\n\tNormalizedField,\n\tNormalizedFilter,\n\tOperator,\n\tOption,\n\tView,\n} from '../../types';\nimport useElements from '../../hooks/use-elements';\n\ninterface FilterTextProps {\n\tactiveElements: Option[];\n\tfilterInView?: Filter;\n\tfilter: NormalizedFilter;\n}\n\ninterface OperatorSelectorProps {\n\tfilter: NormalizedFilter;\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n}\n\ninterface FilterProps extends OperatorSelectorProps {\n\taddFilterRef: RefObject< HTMLButtonElement >;\n\topenedFilter: string | null;\n\tfields: NormalizedField< any >[];\n}\n\nconst FilterText = ( {\n\tactiveElements,\n\tfilterInView,\n\tfilter,\n}: FilterTextProps ) => {\n\tif ( activeElements === undefined || activeElements.length === 0 ) {\n\t\treturn filter.name;\n\t}\n\n\tconst filterTextWrappers = {\n\t\tName: <span className=\"dataviews-filters__summary-filter-text-name\" />,\n\t\tValue: (\n\t\t\t<span className=\"dataviews-filters__summary-filter-text-value\" />\n\t\t),\n\t};\n\n\tif ( filterInView?.operator === OPERATOR_IS_ANY ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is any: Admin, Editor\". */\n\t\t\t\t__( '<Name>%1$s is any: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements.map( ( element ) => element.label ).join( ', ' )\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS_NONE ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is none: Admin, Editor\". */\n\t\t\t\t__( '<Name>%1$s is none: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements.map( ( element ) => element.label ).join( ', ' )\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS_ALL ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is all: Admin, Editor\". */\n\t\t\t\t__( '<Name>%1$s is all: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements.map( ( element ) => element.label ).join( ', ' )\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS_NOT_ALL ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is not all: Admin, Editor\". */\n\t\t\t\t__( '<Name>%1$s is not all: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements.map( ( element ) => element.label ).join( ', ' )\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is: Admin\". */\n\t\t\t\t__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IS_NOT ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Author is not: Admin\". */\n\t\t\t\t__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_LESS_THAN ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Price is less than: 10\". */\n\t\t\t\t__( '<Name>%1$s is less than: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_GREATER_THAN ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Price is greater than: 10\". */\n\t\t\t\t__( '<Name>%1$s is greater than: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_LESS_THAN_OR_EQUAL ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Price is less than or equal to: 10\". */\n\t\t\t\t__(\n\t\t\t\t\t'<Name>%1$s is less than or equal to: </Name><Value>%2$s</Value>'\n\t\t\t\t),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_GREATER_THAN_OR_EQUAL ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Price is greater than or equal to: 10\". */\n\t\t\t\t__(\n\t\t\t\t\t'<Name>%1$s is greater than or equal to: </Name><Value>%2$s</Value>'\n\t\t\t\t),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_CONTAINS ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Title contains: Mars\". */\n\t\t\t\t__( '<Name>%1$s contains: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_NOT_CONTAINS ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Description doesn't contain: photo\". */\n\t\t\t\t__( \"<Name>%1$s doesn't contain: </Name><Value>%2$s</Value>\" ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_STARTS_WITH ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Title starts with: Mar\". */\n\t\t\t\t__( '<Name>%1$s starts with: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_BEFORE ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is before: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is before: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_AFTER ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is after: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is after: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_BEFORE_INC ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is on or before: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is on or before: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_AFTER_INC ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is on or after: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is on or after: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_BETWEEN ) {\n\t\tconst { label } = activeElements[ 0 ];\n\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Min value. 3: Max value. e.g.: \"Item count between (inc): 10 and 180\". */\n\t\t\t\t__(\n\t\t\t\t\t'<Name>%1$s between (inc): </Name><Value>%2$s and %3$s</Value>'\n\t\t\t\t),\n\t\t\t\tfilter.name,\n\t\t\t\tlabel[ 0 ],\n\t\t\t\tlabel[ 1 ]\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_ON ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_NOT_ON ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is not: 2024-01-01\". */\n\t\t\t\t__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\tactiveElements[ 0 ].label\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_IN_THE_PAST ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is in the past: 1 days\". */\n\t\t\t\t__( '<Name>%1$s is in the past: </Name><Value>%2$s</Value>' ),\n\t\t\t\tfilter.name,\n\t\t\t\t`${ activeElements[ 0 ].value.value } ${ activeElements[ 0 ].value.unit }`\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\n\tif ( filterInView?.operator === OPERATOR_OVER ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: 1: Filter name. 2: Filter value. e.g.: \"Date is over: 1 days ago\". */\n\t\t\t\t__( '<Name>%1$s is over: </Name><Value>%2$s</Value> ago' ),\n\t\t\t\tfilter.name,\n\t\t\t\t`${ activeElements[ 0 ].value.value } ${ activeElements[ 0 ].value.unit }`\n\t\t\t),\n\t\t\tfilterTextWrappers\n\t\t);\n\t}\n\treturn sprintf(\n\t\t/* translators: 1: Filter name e.g.: \"Unknown status for Author\". */\n\t\t__( 'Unknown status for %1$s' ),\n\t\tfilter.name\n\t);\n};\n\nfunction OperatorSelector( {\n\tfilter,\n\tview,\n\tonChangeView,\n}: OperatorSelectorProps ) {\n\tconst operatorOptions = filter.operators?.map( ( operator ) => ( {\n\t\tvalue: operator,\n\t\tlabel: OPERATORS[ operator ]?.label,\n\t} ) );\n\tconst currentFilter = view.filters?.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst value = currentFilter?.operator || filter.operators[ 0 ];\n\treturn (\n\t\toperatorOptions.length > 1 && (\n\t\t\t<HStack\n\t\t\t\tspacing={ 2 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tclassName=\"dataviews-filters__summary-operators-container\"\n\t\t\t>\n\t\t\t\t<FlexItem className=\"dataviews-filters__summary-operators-filter-name\">\n\t\t\t\t\t{ filter.name }\n\t\t\t\t</FlexItem>\n\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-filters__summary-operators-filter-select\"\n\t\t\t\t\tlabel={ __( 'Conditions' ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\toptions={ operatorOptions }\n\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\tconst operator = newValue as Operator;\n\t\t\t\t\t\tconst currentOperator = currentFilter?.operator;\n\t\t\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ).map(\n\t\t\t\t\t\t\t\t\t\t( _filter ) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t_filter.field === filter.field\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t// Reset the value only when switching between operators that have different value types.\n\t\t\t\t\t\t\t\t\t\t\t\tconst OPERATORS_SHOULD_RESET_VALUE =\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\tOPERATOR_BETWEEN,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_IN_THE_PAST,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_OVER,\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\tconst shouldResetValue =\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentOperator &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t( OPERATORS_SHOULD_RESET_VALUE.includes(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentOperator\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\tOPERATORS_SHOULD_RESET_VALUE.includes(\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\n\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: shouldResetValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: _filter.value,\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};\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn _filter;\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  ]\n\t\t\t\t\t\t\t: [\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\toperator,\n\t\t\t\t\t\t\t\t\t\tvalue: undefined,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t  ];\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: newFilters,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t)\n\t);\n}\n\nexport default function Filter( {\n\taddFilterRef,\n\topenedFilter,\n\tfields,\n\t...commonProps\n}: FilterProps ) {\n\tconst toggleRef = useRef< HTMLDivElement >( null );\n\tconst { filter, view, onChangeView } = commonProps;\n\tconst filterInView = view.filters?.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\n\tlet activeElements: Option[] = [];\n\n\tconst { elements } = useElements( {\n\t\telements: filter.elements,\n\t\tgetElements: filter.getElements,\n\t} );\n\n\tif ( elements.length > 0 ) {\n\t\tactiveElements = elements.filter( ( element ) => {\n\t\t\tif ( filter.singleSelection ) {\n\t\t\t\treturn element.value === filterInView?.value;\n\t\t\t}\n\t\t\treturn filterInView?.value?.includes( element.value );\n\t\t} );\n\t} else if ( filterInView?.value !== undefined ) {\n\t\tactiveElements = [\n\t\t\t{\n\t\t\t\tvalue: filterInView.value,\n\t\t\t\tlabel: filterInView.value,\n\t\t\t},\n\t\t];\n\t}\n\n\tconst isPrimary = filter.isPrimary;\n\tconst isLocked = filterInView?.isLocked;\n\tconst hasValues = ! isLocked && filterInView?.value !== undefined;\n\tconst canResetOrRemove = ! isLocked && ( ! isPrimary || hasValues );\n\treturn (\n\t\t<Dropdown\n\t\t\tdefaultOpen={ openedFilter === filter.field }\n\t\t\tcontentClassName=\"dataviews-filters__summary-popover\"\n\t\t\tpopoverProps={ { placement: 'bottom-start', role: 'dialog' } }\n\t\t\tonClose={ () => {\n\t\t\t\ttoggleRef.current?.focus();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<div className=\"dataviews-filters__summary-chip-container\">\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\ttext={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: Filter name. */\n\t\t\t\t\t\t\t__( 'Filter by: %1$s' ),\n\t\t\t\t\t\t\tfilter.name.toLowerCase()\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'dataviews-filters__summary-chip',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'has-reset': canResetOrRemove,\n\t\t\t\t\t\t\t\t\t'has-values': hasValues,\n\t\t\t\t\t\t\t\t\t'is-not-clickable': isLocked,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={ isLocked ? -1 : 0 }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif ( ! isLocked ) {\n\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t! isLocked &&\n\t\t\t\t\t\t\t\t\t[ ENTER, SPACE ].includes( event.key )\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-disabled={ isLocked }\n\t\t\t\t\t\t\taria-pressed={ isOpen }\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\tref={ toggleRef }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FilterText\n\t\t\t\t\t\t\t\tactiveElements={ activeElements }\n\t\t\t\t\t\t\t\tfilterInView={ filterInView }\n\t\t\t\t\t\t\t\tfilter={ filter }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t\t{ canResetOrRemove && (\n\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\ttext={ isPrimary ? __( 'Reset' ) : __( 'Remove' ) }\n\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-filters__summary-chip-remove',\n\t\t\t\t\t\t\t\t\t{ 'has-values': hasValues }\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\tpage: 1,\n\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( _filter ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t_filter.field !== filter.field\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// If the filter is not primary and can be removed, it will be added\n\t\t\t\t\t\t\t\t\t// back to the available filters from `Add filter` component.\n\t\t\t\t\t\t\t\t\tif ( ! isPrimary ) {\n\t\t\t\t\t\t\t\t\t\taddFilterRef.current?.focus();\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t// If is primary, focus the toggle button.\n\t\t\t\t\t\t\t\t\t\ttoggleRef.current?.focus();\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<Icon icon={ closeSmall } />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\trenderContent={ () => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 0 } justify=\"flex-start\">\n\t\t\t\t\t\t<OperatorSelector { ...commonProps } />\n\t\t\t\t\t\t{ commonProps.filter.hasElements ? (\n\t\t\t\t\t\t\t<SearchWidget\n\t\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\t\tfilter={ {\n\t\t\t\t\t\t\t\t\t...commonProps.filter,\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<InputWidget { ...commonProps } fields={ fields } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["HStack", "useElements", "clsx", "VStack", "SearchWidget", "InputWidget"]
 }

package/build/components/dataviews-filters/search-widget.js

@@ -41,6 +41,7 @@ var import_element = require("@wordpress/element");
 var import_components = require("@wordpress/components");
 var import_icons = require("@wordpress/icons");
 var import_utils = require("./utils");
+var import_use_elements = __toESM(require("../../hooks/use-elements"));
 function normalizeSearchInput(input = "") {
   return (0, import_remove_accents.default)(input.trim().toLowerCase());
 }
@@ -314,7 +315,17 @@ function ComboboxList({ view, filter, onChangeView }) {
   );
 }
 function SearchWidget(props) {
-  const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Widget, { ...props });
+  const { elements, isLoading } = (0, import_use_elements.default)({
+    elements: props.filter.elements,
+    getElements: props.filter.getElements
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-filters__search-widget-no-elements", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) });
+  }
+  if (elements.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-filters__search-widget-no-elements", children: (0, import_i18n.__)("No elements found") });
+  }
+  const Widget = elements.length > 10 ? ComboboxList : ListBox;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Widget, { ...props, filter: { ...props.filter, elements } });
 }
 //# sourceMappingURL=search-widget.js.map