npm - @wordpress/dataviews - Versions diffs - 13.1.1-next.v.202603102151.0 → 14.0.0 - Mend

@wordpress/dataviews 13.1.1-next.v.202603102151.0 → 14.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (247) hide show

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

@@ -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\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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",
+  "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 {\n\tuseCallback,\n\tuseContext,\n\tuseRef,\n\tforwardRef,\n} 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';\nimport { GridItems } from '../utils/grid-items';\nimport {\n\tuseIntersectionObserver,\n\tusePlaceholdersNeeded,\n} from '../utils/use-infinite-scroll';\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\tposinset?: number;\n\tsetsize?: number;\n}\n\nconst GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(\n\tfunction GridItem(\n\t\t{\n\t\t\tview,\n\t\t\tselection,\n\t\t\tonChangeSelection,\n\t\t\tonClickItem,\n\t\t\tisItemClickable,\n\t\t\trenderItemLink,\n\t\t\tgetItemId,\n\t\t\titem,\n\t\t\tactions,\n\t\t\tmediaField,\n\t\t\ttitleField,\n\t\t\tdescriptionField,\n\t\t\tregularFields,\n\t\t\tbadgeFields,\n\t\t\thasBulkActions,\n\t\t\tconfig,\n\t\t\tposinset,\n\t\t\tsetsize,\n\t\t\t...props\n\t\t},\n\t\tforwardedRef\n\t) {\n\t\tconst {\n\t\t\tshowTitle = true,\n\t\t\tshowMedia = true,\n\t\t\tshowDescription = true,\n\t\t} = view;\n\t\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\t\tconst id = getItemId( item );\n\t\tconst elementRef = useRef< HTMLDivElement | null >( null );\n\n\t\t// Merge refs callback\n\t\tconst setRefs = useCallback(\n\t\t\t( node: HTMLDivElement | null ) => {\n\t\t\t\telementRef.current = node;\n\t\t\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\t\t\tforwardedRef( node );\n\t\t\t\t} else if ( forwardedRef ) {\n\t\t\t\t\tforwardedRef.current = node;\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ forwardedRef ]\n\t\t);\n\t\tuseIntersectionObserver( elementRef, posinset );\n\t\tconst instanceId = useInstanceId( GridItem );\n\n\t\tconst isSelected = selection.includes( id );\n\n\t\tconst mediaPlaceholder = (\n\t\t\t<span className=\"dataviews-view-grid__media-placeholder\" />\n\t\t);\n\t\tconst rendersMediaField = showMedia && mediaField?.render;\n\t\tconst renderedMediaField = rendersMediaField ? (\n\t\t\t<mediaField.render\n\t\t\t\titem={ item }\n\t\t\t\tfield={ mediaField }\n\t\t\t\tconfig={ config }\n\t\t\t/>\n\t\t) : (\n\t\t\tmediaPlaceholder\n\t\t);\n\t\tconst renderedTitleField =\n\t\t\tshowTitle && titleField?.render ? (\n\t\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t\t) : null;\n\t\tlet mediaA11yProps;\n\t\tlet titleA11yProps;\n\t\tif ( isItemClickable( item ) && onClickItem ) {\n\t\t\tif ( renderedTitleField ) {\n\t\t\t\tmediaA11yProps = {\n\t\t\t\t\t'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t\t};\n\t\t\t\ttitleA11yProps = {\n\t\t\t\t\tid: `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tmediaA11yProps = {\n\t\t\t\t\t'aria-label': __( 'Navigate to item' ),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\t\treturn (\n\t\t\t<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\t{ ...props }\n\t\t\t\tref={ setRefs }\n\t\t\t\taria-setsize={ setsize }\n\t\t\t\taria-posinset={ posinset }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tprops.className,\n\t\t\t\t\t'dataviews-view-grid__row__gridcell',\n\t\t\t\t\t'dataviews-view-grid__card',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\t\tprops.onClickCapture?.( event );\n\t\t\t\t\tif ( isAppleOS() ? event.metaKey : event.ctrlKey ) {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t\t? selection.filter(\n\t\t\t\t\t\t\t\t\t\t( itemId ) => id !== itemId\n\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t: [ ...selection, id ]\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\t\t<ItemClickWrapper\n\t\t\t\t\titem={ item }\n\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\tclassName={ clsx( 'dataviews-view-grid__media', {\n\t\t\t\t\t\t'dataviews-view-grid__media--placeholder':\n\t\t\t\t\t\t\t! rendersMediaField,\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ...mediaA11yProps }\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</ItemClickWrapper>\n\t\t\t\t{ hasBulkActions && (\n\t\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t<div className=\"dataviews-view-grid__media-actions\">\n\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tisCompact\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ showTitle && (\n\t\t\t\t\t<div className=\"dataviews-view-grid__title\">\n\t\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\ttitleField?.getValueFormatted( {\n\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\tfield: titleField,\n\t\t\t\t\t\t\t\t} ) || undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\t\talign=\"top\"\n\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\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>\n\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<Tooltip text={ field.label }>\n\t\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\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\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\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\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\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t);\n\t}\n) as < Item >(\n\tprops: GridItemProps< Item > & {\n\t\tref?: React.ForwardedRef< HTMLDivElement >;\n\t}\n) => React.ReactNode;\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\t// Calculate placeholders needed for infinite scroll\n\tconst placeholdersNeeded = usePlaceholdersNeeded(\n\t\tdata,\n\t\tisInfiniteScroll,\n\t\tgridColumns\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// Render infinite scroll layout (no rows, feed semantics)\n\t\t\t\tisInfiniteScroll && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-grid-infinite-scroll',\n\t\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t\t\t'compact',\n\t\t\t\t\t\t\t\t\t\t\t\t'comfortable',\n\t\t\t\t\t\t\t\t\t\t\t].includes( view.layout.density ),\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\tpreviewSize={ view.layout?.previewSize }\n\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"feed\"\n\t\t\t\t\t\tfocusWrap\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\tinert={ inert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ /* Render placeholders for unloaded items in first row */ }\n\t\t\t\t\t\t{ Array.from( { length: placeholdersNeeded } ).map(\n\t\t\t\t\t\t\t( _, index ) => (\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tkey={ `placeholder-${ index }` }\n\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\t\t\trole=\"article\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row__gridcell dataviews-view-grid__card dataviews-view-grid__placeholder\"\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\taria-hidden\n\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ data.map( ( item ) => {\n\t\t\t\t\t\t\tconst itemId = getItemId( item );\n\t\t\t\t\t\t\t// Use position from item for infinite scroll\n\t\t\t\t\t\t\tconst stablePosition = ( item as any ).position;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tkey={ itemId }\n\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\tid={ itemId }\n\t\t\t\t\t\t\t\t\t\t\trole=\"article\"\n\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\t\t\t\tposinset={ stablePosition }\n\t\t\t\t\t\t\t\t\t\t\tsetsize={\n\t\t\t\t\t\t\t\t\t\t\t\tpaginationInfo.totalItems\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Composite>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render standard grid layout (with rows, grid semantics)\n\t\t\t\t! isInfiniteScroll && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trole=\"grid\"\n\t\t\t\t\t\tclassName={ clsx( 'dataviews-view-grid', className, {\n\t\t\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\tfocusWrap\n\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\taria-rowcount={ totalRows }\n\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\tinert={ inert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ chunk( data, gridColumns ).map( ( row, i ) => (\n\t\t\t\t\t\t\t<Composite.Row\n\t\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\trole=\"row\"\n\t\t\t\t\t\t\t\t\t\taria-rowindex={ i + 1 }\n\t\t\t\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\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\t\t\t__( 'Row %d' ),\n\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row\"\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat( ${ gridColumns }, minmax(0, 1fr) )`,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ row.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst itemId = getItemId( item );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\t\t\tkey={ itemId }\n\t\t\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={ itemId }\n\t\t\t\t\t\t\t\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\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\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\t\t\t\tisItemClickable={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisItemClickable\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\trenderItemLink={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderItemLink\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\tgetItemId={ getItemId }\n\t\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\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\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\tregularFields={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields\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\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\t\t\thasBulkActions={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thasBulkActions\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\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t) }\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</Composite.Row>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Composite>\n\t\t\t\t)\n\t\t\t}\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["GridItem"]
 }

