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

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

@@ -1,75 +1,91 @@
-/**
- * External dependencies
- */
-
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Button, __experimentalDropdownContentWrapper as DropdownContentWrapper, Dropdown, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, SelectControl, __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalGrid as Grid, __experimentalVStack as VStack, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalText as Text, privateApis as componentsPrivateApis, BaseControl, Icon } from '@wordpress/components';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { memo, useContext, useMemo, useState } from '@wordpress/element';
-import { chevronDown, chevronUp, cog, seen, unseen, lock, moreVertical } from '@wordpress/icons';
-import warning from '@wordpress/warning';
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
-import { VIEW_LAYOUTS } from '../../dataviews-layouts';
-import DataViewsContext from '../dataviews-context';
-import InfiniteScrollToggle from './infinite-scroll-toggle';
-import { unlock } from '../../lock-unlock';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  Menu
-} = unlock(componentsPrivateApis);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  Button,
+  __experimentalDropdownContentWrapper as DropdownContentWrapper,
+  Dropdown,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+  SelectControl,
+  __experimentalItemGroup as ItemGroup,
+  __experimentalItem as Item,
+  __experimentalGrid as Grid,
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack,
+  __experimentalHeading as Heading,
+  __experimentalText as Text,
+  privateApis as componentsPrivateApis,
+  BaseControl,
+  Icon
+} from "@wordpress/components";
+import { __, _x, sprintf } from "@wordpress/i18n";
+import { memo, useContext, useMemo, useState } from "@wordpress/element";
+import {
+  chevronDown,
+  chevronUp,
+  cog,
+  seen,
+  unseen,
+  lock,
+  moreVertical
+} from "@wordpress/icons";
+import warning from "@wordpress/warning";
+import { useInstanceId } from "@wordpress/compose";
+import { SORTING_DIRECTIONS, sortIcons, sortLabels } from "../../constants";
+import { VIEW_LAYOUTS } from "../../dataviews-layouts";
+import DataViewsContext from "../dataviews-context";
+import InfiniteScrollToggle from "./infinite-scroll-toggle";
+import { unlock } from "../../lock-unlock";
+const { Menu } = unlock(componentsPrivateApis);
 const DATAVIEWS_CONFIG_POPOVER_PROPS = {
-  className: 'dataviews-config__popover',
-  placement: 'bottom-end',
+  className: "dataviews-config__popover",
+  placement: "bottom-end",
   offset: 9
 };
