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

package/build/dataviews-layouts/list/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 list_exports = {};
+__export(list_exports, {
+  default: () => ViewList
 });
-exports.default = ViewList;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _compose = require("@wordpress/compose");
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _icons = require("@wordpress/icons");
-var _data = require("@wordpress/data");
-var _lockUnlock = require("../../lock-unlock");
-var _dataviewsItemActions = require("../../components/dataviews-item-actions");
-var _dataviewsContext = _interopRequireDefault(require("../../components/dataviews-context"));
-var _getDataByGroup = _interopRequireDefault(require("../utils/get-data-by-group"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  Menu
-} = (0, _lockUnlock.unlock)(_components.privateApis);
+module.exports = __toCommonJS(list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_compose = require("@wordpress/compose");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_data = require("@wordpress/data");
+var import_lock_unlock = require("../../lock-unlock");
+var import_dataviews_item_actions = require("../../components/dataviews-item-actions");
+var import_dataviews_context = __toESM(require("../../components/dataviews-context"));
+var import_get_data_by_group = __toESM(require("../utils/get-data-by-group"));
+const { Menu } = (0, import_lock_unlock.unlock)(import_components.privateApis);
 function generateItemWrapperCompositeId(idPrefix) {
   return `${idPrefix}-item-wrapper`;
 }
@@ -46,48 +58,56 @@ function PrimaryActionGridCell({
   primaryAction,
   item
 }) {
-  const registry = (0, _data.useRegistry)();
-  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(false);
-  const compositeItemId = generatePrimaryActionCompositeId(idPrefix, primaryAction.id);
-  const label = typeof primaryAction.label === 'string' ? primaryAction.label : primaryAction.label([item]);
-  return 'RenderModal' in primaryAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    role: "gridcell",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite.Item, {
+  const registry = (0, import_data.useRegistry)();
+  const [isModalOpen, setIsModalOpen] = (0, import_element.useState)(false);
+  const compositeItemId = generatePrimaryActionCompositeId(
+    idPrefix,
+    primaryAction.id
+  );
+  const label = typeof primaryAction.label === "string" ? primaryAction.label : primaryAction.label([item]);
+  return "RenderModal" in primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Composite.Item,
+    {
       id: compositeItemId,
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        label: label,
-        disabled: !!primaryAction.disabled,
-        accessibleWhenDisabled: true,
-        icon: primaryAction.icon,
-        isDestructive: primaryAction.isDestructive,
-        size: "small",
-        onClick: () => setIsModalOpen(true)
-      }),
-      children: isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.ActionModal, {
-        action: primaryAction,
-        items: [item],
-        closeModal: () => setIsModalOpen(false)
-      })
-    })
-  }, primaryAction.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    role: "gridcell",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite.Item, {
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Button,
+        {
+          label,
+          disabled: !!primaryAction.disabled,
+          accessibleWhenDisabled: true,
+          icon: primaryAction.icon,
+          size: "small",
+          onClick: () => setIsModalOpen(true)
+        }
+      ),
+      children: isModalOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_dataviews_item_actions.ActionModal,
+        {
+          action: primaryAction,
+          items: [item],
+          closeModal: () => setIsModalOpen(false)
+        }
+      )
+    }
+  ) }, primaryAction.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Composite.Item,
+    {
       id: compositeItemId,
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        label: label,
-        disabled: !!primaryAction.disabled,
-        accessibleWhenDisabled: true,
-        icon: primaryAction.icon,
-        isDestructive: primaryAction.isDestructive,
-        size: "small",
-        onClick: () => {
-          primaryAction.callback([item], {
-            registry
-          });
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Button,
+        {
+          label,
+          disabled: !!primaryAction.disabled,
+          accessibleWhenDisabled: true,
+          icon: primaryAction.icon,
+          size: "small",
+          onClick: () => {
+            primaryAction.callback([item], { registry });
+          }
         }
-      })
-    })
-  }, primaryAction.id);
+      )
+    }
+  ) }, primaryAction.id);
 }
 function ListItem({
   view,
@@ -109,173 +129,207 @@ function ListItem({
     showDescription = true,
     infiniteScrollEnabled
   } = view;
-  const itemRef = (0, _element.useRef)(null);
+  const itemRef = (0, import_element.useRef)(null);
   const labelId = `${idPrefix}-label`;
   const descriptionId = `${idPrefix}-description`;
-  const registry = (0, _data.useRegistry)();
-  const [isHovered, setIsHovered] = (0, _element.useState)(false);
-  const [activeModalAction, setActiveModalAction] = (0, _element.useState)(null);
-  const handleHover = ({
-    type
-  }) => {
-    const isHover = type === 'mouseenter';
+  const registry = (0, import_data.useRegistry)();
+  const [isHovered, setIsHovered] = (0, import_element.useState)(false);
+  const [activeModalAction, setActiveModalAction] = (0, import_element.useState)(
+    null
+  );
+  const handleHover = ({ type }) => {
+    const isHover = type === "mouseenter";
     setIsHovered(isHover);
   };
-  const {
-    paginationInfo
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  (0, _element.useEffect)(() => {
+  const { paginationInfo } = (0, import_element.useContext)(import_dataviews_context.default);
+  (0, import_element.useEffect)(() => {
     if (isSelected) {
       itemRef.current?.scrollIntoView({
-        behavior: 'auto',
-        block: 'nearest',
-        inline: 'nearest'
+        behavior: "auto",
+        block: "nearest",
+        inline: "nearest"
       });
     }
   }, [isSelected]);
-  const {
-    primaryAction,
-    eligibleActions
-  } = (0, _element.useMemo)(() => {
-    // If an action is eligible for all items, doesn't need
-    // to provide the `isEligible` function.
-    const _eligibleActions = actions.filter(action => !action.isEligible || action.isEligible(item));
-    const _primaryActions = _eligibleActions.filter(action => action.isPrimary && !!action.icon);
+  const { primaryAction, eligibleActions } = (0, import_element.useMemo)(() => {
+    const _eligibleActions = actions.filter(
+      (action) => !action.isEligible || action.isEligible(item)
+    );
+    const _primaryActions = _eligibleActions.filter(
+      (action) => action.isPrimary && !!action.icon
+    );
     return {
       primaryAction: _primaryActions[0],
       eligibleActions: _eligibleActions
     };
   }, [actions, item]);
   const hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;
-  const renderedMediaField = showMedia && mediaField?.render ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "dataviews-view-list__media-wrapper",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(mediaField.render, {
-      item: item,
+  const renderedMediaField = showMedia && mediaField?.render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-list__media-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    mediaField.render,
+    {
+      item,
       field: mediaField,
-      config: {
-        sizes: '52px'
+      config: { sizes: "52px" }
+    }
+  ) }) : null;
+  const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(titleField.render, { item, field: titleField }) : null;
+  const usedActions = eligibleActions?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 3, className: "dataviews-view-list__item-actions", children: [
+    primaryAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PrimaryActionGridCell,
+      {
+        idPrefix,
+        primaryAction,
+        item
       }
-    })
-  }) : null;
-  const renderedTitleField = showTitle && titleField?.render ? /*#__PURE__*/(0, _jsxRuntime.jsx)(titleField.render, {
-    item: item,
-    field: titleField
-  }) : null;
-  const usedActions = eligibleActions?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-    spacing: 3,
-    className: "dataviews-view-list__item-actions",
-    children: [primaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrimaryActionGridCell, {
-      idPrefix: idPrefix,
-      primaryAction: primaryAction,
-      item: item
-    }), !hasOnlyOnePrimaryAction && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      role: "gridcell",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
-        placement: "bottom-end",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.TriggerButton, {
-          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite.Item, {
-            id: generateDropdownTriggerCompositeId(idPrefix),
-            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-              size: "small",
-              icon: _icons.moreVertical,
-              label: (0, _i18n.__)('Actions'),
-              accessibleWhenDisabled: true,
-              disabled: !actions.length,
-              onKeyDown: onDropdownTriggerKeyDown
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Popover, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.ActionsMenuGroup, {
+    ),
+    !hasOnlyOnePrimaryAction && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "gridcell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { placement: "bottom-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Menu.TriggerButton,
+          {
+            render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.Composite.Item,
+              {
+                id: generateDropdownTriggerCompositeId(
+                  idPrefix
+                ),
+                render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    size: "small",
+                    icon: import_icons.moreVertical,
+                    label: (0, import_i18n.__)("Actions"),
+                    accessibleWhenDisabled: true,
+                    disabled: !actions.length,
+                    onKeyDown: onDropdownTriggerKeyDown
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_dataviews_item_actions.ActionsMenuGroup,
+          {
             actions: eligibleActions,
-            item: item,
-            registry: registry,
-            setActiveModalAction: setActiveModalAction
-          })
-        })]
-      }), !!activeModalAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.ActionModal, {
-        action: activeModalAction,
-        items: [item],
-        closeModal: () => setActiveModalAction(null)
-      })]
-    })]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite.Row, {
-    ref: itemRef,
-    render:
-    /*#__PURE__*/
-    /* aria-posinset breaks Composite.Row if passed to it directly. */
-    (0, _jsxRuntime.jsx)("div", {
-      "aria-posinset": posinset,
-      "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : undefined
-    }),
-    role: infiniteScrollEnabled ? 'article' : 'row',
-    className: (0, _clsx.default)({
-      'is-selected': isSelected,
-      'is-hovered': isHovered
-    }),
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-      className: "dataviews-view-list__item-wrapper",
-      spacing: 0,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        role: "gridcell",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite.Item, {
-          id: generateItemWrapperCompositeId(idPrefix),
-          "aria-pressed": isSelected,
-          "aria-labelledby": labelId,
-          "aria-describedby": descriptionId,
-          className: "dataviews-view-list__item",
-          onClick: () => onSelect(item)
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        spacing: 3,
-        justify: "start",
-        alignment: "flex-start",
-        children: [renderedMediaField, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-          spacing: 1,
-          className: "dataviews-view-list__field-wrapper",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-            spacing: 0,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "dataviews-title-field",
-              id: labelId,
-              children: renderedTitleField
-            }), usedActions]
-          }), showDescription && descriptionField?.render && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dataviews-view-list__field",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(descriptionField.render, {
-              item: item,
-              field: descriptionField
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dataviews-view-list__fields",
-            id: descriptionId,
-            children: otherFields.map(field => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "dataviews-view-list__field",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
-                as: "span",
-                className: "dataviews-view-list__field-label",
-                children: field.label
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "dataviews-view-list__field-value",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(field.render, {
-                  item: item,
-                  field: field
-                })
-              })]
-            }, field.id))
-          })]
-        })]
-      })]
-    })
-  });
+            item,
+            registry,
+            setActiveModalAction
+          }
+        ) })
+      ] }),
+      !!activeModalAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_dataviews_item_actions.ActionModal,
+        {
+          action: activeModalAction,
+          items: [item],
+          closeModal: () => setActiveModalAction(null)
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Composite.Row,
+    {
+      ref: itemRef,
+      render: (
+        /* aria-posinset breaks Composite.Row if passed to it directly. */
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "aria-posinset": posinset,
+            "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : void 0
+          }
+        )
+      ),
+      role: infiniteScrollEnabled ? "article" : "row",
+      className: (0, import_clsx.default)({
+        "is-selected": isSelected,
+        "is-hovered": isHovered
+      }),
+      onMouseEnter: handleHover,
+      onMouseLeave: handleHover,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { className: "dataviews-view-list__item-wrapper", spacing: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Composite.Item,
+          {
+            id: generateItemWrapperCompositeId(idPrefix),
+            "aria-pressed": isSelected,
+            "aria-labelledby": labelId,
+            "aria-describedby": descriptionId,
+            className: "dataviews-view-list__item",
+            onClick: () => onSelect(item)
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 3, justify: "start", alignment: "flex-start", children: [
+          renderedMediaField,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_components.__experimentalVStack,
+            {
+              spacing: 1,
+              className: "dataviews-view-list__field-wrapper",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 0, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: "dataviews-title-field",
+                      id: labelId,
+                      children: renderedTitleField
+                    }
+                  ),
+                  usedActions
+                ] }),
+                showDescription && descriptionField?.render && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-list__field", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  descriptionField.render,
+                  {
+                    item,
+                    field: descriptionField
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "dataviews-view-list__fields",
+                    id: descriptionId,
+                    children: otherFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        className: "dataviews-view-list__field",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_components.VisuallyHidden,
+                            {
+                              as: "span",
+                              className: "dataviews-view-list__field-label",
+                              children: field.label
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-view-list__field-value", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            field.render,
+                            {
+                              item,
+                              field
+                            }
+                          ) })
+                        ]
+                      },
+                      field.id
+                    ))
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
 }
 function isDefined(item) {
   return !!item;
 }
 function ViewList(props) {
-  var _view$fields;
   const {
     actions,
     data,
@@ -288,156 +342,189 @@ function ViewList(props) {
     className,
     empty
   } = props;
-  const baseId = (0, _compose.useInstanceId)(ViewList, 'view-list');
-  const selectedItem = data?.findLast(item => selection.includes(getItemId(item)));
-  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 : []).map(fieldId => fields.find(f => fieldId === f.id)).filter(isDefined);
-  const onSelect = item => onChangeSelection([getItemId(item)]);
-  const generateCompositeItemIdPrefix = (0, _element.useCallback)(item => `${baseId}-${getItemId(item)}`, [baseId, getItemId]);
-  const isActiveCompositeItem = (0, _element.useCallback)((item, idToCheck) => {
-    // All composite items use the same prefix in their IDs.
-    return idToCheck.startsWith(generateCompositeItemIdPrefix(item));
-  }, [generateCompositeItemIdPrefix]);
-
-  // Controlled state for the active composite item.
-  const [activeCompositeId, setActiveCompositeId] = (0, _element.useState)(undefined);
-
-  // Update the active composite item when the selected item changes.
-  (0, _element.useEffect)(() => {
+  const baseId = (0, import_compose.useInstanceId)(ViewList, "view-list");
+  const selectedItem = data?.findLast(
+    (item) => selection.includes(getItemId(item))
+  );
+  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 ?? []).map((fieldId) => fields.find((f) => fieldId === f.id)).filter(isDefined);
+  const onSelect = (item) => onChangeSelection([getItemId(item)]);
+  const generateCompositeItemIdPrefix = (0, import_element.useCallback)(
+    (item) => `${baseId}-${getItemId(item)}`,
+    [baseId, getItemId]
+  );
+  const isActiveCompositeItem = (0, import_element.useCallback)(
+    (item, idToCheck) => {
+      return idToCheck.startsWith(
+        generateCompositeItemIdPrefix(item)
+      );
+    },
+    [generateCompositeItemIdPrefix]
+  );
+  const [activeCompositeId, setActiveCompositeId] = (0, import_element.useState)(void 0);
+  (0, import_element.useEffect)(() => {
     if (selectedItem) {
-      setActiveCompositeId(generateItemWrapperCompositeId(generateCompositeItemIdPrefix(selectedItem)));
+      setActiveCompositeId(
+        generateItemWrapperCompositeId(
+          generateCompositeItemIdPrefix(selectedItem)
+        )
+      );
     }
   }, [selectedItem, generateCompositeItemIdPrefix]);
-  const activeItemIndex = data.findIndex(item => isActiveCompositeItem(item, activeCompositeId !== null && activeCompositeId !== void 0 ? activeCompositeId : ''));
-  const previousActiveItemIndex = (0, _compose.usePrevious)(activeItemIndex);
+  const activeItemIndex = data.findIndex(
+    (item) => isActiveCompositeItem(item, activeCompositeId ?? "")
+  );
+  const previousActiveItemIndex = (0, import_compose.usePrevious)(activeItemIndex);
   const isActiveIdInList = activeItemIndex !== -1;
-  const selectCompositeItem = (0, _element.useCallback)((targetIndex, generateCompositeId) => {
-    // Clamping between 0 and data.length - 1 to avoid out of bounds.
-    const clampedIndex = Math.min(data.length - 1, Math.max(0, targetIndex));
-    if (!data[clampedIndex]) {
-      return;
-    }
-    const itemIdPrefix = generateCompositeItemIdPrefix(data[clampedIndex]);
-    const targetCompositeItemId = generateCompositeId(itemIdPrefix);
-    setActiveCompositeId(targetCompositeItemId);
-    document.getElementById(targetCompositeItemId)?.focus();
-  }, [data, generateCompositeItemIdPrefix]);
-
-  // Select a new active composite item when the current active item
-  // is removed from the list.
-  (0, _element.useEffect)(() => {
-    const wasActiveIdInList = previousActiveItemIndex !== undefined && previousActiveItemIndex !== -1;
+  const selectCompositeItem = (0, import_element.useCallback)(
+    (targetIndex, generateCompositeId) => {
+      const clampedIndex = Math.min(
+        data.length - 1,
+        Math.max(0, targetIndex)
+      );
+      if (!data[clampedIndex]) {
+        return;
+      }
+      const itemIdPrefix = generateCompositeItemIdPrefix(
+        data[clampedIndex]
+      );
+      const targetCompositeItemId = generateCompositeId(itemIdPrefix);
+      setActiveCompositeId(targetCompositeItemId);
+      document.getElementById(targetCompositeItemId)?.focus();
+    },
+    [data, generateCompositeItemIdPrefix]
+  );
+  (0, import_element.useEffect)(() => {
+    const wasActiveIdInList = previousActiveItemIndex !== void 0 && previousActiveItemIndex !== -1;
     if (!isActiveIdInList && wasActiveIdInList) {
-      // By picking `previousActiveItemIndex` as the next item index, we are
-      // basically picking the item that would have been after the deleted one.
-      // If the previously active (and removed) item was the last of the list,
-      // we will select the item before it — which is the new last item.
-      selectCompositeItem(previousActiveItemIndex, generateItemWrapperCompositeId);
+      selectCompositeItem(
+        previousActiveItemIndex,
+        generateItemWrapperCompositeId
+      );
     }
   }, [isActiveIdInList, selectCompositeItem, previousActiveItemIndex]);
-
-  // Prevent the default behavior (open dropdown menu) and instead select the
-  // dropdown menu trigger on the previous/next row.
-  // https://github.com/ariakit/ariakit/issues/3768
-  const onDropdownTriggerKeyDown = (0, _element.useCallback)(event => {
-    if (event.key === 'ArrowDown') {
-      // Select the dropdown menu trigger item in the next row.
-      event.preventDefault();
-      selectCompositeItem(activeItemIndex + 1, generateDropdownTriggerCompositeId);
-    }
-    if (event.key === 'ArrowUp') {
-      // Select the dropdown menu trigger item in the previous row.
-      event.preventDefault();
-      selectCompositeItem(activeItemIndex - 1, generateDropdownTriggerCompositeId);
-    }
-  }, [selectCompositeItem, activeItemIndex]);
+  const onDropdownTriggerKeyDown = (0, import_element.useCallback)(
+    (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectCompositeItem(
+          activeItemIndex + 1,
+          generateDropdownTriggerCompositeId
+        );
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        selectCompositeItem(
+          activeItemIndex - 1,
+          generateDropdownTriggerCompositeId
+        );
+      }
+    },
+    [selectCompositeItem, activeItemIndex]
+  );
   const hasData = data?.length;
   if (!hasData) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _clsx.default)({
-        'dataviews-loading': isLoading,
-        'dataviews-no-results': !hasData && !isLoading
-      }),
-      children: !hasData && (isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
-      }) : empty)
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_clsx.default)({
+          "dataviews-loading": isLoading,
+          "dataviews-no-results": !hasData && !isLoading
+        }),
+        children: !hasData && (isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) }) : empty)
+      }
+    );
   }
