@wordpress/dataviews 12.0.1-next.v.202602091733.0 → 12.0.1

package/build-module/components/dataviews-filters/search-widget.mjs

@@ -162,7 +162,14 @@ function ListBox({ view, filter, onChangeView }) {
                 selected: currentValue.includes(element.value)
               }
             ),
-            /* @__PURE__ */ jsx("span", { children: element.label })
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "dataviews-filters__search-widget-listitem-value",
+                title: element.label,
+                children: element.label
+              }
+            )
           ]
         },
         element.value
@@ -264,16 +271,23 @@ function ComboboxList2({ view, filter, onChangeView }) {
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsxs("span", { children: [
-                        /* @__PURE__ */ jsx(
-                          Ariakit.ComboboxItemValue,
-                          {
-                            className: "dataviews-filters__search-widget-filter-combobox-item-value",
-                            value: element.label
-                          }
-                        ),
-                        !!element.description && /* @__PURE__ */ jsx("span", { className: "dataviews-filters__search-widget-listitem-description", children: element.description })
-                      ] })
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          className: "dataviews-filters__search-widget-listitem-value",
+                          title: element.label,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Ariakit.ComboboxItemValue,
+                              {
+                                className: "dataviews-filters__search-widget-filter-combobox-item-value",
+                                value: element.label
+                              }
+                            ),
+                            !!element.description && /* @__PURE__ */ jsx("span", { className: "dataviews-filters__search-widget-listitem-description", children: element.description })
+                          ]
+                        }
+                      )
                     ]
                   },
                   element.value