-export function ViewTypeMenu() {
-  const {
-    view,
-    onChangeView,
-    defaultLayouts
-  } = useContext(DataViewsContext);
+function ViewTypeMenu() {
+  const { view, onChangeView, defaultLayouts } = useContext(DataViewsContext);
   const availableLayouts = Object.keys(defaultLayouts);
   if (availableLayouts.length <= 1) {
     return null;
   }
-  const activeView = VIEW_LAYOUTS.find(v => view.type === v.type);
-  return /*#__PURE__*/_jsxs(Menu, {
-    children: [/*#__PURE__*/_jsx(Menu.TriggerButton, {
-      render: /*#__PURE__*/_jsx(Button, {
-        size: "compact",
-        icon: activeView?.icon,
-        label: __('Layout')
-      })
-    }), /*#__PURE__*/_jsx(Menu.Popover, {
-      children: availableLayouts.map(layout => {
-        const config = VIEW_LAYOUTS.find(v => v.type === layout);
-        if (!config) {
-          return null;
-        }
-        return /*#__PURE__*/_jsx(Menu.RadioItem, {
+  const activeView = VIEW_LAYOUTS.find((v) => view.type === v.type);
+  return /* @__PURE__ */ jsxs(Menu, { children: [
+    /* @__PURE__ */ jsx(
+      Menu.TriggerButton,
+      {
+        render: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "compact",
+            icon: activeView?.icon,
+            label: __("Layout")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu.Popover, { children: availableLayouts.map((layout) => {
+      const config = VIEW_LAYOUTS.find(
+        (v) => v.type === layout
+      );
+      if (!config) {
+        return null;
+      }
+      return /* @__PURE__ */ 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({
@@ -78,129 +94,136 @@ export function ViewTypeMenu() {
                   ...defaultLayouts[e.target.value]
                 });
             }
-            globalThis.SCRIPT_DEBUG === true ? warning('Invalid dataview') : void 0;
+            warning("Invalid dataview");
           },
-          children: /*#__PURE__*/_jsx(Menu.ItemLabel, {
-            children: config.label
-          })
-        }, layout);
-      })
-    })]
-  });
+          children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: config.label })
+        },
+        layout
+      );
+    }) })
+  ] });
 }
 function SortFieldControl() {
-  const {
-    view,
-    fields,
-    onChangeView
-  } = useContext(DataViewsContext);
+  const { view, fields, onChangeView } = useContext(DataViewsContext);
   const orderOptions = useMemo(() => {
-    const sortableFields = fields.filter(field => field.enableSorting !== false);
-    return sortableFields.map(field => {
+    const sortableFields = fields.filter(
+      (field) => field.enableSorting !== false
+    );
+    return sortableFields.map((field) => {
       return {
         label: field.label,
         value: field.id
       };
     });
   }, [fields]);
-  return /*#__PURE__*/_jsx(SelectControl, {
-    __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
-    label: __('Sort by'),
-    value: view.sort?.field,
-    options: orderOptions,
-    onChange: value => {
-      onChangeView({
-        ...view,
-        sort: {
-          direction: view?.sort?.direction || 'desc',
-          field: value
-        },
-        showLevels: false
-      });
+  return /* @__PURE__ */ jsx(
+    SelectControl,
+    {
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: true,
+      label: __("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
-  } = useContext(DataViewsContext);
-  const sortableFields = fields.filter(field => field.enableSorting !== false);
+  const { view, fields, onChangeView } = useContext(DataViewsContext);
+  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__*/_jsx(ToggleGroupControl, {
-    className: "dataviews-view-config__sort-direction",
-    __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
-    isBlock: true,
-    label: __('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__ */ jsx(
+    ToggleGroupControl,
+    {
+      className: "dataviews-view-config__sort-direction",
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: true,
+      isBlock: true,
+      label: __("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;
+        }
+        warning("Invalid direction");
+      },
+      children: SORTING_DIRECTIONS.map((direction) => {
+        return /* @__PURE__ */ jsx(
+          ToggleGroupControlOptionIcon,
+          {
+            value: direction,
+            icon: sortIcons[direction],
+            label: sortLabels[direction]
           },
-          showLevels: false
-        });
-        return;
-      }
-      globalThis.SCRIPT_DEBUG === true ? warning('Invalid direction') : void 0;
-    },
-    children: SORTING_DIRECTIONS.map(direction => {
-      return /*#__PURE__*/_jsx(ToggleGroupControlOptionIcon, {
-        value: direction,
-        icon: sortIcons[direction],
-        label: sortLabels[direction]
-      }, direction);
-    })
-  });
+          direction
+        );
+      })
+    }
+  );
 }
 function ItemsPerPageControl() {
-  const {
-    view,
-    config,
-    onChangeView
-  } = useContext(DataViewsContext);
-  const {
-    infiniteScrollEnabled
-  } = view;
+  const { view, config, onChangeView } = useContext(DataViewsContext);
+  const { infiniteScrollEnabled } = view;
   if (!config || !config.perPageSizes || config.perPageSizes.length < 2 || config.perPageSizes.length > 6 || infiniteScrollEnabled) {
     return null;
   }
-  return /*#__PURE__*/_jsx(ToggleGroupControl, {
-    __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
-    isBlock: true,
-    label: __('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__*/_jsx(ToggleGroupControlOption, {
-        value: value,
-        label: value.toString()
-      }, value);
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    ToggleGroupControl,
+    {
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: true,
+      isBlock: true,
+      label: __("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__ */ jsx(
+          ToggleGroupControlOption,
+          {
+            value,
+            label: value.toString()
+          },
+          value
+        );
+      })
+    }
+  );
 }
 function PreviewOptions({
   previewOptions,
@@ -208,45 +231,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__*/_jsxs(Menu, {
-    onOpenChange: onMenuOpenChange,
-    children: [/*#__PURE__*/_jsx(Menu.TriggerButton, {
-      render: /*#__PURE__*/_jsx(Button, {
-        className: "dataviews-field-control__field-preview-options-button",
-        size: "compact",
-        icon: moreVertical,
-        label: __('Preview')
-      })
-    }), /*#__PURE__*/_jsx(Menu.Popover, {
-      children: previewOptions?.map(({
-        id,
-        label
-      }) => {
-        return /*#__PURE__*/_jsx(Menu.RadioItem, {
+  return /* @__PURE__ */ jsxs(Menu, { onOpenChange: onMenuOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      Menu.TriggerButton,
+      {
+        render: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "dataviews-field-control__field-preview-options-button",
+            size: "compact",
+            icon: moreVertical,
+            label: __("Preview")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu.Popover, { children: previewOptions?.map(({ id, label }) => {
+      return /* @__PURE__ */ jsx(
+        Menu.RadioItem,
+        {
           value: id,
           checked: id === activeOption,
           onChange: () => {
             onChangePreviewOption?.(id);
             focusPreviewOptionsField(id);
           },
-          children: /*#__PURE__*/_jsx(Menu.ItemLabel, {
-            children: label
-          })
-        }, id);
-      })
-    })]
-  });
+          children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: label })
+        },
+        id
+      );
+    }) })
+  ] });
 }
 function FieldItem({
   field,
@@ -264,88 +289,114 @@ function FieldItem({
 }) {
   const [isChangingPreviewOption, setIsChangingPreviewOption] = 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__*/_jsx(Item, {
-    children: /*#__PURE__*/_jsxs(HStack, {
+  return /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsxs(
+    HStack,
+    {
       expanded: true,
-      className: clsx('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: clsx(
+        "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__*/_jsx("span", {
-        className: "dataviews-field-control__icon",
-        children: !canMove && !field.enableHiding && /*#__PURE__*/_jsx(Icon, {
-          icon: lock
-        })
-      }), /*#__PURE__*/_jsxs("span", {
-        className: "dataviews-field-control__label-sub-label-container",
-        children: [/*#__PURE__*/_jsx("span", {
-          className: "dataviews-field-control__label",
-          children: label || field.label
-        }), description && /*#__PURE__*/_jsx("span", {
-          className: "dataviews-field-control__sub-label",
-          children: description
-        })]
-      }), /*#__PURE__*/_jsxs(HStack, {
-        justify: "flex-end",
-        expanded: false,
-        className: "dataviews-field-control__actions",
-        children: [isVisible && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Button, {
-            disabled: isFirst || !canMove,
-            accessibleWhenDisabled: true,
-            size: "compact",
-            onClick: onMoveUp,
-            icon: chevronUp,
-            label: isFirst || !canMove ? __("This field can't be moved up") : sprintf(/* translators: %s: field label */
-            __('Move %s up'), field.label)
-          }), /*#__PURE__*/_jsx(Button, {
-            disabled: isLast || !canMove,
-            accessibleWhenDisabled: true,
-            size: "compact",
-            onClick: onMoveDown,
-            icon: chevronDown,
-            label: isLast || !canMove ? __("This field can't be moved down") : sprintf(/* translators: %s: field label */
-            __('Move %s down'), field.label)
-          })]
-        }), onToggleVisibility && /*#__PURE__*/_jsx(Button, {
-          className: "dataviews-field-control__field-visibility-button",
-          disabled: !field.enableHiding,
-          accessibleWhenDisabled: true,
-          size: "compact",
-          onClick: () => {
-            onToggleVisibility();
-            focusVisibilityField();
-          },
-          icon: isVisible ? unseen : seen,
-          label: isVisible ? sprintf(/* translators: %s: field label */
-          _x('Hide %s', 'field'), field.label) : sprintf(/* translators: %s: field label */
-          _x('Show %s', 'field'), field.label)
-        }), previewOptions && /*#__PURE__*/_jsx(PreviewOptions, {
-          previewOptions: previewOptions,
-          onChangePreviewOption: onChangePreviewOption,
-          onMenuOpenChange: setIsChangingPreviewOption,
-          activeOption: field.id
-        })]
-      })]
-    })
-  });
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "dataviews-field-control__icon", children: !canMove && !field.enableHiding && /* @__PURE__ */ jsx(Icon, { icon: lock }) }),
+        /* @__PURE__ */ jsxs("span", { className: "dataviews-field-control__label-sub-label-container", children: [
+          /* @__PURE__ */ jsx("span", { className: "dataviews-field-control__label", children: label || field.label }),
+          description && /* @__PURE__ */ jsx("span", { className: "dataviews-field-control__sub-label", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            justify: "flex-end",
+            expanded: false,
+            className: "dataviews-field-control__actions",
+            children: [
+              isVisible && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    disabled: isFirst || !canMove,
+                    accessibleWhenDisabled: true,
+                    size: "compact",
+                    onClick: onMoveUp,
+                    icon: chevronUp,
+                    label: isFirst || !canMove ? __("This field can't be moved up") : sprintf(
+                      /* translators: %s: field label */
+                      __("Move %s up"),
+                      field.label
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    disabled: isLast || !canMove,
+                    accessibleWhenDisabled: true,
+                    size: "compact",
+                    onClick: onMoveDown,
+                    icon: chevronDown,
+                    label: isLast || !canMove ? __("This field can't be moved down") : sprintf(
+                      /* translators: %s: field label */
+                      __("Move %s down"),
+                      field.label
+                    )
+                  }
+                )
+              ] }),
+              onToggleVisibility && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: "dataviews-field-control__field-visibility-button",
+                  disabled: !field.enableHiding,
+                  accessibleWhenDisabled: true,
+                  size: "compact",
+                  onClick: () => {
+                    onToggleVisibility();
+                    focusVisibilityField();
+                  },
+                  icon: isVisible ? unseen : seen,
+                  label: isVisible ? sprintf(
+                    /* translators: %s: field label */
+                    _x("Hide %s", "field"),
+                    field.label
+                  ) : sprintf(
+                    /* translators: %s: field label */
+                    _x("Show %s", "field"),
+                    field.label
+                  )
+                }
+              ),
+              previewOptions && /* @__PURE__ */ jsx(
+                PreviewOptions,
+                {
+                  previewOptions,
+                  onChangePreviewOption,
+                  onMenuOpenChange: setIsChangingPreviewOption,
+                  activeOption: field.id
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 }
 function RegularFieldItem({
   index,
@@ -353,285 +404,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__*/_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__ */ 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
-  } = useContext(DataViewsContext);
-  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 } = useContext(DataViewsContext);
+  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__*/_jsx(FieldItem, {
-      field: previewField,
-      label: __('Preview'),
-      description: previewField.label,
-      isVisible: isPreviewFieldVisible,
-      onToggleVisibility: () => {
-        onChangeView({
-          ...view,
-          showMedia: !isPreviewFieldVisible
-        });
+    const isPreviewFieldVisible = isDefined(previewField) && (view.showMedia ?? true);
+    previewFieldUI = isDefined(previewField) && /* @__PURE__ */ jsx(
+      FieldItem,
+      {
+        field: previewField,
+        label: __("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__*/_jsxs(VStack, {
-    className: "dataviews-field-control",
-    spacing: 6,
-    children: [/*#__PURE__*/_jsx(VStack, {
-      className: "dataviews-view-config__properties",
-      spacing: 0,
-      children: (visibleLockedFields.length > 0 || !!visibleFields?.length) && /*#__PURE__*/_jsxs(ItemGroup, {
-        isBordered: true,
-        isSeparated: true,
-        children: [visibleLockedFields.map(({
-          field,
-          isVisibleFlag,
-          ui
-        }) => {
-          return ui !== null && ui !== void 0 ? ui : /*#__PURE__*/_jsx(FieldItem, {
-            field: field,
-            isVisible: true,
-            onToggleVisibility: () => {
-              onChangeView({
-                ...view,
-                [isVisibleFlag]: false
-              });
-            },
-            canMove: false
-          }, field.id);
-        }), visibleFields.map((field, index) => /*#__PURE__*/_jsx(RegularFieldItem, {
-          field: field,
-          view: view,
-          onChangeView: onChangeView,
-          index: index
-        }, field.id))]
-      })
-    }), (!!hiddenFields?.length || !!hiddenLockedFields.length) && /*#__PURE__*/_jsxs(VStack, {
-      spacing: 4,
-      children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {
-        style: {
-          margin: 0
-        },
-        children: __('Hidden')
-      }), /*#__PURE__*/_jsx(VStack, {
-        className: "dataviews-view-config__properties",
-        spacing: 0,
-        children: /*#__PURE__*/_jsxs(ItemGroup, {
-          isBordered: true,
-          isSeparated: true,
-          children: [hiddenLockedFields.length > 0 && hiddenLockedFields.map(({
-            field,
-            isVisibleFlag,
-            ui
-          }) => {
-            return ui !== null && ui !== void 0 ? ui : /*#__PURE__*/_jsx(FieldItem, {
-              field: field,
-              isVisible: false,
+      isDefined(field) && !(view[isVisibleFlag] ?? true)
+    )
+  );
+  return /* @__PURE__ */ jsxs(VStack, { className: "dataviews-field-control", spacing: 6, children: [
+    /* @__PURE__ */ jsx(VStack, { className: "dataviews-view-config__properties", spacing: 0, children: (visibleLockedFields.length > 0 || !!visibleFields?.length) && /* @__PURE__ */ jsxs(ItemGroup, { isBordered: true, isSeparated: true, children: [
+      visibleLockedFields.map(
+        ({ field, isVisibleFlag, ui }) => {
+          return ui ?? /* @__PURE__ */ jsx(
+            FieldItem,
+            {
+              field,
+              isVisible: true,
               onToggleVisibility: () => {
                 onChangeView({
                   ...view,
-                  [isVisibleFlag]: true
+                  [isVisibleFlag]: false
                 });
               },
               canMove: false
-            }, field.id);
-          }), hiddenFields.map(field => /*#__PURE__*/_jsx(RegularFieldItem, {
-            field: field,
-            view: view,
-            onChangeView: onChangeView
-          }, field.id))]
-        })
-      })]
-    })]
-  });
+            },
+            field.id
+          );
+        }
+      ),
+      visibleFields.map((field, index) => /* @__PURE__ */ jsx(
+        RegularFieldItem,
+        {
+          field,
+          view,
+          onChangeView,
+          index
+        },
+        field.id
+      ))
+    ] }) }),
+    (!!hiddenFields?.length || !!hiddenLockedFields.length) && /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+      /* @__PURE__ */ jsx(BaseControl.VisualLabel, { style: { margin: 0 }, children: __("Hidden") }),
+      /* @__PURE__ */ jsx(
+        VStack,
+        {
+          className: "dataviews-view-config__properties",
+          spacing: 0,
+          children: /* @__PURE__ */ jsxs(ItemGroup, { isBordered: true, isSeparated: true, children: [
+            hiddenLockedFields.length > 0 && hiddenLockedFields.map(
+              ({ field, isVisibleFlag, ui }) => {
+                return ui ?? /* @__PURE__ */ jsx(
+                  FieldItem,
+                  {
+                    field,
+                    isVisible: false,
+                    onToggleVisibility: () => {
+                      onChangeView({
+                        ...view,
+                        [isVisibleFlag]: true
+                      });
+                    },
+                    canMove: false
+                  },
+                  field.id
+                );
+              }
+            ),
+            hiddenFields.map((field) => /* @__PURE__ */ jsx(
+              RegularFieldItem,
+              {
+                field,
+                view,
+                onChangeView
+              },
+              field.id
+            ))
+          ] })
+        }
+      )
+    ] })
+  ] });
 }
 function SettingsSection({
   title,
   description,
   children
 }) {
-  return /*#__PURE__*/_jsxs(Grid, {
-    columns: 12,
-    className: "dataviews-settings-section",
-    gap: 4,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: "dataviews-settings-section__sidebar",
-      children: [/*#__PURE__*/_jsx(Heading, {
-        level: 2,
-        className: "dataviews-settings-section__title",
-        children: title
-      }), description && /*#__PURE__*/_jsx(Text, {
-        variant: "muted",
-        className: "dataviews-settings-section__description",
-        children: description
-      })]
-    }), /*#__PURE__*/_jsx(Grid, {
-      columns: 8,
-      gap: 4,
-      className: "dataviews-settings-section__content",
-      children: children
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Grid, { columns: 12, className: "dataviews-settings-section", gap: 4, children: [
+    /* @__PURE__ */ jsxs("div", { className: "dataviews-settings-section__sidebar", children: [
+      /* @__PURE__ */ jsx(
+        Heading,
+        {
+          level: 2,
+          className: "dataviews-settings-section__title",
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        Text,
+        {
+          variant: "muted",
+          className: "dataviews-settings-section__description",
+          children: description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Grid,
+      {
+        columns: 8,
+        gap: 4,
+        className: "dataviews-settings-section__content",
+        children
+      }
+    )
+  ] });
 }
-export function DataviewsViewConfigDropdown() {
-  const {
-    view
-  } = useContext(DataViewsContext);
-  const popoverId = useInstanceId(_DataViewsViewConfig, 'dataviews-view-config-dropdown');
-  const activeLayout = VIEW_LAYOUTS.find(layout => layout.type === view.type);
-  return /*#__PURE__*/_jsx(Dropdown, {
-    expandOnMobile: true,
-    popoverProps: {
-      ...DATAVIEWS_CONFIG_POPOVER_PROPS,
-      id: popoverId
-    },
-    renderToggle: ({
-      onToggle,
-      isOpen
-    }) => {
-      return /*#__PURE__*/_jsx(Button, {
-        size: "compact",
-        icon: cog,
-        label: _x('View options', 'View is used as a noun'),
-        onClick: onToggle,
-        "aria-expanded": isOpen ? 'true' : 'false',
-        "aria-controls": popoverId
-      });
-    },
-    renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {
-      paddingSize: "medium",
-      className: "dataviews-config__popover-content-wrapper",
-      children: /*#__PURE__*/_jsxs(VStack, {
-        className: "dataviews-view-config",
-        spacing: 6,
-        children: [/*#__PURE__*/_jsxs(SettingsSection, {
-          title: __('Appearance'),
-          children: [/*#__PURE__*/_jsxs(HStack, {
-            expanded: true,
-            className: "is-divided-in-two",
-            children: [/*#__PURE__*/_jsx(SortFieldControl, {}), /*#__PURE__*/_jsx(SortDirectionControl, {})]
-          }), !!activeLayout?.viewConfigOptions && /*#__PURE__*/_jsx(activeLayout.viewConfigOptions, {}), /*#__PURE__*/_jsx(InfiniteScrollToggle, {}), /*#__PURE__*/_jsx(ItemsPerPageControl, {})]
-        }), /*#__PURE__*/_jsx(SettingsSection, {
-          title: __('Properties'),
-          children: /*#__PURE__*/_jsx(FieldControl, {})
-        })]
-      })
-    })
-  });
+function DataviewsViewConfigDropdown() {
+  const { view } = useContext(DataViewsContext);
+  const popoverId = useInstanceId(
+    _DataViewsViewConfig,
+    "dataviews-view-config-dropdown"
+  );
+  const activeLayout = VIEW_LAYOUTS.find(
+    (layout) => layout.type === view.type
+  );
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      expandOnMobile: true,
+      popoverProps: {
+        ...DATAVIEWS_CONFIG_POPOVER_PROPS,
+        id: popoverId
+      },
+      renderToggle: ({ onToggle, isOpen }) => {
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "compact",
+            icon: cog,
+            label: _x("View options", "View is used as a noun"),
+            onClick: onToggle,
+            "aria-expanded": isOpen ? "true" : "false",
+            "aria-controls": popoverId
+          }
+        );
+      },
+      renderContent: () => /* @__PURE__ */ jsx(
+        DropdownContentWrapper,
+        {
+          paddingSize: "medium",
+          className: "dataviews-config__popover-content-wrapper",
+          children: /* @__PURE__ */ jsxs(VStack, { className: "dataviews-view-config", spacing: 6, children: [
+            /* @__PURE__ */ jsxs(SettingsSection, { title: __("Appearance"), children: [
+              /* @__PURE__ */ jsxs(HStack, { expanded: true, className: "is-divided-in-two", children: [
+                /* @__PURE__ */ jsx(SortFieldControl, {}),
+                /* @__PURE__ */ jsx(SortDirectionControl, {})
+              ] }),
+              !!activeLayout?.viewConfigOptions && /* @__PURE__ */ jsx(activeLayout.viewConfigOptions, {}),
+              /* @__PURE__ */ jsx(InfiniteScrollToggle, {}),
+              /* @__PURE__ */ jsx(ItemsPerPageControl, {})
+            ] }),
+            /* @__PURE__ */ jsx(SettingsSection, { title: __("Properties"), children: /* @__PURE__ */ jsx(FieldControl, {}) })
+          ] })
+        }
+      )
+    }
+  );
 }
 function _DataViewsViewConfig() {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ViewTypeMenu, {}), /*#__PURE__*/_jsx(DataviewsViewConfigDropdown, {})]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ViewTypeMenu, {}),
+    /* @__PURE__ */ jsx(DataviewsViewConfigDropdown, {})
+  ] });
 }
 const DataViewsViewConfig = memo(_DataViewsViewConfig);
-export default DataViewsViewConfig;
-//# sourceMappingURL=index.js.map
+var dataviews_view_config_default = DataViewsViewConfig;
+export {
+  DataviewsViewConfigDropdown,
+  ViewTypeMenu,
+  dataviews_view_config_default as default
+};
+//# sourceMappingURL=index.js.map