@wordpress/dataviews 10.2.0 → 10.3.0

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

@@ -1,5 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+// packages/dataviews/src/components/dataviews-view-config/index.tsx
 import {
   Button,
   __experimentalDropdownContentWrapper as DropdownContentWrapper,
@@ -8,37 +7,27 @@ import {
   __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
+  privateApis as componentsPrivateApis
 } 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 { __, _x } from "@wordpress/i18n";
+import { memo, useContext, useMemo } from "@wordpress/element";
+import { cog } 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 { PropertiesSection } from "./properties-section";
 import { unlock } from "../../lock-unlock";
-const { Menu } = unlock(componentsPrivateApis);
-const DATAVIEWS_CONFIG_POPOVER_PROPS = {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var { Menu } = unlock(componentsPrivateApis);
+var DATAVIEWS_CONFIG_POPOVER_PROPS = {
   className: "dataviews-config__popover",
   placement: "bottom-end",
   offset: 9
@@ -84,6 +73,7 @@ function ViewTypeMenu() {
               case "grid":
               case "table":
               case "pickerGrid":
+              case "pickerTable":
                 const viewWithoutLayout = { ...view };
                 if ("layout" in viewWithoutLayout) {
                   delete viewWithoutLayout.layout;
@@ -225,390 +215,6 @@ function ItemsPerPageControl() {
     }
   );
 }
-function PreviewOptions({
-  previewOptions,
-  onChangePreviewOption,
-  onMenuOpenChange,
-  activeOption
-}) {
-  const focusPreviewOptionsField = (id) => {
-    setTimeout(() => {
-      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,
-        {
-          value: id,
-          checked: id === activeOption,
-          onChange: () => {
-            onChangePreviewOption?.(id);
-            focusPreviewOptionsField(id);
-          },
-          children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: label })
-        },
-        id
-      );
-    }) })
-  ] });
-}
-function FieldItem({
-  field,
-  label,
-  description,
-  isVisible,
-  isFirst,
-  isLast,
-  canMove = true,
-  onToggleVisibility,
-  onMoveUp,
-  onMoveDown,
-  previewOptions,
-  onChangePreviewOption
-}) {
-  const [isChangingPreviewOption, setIsChangingPreviewOption] = useState(false);
-  const focusVisibilityField = () => {
-    setTimeout(() => {
-      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,
-    {
-      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 }
-      ),
-      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,
-                  onChangePreviewOption,
-                  onMenuOpenChange: setIsChangingPreviewOption,
-                  activeOption: field.id
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  ) });
-}
-function RegularFieldItem({
-  index,
-  field,
-  view,
-  onChangeView
-}) {
-  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() {
-  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");
-  let previewFieldUI;
-  if (previewFields.length > 1) {
-    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 })
-      },
-      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 }) => (
-      // @ts-expect-error
-      isDefined(field) && (view[isVisibleFlag] ?? true)
-    )
-  );
-  if (visibleLockedFields.length === 1) {
-    visibleLockedFields = visibleLockedFields.map((locked) => ({
-      ...locked,
-      field: { ...locked.field, enableHiding: false }
-    }));
-  }
-  if (visibleLockedFields.length === 0 && visibleFields.length === 1) {
-    visibleFields = [{ ...visibleFields[0], enableHiding: false }];
-  }
-  const hiddenLockedFields = lockedFields.filter(
-    ({ field, isVisibleFlag }) => (
-      // @ts-expect-error
-      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]: false
-                });
-              },
-              canMove: false
-            },
-            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,
@@ -679,18 +285,16 @@ function DataviewsViewConfigDropdown() {
         {
           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, {})
+          children: /* @__PURE__ */ jsx(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, {})
             ] }),
-            /* @__PURE__ */ jsx(SettingsSection, { title: __("Properties"), children: /* @__PURE__ */ jsx(FieldControl, {}) })
-          ] })
+            !!activeLayout?.viewConfigOptions && /* @__PURE__ */ jsx(activeLayout.viewConfigOptions, {}),
+            /* @__PURE__ */ jsx(InfiniteScrollToggle, {}),
+            /* @__PURE__ */ jsx(ItemsPerPageControl, {}),
+            /* @__PURE__ */ jsx(PropertiesSection, {})
+          ] }) })
         }
       )
     }
@@ -702,7 +306,7 @@ function _DataViewsViewConfig() {
     /* @__PURE__ */ jsx(DataviewsViewConfigDropdown, {})
   ] });
 }