package/build-module/components/dataviews-filters/search-widget.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-filters/search-widget.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\nimport removeAccents from 'remove-accents';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useMemo, useDeferredValue } from '@wordpress/element';\nimport {\n\tVisuallyHidden,\n\tIcon,\n\tComposite,\n\tSpinner,\n} from '@wordpress/components';\nimport { search, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getCurrentValue } from './utils';\nimport type { Filter, NormalizedFilter, View, Option } from '../../types';\nimport useElements from '../../hooks/use-elements';\n\ninterface SearchWidgetProps {\n\tview: View;\n\tfilter: NormalizedFilter & {\n\t\telements: Option[];\n\t};\n\tonChangeView: ( view: View ) => void;\n}\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nconst getNewValue = (\n\tfilterDefinition: NormalizedFilter,\n\tcurrentFilter: Filter | undefined,\n\tvalue: any\n) => {\n\tif ( filterDefinition.singleSelection ) {\n\t\treturn value;\n\t}\n\n\tif ( Array.isArray( currentFilter?.value ) ) {\n\t\treturn currentFilter.value.includes( value )\n\t\t\t? currentFilter.value.filter( ( v ) => v !== value )\n\t\t\t: [ ...currentFilter.value, value ];\n\t}\n\n\treturn [ value ];\n};\n\nfunction generateFilterElementCompositeItemId(\n\tprefix: string,\n\tfilterElementValue: string\n) {\n\treturn `${ prefix }-${ filterElementValue }`;\n}\n\nconst MultiSelectionOption = ( { selected }: { selected: boolean } ) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx(\n\t\t\t\t'dataviews-filters__search-widget-listitem-multi-selection',\n\t\t\t\t{ 'is-selected': selected }\n\t\t\t) }\n\t\t>\n\t\t\t{ selected && <Icon icon={ check } /> }\n\t\t</span>\n\t);\n};\n\nconst SingleSelectionOption = ( { selected }: { selected: boolean } ) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx(\n\t\t\t\t'dataviews-filters__search-widget-listitem-single-selection',\n\t\t\t\t{ 'is-selected': selected }\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nfunction ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {\n\tconst baseId = useInstanceId( ListBox, 'dataviews-filter-list-box' );\n\n\tconst [ activeCompositeId, setActiveCompositeId ] = useState<\n\t\tstring | null | undefined\n\t>(\n\t\t// When there are one or less operators, the first item is set as active\n\t\t// (by setting the initial `activeId` to `undefined`).\n\t\t// With 2 or more operators, the focus is moved on the operators control\n\t\t// (by setting the initial `activeId` to `null`), meaning that there won't\n\t\t// be an active item initially. Focus is then managed via the\n\t\t// `onFocusVisible` callback.\n\t\tfilter.operators?.length === 1 ? undefined : null\n\t);\n\tconst currentFilter = view.filters?.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\treturn (\n\t\t<Composite\n\t\t\tvirtualFocus\n\t\t\tfocusLoop\n\t\t\tactiveId={ activeCompositeId }\n\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"dataviews-filters__search-widget-listbox\"\n\t\t\taria-label={ sprintf(\n\t\t\t\t/* translators: List of items for a filter. 1: Filter name. e.g.: \"List of: Author\". */\n\t\t\t\t__( 'List of: %1$s' ),\n\t\t\t\tfilter.name\n\t\t\t) }\n\t\t\tonFocusVisible={ () => {\n\t\t\t\t// `onFocusVisible` needs the `Composite` component to be focusable,\n\t\t\t\t// which is implicitly achieved via the `virtualFocus` prop.\n\t\t\t\tif ( ! activeCompositeId && filter.elements.length ) {\n\t\t\t\t\tsetActiveCompositeId(\n\t\t\t\t\t\tgenerateFilterElementCompositeItemId(\n\t\t\t\t\t\t\tbaseId,\n\t\t\t\t\t\t\tfilter.elements[ 0 ].value\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t\trender={ <Composite.Typeahead /> }\n\t\t>\n\t\t\t{ filter.elements.map( ( element ) => (\n\t\t\t\t<Composite.Hover\n\t\t\t\t\tkey={ element.value }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\tid={ generateFilterElementCompositeItemId(\n\t\t\t\t\t\t\t\tbaseId,\n\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\taria-label={ element.label }\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ).map(\n\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\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_filter.field ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter.field\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\treturn {\n\t\t\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\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn _filter;\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  ]\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ),\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\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\tonChangeView( {\n\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\tfilters: newFilters,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ filter.singleSelection && (\n\t\t\t\t\t\t<SingleSelectionOption\n\t\t\t\t\t\t\tselected={ currentValue === element.value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! filter.singleSelection && (\n\t\t\t\t\t\t<MultiSelectionOption\n\t\t\t\t\t\t\tselected={ currentValue.includes( element.value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<span>{ element.label }</span>\n\t\t\t\t</Composite.Hover>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nfunction ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst deferredSearchValue = useDeferredValue( searchValue );\n\tconst currentFilter = view.filters?.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\tconst matches = useMemo( () => {\n\t\tconst normalizedSearch = normalizeSearchInput( deferredSearchValue );\n\t\treturn filter.elements.filter( ( item ) =>\n\t\t\tnormalizeSearchInput( item.label ).includes( normalizedSearch )\n\t\t);\n\t}, [ filter.elements, deferredSearchValue ] );\n\treturn (\n\t\t<Ariakit.ComboboxProvider\n\t\t\tselectedValue={ currentValue }\n\t\t\tsetSelectedValue={ ( value ) => {\n\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t...( view.filters ?? [] ).map( ( _filter ) => {\n\t\t\t\t\t\t\t\tif ( _filter.field === filter.field ) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\tfilter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\tvalue,\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\treturn _filter;\n\t\t\t\t\t\t\t} ),\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\t...( view.filters ?? [] ),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  ];\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tfilters: newFilters,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tsetValue={ setSearchValue }\n\t\t>\n\t\t\t<div className=\"dataviews-filters__search-widget-filter-combobox__wrapper\">\n\t\t\t\t<Ariakit.ComboboxLabel\n\t\t\t\t\trender={\n\t\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t</Ariakit.ComboboxLabel>\n\t\t\t\t<Ariakit.Combobox\n\t\t\t\t\tautoSelect=\"always\"\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox__input\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"dataviews-filters__search-widget-filter-combobox__icon\">\n\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Ariakit.ComboboxList\n\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox-list\"\n\t\t\t\talwaysVisible\n\t\t\t>\n\t\t\t\t{ matches.map( ( element ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Ariakit.ComboboxItem\n\t\t\t\t\t\t\tresetValueOnSelect={ false }\n\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\tvalue={ element.value }\n\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem\"\n\t\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\t\tsetValueOnClick={ false }\n\t\t\t\t\t\t\tfocusOnHover\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ filter.singleSelection && (\n\t\t\t\t\t\t\t\t<SingleSelectionOption\n\t\t\t\t\t\t\t\t\tselected={ currentValue === element.value }\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{ ! filter.singleSelection && (\n\t\t\t\t\t\t\t\t<MultiSelectionOption\n\t\t\t\t\t\t\t\t\tselected={ currentValue.includes(\n\t\t\t\t\t\t\t\t\t\telement.value\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<span>\n\t\t\t\t\t\t\t\t<Ariakit.ComboboxItemValue\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox-item-value\"\n\t\t\t\t\t\t\t\t\tvalue={ element.label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Ariakit.ComboboxItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ ! matches.length && <p>{ __( 'No results found' ) }</p> }\n\t\t\t</Ariakit.ComboboxList>\n\t\t</Ariakit.ComboboxProvider>\n\t);\n}\n\nexport default function SearchWidget( props: SearchWidgetProps ) {\n\tconst { elements, isLoading } = useElements( {\n\t\telements: props.filter.elements,\n\t\tgetElements: props.filter.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn (\n\t\t\t<div className=\"dataviews-filters__search-widget-no-elements\">\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( elements.length === 0 ) {\n\t\treturn (\n\t\t\t<div className=\"dataviews-filters__search-widget-no-elements\">\n\t\t\t\t{ __( 'No elements found' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst Widget = elements.length > 10 ? ComboboxList : ListBox;\n\treturn <Widget { ...props } filter={ { ...props.filter, elements } } />;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\nimport removeAccents from 'remove-accents';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useMemo, useDeferredValue } from '@wordpress/element';\nimport {\n\tVisuallyHidden,\n\tIcon,\n\tComposite,\n\tSpinner,\n} from '@wordpress/components';\nimport { search, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getCurrentValue } from './utils';\nimport type { Filter, NormalizedFilter, View, Option } from '../../types';\nimport useElements from '../../hooks/use-elements';\n\ninterface SearchWidgetProps {\n\tview: View;\n\tfilter: NormalizedFilter & {\n\t\telements: Option[];\n\t};\n\tonChangeView: ( view: View ) => void;\n}\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nconst getNewValue = (\n\tfilterDefinition: NormalizedFilter,\n\tcurrentFilter: Filter | undefined,\n\tvalue: any\n) => {\n\tif ( filterDefinition.singleSelection ) {\n\t\treturn value;\n\t}\n\n\tif ( Array.isArray( currentFilter?.value ) ) {\n\t\treturn currentFilter.value.includes( value )\n\t\t\t? currentFilter.value.filter( ( v ) => v !== value )\n\t\t\t: [ ...currentFilter.value, value ];\n\t}\n\n\treturn [ value ];\n};\n\nfunction generateFilterElementCompositeItemId(\n\tprefix: string,\n\tfilterElementValue: string\n) {\n\treturn `${ prefix }-${ filterElementValue }`;\n}\n\nconst MultiSelectionOption = ( { selected }: { selected: boolean } ) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx(\n\t\t\t\t'dataviews-filters__search-widget-listitem-multi-selection',\n\t\t\t\t{ 'is-selected': selected }\n\t\t\t) }\n\t\t>\n\t\t\t{ selected && <Icon icon={ check } /> }\n\t\t</span>\n\t);\n};\n\nconst SingleSelectionOption = ( { selected }: { selected: boolean } ) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx(\n\t\t\t\t'dataviews-filters__search-widget-listitem-single-selection',\n\t\t\t\t{ 'is-selected': selected }\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nfunction ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {\n\tconst baseId = useInstanceId( ListBox, 'dataviews-filter-list-box' );\n\n\tconst [ activeCompositeId, setActiveCompositeId ] = useState<\n\t\tstring | null | undefined\n\t>(\n\t\t// When there are one or less operators, the first item is set as active\n\t\t// (by setting the initial `activeId` to `undefined`).\n\t\t// With 2 or more operators, the focus is moved on the operators control\n\t\t// (by setting the initial `activeId` to `null`), meaning that there won't\n\t\t// be an active item initially. Focus is then managed via the\n\t\t// `onFocusVisible` callback.\n\t\tfilter.operators?.length === 1 ? undefined : null\n\t);\n\tconst currentFilter = view.filters?.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\treturn (\n\t\t<Composite\n\t\t\tvirtualFocus\n\t\t\tfocusLoop\n\t\t\tactiveId={ activeCompositeId }\n\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"dataviews-filters__search-widget-listbox\"\n\t\t\taria-label={ sprintf(\n\t\t\t\t/* translators: List of items for a filter. 1: Filter name. e.g.: \"List of: Author\". */\n\t\t\t\t__( 'List of: %1$s' ),\n\t\t\t\tfilter.name\n\t\t\t) }\n\t\t\tonFocusVisible={ () => {\n\t\t\t\t// `onFocusVisible` needs the `Composite` component to be focusable,\n\t\t\t\t// which is implicitly achieved via the `virtualFocus` prop.\n\t\t\t\tif ( ! activeCompositeId && filter.elements.length ) {\n\t\t\t\t\tsetActiveCompositeId(\n\t\t\t\t\t\tgenerateFilterElementCompositeItemId(\n\t\t\t\t\t\t\tbaseId,\n\t\t\t\t\t\t\tfilter.elements[ 0 ].value\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t\trender={ <Composite.Typeahead /> }\n\t\t>\n\t\t\t{ filter.elements.map( ( element ) => (\n\t\t\t\t<Composite.Hover\n\t\t\t\t\tkey={ element.value }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\tid={ generateFilterElementCompositeItemId(\n\t\t\t\t\t\t\t\tbaseId,\n\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\taria-label={ element.label }\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ).map(\n\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\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_filter.field ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter.field\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\treturn {\n\t\t\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\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn _filter;\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  ]\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ),\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\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\tonChangeView( {\n\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\tfilters: newFilters,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ filter.singleSelection && (\n\t\t\t\t\t\t<SingleSelectionOption\n\t\t\t\t\t\t\tselected={ currentValue === element.value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! filter.singleSelection && (\n\t\t\t\t\t\t<MultiSelectionOption\n\t\t\t\t\t\t\tselected={ currentValue.includes( element.value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem-value\"\n\t\t\t\t\t\ttitle={ element.label }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t</span>\n\t\t\t\t</Composite.Hover>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nfunction ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst deferredSearchValue = useDeferredValue( searchValue );\n\tconst currentFilter = view.filters?.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\tconst matches = useMemo( () => {\n\t\tconst normalizedSearch = normalizeSearchInput( deferredSearchValue );\n\t\treturn filter.elements.filter( ( item ) =>\n\t\t\tnormalizeSearchInput( item.label ).includes( normalizedSearch )\n\t\t);\n\t}, [ filter.elements, deferredSearchValue ] );\n\treturn (\n\t\t<Ariakit.ComboboxProvider\n\t\t\tselectedValue={ currentValue }\n\t\t\tsetSelectedValue={ ( value ) => {\n\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t...( view.filters ?? [] ).map( ( _filter ) => {\n\t\t\t\t\t\t\t\tif ( _filter.field === filter.field ) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\tfilter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\tvalue,\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\treturn _filter;\n\t\t\t\t\t\t\t} ),\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\t...( view.filters ?? [] ),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  ];\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tfilters: newFilters,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tsetValue={ setSearchValue }\n\t\t>\n\t\t\t<div className=\"dataviews-filters__search-widget-filter-combobox__wrapper\">\n\t\t\t\t<Ariakit.ComboboxLabel\n\t\t\t\t\trender={\n\t\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t</Ariakit.ComboboxLabel>\n\t\t\t\t<Ariakit.Combobox\n\t\t\t\t\tautoSelect=\"always\"\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox__input\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"dataviews-filters__search-widget-filter-combobox__icon\">\n\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Ariakit.ComboboxList\n\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox-list\"\n\t\t\t\talwaysVisible\n\t\t\t>\n\t\t\t\t{ matches.map( ( element ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Ariakit.ComboboxItem\n\t\t\t\t\t\t\tresetValueOnSelect={ false }\n\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\tvalue={ element.value }\n\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem\"\n\t\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\t\tsetValueOnClick={ false }\n\t\t\t\t\t\t\tfocusOnHover\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ filter.singleSelection && (\n\t\t\t\t\t\t\t\t<SingleSelectionOption\n\t\t\t\t\t\t\t\t\tselected={ currentValue === element.value }\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{ ! filter.singleSelection && (\n\t\t\t\t\t\t\t\t<MultiSelectionOption\n\t\t\t\t\t\t\t\t\tselected={ currentValue.includes(\n\t\t\t\t\t\t\t\t\t\telement.value\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<span\n\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem-value\"\n\t\t\t\t\t\t\t\ttitle={ element.label }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Ariakit.ComboboxItemValue\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox-item-value\"\n\t\t\t\t\t\t\t\t\tvalue={ element.label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Ariakit.ComboboxItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ ! matches.length && <p>{ __( 'No results found' ) }</p> }\n\t\t\t</Ariakit.ComboboxList>\n\t\t</Ariakit.ComboboxProvider>\n\t);\n}\n\nexport default function SearchWidget( props: SearchWidgetProps ) {\n\tconst { elements, isLoading } = useElements( {\n\t\telements: props.filter.elements,\n\t\tgetElements: props.filter.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn (\n\t\t\t<div className=\"dataviews-filters__search-widget-no-elements\">\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( elements.length === 0 ) {\n\t\treturn (\n\t\t\t<div className=\"dataviews-filters__search-widget-no-elements\">\n\t\t\t\t{ __( 'No elements found' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst Widget = elements.length > 10 ? ComboboxList : ListBox;\n\treturn <Widget { ...props } filter={ { ...props.filter, elements } } />;\n}\n"],
+  "mappings": "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",
   "names": ["ComboboxList"]
 }

package/build-module/components/dataviews-filters/toggle.mjs

@@ -23,11 +23,10 @@ function FiltersToggle() {
     },
     [onChangeView, setIsShowingFilter]
   );
-  const visibleFilters = filters.filter((filter) => filter.isVisible);
-  const hasVisibleFilters = !!visibleFilters.length;
   if (filters.length === 0) {
     return null;
   }
+  const hasVisibleFilters = filters.some((filter) => filter.isVisible);
   const addFilterButtonProps = {
     label: __("Add filter"),
     "aria-expanded": false,
@@ -44,6 +43,9 @@ function FiltersToggle() {
       setIsShowingFilter(!isShowingFilter);
     }
   };
+  const hasPrimaryOrLockedFilters = filters.some(
+    (filter) => filter.isPrimary || filter.isLocked
+  );
   const buttonComponent = /* @__PURE__ */ jsx(
     Button,
     {
@@ -51,6 +53,8 @@ function FiltersToggle() {
       className: "dataviews-filters__visibility-toggle",
       size: "compact",
       icon: funnel,
+      disabled: hasPrimaryOrLockedFilters,
+      accessibleWhenDisabled: true,
       ...hasVisibleFilters ? toggleFiltersButtonProps : addFilterButtonProps
     }
   );

package/build-module/components/dataviews-filters/toggle.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-filters/toggle.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useRef, useCallback, useEffect } from '@wordpress/element';\nimport { Button } from '@wordpress/components';\nimport { funnel } from '@wordpress/icons';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AddFilterMenu } from './add-filter';\nimport DataViewsContext from '../dataviews-context';\nimport type { View } from '../../types';\n\nfunction FiltersToggle() {\n\tconst {\n\t\tfilters,\n\t\tview,\n\t\tonChangeView,\n\t\tsetOpenedFilter,\n\t\tisShowingFilter,\n\t\tsetIsShowingFilter,\n\t} = useContext( DataViewsContext );\n\n\tconst buttonRef = useRef< HTMLButtonElement >( null );\n\tconst onChangeViewWithFilterVisibility = useCallback(\n\t\t( _view: View ) => {\n\t\t\tonChangeView( _view );\n\t\t\tsetIsShowingFilter( true );\n\t\t},\n\t\t[ onChangeView, setIsShowingFilter ]\n\t);\n\tconst visibleFilters = filters.filter( ( filter ) => filter.isVisible );\n\n\tconst hasVisibleFilters = !! visibleFilters.length;\n\tif ( filters.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst addFilterButtonProps = {\n\t\tlabel: __( 'Add filter' ),\n\t\t'aria-expanded': false,\n\t\tisPressed: false,\n\t};\n\tconst toggleFiltersButtonProps = {\n\t\tlabel: _x( 'Filter', 'verb' ),\n\t\t'aria-expanded': isShowingFilter,\n\t\tisPressed: isShowingFilter,\n\t\tonClick: () => {\n\t\t\tif ( ! isShowingFilter ) {\n\t\t\t\tsetOpenedFilter( null );\n\t\t\t}\n\t\t\tsetIsShowingFilter( ! isShowingFilter );\n\t\t},\n\t};\n\tconst buttonComponent = (\n\t\t<Button\n\t\t\tref={ buttonRef }\n\t\t\tclassName=\"dataviews-filters__visibility-toggle\"\n\t\t\tsize=\"compact\"\n\t\t\ticon={ funnel }\n\t\t\t{ ...( hasVisibleFilters\n\t\t\t\t? toggleFiltersButtonProps\n\t\t\t\t: addFilterButtonProps ) }\n\t\t/>\n\t);\n\treturn (\n\t\t<div className=\"dataviews-filters__container-visibility-toggle\">\n\t\t\t{ ! hasVisibleFilters ? (\n\t\t\t\t<AddFilterMenu\n\t\t\t\t\tfilters={ filters }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeViewWithFilterVisibility }\n\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\ttriggerProps={ { render: buttonComponent } }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<FilterVisibilityToggle\n\t\t\t\t\tbuttonRef={ buttonRef }\n\t\t\t\t\tfiltersCount={ view.filters?.length }\n\t\t\t\t>\n\t\t\t\t\t{ buttonComponent }\n\t\t\t\t</FilterVisibilityToggle>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction FilterVisibilityToggle( {\n\tbuttonRef,\n\tfiltersCount,\n\tchildren,\n}: {\n\tbuttonRef: React.RefObject< HTMLButtonElement >;\n\tfiltersCount?: number;\n\tchildren: React.ReactNode;\n} ) {\n\t// Focus the `add filter` button when unmounts.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tbuttonRef.current?.focus();\n\t\t},\n\t\t[ buttonRef ]\n\t);\n\treturn (\n\t\t<>\n\t\t\t{ children }\n\t\t\t{ !! filtersCount && (\n\t\t\t\t<span className=\"dataviews-filters-toggle__count\">\n\t\t\t\t\t{ filtersCount }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default FiltersToggle;\n"],
-  "mappings": ";AAGA,SAAS,YAAY,QAAQ,aAAa,iBAAiB;AAC3D,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,IAAI,UAAU;AAKvB,SAAS,qBAAqB;AAC9B,OAAO,sBAAsB;AA6C3B,SAiDA,UAjDA,KAiDA,YAjDA;AA1CF,SAAS,gBAAgB;AACxB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,WAAY,gBAAiB;AAEjC,QAAM,YAAY,OAA6B,IAAK;AACpD,QAAM,mCAAmC;AAAA,IACxC,CAAE,UAAiB;AAClB,mBAAc,KAAM;AACpB,yBAAoB,IAAK;AAAA,IAC1B;AAAA,IACA,CAAE,cAAc,kBAAmB;AAAA,EACpC;AACA,QAAM,iBAAiB,QAAQ,OAAQ,CAAE,WAAY,OAAO,SAAU;AAEtE,QAAM,oBAAoB,CAAC,CAAE,eAAe;AAC5C,MAAK,QAAQ,WAAW,GAAI;AAC3B,WAAO;AAAA,EACR;AAEA,QAAM,uBAAuB;AAAA,IAC5B,OAAO,GAAI,YAAa;AAAA,IACxB,iBAAiB;AAAA,IACjB,WAAW;AAAA,EACZ;AACA,QAAM,2BAA2B;AAAA,IAChC,OAAO,GAAI,UAAU,MAAO;AAAA,IAC5B,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS,MAAM;AACd,UAAK,CAAE,iBAAkB;AACxB,wBAAiB,IAAK;AAAA,MACvB;AACA,yBAAoB,CAAE,eAAgB;AAAA,IACvC;AAAA,EACD;AACA,QAAM,kBACL;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MACV,MAAK;AAAA,MACL,MAAO;AAAA,MACL,GAAK,oBACJ,2BACA;AAAA;AAAA,EACJ;AAED,SACC,oBAAC,SAAI,WAAU,kDACZ,WAAE,oBACH;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAe;AAAA,MACf;AAAA,MACA,cAAe,EAAE,QAAQ,gBAAgB;AAAA;AAAA,EAC1C,IAEA;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAe,KAAK,SAAS;AAAA,MAE3B;AAAA;AAAA,EACH,GAEF;AAEF;AAEA,SAAS,uBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAII;AAEH;AAAA,IACC,MAAM,MAAM;AACX,gBAAU,SAAS,MAAM;AAAA,IAC1B;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AACA,SACC,iCACG;AAAA;AAAA,IACA,CAAC,CAAE,gBACJ,oBAAC,UAAK,WAAU,mCACb,wBACH;AAAA,KAEF;AAEF;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useRef, useCallback, useEffect } from '@wordpress/element';\nimport { Button } from '@wordpress/components';\nimport { funnel } from '@wordpress/icons';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AddFilterMenu } from './add-filter';\nimport DataViewsContext from '../dataviews-context';\nimport type { View } from '../../types';\n\nfunction FiltersToggle() {\n\tconst {\n\t\tfilters,\n\t\tview,\n\t\tonChangeView,\n\t\tsetOpenedFilter,\n\t\tisShowingFilter,\n\t\tsetIsShowingFilter,\n\t} = useContext( DataViewsContext );\n\n\tconst buttonRef = useRef< HTMLButtonElement >( null );\n\tconst onChangeViewWithFilterVisibility = useCallback(\n\t\t( _view: View ) => {\n\t\t\tonChangeView( _view );\n\t\t\tsetIsShowingFilter( true );\n\t\t},\n\t\t[ onChangeView, setIsShowingFilter ]\n\t);\n\n\tif ( filters.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst hasVisibleFilters = filters.some( ( filter ) => filter.isVisible );\n\n\tconst addFilterButtonProps = {\n\t\tlabel: __( 'Add filter' ),\n\t\t'aria-expanded': false,\n\t\tisPressed: false,\n\t};\n\tconst toggleFiltersButtonProps = {\n\t\tlabel: _x( 'Filter', 'verb' ),\n\t\t'aria-expanded': isShowingFilter,\n\t\tisPressed: isShowingFilter,\n\t\tonClick: () => {\n\t\t\tif ( ! isShowingFilter ) {\n\t\t\t\tsetOpenedFilter( null );\n\t\t\t}\n\t\t\tsetIsShowingFilter( ! isShowingFilter );\n\t\t},\n\t};\n\t// When there are primary or locked filters, the filter bar is always\n\t// visible and cannot be hidden, so the toggle button should be disabled.\n\tconst hasPrimaryOrLockedFilters = filters.some(\n\t\t( filter ) => filter.isPrimary || filter.isLocked\n\t);\n\tconst buttonComponent = (\n\t\t<Button\n\t\t\tref={ buttonRef }\n\t\t\tclassName=\"dataviews-filters__visibility-toggle\"\n\t\t\tsize=\"compact\"\n\t\t\ticon={ funnel }\n\t\t\tdisabled={ hasPrimaryOrLockedFilters }\n\t\t\taccessibleWhenDisabled\n\t\t\t{ ...( hasVisibleFilters\n\t\t\t\t? toggleFiltersButtonProps\n\t\t\t\t: addFilterButtonProps ) }\n\t\t/>\n\t);\n\treturn (\n\t\t<div className=\"dataviews-filters__container-visibility-toggle\">\n\t\t\t{ ! hasVisibleFilters ? (\n\t\t\t\t<AddFilterMenu\n\t\t\t\t\tfilters={ filters }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeViewWithFilterVisibility }\n\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\ttriggerProps={ { render: buttonComponent } }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<FilterVisibilityToggle\n\t\t\t\t\tbuttonRef={ buttonRef }\n\t\t\t\t\tfiltersCount={ view.filters?.length }\n\t\t\t\t>\n\t\t\t\t\t{ buttonComponent }\n\t\t\t\t</FilterVisibilityToggle>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction FilterVisibilityToggle( {\n\tbuttonRef,\n\tfiltersCount,\n\tchildren,\n}: {\n\tbuttonRef: React.RefObject< HTMLButtonElement | null >;\n\tfiltersCount?: number;\n\tchildren: React.ReactNode;\n} ) {\n\t// Focus the `add filter` button when unmounts.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tbuttonRef.current?.focus();\n\t\t},\n\t\t[ buttonRef ]\n\t);\n\treturn (\n\t\t<>\n\t\t\t{ children }\n\t\t\t{ !! filtersCount && (\n\t\t\t\t<span className=\"dataviews-filters-toggle__count\">\n\t\t\t\t\t{ filtersCount }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default FiltersToggle;\n"],
+  "mappings": ";AAGA,SAAS,YAAY,QAAQ,aAAa,iBAAiB;AAC3D,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,IAAI,UAAU;AAKvB,SAAS,qBAAqB;AAC9B,OAAO,sBAAsB;AAkD3B,SAmDA,UAnDA,KAmDA,YAnDA;AA/CF,SAAS,gBAAgB;AACxB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,WAAY,gBAAiB;AAEjC,QAAM,YAAY,OAA6B,IAAK;AACpD,QAAM,mCAAmC;AAAA,IACxC,CAAE,UAAiB;AAClB,mBAAc,KAAM;AACpB,yBAAoB,IAAK;AAAA,IAC1B;AAAA,IACA,CAAE,cAAc,kBAAmB;AAAA,EACpC;AAEA,MAAK,QAAQ,WAAW,GAAI;AAC3B,WAAO;AAAA,EACR;AAEA,QAAM,oBAAoB,QAAQ,KAAM,CAAE,WAAY,OAAO,SAAU;AAEvE,QAAM,uBAAuB;AAAA,IAC5B,OAAO,GAAI,YAAa;AAAA,IACxB,iBAAiB;AAAA,IACjB,WAAW;AAAA,EACZ;AACA,QAAM,2BAA2B;AAAA,IAChC,OAAO,GAAI,UAAU,MAAO;AAAA,IAC5B,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS,MAAM;AACd,UAAK,CAAE,iBAAkB;AACxB,wBAAiB,IAAK;AAAA,MACvB;AACA,yBAAoB,CAAE,eAAgB;AAAA,IACvC;AAAA,EACD;AAGA,QAAM,4BAA4B,QAAQ;AAAA,IACzC,CAAE,WAAY,OAAO,aAAa,OAAO;AAAA,EAC1C;AACA,QAAM,kBACL;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MACV,MAAK;AAAA,MACL,MAAO;AAAA,MACP,UAAW;AAAA,MACX,wBAAsB;AAAA,MACpB,GAAK,oBACJ,2BACA;AAAA;AAAA,EACJ;AAED,SACC,oBAAC,SAAI,WAAU,kDACZ,WAAE,oBACH;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAe;AAAA,MACf;AAAA,MACA,cAAe,EAAE,QAAQ,gBAAgB;AAAA;AAAA,EAC1C,IAEA;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAe,KAAK,SAAS;AAAA,MAE3B;AAAA;AAAA,EACH,GAEF;AAEF;AAEA,SAAS,uBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAII;AAEH;AAAA,IACC,MAAM,MAAM;AACX,gBAAU,SAAS,MAAM;AAAA,IAC1B;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AACA,SACC,iCACG;AAAA;AAAA,IACA,CAAC,CAAE,gBACJ,oBAAC,UAAK,WAAU,mCACb,wBACH;AAAA,KAEF;AAEF;AAEA,IAAO,iBAAQ;",
   "names": []
 }

