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

package/build/components/dataviews-view-config/index.js

@@ -1,84 +1,100 @@
 "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 dataviews_view_config_exports = {};
+__export(dataviews_view_config_exports, {
+  DataviewsViewConfigDropdown: () => DataviewsViewConfigDropdown,
+  ViewTypeMenu: () => ViewTypeMenu,
+  default: () => dataviews_view_config_default
 });
-exports.DataviewsViewConfigDropdown = DataviewsViewConfigDropdown;
-exports.ViewTypeMenu = ViewTypeMenu;
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _warning = _interopRequireDefault(require("@wordpress/warning"));
-var _compose = require("@wordpress/compose");
-var _constants = require("../../constants");
-var _dataviewsLayouts = require("../../dataviews-layouts");
-var _dataviewsContext = _interopRequireDefault(require("../dataviews-context"));
-var _infiniteScrollToggle = _interopRequireDefault(require("./infinite-scroll-toggle"));
-var _lockUnlock = require("../../lock-unlock");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  Menu
-} = (0, _lockUnlock.unlock)(_components.privateApis);
+module.exports = __toCommonJS(dataviews_view_config_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_icons = require("@wordpress/icons");
+var import_warning = __toESM(require("@wordpress/warning"));
+var import_compose = require("@wordpress/compose");
+var import_constants = require("../../constants");
+var import_dataviews_layouts = require("../../dataviews-layouts");
+var import_dataviews_context = __toESM(require("../dataviews-context"));
+var import_infinite_scroll_toggle = __toESM(require("./infinite-scroll-toggle"));
+var import_lock_unlock = require("../../lock-unlock");
+const { Menu } = (0, import_lock_unlock.unlock)(import_components.privateApis);
 const DATAVIEWS_CONFIG_POPOVER_PROPS = {
-  className: 'dataviews-config__popover',
-  placement: 'bottom-end',
+  className: "dataviews-config__popover",
+  placement: "bottom-end",
   offset: 9
 };
 function ViewTypeMenu() {
-  const {
-    view,
-    onChangeView,
-    defaultLayouts
-  } = (0, _element.useContext)(_dataviewsContext.default);
+  const { view, onChangeView, defaultLayouts } = (0, import_element.useContext)(import_dataviews_context.default);
   const availableLayouts = Object.keys(defaultLayouts);
   if (availableLayouts.length <= 1) {
     return null;
   }
-  const activeView = _dataviewsLayouts.VIEW_LAYOUTS.find(v => view.type === v.type);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.TriggerButton, {
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        size: "compact",
-        icon: activeView?.icon,
-        label: (0, _i18n.__)('Layout')
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Popover, {
-      children: availableLayouts.map(layout => {
-        const config = _dataviewsLayouts.VIEW_LAYOUTS.find(v => v.type === layout);
-        if (!config) {
-          return null;
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.RadioItem, {
+  const activeView = import_dataviews_layouts.VIEW_LAYOUTS.find((v) => view.type === v.type);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Menu.TriggerButton,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            size: "compact",
+            icon: activeView?.icon,
+            label: (0, import_i18n.__)("Layout")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: availableLayouts.map((layout) => {
+      const config = import_dataviews_layouts.VIEW_LAYOUTS.find(
+        (v) => v.type === layout
+      );
+      if (!config) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Menu.RadioItem,
+        {
           value: layout,
           name: "view-actions-available-view",
           checked: layout === view.type,
           hideOnClick: true,
-          onChange: e => {
+          onChange: (e) => {
             switch (e.target.value) {
-              case 'list':
-              case 'grid':
-              case 'table':
-              case 'pickerGrid':
-                const viewWithoutLayout = {
-                  ...view
-                };
-                if ('layout' in viewWithoutLayout) {
+              case "list":
+              case "grid":
+              case "table":
+              case "pickerGrid":
+                const viewWithoutLayout = { ...view };
+                if ("layout" in viewWithoutLayout) {
                   delete viewWithoutLayout.layout;
                 }
                 return onChangeView({
@@ -87,129 +103,136 @@ function ViewTypeMenu() {
                   ...defaultLayouts[e.target.value]
                 });
             }
-            globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('Invalid dataview') : void 0;
+            (0, import_warning.default)("Invalid dataview");
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.ItemLabel, {
-            children: config.label
-          })
-        }, layout);
-      })
-    })]
-  });
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: config.label })
+        },
+        layout
+      );
+    }) })
+  ] });
 }
 function SortFieldControl() {
-  const {
-    view,
-    fields,
-    onChangeView
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  const orderOptions = (0, _element.useMemo)(() => {
-    const sortableFields = fields.filter(field => field.enableSorting !== false);
-    return sortableFields.map(field => {
+  const { view, fields, onChangeView } = (0, import_element.useContext)(import_dataviews_context.default);
+  const orderOptions = (0, import_element.useMemo)(() => {
+    const sortableFields = fields.filter(
+      (field) => field.enableSorting !== false
+    );
+    return sortableFields.map((field) => {
       return {
         label: field.label,
         value: field.id
       };
     });
   }, [fields]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
-    __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
-    label: (0, _i18n.__)('Sort by'),
-    value: view.sort?.field,
-    options: orderOptions,
-    onChange: value => {
-      onChangeView({
-        ...view,
-        sort: {
-          direction: view?.sort?.direction || 'desc',
-          field: value
-        },
-        showLevels: false
-      });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.SelectControl,
+    {
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: true,
+      label: (0, import_i18n.__)("Sort by"),
+      value: view.sort?.field,
+      options: orderOptions,
+      onChange: (value) => {
+        onChangeView({
+          ...view,
+          sort: {
+            direction: view?.sort?.direction || "desc",
+            field: value
+          },
+          showLevels: false
+        });
+      }
     }
-  });
+  );
 }
 function SortDirectionControl() {
-  const {
-    view,
-    fields,
-    onChangeView
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  const sortableFields = fields.filter(field => field.enableSorting !== false);
+  const { view, fields, onChangeView } = (0, import_element.useContext)(import_dataviews_context.default);
+  const sortableFields = fields.filter(
+    (field) => field.enableSorting !== false
+  );
   if (sortableFields.length === 0) {
     return null;
   }
   let value = view.sort?.direction;
   if (!value && view.sort?.field) {
-    value = 'desc';
+    value = "desc";
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
-    className: "dataviews-view-config__sort-direction",
-    __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
-    isBlock: true,
-    label: (0, _i18n.__)('Order'),
-    value: value,
-    onChange: newDirection => {
-      if (newDirection === 'asc' || newDirection === 'desc') {
-        onChangeView({
-          ...view,
-          sort: {
-            direction: newDirection,
-            field: view.sort?.field ||
-            // If there is no field assigned as the sorting field assign the first sortable field.
-            fields.find(field => field.enableSorting !== false)?.id || ''
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToggleGroupControl,
+    {
+      className: "dataviews-view-config__sort-direction",
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: true,
+      isBlock: true,
+      label: (0, import_i18n.__)("Order"),
+      value,
+      onChange: (newDirection) => {
+        if (newDirection === "asc" || newDirection === "desc") {
+          onChangeView({
+            ...view,
+            sort: {
+              direction: newDirection,
+              field: view.sort?.field || // If there is no field assigned as the sorting field assign the first sortable field.
+              fields.find(
+                (field) => field.enableSorting !== false
+              )?.id || ""
+            },
+            showLevels: false
+          });
+          return;
+        }
+        (0, import_warning.default)("Invalid direction");
+      },
+      children: import_constants.SORTING_DIRECTIONS.map((direction) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToggleGroupControlOptionIcon,
+          {
+            value: direction,
+            icon: import_constants.sortIcons[direction],
+            label: import_constants.sortLabels[direction]
           },
-          showLevels: false
-        });
-        return;
-      }
-      globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('Invalid direction') : void 0;
-    },
-    children: _constants.SORTING_DIRECTIONS.map(direction => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
-        value: direction,
-        icon: _constants.sortIcons[direction],
-        label: _constants.sortLabels[direction]
-      }, direction);
-    })
-  });
+          direction
+        );
+      })
+    }
+  );
 }
 function ItemsPerPageControl() {
-  const {
-    view,
-    config,
-    onChangeView
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  const {
-    infiniteScrollEnabled
-  } = view;
+  const { view, config, onChangeView } = (0, import_element.useContext)(import_dataviews_context.default);
+  const { infiniteScrollEnabled } = view;
   if (!config || !config.perPageSizes || config.perPageSizes.length < 2 || config.perPageSizes.length > 6 || infiniteScrollEnabled) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
-    __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
-    isBlock: true,
-    label: (0, _i18n.__)('Items per page'),
-    value: view.perPage || 10,
-    disabled: !view?.sort?.field,
-    onChange: newItemsPerPage => {
-      const newItemsPerPageNumber = typeof newItemsPerPage === 'number' || newItemsPerPage === undefined ? newItemsPerPage : parseInt(newItemsPerPage, 10);
-      onChangeView({
-        ...view,
-        perPage: newItemsPerPageNumber,
-        page: 1
-      });
-    },
-    children: config.perPageSizes.map(value => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-        value: value,
-        label: value.toString()
-      }, value);
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToggleGroupControl,
+    {
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: true,
+      isBlock: true,
+      label: (0, import_i18n.__)("Items per page"),
+      value: view.perPage || 10,
+      disabled: !view?.sort?.field,
+      onChange: (newItemsPerPage) => {
+        const newItemsPerPageNumber = typeof newItemsPerPage === "number" || newItemsPerPage === void 0 ? newItemsPerPage : parseInt(newItemsPerPage, 10);
+        onChangeView({
+          ...view,
+          perPage: newItemsPerPageNumber,
+          page: 1
+        });
+      },
+      children: config.perPageSizes.map((value) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToggleGroupControlOption,
+          {
+            value,
+            label: value.toString()
+          },
+          value
+        );
+      })
+    }
+  );
 }
 function PreviewOptions({
   previewOptions,
@@ -217,45 +240,47 @@ function PreviewOptions({
   onMenuOpenChange,
   activeOption
 }) {
-  const focusPreviewOptionsField = id => {
-    // Focus the visibility button to avoid focus loss.
-    // Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
-    // eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+  const focusPreviewOptionsField = (id) => {
     setTimeout(() => {
-      const element = document.querySelector(`.dataviews-field-control__field-${id} .dataviews-field-control__field-preview-options-button`);
+      const element = document.querySelector(
+        `.dataviews-field-control__field-${id} .dataviews-field-control__field-preview-options-button`
+      );
       if (element instanceof HTMLElement) {
         element.focus();
       }
     }, 50);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
-    onOpenChange: onMenuOpenChange,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.TriggerButton, {
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        className: "dataviews-field-control__field-preview-options-button",
-        size: "compact",
-        icon: _icons.moreVertical,
-        label: (0, _i18n.__)('Preview')
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Popover, {
-      children: previewOptions?.map(({
-        id,
-        label
-      }) => {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.RadioItem, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { onOpenChange: onMenuOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Menu.TriggerButton,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            className: "dataviews-field-control__field-preview-options-button",
+            size: "compact",
+            icon: import_icons.moreVertical,
+            label: (0, import_i18n.__)("Preview")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: previewOptions?.map(({ id, label }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Menu.RadioItem,
+        {
           value: id,
           checked: id === activeOption,
           onChange: () => {
             onChangePreviewOption?.(id);
             focusPreviewOptionsField(id);
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.ItemLabel, {
-            children: label
-          })
-        }, id);
-      })
-    })]
-  });
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: label })
+        },
+        id
+      );
+    }) })
+  ] });
 }
 function FieldItem({
   field,
@@ -271,90 +296,116 @@ function FieldItem({
   previewOptions,
   onChangePreviewOption
 }) {
-  const [isChangingPreviewOption, setIsChangingPreviewOption] = (0, _element.useState)(false);
+  const [isChangingPreviewOption, setIsChangingPreviewOption] = (0, import_element.useState)(false);
   const focusVisibilityField = () => {
-    // Focus the visibility button to avoid focus loss.
-    // Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
-    // eslint-disable-next-line @wordpress/react-no-unsafe-timeout
     setTimeout(() => {
-      const element = document.querySelector(`.dataviews-field-control__field-${field.id} .dataviews-field-control__field-visibility-button`);
+      const element = document.querySelector(
+        `.dataviews-field-control__field-${field.id} .dataviews-field-control__field-visibility-button`
+      );
       if (element instanceof HTMLElement) {
         element.focus();
       }
     }, 50);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItem, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalHStack,
+    {
       expanded: true,
-      className: (0, _clsx.default)('dataviews-field-control__field', `dataviews-field-control__field-${field.id}`,
-      // The actions are hidden when the mouse is not hovering the item, or focus
-      // is outside the item.
-      // For actions that require a popover, a menu etc, that would mean that when the interactive element
-      // opens and the focus goes there the actions would be hidden.
-      // To avoid that we add a class to the item, that makes sure actions are visible while there is some
-      // interaction with the item.
-      {
-        'is-interacting': isChangingPreviewOption
-      }),
+      className: (0, import_clsx.default)(
+        "dataviews-field-control__field",
+        `dataviews-field-control__field-${field.id}`,
+        // The actions are hidden when the mouse is not hovering the item, or focus
+        // is outside the item.
+        // For actions that require a popover, a menu etc, that would mean that when the interactive element
+        // opens and the focus goes there the actions would be hidden.
+        // To avoid that we add a class to the item, that makes sure actions are visible while there is some
+        // interaction with the item.
+        { "is-interacting": isChangingPreviewOption }
+      ),
       justify: "flex-start",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dataviews-field-control__icon",
-        children: !canMove && !field.enableHiding && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
-          icon: _icons.lock
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        className: "dataviews-field-control__label-sub-label-container",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "dataviews-field-control__label",
-          children: label || field.label
-        }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "dataviews-field-control__sub-label",
-          children: description
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        justify: "flex-end",
-        expanded: false,
-        className: "dataviews-field-control__actions",
-        children: [isVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-            disabled: isFirst || !canMove,
-            accessibleWhenDisabled: true,
-            size: "compact",
-            onClick: onMoveUp,
-            icon: _icons.chevronUp,
-            label: isFirst || !canMove ? (0, _i18n.__)("This field can't be moved up") : (0, _i18n.sprintf)(/* translators: %s: field label */
-            (0, _i18n.__)('Move %s up'), field.label)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-            disabled: isLast || !canMove,
-            accessibleWhenDisabled: true,
-            size: "compact",
-            onClick: onMoveDown,
-            icon: _icons.chevronDown,
-            label: isLast || !canMove ? (0, _i18n.__)("This field can't be moved down") : (0, _i18n.sprintf)(/* translators: %s: field label */
-            (0, _i18n.__)('Move %s down'), field.label)
-          })]
-        }), onToggleVisibility && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          className: "dataviews-field-control__field-visibility-button",
-          disabled: !field.enableHiding,
-          accessibleWhenDisabled: true,
-          size: "compact",
-          onClick: () => {
-            onToggleVisibility();
-            focusVisibilityField();
-          },
-          icon: isVisible ? _icons.unseen : _icons.seen,
-          label: isVisible ? (0, _i18n.sprintf)(/* translators: %s: field label */
-          (0, _i18n._x)('Hide %s', 'field'), field.label) : (0, _i18n.sprintf)(/* translators: %s: field label */
-          (0, _i18n._x)('Show %s', 'field'), field.label)
-        }), previewOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewOptions, {
-          previewOptions: previewOptions,
-          onChangePreviewOption: onChangePreviewOption,
-          onMenuOpenChange: setIsChangingPreviewOption,
-          activeOption: field.id
-        })]
-      })]
-    })
-  });
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-field-control__icon", children: !canMove && !field.enableHiding && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: import_icons.lock }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dataviews-field-control__label-sub-label-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-field-control__label", children: label || field.label }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-field-control__sub-label", children: description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.__experimentalHStack,
+          {
+            justify: "flex-end",
+            expanded: false,
+            className: "dataviews-field-control__actions",
+            children: [
+              isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    disabled: isFirst || !canMove,
+                    accessibleWhenDisabled: true,
+                    size: "compact",
+                    onClick: onMoveUp,
+                    icon: import_icons.chevronUp,
+                    label: isFirst || !canMove ? (0, import_i18n.__)("This field can't be moved up") : (0, import_i18n.sprintf)(
+                      /* translators: %s: field label */
+                      (0, import_i18n.__)("Move %s up"),
+                      field.label
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    disabled: isLast || !canMove,
+                    accessibleWhenDisabled: true,
+                    size: "compact",
+                    onClick: onMoveDown,
+                    icon: import_icons.chevronDown,
+                    label: isLast || !canMove ? (0, import_i18n.__)("This field can't be moved down") : (0, import_i18n.sprintf)(
+                      /* translators: %s: field label */
+                      (0, import_i18n.__)("Move %s down"),
+                      field.label
+                    )
+                  }
+                )
+              ] }),
+              onToggleVisibility && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  className: "dataviews-field-control__field-visibility-button",
+                  disabled: !field.enableHiding,
+                  accessibleWhenDisabled: true,
+                  size: "compact",
+                  onClick: () => {
+                    onToggleVisibility();
+                    focusVisibilityField();
+                  },
+                  icon: isVisible ? import_icons.unseen : import_icons.seen,
+                  label: isVisible ? (0, import_i18n.sprintf)(
+                    /* translators: %s: field label */
+                    (0, import_i18n._x)("Hide %s", "field"),
+                    field.label
+                  ) : (0, import_i18n.sprintf)(
+                    /* translators: %s: field label */
+                    (0, import_i18n._x)("Show %s", "field"),
+                    field.label
+                  )
+                }
+              ),
+              previewOptions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                PreviewOptions,
+                {
+                  previewOptions,
+                  onChangePreviewOption,
+                  onMenuOpenChange: setIsChangingPreviewOption,
+                  activeOption: field.id
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 }
 function RegularFieldItem({
   index,
@@ -362,285 +413,309 @@ function RegularFieldItem({
   view,
   onChangeView
 }) {
-  var _view$fields;
-  const visibleFieldIds = (_view$fields = view.fields) !== null && _view$fields !== void 0 ? _view$fields : [];
-  const isVisible = index !== undefined && visibleFieldIds.includes(field.id);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldItem, {
-    field: field,
-    isVisible: isVisible,
-    isFirst: index !== undefined && index < 1,
-    isLast: index !== undefined && index === visibleFieldIds.length - 1,
-    onToggleVisibility: () => {
-      onChangeView({
-        ...view,
-        fields: isVisible ? visibleFieldIds.filter(fieldId => fieldId !== field.id) : [...visibleFieldIds, field.id]
-      });
-    },
-    onMoveUp: index !== undefined ? () => {
-      var _visibleFieldIds$slic;
-      onChangeView({
-        ...view,
-        fields: [...((_visibleFieldIds$slic = visibleFieldIds.slice(0, index - 1)) !== null && _visibleFieldIds$slic !== void 0 ? _visibleFieldIds$slic : []), field.id, visibleFieldIds[index - 1], ...visibleFieldIds.slice(index + 1)]
-      });
-    } : undefined,
-    onMoveDown: index !== undefined ? () => {
-      var _visibleFieldIds$slic2;
-      onChangeView({
-        ...view,
-        fields: [...((_visibleFieldIds$slic2 = visibleFieldIds.slice(0, index)) !== null && _visibleFieldIds$slic2 !== void 0 ? _visibleFieldIds$slic2 : []), visibleFieldIds[index + 1], field.id, ...visibleFieldIds.slice(index + 2)]
-      });
-    } : undefined
-  });
+  const visibleFieldIds = view.fields ?? [];
+  const isVisible = index !== void 0 && visibleFieldIds.includes(field.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldItem,
+    {
+      field,
+      isVisible,
+      isFirst: index !== void 0 && index < 1,
+      isLast: index !== void 0 && index === visibleFieldIds.length - 1,
+      onToggleVisibility: () => {
+        onChangeView({
+          ...view,
+          fields: isVisible ? visibleFieldIds.filter(
+            (fieldId) => fieldId !== field.id
+          ) : [...visibleFieldIds, field.id]
+        });
+      },
+      onMoveUp: index !== void 0 ? () => {
+        onChangeView({
+          ...view,
+          fields: [
+            ...visibleFieldIds.slice(
+              0,
+              index - 1
+            ) ?? [],
+            field.id,
+            visibleFieldIds[index - 1],
+            ...visibleFieldIds.slice(index + 1)
+          ]
+        });
+      } : void 0,
+      onMoveDown: index !== void 0 ? () => {
+        onChangeView({
+          ...view,
+          fields: [
+            ...visibleFieldIds.slice(0, index) ?? [],
+            visibleFieldIds[index + 1],
+            field.id,
+            ...visibleFieldIds.slice(index + 2)
+          ]
+        });
+      } : void 0
+    }
+  );
 }
 function isDefined(item) {
   return !!item;
 }
 function FieldControl() {
-  var _view$fields2;
-  const {
-    view,
-    fields,
-    onChangeView
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  const togglableFields = [view?.titleField, view?.mediaField, view?.descriptionField].filter(Boolean);
-  const visibleFieldIds = (_view$fields2 = view.fields) !== null && _view$fields2 !== void 0 ? _view$fields2 : [];
-  const hiddenFields = fields.filter(f => !visibleFieldIds.includes(f.id) && !togglableFields.includes(f.id) && f.type !== 'media' && f.enableHiding !== false);
-  let visibleFields = visibleFieldIds.map(fieldId => fields.find(f => f.id === fieldId)).filter(isDefined);
+  const { view, fields, onChangeView } = (0, import_element.useContext)(import_dataviews_context.default);
+  const togglableFields = [
+    view?.titleField,
+    view?.mediaField,
+    view?.descriptionField
+  ].filter(Boolean);
+  const visibleFieldIds = view.fields ?? [];
+  const hiddenFields = fields.filter(
+    (f) => !visibleFieldIds.includes(f.id) && !togglableFields.includes(f.id) && f.type !== "media" && f.enableHiding !== false
+  );
+  let visibleFields = visibleFieldIds.map((fieldId) => fields.find((f) => f.id === fieldId)).filter(isDefined);
   if (!visibleFields?.length && !hiddenFields?.length) {
     return null;
   }
-  const titleField = fields.find(f => f.id === view.titleField);
-  const previewField = fields.find(f => f.id === view.mediaField);
-  const descriptionField = fields.find(f => f.id === view.descriptionField);
-  const previewFields = fields.filter(f => f.type === 'media');
+  const titleField = fields.find((f) => f.id === view.titleField);
+  const previewField = fields.find((f) => f.id === view.mediaField);
+  const descriptionField = fields.find(
+    (f) => f.id === view.descriptionField
+  );
+  const previewFields = fields.filter((f) => f.type === "media");
   let previewFieldUI;
   if (previewFields.length > 1) {
-    var _view$showMedia;
-    const isPreviewFieldVisible = isDefined(previewField) && ((_view$showMedia = view.showMedia) !== null && _view$showMedia !== void 0 ? _view$showMedia : true);
-    previewFieldUI = isDefined(previewField) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldItem, {
-      field: previewField,
-      label: (0, _i18n.__)('Preview'),
-      description: previewField.label,
-      isVisible: isPreviewFieldVisible,
-      onToggleVisibility: () => {
-        onChangeView({
-          ...view,
-          showMedia: !isPreviewFieldVisible
-        });
+    const isPreviewFieldVisible = isDefined(previewField) && (view.showMedia ?? true);
+    previewFieldUI = isDefined(previewField) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      FieldItem,
+      {
+        field: previewField,
+        label: (0, import_i18n.__)("Preview"),
+        description: previewField.label,
+        isVisible: isPreviewFieldVisible,
+        onToggleVisibility: () => {
+          onChangeView({
+            ...view,
+            showMedia: !isPreviewFieldVisible
+          });
+        },
+        canMove: false,
+        previewOptions: previewFields.map((field) => ({
+          label: field.label,
+          id: field.id
+        })),
+        onChangePreviewOption: (newPreviewId) => onChangeView({ ...view, mediaField: newPreviewId })
       },
-      canMove: false,
-      previewOptions: previewFields.map(field => ({
-        label: field.label,
-        id: field.id
-      })),
-      onChangePreviewOption: newPreviewId => onChangeView({
-        ...view,
-        mediaField: newPreviewId
-      })
-    }, previewField.id);
+      previewField.id
+    );
   }
-  const lockedFields = [{
-    field: titleField,
-    isVisibleFlag: 'showTitle'
-  }, {
-    field: previewField,
-    isVisibleFlag: 'showMedia',
-    ui: previewFieldUI
-  }, {
-    field: descriptionField,
-    isVisibleFlag: 'showDescription'
-  }].filter(({
-    field
-  }) => isDefined(field));
-  let visibleLockedFields = lockedFields.filter(({
-    field,
-    isVisibleFlag
-  }) => {
-    var _view$isVisibleFlag;
-    return (
+  const lockedFields = [
+    {
+      field: titleField,
+      isVisibleFlag: "showTitle"
+    },
+    {
+      field: previewField,
+      isVisibleFlag: "showMedia",
+      ui: previewFieldUI
+    },
+    {
+      field: descriptionField,
+      isVisibleFlag: "showDescription"
+    }
+  ].filter(({ field }) => isDefined(field));
+  let visibleLockedFields = lockedFields.filter(
+    ({ field, isVisibleFlag }) => (
       // @ts-expect-error
-      isDefined(field) && ((_view$isVisibleFlag = view[isVisibleFlag]) !== null && _view$isVisibleFlag !== void 0 ? _view$isVisibleFlag : true)
-    );
-  });
-
-  // If only one locked field is visible, prevent it from being hidden.
+      isDefined(field) && (view[isVisibleFlag] ?? true)
+    )
+  );
   if (visibleLockedFields.length === 1) {
-    visibleLockedFields = visibleLockedFields.map(locked => ({
+    visibleLockedFields = visibleLockedFields.map((locked) => ({
       ...locked,
-      field: {
-        ...locked.field,
-        enableHiding: false
-      }
+      field: { ...locked.field, enableHiding: false }
     }));
   }
-
-  // If no locked fields are visible but there are visibleFields, lock the last visible field.
   if (visibleLockedFields.length === 0 && visibleFields.length === 1) {
-    visibleFields = [{
-      ...visibleFields[0],
-      enableHiding: false
-    }];
+    visibleFields = [{ ...visibleFields[0], enableHiding: false }];
   }
-  const hiddenLockedFields = lockedFields.filter(({
-    field,
-    isVisibleFlag
-  }) => {
-    var _view$isVisibleFlag2;
-    return (
+  const hiddenLockedFields = lockedFields.filter(
+    ({ field, isVisibleFlag }) => (
       // @ts-expect-error
-      isDefined(field) && !((_view$isVisibleFlag2 = view[isVisibleFlag]) !== null && _view$isVisibleFlag2 !== void 0 ? _view$isVisibleFlag2 : true)
-    );
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-    className: "dataviews-field-control",
-    spacing: 6,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-      className: "dataviews-view-config__properties",
-      spacing: 0,
-      children: (visibleLockedFields.length > 0 || !!visibleFields?.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalItemGroup, {
-        isBordered: true,
-        isSeparated: true,
-        children: [visibleLockedFields.map(({
-          field,
-          isVisibleFlag,
-          ui
-        }) => {
-          return ui !== null && ui !== void 0 ? ui : /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldItem, {
-            field: field,
-            isVisible: true,
-            onToggleVisibility: () => {
-              onChangeView({
-                ...view,
-                [isVisibleFlag]: false
-              });
-            },
-            canMove: false
-          }, field.id);
-        }), visibleFields.map((field, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(RegularFieldItem, {
-          field: field,
-          view: view,
-          onChangeView: onChangeView,
-          index: index
-        }, field.id))]
-      })
-    }), (!!hiddenFields?.length || !!hiddenLockedFields.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-      spacing: 4,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
-        style: {
-          margin: 0
-        },
-        children: (0, _i18n.__)('Hidden')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-        className: "dataviews-view-config__properties",
-        spacing: 0,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalItemGroup, {
-          isBordered: true,
-          isSeparated: true,
-          children: [hiddenLockedFields.length > 0 && hiddenLockedFields.map(({
-            field,
-            isVisibleFlag,
-            ui
-          }) => {
-            return ui !== null && ui !== void 0 ? ui : /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldItem, {
-              field: field,
-              isVisible: false,
+      isDefined(field) && !(view[isVisibleFlag] ?? true)
+    )
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { className: "dataviews-field-control", spacing: 6, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { className: "dataviews-view-config__properties", spacing: 0, children: (visibleLockedFields.length > 0 || !!visibleFields?.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalItemGroup, { isBordered: true, isSeparated: true, children: [
+      visibleLockedFields.map(
+        ({ field, isVisibleFlag, ui }) => {
+          return ui ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            FieldItem,
+            {
+              field,
+              isVisible: true,
               onToggleVisibility: () => {
                 onChangeView({
                   ...view,
-                  [isVisibleFlag]: true
+                  [isVisibleFlag]: false
                 });
               },
               canMove: false
-            }, field.id);
-          }), hiddenFields.map(field => /*#__PURE__*/(0, _jsxRuntime.jsx)(RegularFieldItem, {
-            field: field,
-            view: view,
-            onChangeView: onChangeView
-          }, field.id))]
-        })
-      })]
-    })]
-  });
+            },
+            field.id
+          );
+        }
+      ),
+      visibleFields.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        RegularFieldItem,
+        {
+          field,
+          view,
+          onChangeView,
+          index
+        },
+        field.id
+      ))
+    ] }) }),
+    (!!hiddenFields?.length || !!hiddenLockedFields.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { style: { margin: 0 }, children: (0, import_i18n.__)("Hidden") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalVStack,
+        {
+          className: "dataviews-view-config__properties",
+          spacing: 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalItemGroup, { isBordered: true, isSeparated: true, children: [
+            hiddenLockedFields.length > 0 && hiddenLockedFields.map(
+              ({ field, isVisibleFlag, ui }) => {
+                return ui ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  FieldItem,
+                  {
+                    field,
+                    isVisible: false,
+                    onToggleVisibility: () => {
+                      onChangeView({
+                        ...view,
+                        [isVisibleFlag]: true
+                      });
+                    },
+                    canMove: false
+                  },
+                  field.id
+                );
+              }
+            ),
+            hiddenFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              RegularFieldItem,
+              {
+                field,
+                view,
+                onChangeView
+              },
+              field.id
+            ))
+          ] })
+        }
+      )
+    ] })
+  ] });
 }
 function SettingsSection({
   title,
   description,
   children
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalGrid, {
-    columns: 12,
-    className: "dataviews-settings-section",
-    gap: 4,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "dataviews-settings-section__sidebar",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
-        level: 2,
-        className: "dataviews-settings-section__title",
-        children: title
-      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
-        variant: "muted",
-        className: "dataviews-settings-section__description",
-        children: description
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalGrid, {
-      columns: 8,
-      gap: 4,
-      className: "dataviews-settings-section__content",
-      children: children
-    })]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalGrid, { columns: 12, className: "dataviews-settings-section", gap: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dataviews-settings-section__sidebar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalHeading,
+        {
+          level: 2,
+          className: "dataviews-settings-section__title",
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalText,
+        {
+          variant: "muted",
+          className: "dataviews-settings-section__description",
+          children: description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalGrid,
+      {
+        columns: 8,
+        gap: 4,
+        className: "dataviews-settings-section__content",
+        children
+      }
+    )
+  ] });
 }
 function DataviewsViewConfigDropdown() {
-  const {
-    view
-  } = (0, _element.useContext)(_dataviewsContext.default);
-  const popoverId = (0, _compose.useInstanceId)(_DataViewsViewConfig, 'dataviews-view-config-dropdown');
-  const activeLayout = _dataviewsLayouts.VIEW_LAYOUTS.find(layout => layout.type === view.type);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
-    expandOnMobile: true,
-    popoverProps: {
-      ...DATAVIEWS_CONFIG_POPOVER_PROPS,
-      id: popoverId
-    },
-    renderToggle: ({
-      onToggle,
-      isOpen
-    }) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        size: "compact",
-        icon: _icons.cog,
-        label: (0, _i18n._x)('View options', 'View is used as a noun'),
-        onClick: onToggle,
-        "aria-expanded": isOpen ? 'true' : 'false',
-        "aria-controls": popoverId
-      });
-    },
-    renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalDropdownContentWrapper, {
-      paddingSize: "medium",
-      className: "dataviews-config__popover-content-wrapper",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-        className: "dataviews-view-config",
-        spacing: 6,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(SettingsSection, {
-          title: (0, _i18n.__)('Appearance'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-            expanded: true,
-            className: "is-divided-in-two",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SortFieldControl, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(SortDirectionControl, {})]
-          }), !!activeLayout?.viewConfigOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)(activeLayout.viewConfigOptions, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_infiniteScrollToggle.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemsPerPageControl, {})]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsSection, {
-          title: (0, _i18n.__)('Properties'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldControl, {})
-        })]
-      })
-    })
-  });
+  const { view } = (0, import_element.useContext)(import_dataviews_context.default);
+  const popoverId = (0, import_compose.useInstanceId)(
+    _DataViewsViewConfig,
+    "dataviews-view-config-dropdown"
+  );
+  const activeLayout = import_dataviews_layouts.VIEW_LAYOUTS.find(
+    (layout) => layout.type === view.type
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Dropdown,
+    {
+      expandOnMobile: true,
+      popoverProps: {
+        ...DATAVIEWS_CONFIG_POPOVER_PROPS,
+        id: popoverId
+      },
+      renderToggle: ({ onToggle, isOpen }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            size: "compact",
+            icon: import_icons.cog,
+            label: (0, import_i18n._x)("View options", "View is used as a noun"),
+            onClick: onToggle,
+            "aria-expanded": isOpen ? "true" : "false",
+            "aria-controls": popoverId
+          }
+        );
+      },
+      renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalDropdownContentWrapper,
+        {
+          paddingSize: "medium",
+          className: "dataviews-config__popover-content-wrapper",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { className: "dataviews-view-config", spacing: 6, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SettingsSection, { title: (0, import_i18n.__)("Appearance"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { expanded: true, className: "is-divided-in-two", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortFieldControl, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortDirectionControl, {})
+              ] }),
+              !!activeLayout?.viewConfigOptions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(activeLayout.viewConfigOptions, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_infinite_scroll_toggle.default, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemsPerPageControl, {})
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingsSection, { title: (0, import_i18n.__)("Properties"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldControl, {}) })
+          ] })
+        }
+      )
+    }
+  );
 }
 function _DataViewsViewConfig() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ViewTypeMenu, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataviewsViewConfigDropdown, {})]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewTypeMenu, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataviewsViewConfigDropdown, {})
+  ] });
 }
-const DataViewsViewConfig = (0, _element.memo)(_DataViewsViewConfig);
-var _default = exports.default = DataViewsViewConfig;
-//# sourceMappingURL=index.js.map
+const DataViewsViewConfig = (0, import_element.memo)(_DataViewsViewConfig);
+var dataviews_view_config_default = DataViewsViewConfig;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataviewsViewConfigDropdown,
+  ViewTypeMenu
+});
+//# sourceMappingURL=index.js.map