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

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

@@ -1,37 +1,49 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var picker_grid_exports = {};
+__export(picker_grid_exports, {
+  default: () => picker_grid_default
 });
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _compose = require("@wordpress/compose");
-var _element = require("@wordpress/element");
-var _lockUnlock = require("../../lock-unlock");
-var _dataviewsSelectionCheckbox = _interopRequireDefault(require("../../components/dataviews-selection-checkbox"));
-var _dataviewsContext = _interopRequireDefault(require("../../components/dataviews-context"));
-var _footer = require("../../components/dataviews-picker/footer");
-var _gridItems = require("../utils/grid-items");
-var _getDataByGroup = _interopRequireDefault(require("../utils/get-data-by-group"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  Badge
-} = (0, _lockUnlock.unlock)(_components.privateApis);
+module.exports = __toCommonJS(picker_grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
+var import_lock_unlock = require("../../lock-unlock");
+var import_dataviews_selection_checkbox = __toESM(require("../../components/dataviews-selection-checkbox"));
+var import_dataviews_context = __toESM(require("../../components/dataviews-context"));
+var import_footer = require("../../components/dataviews-picker/footer");
+var import_grid_items = require("../utils/grid-items");
+var import_get_data_by_group = __toESM(require("../utils/get-data-by-group"));
+const { Badge } = (0, import_lock_unlock.unlock)(import_components.privateApis);
 function GridItem({
   view,
   multiselect,
@@ -48,140 +60,175 @@ function GridItem({
   posinset,
   setsize
 }) {
-  const {
-    showTitle = true,
-    showMedia = true,
-    showDescription = true
-  } = view;
+  const { showTitle = true, showMedia = true, showDescription = true } = view;
   const id = getItemId(item);
   const isSelected = selection.includes(id);
-  const renderedMediaField = mediaField?.render ? /*#__PURE__*/(0, _jsxRuntime.jsx)(mediaField.render, {
-    item: item,
-    field: mediaField,
-    config: config
-  }) : null;
-  const renderedTitleField = showTitle && titleField?.render ? /*#__PURE__*/(0, _jsxRuntime.jsx)(titleField.render, {
-    item: item,
-    field: titleField
-  }) : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Composite.Item, {
-    "aria-label": titleField ? titleField.getValue({
-      item
-    }) || (0, _i18n.__)('(no title)') : undefined,
-    render: ({
-      children,
-      ...props
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-      spacing: 0,
-      children: children,
-      ...props
-    }),
-    role: "option",
-    "aria-posinset": posinset,
-    "aria-setsize": setsize,
-    className: (0, _clsx.default)('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);
-      }
+  const renderedMediaField = mediaField?.render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    mediaField.render,
+    {
+      item,
+      field: mediaField,
+      config
+    }
+  ) : null;
+  const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(titleField.render, { item, field: titleField }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.Composite.Item,
+    {
+      "aria-label": titleField ? titleField.getValue({ item }) || (0, import_i18n.__)("(no title)") : void 0,
+      render: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { spacing: 0, children, ...props }),
+      role: "option",
+      "aria-posinset": posinset,
+      "aria-setsize": setsize,
+      className: (0, import_clsx.default)("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__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-picker-grid__media", children: renderedMediaField }),
+        showMedia && renderedMediaField && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_dataviews_selection_checkbox.default,
+          {
+            item,
+            selection,
+            onChangeSelection,
+            getItemId,
+            titleField,
+            disabled: false,
+            "aria-hidden": true,
+            tabIndex: -1
+          }
+        ),
+        showTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalHStack,
+          {
+            justify: "space-between",
+            className: "dataviews-view-picker-grid__title-actions",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-picker-grid__title-field dataviews-title-field", children: renderedTitleField })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 1, children: [
+          showDescription && descriptionField?.render && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            descriptionField.render,
+            {
+              item,
+              field: descriptionField
+            }
+          ),
+          !!badgeFields?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalHStack,
+            {
+              className: "dataviews-view-picker-grid__badge-fields",
+              spacing: 2,
+              wrap: true,
+              alignment: "top",
+              justify: "flex-start",
+              children: badgeFields.map((field) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Badge,
+                  {
+                    className: "dataviews-view-picker-grid__field-value",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      field.render,
+                      {
+                        item,
+                        field
+                      }
+                    )
+                  },
+                  field.id
+                );
+              })
+            }
+          ),
+          !!regularFields?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalVStack,
+            {
+              className: "dataviews-view-picker-grid__fields",
+              spacing: 1,
+              children: regularFields.map((field) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Flex,
+                  {
+                    className: "dataviews-view-picker-grid__field",
+                    gap: 1,
+                    justify: "flex-start",
+                    expanded: true,
+                    style: { height: "auto" },
+                    direction: "row",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { className: "dataviews-view-picker-grid__field-name", children: field.header }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_components.FlexItem,
+                        {
+                          className: "dataviews-view-picker-grid__field-value",
+                          style: { maxHeight: "none" },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            field.render,
+                            {
+                              item,
+                              field
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  },
+                  field.id
+                );
+              })
+            }
+          )
+        ] })
+      ]
     },
