@wordpress/dataviews 12.1.1-next.v.202602241322.0 → 13.0.0

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

@@ -11,6 +11,7 @@ function DataViewsLayout({ className }) {
     fields,
     getItemId,
     getItemLevel,
+    hasInitiallyLoaded,
     isLoading,
     view,
     onChangeView,
@@ -23,6 +24,9 @@ function DataViewsLayout({ className }) {
     defaultLayouts,
     empty = /* @__PURE__ */ jsx("p", { children: __("No results") })
   } = useContext(DataViewsContext);
+  if (!hasInitiallyLoaded) {
+    return null;
+  }
   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 { __ } 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\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\tif ( ! hasInitiallyLoaded ) {\n\t\treturn null;\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,UAAU;AAKnB,OAAO,sBAAsB;AAC7B,SAAS,oBAAoB;AAyBnB;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,MAAK,CAAE,oBAAqB;AAC3B,WAAO;AAAA,EACR;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,
         {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataviews-layouts/grid/composite-grid.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement, HTMLAttributes } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tFlexItem,\n\tTooltip,\n\tComposite,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport ItemActions from '../../dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../dataviews-selection-checkbox';\nimport DataViewsContext from '../../dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nconst { Badge } = unlock( componentsPrivateApis );\nimport { useGridColumns } from './preview-size-picker';\n\nfunction chunk< T >( array: T[], size: number ): T[][] {\n\tconst chunks: T[][] = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\ninterface GridItemProps< Item > extends HTMLAttributes< HTMLDivElement > {\n\tview: ViewGridType;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n\titem: Item;\n\tactions: Action< Item >[];\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\thasBulkActions: boolean;\n\tconfig: {\n\t\tsizes: string;\n\t};\n}\n\nconst GridItem = forwardRef( function GridItem< Item >(\n\t{\n\t\tview,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tgetItemId,\n\t\titem,\n\t\tactions,\n\t\tmediaField,\n\t\ttitleField,\n\t\tdescriptionField,\n\t\tregularFields,\n\t\tbadgeFields,\n\t\thasBulkActions,\n\t\tconfig,\n\t\t...props\n\t}: GridItemProps< Item >,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst instanceId = useInstanceId( GridItem );\n\tconst isSelected = selection.includes( id );\n\tconst mediaPlaceholder = (\n\t\t<span className=\"dataviews-view-grid__media-placeholder\" />\n\t);\n\tconst rendersMediaField = showMedia && mediaField?.render;\n\tconst renderedMediaField = rendersMediaField ? (\n\t\t<mediaField.render\n\t\t\titem={ item }\n\t\t\tfield={ mediaField }\n\t\t\tconfig={ config }\n\t\t/>\n\t) : (\n\t\tmediaPlaceholder\n\t);\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\tlet mediaA11yProps;\n\tlet titleA11yProps;\n\tif ( isItemClickable( item ) && onClickItem ) {\n\t\tif ( renderedTitleField ) {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t\ttitleA11yProps = {\n\t\t\t\tid: `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t} else {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-label': __( 'Navigate to item' ),\n\t\t\t};\n\t\t}\n\t}\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tprops.className,\n\t\t\t\t'dataviews-view-grid__row__gridcell',\n\t\t\t\t'dataviews-view-grid__card',\n\t\t\t\t{\n\t\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tprops.onClickCapture?.( event );\n\t\t\t\tif ( isAppleOS() ? event.metaKey : event.ctrlKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<ItemClickWrapper\n\t\t\t\titem={ item }\n\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\tclassName={ clsx( 'dataviews-view-grid__media', {\n\t\t\t\t\t'dataviews-view-grid__media--placeholder':\n\t\t\t\t\t\t! rendersMediaField,\n\t\t\t\t} ) }\n\t\t\t\t{ ...mediaA11yProps }\n\t\t\t>\n\t\t\t\t{ renderedMediaField }\n\t\t\t</ItemClickWrapper>\n\t\t\t{ hasBulkActions && (\n\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! actions?.length && (\n\t\t\t\t<div className=\"dataviews-view-grid__media-actions\">\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showTitle && (\n\t\t\t\t<div className=\"dataviews-view-grid__title\">\n\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\ttitleField?.getValueFormatted( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tfield: titleField,\n\t\t\t\t\t\t\t} ) || undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\talign=\"top\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\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<Tooltip text={ field.label }>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n} ) as < Item >(\n\tprops: GridItemProps< Item > & {\n\t\tref?: React.ForwardedRef< HTMLDivElement >;\n\t}\n) => React.ReactNode;\n\ninterface CompositeGridProps< Item > {\n\tdata: Item[];\n\tisInfiniteScroll: boolean;\n\tclassName?: string;\n\tisLoading?: boolean;\n\tview: ViewGridType;\n\tfields: NormalizedField< Item >[];\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tgetItemId: ( item: Item ) => string;\n\tactions: Action< Item >[];\n}\n\nexport default function CompositeGrid< Item >( {\n\tdata,\n\tisInfiniteScroll,\n\tclassName,\n\tisLoading,\n\tview,\n\tfields,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\tactions,\n}: CompositeGridProps< Item > ) {\n\tconst { paginationInfo, resizeObserverRef } =\n\t\tuseContext( DataViewsContext );\n\tconst gridColumns = useGridColumns();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\tconst titleField = fields.find(\n\t\t( field ) => field.id === view?.titleField\n\t);\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view?.mediaField\n\t);\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view?.descriptionField\n\t);\n\tconst otherFields = view.fields ?? [];\n\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\tconst totalRows = Math.ceil( data.length / gridColumns );\n\n\treturn (\n\t\t<Composite\n\t\t\trole={ isInfiniteScroll ? 'feed' : 'grid' }\n\t\t\tclassName={ clsx( 'dataviews-view-grid', className ) }\n\t\t\tfocusWrap\n\t\t\taria-busy={ isLoading }\n\t\t\taria-rowcount={ isInfiniteScroll ? undefined : totalRows }\n\t\t\tref={ resizeObserverRef }\n\t\t>\n\t\t\t{ chunk( data, gridColumns ).map( ( row, i ) => (\n\t\t\t\t<Composite.Row\n\t\t\t\t\tkey={ i }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"row\"\n\t\t\t\t\t\t\taria-rowindex={ i + 1 }\n\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t/* translators: %d: The row number in the grid */\n\t\t\t\t\t\t\t\t__( 'Row %d' ),\n\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat( ${ gridColumns }, minmax(0, 1fr) )`,\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{ row.map( ( item, indexInRow ) => {\n\t\t\t\t\t\tconst index = i * gridColumns + indexInRow;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? 'article'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'gridcell'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\taria-setsize={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? paginationInfo.totalItems\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\taria-posinset={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Composite.Row>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement, HTMLAttributes } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tFlexItem,\n\tTooltip,\n\tComposite,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport ItemActions from '../../dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../dataviews-selection-checkbox';\nimport DataViewsContext from '../../dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nconst { Badge } = unlock( componentsPrivateApis );\nimport { useGridColumns } from './preview-size-picker';\n\nfunction chunk< T >( array: T[], size: number ): T[][] {\n\tconst chunks: T[][] = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\ninterface GridItemProps< Item > extends HTMLAttributes< HTMLDivElement > {\n\tview: ViewGridType;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n\titem: Item;\n\tactions: Action< Item >[];\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\thasBulkActions: boolean;\n\tconfig: {\n\t\tsizes: string;\n\t};\n}\n\nconst GridItem = forwardRef( function GridItem< Item >(\n\t{\n\t\tview,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tgetItemId,\n\t\titem,\n\t\tactions,\n\t\tmediaField,\n\t\ttitleField,\n\t\tdescriptionField,\n\t\tregularFields,\n\t\tbadgeFields,\n\t\thasBulkActions,\n\t\tconfig,\n\t\t...props\n\t}: GridItemProps< Item >,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst instanceId = useInstanceId( GridItem );\n\tconst isSelected = selection.includes( id );\n\tconst mediaPlaceholder = (\n\t\t<span className=\"dataviews-view-grid__media-placeholder\" />\n\t);\n\tconst rendersMediaField = showMedia && mediaField?.render;\n\tconst renderedMediaField = rendersMediaField ? (\n\t\t<mediaField.render\n\t\t\titem={ item }\n\t\t\tfield={ mediaField }\n\t\t\tconfig={ config }\n\t\t/>\n\t) : (\n\t\tmediaPlaceholder\n\t);\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\tlet mediaA11yProps;\n\tlet titleA11yProps;\n\tif ( isItemClickable( item ) && onClickItem ) {\n\t\tif ( renderedTitleField ) {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t\ttitleA11yProps = {\n\t\t\t\tid: `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t} else {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-label': __( 'Navigate to item' ),\n\t\t\t};\n\t\t}\n\t}\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tprops.className,\n\t\t\t\t'dataviews-view-grid__row__gridcell',\n\t\t\t\t'dataviews-view-grid__card',\n\t\t\t\t{\n\t\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tprops.onClickCapture?.( event );\n\t\t\t\tif ( isAppleOS() ? event.metaKey : event.ctrlKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<ItemClickWrapper\n\t\t\t\titem={ item }\n\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\tclassName={ clsx( 'dataviews-view-grid__media', {\n\t\t\t\t\t'dataviews-view-grid__media--placeholder':\n\t\t\t\t\t\t! rendersMediaField,\n\t\t\t\t} ) }\n\t\t\t\t{ ...mediaA11yProps }\n\t\t\t>\n\t\t\t\t{ renderedMediaField }\n\t\t\t</ItemClickWrapper>\n\t\t\t{ hasBulkActions && (\n\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! actions?.length && (\n\t\t\t\t<div className=\"dataviews-view-grid__media-actions\">\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showTitle && (\n\t\t\t\t<div className=\"dataviews-view-grid__title\">\n\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\ttitleField?.getValueFormatted( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tfield: titleField,\n\t\t\t\t\t\t\t} ) || undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\talign=\"top\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\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<Tooltip text={ field.label }>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n} ) as < Item >(\n\tprops: GridItemProps< Item > & {\n\t\tref?: React.ForwardedRef< HTMLDivElement >;\n\t}\n) => React.ReactNode;\n\ninterface CompositeGridProps< Item > {\n\tdata: Item[];\n\tisInfiniteScroll: boolean;\n\tclassName?: string;\n\tinert?: string;\n\tisLoading?: boolean;\n\tview: ViewGridType;\n\tfields: NormalizedField< Item >[];\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tgetItemId: ( item: Item ) => string;\n\tactions: Action< Item >[];\n}\n\nexport default function CompositeGrid< Item >( {\n\tdata,\n\tisInfiniteScroll,\n\tclassName,\n\tinert,\n\tisLoading,\n\tview,\n\tfields,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\tactions,\n}: CompositeGridProps< Item > ) {\n\tconst { paginationInfo, resizeObserverRef } =\n\t\tuseContext( DataViewsContext );\n\tconst gridColumns = useGridColumns();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\tconst titleField = fields.find(\n\t\t( field ) => field.id === view?.titleField\n\t);\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view?.mediaField\n\t);\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view?.descriptionField\n\t);\n\tconst otherFields = view.fields ?? [];\n\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\tconst totalRows = Math.ceil( data.length / gridColumns );\n\n\treturn (\n\t\t<Composite\n\t\t\trole={ isInfiniteScroll ? 'feed' : 'grid' }\n\t\t\tclassName={ clsx( 'dataviews-view-grid', className ) }\n\t\t\tfocusWrap\n\t\t\taria-busy={ isLoading }\n\t\t\taria-rowcount={ isInfiniteScroll ? undefined : totalRows }\n\t\t\tref={ resizeObserverRef }\n\t\t\t// @ts-ignore\n\t\t\tinert={ inert }\n\t\t>\n\t\t\t{ chunk( data, gridColumns ).map( ( row, i ) => (\n\t\t\t\t<Composite.Row\n\t\t\t\t\tkey={ i }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"row\"\n\t\t\t\t\t\t\taria-rowindex={ i + 1 }\n\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t/* translators: %d: The row number in the grid */\n\t\t\t\t\t\t\t\t__( 'Row %d' ),\n\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat( ${ gridColumns }, minmax(0, 1fr) )`,\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{ row.map( ( item, indexInRow ) => {\n\t\t\t\t\t\tconst index = i * gridColumns + indexInRow;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? 'article'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'gridcell'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\taria-setsize={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? paginationInfo.totalItems\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\taria-posinset={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Composite.Row>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["GridItem"]
 }

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

@@ -5,6 +5,7 @@ import { __, sprintf } from "@wordpress/i18n";
 import { Stack } from "@wordpress/ui";
 import getDataByGroup from "../utils/get-data-by-group.mjs";
 import CompositeGrid from "./composite-grid.mjs";
+import { useDelayedLoading } from "../../../hooks/use-delayed-loading.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ViewGrid({
   actions,
@@ -21,12 +22,27 @@ function ViewGrid({
   className,
   empty
 }) {
+  const isDelayedLoading = useDelayedLoading(!!isLoading);
   const hasData = !!data?.length;
   const groupField = view.groupBy?.field ? fields.find((f) => f.id === view.groupBy?.field) : null;
   const dataByGroup = groupField ? getDataByGroup(data, groupField) : null;
   const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
+  if (!hasData) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("dataviews-no-results", {
+          "is-refreshing": isDelayedLoading
+        }),
+        children: empty
+      }
+    );
+  }
   const gridProps = {
-    className,
+    className: clsx(className, {
+      "is-refreshing": !isInfiniteScroll && isDelayedLoading
+    }),
+    inert: !isInfiniteScroll && !!isLoading ? "true" : void 0,
     isLoading,
     view,
     fields,
@@ -68,7 +84,7 @@ function ViewGrid({
         )
       ) }),
       // Render a single grid with all data.
-      hasData && !dataByGroup && /* @__PURE__ */ jsx(
+      !dataByGroup && /* @__PURE__ */ jsx(
         CompositeGrid,
         {
           ...gridProps,
@@ -76,18 +92,7 @@ function ViewGrid({
           isInfiniteScroll: !!isInfiniteScroll
         }
       ),
-      // Render empty state.
-      !hasData && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx({
-            "dataviews-loading": isLoading,
-            "dataviews-no-results": !isLoading
-          }),
-          children: isLoading ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Spinner, {}) }) : empty
-        }
-      ),
-      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, {}) })
     ]
   });
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataviews-layouts/grid/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { ViewGridProps } from '../../../types';\nimport getDataByGroup from '../utils/get-data-by-group';\nimport CompositeGrid from './composite-grid';\n\nfunction ViewGrid< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tselection,\n\tview,\n\tclassName,\n\tempty,\n}: ViewGridProps< Item > ) {\n\tconst hasData = !! data?.length;\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( f ) => f.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\tconst gridProps = {\n\t\tclassName,\n\t\tisLoading,\n\t\tview,\n\t\tfields,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tgetItemId,\n\t\tactions,\n\t};\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// Render multiple groups.\n\t\t\t\thasData && groupField && dataByGroup && (\n\t\t\t\t\t<Stack direction=\"column\" gap=\"lg\">\n\t\t\t\t\t\t{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"dataviews-view-grid__group-header\">\n\t\t\t\t\t\t\t\t\t\t{ view.groupBy?.showLabel === false\n\t\t\t\t\t\t\t\t\t\t\t? groupName\n\t\t\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t\t\t\t\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t<CompositeGrid\n\t\t\t\t\t\t\t\t\t\t{ ...gridProps }\n\t\t\t\t\t\t\t\t\t\tdata={ groupItems }\n\t\t\t\t\t\t\t\t\t\tisInfiniteScroll={ false }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Stack>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render a single grid with all data.\n\t\t\t\thasData && ! dataByGroup && (\n\t\t\t\t\t<CompositeGrid\n\t\t\t\t\t\t{ ...gridProps }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tisInfiniteScroll={ !! isInfiniteScroll }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render empty state.\n\t\t\t\t! hasData && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ isLoading ? (\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\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\nexport default ViewGrid;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa;AAMtB,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAqCxB,mBAYO,KALD,YAPN;AAnCF,SAAS,SAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,UAAU,CAAC,CAAE,MAAM;AACzB,QAAM,aAAa,KAAK,SAAS,QAC9B,OAAO,KAAM,CAAE,MAAO,EAAE,OAAO,KAAK,SAAS,KAAM,IACnD;AACH,QAAM,cAAc,aAAa,eAAgB,MAAM,UAAW,IAAI;AACtE,QAAM,mBAAmB,KAAK,yBAAyB,CAAE;AACzD,QAAM,YAAY;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,SACC;AAAA;AAAA,IAGE;AAAA,iBAAW,cAAc,eACxB,oBAAC,SAAM,WAAU,UAAS,KAAI,MAC3B,gBAAM,KAAM,YAAY,QAAQ,CAAE,EAAE;AAAA,QACrC,CAAE,CAAE,WAAW,UAAW,MACzB;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YAEV,KAAI;AAAA,YAEJ;AAAA,kCAAC,QAAG,WAAU,qCACX,eAAK,SAAS,cAAc,QAC3B,YACA;AAAA;AAAA,gBAEA,GAAI,YAAa;AAAA,gBACjB,WAAW;AAAA,gBACX;AAAA,cACA,GACJ;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACL,MAAO;AAAA,kBACP,kBAAmB;AAAA;AAAA,cACpB;AAAA;AAAA;AAAA,UAjBM;AAAA,QAkBP;AAAA,MAEF,GACD;AAAA;AAAA,MAKD,WAAW,CAAE,eACZ;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACL;AAAA,UACA,kBAAmB,CAAC,CAAE;AAAA;AAAA,MACvB;AAAA;AAAA,MAKD,CAAE,WACD;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,KAAM;AAAA,YACjB,qBAAqB;AAAA,YACrB,wBAAwB,CAAE;AAAA,UAC3B,CAAE;AAAA,UAEA,sBACD,oBAAC,OACA,8BAAC,WAAQ,GACV,IAEA;AAAA;AAAA,MAEF;AAAA,MAGA,WAAW,aACZ,oBAAC,OAAE,WAAU,0BACZ,8BAAC,WAAQ,GACV;AAAA;AAAA,GAEF;AAEF;AAEA,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { ViewGridProps } from '../../../types';\nimport getDataByGroup from '../utils/get-data-by-group';\nimport CompositeGrid from './composite-grid';\nimport { useDelayedLoading } from '../../../hooks/use-delayed-loading';\n\nfunction ViewGrid< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tselection,\n\tview,\n\tclassName,\n\tempty,\n}: ViewGridProps< Item > ) {\n\tconst isDelayedLoading = useDelayedLoading( !! isLoading );\n\tconst hasData = !! data?.length;\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( f ) => f.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\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\tconst gridProps = {\n\t\tclassName: clsx( className, {\n\t\t\t'is-refreshing': ! isInfiniteScroll && isDelayedLoading,\n\t\t} ),\n\t\tinert: ! isInfiniteScroll && !! isLoading ? 'true' : undefined,\n\t\tisLoading,\n\t\tview,\n\t\tfields,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tgetItemId,\n\t\tactions,\n\t};\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// Render multiple groups.\n\t\t\t\thasData && groupField && dataByGroup && (\n\t\t\t\t\t<Stack direction=\"column\" gap=\"lg\">\n\t\t\t\t\t\t{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"dataviews-view-grid__group-header\">\n\t\t\t\t\t\t\t\t\t\t{ view.groupBy?.showLabel === false\n\t\t\t\t\t\t\t\t\t\t\t? groupName\n\t\t\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t\t\t\t\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t<CompositeGrid\n\t\t\t\t\t\t\t\t\t\t{ ...gridProps }\n\t\t\t\t\t\t\t\t\t\tdata={ groupItems }\n\t\t\t\t\t\t\t\t\t\tisInfiniteScroll={ false }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Stack>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render a single grid with all data.\n\t\t\t\t! dataByGroup && (\n\t\t\t\t\t<CompositeGrid\n\t\t\t\t\t\t{ ...gridProps }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tisInfiniteScroll={ !! isInfiniteScroll }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\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\nexport default ViewGrid;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa;AAMtB,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,SAAS,yBAAyB;AA0B/B,SA0BD,UA1BC,KAiCK,YAjCL;AAxBH,SAAS,SAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,mBAAmB,kBAAmB,CAAC,CAAE,SAAU;AACzD,QAAM,UAAU,CAAC,CAAE,MAAM;AACzB,QAAM,aAAa,KAAK,SAAS,QAC9B,OAAO,KAAM,CAAE,MAAO,EAAE,OAAO,KAAK,SAAS,KAAM,IACnD;AACH,QAAM,cAAc,aAAa,eAAgB,MAAM,UAAW,IAAI;AACtE,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;AACA,QAAM,YAAY;AAAA,IACjB,WAAW,KAAM,WAAW;AAAA,MAC3B,iBAAiB,CAAE,oBAAoB;AAAA,IACxC,CAAE;AAAA,IACF,OAAO,CAAE,oBAAoB,CAAC,CAAE,YAAY,SAAS;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,SACC;AAAA;AAAA,IAGE;AAAA,iBAAW,cAAc,eACxB,oBAAC,SAAM,WAAU,UAAS,KAAI,MAC3B,gBAAM,KAAM,YAAY,QAAQ,CAAE,EAAE;AAAA,QACrC,CAAE,CAAE,WAAW,UAAW,MACzB;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YAEV,KAAI;AAAA,YAEJ;AAAA,kCAAC,QAAG,WAAU,qCACX,eAAK,SAAS,cAAc,QAC3B,YACA;AAAA;AAAA,gBAEA,GAAI,YAAa;AAAA,gBACjB,WAAW;AAAA,gBACX;AAAA,cACA,GACJ;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACL,MAAO;AAAA,kBACP,kBAAmB;AAAA;AAAA,cACpB;AAAA;AAAA;AAAA,UAjBM;AAAA,QAkBP;AAAA,MAEF,GACD;AAAA;AAAA,MAKD,CAAE,eACD;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACL;AAAA,UACA,kBAAmB,CAAC,CAAE;AAAA;AAAA,MACvB;AAAA,MAGA,oBAAoB,aACrB,oBAAC,OAAE,WAAU,0BACZ,8BAAC,WAAQ,GACV;AAAA;AAAA,GAEF;AAEF;AAEA,IAAO,eAAQ;",
   "names": []
 }

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