-const DataViewsViewConfig = memo(_DataViewsViewConfig);
+var DataViewsViewConfig = memo(_DataViewsViewConfig);
 var dataviews_view_config_default = DataViewsViewConfig;
 export {
   DataviewsViewConfigDropdown,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-view-config/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ChangeEvent, ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tDropdown,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tSelectControl,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\tprivateApis as componentsPrivateApis,\n\tBaseControl,\n\tIcon,\n} from '@wordpress/components';\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { memo, useContext, useMemo, useState } from '@wordpress/element';\nimport {\n\tchevronDown,\n\tchevronUp,\n\tcog,\n\tseen,\n\tunseen,\n\tlock,\n\tmoreVertical,\n} from '@wordpress/icons';\nimport warning from '@wordpress/warning';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';\nimport { VIEW_LAYOUTS } from '../../dataviews-layouts';\nimport type { NormalizedField, View } from '../../types';\nimport DataViewsContext from '../dataviews-context';\nimport InfiniteScrollToggle from './infinite-scroll-toggle';\nimport { unlock } from '../../lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst DATAVIEWS_CONFIG_POPOVER_PROPS = {\n\tclassName: 'dataviews-config__popover',\n\tplacement: 'bottom-end',\n\toffset: 9,\n};\n\nexport function ViewTypeMenu() {\n\tconst { view, onChangeView, defaultLayouts } =\n\t\tuseContext( DataViewsContext );\n\tconst availableLayouts = Object.keys( defaultLayouts );\n\tif ( availableLayouts.length <= 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<Menu>\n\t\t\t<Menu.TriggerButton\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ticon={ activeView?.icon }\n\t\t\t\t\t\tlabel={ __( 'Layout' ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Menu.Popover>\n\t\t\t\t{ availableLayouts.map( ( layout ) => {\n\t\t\t\t\tconst config = VIEW_LAYOUTS.find(\n\t\t\t\t\t\t( v ) => v.type === layout\n\t\t\t\t\t);\n\t\t\t\t\tif ( ! config ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Menu.RadioItem\n\t\t\t\t\t\t\tkey={ layout }\n\t\t\t\t\t\t\tvalue={ layout }\n\t\t\t\t\t\t\tname=\"view-actions-available-view\"\n\t\t\t\t\t\t\tchecked={ layout === view.type }\n\t\t\t\t\t\t\thideOnClick\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\te: ChangeEvent< HTMLInputElement >\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tswitch ( e.target.value ) {\n\t\t\t\t\t\t\t\t\tcase 'list':\n\t\t\t\t\t\t\t\t\tcase 'grid':\n\t\t\t\t\t\t\t\t\tcase 'table':\n\t\t\t\t\t\t\t\t\tcase 'pickerGrid':\n\t\t\t\t\t\t\t\t\t\tconst viewWithoutLayout = { ...view };\n\t\t\t\t\t\t\t\t\t\tif ( 'layout' in viewWithoutLayout ) {\n\t\t\t\t\t\t\t\t\t\t\tdelete viewWithoutLayout.layout;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn onChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...viewWithoutLayout,\n\t\t\t\t\t\t\t\t\t\t\ttype: e.target.value,\n\t\t\t\t\t\t\t\t\t\t\t...defaultLayouts[ e.target.value ],\n\t\t\t\t\t\t\t\t\t\t} as View );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\twarning( 'Invalid dataview' );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ config.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.RadioItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Menu.Popover>\n\t\t</Menu>\n\t);\n}\n\nfunction SortFieldControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\tconst orderOptions = useMemo( () => {\n\t\tconst sortableFields = fields.filter(\n\t\t\t( field ) => field.enableSorting !== false\n\t\t);\n\t\treturn sortableFields.map( ( field ) => {\n\t\t\treturn {\n\t\t\t\tlabel: field.label,\n\t\t\t\tvalue: field.id,\n\t\t\t};\n\t\t} );\n\t}, [ fields ] );\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Sort by' ) }\n\t\t\tvalue={ view.sort?.field }\n\t\t\toptions={ orderOptions }\n\t\t\tonChange={ ( value: string ) => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tsort: {\n\t\t\t\t\t\tdirection: view?.sort?.direction || 'desc',\n\t\t\t\t\t\tfield: value,\n\t\t\t\t\t},\n\t\t\t\t\tshowLevels: false,\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction SortDirectionControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( sortableFields.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tlet value = view.sort?.direction;\n\tif ( ! value && view.sort?.field ) {\n\t\tvalue = 'desc';\n\t}\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tclassName=\"dataviews-view-config__sort-direction\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Order' ) }\n\t\t\tvalue={ value }\n\t\t\tonChange={ ( newDirection ) => {\n\t\t\t\tif ( newDirection === 'asc' || newDirection === 'desc' ) {\n\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t...view,\n\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\tdirection: newDirection,\n\t\t\t\t\t\t\tfield:\n\t\t\t\t\t\t\t\tview.sort?.field ||\n\t\t\t\t\t\t\t\t// If there is no field assigned as the sorting field assign the first sortable field.\n\t\t\t\t\t\t\t\tfields.find(\n\t\t\t\t\t\t\t\t\t( field ) => field.enableSorting !== false\n\t\t\t\t\t\t\t\t)?.id ||\n\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tshowLevels: false,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\twarning( 'Invalid direction' );\n\t\t\t} }\n\t\t>\n\t\t\t{ SORTING_DIRECTIONS.map( ( direction ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\tvalue={ direction }\n\t\t\t\t\t\ticon={ sortIcons[ direction ] }\n\t\t\t\t\t\tlabel={ sortLabels[ direction ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction ItemsPerPageControl() {\n\tconst { view, config, onChangeView } = useContext( DataViewsContext );\n\tconst { infiniteScrollEnabled } = view;\n\tif (\n\t\t! config ||\n\t\t! config.perPageSizes ||\n\t\tconfig.perPageSizes.length < 2 ||\n\t\tconfig.perPageSizes.length > 6 ||\n\t\tinfiniteScrollEnabled\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Items per page' ) }\n\t\t\tvalue={ view.perPage || 10 }\n\t\t\tdisabled={ ! view?.sort?.field }\n\t\t\tonChange={ ( newItemsPerPage ) => {\n\t\t\t\tconst newItemsPerPageNumber =\n\t\t\t\t\ttypeof newItemsPerPage === 'number' ||\n\t\t\t\t\tnewItemsPerPage === undefined\n\t\t\t\t\t\t? newItemsPerPage\n\t\t\t\t\t\t: parseInt( newItemsPerPage, 10 );\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tperPage: newItemsPerPageNumber,\n\t\t\t\t\tpage: 1,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ config.perPageSizes.map( ( value ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tlabel={ value.toString() }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction PreviewOptions( {\n\tpreviewOptions,\n\tonChangePreviewOption,\n\tonMenuOpenChange,\n\tactiveOption,\n}: {\n\tpreviewOptions?: Array< { label: string; id: string } >;\n\tonChangePreviewOption?: ( newPreviewOption: string ) => void;\n\tonMenuOpenChange: ( isOpen: boolean ) => void;\n\tactiveOption?: string;\n} ) {\n\tconst focusPreviewOptionsField = ( id: string ) => {\n\t\t// Focus the visibility button to avoid focus loss.\n\t\t// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.\n\t\t// eslint-disable-next-line @wordpress/react-no-unsafe-timeout\n\t\tsetTimeout( () => {\n\t\t\tconst element = document.querySelector(\n\t\t\t\t`.dataviews-field-control__field-${ id } .dataviews-field-control__field-preview-options-button`\n\t\t\t);\n\t\t\tif ( element instanceof HTMLElement ) {\n\t\t\t\telement.focus();\n\t\t\t}\n\t\t}, 50 );\n\t};\n\treturn (\n\t\t<Menu onOpenChange={ onMenuOpenChange }>\n\t\t\t<Menu.TriggerButton\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"dataviews-field-control__field-preview-options-button\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\tlabel={ __( 'Preview' ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Menu.Popover>\n\t\t\t\t{ previewOptions?.map( ( { id, label } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Menu.RadioItem\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\tvalue={ id }\n\t\t\t\t\t\t\tchecked={ id === activeOption }\n\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\tonChangePreviewOption?.( id );\n\t\t\t\t\t\t\t\tfocusPreviewOptionsField( id );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.RadioItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Menu.Popover>\n\t\t</Menu>\n\t);\n}\nfunction FieldItem( {\n\tfield,\n\tlabel,\n\tdescription,\n\tisVisible,\n\tisFirst,\n\tisLast,\n\tcanMove = true,\n\tonToggleVisibility,\n\tonMoveUp,\n\tonMoveDown,\n\tpreviewOptions,\n\tonChangePreviewOption,\n}: {\n\tfield: NormalizedField< any >;\n\tlabel?: string;\n\tdescription?: string;\n\tisVisible: boolean;\n\tisFirst?: boolean;\n\tisLast?: boolean;\n\tcanMove?: boolean;\n\tonToggleVisibility?: () => void;\n\tonMoveUp?: () => void;\n\tonMoveDown?: () => void;\n\tpreviewOptions?: Array< { label: string; id: string } >;\n\tonChangePreviewOption?: ( newPreviewOption: string ) => void;\n} ) {\n\tconst [ isChangingPreviewOption, setIsChangingPreviewOption ] =\n\t\tuseState< boolean >( false );\n\n\tconst focusVisibilityField = () => {\n\t\t// Focus the visibility button to avoid focus loss.\n\t\t// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.\n\t\t// eslint-disable-next-line @wordpress/react-no-unsafe-timeout\n\t\tsetTimeout( () => {\n\t\t\tconst element = document.querySelector(\n\t\t\t\t`.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button`\n\t\t\t);\n\t\t\tif ( element instanceof HTMLElement ) {\n\t\t\t\telement.focus();\n\t\t\t}\n\t\t}, 50 );\n\t};\n\n\treturn (\n\t\t<Item>\n\t\t\t<HStack\n\t\t\t\texpanded\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'dataviews-field-control__field',\n\t\t\t\t\t`dataviews-field-control__field-${ field.id }`,\n\t\t\t\t\t// The actions are hidden when the mouse is not hovering the item, or focus\n\t\t\t\t\t// is outside the item.\n\t\t\t\t\t// For actions that require a popover, a menu etc, that would mean that when the interactive element\n\t\t\t\t\t// opens and the focus goes there the actions would be hidden.\n\t\t\t\t\t// To avoid that we add a class to the item, that makes sure actions are visible while there is some\n\t\t\t\t\t// interaction with the item.\n\t\t\t\t\t{ 'is-interacting': isChangingPreviewOption }\n\t\t\t\t) }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t>\n\t\t\t\t<span className=\"dataviews-field-control__icon\">\n\t\t\t\t\t{ ! canMove && ! field.enableHiding && (\n\t\t\t\t\t\t<Icon icon={ lock } />\n\t\t\t\t\t) }\n\t\t\t\t</span>\n\t\t\t\t<span className=\"dataviews-field-control__label-sub-label-container\">\n\t\t\t\t\t<span className=\"dataviews-field-control__label\">\n\t\t\t\t\t\t{ label || field.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ description && (\n\t\t\t\t\t\t<span className=\"dataviews-field-control__sub-label\">\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</span>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\texpanded={ false }\n\t\t\t\t\tclassName=\"dataviews-field-control__actions\"\n\t\t\t\t>\n\t\t\t\t\t{ isVisible && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdisabled={ isFirst || ! canMove }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\tonClick={ onMoveUp }\n\t\t\t\t\t\t\t\ticon={ chevronUp }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisFirst || ! canMove\n\t\t\t\t\t\t\t\t\t\t? __( \"This field can't be moved up\" )\n\t\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: field label */\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Move %s up' ),\n\t\t\t\t\t\t\t\t\t\t\t\tfield.label\n\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdisabled={ isLast || ! canMove }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\tonClick={ onMoveDown }\n\t\t\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisLast || ! canMove\n\t\t\t\t\t\t\t\t\t\t? __( \"This field can't be moved down\" )\n\t\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: field label */\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Move %s down' ),\n\t\t\t\t\t\t\t\t\t\t\t\tfield.label\n\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ onToggleVisibility && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-field-control__field-visibility-button\"\n\t\t\t\t\t\t\tdisabled={ ! field.enableHiding }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonToggleVisibility();\n\t\t\t\t\t\t\t\tfocusVisibilityField();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\ticon={ isVisible ? unseen : seen }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisVisible\n\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: field label */\n\t\t\t\t\t\t\t\t\t\t\t_x( 'Hide %s', 'field' ),\n\t\t\t\t\t\t\t\t\t\t\tfield.label\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: field label */\n\t\t\t\t\t\t\t\t\t\t\t_x( 'Show %s', 'field' ),\n\t\t\t\t\t\t\t\t\t\t\tfield.label\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ previewOptions && (\n\t\t\t\t\t\t<PreviewOptions\n\t\t\t\t\t\t\tpreviewOptions={ previewOptions }\n\t\t\t\t\t\t\tonChangePreviewOption={ onChangePreviewOption }\n\t\t\t\t\t\t\tonMenuOpenChange={ setIsChangingPreviewOption }\n\t\t\t\t\t\t\tactiveOption={ field.id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t</Item>\n\t);\n}\n\nfunction RegularFieldItem( {\n\tindex,\n\tfield,\n\tview,\n\tonChangeView,\n}: {\n\tindex?: number;\n\tfield: NormalizedField< any >;\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n} ) {\n\tconst visibleFieldIds = view.fields ?? [];\n\tconst isVisible =\n\t\tindex !== undefined && visibleFieldIds.includes( field.id );\n\n\treturn (\n\t\t<FieldItem\n\t\t\tfield={ field }\n\t\t\tisVisible={ isVisible }\n\t\t\tisFirst={ index !== undefined && index < 1 }\n\t\t\tisLast={\n\t\t\t\tindex !== undefined && index === visibleFieldIds.length - 1\n\t\t\t}\n\t\t\tonToggleVisibility={ () => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tfields: isVisible\n\t\t\t\t\t\t? visibleFieldIds.filter(\n\t\t\t\t\t\t\t\t( fieldId ) => fieldId !== field.id\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: [ ...visibleFieldIds, field.id ],\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tonMoveUp={\n\t\t\t\tindex !== undefined\n\t\t\t\t\t? () => {\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tfields: [\n\t\t\t\t\t\t\t\t\t...( visibleFieldIds.slice(\n\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\tindex - 1\n\t\t\t\t\t\t\t\t\t) ?? [] ),\n\t\t\t\t\t\t\t\t\tfield.id,\n\t\t\t\t\t\t\t\t\tvisibleFieldIds[ index - 1 ],\n\t\t\t\t\t\t\t\t\t...visibleFieldIds.slice( index + 1 ),\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonMoveDown={\n\t\t\t\tindex !== undefined\n\t\t\t\t\t? () => {\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tfields: [\n\t\t\t\t\t\t\t\t\t...( visibleFieldIds.slice( 0, index ) ??\n\t\t\t\t\t\t\t\t\t\t[] ),\n\t\t\t\t\t\t\t\t\tvisibleFieldIds[ index + 1 ],\n\t\t\t\t\t\t\t\t\tfield.id,\n\t\t\t\t\t\t\t\t\t...visibleFieldIds.slice( index + 2 ),\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction isDefined< T >( item: T | undefined ): item is T {\n\treturn !! item;\n}\n\nfunction FieldControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\n\tconst togglableFields = [\n\t\tview?.titleField,\n\t\tview?.mediaField,\n\t\tview?.descriptionField,\n\t].filter( Boolean );\n\tconst visibleFieldIds = view.fields ?? [];\n\tconst hiddenFields = fields.filter(\n\t\t( f ) =>\n\t\t\t! visibleFieldIds.includes( f.id ) &&\n\t\t\t! togglableFields.includes( f.id ) &&\n\t\t\tf.type !== 'media' &&\n\t\t\tf.enableHiding !== false\n\t);\n\tlet visibleFields = visibleFieldIds\n\t\t.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )\n\t\t.filter( isDefined );\n\n\tif ( ! visibleFields?.length && ! hiddenFields?.length ) {\n\t\treturn null;\n\t}\n\tconst titleField = fields.find( ( f ) => f.id === view.titleField );\n\tconst previewField = fields.find( ( f ) => f.id === view.mediaField );\n\tconst descriptionField = fields.find(\n\t\t( f ) => f.id === view.descriptionField\n\t);\n\n\tconst previewFields = fields.filter( ( f ) => f.type === 'media' );\n\n\tlet previewFieldUI;\n\tif ( previewFields.length > 1 ) {\n\t\tconst isPreviewFieldVisible =\n\t\t\tisDefined( previewField ) && ( view.showMedia ?? true );\n\t\tpreviewFieldUI = isDefined( previewField ) && (\n\t\t\t<FieldItem\n\t\t\t\tkey={ previewField.id }\n\t\t\t\tfield={ previewField }\n\t\t\t\tlabel={ __( 'Preview' ) }\n\t\t\t\tdescription={ previewField.label }\n\t\t\t\tisVisible={ isPreviewFieldVisible }\n\t\t\t\tonToggleVisibility={ () => {\n\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t...view,\n\t\t\t\t\t\tshowMedia: ! isPreviewFieldVisible,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tcanMove={ false }\n\t\t\t\tpreviewOptions={ previewFields.map( ( field ) => ( {\n\t\t\t\t\tlabel: field.label,\n\t\t\t\t\tid: field.id,\n\t\t\t\t} ) ) }\n\t\t\t\tonChangePreviewOption={ ( newPreviewId ) =>\n\t\t\t\t\tonChangeView( { ...view, mediaField: newPreviewId } )\n\t\t\t\t}\n\t\t\t/>\n\t\t);\n\t}\n\tconst lockedFields = [\n\t\t{\n\t\t\tfield: titleField,\n\t\t\tisVisibleFlag: 'showTitle',\n\t\t},\n\t\t{\n\t\t\tfield: previewField,\n\t\t\tisVisibleFlag: 'showMedia',\n\t\t\tui: previewFieldUI,\n\t\t},\n\t\t{\n\t\t\tfield: descriptionField,\n\t\t\tisVisibleFlag: 'showDescription',\n\t\t},\n\t].filter( ( { field } ) => isDefined( field ) );\n\tlet visibleLockedFields = lockedFields.filter(\n\t\t( { field, isVisibleFlag } ) =>\n\t\t\t// @ts-expect-error\n\t\t\tisDefined( field ) && ( view[ isVisibleFlag ] ?? true )\n\t) as Array< {\n\t\tfield: NormalizedField< any >;\n\t\tisVisibleFlag: string;\n\t\tui?: ReactNode;\n\t} >;\n\n\t// If only one locked field is visible, prevent it from being hidden.\n\tif ( visibleLockedFields.length === 1 ) {\n\t\tvisibleLockedFields = visibleLockedFields.map( ( locked ) => ( {\n\t\t\t...locked,\n\t\t\tfield: { ...locked.field, enableHiding: false },\n\t\t} ) );\n\t}\n\n\t// If no locked fields are visible but there are visibleFields, lock the last visible field.\n\tif ( visibleLockedFields.length === 0 && visibleFields.length === 1 ) {\n\t\tvisibleFields = [ { ...visibleFields[ 0 ], enableHiding: false } ];\n\t}\n\n\tconst hiddenLockedFields = lockedFields.filter(\n\t\t( { field, isVisibleFlag } ) =>\n\t\t\t// @ts-expect-error\n\t\t\tisDefined( field ) && ! ( view[ isVisibleFlag ] ?? true )\n\t) as Array< {\n\t\tfield: NormalizedField< any >;\n\t\tisVisibleFlag: string;\n\t\tui?: ReactNode;\n\t} >;\n\n\treturn (\n\t\t<VStack className=\"dataviews-field-control\" spacing={ 6 }>\n\t\t\t<VStack className=\"dataviews-view-config__properties\" spacing={ 0 }>\n\t\t\t\t{ ( visibleLockedFields.length > 0 ||\n\t\t\t\t\t!! visibleFields?.length ) && (\n\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t{ visibleLockedFields.map(\n\t\t\t\t\t\t\t( { field, isVisibleFlag, ui } ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\tui ?? (\n\t\t\t\t\t\t\t\t\t\t<FieldItem\n\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\tisVisible\n\t\t\t\t\t\t\t\t\t\t\tonToggleVisibility={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\t[ isVisibleFlag ]: false,\n\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tcanMove={ false }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t{ visibleFields.map( ( field, index ) => (\n\t\t\t\t\t\t\t<RegularFieldItem\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t\tindex={ index }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ItemGroup>\n\t\t\t\t) }\n\t\t\t</VStack>\n\n\t\t\t{ ( !! hiddenFields?.length || !! hiddenLockedFields.length ) && (\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<BaseControl.VisualLabel style={ { margin: 0 } }>\n\t\t\t\t\t\t{ __( 'Hidden' ) }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-config__properties\"\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t{ hiddenLockedFields.length > 0 &&\n\t\t\t\t\t\t\t\thiddenLockedFields.map(\n\t\t\t\t\t\t\t\t\t( { field, isVisibleFlag, ui } ) => {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\tui ?? (\n\t\t\t\t\t\t\t\t\t\t\t\t<FieldItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t\t\tisVisible={ false }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonToggleVisibility={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ isVisibleFlag ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttrue,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tcanMove={ false }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ hiddenFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t<RegularFieldItem\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nfunction SettingsSection( {\n\ttitle,\n\tdescription,\n\tchildren,\n}: {\n\ttitle: string;\n\tdescription?: string;\n\tchildren: React.ReactNode;\n} ) {\n\treturn (\n\t\t<Grid columns={ 12 } className=\"dataviews-settings-section\" gap={ 4 }>\n\t\t\t<div className=\"dataviews-settings-section__sidebar\">\n\t\t\t\t<Heading\n\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\tclassName=\"dataviews-settings-section__title\"\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t\t{ description && (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tvariant=\"muted\"\n\t\t\t\t\t\tclassName=\"dataviews-settings-section__description\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 8 }\n\t\t\t\tgap={ 4 }\n\t\t\t\tclassName=\"dataviews-settings-section__content\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Grid>\n\t\t</Grid>\n\t);\n}\n\nexport function DataviewsViewConfigDropdown() {\n\tconst { view } = useContext( DataViewsContext );\n\tconst popoverId = useInstanceId(\n\t\t_DataViewsViewConfig,\n\t\t'dataviews-view-config-dropdown'\n\t);\n\tconst activeLayout = VIEW_LAYOUTS.find(\n\t\t( layout ) => layout.type === view.type\n\t);\n\treturn (\n\t\t<Dropdown\n\t\t\texpandOnMobile\n\t\t\tpopoverProps={ {\n\t\t\t\t...DATAVIEWS_CONFIG_POPOVER_PROPS,\n\t\t\t\tid: popoverId,\n\t\t\t} }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ticon={ cog }\n\t\t\t\t\t\tlabel={ _x( 'View options', 'View is used as a noun' ) }\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-expanded={ isOpen ? 'true' : 'false' }\n\t\t\t\t\t\taria-controls={ popoverId }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t\tclassName=\"dataviews-config__popover-content-wrapper\"\n\t\t\t\t>\n\t\t\t\t\t<VStack className=\"dataviews-view-config\" spacing={ 6 }>\n\t\t\t\t\t\t<SettingsSection title={ __( 'Appearance' ) }>\n\t\t\t\t\t\t\t<HStack expanded className=\"is-divided-in-two\">\n\t\t\t\t\t\t\t\t<SortFieldControl />\n\t\t\t\t\t\t\t\t<SortDirectionControl />\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t{ !! activeLayout?.viewConfigOptions && (\n\t\t\t\t\t\t\t\t<activeLayout.viewConfigOptions />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<InfiniteScrollToggle />\n\t\t\t\t\t\t\t<ItemsPerPageControl />\n\t\t\t\t\t\t</SettingsSection>\n\t\t\t\t\t\t<SettingsSection title={ __( 'Properties' ) }>\n\t\t\t\t\t\t\t<FieldControl />\n\t\t\t\t\t\t</SettingsSection>\n\t\t\t\t\t</VStack>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction _DataViewsViewConfig() {\n\treturn (\n\t\t<>\n\t\t\t<ViewTypeMenu />\n\t\t\t<DataviewsViewConfigDropdown />\n\t\t</>\n\t);\n}\n\nconst DataViewsViewConfig = memo( _DataViewsViewConfig );\n\nexport default DataViewsViewConfig;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tDropdown,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tSelectControl,\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { memo, useContext, useMemo } from '@wordpress/element';\nimport { cog } from '@wordpress/icons';\nimport warning from '@wordpress/warning';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';\nimport { VIEW_LAYOUTS } from '../../dataviews-layouts';\nimport type { View } from '../../types';\nimport DataViewsContext from '../dataviews-context';\nimport InfiniteScrollToggle from './infinite-scroll-toggle';\nimport { PropertiesSection } from './properties-section';\nimport { unlock } from '../../lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst DATAVIEWS_CONFIG_POPOVER_PROPS = {\n\tclassName: 'dataviews-config__popover',\n\tplacement: 'bottom-end',\n\toffset: 9,\n};\n\nexport function ViewTypeMenu() {\n\tconst { view, onChangeView, defaultLayouts } =\n\t\tuseContext( DataViewsContext );\n\tconst availableLayouts = Object.keys( defaultLayouts );\n\tif ( availableLayouts.length <= 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<Menu>\n\t\t\t<Menu.TriggerButton\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ticon={ activeView?.icon }\n\t\t\t\t\t\tlabel={ __( 'Layout' ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Menu.Popover>\n\t\t\t\t{ availableLayouts.map( ( layout ) => {\n\t\t\t\t\tconst config = VIEW_LAYOUTS.find(\n\t\t\t\t\t\t( v ) => v.type === layout\n\t\t\t\t\t);\n\t\t\t\t\tif ( ! config ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Menu.RadioItem\n\t\t\t\t\t\t\tkey={ layout }\n\t\t\t\t\t\t\tvalue={ layout }\n\t\t\t\t\t\t\tname=\"view-actions-available-view\"\n\t\t\t\t\t\t\tchecked={ layout === view.type }\n\t\t\t\t\t\t\thideOnClick\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\te: ChangeEvent< HTMLInputElement >\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tswitch ( e.target.value ) {\n\t\t\t\t\t\t\t\t\tcase 'list':\n\t\t\t\t\t\t\t\t\tcase 'grid':\n\t\t\t\t\t\t\t\t\tcase 'table':\n\t\t\t\t\t\t\t\t\tcase 'pickerGrid':\n\t\t\t\t\t\t\t\t\tcase 'pickerTable':\n\t\t\t\t\t\t\t\t\t\tconst viewWithoutLayout = { ...view };\n\t\t\t\t\t\t\t\t\t\tif ( 'layout' in viewWithoutLayout ) {\n\t\t\t\t\t\t\t\t\t\t\tdelete viewWithoutLayout.layout;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn onChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...viewWithoutLayout,\n\t\t\t\t\t\t\t\t\t\t\ttype: e.target.value,\n\t\t\t\t\t\t\t\t\t\t\t...defaultLayouts[ e.target.value ],\n\t\t\t\t\t\t\t\t\t\t} as View );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\twarning( 'Invalid dataview' );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ config.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.RadioItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Menu.Popover>\n\t\t</Menu>\n\t);\n}\n\nfunction SortFieldControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\tconst orderOptions = useMemo( () => {\n\t\tconst sortableFields = fields.filter(\n\t\t\t( field ) => field.enableSorting !== false\n\t\t);\n\t\treturn sortableFields.map( ( field ) => {\n\t\t\treturn {\n\t\t\t\tlabel: field.label,\n\t\t\t\tvalue: field.id,\n\t\t\t};\n\t\t} );\n\t}, [ fields ] );\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Sort by' ) }\n\t\t\tvalue={ view.sort?.field }\n\t\t\toptions={ orderOptions }\n\t\t\tonChange={ ( value: string ) => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tsort: {\n\t\t\t\t\t\tdirection: view?.sort?.direction || 'desc',\n\t\t\t\t\t\tfield: value,\n\t\t\t\t\t},\n\t\t\t\t\tshowLevels: false,\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction SortDirectionControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( sortableFields.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tlet value = view.sort?.direction;\n\tif ( ! value && view.sort?.field ) {\n\t\tvalue = 'desc';\n\t}\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tclassName=\"dataviews-view-config__sort-direction\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Order' ) }\n\t\t\tvalue={ value }\n\t\t\tonChange={ ( newDirection ) => {\n\t\t\t\tif ( newDirection === 'asc' || newDirection === 'desc' ) {\n\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t...view,\n\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\tdirection: newDirection,\n\t\t\t\t\t\t\tfield:\n\t\t\t\t\t\t\t\tview.sort?.field ||\n\t\t\t\t\t\t\t\t// If there is no field assigned as the sorting field assign the first sortable field.\n\t\t\t\t\t\t\t\tfields.find(\n\t\t\t\t\t\t\t\t\t( field ) => field.enableSorting !== false\n\t\t\t\t\t\t\t\t)?.id ||\n\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tshowLevels: false,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\twarning( 'Invalid direction' );\n\t\t\t} }\n\t\t>\n\t\t\t{ SORTING_DIRECTIONS.map( ( direction ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\tvalue={ direction }\n\t\t\t\t\t\ticon={ sortIcons[ direction ] }\n\t\t\t\t\t\tlabel={ sortLabels[ direction ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction ItemsPerPageControl() {\n\tconst { view, config, onChangeView } = useContext( DataViewsContext );\n\tconst { infiniteScrollEnabled } = view;\n\tif (\n\t\t! config ||\n\t\t! config.perPageSizes ||\n\t\tconfig.perPageSizes.length < 2 ||\n\t\tconfig.perPageSizes.length > 6 ||\n\t\tinfiniteScrollEnabled\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Items per page' ) }\n\t\t\tvalue={ view.perPage || 10 }\n\t\t\tdisabled={ ! view?.sort?.field }\n\t\t\tonChange={ ( newItemsPerPage ) => {\n\t\t\t\tconst newItemsPerPageNumber =\n\t\t\t\t\ttypeof newItemsPerPage === 'number' ||\n\t\t\t\t\tnewItemsPerPage === undefined\n\t\t\t\t\t\t? newItemsPerPage\n\t\t\t\t\t\t: parseInt( newItemsPerPage, 10 );\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tperPage: newItemsPerPageNumber,\n\t\t\t\t\tpage: 1,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ config.perPageSizes.map( ( value ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tlabel={ value.toString() }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction SettingsSection( {\n\ttitle,\n\tdescription,\n\tchildren,\n}: {\n\ttitle: string;\n\tdescription?: string;\n\tchildren: React.ReactNode;\n} ) {\n\treturn (\n\t\t<Grid columns={ 12 } className=\"dataviews-settings-section\" gap={ 4 }>\n\t\t\t<div className=\"dataviews-settings-section__sidebar\">\n\t\t\t\t<Heading\n\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\tclassName=\"dataviews-settings-section__title\"\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t\t{ description && (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tvariant=\"muted\"\n\t\t\t\t\t\tclassName=\"dataviews-settings-section__description\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 8 }\n\t\t\t\tgap={ 4 }\n\t\t\t\tclassName=\"dataviews-settings-section__content\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Grid>\n\t\t</Grid>\n\t);\n}\n\nexport function DataviewsViewConfigDropdown() {\n\tconst { view } = useContext( DataViewsContext );\n\tconst popoverId = useInstanceId(\n\t\t_DataViewsViewConfig,\n\t\t'dataviews-view-config-dropdown'\n\t);\n\tconst activeLayout = VIEW_LAYOUTS.find(\n\t\t( layout ) => layout.type === view.type\n\t);\n\treturn (\n\t\t<Dropdown\n\t\t\texpandOnMobile\n\t\t\tpopoverProps={ {\n\t\t\t\t...DATAVIEWS_CONFIG_POPOVER_PROPS,\n\t\t\t\tid: popoverId,\n\t\t\t} }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ticon={ cog }\n\t\t\t\t\t\tlabel={ _x( 'View options', 'View is used as a noun' ) }\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-expanded={ isOpen ? 'true' : 'false' }\n\t\t\t\t\t\taria-controls={ popoverId }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t\tclassName=\"dataviews-config__popover-content-wrapper\"\n\t\t\t\t>\n\t\t\t\t\t<VStack className=\"dataviews-view-config\" spacing={ 6 }>\n\t\t\t\t\t\t<SettingsSection title={ __( 'Appearance' ) }>\n\t\t\t\t\t\t\t<HStack expanded className=\"is-divided-in-two\">\n\t\t\t\t\t\t\t\t<SortFieldControl />\n\t\t\t\t\t\t\t\t<SortDirectionControl />\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t{ !! activeLayout?.viewConfigOptions && (\n\t\t\t\t\t\t\t\t<activeLayout.viewConfigOptions />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<InfiniteScrollToggle />\n\t\t\t\t\t\t\t<ItemsPerPageControl />\n\t\t\t\t\t\t\t<PropertiesSection />\n\t\t\t\t\t\t</SettingsSection>\n\t\t\t\t\t</VStack>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction _DataViewsViewConfig() {\n\treturn (\n\t\t<>\n\t\t\t<ViewTypeMenu />\n\t\t\t<DataviewsViewConfigDropdown />\n\t\t</>\n\t);\n}\n\nconst DataViewsViewConfig = memo( _DataViewsViewConfig );\n\nexport default DataViewsViewConfig;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dataviews-view-config/infinite-scroll-toggle.js

@@ -1,8 +1,9 @@
-import { jsx } from "react/jsx-runtime";
+// packages/dataviews/src/components/dataviews-view-config/infinite-scroll-toggle.tsx
 import { ToggleControl } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
 import { useContext } from "@wordpress/element";
 import DataViewsContext from "../dataviews-context";
+import { jsx } from "react/jsx-runtime";
 function InfiniteScrollToggle() {
   const context = useContext(DataViewsContext);
   const { view, onChangeView } = context;

package/build-module/components/dataviews-view-config/infinite-scroll-toggle.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/dataviews-view-config/infinite-scroll-toggle.tsx"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\nexport default function InfiniteScrollToggle() {\n\tconst context = useContext( DataViewsContext );\n\tconst { view, onChangeView } = context;\n\tconst infiniteScrollEnabled = view.infiniteScrollEnabled ?? false;\n\n\t// Only render the toggle if an infinite scroll handler is available\n\tif ( ! context.hasInfiniteScrollHandler ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToggleControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ __( 'Enable infinite scroll' ) }\n\t\t\thelp={ __(\n\t\t\t\t'Automatically load more content as you scroll, instead of showing pagination links.'\n\t\t\t) }\n\t\t\tchecked={ infiniteScrollEnabled }\n\t\t\tonChange={ ( newValue ) => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tinfiniteScrollEnabled: newValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "AAuBE;AApBF,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAK3B,OAAO,sBAAsB;AAEd,SAAR,uBAAwC;AAC9C,QAAM,UAAU,WAAY,gBAAiB;AAC7C,QAAM,EAAE,MAAM,aAAa,IAAI;AAC/B,QAAM,wBAAwB,KAAK,yBAAyB;AAG5D,MAAK,CAAE,QAAQ,0BAA2B;AACzC,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,yBAAuB;AAAA,MACvB,OAAQ,GAAI,wBAAyB;AAAA,MACrC,MAAO;AAAA,QACN;AAAA,MACD;AAAA,MACA,SAAU;AAAA,MACV,UAAW,CAAE,aAAc;AAC1B,qBAAc;AAAA,UACb,GAAG;AAAA,UACH,uBAAuB;AAAA,QACxB,CAAE;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
+  "mappings": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAK3B,OAAO,sBAAsB;AAa3B;AAXa,SAAR,uBAAwC;AAC9C,QAAM,UAAU,WAAY,gBAAiB;AAC7C,QAAM,EAAE,MAAM,aAAa,IAAI;AAC/B,QAAM,wBAAwB,KAAK,yBAAyB;AAG5D,MAAK,CAAE,QAAQ,0BAA2B;AACzC,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,yBAAuB;AAAA,MACvB,OAAQ,GAAI,wBAAyB;AAAA,MACrC,MAAO;AAAA,QACN;AAAA,MACD;AAAA,MACA,SAAU;AAAA,MACV,UAAW,CAAE,aAAc;AAC1B,qBAAc;AAAA,UACb,GAAG;AAAA,UACH,uBAAuB;AAAA,QACxB,CAAE;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }