@payloadcms/ui 4.0.0-internal.5f0cd13 → 4.0.0-internal.a0ef1b8

package/dist/views/API/LocaleSelector/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const LocaleSelector: React.FC<{
+    readonly localeOptions: {
+        label: Record<string, string> | string;
+        value: string;
+    }[];
+    readonly onChange: (value: string) => void;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/API/LocaleSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/API/LocaleSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE;QACtB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;QACtC,KAAK,EAAE,MAAM,CAAA;KACd,EAAE,CAAA;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C,CAcA,CAAA"}

package/dist/views/API/LocaleSelector/index.js

@@ -0,0 +1,45 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { SelectField } from '../../../fields/Select/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+export const LocaleSelector = t0 => {
+  const $ = _c(6);
+  const {
+    localeOptions,
+    onChange
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== localeOptions || $[1] !== onChange || $[2] !== t) {
+    let t2;
+    if ($[4] !== onChange) {
+      t2 = value => onChange(value);
+      $[4] = onChange;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    t1 = _jsx(SelectField, {
+      field: {
+        name: "locale",
+        label: t("general:locale"),
+        options: localeOptions
+      },
+      onChange: t2,
+      path: "locale"
+    });
+    $[0] = localeOptions;
+    $[1] = onChange;
+    $[2] = t;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

package/dist/views/API/LocaleSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","SelectField","useTranslation","LocaleSelector","t0","$","localeOptions","onChange","t","t1","t2","value","_jsx","field","name","label","options","path"],"sources":["../../../../src/views/API/LocaleSelector/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { SelectField } from '../../../fields/Select/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nexport const LocaleSelector: React.FC<{\n  readonly localeOptions: {\n    label: Record<string, string> | string\n    value: string\n  }[]\n  readonly onChange: (value: string) => void\n}> = ({ localeOptions, onChange }) => {\n  const { t } = useTranslation()\n\n  return (\n    <SelectField\n      field={{\n        name: 'locale',\n        label: t('general:locale'),\n        options: localeOptions,\n      }}\n      onChange={(value: string) => onChange(value)}\n      path=\"locale\"\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,cAAA,GAMRC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO,aAAA;IAAAC;EAAA,IAAAH,EAA2B;EAC/B;IAAAI;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAJ,CAAA,QAAAC,aAAA,IAAAD,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAG,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAL,CAAA,QAAAE,QAAA;MASAG,EAAA,GAAAC,KAAA,IAAmBJ,QAAA,CAASI,KAAA;MAAAN,CAAA,MAAAE,QAAA;MAAAF,CAAA,MAAAK,EAAA;IAAA;MAAAA,EAAA,GAAAL,CAAA;IAAA;IANxCI,EAAA,GAAAG,IAAA,CAAAX,WAAA;MAAAY,KAAA;QAAAC,IAAA,EAEU;QAAAC,KAAA,EACCP,CAAA,CAAE;QAAAQ,OAAA,EACAV;MAAA;MAAAC,QAAA,EAEDG,EAA4B;MAAAO,IAAA,EACjC;IAAA,C;;;;;;;;SAPPR,E;CAUJ","ignoreList":[]}

package/dist/views/API/generateAPIViewMetadata.d.ts

@@ -0,0 +1,19 @@
+import type { I18nClient } from '@payloadcms/translations';
+import type { EditConfig, MetaConfig, SanitizedCollectionConfig, SanitizedConfig, SanitizedGlobalConfig } from 'payload';
+export type GenerateEditViewMetadata = (args: {
+    collectionConfig?: null | SanitizedCollectionConfig;
+    config: SanitizedConfig;
+    globalConfig?: null | SanitizedGlobalConfig;
+    i18n: I18nClient;
+    isEditing?: boolean;
+    isReadOnly?: boolean;
+    params?: {
+        [key: string]: string | string[];
+    };
+    view?: keyof EditConfig;
+}) => Promise<MetaConfig>;
+/**
+ * @todo Remove the `MetaConfig` type assertions. They are currently required because of how the `Metadata` type from `next` consumes the `URL` type.
+ */
+export declare const generateAPIViewMetadata: GenerateEditViewMetadata;
+//# sourceMappingURL=generateAPIViewMetadata.d.ts.map

package/dist/views/API/generateAPIViewMetadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateAPIViewMetadata.d.ts","sourceRoot":"","sources":["../../../src/views/API/generateAPIViewMetadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EACV,UAAU,EACV,UAAU,EACV,yBAAyB,EACzB,eAAe,EACf,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAMhB,MAAM,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE;IAC5C,gBAAgB,CAAC,EAAE,IAAI,GAAG,yBAAyB,CAAA;IACnD,MAAM,EAAE,eAAe,CAAA;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,qBAAqB,CAAA;IAC3C,IAAI,EAAE,UAAU,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,CAAA;IAC7C,IAAI,CAAC,EAAE,MAAM,UAAU,CAAA;CACxB,KAAK,OAAO,CAAC,UAAU,CAAC,CAAA;AAEzB;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,wBAiCrC,CAAA"}

package/dist/views/API/generateAPIViewMetadata.js

@@ -0,0 +1,29 @@
+import { getTranslation } from '@payloadcms/translations';
+import { formatMetadata } from '../../utilities/formatMetadata.js';
+/**
+ * @todo Remove the `MetaConfig` type assertions. They are currently required because of how the `Metadata` type from `next` consumes the `URL` type.
+ */
+export const generateAPIViewMetadata = async ({
+  collectionConfig,
+  config,
+  globalConfig,
+  i18n
+}) => {
+  const entityLabel = collectionConfig ? getTranslation(collectionConfig.labels.singular, i18n) : globalConfig ? getTranslation(globalConfig.label, i18n) : '';
+  return Promise.resolve(formatMetadata({
+    ...(config.admin.meta || {}),
+    description: `API - ${entityLabel}`,
+    keywords: 'API',
+    serverURL: config.serverURL,
+    title: `API - ${entityLabel}`,
+    ...(collectionConfig ? {
+      ...(collectionConfig?.admin.meta || {}),
+      ...(collectionConfig?.admin?.components?.views?.edit?.api?.meta || {})
+    } : {}),
+    ...(globalConfig ? {
+      ...(globalConfig?.admin.meta || {}),
+      ...(globalConfig?.admin?.components?.views?.edit?.api?.meta || {})
+    } : {})
+  }));
+};
+//# sourceMappingURL=generateAPIViewMetadata.js.map

package/dist/views/API/generateAPIViewMetadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateAPIViewMetadata.js","names":["getTranslation","formatMetadata","generateAPIViewMetadata","collectionConfig","config","globalConfig","i18n","entityLabel","labels","singular","label","Promise","resolve","admin","meta","description","keywords","serverURL","title","components","views","edit","api"],"sources":["../../../src/views/API/generateAPIViewMetadata.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type {\n  EditConfig,\n  MetaConfig,\n  SanitizedCollectionConfig,\n  SanitizedConfig,\n  SanitizedGlobalConfig,\n} from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport { formatMetadata } from '../../utilities/formatMetadata.js'\n\nexport type GenerateEditViewMetadata = (args: {\n  collectionConfig?: null | SanitizedCollectionConfig\n  config: SanitizedConfig\n  globalConfig?: null | SanitizedGlobalConfig\n  i18n: I18nClient\n  isEditing?: boolean\n  isReadOnly?: boolean\n  params?: { [key: string]: string | string[] }\n  view?: keyof EditConfig\n}) => Promise<MetaConfig>\n\n/**\n * @todo Remove the `MetaConfig` type assertions. They are currently required because of how the `Metadata` type from `next` consumes the `URL` type.\n */\nexport const generateAPIViewMetadata: GenerateEditViewMetadata = async ({\n  collectionConfig,\n  config,\n  globalConfig,\n  i18n,\n}) => {\n  const entityLabel = collectionConfig\n    ? getTranslation(collectionConfig.labels.singular, i18n)\n    : globalConfig\n      ? getTranslation(globalConfig.label, i18n)\n      : ''\n\n  return Promise.resolve(\n    formatMetadata({\n      ...(config.admin.meta || {}),\n      description: `API - ${entityLabel}`,\n      keywords: 'API',\n      serverURL: config.serverURL,\n      title: `API - ${entityLabel}`,\n      ...((collectionConfig\n        ? {\n            ...(collectionConfig?.admin.meta || {}),\n            ...(collectionConfig?.admin?.components?.views?.edit?.api?.meta || {}),\n          }\n        : {}) as MetaConfig),\n      ...((globalConfig\n        ? {\n            ...(globalConfig?.admin.meta || {}),\n            ...(globalConfig?.admin?.components?.views?.edit?.api?.meta || {}),\n          }\n        : {}) as MetaConfig),\n    }),\n  )\n}\n"],"mappings":"AASA,SAASA,cAAc,QAAQ;AAE/B,SAASC,cAAc,QAAQ;AAa/B;;;AAGA,OAAO,MAAMC,uBAAA,GAAoD,MAAAA,CAAO;EACtEC,gBAAgB;EAChBC,MAAM;EACNC,YAAY;EACZC;AAAI,CACL;EACC,MAAMC,WAAA,GAAcJ,gBAAA,GAChBH,cAAA,CAAeG,gBAAA,CAAiBK,MAAM,CAACC,QAAQ,EAAEH,IAAA,IACjDD,YAAA,GACEL,cAAA,CAAeK,YAAA,CAAaK,KAAK,EAAEJ,IAAA,IACnC;EAEN,OAAOK,OAAA,CAAQC,OAAO,CACpBX,cAAA,CAAe;IACb,IAAIG,MAAA,CAAOS,KAAK,CAACC,IAAI,IAAI,CAAC,CAAC;IAC3BC,WAAA,EAAa,SAASR,WAAA,EAAa;IACnCS,QAAA,EAAU;IACVC,SAAA,EAAWb,MAAA,CAAOa,SAAS;IAC3BC,KAAA,EAAO,SAASX,WAAA,EAAa;IAC7B,IAAKJ,gBAAA,GACD;MACE,IAAIA,gBAAA,EAAkBU,KAAA,CAAMC,IAAA,IAAQ,CAAC,CAAC;MACtC,IAAIX,gBAAA,EAAkBU,KAAA,EAAOM,UAAA,EAAYC,KAAA,EAAOC,IAAA,EAAMC,GAAA,EAAKR,IAAA,IAAQ,CAAC,CAAC;IACvE,IACA,CAAC,CAAC;IACN,IAAKT,YAAA,GACD;MACE,IAAIA,YAAA,EAAcQ,KAAA,CAAMC,IAAA,IAAQ,CAAC,CAAC;MAClC,IAAIT,YAAA,EAAcQ,KAAA,EAAOM,UAAA,EAAYC,KAAA,EAAOC,IAAA,EAAMC,GAAA,EAAKR,IAAA,IAAQ,CAAC,CAAC;IACnE,IACA,CAAC,CAAC;EACR;AAEJ","ignoreList":[]}

package/dist/views/API/index.client.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import './index.css';
+export declare const APIViewClient: React.FC;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/views/API/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/API/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiB9B,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAkPjC,CAAA"}

package/dist/views/API/index.client.js

@@ -0,0 +1,263 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatAdminURL, hasDraftsEnabled } from 'payload/shared';
+import * as React from 'react';
+import { toast } from 'sonner';
+import { Button } from '../../elements/Button/index.js';
+import { CodeEditor as CodeEditorLazy } from '../../elements/CodeEditor/index.js';
+import { CheckboxField } from '../../fields/Checkbox/index.js';
+import { NumberField } from '../../fields/Number/index.js';
+import { TextInput } from '../../fields/Text/Input.js';
+import { Form } from '../../forms/Form/index.js';
+import { ExternalLinkIcon } from '../../icons/ExternalLink/index.js';
+import { MinimizeMaximizeIcon } from '../../icons/MinimizeMaximize/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
+import { useSearchParams } from '../../providers/RouterAdapter/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { SetDocumentStepNav } from '../../views/Edit/SetDocumentStepNav/index.js';
+import './index.css';
+import { LocaleSelector } from './LocaleSelector/index.js';
+const baseClass = 'query-inspector';
+export const APIViewClient = () => {
+  const {
+    id,
+    collectionSlug,
+    globalSlug,
+    initialData,
+    isTrashed
+  } = useDocumentInfo();
+  const searchParams = useSearchParams();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    code
+  } = useLocale();
+  const {
+    config: {
+      defaultDepth,
+      localization,
+      routes: {
+        api: apiRoute
+      },
+      serverURL
+    },
+    getEntityConfig
+  } = useConfig();
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const globalConfig = getEntityConfig({
+    globalSlug
+  });
+  const localeOptions = localization && localization.locales.map(locale => ({
+    label: locale.label,
+    value: locale.code
+  }));
+  let draftsEnabled = false;
+  let docEndpoint = undefined;
+  if (collectionConfig) {
+    draftsEnabled = hasDraftsEnabled(collectionConfig);
+    docEndpoint = `/${collectionSlug}/${id}`;
+  }
+  if (globalConfig) {
+    draftsEnabled = hasDraftsEnabled(globalConfig);
+    docEndpoint = `/globals/${globalSlug}`;
+  }
+  const [data, setData] = React.useState(initialData);
+  const [draft, setDraft] = React.useState(searchParams.get('draft') === 'true');
+  const [locale_0, setLocale] = React.useState(searchParams?.get('locale') || code);
+  const [depth, setDepth] = React.useState(searchParams.get('depth') || defaultDepth.toString());
+  const [authenticated, setAuthenticated] = React.useState(true);
+  const [fullscreen, setFullscreen] = React.useState(false);
+  const [origin, setOrigin] = React.useState(serverURL || '');
+  const jsonString = React.useMemo(() => data === undefined ? '' : JSON.stringify(data, null, 2), [data]);
+  // readOnly editors never fire onChange, so bump a counter to re-fit height on data change
+  const [recalculatedHeightAt, setRecalculatedHeightAt] = React.useState(0);
+  React.useEffect(() => {
+    setRecalculatedHeightAt(count => count + 1);
+  }, [jsonString]);
+  // Set the origin to the window.location.origin in useEffect to avoid hydration errors
+  React.useEffect(() => {
+    if (!serverURL) {
+      setOrigin(window.location.origin);
+    }
+  }, [serverURL]);
+  const trashParam = typeof initialData?.deletedAt === 'string';
+  const params = new URLSearchParams({
+    depth,
+    draft: String(draft),
+    locale: locale_0,
+    trash: trashParam ? 'true' : 'false'
+  }).toString();
+  const fetchURL = formatAdminURL({
+    apiRoute,
+    path: `${docEndpoint}?${params}`,
+    serverURL: origin
+  });
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await fetch(fetchURL, {
+          credentials: authenticated ? 'include' : 'omit',
+          headers: {
+            'Accept-Language': i18n.language
+          },
+          method: 'GET'
+        });
+        try {
+          const json = await res.json();
+          setData(json);
+        } catch (error_0) {
+          toast.error('Error parsing response');
+          console.error(error_0); // eslint-disable-line no-console
+        }
+      } catch (error) {
+        toast.error('Error making request');
+        console.error(error); // eslint-disable-line no-console
+      }
+    };
+    void fetchData();
+  }, [i18n.language, fetchURL, authenticated]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, fullscreen && `${baseClass}--fullscreen`].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx(SetDocumentStepNav, {
+      collectionSlug: collectionSlug,
+      globalLabel: globalConfig?.label,
+      globalSlug: globalSlug,
+      id: id,
+      isTrashed: isTrashed,
+      pluralLabel: collectionConfig ? collectionConfig?.labels?.plural : undefined,
+      useAsTitle: collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined,
+      view: "API"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__configuration`,
+        children: /*#__PURE__*/_jsx(Form, {
+          initialState: {
+            authenticated: {
+              initialValue: authenticated || false,
+              valid: true,
+              value: authenticated || false
+            },
+            depth: {
+              initialValue: Number(depth || 0),
+              valid: true,
+              value: Number(depth || 0)
+            },
+            draft: {
+              initialValue: draft || false,
+              valid: true,
+              value: draft || false
+            },
+            locale: {
+              initialValue: locale_0,
+              valid: true,
+              value: locale_0
+            }
+          },
+          children: /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__form-fields`,
+            children: [localeOptions && /*#__PURE__*/_jsx(LocaleSelector, {
+              localeOptions: localeOptions,
+              onChange: setLocale
+            }), /*#__PURE__*/_jsx(NumberField, {
+              field: {
+                name: 'depth',
+                admin: {
+                  step: 1
+                },
+                label: t('general:depth'),
+                max: 10,
+                min: 0
+              },
+              onChange: value => setDepth(value?.toString()),
+              path: "depth"
+            }), draftsEnabled && /*#__PURE__*/_jsx(CheckboxField, {
+              field: {
+                name: 'draft',
+                label: t('version:draft')
+              },
+              onChange: () => setDraft(!draft),
+              path: "draft"
+            }), /*#__PURE__*/_jsx(CheckboxField, {
+              field: {
+                name: 'authenticated',
+                label: t('authentication:authenticated')
+              },
+              onChange: () => setAuthenticated(!authenticated),
+              path: "authenticated"
+            })]
+          })
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__results-wrapper`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__results-bar`,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__api-url-field`,
+            children: /*#__PURE__*/_jsx(TextInput, {
+              className: `${baseClass}__api-url-input`,
+              htmlAttributes: {
+                'aria-label': 'API URL',
+                readOnly: true
+              },
+              path: "api-url",
+              readOnly: false,
+              value: fetchURL
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__results-bar-actions`,
+            children: [/*#__PURE__*/_jsx(Button, {
+              "aria-label": t('general:openInNewWindow'),
+              buttonStyle: "secondary",
+              className: `${baseClass}__api-url-open-button`,
+              el: "anchor",
+              icon: /*#__PURE__*/_jsx(ExternalLinkIcon, {
+                size: 16
+              }),
+              margin: false,
+              newTab: true,
+              size: "large",
+              url: fetchURL
+            }), /*#__PURE__*/_jsx(Button, {
+              "aria-label": "toggle fullscreen",
+              buttonStyle: "secondary",
+              className: `${baseClass}__toggle-fullscreen-button`,
+              icon: /*#__PURE__*/_jsx(MinimizeMaximizeIcon, {
+                isMinimized: !fullscreen
+              }),
+              margin: false,
+              onClick: () => setFullscreen(!fullscreen),
+              size: "large"
+            })]
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__results`,
+          children: /*#__PURE__*/_jsx(CodeEditorLazy, {
+            defaultLanguage: "json",
+            height: "100%",
+            options: {
+              fixedOverflowWidgets: true,
+              folding: true,
+              lineNumbers: 'on',
+              stickyScroll: {
+                enabled: false
+              },
+              wordWrap: 'off'
+            },
+            readOnly: true,
+            recalculatedHeightAt: recalculatedHeightAt,
+            value: jsonString
+          })
+        })]
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.client.js.map

package/dist/views/API/index.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.js","names":["formatAdminURL","hasDraftsEnabled","React","toast","Button","CodeEditor","CodeEditorLazy","CheckboxField","NumberField","TextInput","Form","ExternalLinkIcon","MinimizeMaximizeIcon","useConfig","useDocumentInfo","useLocale","useSearchParams","useTranslation","SetDocumentStepNav","LocaleSelector","baseClass","APIViewClient","id","collectionSlug","globalSlug","initialData","isTrashed","searchParams","i18n","t","code","config","defaultDepth","localization","routes","api","apiRoute","serverURL","getEntityConfig","collectionConfig","globalConfig","localeOptions","locales","map","locale","label","value","draftsEnabled","docEndpoint","undefined","data","setData","useState","draft","setDraft","get","setLocale","depth","setDepth","toString","authenticated","setAuthenticated","fullscreen","setFullscreen","origin","setOrigin","jsonString","useMemo","JSON","stringify","recalculatedHeightAt","setRecalculatedHeightAt","useEffect","count","window","location","trashParam","deletedAt","params","URLSearchParams","String","trash","fetchURL","path","fetchData","res","fetch","credentials","headers","language","method","json","error","console","_jsxs","className","filter","Boolean","join","_jsx","globalLabel","pluralLabel","labels","plural","useAsTitle","admin","view","initialState","initialValue","valid","Number","onChange","field","name","step","max","min","htmlAttributes","readOnly","buttonStyle","el","icon","size","margin","newTab","url","isMinimized","onClick","defaultLanguage","height","options","fixedOverflowWidgets","folding","lineNumbers","stickyScroll","enabled","wordWrap"],"sources":["../../../src/views/API/index.client.tsx"],"sourcesContent":["'use client'\n\nimport { formatAdminURL, hasDraftsEnabled } from 'payload/shared'\nimport * as React from 'react'\nimport { toast } from 'sonner'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { CodeEditor as CodeEditorLazy } from '../../elements/CodeEditor/index.js'\nimport { CheckboxField } from '../../fields/Checkbox/index.js'\nimport { NumberField } from '../../fields/Number/index.js'\nimport { TextInput } from '../../fields/Text/Input.js'\nimport { Form } from '../../forms/Form/index.js'\nimport { ExternalLinkIcon } from '../../icons/ExternalLink/index.js'\nimport { MinimizeMaximizeIcon } from '../../icons/MinimizeMaximize/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useSearchParams } from '../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { SetDocumentStepNav } from '../../views/Edit/SetDocumentStepNav/index.js'\nimport './index.css'\nimport { LocaleSelector } from './LocaleSelector/index.js'\n\nconst baseClass = 'query-inspector'\n\nexport const APIViewClient: React.FC = () => {\n  const { id, collectionSlug, globalSlug, initialData, isTrashed } = useDocumentInfo()\n\n  const searchParams = useSearchParams()\n  const { i18n, t } = useTranslation()\n  const { code } = useLocale()\n\n  const {\n    config: {\n      defaultDepth,\n      localization,\n      routes: { api: apiRoute },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const globalConfig = getEntityConfig({ globalSlug })\n\n  const localeOptions =\n    localization &&\n    localization.locales.map((locale) => ({ label: locale.label, value: locale.code }))\n\n  let draftsEnabled: boolean = false\n  let docEndpoint: `/${string}` = undefined\n\n  if (collectionConfig) {\n    draftsEnabled = hasDraftsEnabled(collectionConfig)\n    docEndpoint = `/${collectionSlug}/${id}`\n  }\n\n  if (globalConfig) {\n    draftsEnabled = hasDraftsEnabled(globalConfig)\n    docEndpoint = `/globals/${globalSlug}`\n  }\n\n  const [data, setData] = React.useState<any>(initialData)\n  const [draft, setDraft] = React.useState<boolean>(searchParams.get('draft') === 'true')\n  const [locale, setLocale] = React.useState<string>(searchParams?.get('locale') || code)\n  const [depth, setDepth] = React.useState<string>(\n    searchParams.get('depth') || defaultDepth.toString(),\n  )\n  const [authenticated, setAuthenticated] = React.useState<boolean>(true)\n  const [fullscreen, setFullscreen] = React.useState<boolean>(false)\n  const [origin, setOrigin] = React.useState<string>(serverURL || '')\n\n  const jsonString = React.useMemo(\n    () => (data === undefined ? '' : JSON.stringify(data, null, 2)),\n    [data],\n  )\n\n  // readOnly editors never fire onChange, so bump a counter to re-fit height on data change\n  const [recalculatedHeightAt, setRecalculatedHeightAt] = React.useState(0)\n  React.useEffect(() => {\n    setRecalculatedHeightAt((count) => count + 1)\n  }, [jsonString])\n\n  // Set the origin to the window.location.origin in useEffect to avoid hydration errors\n  React.useEffect(() => {\n    if (!serverURL) {\n      setOrigin(window.location.origin)\n    }\n  }, [serverURL])\n\n  const trashParam = typeof initialData?.deletedAt === 'string'\n\n  const params = new URLSearchParams({\n    depth,\n    draft: String(draft),\n    locale,\n    trash: trashParam ? 'true' : 'false',\n  }).toString()\n\n  const fetchURL = formatAdminURL({\n    apiRoute,\n    path: `${docEndpoint}?${params}`,\n    serverURL: origin,\n  })\n\n  React.useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const res = await fetch(fetchURL, {\n          credentials: authenticated ? 'include' : 'omit',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n          method: 'GET',\n        })\n\n        try {\n          const json = await res.json()\n          setData(json)\n        } catch (error) {\n          toast.error('Error parsing response')\n          console.error(error) // eslint-disable-line no-console\n        }\n      } catch (error) {\n        toast.error('Error making request')\n        console.error(error) // eslint-disable-line no-console\n      }\n    }\n\n    void fetchData()\n  }, [i18n.language, fetchURL, authenticated])\n\n  return (\n    <div\n      className={[baseClass, fullscreen && `${baseClass}--fullscreen`].filter(Boolean).join(' ')}\n    >\n      <SetDocumentStepNav\n        collectionSlug={collectionSlug}\n        globalLabel={globalConfig?.label}\n        globalSlug={globalSlug}\n        id={id}\n        isTrashed={isTrashed}\n        pluralLabel={collectionConfig ? collectionConfig?.labels?.plural : undefined}\n        useAsTitle={collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined}\n        view=\"API\"\n      />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__configuration`}>\n          <Form\n            initialState={{\n              authenticated: {\n                initialValue: authenticated || false,\n                valid: true,\n                value: authenticated || false,\n              },\n              depth: {\n                initialValue: Number(depth || 0),\n                valid: true,\n                value: Number(depth || 0),\n              },\n              draft: {\n                initialValue: draft || false,\n                valid: true,\n                value: draft || false,\n              },\n              locale: {\n                initialValue: locale,\n                valid: true,\n                value: locale,\n              },\n            }}\n          >\n            <div className={`${baseClass}__form-fields`}>\n              {localeOptions && (\n                <LocaleSelector localeOptions={localeOptions} onChange={setLocale} />\n              )}\n              <NumberField\n                field={{\n                  name: 'depth',\n                  admin: {\n                    step: 1,\n                  },\n                  label: t('general:depth'),\n                  max: 10,\n                  min: 0,\n                }}\n                onChange={(value) => setDepth(value?.toString())}\n                path=\"depth\"\n              />\n              {draftsEnabled && (\n                <CheckboxField\n                  field={{\n                    name: 'draft',\n                    label: t('version:draft'),\n                  }}\n                  onChange={() => setDraft(!draft)}\n                  path=\"draft\"\n                />\n              )}\n              <CheckboxField\n                field={{\n                  name: 'authenticated',\n                  label: t('authentication:authenticated'),\n                }}\n                onChange={() => setAuthenticated(!authenticated)}\n                path=\"authenticated\"\n              />\n            </div>\n          </Form>\n        </div>\n        <div className={`${baseClass}__results-wrapper`}>\n          <div className={`${baseClass}__results-bar`}>\n            <div className={`${baseClass}__api-url-field`}>\n              <TextInput\n                className={`${baseClass}__api-url-input`}\n                htmlAttributes={{\n                  'aria-label': 'API URL',\n                  readOnly: true,\n                }}\n                path=\"api-url\"\n                readOnly={false}\n                value={fetchURL}\n              />\n            </div>\n            <div className={`${baseClass}__results-bar-actions`}>\n              <Button\n                aria-label={t('general:openInNewWindow')}\n                buttonStyle=\"secondary\"\n                className={`${baseClass}__api-url-open-button`}\n                el=\"anchor\"\n                icon={<ExternalLinkIcon size={16} />}\n                margin={false}\n                newTab\n                size=\"large\"\n                url={fetchURL}\n              />\n              <Button\n                aria-label=\"toggle fullscreen\"\n                buttonStyle=\"secondary\"\n                className={`${baseClass}__toggle-fullscreen-button`}\n                icon={<MinimizeMaximizeIcon isMinimized={!fullscreen} />}\n                margin={false}\n                onClick={() => setFullscreen(!fullscreen)}\n                size=\"large\"\n              />\n            </div>\n          </div>\n          <div className={`${baseClass}__results`}>\n            <CodeEditorLazy\n              defaultLanguage=\"json\"\n              height=\"100%\"\n              options={{\n                fixedOverflowWidgets: true,\n                folding: true,\n                lineNumbers: 'on',\n                stickyScroll: { enabled: false },\n                wordWrap: 'off',\n              }}\n              readOnly\n              recalculatedHeightAt={recalculatedHeightAt}\n              value={jsonString}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/API/index.css