-  const groupField = view.groupByField ? fields.find(field => field.id === view.groupByField) : null;
-  const dataByGroup = groupField ? (0, _getDataByGroup.default)(data, groupField) : null;
-
-  // Render data grouped by field
+  const groupField = view.groupByField ? fields.find((field) => field.id === view.groupByField) : null;
+  const dataByGroup = groupField ? (0, import_get_data_by_group.default)(data, groupField) : null;
   if (hasData && groupField && dataByGroup) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite, {
-      id: `${baseId}`,
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}),
-      className: "dataviews-view-list__group",
-      role: "grid",
-      activeId: activeCompositeId,
-      setActiveId: setActiveCompositeId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-        spacing: 4,
-        className: (0, _clsx.default)('dataviews-view-list', className),
-        children: Array.from(dataByGroup.entries()).map(([groupName, groupItems]) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-          spacing: 2,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-            className: "dataviews-view-list__group-header",
-            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)
-          }), groupItems.map(item => {
-            const id = generateCompositeItemIdPrefix(item);
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
-              view: view,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Composite,
+      {
+        id: `${baseId}`,
+        render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+        className: "dataviews-view-list__group",
+        role: "grid",
+        activeId: activeCompositeId,
+        setActiveId: setActiveCompositeId,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalVStack,
+          {
+            spacing: 4,
+            className: (0, import_clsx.default)("dataviews-view-list", className),
+            children: Array.from(dataByGroup.entries()).map(
+              ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "dataviews-view-list__group-header", 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
+                ) }),
+                groupItems.map((item) => {
+                  const id = generateCompositeItemIdPrefix(item);
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    ListItem,
+                    {
+                      view,
+                      idPrefix: id,
+                      actions,
+                      item,
+                      isSelected: item === selectedItem,
+                      onSelect,
+                      mediaField,
+                      titleField,
+                      descriptionField,
+                      otherFields,
+                      onDropdownTriggerKeyDown
+                    },
+                    id
+                  );
+                })
+              ] }, groupName)
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Composite,
+      {
+        id: baseId,
+        render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+        className: (0, import_clsx.default)("dataviews-view-list", className),
+        role: view.infiniteScrollEnabled ? "feed" : "grid",
+        activeId: activeCompositeId,
+        setActiveId: setActiveCompositeId,
+        children: data.map((item, index) => {
+          const id = generateCompositeItemIdPrefix(item);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ListItem,
+            {
+              view,
               idPrefix: id,
-              actions: actions,
-              item: item,
+              actions,
+              item,
               isSelected: item === selectedItem,
-              onSelect: onSelect,
-              mediaField: mediaField,
-              titleField: titleField,
-              descriptionField: descriptionField,
-              otherFields: otherFields,
-              onDropdownTriggerKeyDown: onDropdownTriggerKeyDown
-            }, id);
-          })]
-        }, groupName))
-      })
-    });
-  }
-
-  // Render ungrouped data
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite, {
-      id: baseId,
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}),
-      className: (0, _clsx.default)('dataviews-view-list', className),
-      role: view.infiniteScrollEnabled ? 'feed' : 'grid',
-      activeId: activeCompositeId,
-      setActiveId: setActiveCompositeId,
-      children: data.map((item, index) => {
-        const id = generateCompositeItemIdPrefix(item);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
-          view: view,
-          idPrefix: id,
-          actions: actions,
-          item: item,
-          isSelected: item === selectedItem,
-          onSelect: onSelect,
-          mediaField: mediaField,
-          titleField: titleField,
-          descriptionField: descriptionField,
-          otherFields: otherFields,
-          onDropdownTriggerKeyDown: onDropdownTriggerKeyDown,
-          posinset: view.infiniteScrollEnabled ? index + 1 : undefined
-        }, id);
-      })
-    }), hasData && isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      className: "dataviews-loading-more",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
-    })]
-  });
+              onSelect,
+              mediaField,
+              titleField,
+              descriptionField,
+              otherFields,
+              onDropdownTriggerKeyDown,
+              posinset: view.infiniteScrollEnabled ? index + 1 : void 0
+            },
+            id
+          );
+        })
+      }
+    ),
+    hasData && isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) })
+  ] });
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map