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

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

@@ -1,49 +1,43 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Spinner } from '@wordpress/components';
-import { useContext, useEffect, useId, useRef, useState } from '@wordpress/element';
-import { isAppleOS } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import DataViewsContext from '../../components/dataviews-context';
-import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
-import ItemActions from '../../components/dataviews-item-actions';
-import { sortValues } from '../../constants';
-import { useSomeItemHasAPossibleBulkAction, useHasAPossibleBulkAction, BulkSelectionCheckbox } from '../../components/dataviews-bulk-actions';
-import ColumnHeaderMenu from './column-header-menu';
-import ColumnPrimary from './column-primary';
-import { useIsHorizontalScrollEnd } from './use-is-horizontal-scroll-end';
-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 { __, sprintf } from "@wordpress/i18n";
+import { Spinner } from "@wordpress/components";
+import {
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "@wordpress/element";
+import { isAppleOS } from "@wordpress/keycodes";
+import DataViewsContext from "../../components/dataviews-context";
+import DataViewsSelectionCheckbox from "../../components/dataviews-selection-checkbox";
+import ItemActions from "../../components/dataviews-item-actions";
+import { sortValues } from "../../constants";
+import {
+  useSomeItemHasAPossibleBulkAction,
+  useHasAPossibleBulkAction,
+  BulkSelectionCheckbox
+} from "../../components/dataviews-bulk-actions";
+import ColumnHeaderMenu from "./column-header-menu";
+import ColumnPrimary from "./column-primary";
+import { useIsHorizontalScrollEnd } from "./use-is-horizontal-scroll-end";
+import getDataByGroup from "../utils/get-data-by-group";
 function TableColumnField({
   item,
   fields,
   column,
   align
 }) {
-  const field = fields.find(f => f.id === column);
+  const field = fields.find((f) => f.id === column);
   if (!field) {
     return null;
   }
-  const className = clsx('dataviews-view-table__cell-content-wrapper', {
-    'dataviews-view-table__cell-align-end': align === 'end',
-    'dataviews-view-table__cell-align-center': align === 'center'
-  });
-  return /*#__PURE__*/_jsx("div", {
-    className: className,
-    children: /*#__PURE__*/_jsx(field.render, {
-      item: item,
-      field: field
-    })
+  const className = clsx("dataviews-view-table__cell-content-wrapper", {
+    "dataviews-view-table__cell-align-end": align === "end",
+    "dataviews-view-table__cell-align-center": align === "center"
   });
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(field.render, { item, field }) });
 }
 function TableRow({
   hasBulkActions,
@@ -65,10 +59,7 @@ function TableRow({
   isActionsColumnSticky,
   posinset
 }) {
-  var _view$fields;
-  const {
-    paginationInfo
-  } = useContext(DataViewsContext);
+  const { paginationInfo } = useContext(DataViewsContext);
   const hasPossibleBulkAction = useHasAPossibleBulkAction(actions, item);
   const isSelected = hasPossibleBulkAction && selection.includes(id);
   const [isHovered, setIsHovered] = useState(false);
@@ -84,108 +75,113 @@ function TableRow({
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
-
-  // Will be set to true if `onTouchStart` fires. This happens before
-  // `onClick` and can be used to exclude touchscreen devices from certain
-  // behaviours.
   const isTouchDeviceRef = useRef(false);
-  const columns = (_view$fields = view.fields) !== null && _view$fields !== void 0 ? _view$fields : [];
+  const columns = view.fields ?? [];
   const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription;
-  return /*#__PURE__*/_jsxs("tr", {
-    className: clsx('dataviews-view-table__row', {
-      'is-selected': hasPossibleBulkAction && isSelected,
-      'is-hovered': isHovered,
-      'has-bulk-actions': hasPossibleBulkAction
-    }),
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onTouchStart: () => {
-      isTouchDeviceRef.current = true;
-    },
-    "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : undefined,
-    "aria-posinset": posinset,
-    role: infiniteScrollEnabled ? 'article' : undefined,
-    onClick: event => {
-      if (!hasPossibleBulkAction) {
-        return;
-      }
-      if (!isTouchDeviceRef.current && document.getSelection()?.type !== 'Range') {
-        if (isAppleOS() ? event.metaKey : event.ctrlKey) {
-          // Handle non-consecutive selection.
-          onChangeSelection(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [...selection, id]);
-        } else {
-          // Handle single selection
-          onChangeSelection(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [id]);
-        }
-      }
-    },
-    children: [hasBulkActions && /*#__PURE__*/_jsx("td", {
-      className: "dataviews-view-table__checkbox-column",
-      children: /*#__PURE__*/_jsx("div", {
-        className: "dataviews-view-table__cell-content-wrapper",
-        children: /*#__PURE__*/_jsx(DataViewsSelectionCheckbox, {
-          item: item,
-          selection: selection,
-          onChangeSelection: onChangeSelection,
-          getItemId: getItemId,
-          titleField: titleField,
-          disabled: !hasPossibleBulkAction
-        })
-      })
-    }), hasPrimaryColumn && /*#__PURE__*/_jsx("td", {
-      children: /*#__PURE__*/_jsx(ColumnPrimary, {
-        item: item,
-        level: level,
-        titleField: showTitle ? titleField : undefined,
-        mediaField: showMedia ? mediaField : undefined,
-        descriptionField: showDescription ? descriptionField : undefined,
-        isItemClickable: isItemClickable,
-        onClickItem: onClickItem,
-        renderItemLink: renderItemLink
-      })
-    }), columns.map(column => {
-      var _view$layout$styles$c;
-      // Explicit picks the supported styles.
-      const {
-        width,
-        maxWidth,
-        minWidth,
-        align
-      } = (_view$layout$styles$c = view.layout?.styles?.[column]) !== null && _view$layout$styles$c !== void 0 ? _view$layout$styles$c : {};
-      return /*#__PURE__*/_jsx("td", {
-        style: {
-          width,
-          maxWidth,
-          minWidth
-        },
-        children: /*#__PURE__*/_jsx(TableColumnField, {
-          fields: fields,
-          item: item,
-          column: column,
-          align: align
-        })
-      }, column);
-    }), !!actions?.length &&
-    /*#__PURE__*/
-    // Disable reason: we are not making the element interactive,
-    // but preventing any click events from bubbling up to the
-    // table row. This allows us to add a click handler to the row
-    // itself (to toggle row selection) without erroneously
-    // intercepting click events from ItemActions.
-    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-    _jsx("td", {
-      className: clsx('dataviews-view-table__actions-column', {
-        'dataviews-view-table__actions-column--sticky': true,
-        'dataviews-view-table__actions-column--stuck': isActionsColumnSticky
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: clsx("dataviews-view-table__row", {
+        "is-selected": hasPossibleBulkAction && isSelected,
+        "is-hovered": isHovered,
+        "has-bulk-actions": hasPossibleBulkAction
       }),
-      onClick: e => e.stopPropagation(),
-      children: /*#__PURE__*/_jsx(ItemActions, {
-        item: item,
-        actions: actions
-      })
-    })
-    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */]
-  });
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onTouchStart: () => {
+        isTouchDeviceRef.current = true;
+      },
+      "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : void 0,
+      "aria-posinset": posinset,
+      role: infiniteScrollEnabled ? "article" : void 0,
+      onClick: (event) => {
+        if (!hasPossibleBulkAction) {
+          return;
+        }
+        if (!isTouchDeviceRef.current && document.getSelection()?.type !== "Range") {
+          if (isAppleOS() ? event.metaKey : event.ctrlKey) {
+            onChangeSelection(
+              selection.includes(id) ? selection.filter(
+                (itemId) => id !== itemId
+              ) : [...selection, id]
+            );
+          } else {
+            onChangeSelection(
+              selection.includes(id) ? selection.filter(
+                (itemId) => id !== itemId
+              ) : [id]
+            );
+          }
+        }
+      },
+      children: [
+        hasBulkActions && /* @__PURE__ */ jsx("td", { className: "dataviews-view-table__checkbox-column", children: /* @__PURE__ */ jsx("div", { className: "dataviews-view-table__cell-content-wrapper", children: /* @__PURE__ */ jsx(
+          DataViewsSelectionCheckbox,
+          {
+            item,
+            selection,
+            onChangeSelection,
+            getItemId,
+            titleField,
+            disabled: !hasPossibleBulkAction
+          }
+        ) }) }),
+        hasPrimaryColumn && /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+          ColumnPrimary,
+          {
+            item,
+            level,
+            titleField: showTitle ? titleField : void 0,
+            mediaField: showMedia ? mediaField : void 0,
+            descriptionField: showDescription ? descriptionField : void 0,
+            isItemClickable,
+            onClickItem,
+            renderItemLink
+          }
+        ) }),
+        columns.map((column) => {
+          const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {};
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              style: {
+                width,
+                maxWidth,
+                minWidth
+              },
+              children: /* @__PURE__ */ jsx(
+                TableColumnField,
+                {
+                  fields,
+                  item,
+                  column,
+                  align
+                }
+              )
+            },
+            column
+          );
+        }),
+        !!actions?.length && // Disable reason: we are not making the element interactive,
+        // but preventing any click events from bubbling up to the
+        // table row. This allows us to add a click handler to the row
+        // itself (to toggle row selection) without erroneously
+        // intercepting click events from ItemActions.
+        /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: clsx("dataviews-view-table__actions-column", {
+              "dataviews-view-table__actions-column--sticky": true,
+              "dataviews-view-table__actions-column--stuck": isActionsColumnSticky
+            }),
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx(ItemActions, { item, actions })
+          }
+        )
+      ]
+    }
+  );
 }
 function ViewTable({
   actions,
@@ -205,18 +201,15 @@ function ViewTable({
   className,
   empty
 }) {
-  var _view$fields2;
-  const {
-    containerRef
-  } = useContext(DataViewsContext);
-  const headerMenuRefs = useRef(new Map());
+  const { containerRef } = useContext(DataViewsContext);
+  const headerMenuRefs = useRef(/* @__PURE__ */ new Map());
   const headerMenuToFocusRef = useRef();
   const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = useState();
   const hasBulkActions = useSomeItemHasAPossibleBulkAction(actions, data);
   useEffect(() => {
     if (headerMenuToFocusRef.current) {
       headerMenuToFocusRef.current.focus();
-      headerMenuToFocusRef.current = undefined;
+      headerMenuToFocusRef.current = void 0;
     }
   });
   const tableNoticeId = useId();
@@ -225,33 +218,27 @@ function ViewTable({
     enabled: !!actions?.length
   });
   if (nextHeaderMenuToFocus) {
-    // If we need to force focus, we short-circuit rendering here
-    // to prevent any additional work while we handle that.
-    // Clearing out the focus directive is necessary to make sure
-    // future renders don't cause unexpected focus jumps.
     headerMenuToFocusRef.current = nextHeaderMenuToFocus;
-    setNextHeaderMenuToFocus(undefined);
+    setNextHeaderMenuToFocus(void 0);
     return;
   }
-  const onHide = field => {
+  const onHide = (field) => {
     const hidden = headerMenuRefs.current.get(field.id);
-    const fallback = hidden ? headerMenuRefs.current.get(hidden.fallback) : undefined;
+    const fallback = hidden ? headerMenuRefs.current.get(hidden.fallback) : void 0;
     setNextHeaderMenuToFocus(fallback?.node);
   };
   const hasData = !!data?.length;
-  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 groupField = view.groupByField ? fields.find(f => f.id === view.groupByField) : null;
+  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 groupField = view.groupByField ? fields.find((f) => f.id === view.groupByField) : null;
   const dataByGroup = groupField ? getDataByGroup(data, groupField) : null;
-  const {
-    showTitle = true,
-    showMedia = true,
-    showDescription = true
-  } = view;
+  const { showTitle = true, showMedia = true, showDescription = true } = view;
   const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription;
-  const columns = (_view$fields2 = view.fields) !== null && _view$fields2 !== void 0 ? _view$fields2 : [];
-  const headerMenuRef = (column, index) => node => {
+  const columns = view.fields ?? [];
+  const headerMenuRef = (column, index) => (node) => {
     if (node) {
       headerMenuRefs.current.set(column, {
         node,
@@ -262,144 +249,181 @@ function ViewTable({
     }
   };
   const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("table", {
-      className: clsx('dataviews-view-table', className, {
-        [`has-${view.layout?.density}-density`]: view.layout?.density && ['compact', 'comfortable'].includes(view.layout.density)
-      }),
-      "aria-busy": isLoading,
-      "aria-describedby": tableNoticeId,
-      role: isInfiniteScroll ? 'feed' : undefined,
-      children: [/*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsxs("tr", {
-          className: "dataviews-view-table__row",
-          children: [hasBulkActions && /*#__PURE__*/_jsx("th", {
-            className: "dataviews-view-table__checkbox-column",
-            scope: "col",
-            children: /*#__PURE__*/_jsx(BulkSelectionCheckbox, {
-              selection: selection,
-              onChangeSelection: onChangeSelection,
-              data: data,
-              actions: actions,
-              getItemId: getItemId
-            })
-          }), hasPrimaryColumn && /*#__PURE__*/_jsx("th", {
-            scope: "col",
-            children: titleField && /*#__PURE__*/_jsx(ColumnHeaderMenu, {
-              ref: headerMenuRef(titleField.id, 0),
-              fieldId: titleField.id,
-              view: view,
-              fields: fields,
-              onChangeView: onChangeView,
-              onHide: onHide,
-              setOpenedFilter: setOpenedFilter,
-              canMove: false
-            })
-          }), columns.map((column, index) => {
-            var _view$layout$styles$c2, _view$layout$enableMo;
-            // Explicit picks the supported styles.
-            const {
-              width,
-              maxWidth,
-              minWidth,
-              align
-            } = (_view$layout$styles$c2 = view.layout?.styles?.[column]) !== null && _view$layout$styles$c2 !== void 0 ? _view$layout$styles$c2 : {};
-            return /*#__PURE__*/_jsx("th", {
-              style: {
-                width,
-                maxWidth,
-                minWidth,
-                textAlign: align
-              },
-              "aria-sort": view.sort?.direction && view.sort?.field === column ? sortValues[view.sort.direction] : undefined,
-              scope: "col",
-              children: /*#__PURE__*/_jsx(ColumnHeaderMenu, {
-                ref: headerMenuRef(column, index),
-                fieldId: column,
-                view: view,
-                fields: fields,
-                onChangeView: onChangeView,
-                onHide: onHide,
-                setOpenedFilter: setOpenedFilter,
-                canMove: (_view$layout$enableMo = view.layout?.enableMoving) !== null && _view$layout$enableMo !== void 0 ? _view$layout$enableMo : true
-              })
-            }, column);
-          }), !!actions?.length && /*#__PURE__*/_jsx("th", {
-            className: clsx('dataviews-view-table__actions-column', {
-              'dataviews-view-table__actions-column--sticky': true,
-              'dataviews-view-table__actions-column--stuck': !isHorizontalScrollEnd
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: clsx("dataviews-view-table", className, {
+          [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
+            view.layout.density
+          )
+        }),
+        "aria-busy": isLoading,
+        "aria-describedby": tableNoticeId,
+        role: isInfiniteScroll ? "feed" : void 0,
+        children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "dataviews-view-table__row", children: [
+            hasBulkActions && /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: "dataviews-view-table__checkbox-column",
+                scope: "col",
+                children: /* @__PURE__ */ jsx(
+                  BulkSelectionCheckbox,
+                  {
+                    selection,
+                    onChangeSelection,
+                    data,
+                    actions,
+                    getItemId
+                  }
+                )
+              }
+            ),
+            hasPrimaryColumn && /* @__PURE__ */ jsx("th", { scope: "col", children: titleField && /* @__PURE__ */ jsx(
+              ColumnHeaderMenu,
+              {
+                ref: headerMenuRef(
+                  titleField.id,
+                  0
+                ),
+                fieldId: titleField.id,
+                view,
+                fields,
+                onChangeView,
+                onHide,
+                setOpenedFilter,
+                canMove: false
+              }
+            ) }),
+            columns.map((column, index) => {
+              const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {};
+              return /* @__PURE__ */ jsx(
+                "th",
+                {
+                  style: {
+                    width,
+                    maxWidth,
+                    minWidth,
+                    textAlign: align
+                  },
+                  "aria-sort": view.sort?.direction && view.sort?.field === column ? sortValues[view.sort.direction] : void 0,
+                  scope: "col",
+                  children: /* @__PURE__ */ jsx(
+                    ColumnHeaderMenu,
+                    {
+                      ref: headerMenuRef(column, index),
+                      fieldId: column,
+                      view,
+                      fields,
+                      onChangeView,
+                      onHide,
+                      setOpenedFilter,
+                      canMove: view.layout?.enableMoving ?? true
+                    }
+                  )
+                },
+                column
+              );
             }),
-            children: /*#__PURE__*/_jsx("span", {
-              className: "dataviews-view-table-header",
-              children: __('Actions')
-            })
-          })]
-        })
-      }), hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map(([groupName, groupItems]) => /*#__PURE__*/_jsxs("tbody", {
-        children: [/*#__PURE__*/_jsx("tr", {
-          className: "dataviews-view-table__group-header-row",
-          children: /*#__PURE__*/_jsx("td", {
-            colSpan: columns.length + (hasPrimaryColumn ? 1 : 0) + (hasBulkActions ? 1 : 0) + (actions?.length ? 1 : 0),
-            className: "dataviews-view-table__group-header-cell",
-            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)
-          })
-        }), groupItems.map((item, index) => /*#__PURE__*/_jsx(TableRow, {
-          item: item,
-          level: view.showLevels && typeof getItemLevel === 'function' ? getItemLevel(item) : undefined,
-          hasBulkActions: hasBulkActions,
-          actions: actions,
-          fields: fields,
-          id: getItemId(item) || index.toString(),
-          view: view,
-          titleField: titleField,
-          mediaField: mediaField,
-          descriptionField: descriptionField,
-          selection: selection,
-          getItemId: getItemId,
-          onChangeSelection: onChangeSelection,
-          onClickItem: onClickItem,
-          renderItemLink: renderItemLink,
-          isItemClickable: isItemClickable,
-          isActionsColumnSticky: !isHorizontalScrollEnd
-        }, getItemId(item)))]
-      }, `group-${groupName}`)) : /*#__PURE__*/_jsx("tbody", {
-        children: hasData && data.map((item, index) => /*#__PURE__*/_jsx(TableRow, {
-          item: item,
-          level: view.showLevels && typeof getItemLevel === 'function' ? getItemLevel(item) : undefined,
-          hasBulkActions: hasBulkActions,
-          actions: actions,
-          fields: fields,
-          id: getItemId(item) || index.toString(),
-          view: view,
-          titleField: titleField,
-          mediaField: mediaField,
-          descriptionField: descriptionField,
-          selection: selection,
-          getItemId: getItemId,
-          onChangeSelection: onChangeSelection,
-          onClickItem: onClickItem,
-          renderItemLink: renderItemLink,
-          isItemClickable: isItemClickable,
-          isActionsColumnSticky: !isHorizontalScrollEnd,
-          posinset: isInfiniteScroll ? index + 1 : undefined
-        }, getItemId(item)))
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: clsx({
-        'dataviews-loading': isLoading,
-        'dataviews-no-results': !hasData && !isLoading
-      }),
-      id: tableNoticeId,
-      children: [!hasData && (isLoading ? /*#__PURE__*/_jsx("p", {
-        children: /*#__PURE__*/_jsx(Spinner, {})
-      }) : empty), hasData && isLoading && /*#__PURE__*/_jsx("p", {
-        className: "dataviews-loading-more",
-        children: /*#__PURE__*/_jsx(Spinner, {})
-      })]
-    })]
-  });
+            !!actions?.length && /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: clsx(
+                  "dataviews-view-table__actions-column",
+                  {
+                    "dataviews-view-table__actions-column--sticky": true,
+                    "dataviews-view-table__actions-column--stuck": !isHorizontalScrollEnd
+                  }
+                ),
+                children: /* @__PURE__ */ jsx("span", { className: "dataviews-view-table-header", children: __("Actions") })
+              }
+            )
+          ] }) }),
+          hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map(
+            ([groupName, groupItems]) => /* @__PURE__ */ jsxs("tbody", { children: [
+              /* @__PURE__ */ jsx("tr", { className: "dataviews-view-table__group-header-row", children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: columns.length + (hasPrimaryColumn ? 1 : 0) + (hasBulkActions ? 1 : 0) + (actions?.length ? 1 : 0),
+                  className: "dataviews-view-table__group-header-cell",
+                  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
+                  )
+                }
+              ) }),
+              groupItems.map((item, index) => /* @__PURE__ */ jsx(
+                TableRow,
+                {
+                  item,
+                  level: view.showLevels && typeof getItemLevel === "function" ? getItemLevel(item) : void 0,
+                  hasBulkActions,
+                  actions,
+                  fields,
+                  id: getItemId(item) || index.toString(),
+                  view,
+                  titleField,
+                  mediaField,
+                  descriptionField,
+                  selection,
+                  getItemId,
+                  onChangeSelection,
+                  onClickItem,
+                  renderItemLink,
+                  isItemClickable,
+                  isActionsColumnSticky: !isHorizontalScrollEnd
+                },
+                getItemId(item)
+              ))
+            ] }, `group-${groupName}`)
+          ) : /* @__PURE__ */ jsx("tbody", { children: hasData && data.map((item, index) => /* @__PURE__ */ jsx(
+            TableRow,
+            {
+              item,
+              level: view.showLevels && typeof getItemLevel === "function" ? getItemLevel(item) : void 0,
+              hasBulkActions,
+              actions,
+              fields,
+              id: getItemId(item) || index.toString(),
+              view,
+              titleField,
+              mediaField,
+              descriptionField,
+              selection,
+              getItemId,
+              onChangeSelection,
+              onClickItem,
+              renderItemLink,
+              isItemClickable,
+              isActionsColumnSticky: !isHorizontalScrollEnd,
+              posinset: isInfiniteScroll ? index + 1 : void 0
+            },
+            getItemId(item)
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx({
+          "dataviews-loading": isLoading,
+          "dataviews-no-results": !hasData && !isLoading
+        }),
+        id: tableNoticeId,
+        children: [
+          !hasData && (isLoading ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Spinner, {}) }) : empty),
+          hasData && isLoading && /* @__PURE__ */ jsx("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ jsx(Spinner, {}) })
+        ]
+      }
+    )
+  ] });
 }
-export default ViewTable;
-//# sourceMappingURL=index.js.map
+var table_default = ViewTable;
+export {
+  table_default as default
+};
+//# sourceMappingURL=index.js.map