@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.4804abd

package/dist/views/Document/renderDocumentSlots.d.ts

@@ -0,0 +1,16 @@
+import type { DocumentSlots, Locale, PayloadRequest, SanitizedCollectionConfig, SanitizedGlobalConfig, SanitizedPermissions, ServerFunction } from 'payload';
+export declare const renderDocumentSlots: (args: {
+    collectionConfig?: SanitizedCollectionConfig;
+    doc?: Record<string, unknown>;
+    globalConfig?: SanitizedGlobalConfig;
+    hasSavePermission: boolean;
+    id?: number | string;
+    locale: Locale;
+    permissions: SanitizedPermissions;
+    req: PayloadRequest;
+}) => DocumentSlots;
+export declare const renderDocumentSlotsHandler: ServerFunction<{
+    collectionSlug: string;
+    id?: number | string;
+}>;
+//# sourceMappingURL=renderDocumentSlots.d.ts.map

package/dist/views/Document/renderDocumentSlots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderDocumentSlots.d.ts","sourceRoot":"","sources":["../../../src/views/Document/renderDocumentSlots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,aAAa,EAEb,MAAM,EAEN,cAAc,EAGd,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EAGpB,cAAc,EAOf,MAAM,SAAS,CAAA;AAShB,eAAO,MAAM,mBAAmB,EAAE,CAAC,IAAI,EAAE;IACvC,gBAAgB,CAAC,EAAE,yBAAyB,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,iBAAiB,EAAE,OAAO,CAAA;IAC1B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,oBAAoB,CAAA;IACjC,GAAG,EAAE,cAAc,CAAA;CACpB,KAAK,aAgOL,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,cAAc,CAAC;IACtD,cAAc,EAAE,MAAM,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACrB,CA6CA,CAAA"}

package/dist/views/Document/renderDocumentSlots.js

@@ -0,0 +1,225 @@
+import { hasDraftsEnabled, matchMimeType } from 'payload/shared';
+import { RenderServerComponent } from '../../elements/RenderServerComponent/index.js';
+// 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 { ViewDescription } from '../../exports/client/index.js';
+import { getDocumentPermissions } from '../../utilities/getDocumentPermissions.js';
+export const renderDocumentSlots = args => {
+  const {
+    id,
+    collectionConfig,
+    doc,
+    globalConfig,
+    hasSavePermission,
+    locale,
+    permissions,
+    req
+  } = args;
+  const components = {};
+  const unsavedDraftWithValidations = undefined;
+  const isPreviewEnabled = collectionConfig?.admin?.preview || globalConfig?.admin?.preview;
+  const serverProps = {
+    id,
+    i18n: req.i18n,
+    locale,
+    payload: req.payload,
+    permissions,
+    server: req.server,
+    user: req.user
+  };
+  const BeforeDocumentControls = collectionConfig?.admin?.components?.edit?.beforeDocumentControls || globalConfig?.admin?.components?.edit?.beforeDocumentControls;
+  if (BeforeDocumentControls) {
+    components.BeforeDocumentControls = RenderServerComponent({
+      Component: BeforeDocumentControls,
+      importMap: req.payload.importMap,
+      serverProps: serverProps
+    });
+  }
+  const BeforeDocumentMeta = collectionConfig?.admin?.components?.edit?.BeforeDocumentMeta || globalConfig?.admin?.components?.edit?.BeforeDocumentMeta;
+  if (BeforeDocumentMeta) {
+    components.BeforeDocumentMeta = RenderServerComponent({
+      Component: BeforeDocumentMeta,
+      importMap: req.payload.importMap,
+      serverProps
+    });
+  }
+  const EditMenuItems = collectionConfig?.admin?.components?.edit?.editMenuItems;
+  if (EditMenuItems) {
+    components.EditMenuItems = RenderServerComponent({
+      Component: EditMenuItems,
+      importMap: req.payload.importMap,
+      serverProps: serverProps
+    });
+  }
+  const CustomPreviewButton = collectionConfig?.admin?.components?.edit?.PreviewButton || globalConfig?.admin?.components?.edit?.PreviewButton;
+  if (isPreviewEnabled && CustomPreviewButton) {
+    components.PreviewButton = RenderServerComponent({
+      Component: CustomPreviewButton,
+      importMap: req.payload.importMap,
+      serverProps: serverProps
+    });
+  }
+  const LivePreview = collectionConfig?.admin?.components?.views?.edit?.livePreview || globalConfig?.admin?.components?.views?.edit?.livePreview;
+  if (LivePreview?.Component) {
+    components.LivePreview = RenderServerComponent({
+      Component: LivePreview.Component,
+      importMap: req.payload.importMap,
+      serverProps
+    });
+  }
+  const descriptionFromConfig = collectionConfig?.admin?.description || globalConfig?.admin?.description;
+  const staticDescription = typeof descriptionFromConfig === 'function' ? descriptionFromConfig({
+    t: req.i18n.t
+  }) : descriptionFromConfig;
+  const CustomDescription = collectionConfig?.admin?.components?.Description || globalConfig?.admin?.components?.Description;
+  const hasDescription = CustomDescription || staticDescription;
+  if (hasDescription) {
+    components.Description = RenderServerComponent({
+      clientProps: {
+        collectionSlug: collectionConfig?.slug,
+        description: staticDescription
+      },
+      Component: CustomDescription,
+      Fallback: ViewDescription,
+      importMap: req.payload.importMap,
+      serverProps: serverProps
+    });
+  }
+  if (collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) {
+    const CustomStatus = collectionConfig?.admin?.components?.edit?.Status || globalConfig?.admin?.components?.edit?.Status;
+    if (CustomStatus) {
+      components.Status = RenderServerComponent({
+        Component: CustomStatus,
+        importMap: req.payload.importMap,
+        serverProps
+      });
+    }
+  }
+  if (hasSavePermission) {
+    if (hasDraftsEnabled(collectionConfig || globalConfig)) {
+      const CustomPublishButton = collectionConfig?.admin?.components?.edit?.PublishButton || globalConfig?.admin?.components?.edit?.PublishButton;
+      if (CustomPublishButton) {
+        components.PublishButton = RenderServerComponent({
+          Component: CustomPublishButton,
+          importMap: req.payload.importMap,
+          serverProps: serverProps
+        });
+      }
+      const CustomUnpublishButton = collectionConfig?.admin?.components?.edit?.UnpublishButton || globalConfig?.admin?.components?.edit?.UnpublishButton;
+      if (CustomUnpublishButton) {
+        components.UnpublishButton = RenderServerComponent({
+          Component: CustomUnpublishButton,
+          importMap: req.payload.importMap,
+          serverProps: serverProps
+        });
+      }
+      const CustomSaveDraftButton = collectionConfig?.admin?.components?.edit?.SaveDraftButton || globalConfig?.admin?.components?.edit?.SaveDraftButton;
+      const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig);
+      if ((draftsEnabled || unsavedDraftWithValidations) && CustomSaveDraftButton) {
+        components.SaveDraftButton = RenderServerComponent({
+          Component: CustomSaveDraftButton,
+          importMap: req.payload.importMap,
+          serverProps: serverProps
+        });
+      }
+    } else {
+      const CustomSaveButton = collectionConfig?.admin?.components?.edit?.SaveButton || globalConfig?.admin?.components?.edit?.SaveButton;
+      if (CustomSaveButton) {
+        components.SaveButton = RenderServerComponent({
+          Component: CustomSaveButton,
+          importMap: req.payload.importMap,
+          serverProps: serverProps
+        });
+      }
+    }
+  }
+  if (collectionConfig?.upload && collectionConfig?.admin?.components?.edit?.Upload) {
+    components.Upload = RenderServerComponent({
+      Component: collectionConfig.admin.components.edit.Upload,
+      importMap: req.payload.importMap,
+      serverProps
+    });
+  }
+  if (collectionConfig?.upload && collectionConfig.upload.admin?.components?.controls) {
+    components.UploadControls = RenderServerComponent({
+      Component: collectionConfig.upload.admin.components.controls,
+      importMap: req.payload.importMap,
+      serverProps
+    });
+  }
+  const filePreviewConfig = collectionConfig?.upload?.admin?.components?.filePreview;
+  if (collectionConfig?.upload && filePreviewConfig) {
+    const mimeType = doc?.mimeType ?? '';
+    let filePreviewComponent;
+    if (typeof filePreviewConfig === 'string' || typeof filePreviewConfig === 'object' && 'path' in filePreviewConfig) {
+      filePreviewComponent = filePreviewConfig;
+    } else {
+      filePreviewComponent = matchMimeType(filePreviewConfig, mimeType);
+    }
+    if (filePreviewComponent) {
+      components.UploadFilePreview = RenderServerComponent({
+        clientProps: {
+          filename: doc?.filename,
+          filesize: doc?.filesize,
+          fileSrc: doc?.url,
+          height: doc?.height,
+          mimeType,
+          width: doc?.width
+        },
+        Component: filePreviewComponent,
+        importMap: req.payload.importMap,
+        serverProps
+      });
+    }
+  }
+  return components;
+};
+export const renderDocumentSlotsHandler = async args => {
+  const {
+    id,
+    collectionSlug,
+    locale,
+    permissions,
+    req
+  } = args;
+  const collectionConfig = req.payload.collections[collectionSlug]?.config;
+  if (!collectionConfig) {
+    throw new Error(req.t('error:incorrectCollection'));
+  }
+  const {
+    hasSavePermission
+  } = await getDocumentPermissions({
+    id,
+    collectionConfig,
+    data: {},
+    req
+  });
+  let doc;
+  if (id && collectionConfig.upload) {
+    const result = await req.payload.findByID({
+      id,
+      collection: collectionSlug,
+      depth: 0,
+      overrideAccess: false,
+      req,
+      select: {
+        filename: true,
+        filesize: true,
+        height: true,
+        mimeType: true,
+        url: true,
+        width: true
+      }
+    });
+    doc = result;
+  }
+  return renderDocumentSlots({
+    id,
+    collectionConfig,
+    doc,
+    hasSavePermission,
+    locale,
+    permissions,
+    req
+  });
+};
+//# sourceMappingURL=renderDocumentSlots.js.map

package/dist/views/Document/renderDocumentSlots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderDocumentSlots.js","names":["hasDraftsEnabled","matchMimeType","RenderServerComponent","ViewDescription","getDocumentPermissions","renderDocumentSlots","args","id","collectionConfig","doc","globalConfig","hasSavePermission","locale","permissions","req","components","unsavedDraftWithValidations","undefined","isPreviewEnabled","admin","preview","serverProps","i18n","payload","server","user","BeforeDocumentControls","edit","beforeDocumentControls","Component","importMap","BeforeDocumentMeta","EditMenuItems","editMenuItems","CustomPreviewButton","PreviewButton","LivePreview","views","livePreview","descriptionFromConfig","description","staticDescription","t","CustomDescription","Description","hasDescription","clientProps","collectionSlug","slug","Fallback","versions","drafts","CustomStatus","Status","CustomPublishButton","PublishButton","CustomUnpublishButton","UnpublishButton","CustomSaveDraftButton","SaveDraftButton","draftsEnabled","CustomSaveButton","SaveButton","upload","Upload","controls","UploadControls","filePreviewConfig","filePreview","mimeType","filePreviewComponent","UploadFilePreview","filename","filesize","fileSrc","url","height","width","renderDocumentSlotsHandler","collections","config","Error","data","result","findByID","collection","depth","overrideAccess","select"],"sources":["../../../src/views/Document/renderDocumentSlots.tsx"],"sourcesContent":["import type {\n  BeforeDocumentControlsServerPropsOnly,\n  DocumentSlots,\n  EditMenuItemsServerPropsOnly,\n  Locale,\n  PayloadComponent,\n  PayloadRequest,\n  PreviewButtonServerPropsOnly,\n  PublishButtonServerPropsOnly,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n  SaveButtonServerPropsOnly,\n  SaveDraftButtonServerPropsOnly,\n  ServerFunction,\n  ServerProps,\n  StaticDescription,\n  UnpublishButtonServerPropsOnly,\n  UploadFilePreviewClientProps,\n  ViewDescriptionClientProps,\n  ViewDescriptionServerPropsOnly,\n} from 'payload'\n\nimport { hasDraftsEnabled, matchMimeType } from 'payload/shared'\n\nimport { RenderServerComponent } from '../../elements/RenderServerComponent/index.js'\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports/client bundle for proper client boundary in prod builds\nimport { ViewDescription } from '../../exports/client/index.js'\nimport { getDocumentPermissions } from '../../utilities/getDocumentPermissions.js'\n\nexport const renderDocumentSlots: (args: {\n  collectionConfig?: SanitizedCollectionConfig\n  doc?: Record<string, unknown>\n  globalConfig?: SanitizedGlobalConfig\n  hasSavePermission: boolean\n  id?: number | string\n  locale: Locale\n  permissions: SanitizedPermissions\n  req: PayloadRequest\n}) => DocumentSlots = (args) => {\n  const { id, collectionConfig, doc, globalConfig, hasSavePermission, locale, permissions, req } =\n    args\n\n  const components: DocumentSlots = {} as DocumentSlots\n\n  const unsavedDraftWithValidations = undefined\n\n  const isPreviewEnabled = collectionConfig?.admin?.preview || globalConfig?.admin?.preview\n\n  const serverProps: ServerProps = {\n    id,\n    i18n: req.i18n,\n    locale,\n    payload: req.payload,\n    permissions,\n    server: req.server,\n    user: req.user,\n    // TODO: Add remaining serverProps\n  }\n\n  const BeforeDocumentControls =\n    collectionConfig?.admin?.components?.edit?.beforeDocumentControls ||\n    globalConfig?.admin?.components?.edit?.beforeDocumentControls\n\n  if (BeforeDocumentControls) {\n    components.BeforeDocumentControls = RenderServerComponent({\n      Component: BeforeDocumentControls,\n      importMap: req.payload.importMap,\n      serverProps: serverProps satisfies BeforeDocumentControlsServerPropsOnly,\n    })\n  }\n\n  const BeforeDocumentMeta =\n    collectionConfig?.admin?.components?.edit?.BeforeDocumentMeta ||\n    globalConfig?.admin?.components?.edit?.BeforeDocumentMeta\n\n  if (BeforeDocumentMeta) {\n    components.BeforeDocumentMeta = RenderServerComponent({\n      Component: BeforeDocumentMeta,\n      importMap: req.payload.importMap,\n      serverProps,\n    })\n  }\n\n  const EditMenuItems = collectionConfig?.admin?.components?.edit?.editMenuItems\n\n  if (EditMenuItems) {\n    components.EditMenuItems = RenderServerComponent({\n      Component: EditMenuItems,\n      importMap: req.payload.importMap,\n      serverProps: serverProps satisfies EditMenuItemsServerPropsOnly,\n    })\n  }\n\n  const CustomPreviewButton =\n    collectionConfig?.admin?.components?.edit?.PreviewButton ||\n    globalConfig?.admin?.components?.edit?.PreviewButton\n\n  if (isPreviewEnabled && CustomPreviewButton) {\n    components.PreviewButton = RenderServerComponent({\n      Component: CustomPreviewButton,\n      importMap: req.payload.importMap,\n      serverProps: serverProps satisfies PreviewButtonServerPropsOnly,\n    })\n  }\n\n  const LivePreview =\n    collectionConfig?.admin?.components?.views?.edit?.livePreview ||\n    globalConfig?.admin?.components?.views?.edit?.livePreview\n\n  if (LivePreview?.Component) {\n    components.LivePreview = RenderServerComponent({\n      Component: LivePreview.Component,\n      importMap: req.payload.importMap,\n      serverProps,\n    })\n  }\n\n  const descriptionFromConfig =\n    collectionConfig?.admin?.description || globalConfig?.admin?.description\n\n  const staticDescription: StaticDescription =\n    typeof descriptionFromConfig === 'function'\n      ? descriptionFromConfig({ t: req.i18n.t })\n      : descriptionFromConfig\n\n  const CustomDescription =\n    collectionConfig?.admin?.components?.Description || globalConfig?.admin?.components?.Description\n\n  const hasDescription = CustomDescription || staticDescription\n\n  if (hasDescription) {\n    components.Description = RenderServerComponent({\n      clientProps: {\n        collectionSlug: collectionConfig?.slug,\n        description: staticDescription,\n      } satisfies ViewDescriptionClientProps,\n      Component: CustomDescription,\n      Fallback: ViewDescription,\n      importMap: req.payload.importMap,\n      serverProps: serverProps satisfies ViewDescriptionServerPropsOnly,\n    })\n  }\n\n  if (collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) {\n    const CustomStatus =\n      collectionConfig?.admin?.components?.edit?.Status ||\n      globalConfig?.admin?.components?.edit?.Status\n\n    if (CustomStatus) {\n      components.Status = RenderServerComponent({\n        Component: CustomStatus,\n        importMap: req.payload.importMap,\n        serverProps,\n      })\n    }\n  }\n\n  if (hasSavePermission) {\n    if (hasDraftsEnabled(collectionConfig || globalConfig)) {\n      const CustomPublishButton =\n        collectionConfig?.admin?.components?.edit?.PublishButton ||\n        globalConfig?.admin?.components?.edit?.PublishButton\n\n      if (CustomPublishButton) {\n        components.PublishButton = RenderServerComponent({\n          Component: CustomPublishButton,\n          importMap: req.payload.importMap,\n          serverProps: serverProps satisfies PublishButtonServerPropsOnly,\n        })\n      }\n\n      const CustomUnpublishButton =\n        collectionConfig?.admin?.components?.edit?.UnpublishButton ||\n        globalConfig?.admin?.components?.edit?.UnpublishButton\n\n      if (CustomUnpublishButton) {\n        components.UnpublishButton = RenderServerComponent({\n          Component: CustomUnpublishButton,\n          importMap: req.payload.importMap,\n          serverProps: serverProps satisfies UnpublishButtonServerPropsOnly,\n        })\n      }\n\n      const CustomSaveDraftButton =\n        collectionConfig?.admin?.components?.edit?.SaveDraftButton ||\n        globalConfig?.admin?.components?.edit?.SaveDraftButton\n\n      const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig)\n\n      if ((draftsEnabled || unsavedDraftWithValidations) && CustomSaveDraftButton) {\n        components.SaveDraftButton = RenderServerComponent({\n          Component: CustomSaveDraftButton,\n          importMap: req.payload.importMap,\n          serverProps: serverProps satisfies SaveDraftButtonServerPropsOnly,\n        })\n      }\n    } else {\n      const CustomSaveButton =\n        collectionConfig?.admin?.components?.edit?.SaveButton ||\n        globalConfig?.admin?.components?.edit?.SaveButton\n\n      if (CustomSaveButton) {\n        components.SaveButton = RenderServerComponent({\n          Component: CustomSaveButton,\n          importMap: req.payload.importMap,\n          serverProps: serverProps satisfies SaveButtonServerPropsOnly,\n        })\n      }\n    }\n  }\n\n  if (collectionConfig?.upload && collectionConfig?.admin?.components?.edit?.Upload) {\n    components.Upload = RenderServerComponent({\n      Component: collectionConfig.admin.components.edit.Upload,\n      importMap: req.payload.importMap,\n      serverProps,\n    })\n  }\n\n  if (collectionConfig?.upload && collectionConfig.upload.admin?.components?.controls) {\n    components.UploadControls = RenderServerComponent({\n      Component: collectionConfig.upload.admin.components.controls,\n      importMap: req.payload.importMap,\n      serverProps,\n    })\n  }\n\n  const filePreviewConfig = collectionConfig?.upload?.admin?.components?.filePreview\n  if (collectionConfig?.upload && filePreviewConfig) {\n    const mimeType = (doc?.mimeType as string) ?? ''\n    let filePreviewComponent: PayloadComponent | undefined\n\n    if (\n      typeof filePreviewConfig === 'string' ||\n      (typeof filePreviewConfig === 'object' && 'path' in filePreviewConfig)\n    ) {\n      filePreviewComponent = filePreviewConfig as PayloadComponent\n    } else {\n      filePreviewComponent = matchMimeType(\n        filePreviewConfig as Record<string, PayloadComponent>,\n        mimeType,\n      )\n    }\n\n    if (filePreviewComponent) {\n      components.UploadFilePreview = RenderServerComponent({\n        clientProps: {\n          filename: doc?.filename,\n          filesize: doc?.filesize,\n          fileSrc: doc?.url,\n          height: doc?.height,\n          mimeType,\n          width: doc?.width,\n        } as UploadFilePreviewClientProps,\n        Component: filePreviewComponent,\n        importMap: req.payload.importMap,\n        serverProps,\n      })\n    }\n  }\n\n  return components\n}\n\nexport const renderDocumentSlotsHandler: ServerFunction<{\n  collectionSlug: string\n  id?: number | string\n}> = async (args) => {\n  const { id, collectionSlug, locale, permissions, req } = args\n\n  const collectionConfig = req.payload.collections[collectionSlug]?.config\n\n  if (!collectionConfig) {\n    throw new Error(req.t('error:incorrectCollection'))\n  }\n\n  const { hasSavePermission } = await getDocumentPermissions({\n    id,\n    collectionConfig,\n    data: {},\n    req,\n  })\n\n  let doc: Record<string, unknown> | undefined\n  if (id && collectionConfig.upload) {\n    const result = await req.payload.findByID({\n      id,\n      collection: collectionSlug,\n      depth: 0,\n      overrideAccess: false,\n      req,\n      select: {\n        filename: true,\n        filesize: true,\n        height: true,\n        mimeType: true,\n        url: true,\n        width: true,\n      },\n    })\n    doc = result as Record<string, unknown>\n  }\n\n  return renderDocumentSlots({\n    id,\n    collectionConfig,\n    doc,\n    hasSavePermission,\n    locale,\n    permissions,\n    req,\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Edit/Auth/APIKey.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"APIKey.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/APIKey.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAiB3D,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CA6HvF,CAAA"}
+{"version":3,"file":"APIKey.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/APIKey.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAe3D,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CA8GvF,CAAA"}

package/dist/views/Edit/Auth/APIKey.js

@@ -5,12 +5,10 @@ import { getTranslation } from '@payloadcms/translations';
 import { text } from 'payload/shared';
 import React, { useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { Button } from '../../../elements/Button/index.js';
-import { CopyToClipboard } from '../../../elements/CopyToClipboard/index.js';
+import { APIKeyInput } from '../../../elements/APIKeyInput/index.js';
 import { GenerateConfirmation } from '../../../elements/GenerateConfirmation/index.js';
 import { useFormFields } from '../../../forms/Form/context.js';
 import { useField } from '../../../forms/useField/index.js';
-import { EyeIcon } from '../../../icons/Eye/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
@@ -23,7 +21,6 @@ export const APIKey = ({
 }) => {
   const [initialAPIKey] = useState(uuidv4());
   const [highlightedField, setHighlightedField] = useState(false);
-  const [showKey, setShowKey] = useState(false);
   const {
     i18n,
     t
@@ -67,15 +64,13 @@ export const APIKey = ({
     }
     return getTranslation(label, i18n);
   }, [apiKeyField, i18n]);
-  const APIKeyLabel = useMemo(() => /*#__PURE__*/_jsxs("label", {
+  const APIKeyLabel = useMemo(() => /*#__PURE__*/_jsx("label", {
     className: `${baseClass}__label field-label`,
     htmlFor: "apiKey",
-    children: [/*#__PURE__*/_jsx("span", {
+    children: /*#__PURE__*/_jsx("span", {
       children: apiKeyLabel
-    }), /*#__PURE__*/_jsx(CopyToClipboard, {
-      value: apiKeyValue
-    })]
-  }), [apiKeyLabel, apiKeyValue]);
+    })
+  }), [apiKeyLabel]);
   const fieldType = useField({
     path: 'apiKey',
     validate
@@ -113,27 +108,11 @@ export const APIKey = ({
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: [fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' '),
-      children: [APIKeyLabel, /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__input-wrap`,
-        children: [/*#__PURE__*/_jsx("input", {
-          "aria-label": apiKeyLabel,
-          className: highlightedField ? 'highlight' : undefined,
-          disabled: true,
-          id: "apiKey",
-          name: "apiKey",
-          type: showKey ? 'text' : 'password',
-          value: value || ''
-        }), /*#__PURE__*/_jsx("div", {
-          className: `${baseClass}__toggle-button-wrap`,
-          children: /*#__PURE__*/_jsx(Button, {
-            buttonStyle: "none",
-            className: `${baseClass}__toggle-button`,
-            icon: /*#__PURE__*/_jsx(EyeIcon, {
-              active: showKey
-            }),
-            onClick: () => setShowKey(prev => !prev)
-          })
-        })]
+      children: [APIKeyLabel, /*#__PURE__*/_jsx(APIKeyInput, {
+        "aria-label": apiKeyLabel,
+        highlighted: highlightedField,
+        id: "apiKey",
+        value: value
       })]
     }), !readOnly && /*#__PURE__*/_jsx(GenerateConfirmation, {
       highlightField: highlightField,

package/dist/views/Edit/Auth/APIKey.js.map

@@ -1 +1 @@
-{"version":3,"file":"APIKey.js","names":["getTranslation","text","React","useEffect","useMemo","useState","v4","uuidv4","Button","CopyToClipboard","GenerateConfirmation","useFormFields","useField","EyeIcon","useConfig","useDocumentInfo","useTranslation","path","baseClass","fieldBaseClass","APIKey","enabled","readOnly","initialAPIKey","highlightedField","setHighlightedField","showKey","setShowKey","i18n","t","config","getEntityConfig","collectionSlug","apiKey","fields","apiKeyField","find","field","name","validate","val","type","blockData","data","event","maxLength","minLength","preferences","req","payload","siblingData","apiKeyValue","value","apiKeyLabel","label","APIKeyLabel","_jsxs","className","htmlFor","_jsx","fieldType","highlightField","setTimeout","setValue","Fragment","filter","Boolean","join","undefined","disabled","id","buttonStyle","icon","active","onClick","prev","setKey"],"sources":["../../../../src/views/Edit/Auth/APIKey.tsx"],"sourcesContent":["'use client'\nimport type { PayloadRequest, TextFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { text } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { CopyToClipboard } from '../../../elements/CopyToClipboard/index.js'\nimport { GenerateConfirmation } from '../../../elements/GenerateConfirmation/index.js'\nimport { useFormFields } from '../../../forms/Form/context.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nconst path = 'apiKey'\nconst baseClass = 'api-key'\nconst fieldBaseClass = 'field-type'\n\nexport const APIKey: React.FC<{ readonly enabled: boolean; readonly readOnly?: boolean }> = ({\n  enabled,\n  readOnly,\n}) => {\n  const [initialAPIKey] = useState(uuidv4())\n  const [highlightedField, setHighlightedField] = useState(false)\n  const [showKey, setShowKey] = useState(false)\n  const { i18n, t } = useTranslation()\n  const { config, getEntityConfig } = useConfig()\n  const { collectionSlug } = useDocumentInfo()\n\n  const apiKey = useFormFields(([fields]) => (fields && fields[path]) || null)\n\n  const apiKeyField: TextFieldClient = getEntityConfig({ collectionSlug })?.fields?.find(\n    (field) => 'name' in field && field.name === 'apiKey',\n  ) as TextFieldClient\n\n  const validate = (val) =>\n    text(val, {\n      name: 'apiKey',\n      type: 'text',\n      blockData: {},\n      data: {},\n      event: 'onChange',\n      maxLength: 48,\n      minLength: 24,\n      path: ['apiKey'],\n      preferences: { fields: {} },\n      req: {\n        payload: {\n          config,\n        },\n        t,\n      } as unknown as PayloadRequest,\n      siblingData: {},\n    })\n\n  const apiKeyValue = apiKey?.value\n\n  const apiKeyLabel = useMemo(() => {\n    let label: Record<string, string> | string = 'API Key'\n\n    if (apiKeyField?.label) {\n      label = apiKeyField.label\n    }\n\n    return getTranslation(label, i18n)\n  }, [apiKeyField, i18n])\n\n  const APIKeyLabel = useMemo(\n    () => (\n      <label className={`${baseClass}__label field-label`} htmlFor=\"apiKey\">\n        <span>{apiKeyLabel}</span>\n        <CopyToClipboard value={apiKeyValue as string} />\n      </label>\n    ),\n    [apiKeyLabel, apiKeyValue],\n  )\n\n  const fieldType = useField({\n    path: 'apiKey',\n    validate,\n  })\n\n  const highlightField = () => {\n    if (highlightedField) {\n      setHighlightedField(false)\n    }\n    setTimeout(() => {\n      setHighlightedField(true)\n    }, 1)\n  }\n\n  const { setValue, value } = fieldType\n\n  useEffect(() => {\n    if (!apiKeyValue && enabled) {\n      setValue(initialAPIKey)\n    }\n    if (!enabled && apiKeyValue) {\n      setValue(null)\n    }\n  }, [apiKeyValue, enabled, setValue, initialAPIKey])\n\n  useEffect(() => {\n    if (highlightedField) {\n      setTimeout(() => {\n        setHighlightedField(false)\n      }, 10000)\n    }\n  }, [highlightedField])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>\n        {APIKeyLabel}\n        <div className={`${baseClass}__input-wrap`}>\n          <input\n            aria-label={apiKeyLabel}\n            className={highlightedField ? 'highlight' : undefined}\n            disabled\n            id=\"apiKey\"\n            name=\"apiKey\"\n            type={showKey ? 'text' : 'password'}\n            value={(value as string) || ''}\n          />\n          <div className={`${baseClass}__toggle-button-wrap`}>\n            <Button\n              buttonStyle=\"none\"\n              className={`${baseClass}__toggle-button`}\n              icon={<EyeIcon active={showKey} />}\n              onClick={() => setShowKey((prev) => !prev)}\n            />\n          </div>\n        </div>\n      </div>\n      {!readOnly && (\n        <GenerateConfirmation highlightField={highlightField} setKey={() => setValue(uuidv4())} />\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"APIKey.js","names":["getTranslation","text","React","useEffect","useMemo","useState","v4","uuidv4","APIKeyInput","GenerateConfirmation","useFormFields","useField","useConfig","useDocumentInfo","useTranslation","path","baseClass","fieldBaseClass","APIKey","enabled","readOnly","initialAPIKey","highlightedField","setHighlightedField","i18n","t","config","getEntityConfig","collectionSlug","apiKey","fields","apiKeyField","find","field","name","validate","val","type","blockData","data","event","maxLength","minLength","preferences","req","payload","siblingData","apiKeyValue","value","apiKeyLabel","label","APIKeyLabel","_jsx","className","htmlFor","fieldType","highlightField","setTimeout","setValue","_jsxs","Fragment","filter","Boolean","join","highlighted","id","setKey"],"sources":["../../../../src/views/Edit/Auth/APIKey.tsx"],"sourcesContent":["'use client'\nimport type { PayloadRequest, TextFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { text } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { APIKeyInput } from '../../../elements/APIKeyInput/index.js'\nimport { GenerateConfirmation } from '../../../elements/GenerateConfirmation/index.js'\nimport { useFormFields } from '../../../forms/Form/context.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nconst path = 'apiKey'\nconst baseClass = 'api-key'\nconst fieldBaseClass = 'field-type'\n\nexport const APIKey: React.FC<{ readonly enabled: boolean; readonly readOnly?: boolean }> = ({\n  enabled,\n  readOnly,\n}) => {\n  const [initialAPIKey] = useState(uuidv4())\n  const [highlightedField, setHighlightedField] = useState(false)\n  const { i18n, t } = useTranslation()\n  const { config, getEntityConfig } = useConfig()\n  const { collectionSlug } = useDocumentInfo()\n\n  const apiKey = useFormFields(([fields]) => (fields && fields[path]) || null)\n\n  const apiKeyField: TextFieldClient = getEntityConfig({ collectionSlug })?.fields?.find(\n    (field) => 'name' in field && field.name === 'apiKey',\n  ) as TextFieldClient\n\n  const validate = (val) =>\n    text(val, {\n      name: 'apiKey',\n      type: 'text',\n      blockData: {},\n      data: {},\n      event: 'onChange',\n      maxLength: 48,\n      minLength: 24,\n      path: ['apiKey'],\n      preferences: { fields: {} },\n      req: {\n        payload: {\n          config,\n        },\n        t,\n      } as unknown as PayloadRequest,\n      siblingData: {},\n    })\n\n  const apiKeyValue = apiKey?.value\n\n  const apiKeyLabel = useMemo(() => {\n    let label: Record<string, string> | string = 'API Key'\n\n    if (apiKeyField?.label) {\n      label = apiKeyField.label\n    }\n\n    return getTranslation(label, i18n)\n  }, [apiKeyField, i18n])\n\n  const APIKeyLabel = useMemo(\n    () => (\n      <label className={`${baseClass}__label field-label`} htmlFor=\"apiKey\">\n        <span>{apiKeyLabel}</span>\n      </label>\n    ),\n    [apiKeyLabel],\n  )\n\n  const fieldType = useField({\n    path: 'apiKey',\n    validate,\n  })\n\n  const highlightField = () => {\n    if (highlightedField) {\n      setHighlightedField(false)\n    }\n    setTimeout(() => {\n      setHighlightedField(true)\n    }, 1)\n  }\n\n  const { setValue, value } = fieldType\n\n  useEffect(() => {\n    if (!apiKeyValue && enabled) {\n      setValue(initialAPIKey)\n    }\n    if (!enabled && apiKeyValue) {\n      setValue(null)\n    }\n  }, [apiKeyValue, enabled, setValue, initialAPIKey])\n\n  useEffect(() => {\n    if (highlightedField) {\n      setTimeout(() => {\n        setHighlightedField(false)\n      }, 10000)\n    }\n  }, [highlightedField])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>\n        {APIKeyLabel}\n        <APIKeyInput\n          aria-label={apiKeyLabel}\n          highlighted={highlightedField}\n          id=\"apiKey\"\n          value={value as string}\n        />\n      </div>\n      {!readOnly && (\n        <GenerateConfirmation highlightField={highlightField} setKey={() => setValue(uuidv4())} />\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Edit/Auth/index.css

@@ -0,0 +1,71 @@
+@layer payload-default {
+  .auth-fields,
+  .auth-fields__body,
+  .auth-fields__api-key,
+  .auth-fields__changing-password {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+  }
+
+  .auth-fields {
+    margin-bottom: var(--spacer-3);
+  }
+
+  .auth-fields__card {
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg);
+    overflow: clip;
+  }
+
+  .auth-fields__header,
+  .auth-fields__controls {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacer-2));
+    flex-wrap: wrap;
+  }
+
+  .auth-fields__header {
+    justify-content: space-between;
+    padding: var(--spacer-2) var(--spacer-3);
+    background: var(--color-bg-secondary);
+    box-shadow: inset 0 calc(var(--stroke-width-small) * -1) 0 var(--color-border);
+  }
+
+  .auth-fields__title {
+    margin: 0;
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+  }
+
+  .auth-fields__body {
+    padding: var(--spacer-3);
+  }
+
+  .auth-fields__body > .field-type.checkbox {
+    min-height: var(--spacer-4);
+    justify-content: center;
+  }
+
+  .auth-fields__body > .field-type.checkbox label.field-label,
+  .auth-fields__api-key > .field-type.checkbox label.field-label {
+    font-weight: var(--text-body-medium-font-weight);
+  }
+
+  .auth-fields .btn {
+    margin: 0;
+  }
+
+  .auth-fields__controls .btn.btn--style-secondary {
+    background: transparent;
+  }
+
+  .auth-fields__api-key > .btn.btn--style-secondary {
+    align-self: flex-start;
+  }
+}

package/dist/views/Edit/Auth/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { Props } from './types.js';
-import './index.scss';
+import './index.css';
 export declare const Auth: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/views/Edit/Auth/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAGlF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAWvC,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuRhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAGlF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAWvC,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0ShC,CAAA"}