@@ -23,6 +23,7 @@ import { Stack } from "@wordpress/ui";
 import { unlock } from "../../../lock-unlock.mjs";
 import { ActionsMenuGroup, ActionModal } from "../../dataviews-item-actions/index.mjs";
 import DataViewsContext from "../../dataviews-context/index.mjs";
+import { useDelayedLoading } from "../../../hooks/use-delayed-loading.mjs";
 import getDataByGroup from "../utils/get-data-by-group.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { Menu } = unlock(componentsPrivateApis);
@@ -153,6 +154,8 @@ function ListItem({
     }
   ) }) : null;
   const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ jsx(titleField.render, { item, field: titleField }) : null;
+  const renderDescription = showDescription && descriptionField?.render;
+  const hasOnlyMediaAndTitle = !!renderedMediaField && !renderDescription && !otherFields.length;
   const usedActions = eligibleActions?.length > 0 && /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -260,7 +263,7 @@ function ListItem({
                 direction: "row",
                 gap: "md",
                 justify: "start",
-                align: "flex-start",
+                align: hasOnlyMediaAndTitle ? "center" : "flex-start",
                 style: { flex: 1, minWidth: 0 },
                 children: [
                   renderedMediaField,
@@ -282,7 +285,7 @@ function ListItem({
                           ),
                           usedActions
                         ] }),
-                        showDescription && descriptionField?.render && /* @__PURE__ */ jsx("div", { className: "dataviews-view-list__field", children: /* @__PURE__ */ jsx(
+                        renderDescription && /* @__PURE__ */ jsx("div", { className: "dataviews-view-list__field", children: /* @__PURE__ */ jsx(
                           descriptionField.render,
                           {
                             item,
@@ -349,6 +352,7 @@ function ViewList(props) {
     empty
   } = props;
   const baseId = useInstanceId(ViewList, "view-list");
+  const isDelayedLoading = useDelayedLoading(!!isLoading);
   const selectedItem = data?.findLast(
     (item) => selection.includes(getItemId(item))
   );
@@ -372,6 +376,7 @@ function ViewList(props) {
     [generateCompositeItemIdPrefix]
   );
   const [activeCompositeId, setActiveCompositeId] = useState(void 0);
+  const compositeRef = useRef(null);
   useEffect(() => {
     if (selectedItem) {
       setActiveCompositeId(
@@ -400,7 +405,11 @@ function ViewList(props) {
       );
       const targetCompositeItemId = generateCompositeId(itemIdPrefix);
       setActiveCompositeId(targetCompositeItemId);
-      document.getElementById(targetCompositeItemId)?.focus();
+      if (compositeRef.current?.contains(
+        compositeRef.current.ownerDocument.activeElement
+      )) {
+        document.getElementById(targetCompositeItemId)?.focus();
+      }
     },
     [data, generateCompositeItemIdPrefix]
   );
@@ -432,25 +441,26 @@ function ViewList(props) {
     },
     [selectCompositeItem, activeItemIndex]
   );
-  const hasData = data?.length;
+  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 groupField = view.groupBy?.field ? fields.find((field) => field.id === view.groupBy?.field) : null;
-  const dataByGroup = groupField ? getDataByGroup(data, groupField) : null;
   if (hasData && groupField && dataByGroup) {
     return /* @__PURE__ */ jsx(
       Composite,
       {
+        ref: compositeRef,
         id: `${baseId}`,
         render: /* @__PURE__ */ jsx("div", {}),
         className: "dataviews-view-list__group",
@@ -510,16 +520,19 @@ function ViewList(props) {
     /* @__PURE__ */ jsx(
       Composite,
       {
+        ref: compositeRef,
         id: baseId,
         render: /* @__PURE__ */ jsx("div", {}),
         className: clsx("dataviews-view-list", className, {
           [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
             view.layout.density
-          )
+          ),
+          "is-refreshing": !isInfiniteScroll && isDelayedLoading
         }),
         role: view.infiniteScrollEnabled ? "feed" : "grid",
         activeId: activeCompositeId,
         setActiveId: setActiveCompositeId,
+        inert: !isInfiniteScroll && !!isLoading ? "true" : void 0,
         children: data.map((item, index) => {
           const id = generateCompositeItemIdPrefix(item);
           return /* @__PURE__ */ jsx(
@@ -543,7 +556,7 @@ function ViewList(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 {