@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/dataform-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\tvalidity,\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\tvalidity={ validity?.children }\n\t\t\t\t\t\tas={ EMPTY_WRAPPER }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\tclassName=\"dataforms-layouts-row__field-control\"\n\t\t\t\t\t\t\t\tstyle={ layout.styles[ childField.id ] }\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={ childField }\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\tvalidity={ childFieldValidity }\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\tvalidity={ validity }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "AAwBG,SAWF,UAVG,KADD;AArBH;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,OACnB;AACP,SAAS,kBAAkB;AAM3B,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAEnC,SAAS,OAAQ,EAAE,MAAM,GAAuB;AAC/C,SACC,oBAAC,UAAO,WAAU,iCAAgC,SAAU,GAC3D,+BAAC,UAAO,WAAU,UACjB;AAAA,wBAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH;AAAA,IACA,oBAAC,UAAO;AAAA,KACT,GACD;AAEF;AAEA,MAAM,gBAAgB,CAAE,EAAE,SAAS,MAClC,gCAAI,UAAU;AAGA,SAAR,aAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAE/C,QAAM,SAAS,gBAAiB;AAAA,IAC/B,GAAG,MAAM;AAAA,IACT,MAAM;AAAA,EACP,CAAE;AAEF,MAAK,gBAAiB,KAAM,GAAI;AAC/B,UAAM,OAAa;AAAA,MAClB,QAAQ,MAAM,SAAS,IAAK,CAAE,UAAW;AACxC,YAAK,OAAO,UAAU,UAAW;AAChC,iBAAO,EAAE,IAAI,MAAM;AAAA,QACpB;AACA,eAAO;AAAA,MACR,CAAE;AAAA,IACH;AAEA,WACC,qBAAC,SAAI,WAAU,gCACZ;AAAA,OAAE,uBAAuB,MAAM,SAChC,oBAAC,UAAO,OAAQ,MAAM,OAAQ;AAAA,MAE/B,oBAAC,UAAO,WAAY,OAAO,WAAY,SAAU,GAChD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,UAAU;AAAA,UACrB,IAAK;AAAA,UAEH,WAAE,aAAa,YAAY,uBAC5B;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,OAAQ,OAAO,OAAQ,WAAW,EAAG;AAAA,cAErC;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,OAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA,UAAW;AAAA;AAAA,cACZ;AAAA;AAAA,YAVM,WAAW;AAAA,UAWlB;AAAA;AAAA,MAEF,GACD;AAAA,OACD;AAAA,EAEF;AAEA,QAAM,kBAAkB,OAAO,KAAM,CAAE,MAAO,EAAE,OAAO,MAAM,EAAG;AAEhE,MAAK,CAAE,mBAAmB,CAAE,gBAAgB,MAAO;AAClD,WAAO;AAAA,EACR;AAEA,QAAM,gBAAgB,mBAAoB,SAAU,GAAG;AACvD,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,SACC,gCACC,8BAAC,SAAI,WAAU,wCACd;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA;AAAA;AAAA,EACD,GACD,GACD;AAEF;",
+  "names": []
+}

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