package/build-module/components/dataviews-footer/index.mjs

@@ -1,4 +1,5 @@
 // packages/dataviews/src/components/dataviews-footer/index.tsx
+import clsx from "clsx";
 import { useContext } from "@wordpress/element";
 import { Stack } from "@wordpress/ui";
 import DataViewsContext from "../dataviews-context/index.mjs";
@@ -8,6 +9,7 @@ import {
   useSomeItemHasAPossibleBulkAction
 } from "../dataviews-bulk-actions/index.mjs";
 import { LAYOUT_GRID, LAYOUT_TABLE } from "../../constants.mjs";
+import { useDelayedLoading } from "../../hooks/use-delayed-loading.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var EMPTY_ARRAY = [];
 function DataViewsFooter() {
@@ -15,24 +17,38 @@ function DataViewsFooter() {
     view,
     paginationInfo: { totalItems = 0, totalPages },
     data,
-    actions = EMPTY_ARRAY
+    actions = EMPTY_ARRAY,
+    isLoading,
+    hasInitiallyLoaded,
+    hasInfiniteScrollHandler
   } = useContext(DataViewsContext);
+  const isRefreshing = !!isLoading && hasInitiallyLoaded && !hasInfiniteScrollHandler && !!data?.length;
+  const isDelayedRefreshing = useDelayedLoading(!!isRefreshing);
   const hasBulkActions = useSomeItemHasAPossibleBulkAction(actions, data) && [LAYOUT_TABLE, LAYOUT_GRID].includes(view.type);
-  if (!totalItems || !totalPages || totalPages <= 1 && !hasBulkActions) {
+  if (!isRefreshing && (!totalItems || !totalPages || totalPages <= 1 && !hasBulkActions)) {
     return null;
   }
-  return !!totalItems && /* @__PURE__ */ jsxs(
-    Stack,
+  return (!!totalItems || isRefreshing) && /* @__PURE__ */ jsx(
+    "div",
     {
-      direction: "row",
-      justify: "end",
-      align: "center",
       className: "dataviews-footer",
-      gap: "sm",
-      children: [
-        hasBulkActions && /* @__PURE__ */ jsx(BulkActionsFooter, {}),
-        /* @__PURE__ */ jsx(DataViewsPagination, {})
-      ]
+      inert: isRefreshing ? "true" : void 0,
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          justify: "end",
+          align: "center",
+          className: clsx("dataviews-footer__content", {
+            "is-refreshing": isDelayedRefreshing
+          }),
+          gap: "sm",
+          children: [
+            hasBulkActions && /* @__PURE__ */ jsx(BulkActionsFooter, {}),
+            /* @__PURE__ */ jsx(DataViewsPagination, {})
+          ]
+        }
+      )
     }
   );
 }