package/build-module/components/dataviews-layouts/index.mjs CHANGED Viewed

@@ -21,8 +21,8 @@ import {
   LAYOUT_PICKER_GRID,
   LAYOUT_PICKER_TABLE
 } from "../../constants.mjs";
-import PreviewSizePicker from "./utils/preview-size-picker.mjs";
 import DensityPicker from "./utils/density-picker.mjs";
+import GridConfigOptions from "./utils/grid-config-options.mjs";
 var VIEW_LAYOUTS = [
   {
     type: LAYOUT_TABLE,
@@ -36,7 +36,7 @@ var VIEW_LAYOUTS = [
     label: __("Grid"),
     component: ViewGrid,
     icon: category,
-    viewConfigOptions: PreviewSizePicker
+    viewConfigOptions: GridConfigOptions
   },
   {
     type: LAYOUT_LIST,
@@ -57,7 +57,7 @@ var VIEW_LAYOUTS = [
     label: __("Grid"),
     component: ViewPickerGrid,
     icon: category,
-    viewConfigOptions: PreviewSizePicker,
+    viewConfigOptions: GridConfigOptions,
     isPicker: true
   },
   {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-layouts/index.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n\tscheduled,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './table';\nimport ViewGrid from './grid';\nimport ViewList from './list';\nimport ViewActivity from './activity';\nimport ViewPickerGrid from './picker-grid';\nimport ViewPickerTable from './picker-table';\nimport {\n\tLAYOUT_GRID,\n\tLAYOUT_LIST,\n\tLAYOUT_TABLE,\n\tLAYOUT_ACTIVITY,\n\tLAYOUT_PICKER_GRID,\n\tLAYOUT_PICKER_TABLE,\n} from '../../constants';\nimport PreviewSizePicker from './utils/preview-size-picker';\nimport DensityPicker from './utils/density-picker';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: PreviewSizePicker,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_ACTIVITY,\n\t\tlabel: __( 'Activity' ),\n\t\tcomponent: ViewActivity,\n\t\ticon: scheduled,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewPickerGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: PreviewSizePicker,\n\t\tisPicker: true,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewPickerTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t\tisPicker: true,\n\t},\n];\n"],
-  "mappings": ";AAGA,SAAS,IAAI,aAAa;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,qBAAqB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,uBAAuB;AAC9B,OAAO,mBAAmB;AAEnB,IAAM,eAAe;AAAA,EAC3B;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM,MAAM,IAAI,uBAAuB;AAAA,IACvC,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,UAAW;AAAA,IACtB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n\tscheduled,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './table';\nimport ViewGrid from './grid';\nimport ViewList from './list';\nimport ViewActivity from './activity';\nimport ViewPickerGrid from './picker-grid';\nimport ViewPickerTable from './picker-table';\nimport {\n\tLAYOUT_GRID,\n\tLAYOUT_LIST,\n\tLAYOUT_TABLE,\n\tLAYOUT_ACTIVITY,\n\tLAYOUT_PICKER_GRID,\n\tLAYOUT_PICKER_TABLE,\n} from '../../constants';\nimport DensityPicker from './utils/density-picker';\nimport GridConfigOptions from './utils/grid-config-options';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: GridConfigOptions,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_ACTIVITY,\n\t\tlabel: __( 'Activity' ),\n\t\tcomponent: ViewActivity,\n\t\ticon: scheduled,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewPickerGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: GridConfigOptions,\n\t\tisPicker: true,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewPickerTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t\tisPicker: true,\n\t},\n];\n"],
+  "mappings": ";AAGA,SAAS,IAAI,aAAa;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,qBAAqB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,mBAAmB;AAC1B,OAAO,uBAAuB;AAEvB,IAAM,eAAe;AAAA,EAC3B;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM,MAAM,IAAI,uBAAuB;AAAA,IACvC,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,UAAW;AAAA,IACtB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AACD;",
   "names": []
 }

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

