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

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

@@ -1,58 +1,66 @@
 "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 table_exports = {};
+__export(table_exports, {
+  default: () => table_default
 });
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _keycodes = require("@wordpress/keycodes");
-var _dataviewsContext = _interopRequireDefault(require("../../components/dataviews-context"));
-var _dataviewsSelectionCheckbox = _interopRequireDefault(require("../../components/dataviews-selection-checkbox"));
-var _dataviewsItemActions = _interopRequireDefault(require("../../components/dataviews-item-actions"));
-var _constants = require("../../constants");
-var _dataviewsBulkActions = require("../../components/dataviews-bulk-actions");
-var _columnHeaderMenu = _interopRequireDefault(require("./column-header-menu"));
-var _columnPrimary = _interopRequireDefault(require("./column-primary"));
-var _useIsHorizontalScrollEnd = require("./use-is-horizontal-scroll-end");
-var _getDataByGroup = _interopRequireDefault(require("../utils/get-data-by-group"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(table_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_keycodes = require("@wordpress/keycodes");
+var import_dataviews_context = __toESM(require("../../components/dataviews-context"));
+var import_dataviews_selection_checkbox = __toESM(require("../../components/dataviews-selection-checkbox"));
+var import_dataviews_item_actions = __toESM(require("../../components/dataviews-item-actions"));
+var import_constants = require("../../constants");
+var import_dataviews_bulk_actions = require("../../components/dataviews-bulk-actions");
+var import_column_header_menu = __toESM(require("./column-header-menu"));
+var import_column_primary = __toESM(require("./column-primary"));
+var import_use_is_horizontal_scroll_end = require("./use-is-horizontal-scroll-end");
+var import_get_data_by_group = __toESM(require("../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 = (0, _clsx.default)('dataviews-view-table__cell-content-wrapper', {
-    'dataviews-view-table__cell-align-end': align === 'end',
-    'dataviews-view-table__cell-align-center': align === 'center'
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: className,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(field.render, {
-      item: item,
-      field: field
-    })
+  const className = (0, import_clsx.default)("dataviews-view-table__cell-content-wrapper", {
+    "dataviews-view-table__cell-align-end": align === "end",
+    "dataviews-view-table__cell-align-center": align === "center"
   });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(field.render, { item, field }) });
 }
 function TableRow({
   hasBulkActions,
@@ -74,13 +82,10 @@ function TableRow({
   isActionsColumnSticky,
   posinset
 }) {
-  var _view$fields;
-  const {
-    paginationInfo
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  const hasPossibleBulkAction = (0, _dataviewsBulkActions.useHasAPossibleBulkAction)(actions, item);
+  const { paginationInfo } = (0, import_element.useContext)(import_dataviews_context.default);
+  const hasPossibleBulkAction = (0, import_dataviews_bulk_actions.useHasAPossibleBulkAction)(actions, item);
   const isSelected = hasPossibleBulkAction && selection.includes(id);
-  const [isHovered, setIsHovered] = (0, _element.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_element.useState)(false);
   const {
     showTitle = true,
     showMedia = true,
@@ -93,108 +98,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 = (0, _element.useRef)(false);
-  const columns = (_view$fields = view.fields) !== null && _view$fields !== void 0 ? _view$fields : [];
+  const isTouchDeviceRef = (0, import_element.useRef)(false);
+  const columns = view.fields ?? [];
   const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-    className: (0, _clsx.default)('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 ((0, _keycodes.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__*/(0, _jsxRuntime.jsx)("td", {
-      className: "dataviews-view-table__checkbox-column",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dataviews-view-table__cell-content-wrapper",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsSelectionCheckbox.default, {
-          item: item,
-          selection: selection,
-          onChangeSelection: onChangeSelection,
-          getItemId: getItemId,
-          titleField: titleField,
-          disabled: !hasPossibleBulkAction
-        })
-      })
-    }), hasPrimaryColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnPrimary.default, {
-        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__*/(0, _jsxRuntime.jsx)("td", {
-        style: {
-          width,
-          maxWidth,
-          minWidth
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.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 */
-    (0, _jsxRuntime.jsx)("td", {
-      className: (0, _clsx.default)('dataviews-view-table__actions-column', {
-        'dataviews-view-table__actions-column--sticky': true,
-        'dataviews-view-table__actions-column--stuck': isActionsColumnSticky
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "tr",
+    {
+      className: (0, import_clsx.default)("dataviews-view-table__row", {
+        "is-selected": hasPossibleBulkAction && isSelected,
+        "is-hovered": isHovered,
+        "has-bulk-actions": hasPossibleBulkAction
       }),
-      onClick: e => e.stopPropagation(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.default, {
-        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 ((0, import_keycodes.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__ */ (0, import_jsx_runtime.jsx)("td", { className: "dataviews-view-table__checkbox-column", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-table__cell-content-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_dataviews_selection_checkbox.default,
+          {
+            item,
+            selection,
+            onChangeSelection,
+            getItemId,
+            titleField,
+            disabled: !hasPossibleBulkAction
+          }
+        ) }) }),
+        hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_column_primary.default,
+          {
+            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__ */ (0, import_jsx_runtime.jsx)(
+            "td",
+            {
+              style: {
+                width,
+                maxWidth,
+                minWidth
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+          "td",
+          {
+            className: (0, import_clsx.default)("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__ */ (0, import_jsx_runtime.jsx)(import_dataviews_item_actions.default, { item, actions })
+          }
+        )
+      ]
+    }
+  );
 }
 function ViewTable({
   actions,
@@ -214,53 +224,44 @@ function ViewTable({
   className,
   empty
 }) {
-  var _view$fields2;
-  const {
-    containerRef
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  const headerMenuRefs = (0, _element.useRef)(new Map());
-  const headerMenuToFocusRef = (0, _element.useRef)();
-  const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = (0, _element.useState)();
-  const hasBulkActions = (0, _dataviewsBulkActions.useSomeItemHasAPossibleBulkAction)(actions, data);
-  (0, _element.useEffect)(() => {
+  const { containerRef } = (0, import_element.useContext)(import_dataviews_context.default);
+  const headerMenuRefs = (0, import_element.useRef)(/* @__PURE__ */ new Map());
+  const headerMenuToFocusRef = (0, import_element.useRef)();
+  const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = (0, import_element.useState)();
+  const hasBulkActions = (0, import_dataviews_bulk_actions.useSomeItemHasAPossibleBulkAction)(actions, data);
+  (0, import_element.useEffect)(() => {
     if (headerMenuToFocusRef.current) {
       headerMenuToFocusRef.current.focus();
-      headerMenuToFocusRef.current = undefined;
+      headerMenuToFocusRef.current = void 0;
     }
   });
-  const tableNoticeId = (0, _element.useId)();
-  const isHorizontalScrollEnd = (0, _useIsHorizontalScrollEnd.useIsHorizontalScrollEnd)({
+  const tableNoticeId = (0, import_element.useId)();
+  const isHorizontalScrollEnd = (0, import_use_is_horizontal_scroll_end.useIsHorizontalScrollEnd)({
     scrollContainerRef: containerRef,
     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 dataByGroup = groupField ? (0, _getDataByGroup.default)(data, groupField) : null;
-  const {
-    showTitle = true,
-    showMedia = true,
-    showDescription = true
-  } = view;
+  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 ? (0, import_get_data_by_group.default)(data, groupField) : null;
+  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,
@@ -271,144 +272,178 @@ function ViewTable({
     }
   };
   const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
-      className: (0, _clsx.default)('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__*/(0, _jsxRuntime.jsx)("thead", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-          className: "dataviews-view-table__row",
-          children: [hasBulkActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
-            className: "dataviews-view-table__checkbox-column",
-            scope: "col",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsBulkActions.BulkSelectionCheckbox, {
-              selection: selection,
-              onChangeSelection: onChangeSelection,
-              data: data,
-              actions: actions,
-              getItemId: getItemId
-            })
-          }), hasPrimaryColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
-            scope: "col",
-            children: titleField && /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnHeaderMenu.default, {
-              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__*/(0, _jsxRuntime.jsx)("th", {
-              style: {
-                width,
-                maxWidth,
-                minWidth,
-                textAlign: align
-              },
-              "aria-sort": view.sort?.direction && view.sort?.field === column ? _constants.sortValues[view.sort.direction] : undefined,
-              scope: "col",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnHeaderMenu.default, {
-                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__*/(0, _jsxRuntime.jsx)("th", {
-            className: (0, _clsx.default)('dataviews-view-table__actions-column', {
-              'dataviews-view-table__actions-column--sticky': true,
-              'dataviews-view-table__actions-column--stuck': !isHorizontalScrollEnd
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "table",
+      {
+        className: (0, import_clsx.default)("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__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: "dataviews-view-table__row", children: [
+            hasBulkActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "th",
+              {
+                className: "dataviews-view-table__checkbox-column",
+                scope: "col",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_dataviews_bulk_actions.BulkSelectionCheckbox,
+                  {
+                    selection,
+                    onChangeSelection,
+                    data,
+                    actions,
+                    getItemId
+                  }
+                )
+              }
+            ),
+            hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: titleField && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_column_header_menu.default,
+              {
+                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__ */ (0, import_jsx_runtime.jsx)(
+                "th",
+                {
+                  style: {
+                    width,
+                    maxWidth,
+                    minWidth,
+                    textAlign: align
+                  },
+                  "aria-sort": view.sort?.direction && view.sort?.field === column ? import_constants.sortValues[view.sort.direction] : void 0,
+                  scope: "col",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_column_header_menu.default,
+                    {
+                      ref: headerMenuRef(column, index),
+                      fieldId: column,
+                      view,
+                      fields,
+                      onChangeView,
+                      onHide,
+                      setOpenedFilter,
+                      canMove: view.layout?.enableMoving ?? true
+                    }
+                  )
+                },
+                column
+              );
             }),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "dataviews-view-table-header",
-              children: (0, _i18n.__)('Actions')
-            })
-          })]
-        })
-      }), hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map(([groupName, groupItems]) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
-          className: "dataviews-view-table__group-header-row",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-            colSpan: columns.length + (hasPrimaryColumn ? 1 : 0) + (hasBulkActions ? 1 : 0) + (actions?.length ? 1 : 0),
-            className: "dataviews-view-table__group-header-cell",
-            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, index) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("tbody", {
-        children: hasData && data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _clsx.default)({
-        'dataviews-loading': isLoading,
-        'dataviews-no-results': !hasData && !isLoading
-      }),
-      id: tableNoticeId,
-      children: [!hasData && (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, {})
-      })]
-    })]
-  });
+            !!actions?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "th",
+              {
+                className: (0, import_clsx.default)(
+                  "dataviews-view-table__actions-column",
+                  {
+                    "dataviews-view-table__actions-column--sticky": true,
+                    "dataviews-view-table__actions-column--stuck": !isHorizontalScrollEnd
+                  }
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-view-table-header", children: (0, import_i18n.__)("Actions") })
+              }
+            )
+          ] }) }),
+          hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map(
+            ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: "dataviews-view-table__group-header-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "td",
+                {
+                  colSpan: columns.length + (hasPrimaryColumn ? 1 : 0) + (hasBulkActions ? 1 : 0) + (actions?.length ? 1 : 0),
+                  className: "dataviews-view-table__group-header-cell",
+                  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, index) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("tbody", { children: hasData && data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.default)({
+          "dataviews-loading": isLoading,
+          "dataviews-no-results": !hasData && !isLoading
+        }),
+        id: tableNoticeId,
+        children: [
+          !hasData && (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 = ViewTable;
-//# sourceMappingURL=index.js.map
+var table_default = ViewTable;
+//# sourceMappingURL=index.js.map