-    children: [showMedia && renderedMediaField && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "dataviews-view-picker-grid__media",
-      children: renderedMediaField
-    }), showMedia && renderedMediaField && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsSelectionCheckbox.default, {
-      item: item,
-      selection: selection,
-      onChangeSelection: onChangeSelection,
-      getItemId: getItemId,
-      titleField: titleField,
-      disabled: false,
-      "aria-hidden": true,
-      tabIndex: -1
-    }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
-      justify: "space-between",
-      className: "dataviews-view-picker-grid__title-actions",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dataviews-view-picker-grid__title-field dataviews-title-field",
-        children: renderedTitleField
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-      spacing: 1,
-      children: [showDescription && descriptionField?.render && /*#__PURE__*/(0, _jsxRuntime.jsx)(descriptionField.render, {
-        item: item,
-        field: descriptionField
-      }), !!badgeFields?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
-        className: "dataviews-view-picker-grid__badge-fields",
-        spacing: 2,
-        wrap: true,
-        alignment: "top",
-        justify: "flex-start",
-        children: badgeFields.map(field => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
-            className: "dataviews-view-picker-grid__field-value",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(field.render, {
-              item: item,
-              field: field
-            })
-          }, field.id);
-        })
-      }), !!regularFields?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-        className: "dataviews-view-picker-grid__fields",
-        spacing: 1,
-        children: regularFields.map(field => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Flex, {
-            className: "dataviews-view-picker-grid__field",
-            gap: 1,
-            justify: "flex-start",
-            expanded: true,
-            style: {
-              height: 'auto'
-            },
-            direction: "row",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-                className: "dataviews-view-picker-grid__field-name",
-                children: field.header
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-                className: "dataviews-view-picker-grid__field-value",
-                style: {
-                  maxHeight: 'none'
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(field.render, {
-                  item: item,
-                  field: field
-                })
-              })]
-            })
-          }, field.id);
-        })
-      })]
-    })]
-  }, id);
+    id
+  );
 }
 function GridGroup({
   groupName,
   groupField,
   children
 }) {
-  const headerId = (0, _compose.useInstanceId)(GridGroup, 'dataviews-view-picker-grid-group__header');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-    spacing: 2,
-    role: "group",
-    "aria-labelledby": headerId,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-      className: "dataviews-view-picker-grid-group__header",
-      id: headerId,
-      children: (0, _i18n.sprintf)(
-      // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
-      (0, _i18n.__)('%1$s: %2$s'), groupField.label, groupName)
-    }), children]
-  }, groupName);
+  const headerId = (0, import_compose.useInstanceId)(
+    GridGroup,
+    "dataviews-view-picker-grid-group__header"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      spacing: 2,
+      role: "group",
+      "aria-labelledby": headerId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "h3",
+          {
+            className: "dataviews-view-picker-grid-group__header",
+            id: headerId,
+            children: (0, import_i18n.sprintf)(
+              // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+              (0, import_i18n.__)("%1$s: %2$s"),
+              groupField.label,
+              groupName
+            )
+          }
+        ),
+        children
+      ]
+    },
+    groupName
+  );
 }
 function ViewPickerGrid({
   actions,
@@ -195,156 +242,175 @@ function ViewPickerGrid({
   className,
   empty
 }) {
-  var _view$fields, _view$page, _view$perPage;
-  const {
-    resizeObserverRef,
-    paginationInfo,
-    itemListLabel
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  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, paginationInfo, itemListLabel } = (0, import_element.useContext)(import_dataviews_context.default);
+  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 usedPreviewSize = view.layout?.previewSize;
-  const isMultiselect = (0, _footer.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;
-  const dataByGroup = groupField ? (0, _getDataByGroup.default)(data, groupField) : null;
+  const isMultiselect = (0, import_footer.useIsMultiselectPicker)(actions);
+  const size = "900px";
+  const groupField = view.groupByField ? fields.find((f) => f.id === view.groupByField) : null;
+  const dataByGroup = groupField ? (0, import_get_data_by_group.default)(data, groupField) : 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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [
+  const currentPage = view?.page ?? 1;
+  const perPage = view?.perPage ?? 0;
+  const setSize = isInfiniteScroll ? paginationInfo?.totalItems : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     // Render multiple groups.
-    hasData && groupField && dataByGroup && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite, {
-      virtualFocus: true,
-      orientation: "horizontal",
-      role: "listbox",
-      "aria-multiselectable": isMultiselect,
-      className: (0, _clsx.default)('dataviews-view-picker-grid', className),
-      "aria-label": itemListLabel,
-      render: ({
-        children,
-        ...props
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-        spacing: 4,
-        children: children,
-        ...props
-      }),
-      children: Array.from(dataByGroup.entries()).map(([groupName, groupItems]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGroup, {
-        groupName: groupName,
-        groupField: groupField,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_gridItems.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__*/(0, _jsxRuntime.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
+    children: [
+      hasData && groupField && dataByGroup && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Composite,
+        {
+          virtualFocus: true,
+          orientation: "horizontal",
+          role: "listbox",
+          "aria-multiselectable": isMultiselect,
+          className: (0, import_clsx.default)(
+            "dataviews-view-picker-grid",
+            className
+          ),
+          "aria-label": itemListLabel,
+          render: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalVStack,
+            {
+              spacing: 4,
+              children,
+              ...props
+            }
+          ),
+          children: Array.from(dataByGroup.entries()).map(
+            ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              GridGroup,
+              {
+                groupName,
+                groupField,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_grid_items.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__ */ (0, import_jsx_runtime.jsx)(
+                        GridItem,
+                        {
+                          view,
+                          multiselect: isMultiselect,
+                          selection,
+                          onChangeSelection,
+                          getItemId,
+                          item,
+                          mediaField,
+                          titleField,
+                          descriptionField,
+                          regularFields,
+                          badgeFields,
+                          config: {
+                            sizes: size
+                          },
+                          posinset: posInSet,
+                          setsize: setSize
+                        },
+                        getItemId(item)
+                      );
+                    })
+                  }
+                )
               },
-              posinset: posInSet,
-              setsize: setSize
-            }, getItemId(item));
+              groupName
+            )
+          )
+        }
+      ),
+      // Render a single grid with all data.
+      hasData && !dataByGroup && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Composite,
+        {
+          render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_grid_items.GridItems,
+            {
+              className: (0, import_clsx.default)(
+                "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 : void 0;
+            if (!isInfiniteScroll) {
+              posinset = (currentPage - 1) * perPage + index + 1;
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              GridItem,
+              {
+                view,
+                multiselect: isMultiselect,
+                selection,
+                onChangeSelection,
+                getItemId,
+                item,
+                mediaField,
+                titleField,
+                descriptionField,
+                regularFields,
+                badgeFields,
+                config: {
+                  sizes: size
+                },
+                posinset,
+                setsize: setSize
+              },
+              getItemId(item)
+            );
           })
-        })
-      }, groupName))
-    }),
-    // Render a single grid with all data.
-    hasData && !dataByGroup && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite, {
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_gridItems.GridItems, {
-        className: (0, _clsx.default)('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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _clsx.default)({
-        'dataviews-loading': isLoading,
-        'dataviews-no-results': !isLoading
-      }),
-      children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
-      }) : empty
-    }), hasData && isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      className: "dataviews-loading-more",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
-    })]
+      ),
+      // Render empty state.
+      !hasData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: (0, import_clsx.default)({
+            "dataviews-loading": isLoading,
+            "dataviews-no-results": !isLoading
+          }),
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) }) : empty
+        }
+      ),
+      hasData && isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) })
+    ]
   });
 }
-var _default = exports.default = ViewPickerGrid;
-//# sourceMappingURL=index.js.map
+var picker_grid_default = ViewPickerGrid;
+//# sourceMappingURL=index.js.map