@@ -9,7 +9,7 @@ import {
 } from "@wordpress/components";
 import { __, sprintf } from "@wordpress/i18n";
 import { useInstanceId } from "@wordpress/compose";
-import { useContext } from "@wordpress/element";
+import { useContext, useRef } from "@wordpress/element";
 import { Stack } from "@wordpress/ui";
 import { unlock } from "../../../lock-unlock.mjs";
 import DataViewsSelectionCheckbox from "../../dataviews-selection-checkbox/index.mjs";
@@ -17,6 +17,11 @@ import DataViewsContext from "../../dataviews-context/index.mjs";
 import { useIsMultiselectPicker } from "../../dataviews-picker-footer/index.mjs";
 import { GridItems } from "../utils/grid-items.mjs";
 import getDataByGroup from "../utils/get-data-by-group.mjs";
+import { useGridColumns } from "../grid/preview-size-picker.mjs";
+import {
+  useIntersectionObserver,
+  usePlaceholdersNeeded
+} from "../utils/use-infinite-scroll.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { Badge } = unlock(componentsPrivateApis);
 function GridItem({
@@ -37,7 +42,12 @@ function GridItem({
 }) {
   const { showTitle = true, showMedia = true, showDescription = true } = view;
   const id = getItemId(item);
+  const elementRef = useRef(null);
   const isSelected = selection.includes(id);
+  const setElementRef = (element) => {
+    elementRef.current = element;
+  };
+  useIntersectionObserver(elementRef, posinset);
   const renderedMediaField = mediaField?.render ? /* @__PURE__ */ jsx(
     mediaField.render,
     {
@@ -50,6 +60,7 @@ function GridItem({
   return /* @__PURE__ */ jsxs(
     Composite.Item,
     {
+      ref: setElementRef,
       "aria-label": titleField ? titleField.getValue({ item }) || __("(no title)") : void 0,
       render: ({ children, ...props }) => /* @__PURE__ */ jsx(Stack, { direction: "column", children, ...props }),
       role: "option",
@@ -251,10 +262,16 @@ function ViewPickerGrid({
   const size = "900px";
   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;
+  const isInfiniteScroll = (view.infiniteScrollEnabled && !dataByGroup) ?? false;
   const currentPage = view?.page ?? 1;
   const perPage = view?.perPage ?? 0;
   const setSize = isInfiniteScroll ? paginationInfo?.totalItems : void 0;
+  const gridColumns = useGridColumns();
+  const placeholdersNeeded = usePlaceholdersNeeded(
+    data,
+    isInfiniteScroll,
+    gridColumns
+  );
   return /* @__PURE__ */ jsxs(Fragment, {
     // Render multiple groups.
     children: [
@@ -267,7 +284,12 @@ function ViewPickerGrid({
           "aria-multiselectable": isMultiselect,
           className: clsx(
             "dataviews-view-picker-grid",
-            className
+            className,
+            {
+              [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
+                view.layout.density
+              )
+            }
           ),
           "aria-label": itemListLabel,
           render: ({ children, ...props }) => /* @__PURE__ */ jsx(
@@ -296,7 +318,7 @@ function ViewPickerGrid({
                     "aria-busy": isLoading,
                     ref: resizeObserverRef,
                     children: groupItems.map((item) => {
-                      const posInSet = (currentPage - 1) * perPage + data.indexOf(item) + 1;
+                      const posInSet = item.position ?? (currentPage - 1) * perPage + data.indexOf(item) + 1;
                       return /* @__PURE__ */ jsx(
                         GridItem,
                         {
@@ -329,7 +351,7 @@ function ViewPickerGrid({
         }
       ),
       // Render a single grid with all data.
-      hasData && !dataByGroup && /* @__PURE__ */ jsx(
+      hasData && !dataByGroup && /* @__PURE__ */ jsxs(
         Composite,
         {
           render: /* @__PURE__ */ jsx(
@@ -337,7 +359,13 @@ function ViewPickerGrid({
             {
               className: clsx(
                 "dataviews-view-picker-grid",
-                className
+                className,
+                {
+                  [`has-${view.layout?.density}-density`]: view.layout?.density && [
+                    "compact",
+                    "comfortable"
+                  ].includes(view.layout.density)
+                }
               ),
               previewSize: usedPreviewSize,
               "aria-busy": isLoading,
@@ -349,34 +377,53 @@ function ViewPickerGrid({
           role: "listbox",
           "aria-multiselectable": isMultiselect,
           "aria-label": itemListLabel,
-          children: data.map((item, index) => {
-            let posinset = isInfiniteScroll ? index + 1 : void 0;
-            if (!isInfiniteScroll) {
-              posinset = (currentPage - 1) * perPage + index + 1;
-            }
-            return /* @__PURE__ */ jsx(
-              GridItem,
-              {
-                view,
-                multiselect: isMultiselect,
-                selection,
-                onChangeSelection,
-                getItemId,
-                item,
-                mediaField,
-                titleField,
-                descriptionField,
-                regularFields,
-                badgeFields,
-                config: {
-                  sizes: size
+          children: [
+            Array.from({ length: placeholdersNeeded }).map(
+              (_, index) => /* @__PURE__ */ jsx(
+                Composite.Item,
+                {
+                  render: ({ children, ...props }) => /* @__PURE__ */ jsx(
+                    Stack,
+                    {
+                      direction: "column",
+                      children,
+                      ...props
+                    }
+                  ),
+                  role: "option",
+                  "aria-hidden": true,
+                  tabIndex: -1,
+                  className: "dataviews-view-picker-grid__card dataviews-view-picker-grid__placeholder"
                 },
-                posinset,
-                setsize: setSize
-              },
-              getItemId(item)
-            );
-          })
+                `placeholder-${index}`
+              )
+            ),
+            data.map((item) => {
+              const posinset = item.position;
+              return /* @__PURE__ */ jsx(
+                GridItem,
+                {
+                  view,
+                  multiselect: isMultiselect,
+                  selection,
+                  onChangeSelection,
+                  getItemId,
+                  item,
+                  mediaField,
+                  titleField,
+                  descriptionField,
+                  regularFields,
+                  badgeFields,
+                  config: {
+                    sizes: size
+                  },
+                  posinset,
+                  setsize: setSize
+                },
+                getItemId(item)
+              );
+            })
+          ]
         }
       ),
       // Render empty state.

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataviews-layouts/picker-grid/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tSpinner,\n\tFlex,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n\tComposite,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useContext } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport DataViewsSelectionCheckbox from '../../dataviews-selection-checkbox';\nimport DataViewsContext from '../../dataviews-context';\nimport { useIsMultiselectPicker } from '../../dataviews-picker-footer';\nimport type {\n\tNormalizedField,\n\tViewPickerGrid as ViewPickerGridType,\n\tViewPickerGridProps,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\nimport { GridItems } from '../utils/grid-items';\nconst { Badge } = unlock( componentsPrivateApis );\nimport getDataByGroup from '../utils/get-data-by-group';\n\ninterface GridItemProps< Item > {\n\tview: ViewPickerGridType;\n\tmultiselect?: boolean;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\tconfig: {\n\t\tsizes: string;\n\t};\n\tposinset?: number;\n\tsetsize?: number;\n}\n\nfunction GridItem< Item >( {\n\tview,\n\tmultiselect,\n\tselection,\n\tonChangeSelection,\n\tgetItemId,\n\titem,\n\tmediaField,\n\ttitleField,\n\tdescriptionField,\n\tregularFields,\n\tbadgeFields,\n\tconfig,\n\tposinset,\n\tsetsize,\n}: GridItemProps< Item > ) {\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\tconst renderedMediaField = mediaField?.render ? (\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) : null;\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\treturn (\n\t\t<Composite.Item\n\t\t\taria-label={\n\t\t\t\ttitleField\n\t\t\t\t\t? titleField.getValue( { item } ) || __( '(no title)' )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tkey={ id }\n\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t<Stack direction=\"column\" children={ children } { ...props } />\n\t\t\t) }\n\t\t\trole=\"option\"\n\t\t\taria-posinset={ posinset }\n\t\t\taria-setsize={ setsize }\n\t\t\tclassName={ clsx( 'dataviews-view-picker-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t} ) }\n\t\t\taria-selected={ isSelected }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tconst newSelection = multiselect\n\t\t\t\t\t\t? [ ...selection, id ]\n\t\t\t\t\t\t: [ id ];\n\t\t\t\t\tonChangeSelection( newSelection );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ showMedia && renderedMediaField && (\n\t\t\t\t<div className=\"dataviews-view-picker-grid__media\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showMedia && renderedMediaField && (\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={ false }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showTitle && (\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews-view-picker-grid__title-actions\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-picker-grid__title-field dataviews-title-field\">\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</div>\n\t\t\t\t</Stack>\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-picker-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-picker-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-picker-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-picker-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<FlexItem className=\"dataviews-view-picker-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\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-picker-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</Composite.Item>\n\t);\n}\n\nfunction GridGroup< Item >( {\n\tgroupName,\n\tgroupField,\n\tshowLabel = true,\n\tchildren,\n}: {\n\tgroupName: string;\n\tgroupField: NormalizedField< Item >;\n\tshowLabel?: boolean;\n\tchildren: ReactNode;\n} ) {\n\tconst headerId = useInstanceId(\n\t\tGridGroup,\n\t\t'dataviews-view-picker-grid-group__header'\n\t);\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tkey={ groupName }\n\t\t\tgap=\"sm\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headerId }\n\t\t>\n\t\t\t<h3\n\t\t\t\tclassName=\"dataviews-view-picker-grid-group__header\"\n\t\t\t\tid={ headerId }\n\t\t\t>\n\t\t\t\t{ showLabel\n\t\t\t\t\t? sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t  )\n\t\t\t\t\t: groupName }\n\t\t\t</h3>\n\t\t\t{ children }\n\t\t</Stack>\n\t);\n}\n\nfunction ViewPickerGrid< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tselection,\n\tview,\n\tclassName,\n\tempty,\n}: ViewPickerGridProps< Item > ) {\n\tconst { resizeObserverRef, paginationInfo, itemListLabel } =\n\t\tuseContext( DataViewsContext );\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\tconst hasData = !! data?.length;\n\tconst usedPreviewSize = view.layout?.previewSize;\n\tconst isMultiselect = useIsMultiselectPicker( actions );\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\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\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\n\tconst currentPage = view?.page ?? 1;\n\tconst perPage = view?.perPage ?? 0;\n\tconst setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;\n\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<Composite\n\t\t\t\t\t\tvirtualFocus\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'dataviews-view-picker-grid',\n\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t) }\n\t\t\t\t\t\taria-label={ itemListLabel }\n\t\t\t\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\t\t\t\tchildren={ children }\n\t\t\t\t\t\t\t\t{ ...props }\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\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<GridGroup\n\t\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\t\tgroupName={ groupName }\n\t\t\t\t\t\t\t\t\tgroupField={ groupField }\n\t\t\t\t\t\t\t\t\tshowLabel={\n\t\t\t\t\t\t\t\t\t\tview.groupBy?.showLabel !== false\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\t\t<GridItems\n\t\t\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns:\n\t\t\t\t\t\t\t\t\t\t\t\tusedPreviewSize &&\n\t\t\t\t\t\t\t\t\t\t\t\t`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\tresizeObserverRef as React.RefObject< HTMLDivElement >\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\t\t\tconst posInSet =\n\t\t\t\t\t\t\t\t\t\t\t\t( currentPage - 1 ) * perPage +\n\t\t\t\t\t\t\t\t\t\t\t\tdata.indexOf( item ) +\n\t\t\t\t\t\t\t\t\t\t\t\t1;\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmultiselect={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisMultiselect\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\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\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\tgetItemId={ getItemId }\n\t\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\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\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\tregularFields={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields\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\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\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\tposinset={ posInSet }\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetsize={ setSize }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t</GridItems>\n\t\t\t\t\t\t\t\t</GridGroup>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Composite>\n\t\t\t\t)\n\t\t\t}\n\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<Composite\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-picker-grid',\n\t\t\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\tresizeObserverRef as React.RefObject< HTMLDivElement >\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\tvirtualFocus\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\t\t\taria-label={ itemListLabel }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\t\t\t\tlet posinset = isInfiniteScroll\n\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif ( ! isInfiniteScroll ) {\n\t\t\t\t\t\t\t\t// When infinite scroll isn't active, take pagination into account\n\t\t\t\t\t\t\t\t// when calculating the posinset.\n\t\t\t\t\t\t\t\tposinset =\n\t\t\t\t\t\t\t\t\t( currentPage - 1 ) * perPage + index + 1;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\tmultiselect={ isMultiselect }\n\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tposinset={ posinset }\n\t\t\t\t\t\t\t\t\tsetsize={ setSize }\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</Composite>\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 ViewPickerGrid;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tSpinner,\n\tFlex,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n\tComposite,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useContext, useRef } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport DataViewsSelectionCheckbox from '../../dataviews-selection-checkbox';\nimport DataViewsContext from '../../dataviews-context';\nimport { useIsMultiselectPicker } from '../../dataviews-picker-footer';\nimport type {\n\tNormalizedField,\n\tViewPickerGrid as ViewPickerGridType,\n\tViewPickerGridProps,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\nimport { GridItems } from '../utils/grid-items';\nconst { Badge } = unlock( componentsPrivateApis );\nimport getDataByGroup from '../utils/get-data-by-group';\nimport { useGridColumns } from '../grid/preview-size-picker';\nimport {\n\tuseIntersectionObserver,\n\tusePlaceholdersNeeded,\n} from '../utils/use-infinite-scroll';\n\ninterface GridItemProps< Item > {\n\tview: ViewPickerGridType;\n\tmultiselect?: boolean;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\tconfig: {\n\t\tsizes: string;\n\t};\n\tposinset?: number;\n\tsetsize?: number;\n}\n\nfunction GridItem< Item >( {\n\tview,\n\tmultiselect,\n\tselection,\n\tonChangeSelection,\n\tgetItemId,\n\titem,\n\tmediaField,\n\ttitleField,\n\tdescriptionField,\n\tregularFields,\n\tbadgeFields,\n\tconfig,\n\tposinset,\n\tsetsize,\n}: GridItemProps< Item > ) {\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst id = getItemId( item );\n\tconst elementRef = useRef< HTMLElement | null >( null );\n\n\tconst isSelected = selection.includes( id );\n\n\tconst setElementRef = ( element: HTMLElement | null ) => {\n\t\telementRef.current = element;\n\t};\n\n\tuseIntersectionObserver( elementRef, posinset );\n\n\tconst renderedMediaField = mediaField?.render ? (\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) : null;\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\treturn (\n\t\t<Composite.Item\n\t\t\tref={ setElementRef }\n\t\t\taria-label={\n\t\t\t\ttitleField\n\t\t\t\t\t? titleField.getValue( { item } ) || __( '(no title)' )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tkey={ id }\n\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t<Stack direction=\"column\" children={ children } { ...props } />\n\t\t\t) }\n\t\t\trole=\"option\"\n\t\t\taria-posinset={ posinset }\n\t\t\taria-setsize={ setsize }\n\t\t\tclassName={ clsx( 'dataviews-view-picker-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t} ) }\n\t\t\taria-selected={ isSelected }\n\t\t\tonClick={ () => {\n\t\t\t\t// Toggle in/out of selection array\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tconst newSelection = multiselect\n\t\t\t\t\t\t? [ ...selection, id ]\n\t\t\t\t\t\t: [ id ];\n\t\t\t\t\tonChangeSelection( newSelection );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ showMedia && renderedMediaField && (\n\t\t\t\t<div className=\"dataviews-view-picker-grid__media\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showMedia && renderedMediaField && (\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={ false }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showTitle && (\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews-view-picker-grid__title-actions\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-picker-grid__title-field dataviews-title-field\">\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</div>\n\t\t\t\t</Stack>\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-picker-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-picker-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-picker-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-picker-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<FlexItem className=\"dataviews-view-picker-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\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-picker-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</Composite.Item>\n\t);\n}\n\nfunction GridGroup< Item >( {\n\tgroupName,\n\tgroupField,\n\tshowLabel = true,\n\tchildren,\n}: {\n\tgroupName: string;\n\tgroupField: NormalizedField< Item >;\n\tshowLabel?: boolean;\n\tchildren: ReactNode;\n} ) {\n\tconst headerId = useInstanceId(\n\t\tGridGroup,\n\t\t'dataviews-view-picker-grid-group__header'\n\t);\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tkey={ groupName }\n\t\t\tgap=\"sm\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headerId }\n\t\t>\n\t\t\t<h3\n\t\t\t\tclassName=\"dataviews-view-picker-grid-group__header\"\n\t\t\t\tid={ headerId }\n\t\t\t>\n\t\t\t\t{ showLabel\n\t\t\t\t\t? sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t  )\n\t\t\t\t\t: groupName }\n\t\t\t</h3>\n\t\t\t{ children }\n\t\t</Stack>\n\t);\n}\n\nfunction ViewPickerGrid< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tselection,\n\tview,\n\tclassName,\n\tempty,\n}: ViewPickerGridProps< Item > ) {\n\tconst { resizeObserverRef, paginationInfo, itemListLabel } =\n\t\tuseContext( DataViewsContext );\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\tconst hasData = !! data?.length;\n\tconst usedPreviewSize = view.layout?.previewSize;\n\tconst isMultiselect = useIsMultiselectPicker( actions );\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\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\n\tconst isInfiniteScroll =\n\t\t( view.infiniteScrollEnabled && ! dataByGroup ) ?? false;\n\n\tconst currentPage = view?.page ?? 1;\n\tconst perPage = view?.perPage ?? 0;\n\tconst setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;\n\n\t// Calculate placeholders needed for infinite scroll\n\tconst gridColumns = useGridColumns();\n\tconst placeholdersNeeded = usePlaceholdersNeeded(\n\t\tdata,\n\t\tisInfiniteScroll,\n\t\tgridColumns\n\t);\n\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<Composite\n\t\t\t\t\t\tvirtualFocus\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'dataviews-view-picker-grid',\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\taria-label={ itemListLabel }\n\t\t\t\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\t\t\t\tchildren={ children }\n\t\t\t\t\t\t\t\t{ ...props }\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\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<GridGroup\n\t\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\t\tgroupName={ groupName }\n\t\t\t\t\t\t\t\t\tgroupField={ groupField }\n\t\t\t\t\t\t\t\t\tshowLabel={\n\t\t\t\t\t\t\t\t\t\tview.groupBy?.showLabel !== false\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\t\t<GridItems\n\t\t\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns:\n\t\t\t\t\t\t\t\t\t\t\t\tusedPreviewSize &&\n\t\t\t\t\t\t\t\t\t\t\t\t`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\tresizeObserverRef as React.RefObject< HTMLDivElement >\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\t\t\t// Use position from item if available (infinite scroll), otherwise calculate.\n\t\t\t\t\t\t\t\t\t\t\tconst posInSet =\n\t\t\t\t\t\t\t\t\t\t\t\t( item as any ).position ??\n\t\t\t\t\t\t\t\t\t\t\t\t( currentPage - 1 ) * perPage +\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata.indexOf( item ) +\n\t\t\t\t\t\t\t\t\t\t\t\t\t1;\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmultiselect={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisMultiselect\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\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\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\tgetItemId={ getItemId }\n\t\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\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\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\tregularFields={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields\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\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\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\tposinset={ posInSet }\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetsize={ setSize }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t</GridItems>\n\t\t\t\t\t\t\t\t</GridGroup>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Composite>\n\t\t\t\t)\n\t\t\t}\n\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<Composite\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-picker-grid',\n\t\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t\t\t'compact',\n\t\t\t\t\t\t\t\t\t\t\t\t'comfortable',\n\t\t\t\t\t\t\t\t\t\t\t].includes( view.layout.density ),\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\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\tresizeObserverRef as React.RefObject< HTMLDivElement >\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\tvirtualFocus\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\t\t\taria-label={ itemListLabel }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ /* Render placeholders for unloaded items in first row */ }\n\t\t\t\t\t\t{ Array.from( { length: placeholdersNeeded } ).map(\n\t\t\t\t\t\t\t( _, index ) => (\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tkey={ `placeholder-${ index }` }\n\t\t\t\t\t\t\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\t\t\tchildren={ children }\n\t\t\t\t\t\t\t\t\t\t\t{ ...props }\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\trole=\"option\"\n\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__card dataviews-view-picker-grid__placeholder\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ data.map( ( item ) => {\n\t\t\t\t\t\t\t// Use position from item for accessibility in infinite scroll mode.\n\t\t\t\t\t\t\tconst posinset = ( item as any ).position;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\tmultiselect={ isMultiselect }\n\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tposinset={ posinset }\n\t\t\t\t\t\t\t\t\tsetsize={ setSize }\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</Composite>\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 ViewPickerGrid;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dataviews-layouts/picker-table/index.mjs CHANGED Viewed

@@ -17,6 +17,7 @@ import { sortValues } from "../../../constants.mjs";
 import ColumnHeaderMenu from "../table/column-header-menu.mjs";
 import ColumnPrimary from "../table/column-primary.mjs";
 import getDataByGroup from "../utils/get-data-by-group.mjs";
+import { useIntersectionObserver } from "../utils/use-infinite-scroll.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function TableColumnField({
   item,
@@ -51,6 +52,11 @@ function TableRow({
   const { paginationInfo } = useContext(DataViewsContext);
   const isSelected = selection.includes(id);
   const [isHovered, setIsHovered] = useState(false);
+  const elementRef = useRef(null);
+  const setElementRef = (element) => {
+    elementRef.current = element;
+  };
+  useIntersectionObserver(elementRef, posinset);
   const {
     showTitle = true,
     showMedia = true,
@@ -68,6 +74,7 @@ function TableRow({
   return /* @__PURE__ */ jsxs(
     Composite.Item,
     {
+      ref: setElementRef,
       render: ({ children, ...props }) => /* @__PURE__ */ jsx(
         "tr",
         {
@@ -179,6 +186,9 @@ function ViewPickerTable({
       headerMenuToFocusRef.current = void 0;
     }
   });
+  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;
   const tableNoticeId = useId();
   if (nextHeaderMenuToFocus) {
     headerMenuToFocusRef.current = nextHeaderMenuToFocus;
@@ -196,8 +206,6 @@ function ViewPickerTable({
   const descriptionField = fields.find(
     (field) => field.id === view.descriptionField
   );
-  const groupField = view.groupBy?.field ? fields.find((f) => f.id === view.groupBy?.field) : null;
-  const dataByGroup = groupField ? getDataByGroup(data, groupField) : null;
   const { showTitle = true, showMedia = true, showDescription = true } = view;
   const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription;
   const columns = view.fields ?? [];
@@ -211,7 +219,6 @@ function ViewPickerTable({
       headerMenuRefs.current.delete(column);
     }
   };
-  const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "table",
@@ -243,7 +250,8 @@ function ViewPickerTable({
                     onChangeSelection,
                     data,
                     actions,
-                    getItemId
+                    getItemId,
+                    disableSelectAll: isInfiniteScroll
                   }
                 ) }),
                 hasPrimaryColumn && /* @__PURE__ */ jsx("th", { children: titleField && /* @__PURE__ */ jsx(
@@ -351,24 +359,28 @@ function ViewPickerTable({
               render: /* @__PURE__ */ jsx("tbody", { role: "presentation" }),
               virtualFocus: true,
               orientation: "vertical",
-              children: hasData && data.map((item, index) => /* @__PURE__ */ jsx(
-                TableRow,
-                {
-                  item,
-                  fields,
-                  id: getItemId(item) || index.toString(),
-                  view,
-                  titleField,
-                  mediaField,
-                  descriptionField,
-                  selection,
-                  getItemId,
-                  onChangeSelection,
-                  multiselect: isMultiselect,
-                  posinset: index + 1
-                },
-                getItemId(item)
-              ))
+              children: hasData && data.map((item, index) => {
+                const itemId = getItemId(item);
+                const posinset = item.position;
+                return /* @__PURE__ */ jsx(
+                  TableRow,
+                  {
+                    item,
+                    fields,
+                    id: itemId || index.toString(),
+                    view,
+                    titleField,
+                    mediaField,
+                    descriptionField,
+                    selection,
+                    getItemId,
+                    onChangeSelection,
+                    multiselect: isMultiselect,
+                    posinset
+                  },
+                  itemId
+                );
+              })
             }
           )
         ]