@@ -1,31 +1,30 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * WordPress dependencies
- */
-import { __experimentalHStack as HStack, __experimentalVStack as VStack, Spinner, Flex, FlexItem, Tooltip, privateApis as componentsPrivateApis } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
-import { isAppleOS } from '@wordpress/keycodes';
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import ItemActions from '../../components/dataviews-item-actions';
-import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
-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';
-const {
-  Badge
-} = unlock(componentsPrivateApis);
-import getDataByGroup from '../utils/get-data-by-group';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack,
+  Spinner,
+  Flex,
+  FlexItem,
+  Tooltip,
+  privateApis as componentsPrivateApis
+} from "@wordpress/components";
+import { __, sprintf } from "@wordpress/i18n";
+import { useInstanceId } from "@wordpress/compose";
+import { isAppleOS } from "@wordpress/keycodes";
+import { useContext } from "@wordpress/element";
+import { unlock } from "../../lock-unlock";
+import ItemActions from "../../components/dataviews-item-actions";
+import DataViewsSelectionCheckbox from "../../components/dataviews-selection-checkbox";
+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";
+const { Badge } = unlock(componentsPrivateApis);
+import getDataByGroup from "../utils/get-data-by-group";
 function GridItem({
   view,
   selection,
@@ -55,147 +54,186 @@ function GridItem({
   const id = getItemId(item);
   const instanceId = useInstanceId(GridItem);
   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;
+  const renderedMediaField = mediaField?.render ? /* @__PURE__ */ jsx(
+    mediaField.render,
+    {
+      item,
+      field: mediaField,
+      config
+    }
+  ) : null;
+  const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ jsx(titleField.render, { item, field: titleField }) : null;
   const shouldRenderMedia = showMedia && renderedMediaField;
   let mediaA11yProps;
   let titleA11yProps;
   if (isItemClickable(item) && onClickItem) {
     if (renderedTitleField) {
       mediaA11yProps = {
-        'aria-labelledby': `dataviews-view-grid__title-field-${instanceId}`
+        "aria-labelledby": `dataviews-view-grid__title-field-${instanceId}`
       };
       titleA11yProps = {
         id: `dataviews-view-grid__title-field-${instanceId}`
       };
     } else {
       mediaA11yProps = {
-        'aria-label': __('Navigate to item')
+        "aria-label": __("Navigate to item")
       };
     }
   }
-  const {
-    paginationInfo
-  } = useContext(DataViewsContext);
-  return /*#__PURE__*/_jsxs(VStack, {
-    spacing: 0,
-    className: clsx('dataviews-view-grid__card', {
-      'is-selected': hasBulkAction && isSelected
-    }),
-    onClickCapture: event => {
-      if (isAppleOS() ? event.metaKey : event.ctrlKey) {
-        event.stopPropagation();
-        event.preventDefault();
-        if (!hasBulkAction) {
-          return;
+  const { paginationInfo } = useContext(DataViewsContext);
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      spacing: 0,
+      className: clsx("dataviews-view-grid__card", {
+        "is-selected": hasBulkAction && isSelected
+      }),
+      onClickCapture: (event) => {
+        if (isAppleOS() ? event.metaKey : event.ctrlKey) {
+          event.stopPropagation();
+          event.preventDefault();
+          if (!hasBulkAction) {
+            return;
+          }
+          onChangeSelection(
+            selection.includes(id) ? selection.filter((itemId) => id !== itemId) : [...selection, id]
+          );
         }
-        onChangeSelection(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [...selection, id]);
-      }
+      },
+      role: infiniteScrollEnabled ? "article" : void 0,
+      "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : void 0,
+      "aria-posinset": posinset,
+      children: [
+        shouldRenderMedia && /* @__PURE__ */ jsx(
+          ItemClickWrapper,
+          {
+            item,
+            isItemClickable,
+            onClickItem,
+            renderItemLink,
+            className: "dataviews-view-grid__media",
+            ...mediaA11yProps,
+            children: renderedMediaField
+          }
+        ),
+        hasBulkActions && shouldRenderMedia && /* @__PURE__ */ jsx(
+          DataViewsSelectionCheckbox,
+          {
+            item,
+            selection,
+            onChangeSelection,
+            getItemId,
+            titleField,
+            disabled: !hasBulkAction
+          }
+        ),
+        !showTitle && shouldRenderMedia && !!actions?.length && /* @__PURE__ */ jsx("div", { className: "dataviews-view-grid__media-actions", children: /* @__PURE__ */ jsx(ItemActions, { item, actions, isCompact: true }) }),
+        showTitle && /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            justify: "space-between",
+            className: "dataviews-view-grid__title-actions",
+            children: [
+              /* @__PURE__ */ jsx(
+                ItemClickWrapper,
+                {
+                  item,
+                  isItemClickable,
+                  onClickItem,
+                  renderItemLink,
+                  className: "dataviews-view-grid__title-field dataviews-title-field",
+                  ...titleA11yProps,
+                  children: renderedTitleField
+                }
+              ),
+              !!actions?.length && /* @__PURE__ */ jsx(
+                ItemActions,
+                {
+                  item,
+                  actions,
+                  isCompact: true
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(VStack, { spacing: 1, children: [
+          showDescription && descriptionField?.render && /* @__PURE__ */ jsx(
+            descriptionField.render,
+            {
+              item,
+              field: descriptionField
+            }
+          ),
+          !!badgeFields?.length && /* @__PURE__ */ jsx(
+            HStack,
+            {
+              className: "dataviews-view-grid__badge-fields",
+              spacing: 2,
+              wrap: true,
+              alignment: "top",
+              justify: "flex-start",
+              children: badgeFields.map((field) => {
+                return /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    className: "dataviews-view-grid__field-value",
+                    children: /* @__PURE__ */ jsx(
+                      field.render,
+                      {
+                        item,
+                        field
+                      }
+                    )
+                  },
+                  field.id
+                );
+              })
+            }
+          ),
+          !!regularFields?.length && /* @__PURE__ */ jsx(
+            VStack,
+            {
+              className: "dataviews-view-grid__fields",
+              spacing: 1,
+              children: regularFields.map((field) => {
+                return /* @__PURE__ */ jsx(
+                  Flex,
+                  {
+                    className: "dataviews-view-grid__field",
+                    gap: 1,
+                    justify: "flex-start",
+                    expanded: true,
+                    style: { height: "auto" },
+                    direction: "row",
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Tooltip, { text: field.label, children: /* @__PURE__ */ jsx(FlexItem, { className: "dataviews-view-grid__field-name", children: field.header }) }),
+                      /* @__PURE__ */ jsx(
+                        FlexItem,
+                        {
+                          className: "dataviews-view-grid__field-value",
+                          style: { maxHeight: "none" },
+                          children: /* @__PURE__ */ jsx(
+                            field.render,
+                            {
+                              item,
+                              field
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  },
+                  field.id
+                );
+              })
+            }
+          )
+        ] })
+      ]
     },
-    role: infiniteScrollEnabled ? 'article' : undefined,
-    "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : undefined,
-    "aria-posinset": posinset,
-    children: [shouldRenderMedia && /*#__PURE__*/_jsx(ItemClickWrapper, {
-      item: item,
-      isItemClickable: isItemClickable,
-      onClickItem: onClickItem,
-      renderItemLink: renderItemLink,
-      className: "dataviews-view-grid__media",
-      ...mediaA11yProps,
-      children: renderedMediaField
-    }), hasBulkActions && shouldRenderMedia && /*#__PURE__*/_jsx(DataViewsSelectionCheckbox, {
-      item: item,
-      selection: selection,
-      onChangeSelection: onChangeSelection,
-      getItemId: getItemId,
-      titleField: titleField,
-      disabled: !hasBulkAction
-    }), !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, {
-        item: item,
-        isItemClickable: isItemClickable,
-        onClickItem: onClickItem,
-        renderItemLink: renderItemLink,
-        className: "dataviews-view-grid__title-field dataviews-title-field",
-        ...titleA11yProps,
-        children: renderedTitleField
-      }), !!actions?.length && /*#__PURE__*/_jsx(ItemActions, {
-        item: item,
-        actions: actions,
-        isCompact: true
-      })]
-    }), /*#__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-grid__badge-fields",
-        spacing: 2,
-        wrap: true,
-        alignment: "top",
-        justify: "flex-start",
-        children: badgeFields.map(field => {
-          return /*#__PURE__*/_jsx(Badge, {
-            className: "dataviews-view-grid__field-value",
-            children: /*#__PURE__*/_jsx(field.render, {
-              item: item,
-              field: field
-            })
-          }, field.id);
-        })
-      }), !!regularFields?.length && /*#__PURE__*/_jsx(VStack, {
-        className: "dataviews-view-grid__fields",
-        spacing: 1,
-        children: regularFields.map(field => {
-          return /*#__PURE__*/_jsx(Flex, {
-            className: "dataviews-view-grid__field",
-            gap: 1,
-            justify: "flex-start",
-            expanded: true,
-            style: {
-              height: 'auto'
-            },
-            direction: "row",
-            children: /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Tooltip, {
-                text: field.label,
-                children: /*#__PURE__*/_jsx(FlexItem, {
-                  className: "dataviews-view-grid__field-name",
-                  children: field.header
-                })
-              }), /*#__PURE__*/_jsx(FlexItem, {
-                className: "dataviews-view-grid__field-value",
-                style: {
-                  maxHeight: 'none'
-                },
-                children: /*#__PURE__*/_jsx(field.render, {
-                  item: item,
-                  field: field
-                })
-              })]
-            })
-          }, field.id);
-        })
-      })]
-    })]
-  }, id);
+    id
+  );
 }
 function ViewGrid({
   actions,
@@ -212,131 +250,142 @@ function ViewGrid({
   className,
   empty
 }) {
-  var _view$fields;
-  const {
-    resizeObserverRef
-  } = 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) {
+  const { resizeObserverRef } = 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 ?? [];
+  const { regularFields, badgeFields } = otherFields.reduce(
+    (accumulator, fieldId) => {
+      const field = fields.find((f) => f.id === fieldId);
+      if (!field) {
+        return accumulator;
+      }
+      const key = view.layout?.badgeFields?.includes(fieldId) ? "badgeFields" : "regularFields";
+      accumulator[key].push(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: []
-  });
+    },
+    { regularFields: [], badgeFields: [] }
+  );
   const hasData = !!data?.length;
   const hasBulkActions = useSomeItemHasAPossibleBulkAction(actions, data);
   const usedPreviewSize = view.layout?.previewSize;
-  /*
-   * 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;
+  const size = "900px";
+  const groupField = view.groupByField ? fields.find((f) => f.id === view.groupByField) : null;
   const dataByGroup = groupField ? getDataByGroup(data, groupField) : null;
   const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [
+  return /* @__PURE__ */ jsxs(Fragment, {
     // Render multiple groups.
-    hasData && groupField && dataByGroup && /*#__PURE__*/_jsx(VStack, {
-      spacing: 4,
-      children: Array.from(dataByGroup.entries()).map(([groupName, groupItems]) => /*#__PURE__*/_jsxs(VStack, {
-        spacing: 2,
-        children: [/*#__PURE__*/_jsx("h3", {
-          className: "dataviews-view-grid__group-header",
-          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(GridItems, {
-          className: clsx('dataviews-view-grid', className),
+    children: [
+      hasData && groupField && dataByGroup && /* @__PURE__ */ jsx(VStack, { spacing: 4, children: Array.from(dataByGroup.entries()).map(
+        ([groupName, groupItems]) => /* @__PURE__ */ jsxs(VStack, { spacing: 2, children: [
+          /* @__PURE__ */ jsx("h3", { className: "dataviews-view-grid__group-header", 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(
+            GridItems,
+            {
+              className: clsx(
+                "dataviews-view-grid",
+                className
+              ),
+              previewSize: usedPreviewSize,
+              "aria-busy": isLoading,
+              ref: resizeObserverRef,
+              children: groupItems.map((item) => {
+                return /* @__PURE__ */ jsx(
+                  GridItem,
+                  {
+                    view,
+                    selection,
+                    onChangeSelection,
+                    onClickItem,
+                    isItemClickable,
+                    renderItemLink,
+                    getItemId,
+                    item,
+                    actions,
+                    mediaField,
+                    titleField,
+                    descriptionField,
+                    regularFields,
+                    badgeFields,
+                    hasBulkActions,
+                    config: {
+                      sizes: size
+                    }
+                  },
+                  getItemId(item)
+                );
+              })
+            }
+          )
+        ] }, groupName)
+      ) }),
+      // Render a single grid with all data.
+      hasData && !dataByGroup && /* @__PURE__ */ jsx(
+        GridItems,
+        {
+          className: clsx("dataviews-view-grid", className),
           previewSize: usedPreviewSize,
           "aria-busy": isLoading,
           ref: resizeObserverRef,
-          children: groupItems.map(item => {
-            return /*#__PURE__*/_jsx(GridItem, {
-              view: view,
-              selection: selection,
-              onChangeSelection: onChangeSelection,
-              onClickItem: onClickItem,
-              isItemClickable: isItemClickable,
-              renderItemLink: renderItemLink,
-              getItemId: getItemId,
-              item: item,
-              actions: actions,
-              mediaField: mediaField,
-              titleField: titleField,
-              descriptionField: descriptionField,
-              regularFields: regularFields,
-              badgeFields: badgeFields,
-              hasBulkActions: hasBulkActions,
-              config: {
-                sizes: size
-              }
-            }, getItemId(item));
+          role: isInfiniteScroll ? "feed" : void 0,
+          children: data.map((item, index) => {
+            return /* @__PURE__ */ jsx(
+              GridItem,
+              {
+                view,
+                selection,
+                onChangeSelection,
+                onClickItem,
+                isItemClickable,
+                renderItemLink,
+                getItemId,
+                item,
+                actions,
+                mediaField,
+                titleField,
+                descriptionField,
+                regularFields,
+                badgeFields,
+                hasBulkActions,
+                config: {
+                  sizes: size
+                },
+                posinset: isInfiniteScroll ? index + 1 : void 0
+              },
+              getItemId(item)
+            );
           })
-        })]
-      }, groupName))
-    }),
-    // Render a single grid with all data.
-    hasData && !dataByGroup && /*#__PURE__*/_jsx(GridItems, {
-      className: clsx('dataviews-view-grid', className),
-      previewSize: usedPreviewSize,
-      "aria-busy": isLoading,
-      ref: resizeObserverRef,
-      role: isInfiniteScroll ? 'feed' : undefined,
-      children: data.map((item, index) => {
-        return /*#__PURE__*/_jsx(GridItem, {
-          view: view,
-          selection: selection,
-          onChangeSelection: onChangeSelection,
-          onClickItem: onClickItem,
-          isItemClickable: isItemClickable,
-          renderItemLink: renderItemLink,
-          getItemId: getItemId,
-          item: item,
-          actions: actions,
-          mediaField: mediaField,
-          titleField: titleField,
-          descriptionField: descriptionField,
-          regularFields: regularFields,
-          badgeFields: badgeFields,
-          hasBulkActions: hasBulkActions,
-          config: {
-            sizes: size
-          },
-          posinset: isInfiniteScroll ? index + 1 : undefined
-        }, getItemId(item));
-      })
-    }),
-    // Render empty state.
-    !hasData && /*#__PURE__*/_jsx("div", {
-      className: clsx({
-        'dataviews-loading': isLoading,
-        'dataviews-no-results': !isLoading
-      }),
-      children: isLoading ? /*#__PURE__*/_jsx("p", {
-        children: /*#__PURE__*/_jsx(Spinner, {})
-      }) : empty
-    }), hasData && isLoading && /*#__PURE__*/_jsx("p", {
-      className: "dataviews-loading-more",
-      children: /*#__PURE__*/_jsx(Spinner, {})
-    })]
+        }
+      ),
+      // Render empty state.
+      !hasData && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx({
+            "dataviews-loading": isLoading,
+            "dataviews-no-results": !isLoading
+          }),
+          children: isLoading ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Spinner, {}) }) : empty
+        }
+      ),
+      hasData && isLoading && /* @__PURE__ */ jsx("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ jsx(Spinner, {}) })
+    ]
   });
 }
-export default ViewGrid;
-//# sourceMappingURL=index.js.map
+var grid_default = ViewGrid;
+export {
+  grid_default as default
+};
+//# sourceMappingURL=index.js.map