@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

package/build-module/dataforms-layouts/row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalHStack","HStack","__experimentalSpacer","Spacer","__experimentalVStack","VStack","__experimentalHeading","Heading","useContext","DataFormContext","DataFormLayout","isCombinedField","normalizeLayout","getFormFieldLayout","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Header","title","className","spacing","children","alignment","level","size","EMPTY_WRAPPER","FormRowField","data","field","onChange","hideLabelFromVision","fields","layout","type","form","map","child","id","label","as","FieldLayout","nestedField","fieldDefinition","find","f","Edit","RegularLayout","component"],"sources":["@wordpress/dataviews/src/dataforms-layouts/row/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\t__experimentalHeading as Heading,\n} from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { FieldLayoutProps, Form, NormalizedRowLayout } from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { isCombinedField } from '../is-combined-field';\nimport { normalizeLayout } from '../../normalize-form-fields';\nimport { getFormFieldLayout } from '..';\n\nfunction Header( { title }: { title: string } ) {\n\treturn (\n\t\t<VStack className=\"dataforms-layouts-row__header\" spacing={ 4 }>\n\t\t\t<HStack alignment=\"center\">\n\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t\t<Spacer />\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<>{ children }</>\n);\n\nexport default function FormRowField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\n\tconst layout = normalizeLayout( {\n\t\t...field.layout,\n\t\ttype: 'row',\n\t} ) as NormalizedRowLayout;\n\n\tif ( isCombinedField( field ) ) {\n\t\tconst form: Form = {\n\t\t\tfields: field.children.map( ( child ) => {\n\t\t\t\tif ( typeof child === 'string' ) {\n\t\t\t\t\treturn { id: child };\n\t\t\t\t}\n\t\t\t\treturn child;\n\t\t\t} ),\n\t\t};\n\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t{ ! hideLabelFromVision && field.label && (\n\t\t\t\t\t<Header title={ field.label } />\n\t\t\t\t) }\n\t\t\t\t<HStack alignment={ layout.alignment } spacing={ 4 }>\n\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tas={ EMPTY_WRAPPER }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, nestedField ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ nestedField.id }\n\t\t\t\t\t\t\t\tclassName=\"dataforms-layouts-row__field-control\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\tfield={ nestedField }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DataFormLayout>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find( ( f ) => f.id === field.id );\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"dataforms-layouts-row__field-control\">\n\t\t\t\t<RegularLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/dataviews-layouts/grid/index.js

@@ -20,6 +20,7 @@ import DataViewsSelectionCheckbox from '../../components/dataviews-selection-che
 import DataViewsContext from '../../components/dataviews-context';
 import { useHasAPossibleBulkAction, useSomeItemHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
+import { GridItems } from '../utils/grid-items';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   Badge
@@ -62,6 +63,7 @@ function GridItem({
     item: item,
     field: titleField
   }) : null;
+  const shouldRenderMedia = showMedia && renderedMediaField;
   let mediaA11yProps;
   let titleA11yProps;
   if (isItemClickable(item) && onClickItem) {
@@ -99,7 +101,7 @@ function GridItem({
     role: infiniteScrollEnabled ? 'article' : undefined,
     "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : undefined,
     "aria-posinset": posinset,
-    children: [showMedia && renderedMediaField && /*#__PURE__*/_jsx(ItemClickWrapper, {
+    children: [shouldRenderMedia && /*#__PURE__*/_jsx(ItemClickWrapper, {
       item: item,
       isItemClickable: isItemClickable,
       onClickItem: onClickItem,
@@ -107,14 +109,21 @@ function GridItem({
       className: "dataviews-view-grid__media",
       ...mediaA11yProps,
       children: renderedMediaField
-    }), hasBulkActions && showMedia && renderedMediaField && /*#__PURE__*/_jsx(DataViewsSelectionCheckbox, {
+    }), hasBulkActions && shouldRenderMedia && /*#__PURE__*/_jsx(DataViewsSelectionCheckbox, {
       item: item,
       selection: selection,
       onChangeSelection: onChangeSelection,
       getItemId: getItemId,
       titleField: titleField,
       disabled: !hasBulkAction
-    }), /*#__PURE__*/_jsxs(HStack, {
+    }), !showTitle && shouldRenderMedia && !!actions?.length && /*#__PURE__*/_jsx("div", {
+      className: "dataviews-view-grid__media-actions",
+      children: /*#__PURE__*/_jsx(ItemActions, {
+        item: item,
+        actions: actions,
+        isCompact: true
+      })
+    }), showTitle && /*#__PURE__*/_jsxs(HStack, {
       justify: "space-between",
       className: "dataviews-view-grid__title-actions",
       children: [/*#__PURE__*/_jsx(ItemClickWrapper, {
@@ -263,11 +272,9 @@ function ViewGrid({
           children: sprintf(
           // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
           __('%1$s: %2$s'), groupField.label, groupName)
-        }), /*#__PURE__*/_jsx("div", {
+        }), /*#__PURE__*/_jsx(GridItems, {
           className: clsx('dataviews-view-grid', className),
-          style: {
-            gridTemplateColumns: usedPreviewSize && `repeat(auto-fill, minmax(${usedPreviewSize}px, 1fr))`
-          },
+          previewSize: usedPreviewSize,
           "aria-busy": isLoading,
           ref: resizeObserverRef,
           children: groupItems.map(item => {
@@ -296,11 +303,9 @@ function ViewGrid({
       }, groupName))
     }),
     // Render a single grid with all data.
-    hasData && !dataByGroup && /*#__PURE__*/_jsx("div", {
+    hasData && !dataByGroup && /*#__PURE__*/_jsx(GridItems, {
       className: clsx('dataviews-view-grid', className),
-      style: {
-        gridTemplateColumns: usedPreviewSize && `repeat(auto-fill, minmax(${usedPreviewSize}px, 1fr))`
-      },
+      previewSize: usedPreviewSize,
       "aria-busy": isLoading,
       ref: resizeObserverRef,
       role: isInfiniteScroll ? 'feed' : undefined,

package/build-module/dataviews-layouts/grid/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","Tooltip","privateApis","componentsPrivateApis","__","sprintf","useInstanceId","isAppleOS","useContext","unlock","ItemActions","DataViewsSelectionCheckbox","DataViewsContext","useHasAPossibleBulkAction","useSomeItemHasAPossibleBulkAction","ItemClickWrapper","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Badge","GridItem","view","selection","onChangeSelection","onClickItem","isItemClickable","renderItemLink","getItemId","item","actions","mediaField","titleField","descriptionField","regularFields","badgeFields","hasBulkActions","config","posinset","showTitle","showMedia","showDescription","infiniteScrollEnabled","hasBulkAction","id","instanceId","isSelected","includes","renderedMediaField","render","field","renderedTitleField","mediaA11yProps","titleA11yProps","paginationInfo","spacing","className","onClickCapture","event","metaKey","ctrlKey","stopPropagation","preventDefault","filter","itemId","role","undefined","totalItems","children","disabled","justify","length","isCompact","wrap","alignment","map","gap","expanded","style","height","direction","text","label","header","maxHeight","ViewGrid","data","fields","isLoading","empty","_view$fields","resizeObserverRef","find","otherFields","reduce","accumulator","fieldId","f","key","layout","push","hasData","usedPreviewSize","previewSize","size","groupField","groupByField","dataByGroup","groups","groupName","getValue","has","set","get","Map","isInfiniteScroll","Array","from","entries","groupItems","gridTemplateColumns","ref","sizes","index"],"sources":["@wordpress/dataviews/src/dataviews-layouts/grid/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n\tTooltip,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport ItemActions from '../../components/dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport DataViewsContext from '../../components/dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../components/dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n\tViewGridProps,\n} from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nconst { Badge } = unlock( componentsPrivateApis );\n\ninterface GridItemProps< Item > {\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}\n\nfunction GridItem< Item >( {\n\tview,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\ttitleField,\n\tdescriptionField,\n\tregularFields,\n\tbadgeFields,\n\thasBulkActions,\n\tconfig,\n\tposinset,\n}: GridItemProps< Item > ) {\n\tconst {\n\t\tshowTitle = true,\n\t\tshowMedia = true,\n\t\tshowDescription = true,\n\t\tinfiniteScrollEnabled,\n\t} = 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 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\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\tconst { paginationInfo } = useContext( DataViewsContext );\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ clsx( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t} ) }\n\t\t\tonClickCapture={ ( 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\trole={ infiniteScrollEnabled ? 'article' : undefined }\n\t\t\taria-setsize={\n\t\t\t\tinfiniteScrollEnabled ? paginationInfo.totalItems : undefined\n\t\t\t}\n\t\t\taria-posinset={ posinset }\n\t\t>\n\t\t\t{ showMedia && renderedMediaField && (\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=\"dataviews-view-grid__media\"\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) }\n\t\t\t{ hasBulkActions && 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={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\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=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t>\n\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t</ItemClickWrapper>\n\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t<VStack spacing={ 1 }>\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<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\twrap\n\t\t\t\t\t\talignment=\"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</HStack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tspacing={ 1 }\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</VStack>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\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 { resizeObserverRef } = useContext( 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 hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\tconst usedPreviewSize = view.layout?.previewSize;\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.groupByField\n\t\t? fields.find( ( f ) => f.id === view.groupByField )\n\t\t: null;\n\n\t// Group data by groupByField if specified\n\tconst dataByGroup = groupField\n\t\t? data.reduce( ( groups: Map< string, typeof data >, item ) => {\n\t\t\t\tconst groupName = groupField.getValue( { item } );\n\t\t\t\tif ( ! groups.has( groupName ) ) {\n\t\t\t\t\tgroups.set( groupName, [] );\n\t\t\t\t}\n\t\t\t\tgroups.get( groupName )?.push( item );\n\t\t\t\treturn groups;\n\t\t  }, new Map< string, typeof data >() )\n\t\t: null;\n\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\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<VStack spacing={ 4 }>\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<VStack key={ groupName } spacing={ 2 }>\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{ sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\tgroupName\n\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<div\n\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t'dataviews-view-grid',\n\t\t\t\t\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t\t\t\t\t) }\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={ resizeObserverRef }\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\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\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</div>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\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<div\n\t\t\t\t\t\tclassName={ clsx( 'dataviews-view-grid', className ) }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tgridTemplateColumns:\n\t\t\t\t\t\t\t\tusedPreviewSize &&\n\t\t\t\t\t\t\t\t`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\trole={ isInfiniteScroll ? 'feed' : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ data.map( ( item, index ) => {\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\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\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\tactions={ actions }\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\thasBulkActions={ hasBulkActions }\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={\n\t\t\t\t\t\t\t\t\t\tisInfiniteScroll ? index + 1 : undefined\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</div>\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<p>{ isLoading ? <Spinner /> : empty }</p>\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":"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","ignoreList":[]}
+{"version":3,"names":["clsx","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","Tooltip","privateApis","componentsPrivateApis","__","sprintf","useInstanceId","isAppleOS","useContext","unlock","ItemActions","DataViewsSelectionCheckbox","DataViewsContext","useHasAPossibleBulkAction","useSomeItemHasAPossibleBulkAction","ItemClickWrapper","GridItems","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Badge","GridItem","view","selection","onChangeSelection","onClickItem","isItemClickable","renderItemLink","getItemId","item","actions","mediaField","titleField","descriptionField","regularFields","badgeFields","hasBulkActions","config","posinset","showTitle","showMedia","showDescription","infiniteScrollEnabled","hasBulkAction","id","instanceId","isSelected","includes","renderedMediaField","render","field","renderedTitleField","shouldRenderMedia","mediaA11yProps","titleA11yProps","paginationInfo","spacing","className","onClickCapture","event","metaKey","ctrlKey","stopPropagation","preventDefault","filter","itemId","role","undefined","totalItems","children","disabled","length","isCompact","justify","wrap","alignment","map","gap","expanded","style","height","direction","text","label","header","maxHeight","ViewGrid","data","fields","isLoading","empty","_view$fields","resizeObserverRef","find","otherFields","reduce","accumulator","fieldId","f","key","layout","push","hasData","usedPreviewSize","previewSize","size","groupField","groupByField","dataByGroup","groups","groupName","getValue","has","set","get","Map","isInfiniteScroll","Array","from","entries","groupItems","ref","sizes","index"],"sources":["@wordpress/dataviews/src/dataviews-layouts/grid/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n\tTooltip,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport ItemActions from '../../components/dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport DataViewsContext from '../../components/dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../components/dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n\tViewGridProps,\n} from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nimport { GridItems } from '../utils/grid-items';\nconst { Badge } = unlock( componentsPrivateApis );\n\ninterface GridItemProps< Item > {\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}\n\nfunction GridItem< Item >( {\n\tview,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\ttitleField,\n\tdescriptionField,\n\tregularFields,\n\tbadgeFields,\n\thasBulkActions,\n\tconfig,\n\tposinset,\n}: GridItemProps< Item > ) {\n\tconst {\n\t\tshowTitle = true,\n\t\tshowMedia = true,\n\t\tshowDescription = true,\n\t\tinfiniteScrollEnabled,\n\t} = 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 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\tconst shouldRenderMedia = showMedia && renderedMediaField;\n\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\tconst { paginationInfo } = useContext( DataViewsContext );\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ clsx( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t} ) }\n\t\t\tonClickCapture={ ( 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\trole={ infiniteScrollEnabled ? 'article' : undefined }\n\t\t\taria-setsize={\n\t\t\t\tinfiniteScrollEnabled ? paginationInfo.totalItems : undefined\n\t\t\t}\n\t\t\taria-posinset={ posinset }\n\t\t>\n\t\t\t{ shouldRenderMedia && (\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=\"dataviews-view-grid__media\"\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) }\n\t\t\t{ hasBulkActions && shouldRenderMedia && (\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{ ! showTitle && shouldRenderMedia && !! 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<HStack\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t\t>\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>\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t\t{ !! actions?.length && (\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) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t<VStack spacing={ 1 }>\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<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\twrap\n\t\t\t\t\t\talignment=\"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</HStack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tspacing={ 1 }\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</VStack>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\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 { resizeObserverRef } = useContext( 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 hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\tconst usedPreviewSize = view.layout?.previewSize;\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.groupByField\n\t\t? fields.find( ( f ) => f.id === view.groupByField )\n\t\t: null;\n\n\t// Group data by groupByField if specified\n\tconst dataByGroup = groupField\n\t\t? data.reduce( ( groups: Map< string, typeof data >, item ) => {\n\t\t\t\tconst groupName = groupField.getValue( { item } );\n\t\t\t\tif ( ! groups.has( groupName ) ) {\n\t\t\t\t\tgroups.set( groupName, [] );\n\t\t\t\t}\n\t\t\t\tgroups.get( groupName )?.push( item );\n\t\t\t\treturn groups;\n\t\t  }, new Map< string, typeof data >() )\n\t\t: null;\n\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\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<VStack spacing={ 4 }>\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<VStack key={ groupName } spacing={ 2 }>\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{ sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\tgroupName\n\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<GridItems\n\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t'dataviews-view-grid',\n\t\t\t\t\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\t\t\tref={ resizeObserverRef }\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\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\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</GridItems>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\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<GridItems\n\t\t\t\t\t\tclassName={ clsx( 'dataviews-view-grid', className ) }\n\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\trole={ isInfiniteScroll ? 'feed' : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ data.map( ( item, index ) => {\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\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\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\tactions={ actions }\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\thasBulkActions={ hasBulkActions }\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={\n\t\t\t\t\t\t\t\t\t\tisInfiniteScroll ? index + 1 : undefined\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</GridItems>\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<p>{ isLoading ? <Spinner /> : empty }</p>\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":"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","ignoreList":[]}

package/build-module/dataviews-layouts/index.js

@@ -10,8 +10,9 @@ import { blockTable, category, formatListBullets, formatListBulletsRTL } from '@
 import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
-import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
-import PreviewSizePicker from './grid/preview-size-picker';
+import ViewPickerGrid from './picker-grid';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE, LAYOUT_PICKER_GRID } from '../constants';
+import PreviewSizePicker from './utils/preview-size-picker';
 import DensityPicker from './table/density-picker';
 export const VIEW_LAYOUTS = [{
   type: LAYOUT_TABLE,
@@ -30,5 +31,12 @@ export const VIEW_LAYOUTS = [{
   label: __('List'),
   component: ViewList,
   icon: isRTL() ? formatListBulletsRTL : formatListBullets
+}, {
+  type: LAYOUT_PICKER_GRID,
+  label: __('Grid'),
+  component: ViewPickerGrid,
+  icon: category,
+  viewConfigOptions: PreviewSizePicker,
+  isPicker: true
 }];
 //# sourceMappingURL=index.js.map

package/build-module/dataviews-layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","isRTL","blockTable","category","formatListBullets","formatListBulletsRTL","ViewTable","ViewGrid","ViewList","LAYOUT_GRID","LAYOUT_LIST","LAYOUT_TABLE","PreviewSizePicker","DensityPicker","VIEW_LAYOUTS","type","label","component","icon","viewConfigOptions"],"sources":["@wordpress/dataviews/src/dataviews-layouts/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './table';\nimport ViewGrid from './grid';\nimport ViewList from './list';\nimport { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';\nimport PreviewSizePicker from './grid/preview-size-picker';\nimport DensityPicker from './table/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},\n];\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SACCC,UAAU,EACVC,QAAQ,EACRC,iBAAiB,EACjBC,oBAAoB,QACd,kBAAkB;;AAEzB;AACA;AACA;AACA,OAAOC,SAAS,MAAM,SAAS;AAC/B,OAAOC,QAAQ,MAAM,QAAQ;AAC7B,OAAOC,QAAQ,MAAM,QAAQ;AAC7B,SAASC,WAAW,EAAEC,WAAW,EAAEC,YAAY,QAAQ,cAAc;AACrE,OAAOC,iBAAiB,MAAM,4BAA4B;AAC1D,OAAOC,aAAa,MAAM,wBAAwB;AAElD,OAAO,MAAMC,YAAY,GAAG,CAC3B;EACCC,IAAI,EAAEJ,YAAY;EAClBK,KAAK,EAAEhB,EAAE,CAAE,OAAQ,CAAC;EACpBiB,SAAS,EAAEX,SAAS;EACpBY,IAAI,EAAEhB,UAAU;EAChBiB,iBAAiB,EAAEN;AACpB,CAAC,EACD;EACCE,IAAI,EAAEN,WAAW;EACjBO,KAAK,EAAEhB,EAAE,CAAE,MAAO,CAAC;EACnBiB,SAAS,EAAEV,QAAQ;EACnBW,IAAI,EAAEf,QAAQ;EACdgB,iBAAiB,EAAEP;AACpB,CAAC,EACD;EACCG,IAAI,EAAEL,WAAW;EACjBM,KAAK,EAAEhB,EAAE,CAAE,MAAO,CAAC;EACnBiB,SAAS,EAAET,QAAQ;EACnBU,IAAI,EAAEjB,KAAK,CAAC,CAAC,GAAGI,oBAAoB,GAAGD;AACxC,CAAC,CACD","ignoreList":[]}
+{"version":3,"names":["__","isRTL","blockTable","category","formatListBullets","formatListBulletsRTL","ViewTable","ViewGrid","ViewList","ViewPickerGrid","LAYOUT_GRID","LAYOUT_LIST","LAYOUT_TABLE","LAYOUT_PICKER_GRID","PreviewSizePicker","DensityPicker","VIEW_LAYOUTS","type","label","component","icon","viewConfigOptions","isPicker"],"sources":["@wordpress/dataviews/src/dataviews-layouts/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './table';\nimport ViewGrid from './grid';\nimport ViewList from './list';\nimport ViewPickerGrid from './picker-grid';\nimport {\n\tLAYOUT_GRID,\n\tLAYOUT_LIST,\n\tLAYOUT_TABLE,\n\tLAYOUT_PICKER_GRID,\n} from '../constants';\nimport PreviewSizePicker from './utils/preview-size-picker';\nimport DensityPicker from './table/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},\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];\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SACCC,UAAU,EACVC,QAAQ,EACRC,iBAAiB,EACjBC,oBAAoB,QACd,kBAAkB;;AAEzB;AACA;AACA;AACA,OAAOC,SAAS,MAAM,SAAS;AAC/B,OAAOC,QAAQ,MAAM,QAAQ;AAC7B,OAAOC,QAAQ,MAAM,QAAQ;AAC7B,OAAOC,cAAc,MAAM,eAAe;AAC1C,SACCC,WAAW,EACXC,WAAW,EACXC,YAAY,EACZC,kBAAkB,QACZ,cAAc;AACrB,OAAOC,iBAAiB,MAAM,6BAA6B;AAC3D,OAAOC,aAAa,MAAM,wBAAwB;AAElD,OAAO,MAAMC,YAAY,GAAG,CAC3B;EACCC,IAAI,EAAEL,YAAY;EAClBM,KAAK,EAAElB,EAAE,CAAE,OAAQ,CAAC;EACpBmB,SAAS,EAAEb,SAAS;EACpBc,IAAI,EAAElB,UAAU;EAChBmB,iBAAiB,EAAEN;AACpB,CAAC,EACD;EACCE,IAAI,EAAEP,WAAW;EACjBQ,KAAK,EAAElB,EAAE,CAAE,MAAO,CAAC;EACnBmB,SAAS,EAAEZ,QAAQ;EACnBa,IAAI,EAAEjB,QAAQ;EACdkB,iBAAiB,EAAEP;AACpB,CAAC,EACD;EACCG,IAAI,EAAEN,WAAW;EACjBO,KAAK,EAAElB,EAAE,CAAE,MAAO,CAAC;EACnBmB,SAAS,EAAEX,QAAQ;EACnBY,IAAI,EAAEnB,KAAK,CAAC,CAAC,GAAGI,oBAAoB,GAAGD;AACxC,CAAC,EACD;EACCa,IAAI,EAAEJ,kBAAkB;EACxBK,KAAK,EAAElB,EAAE,CAAE,MAAO,CAAC;EACnBmB,SAAS,EAAEV,cAAc;EACzBW,IAAI,EAAEjB,QAAQ;EACdkB,iBAAiB,EAAEP,iBAAiB;EACpCQ,QAAQ,EAAE;AACX,CAAC,CACD","ignoreList":[]}

package/build-module/dataviews-layouts/picker-grid/index.js

@@ -0,0 +1,348 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack, __experimentalVStack as VStack, Spinner, Flex, FlexItem, privateApis as componentsPrivateApis, Composite } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import DataViewsContext from '../../components/dataviews-context';
+import { useIsMultiselectPicker } from '../../components/dataviews-picker/footer';
+import { GridItems } from '../utils/grid-items';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  Badge
+} = unlock(componentsPrivateApis);
+function GridItem({
+  view,
+  multiselect,
+  selection,
+  onChangeSelection,
+  getItemId,
+  item,
+  mediaField,
+  titleField,
+  descriptionField,
+  regularFields,
+  badgeFields,
+  config,
+  posinset,
+  setsize
+}) {
+  const {
+    showTitle = true,
+    showMedia = true,
+    showDescription = true
+  } = view;
+  const id = getItemId(item);
+  const isSelected = selection.includes(id);
+  const renderedMediaField = mediaField?.render ? /*#__PURE__*/_jsx(mediaField.render, {
+    item: item,
+    field: mediaField,
+    config: config
+  }) : null;
+  const renderedTitleField = showTitle && titleField?.render ? /*#__PURE__*/_jsx(titleField.render, {
+    item: item,
+    field: titleField
+  }) : null;
+  return /*#__PURE__*/_jsxs(Composite.Item, {
+    render: ({
+      children,
+      ...props
+    }) => /*#__PURE__*/_jsx(VStack, {
+      spacing: 0,
+      children: children,
+      ...props
+    }),
+    role: "option",
+    "aria-posinset": posinset,
+    "aria-setsize": setsize,
+    className: clsx('dataviews-view-picker-grid__card', {
+      'is-selected': isSelected
+    }),
+    "aria-selected": isSelected,
+    onClick: () => {
+      if (isSelected) {
+        onChangeSelection(selection.filter(itemId => id !== itemId));
+      } else {
+        const newSelection = multiselect ? [...selection, id] : [id];
+        onChangeSelection(newSelection);
+      }
+    },
+    children: [showMedia && renderedMediaField && /*#__PURE__*/_jsx("div", {
+      className: "dataviews-view-picker-grid__media",
+      children: renderedMediaField
+    }), showMedia && renderedMediaField && /*#__PURE__*/_jsx(DataViewsSelectionCheckbox, {
+      item: item,
+      selection: selection,
+      onChangeSelection: onChangeSelection,
+      getItemId: getItemId,
+      titleField: titleField,
+      disabled: false,
+      "aria-hidden": true,
+      tabIndex: -1
+    }), /*#__PURE__*/_jsx(HStack, {
+      justify: "space-between",
+      className: "dataviews-view-picker-grid__title-actions",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "dataviews-view-picker-grid__title-field dataviews-title-field",
+        children: renderedTitleField
+      })
+    }), /*#__PURE__*/_jsxs(VStack, {
+      spacing: 1,
+      children: [showDescription && descriptionField?.render && /*#__PURE__*/_jsx(descriptionField.render, {
+        item: item,
+        field: descriptionField
+      }), !!badgeFields?.length && /*#__PURE__*/_jsx(HStack, {
+        className: "dataviews-view-picker-grid__badge-fields",
+        spacing: 2,
+        wrap: true,
+        alignment: "top",
+        justify: "flex-start",
+        children: badgeFields.map(field => {
+          return /*#__PURE__*/_jsx(Badge, {
+            className: "dataviews-view-picker-grid__field-value",
+            children: /*#__PURE__*/_jsx(field.render, {
+              item: item,
+              field: field
+            })
+          }, field.id);
+        })
+      }), !!regularFields?.length && /*#__PURE__*/_jsx(VStack, {
+        className: "dataviews-view-picker-grid__fields",
+        spacing: 1,
+        children: regularFields.map(field => {
+          return /*#__PURE__*/_jsx(Flex, {
+            className: "dataviews-view-picker-grid__field",
+            gap: 1,
+            justify: "flex-start",
+            expanded: true,
+            style: {
+              height: 'auto'
+            },
+            direction: "row",
+            children: /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(FlexItem, {
+                className: "dataviews-view-picker-grid__field-name",
+                children: field.header
+              }), /*#__PURE__*/_jsx(FlexItem, {
+                className: "dataviews-view-picker-grid__field-value",
+                style: {
+                  maxHeight: 'none'
+                },
+                children: /*#__PURE__*/_jsx(field.render, {
+                  item: item,
+                  field: field
+                })
+              })]
+            })
+          }, field.id);
+        })
+      })]
+    })]
+  }, id);
+}
+function GridGroup({
+  groupName,
+  groupField,
+  children
+}) {
+  const headerId = useInstanceId(GridGroup, 'dataviews-view-picker-grid-group__header');
+  return /*#__PURE__*/_jsxs(VStack, {
+    spacing: 2,
+    role: "group",
+    "aria-labelledby": headerId,
+    children: [/*#__PURE__*/_jsx("h3", {
+      className: "dataviews-view-picker-grid-group__header",
+      id: headerId,
+      children: sprintf(
+      // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+      __('%1$s: %2$s'), groupField.label, groupName)
+    }), children]
+  }, groupName);
+}
+function ViewPickerGrid({
+  actions,
+  data,
+  fields,
+  getItemId,
+  isLoading,
+  onChangeSelection,
+  selection,
+  view,
+  className,
+  empty
+}) {
+  var _view$fields, _view$page, _view$perPage;
+  const {
+    resizeObserverRef,
+    paginationInfo,
+    itemListLabel
+  } = useContext(DataViewsContext);
+  const titleField = fields.find(field => field.id === view?.titleField);
+  const mediaField = fields.find(field => field.id === view?.mediaField);
+  const descriptionField = fields.find(field => field.id === view?.descriptionField);
+  const otherFields = (_view$fields = view.fields) !== null && _view$fields !== void 0 ? _view$fields : [];
+  const {
+    regularFields,
+    badgeFields
+  } = otherFields.reduce((accumulator, fieldId) => {
+    const field = fields.find(f => f.id === fieldId);
+    if (!field) {
+      return accumulator;
+    }
+    // If the field is a badge field, add it to the badgeFields array
+    // otherwise add it to the rest visibleFields array.
+    const key = view.layout?.badgeFields?.includes(fieldId) ? 'badgeFields' : 'regularFields';
+    accumulator[key].push(field);
+    return accumulator;
+  }, {
+    regularFields: [],
+    badgeFields: []
+  });
+  const hasData = !!data?.length;
+  const usedPreviewSize = view.layout?.previewSize;
+  const isMultiselect = useIsMultiselectPicker(actions);
+
+  /*
+   * This is the maximum width that an image can achieve in the grid. The reasoning is:
+   * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).
+   * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.
+   * So each image will never grow past 2*430px plus a little more to account for the gaps.
+   */
+  const size = '900px';
+  const groupField = view.groupByField ? fields.find(f => f.id === view.groupByField) : null;
+
+  // Group data by groupByField if specified
+  const dataByGroup = groupField ? data.reduce((groups, item) => {
+    const groupName = groupField.getValue({
+      item
+    });
+    if (!groups.has(groupName)) {
+      groups.set(groupName, []);
+    }
+    groups.get(groupName)?.push(item);
+    return groups;
+  }, new Map()) : null;
+  const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
+  const currentPage = (_view$page = view?.page) !== null && _view$page !== void 0 ? _view$page : 1;
+  const perPage = (_view$perPage = view?.perPage) !== null && _view$perPage !== void 0 ? _view$perPage : 0;
+  const setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [
+    // Render multiple groups.
+    hasData && groupField && dataByGroup && /*#__PURE__*/_jsx(Composite, {
+      virtualFocus: true,
+      orientation: "horizontal",
+      role: "listbox",
+      "aria-multiselectable": isMultiselect,
+      className: clsx('dataviews-view-picker-grid', className),
+      "aria-label": itemListLabel,
+      render: ({
+        children,
+        ...props
+      }) => /*#__PURE__*/_jsx(VStack, {
+        spacing: 4,
+        children: children,
+        ...props
+      }),
+      children: Array.from(dataByGroup.entries()).map(([groupName, groupItems]) => /*#__PURE__*/_jsx(GridGroup, {
+        groupName: groupName,
+        groupField: groupField,
+        children: /*#__PURE__*/_jsx(GridItems, {
+          previewSize: usedPreviewSize,
+          style: {
+            gridTemplateColumns: usedPreviewSize && `repeat(auto-fill, minmax(${usedPreviewSize}px, 1fr))`
+          },
+          "aria-busy": isLoading,
+          ref: resizeObserverRef,
+          children: groupItems.map(item => {
+            const posInSet = (currentPage - 1) * perPage + data.indexOf(item) + 1;
+            return /*#__PURE__*/_jsx(GridItem, {
+              view: view,
+              multiselect: isMultiselect,
+              selection: selection,
+              onChangeSelection: onChangeSelection,
+              getItemId: getItemId,
+              item: item,
+              mediaField: mediaField,
+              titleField: titleField,
+              descriptionField: descriptionField,
+              regularFields: regularFields,
+              badgeFields: badgeFields,
+              config: {
+                sizes: size
+              },
+              posinset: posInSet,
+              setsize: setSize
+            }, getItemId(item));
+          })
+        })
+      }, groupName))
+    }),
+    // Render a single grid with all data.
+    hasData && !dataByGroup && /*#__PURE__*/_jsx(Composite, {
+      render: /*#__PURE__*/_jsx(GridItems, {
+        className: clsx('dataviews-view-picker-grid', className),
+        previewSize: usedPreviewSize,
+        "aria-busy": isLoading,
+        ref: resizeObserverRef
+      }),
+      virtualFocus: true,
+      orientation: "horizontal",
+      role: "listbox",
+      "aria-multiselectable": isMultiselect,
+      "aria-label": itemListLabel,
+      children: data.map((item, index) => {
+        let posinset = isInfiniteScroll ? index + 1 : undefined;
+        if (!isInfiniteScroll) {
+          // When infinite scroll isn't active, take pagination into account
+          // when calculating the posinset.
+          posinset = (currentPage - 1) * perPage + index + 1;
+        }
+        return /*#__PURE__*/_jsx(GridItem, {
+          view: view,
+          multiselect: isMultiselect,
+          selection: selection,
+          onChangeSelection: onChangeSelection,
+          getItemId: getItemId,
+          item: item,
+          mediaField: mediaField,
+          titleField: titleField,
+          descriptionField: descriptionField,
+          regularFields: regularFields,
+          badgeFields: badgeFields,
+          config: {
+            sizes: size
+          },
+          posinset: posinset,
+          setsize: setSize
+        }, getItemId(item));
+      })
+    }),
+    // Render empty state.
+    !hasData && /*#__PURE__*/_jsx("div", {
+      className: clsx({
+        'dataviews-loading': isLoading,
+        'dataviews-no-results': !isLoading
+      }),
+      children: /*#__PURE__*/_jsx("p", {
+        children: isLoading ? /*#__PURE__*/_jsx(Spinner, {}) : empty
+      })
+    }), hasData && isLoading && /*#__PURE__*/_jsx("p", {
+      className: "dataviews-loading-more",
+      children: /*#__PURE__*/_jsx(Spinner, {})
+    })]
+  });
+}
+export default ViewPickerGrid;
+//# sourceMappingURL=index.js.map