@@ -0,0 +1,205 @@
+@layer payload-default {
+  .query-inspector {
+    --header-offset: 110px;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    ul {
+      padding-left: var(--spacer-3);
+    }
+  }
+
+  .query-inspector--fullscreen {
+    padding: 0;
+
+    .query-inspector__configuration {
+      display: none;
+    }
+
+    .query-inspector__content {
+      grid-template-columns: 1fr;
+    }
+
+    .query-inspector__results-wrapper {
+      border: 0;
+    }
+
+    .query-inspector__results-bar {
+      padding-inline-start: var(--gutter-h);
+    }
+
+    .query-inspector__results {
+      padding-inline-start: var(--gutter-h);
+    }
+  }
+
+  .query-inspector__content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    flex: 1;
+    min-height: 0;
+  }
+
+  .query-inspector__configuration {
+    padding: var(--spacer-3) var(--gutter-h);
+    overflow-y: auto;
+  }
+
+  .query-inspector__api-url-field {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .query-inspector__api-url-open-button {
+    color: var(--color-icon-secondary);
+
+    &:hover {
+      color: var(--color-icon);
+    }
+  }
+
+  .query-inspector__api-url-input {
+    gap: 0;
+
+    .field-type__wrap {
+      gap: 0;
+    }
+
+    .form-input {
+      user-select: text;
+      -webkit-user-select: text;
+      cursor: text;
+    }
+  }
+
+  .query-inspector__label {
+    font-weight: var(--text-body-large-strong-font-weight);
+  }
+
+  .query-inspector__form-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-field);
+  }
+
+  .query-inspector__filter-query-checkboxes {
+    display: flex;
+    gap: var(--spacer-3);
+
+    .checkbox-input label.field-label:not(.unstyled) {
+      color: var(--color-text);
+      font-family: var(--text-body-medium-font-family);
+      font-size: var(--text-body-medium-font-size);
+      font-weight: var(--text-body-medium-font-weight);
+      line-height: var(--text-body-medium-line-height);
+    }
+  }
+
+  .query-inspector__results-wrapper {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-family-mono);
+    min-width: 0;
+    max-height: calc(100dvh - var(--header-offset));
+    overflow: hidden;
+    background-color: var(--color-bg-secondary);
+    border-inline-start: var(--stroke-width-small) solid var(--color-border);
+
+    ul {
+      margin: 0;
+    }
+
+    li {
+      list-style: none;
+    }
+  }
+
+  .query-inspector__results-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2-5);
+    padding: var(--spacer-2);
+    padding-inline-end: var(--gutter-h);
+    background-color: var(--color-bg);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    flex-shrink: 0;
+  }
+
+  .query-inspector__results-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    margin-inline-start: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  .query-inspector__toggle-fullscreen-button {
+    background-color: transparent;
+    cursor: pointer;
+    margin: 0;
+    border: 0;
+    border-radius: var(--radius-medium);
+    color: var(--color-icon-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: var(--color-bg-hover);
+      color: var(--color-icon);
+    }
+
+    &:active {
+      background-color: var(--color-bg-pressed);
+      color: var(--color-icon);
+    }
+  }
+
+  .query-inspector__results {
+    overflow: visible;
+    min-height: 0;
+    flex: 1;
+  }
+
+  /* Flush, full-panel */
+  .query-inspector__results .code-editor.read-only {
+    background: var(--color-bg-secondary);
+    border: 0;
+    border-radius: 0;
+  }
+
+  @media (max-width: 1024px) {
+    .query-inspector__content {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      gap: var(--spacer-3);
+    }
+
+    .query-inspector__results {
+      padding-inline-start: var(--gutter-h);
+    }
+
+    .query-inspector__results-bar {
+      padding-inline-start: var(--gutter-h);
+    }
+
+    .query-inspector__configuration {
+      padding-inline-end: var(--gutter-h);
+    }
+
+    .query-inspector__results-wrapper {
+      border-inline-start: 0;
+      border-top: var(--stroke-width-small) solid var(--color-border);
+      flex: 1;
+      max-height: none;
+      min-height: 0;
+    }
+
+    .query-inspector--fullscreen .query-inspector__results-wrapper {
+      border-top: 0;
+    }
+  }
+}

package/dist/views/API/index.d.ts

@@ -0,0 +1,4 @@
+import type { DocumentViewServerProps } from 'payload';
+import React from 'react';
+export declare function APIView(props: DocumentViewServerProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/API/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/API/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEtD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,wBAAgB,OAAO,CAAC,KAAK,EAAE,uBAAuB,qBAErD"}

package/dist/views/API/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports/client bundle for proper client boundary in prod builds
+import { APIViewClient } from '../../exports/client/index.js';
+export function APIView(props) {
+  return /*#__PURE__*/_jsx(APIViewClient, {});
+}
+//# sourceMappingURL=index.js.map