package/build-module/components/dataviews-footer/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-footer/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport DataViewsPagination from '../dataviews-pagination';\nimport {\n\tBulkActionsFooter,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../dataviews-bulk-actions';\nimport { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport default function DataViewsFooter() {\n\tconst {\n\t\tview,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t\tdata,\n\t\tactions = EMPTY_ARRAY,\n\t} = useContext( DataViewsContext );\n\tconst hasBulkActions =\n\t\tuseSomeItemHasAPossibleBulkAction( actions, data ) &&\n\t\t[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type );\n\n\tif (\n\t\t! totalItems ||\n\t\t! totalPages ||\n\t\t( totalPages <= 1 && ! hasBulkActions )\n\t) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t!! totalItems && (\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tjustify=\"end\"\n\t\t\t\talign=\"center\"\n\t\t\t\tclassName=\"dataviews-footer\"\n\t\t\t\tgap=\"sm\"\n\t\t\t>\n\t\t\t\t{ hasBulkActions && <BulkActionsFooter /> }\n\t\t\t\t<DataViewsPagination />\n\t\t\t</Stack>\n\t\t)\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAKtB,OAAO,sBAAsB;AAC7B,OAAO,yBAAyB;AAChC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,aAAa,oBAAoB;AAwBvC,SAOqB,KAPrB;AAtBH,IAAM,cAAkB,CAAC;AAEV,SAAR,kBAAmC;AACzC,QAAM;AAAA,IACL;AAAA,IACA,gBAAgB,EAAE,aAAa,GAAG,WAAW;AAAA,IAC7C;AAAA,IACA,UAAU;AAAA,EACX,IAAI,WAAY,gBAAiB;AACjC,QAAM,iBACL,kCAAmC,SAAS,IAAK,KACjD,CAAE,cAAc,WAAY,EAAE,SAAU,KAAK,IAAK;AAEnD,MACC,CAAE,cACF,CAAE,cACA,cAAc,KAAK,CAAE,gBACtB;AACD,WAAO;AAAA,EACR;AACA,SACC,CAAC,CAAE,cACF;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,WAAU;AAAA,MACV,KAAI;AAAA,MAEF;AAAA,0BAAkB,oBAAC,qBAAkB;AAAA,QACvC,oBAAC,uBAAoB;AAAA;AAAA;AAAA,EACtB;AAGH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport DataViewsPagination from '../dataviews-pagination';\nimport {\n\tBulkActionsFooter,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../dataviews-bulk-actions';\nimport { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';\nimport { useDelayedLoading } from '../../hooks/use-delayed-loading';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport default function DataViewsFooter() {\n\tconst {\n\t\tview,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t\tdata,\n\t\tactions = EMPTY_ARRAY,\n\t\tisLoading,\n\t\thasInitiallyLoaded,\n\t\thasInfiniteScrollHandler,\n\t} = useContext( DataViewsContext );\n\n\tconst isRefreshing =\n\t\t!! isLoading &&\n\t\thasInitiallyLoaded &&\n\t\t! hasInfiniteScrollHandler &&\n\t\t!! data?.length;\n\n\tconst isDelayedRefreshing = useDelayedLoading( !! isRefreshing );\n\n\tconst hasBulkActions =\n\t\tuseSomeItemHasAPossibleBulkAction( actions, data ) &&\n\t\t[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type );\n\n\tif (\n\t\t! isRefreshing &&\n\t\t( ! totalItems ||\n\t\t\t! totalPages ||\n\t\t\t( totalPages <= 1 && ! hasBulkActions ) )\n\t) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t( !! totalItems || isRefreshing ) && (\n\t\t\t<div\n\t\t\t\tclassName=\"dataviews-footer\"\n\t\t\t\t// @ts-ignore\n\t\t\t\tinert={ isRefreshing ? 'true' : undefined }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"end\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tclassName={ clsx( 'dataviews-footer__content', {\n\t\t\t\t\t\t'is-refreshing': isDelayedRefreshing,\n\t\t\t\t\t} ) }\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t>\n\t\t\t\t\t{ hasBulkActions && <BulkActionsFooter /> }\n\t\t\t\t\t<DataViewsPagination />\n\t\t\t\t</Stack>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAKtB,OAAO,sBAAsB;AAC7B,OAAO,yBAAyB;AAChC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,aAAa,oBAAoB;AAC1C,SAAS,yBAAyB;AA0C9B,SASqB,KATrB;AAxCJ,IAAM,cAAkB,CAAC;AAEV,SAAR,kBAAmC;AACzC,QAAM;AAAA,IACL;AAAA,IACA,gBAAgB,EAAE,aAAa,GAAG,WAAW;AAAA,IAC7C;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,WAAY,gBAAiB;AAEjC,QAAM,eACL,CAAC,CAAE,aACH,sBACA,CAAE,4BACF,CAAC,CAAE,MAAM;AAEV,QAAM,sBAAsB,kBAAmB,CAAC,CAAE,YAAa;AAE/D,QAAM,iBACL,kCAAmC,SAAS,IAAK,KACjD,CAAE,cAAc,WAAY,EAAE,SAAU,KAAK,IAAK;AAEnD,MACC,CAAE,iBACA,CAAE,cACH,CAAE,cACA,cAAc,KAAK,CAAE,iBACvB;AACD,WAAO;AAAA,EACR;AACA,UACG,CAAC,CAAE,cAAc,iBAClB;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MAEV,OAAQ,eAAe,SAAS;AAAA,MAEhC;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAY,KAAM,6BAA6B;AAAA,YAC9C,iBAAiB;AAAA,UAClB,CAAE;AAAA,UACF,KAAI;AAAA,UAEF;AAAA,8BAAkB,oBAAC,qBAAkB;AAAA,YACvC,oBAAC,uBAAoB;AAAA;AAAA;AAAA,MACtB;AAAA;AAAA,EACD;AAGH;",
   "names": []
 }

package/build-module/components/dataviews-item-actions/index.mjs

@@ -97,7 +97,6 @@ function ActionsMenuGroup({
   ));
   return /* @__PURE__ */ jsxs(Menu.Group, { children: [
     renderActionGroup(primaryActions),
-    primaryActions.length > 0 && regularActions.length > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}),
     renderActionGroup(regularActions)
   ] });
 }

package/build-module/components/dataviews-item-actions/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-item-actions/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { MouseEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { moreVertical } from '@wordpress/icons';\nimport { useRegistry } from '@wordpress/data';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { Action, ActionModal as ActionModalType } from '../../types';\n\nconst { Menu, kebabCase } = unlock( componentsPrivateApis );\n\nexport interface ActionTriggerProps< Item > {\n\taction: Action< Item >;\n\tonClick: MouseEventHandler;\n\tisBusy?: boolean;\n\titems: Item[];\n\tvariant?: 'primary' | 'secondary' | 'tertiary' | 'link';\n}\n\nexport interface ActionModalProps< Item > {\n\taction: ActionModalType< Item >;\n\titems: Item[];\n\tcloseModal: () => void;\n}\n\ninterface ActionsMenuGroupProps< Item > {\n\tactions: Action< Item >[];\n\titem: Item;\n\tregistry: ReturnType< typeof useRegistry >;\n\tsetActiveModalAction: ( action: ActionModalType< Item > | null ) => void;\n}\n\ninterface ItemActionsProps< Item > {\n\titem: Item;\n\tactions: Action< Item >[];\n\tisCompact?: boolean;\n}\n\ninterface CompactItemActionsProps< Item > {\n\titem: Item;\n\tactions: Action< Item >[];\n\tisSmall?: boolean;\n\tregistry: ReturnType< typeof useRegistry >;\n}\n\ninterface PrimaryActionsProps< Item > {\n\titem: Item;\n\tactions: Action< Item >[];\n\tregistry: ReturnType< typeof useRegistry >;\n\tbuttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'link';\n}\n\nfunction ButtonTrigger< Item >( {\n\taction,\n\tonClick,\n\titems,\n\tvariant,\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={ !! action.disabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tvariant={ variant }\n\t\t\tonClick={ onClick }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nfunction MenuItemTrigger< Item >( {\n\taction,\n\tonClick,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\treturn (\n\t\t<Menu.Item disabled={ action.disabled } onClick={ onClick }>\n\t\t\t<Menu.ItemLabel>{ label }</Menu.ItemLabel>\n\t\t</Menu.Item>\n\t);\n}\n\nexport function ActionModal< Item >( {\n\taction,\n\titems,\n\tcloseModal,\n}: ActionModalProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\n\tconst modalHeader =\n\t\ttypeof action.modalHeader === 'function'\n\t\t\t? action.modalHeader( items )\n\t\t\t: action.modalHeader;\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ modalHeader || label }\n\t\t\t__experimentalHideHeader={ !! action.hideModalHeader }\n\t\t\tonRequestClose={ closeModal }\n\t\t\tfocusOnMount={ action.modalFocusOnMount ?? true }\n\t\t\tsize={ action.modalSize || 'medium' }\n\t\t\toverlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(\n\t\t\t\taction.id\n\t\t\t) }` }\n\t\t>\n\t\t\t<action.RenderModal items={ items } closeModal={ closeModal } />\n\t\t</Modal>\n\t);\n}\n\nexport function ActionsMenuGroup< Item >( {\n\tactions,\n\titem,\n\tregistry,\n\tsetActiveModalAction,\n}: ActionsMenuGroupProps< Item > ) {\n\tconst { primaryActions, regularActions } = useMemo( () => {\n\t\treturn actions.reduce(\n\t\t\t( acc, action ) => {\n\t\t\t\t( action.isPrimary\n\t\t\t\t\t? acc.primaryActions\n\t\t\t\t\t: acc.regularActions\n\t\t\t\t).push( action );\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t{\n\t\t\t\tprimaryActions: [] as Action< Item >[],\n\t\t\t\tregularActions: [] as Action< Item >[],\n\t\t\t}\n\t\t);\n\t}, [ actions ] );\n\n\tconst renderActionGroup = ( actionList: Action< Item >[] ) =>\n\t\tactionList.map( ( action ) => (\n\t\t\t<MenuItemTrigger\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( 'RenderModal' in action ) {\n\t\t\t\t\t\tsetActiveModalAction( action );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\taction.callback( [ item ], { registry } );\n\t\t\t\t} }\n\t\t\t\titems={ [ item ] }\n\t\t\t/>\n\t\t) );\n\n\treturn (\n\t\t<Menu.Group>\n\t\t\t{ renderActionGroup( primaryActions ) }\n\t\t\t{ primaryActions.length > 0 && regularActions.length > 0 && (\n\t\t\t\t<Menu.Separator />\n\t\t\t) }\n\t\t\t{ renderActionGroup( regularActions ) }\n\t\t</Menu.Group>\n\t);\n}\n\nexport default function ItemActions< Item >( {\n\titem,\n\tactions,\n\tisCompact,\n}: ItemActionsProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst { primaryActions, eligibleActions } = useMemo( () => {\n\t\t// If an action is eligible for all items, doesn't need\n\t\t// to provide the `isEligible` function.\n\t\tconst _eligibleActions = actions.filter(\n\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t\tconst _primaryActions = _eligibleActions.filter(\n\t\t\t( action ) => action.isPrimary\n\t\t);\n\t\treturn {\n\t\t\tprimaryActions: _primaryActions,\n\t\t\teligibleActions: _eligibleActions,\n\t\t};\n\t}, [ actions, item ] );\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tif ( isCompact ) {\n\t\treturn (\n\t\t\t<CompactItemActions\n\t\t\t\titem={ item }\n\t\t\t\tactions={ eligibleActions }\n\t\t\t\tisSmall\n\t\t\t\tregistry={ registry }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tjustify=\"flex-end\"\n\t\t\tclassName=\"dataviews-item-actions\"\n\t\t\tstyle={ {\n\t\t\t\tflexShrink: 0,\n\t\t\t\twidth: 'auto',\n\t\t\t} }\n\t\t>\n\t\t\t<PrimaryActions\n\t\t\t\titem={ item }\n\t\t\t\tactions={ primaryActions }\n\t\t\t\tregistry={ registry }\n\t\t\t/>\n\t\t\t{ ( primaryActions.length < eligibleActions.length ||\n\t\t\t\t// Since we hide primary actions on mobile, we need to show the menu\n\t\t\t\t// there if there are any actions at all.\n\t\t\t\tisMobileViewport ) && (\n\t\t\t\t<CompactItemActions\n\t\t\t\t\titem={ item }\n\t\t\t\t\tactions={ eligibleActions }\n\t\t\t\t\tregistry={ registry }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n\nfunction CompactItemActions< Item >( {\n\titem,\n\tactions,\n\tisSmall,\n\tregistry,\n}: CompactItemActionsProps< Item > ) {\n\tconst [ activeModalAction, setActiveModalAction ] = useState(\n\t\tnull as ActionModalType< Item > | null\n\t);\n\treturn (\n\t\t<>\n\t\t\t<Menu placement=\"bottom-end\">\n\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\trender={\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize={ isSmall ? 'small' : 'compact' }\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tdisabled={ ! actions.length }\n\t\t\t\t\t\t\tclassName=\"dataviews-all-actions-button\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Menu.Popover>\n\t\t\t\t\t<ActionsMenuGroup\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tregistry={ registry }\n\t\t\t\t\t\tsetActiveModalAction={ setActiveModalAction }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.Popover>\n\t\t\t</Menu>\n\t\t\t{ !! activeModalAction && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ activeModalAction }\n\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\tcloseModal={ () => setActiveModalAction( null ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function PrimaryActions< Item >( {\n\titem,\n\tactions,\n\tregistry,\n\tbuttonVariant,\n}: PrimaryActionsProps< Item > ) {\n\tconst [ activeModalAction, setActiveModalAction ] = useState( null as any );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tif ( isMobileViewport ) {\n\t\treturn null;\n\t}\n\n\tif ( ! Array.isArray( actions ) || actions.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t{ actions.map( ( action ) => (\n\t\t\t\t<ButtonTrigger\n\t\t\t\t\tkey={ action.id }\n\t\t\t\t\taction={ action }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( 'RenderModal' in action ) {\n\t\t\t\t\t\t\tsetActiveModalAction( action );\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\taction.callback( [ item ], { registry } );\n\t\t\t\t\t} }\n\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ !! activeModalAction && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ activeModalAction }\n\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\tcloseModal={ () => setActiveModalAction( null ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { MouseEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { moreVertical } from '@wordpress/icons';\nimport { useRegistry } from '@wordpress/data';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { Action, ActionModal as ActionModalType } from '../../types';\n\nconst { Menu, kebabCase } = unlock( componentsPrivateApis );\n\nexport interface ActionTriggerProps< Item > {\n\taction: Action< Item >;\n\tonClick: MouseEventHandler;\n\tisBusy?: boolean;\n\titems: Item[];\n\tvariant?: 'primary' | 'secondary' | 'tertiary' | 'link';\n}\n\nexport interface ActionModalProps< Item > {\n\taction: ActionModalType< Item >;\n\titems: Item[];\n\tcloseModal: () => void;\n}\n\ninterface ActionsMenuGroupProps< Item > {\n\tactions: Action< Item >[];\n\titem: Item;\n\tregistry: ReturnType< typeof useRegistry >;\n\tsetActiveModalAction: ( action: ActionModalType< Item > | null ) => void;\n}\n\ninterface ItemActionsProps< Item > {\n\titem: Item;\n\tactions: Action< Item >[];\n\tisCompact?: boolean;\n}\n\ninterface CompactItemActionsProps< Item > {\n\titem: Item;\n\tactions: Action< Item >[];\n\tisSmall?: boolean;\n\tregistry: ReturnType< typeof useRegistry >;\n}\n\ninterface PrimaryActionsProps< Item > {\n\titem: Item;\n\tactions: Action< Item >[];\n\tregistry: ReturnType< typeof useRegistry >;\n\tbuttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'link';\n}\n\nfunction ButtonTrigger< Item >( {\n\taction,\n\tonClick,\n\titems,\n\tvariant,\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={ !! action.disabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tvariant={ variant }\n\t\t\tonClick={ onClick }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nfunction MenuItemTrigger< Item >( {\n\taction,\n\tonClick,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\treturn (\n\t\t<Menu.Item disabled={ action.disabled } onClick={ onClick }>\n\t\t\t<Menu.ItemLabel>{ label }</Menu.ItemLabel>\n\t\t</Menu.Item>\n\t);\n}\n\nexport function ActionModal< Item >( {\n\taction,\n\titems,\n\tcloseModal,\n}: ActionModalProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\n\tconst modalHeader =\n\t\ttypeof action.modalHeader === 'function'\n\t\t\t? action.modalHeader( items )\n\t\t\t: action.modalHeader;\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ modalHeader || label }\n\t\t\t__experimentalHideHeader={ !! action.hideModalHeader }\n\t\t\tonRequestClose={ closeModal }\n\t\t\tfocusOnMount={ action.modalFocusOnMount ?? true }\n\t\t\tsize={ action.modalSize || 'medium' }\n\t\t\toverlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(\n\t\t\t\taction.id\n\t\t\t) }` }\n\t\t>\n\t\t\t<action.RenderModal items={ items } closeModal={ closeModal } />\n\t\t</Modal>\n\t);\n}\n\nexport function ActionsMenuGroup< Item >( {\n\tactions,\n\titem,\n\tregistry,\n\tsetActiveModalAction,\n}: ActionsMenuGroupProps< Item > ) {\n\tconst { primaryActions, regularActions } = useMemo( () => {\n\t\treturn actions.reduce(\n\t\t\t( acc, action ) => {\n\t\t\t\t( action.isPrimary\n\t\t\t\t\t? acc.primaryActions\n\t\t\t\t\t: acc.regularActions\n\t\t\t\t).push( action );\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t{\n\t\t\t\tprimaryActions: [] as Action< Item >[],\n\t\t\t\tregularActions: [] as Action< Item >[],\n\t\t\t}\n\t\t);\n\t}, [ actions ] );\n\n\tconst renderActionGroup = ( actionList: Action< Item >[] ) =>\n\t\tactionList.map( ( action ) => (\n\t\t\t<MenuItemTrigger\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( 'RenderModal' in action ) {\n\t\t\t\t\t\tsetActiveModalAction( action );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\taction.callback( [ item ], { registry } );\n\t\t\t\t} }\n\t\t\t\titems={ [ item ] }\n\t\t\t/>\n\t\t) );\n\n\treturn (\n\t\t<Menu.Group>\n\t\t\t{ renderActionGroup( primaryActions ) }\n\t\t\t{ renderActionGroup( regularActions ) }\n\t\t</Menu.Group>\n\t);\n}\n\nexport default function ItemActions< Item >( {\n\titem,\n\tactions,\n\tisCompact,\n}: ItemActionsProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst { primaryActions, eligibleActions } = useMemo( () => {\n\t\t// If an action is eligible for all items, doesn't need\n\t\t// to provide the `isEligible` function.\n\t\tconst _eligibleActions = actions.filter(\n\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t\tconst _primaryActions = _eligibleActions.filter(\n\t\t\t( action ) => action.isPrimary\n\t\t);\n\t\treturn {\n\t\t\tprimaryActions: _primaryActions,\n\t\t\teligibleActions: _eligibleActions,\n\t\t};\n\t}, [ actions, item ] );\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tif ( isCompact ) {\n\t\treturn (\n\t\t\t<CompactItemActions\n\t\t\t\titem={ item }\n\t\t\t\tactions={ eligibleActions }\n\t\t\t\tisSmall\n\t\t\t\tregistry={ registry }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tjustify=\"flex-end\"\n\t\t\tclassName=\"dataviews-item-actions\"\n\t\t\tstyle={ {\n\t\t\t\tflexShrink: 0,\n\t\t\t\twidth: 'auto',\n\t\t\t} }\n\t\t>\n\t\t\t<PrimaryActions\n\t\t\t\titem={ item }\n\t\t\t\tactions={ primaryActions }\n\t\t\t\tregistry={ registry }\n\t\t\t/>\n\t\t\t{ ( primaryActions.length < eligibleActions.length ||\n\t\t\t\t// Since we hide primary actions on mobile, we need to show the menu\n\t\t\t\t// there if there are any actions at all.\n\t\t\t\tisMobileViewport ) && (\n\t\t\t\t<CompactItemActions\n\t\t\t\t\titem={ item }\n\t\t\t\t\tactions={ eligibleActions }\n\t\t\t\t\tregistry={ registry }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n\nfunction CompactItemActions< Item >( {\n\titem,\n\tactions,\n\tisSmall,\n\tregistry,\n}: CompactItemActionsProps< Item > ) {\n\tconst [ activeModalAction, setActiveModalAction ] = useState(\n\t\tnull as ActionModalType< Item > | null\n\t);\n\treturn (\n\t\t<>\n\t\t\t<Menu placement=\"bottom-end\">\n\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\trender={\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize={ isSmall ? 'small' : 'compact' }\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tdisabled={ ! actions.length }\n\t\t\t\t\t\t\tclassName=\"dataviews-all-actions-button\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Menu.Popover>\n\t\t\t\t\t<ActionsMenuGroup\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tregistry={ registry }\n\t\t\t\t\t\tsetActiveModalAction={ setActiveModalAction }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.Popover>\n\t\t\t</Menu>\n\t\t\t{ !! activeModalAction && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ activeModalAction }\n\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\tcloseModal={ () => setActiveModalAction( null ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function PrimaryActions< Item >( {\n\titem,\n\tactions,\n\tregistry,\n\tbuttonVariant,\n}: PrimaryActionsProps< Item > ) {\n\tconst [ activeModalAction, setActiveModalAction ] = useState( null as any );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tif ( isMobileViewport ) {\n\t\treturn null;\n\t}\n\n\tif ( ! Array.isArray( actions ) || actions.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t{ actions.map( ( action ) => (\n\t\t\t\t<ButtonTrigger\n\t\t\t\t\tkey={ action.id }\n\t\t\t\t\taction={ action }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( 'RenderModal' in action ) {\n\t\t\t\t\t\t\tsetActiveModalAction( action );\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\taction.callback( [ item ], { registry } );\n\t\t\t\t\t} }\n\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ !! activeModalAction && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ activeModalAction }\n\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\tcloseModal={ () => setActiveModalAction( null ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dataviews-layout/index.mjs

@@ -1,8 +1,10 @@
 // packages/dataviews/src/components/dataviews-layout/index.tsx
 import { useContext } from "@wordpress/element";
+import { Spinner } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
 import DataViewsContext from "../dataviews-context/index.mjs";
 import { VIEW_LAYOUTS } from "../dataviews-layouts/index.mjs";
+import { useDelayedLoading } from "../../hooks/use-delayed-loading.mjs";
 import { jsx } from "react/jsx-runtime";
 function DataViewsLayout({ className }) {
   const {
@@ -11,6 +13,7 @@ function DataViewsLayout({ className }) {
     fields,
     getItemId,
     getItemLevel,
+    hasInitiallyLoaded,
     isLoading,
     view,
     onChangeView,
@@ -23,6 +26,15 @@ function DataViewsLayout({ className }) {
     defaultLayouts,
     empty = /* @__PURE__ */ jsx("p", { children: __("No results") })
   } = useContext(DataViewsContext);
+  const isDelayedInitialLoading = useDelayedLoading(!hasInitiallyLoaded, {
+    delay: 200
+  });
+  if (!hasInitiallyLoaded) {
+    if (!isDelayedInitialLoading) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: "dataviews-loading", children: /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Spinner, {}) }) });
+  }
   const ViewComponent = VIEW_LAYOUTS.find(
     (v) => v.type === view.type && defaultLayouts[v.type]
   )?.component;

package/build-module/components/dataviews-layout/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-layout/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../dataviews-layouts';\nimport type { ViewBaseProps } from '../../types';\n\ntype DataViewsLayoutProps = {\n\tclassName?: string;\n};\n\nexport default function DataViewsLayout( { className }: DataViewsLayoutProps ) {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tgetItemLevel,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tdefaultLayouts,\n\t\tempty = <p>{ __( 'No results' ) }</p>,\n\t} = useContext( DataViewsContext );\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type && defaultLayouts[ v.type ]\n\t)?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tclassName={ className }\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tgetItemLevel={ getItemLevel }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tonClickItem={ onClickItem }\n\t\t\trenderItemLink={ renderItemLink }\n\t\t\tisItemClickable={ isItemClickable }\n\t\t\tview={ view }\n\t\t\tempty={ empty }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAQA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAKnB,OAAO,sBAAsB;AAC7B,SAAS,oBAAoB;AAwBnB;AAjBK,SAAR,gBAAkC,EAAE,UAAU,GAA0B;AAC9E,QAAM;AAAA,IACL,UAAU,CAAC;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,oBAAC,OAAI,aAAI,YAAa,GAAG;AAAA,EAClC,IAAI,WAAY,gBAAiB;AAEjC,QAAM,gBAAgB,aAAa;AAAA,IAClC,CAAE,MAAO,EAAE,SAAS,KAAK,QAAQ,eAAgB,EAAE,IAAK;AAAA,EACzD,GAAG;AAEH,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Spinner } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../dataviews-layouts';\nimport { useDelayedLoading } from '../../hooks/use-delayed-loading';\nimport type { ViewBaseProps } from '../../types';\n\ntype DataViewsLayoutProps = {\n\tclassName?: string;\n};\n\nexport default function DataViewsLayout( { className }: DataViewsLayoutProps ) {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tgetItemLevel,\n\t\thasInitiallyLoaded,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tdefaultLayouts,\n\t\tempty = <p>{ __( 'No results' ) }</p>,\n\t} = useContext( DataViewsContext );\n\n\tconst isDelayedInitialLoading = useDelayedLoading( ! hasInitiallyLoaded, {\n\t\tdelay: 200,\n\t} );\n\t// Until the initial data load completes, show a spinner (or nothing if fast).\n\t// After that, render the layout component which preserves previous data\n\t// while loading subsequent requests.\n\tif ( ! hasInitiallyLoaded ) {\n\t\t// If the initial data load is fast, don't show the loading state at all.\n\t\tif ( ! isDelayedInitialLoading ) {\n\t\t\treturn null;\n\t\t}\n\t\t// If the initial data load takes more than 200ms, show the loading state.\n\t\treturn (\n\t\t\t<div className=\"dataviews-loading\">\n\t\t\t\t<p>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type && defaultLayouts[ v.type ]\n\t)?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tclassName={ className }\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tgetItemLevel={ getItemLevel }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tonClickItem={ onClickItem }\n\t\t\trenderItemLink={ renderItemLink }\n\t\t\tisItemClickable={ isItemClickable }\n\t\t\tview={ view }\n\t\t\tempty={ empty }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAQA,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,UAAU;AAKnB,OAAO,sBAAsB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAyBxB;AAlBK,SAAR,gBAAkC,EAAE,UAAU,GAA0B;AAC9E,QAAM;AAAA,IACL,UAAU,CAAC;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,oBAAC,OAAI,aAAI,YAAa,GAAG;AAAA,EAClC,IAAI,WAAY,gBAAiB;AAEjC,QAAM,0BAA0B,kBAAmB,CAAE,oBAAoB;AAAA,IACxE,OAAO;AAAA,EACR,CAAE;AAIF,MAAK,CAAE,oBAAqB;AAE3B,QAAK,CAAE,yBAA0B;AAChC,aAAO;AAAA,IACR;AAEA,WACC,oBAAC,SAAI,WAAU,qBACd,8BAAC,OACA,8BAAC,WAAQ,GACV,GACD;AAAA,EAEF;AAEA,QAAM,gBAAgB,aAAa;AAAA,IAClC,CAAE,MAAO,EAAE,SAAS,KAAK,QAAQ,eAAgB,EAAE,IAAK;AAAA,EACzD,GAAG;AAEH,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dataviews-layouts/activity/index.mjs

@@ -5,46 +5,60 @@ import { Stack } from "@wordpress/ui";
 import getDataByGroup from "../utils/get-data-by-group.mjs";
 import ActivityGroup from "./activity-group.mjs";
 import ActivityItems from "./activity-items.mjs";
+import { useDelayedLoading } from "../../../hooks/use-delayed-loading.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ViewActivity(props) {
   const { empty, data, fields, isLoading, view, className } = props;
-  const hasData = data?.length;
+  const isDelayedLoading = useDelayedLoading(!!isLoading);
+  const hasData = !!data?.length;
+  const groupField = view.groupBy?.field ? fields.find((field) => field.id === view.groupBy?.field) : null;
+  const dataByGroup = hasData && groupField ? getDataByGroup(data, groupField) : null;
+  const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
   if (!hasData) {
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: clsx({
-          "dataviews-loading": isLoading,
-          "dataviews-no-results": !hasData && !isLoading
+        className: clsx("dataviews-no-results", {
+          "is-refreshing": isDelayedLoading
         }),
-        children: !hasData && (isLoading ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Spinner, {}) }) : empty)
+        children: empty
       }
     );
   }
-  const wrapperClassName = clsx("dataviews-view-activity", className);
-  const groupField = view.groupBy?.field ? fields.find((field) => field.id === view.groupBy?.field) : null;
-  const dataByGroup = groupField ? getDataByGroup(data, groupField) : null;
+  const isInert = !isInfiniteScroll && !!isLoading;
+  const wrapperClassName = clsx("dataviews-view-activity", className, {
+    "is-refreshing": !isInfiniteScroll && isDelayedLoading
+  });
   const groupedEntries = dataByGroup ? Array.from(dataByGroup.entries()) : [];
   if (hasData && groupField && dataByGroup) {
-    return /* @__PURE__ */ jsx(Stack, { direction: "column", gap: "sm", className: wrapperClassName, children: groupedEntries.map(
-      ([groupName, groupData]) => /* @__PURE__ */ jsx(
-        ActivityGroup,
-        {
-          groupName,
-          groupData,
-          groupField,
-          showLabel: view.groupBy?.showLabel !== false,
-          children: /* @__PURE__ */ jsx(
-            ActivityItems,
+    return /* @__PURE__ */ jsx(
+      Stack,
+      {
+        direction: "column",
+        gap: "sm",
+        className: wrapperClassName,
+        inert: isInert ? "true" : void 0,
+        children: groupedEntries.map(
+          ([groupName, groupData]) => /* @__PURE__ */ jsx(
+            ActivityGroup,
             {
-              ...props,
-              data: groupData
-            }
+              groupName,
+              groupData,
+              groupField,
+              showLabel: view.groupBy?.showLabel !== false,
+              children: /* @__PURE__ */ jsx(
+                ActivityItems,
+                {
+                  ...props,
+                  data: groupData
+                }
+              )
+            },
+            groupName
           )
-        },
-        groupName
-      )
-    ) });
+        )
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -52,10 +66,11 @@ function ViewActivity(props) {
       {
         className: wrapperClassName,
         role: view.infiniteScrollEnabled ? "feed" : void 0,
+        inert: isInert ? "true" : void 0,
         children: /* @__PURE__ */ jsx(ActivityItems, { ...props })
       }
     ),
-    hasData && isLoading && /* @__PURE__ */ jsx("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ jsx(Spinner, {}) })
+    isInfiniteScroll && isLoading && /* @__PURE__ */ jsx("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ jsx(Spinner, {}) })
   ] });
 }
 export {

package/build-module/components/dataviews-layouts/activity/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataviews-layouts/activity/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { ViewActivityProps } from '../../../types';\nimport getDataByGroup from '../utils/get-data-by-group';\nimport ActivityGroup from './activity-group';\nimport ActivityItems from './activity-items';\n\nexport default function ViewActivity< Item >(\n\tprops: ViewActivityProps< Item >\n) {\n\tconst { empty, data, fields, isLoading, view, className } = props;\n\n\t// Handle empty/loading states\n\tconst hasData = data?.length;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData &&\n\t\t\t\t\t( isLoading ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tempty\n\t\t\t\t\t) ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst wrapperClassName = clsx( 'dataviews-view-activity', className );\n\n\t// Check if data should be grouped\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( field ) => field.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\n\n\t// Convert dataByGroup entries into array.\n\tconst groupedEntries = dataByGroup\n\t\t? Array.from( dataByGroup.entries() )\n\t\t: [];\n\n\t// Render grouped activity\n\tif ( hasData && groupField && dataByGroup ) {\n\t\treturn (\n\t\t\t<Stack direction=\"column\" gap=\"sm\" className={ wrapperClassName }>\n\t\t\t\t{ groupedEntries.map(\n\t\t\t\t\t( [ groupName, groupData ]: [ string, Item[] ] ) => (\n\t\t\t\t\t\t<ActivityGroup< Item >\n\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\tgroupName={ groupName }\n\t\t\t\t\t\t\tgroupData={ groupData }\n\t\t\t\t\t\t\tgroupField={ groupField }\n\t\t\t\t\t\t\tshowLabel={ view.groupBy?.showLabel !== false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ActivityItems< Item >\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\tdata={ groupData }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ActivityGroup>\n\t\t\t\t\t)\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t);\n\t}\n\n\t// Render flat activity (no grouping)\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclassName={ wrapperClassName }\n\t\t\t\trole={ view.infiniteScrollEnabled ? 'feed' : undefined }\n\t\t\t>\n\t\t\t\t<ActivityItems< Item > { ...props } />\n\t\t\t</div>\n\t\t\t{ hasData && isLoading && (\n\t\t\t\t<p className=\"dataviews-loading-more\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,aAAa;AAMtB,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,mBAAmB;AAoBnB,SAgDL,UAhDK,KAgDL,YAhDK;AAlBQ,SAAR,aACN,OACC;AACD,QAAM,EAAE,OAAO,MAAM,QAAQ,WAAW,MAAM,UAAU,IAAI;AAG5D,QAAM,UAAU,MAAM;AACtB,MAAK,CAAE,SAAU;AAChB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,KAAM;AAAA,UACjB,qBAAqB;AAAA,UACrB,wBAAwB,CAAE,WAAW,CAAE;AAAA,QACxC,CAAE;AAAA,QAEA,WAAE,YACD,YACD,oBAAC,OACA,8BAAC,WAAQ,GACV,IAEA;AAAA;AAAA,IAEH;AAAA,EAEF;AAEA,QAAM,mBAAmB,KAAM,2BAA2B,SAAU;AAGpE,QAAM,aAAa,KAAK,SAAS,QAC9B,OAAO,KAAM,CAAE,UAAW,MAAM,OAAO,KAAK,SAAS,KAAM,IAC3D;AACH,QAAM,cAAc,aAAa,eAAgB,MAAM,UAAW,IAAI;AAGtE,QAAM,iBAAiB,cACpB,MAAM,KAAM,YAAY,QAAQ,CAAE,IAClC,CAAC;AAGJ,MAAK,WAAW,cAAc,aAAc;AAC3C,WACC,oBAAC,SAAM,WAAU,UAAS,KAAI,MAAK,WAAY,kBAC5C,yBAAe;AAAA,MAChB,CAAE,CAAE,WAAW,SAAU,MACxB;AAAA,QAAC;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAY,KAAK,SAAS,cAAc;AAAA,UAExC;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACL,MAAO;AAAA;AAAA,UACR;AAAA;AAAA,QATM;AAAA,MAUP;AAAA,IAEF,GACD;AAAA,EAEF;AAGA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAY;AAAA,QACZ,MAAO,KAAK,wBAAwB,SAAS;AAAA,QAE7C,8BAAC,iBAAwB,GAAG,OAAQ;AAAA;AAAA,IACrC;AAAA,IACE,WAAW,aACZ,oBAAC,OAAE,WAAU,0BACZ,8BAAC,WAAQ,GACV;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { ViewActivityProps } from '../../../types';\nimport getDataByGroup from '../utils/get-data-by-group';\nimport ActivityGroup from './activity-group';\nimport ActivityItems from './activity-items';\nimport { useDelayedLoading } from '../../../hooks/use-delayed-loading';\n\nexport default function ViewActivity< Item >(\n\tprops: ViewActivityProps< Item >\n) {\n\tconst { empty, data, fields, isLoading, view, className } = props;\n\n\tconst isDelayedLoading = useDelayedLoading( !! isLoading );\n\tconst hasData = !! data?.length;\n\n\t// Check if data should be grouped\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( field ) => field.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup =\n\t\thasData && groupField ? getDataByGroup( data, groupField ) : null;\n\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'dataviews-no-results', {\n\t\t\t\t\t'is-refreshing': isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ empty }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst isInert = ! isInfiniteScroll && !! isLoading;\n\tconst wrapperClassName = clsx( 'dataviews-view-activity', className, {\n\t\t'is-refreshing': ! isInfiniteScroll && isDelayedLoading,\n\t} );\n\n\t// Convert dataByGroup entries into array.\n\tconst groupedEntries = dataByGroup\n\t\t? Array.from( dataByGroup.entries() )\n\t\t: [];\n\n\t// Render grouped activity\n\tif ( hasData && groupField && dataByGroup ) {\n\t\treturn (\n\t\t\t<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tgap=\"sm\"\n\t\t\t\tclassName={ wrapperClassName }\n\t\t\t\t// @ts-ignore\n\t\t\t\tinert={ isInert ? 'true' : undefined }\n\t\t\t>\n\t\t\t\t{ groupedEntries.map(\n\t\t\t\t\t( [ groupName, groupData ]: [ string, Item[] ] ) => (\n\t\t\t\t\t\t<ActivityGroup< Item >\n\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\tgroupName={ groupName }\n\t\t\t\t\t\t\tgroupData={ groupData }\n\t\t\t\t\t\t\tgroupField={ groupField }\n\t\t\t\t\t\t\tshowLabel={ view.groupBy?.showLabel !== false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ActivityItems< Item >\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\tdata={ groupData }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ActivityGroup>\n\t\t\t\t\t)\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t);\n\t}\n\n\t// Render flat activity (no grouping)\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclassName={ wrapperClassName }\n\t\t\t\trole={ view.infiniteScrollEnabled ? 'feed' : undefined }\n\t\t\t\t// @ts-ignore\n\t\t\t\tinert={ isInert ? 'true' : undefined }\n\t\t\t>\n\t\t\t\t<ActivityItems< Item > { ...props } />\n\t\t\t</div>\n\t\t\t{ isInfiniteScroll && isLoading && (\n\t\t\t\t<p className=\"dataviews-loading-more\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,aAAa;AAMtB,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,mBAAmB;AAC1B,SAAS,yBAAyB;AAoB/B,SAoDD,UApDC,KAoDD,YApDC;AAlBY,SAAR,aACN,OACC;AACD,QAAM,EAAE,OAAO,MAAM,QAAQ,WAAW,MAAM,UAAU,IAAI;AAE5D,QAAM,mBAAmB,kBAAmB,CAAC,CAAE,SAAU;AACzD,QAAM,UAAU,CAAC,CAAE,MAAM;AAGzB,QAAM,aAAa,KAAK,SAAS,QAC9B,OAAO,KAAM,CAAE,UAAW,MAAM,OAAO,KAAK,SAAS,KAAM,IAC3D;AACH,QAAM,cACL,WAAW,aAAa,eAAgB,MAAM,UAAW,IAAI;AAE9D,QAAM,mBAAmB,KAAK,yBAAyB,CAAE;AACzD,MAAK,CAAE,SAAU;AAChB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,KAAM,wBAAwB;AAAA,UACzC,iBAAiB;AAAA,QAClB,CAAE;AAAA,QAEA;AAAA;AAAA,IACH;AAAA,EAEF;AAEA,QAAM,UAAU,CAAE,oBAAoB,CAAC,CAAE;AACzC,QAAM,mBAAmB,KAAM,2BAA2B,WAAW;AAAA,IACpE,iBAAiB,CAAE,oBAAoB;AAAA,EACxC,CAAE;AAGF,QAAM,iBAAiB,cACpB,MAAM,KAAM,YAAY,QAAQ,CAAE,IAClC,CAAC;AAGJ,MAAK,WAAW,cAAc,aAAc;AAC3C,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,WAAY;AAAA,QAEZ,OAAQ,UAAU,SAAS;AAAA,QAEzB,yBAAe;AAAA,UAChB,CAAE,CAAE,WAAW,SAAU,MACxB;AAAA,YAAC;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAY,KAAK,SAAS,cAAc;AAAA,cAExC;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACL,MAAO;AAAA;AAAA,cACR;AAAA;AAAA,YATM;AAAA,UAUP;AAAA,QAEF;AAAA;AAAA,IACD;AAAA,EAEF;AAGA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAY;AAAA,QACZ,MAAO,KAAK,wBAAwB,SAAS;AAAA,QAE7C,OAAQ,UAAU,SAAS;AAAA,QAE3B,8BAAC,iBAAwB,GAAG,OAAQ;AAAA;AAAA,IACrC;AAAA,IACE,oBAAoB,aACrB,oBAAC,OAAE,WAAU,0BACZ,8BAAC,WAAQ,GACV;AAAA,KAEF;AAEF;",
   "names": []
 }

package/build-module/components/dataviews-layouts/grid/composite-grid.mjs

@@ -235,6 +235,7 @@ function CompositeGrid({
   data,
   isInfiniteScroll,
   className,
+  inert,
   isLoading,
   view,
   fields,
@@ -282,6 +283,7 @@ function CompositeGrid({
       "aria-busy": isLoading,
       "aria-rowcount": isInfiniteScroll ? void 0 : totalRows,
       ref: resizeObserverRef,
+      inert,
       children: chunk(data, gridColumns).map((row, i) => /* @__PURE__ */ jsx(
         Composite.Row,
         {