@payloadcms/next 4.0.0-internal.38b7f1d → 4.0.0-internal.c2b57ce

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

@@ -5,6 +5,7 @@ import { ConfirmPasswordField, EmailAndUsernameFields, Form, FormSubmit, Passwor
 import { abortAndIgnore, handleAbortRef } from '@payloadcms/ui/shared';
 import { formatAdminURL } from 'payload/shared';
 import React, { useEffect } from 'react';
+const baseClass = 'create-first-user__form';
 export const CreateFirstUserClient = ({
   docPermissions,
   docPreferences,
@@ -68,6 +69,7 @@ export const CreateFirstUserClient = ({
       apiRoute,
       path: `/${userSlug}/first-register`
     }),
+    className: baseClass,
     initialState: {
       ...initialState,
       'confirm-password': {
@@ -81,31 +83,36 @@ export const CreateFirstUserClient = ({
     onSuccess: handleFirstRegister,
     redirect: admin,
     validationOperation: "create",
-    children: [/*#__PURE__*/_jsx(EmailAndUsernameFields, {
-      className: "emailAndUsername",
-      loginWithUsername: loginWithUsername,
-      operation: "create",
-      readOnly: false,
-      t: t
-    }), /*#__PURE__*/_jsx(PasswordField, {
-      autoComplete: "off",
-      field: {
-        name: 'password',
-        label: t('authentication:newPassword'),
-        required: true
-      },
-      path: "password"
-    }), /*#__PURE__*/_jsx(ConfirmPasswordField, {}), /*#__PURE__*/_jsx(RenderFields, {
-      fields: collectionConfig.fields,
-      forceRender: true,
-      parentIndexPath: "",
-      parentPath: "",
-      parentSchemaPath: userSlug,
-      permissions: true,
-      readOnly: false
-    }), /*#__PURE__*/_jsx(FormSubmit, {
-      size: "large",
-      children: t('general:create')
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__inputWrap`,
+      children: [/*#__PURE__*/_jsx(EmailAndUsernameFields, {
+        loginWithUsername: loginWithUsername,
+        operation: "create",
+        readOnly: false,
+        t: t
+      }), /*#__PURE__*/_jsx(PasswordField, {
+        autoComplete: "off",
+        field: {
+          name: 'password',
+          label: t('authentication:newPassword'),
+          required: true
+        },
+        path: "password"
+      }), /*#__PURE__*/_jsx(ConfirmPasswordField, {}), /*#__PURE__*/_jsx(RenderFields, {
+        fields: collectionConfig.fields,
+        forceRender: true,
+        parentIndexPath: "",
+        parentPath: "",
+        parentSchemaPath: userSlug,
+        permissions: true,
+        readOnly: false
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__actions`,
+      children: /*#__PURE__*/_jsx(FormSubmit, {
+        size: "large",
+        children: t('authentication:createUser')
+      })
     })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","names":["ConfirmPasswordField","EmailAndUsernameFields","Form","FormSubmit","PasswordField","RenderFields","useAuth","useConfig","useServerFunctions","useTranslation","abortAndIgnore","handleAbortRef","formatAdminURL","React","useEffect","CreateFirstUserClient","docPermissions","docPreferences","initialState","loginWithUsername","userSlug","config","routes","admin","api","apiRoute","getEntityConfig","getFormState","t","setUser","abortOnChangeRef","useRef","collectionConfig","collectionSlug","onChange","useCallback","formState","prevFormState","submitted","controller","response","operation","schemaPath","signal","skipValidation","current","state","handleFirstRegister","data","abortOnChange","_jsxs","action","path","valid","value","method","onSuccess","redirect","validationOperation","_jsx","className","readOnly","autoComplete","field","name","label","required","fields","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","size"],"sources":["../../../src/views/CreateFirstUser/index.client.tsx"],"sourcesContent":["'use client'\nimport type { FormProps, UserWithToken } from '@payloadcms/ui'\nimport type {\n  DocumentPreferences,\n  FormState,\n  LoginWithUsernameOptions,\n  SanitizedDocumentPermissions,\n} from 'payload'\n\nimport {\n  ConfirmPasswordField,\n  EmailAndUsernameFields,\n  Form,\n  FormSubmit,\n  PasswordField,\n  RenderFields,\n  useAuth,\n  useConfig,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore, handleAbortRef } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nexport const CreateFirstUserClient: React.FC<{\n  docPermissions: SanitizedDocumentPermissions\n  docPreferences: DocumentPreferences\n  initialState: FormState\n  loginWithUsername?: false | LoginWithUsernameOptions\n  userSlug: string\n}> = ({ docPermissions, docPreferences, initialState, loginWithUsername, userSlug }) => {\n  const {\n    config: {\n      routes: { admin, api: apiRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const { getFormState } = useServerFunctions()\n\n  const { t } = useTranslation()\n  const { setUser } = useAuth()\n\n  const abortOnChangeRef = React.useRef<AbortController>(null)\n\n  const collectionConfig = getEntityConfig({ collectionSlug: userSlug })\n\n  const onChange: FormProps['onChange'][0] = React.useCallback(\n    async ({ formState: prevFormState, submitted }) => {\n      const controller = handleAbortRef(abortOnChangeRef)\n\n      const response = await getFormState({\n        collectionSlug: userSlug,\n        docPermissions,\n        docPreferences,\n        formState: prevFormState,\n        operation: 'create',\n        schemaPath: userSlug,\n        signal: controller.signal,\n        skipValidation: !submitted,\n      })\n\n      abortOnChangeRef.current = null\n\n      if (response && response.state) {\n        return response.state\n      }\n    },\n    [userSlug, getFormState, docPermissions, docPreferences],\n  )\n\n  const handleFirstRegister = (data: UserWithToken) => {\n    setUser(data)\n  }\n\n  useEffect(() => {\n    const abortOnChange = abortOnChangeRef.current\n\n    return () => {\n      abortAndIgnore(abortOnChange)\n    }\n  }, [])\n\n  return (\n    <Form\n      action={formatAdminURL({\n        apiRoute,\n        path: `/${userSlug}/first-register`,\n      })}\n      initialState={{\n        ...initialState,\n        'confirm-password': {\n          ...initialState['confirm-password'],\n          valid: initialState['confirm-password']['valid'] || false,\n          value: initialState['confirm-password']['value'] || '',\n        },\n      }}\n      method=\"POST\"\n      onChange={[onChange]}\n      onSuccess={handleFirstRegister}\n      redirect={admin}\n      validationOperation=\"create\"\n    >\n      <EmailAndUsernameFields\n        className=\"emailAndUsername\"\n        loginWithUsername={loginWithUsername}\n        operation=\"create\"\n        readOnly={false}\n        t={t}\n      />\n      <PasswordField\n        autoComplete=\"off\"\n        field={{\n          name: 'password',\n          label: t('authentication:newPassword'),\n          required: true,\n        }}\n        path=\"password\"\n      />\n      <ConfirmPasswordField />\n      <RenderFields\n        fields={collectionConfig.fields}\n        forceRender\n        parentIndexPath=\"\"\n        parentPath=\"\"\n        parentSchemaPath={userSlug}\n        permissions={true}\n        readOnly={false}\n      />\n      <FormSubmit size=\"large\">{t('general:create')}</FormSubmit>\n    </Form>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.client.js","names":["ConfirmPasswordField","EmailAndUsernameFields","Form","FormSubmit","PasswordField","RenderFields","useAuth","useConfig","useServerFunctions","useTranslation","abortAndIgnore","handleAbortRef","formatAdminURL","React","useEffect","baseClass","CreateFirstUserClient","docPermissions","docPreferences","initialState","loginWithUsername","userSlug","config","routes","admin","api","apiRoute","getEntityConfig","getFormState","t","setUser","abortOnChangeRef","useRef","collectionConfig","collectionSlug","onChange","useCallback","formState","prevFormState","submitted","controller","response","operation","schemaPath","signal","skipValidation","current","state","handleFirstRegister","data","abortOnChange","_jsxs","action","path","className","valid","value","method","onSuccess","redirect","validationOperation","_jsx","readOnly","autoComplete","field","name","label","required","fields","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","size"],"sources":["../../../src/views/CreateFirstUser/index.client.tsx"],"sourcesContent":["'use client'\nimport type { FormProps, UserWithToken } from '@payloadcms/ui'\nimport type {\n  DocumentPreferences,\n  FormState,\n  LoginWithUsernameOptions,\n  SanitizedDocumentPermissions,\n} from 'payload'\n\nimport {\n  ConfirmPasswordField,\n  EmailAndUsernameFields,\n  Form,\n  FormSubmit,\n  PasswordField,\n  RenderFields,\n  useAuth,\n  useConfig,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore, handleAbortRef } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nconst baseClass = 'create-first-user__form'\n\nexport const CreateFirstUserClient: React.FC<{\n  docPermissions: SanitizedDocumentPermissions\n  docPreferences: DocumentPreferences\n  initialState: FormState\n  loginWithUsername?: false | LoginWithUsernameOptions\n  userSlug: string\n}> = ({ docPermissions, docPreferences, initialState, loginWithUsername, userSlug }) => {\n  const {\n    config: {\n      routes: { admin, api: apiRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const { getFormState } = useServerFunctions()\n\n  const { t } = useTranslation()\n  const { setUser } = useAuth()\n\n  const abortOnChangeRef = React.useRef<AbortController>(null)\n\n  const collectionConfig = getEntityConfig({ collectionSlug: userSlug })\n\n  const onChange: FormProps['onChange'][0] = React.useCallback(\n    async ({ formState: prevFormState, submitted }) => {\n      const controller = handleAbortRef(abortOnChangeRef)\n\n      const response = await getFormState({\n        collectionSlug: userSlug,\n        docPermissions,\n        docPreferences,\n        formState: prevFormState,\n        operation: 'create',\n        schemaPath: userSlug,\n        signal: controller.signal,\n        skipValidation: !submitted,\n      })\n\n      abortOnChangeRef.current = null\n\n      if (response && response.state) {\n        return response.state\n      }\n    },\n    [userSlug, getFormState, docPermissions, docPreferences],\n  )\n\n  const handleFirstRegister = (data: UserWithToken) => {\n    setUser(data)\n  }\n\n  useEffect(() => {\n    const abortOnChange = abortOnChangeRef.current\n\n    return () => {\n      abortAndIgnore(abortOnChange)\n    }\n  }, [])\n\n  return (\n    <Form\n      action={formatAdminURL({\n        apiRoute,\n        path: `/${userSlug}/first-register`,\n      })}\n      className={baseClass}\n      initialState={{\n        ...initialState,\n        'confirm-password': {\n          ...initialState['confirm-password'],\n          valid: initialState['confirm-password']['valid'] || false,\n          value: initialState['confirm-password']['value'] || '',\n        },\n      }}\n      method=\"POST\"\n      onChange={[onChange]}\n      onSuccess={handleFirstRegister}\n      redirect={admin}\n      validationOperation=\"create\"\n    >\n      <div className={`${baseClass}__inputWrap`}>\n        <EmailAndUsernameFields\n          loginWithUsername={loginWithUsername}\n          operation=\"create\"\n          readOnly={false}\n          t={t}\n        />\n        <PasswordField\n          autoComplete=\"off\"\n          field={{\n            name: 'password',\n            label: t('authentication:newPassword'),\n            required: true,\n          }}\n          path=\"password\"\n        />\n        <ConfirmPasswordField />\n        <RenderFields\n          fields={collectionConfig.fields}\n          forceRender\n          parentIndexPath=\"\"\n          parentPath=\"\"\n          parentSchemaPath={userSlug}\n          permissions={true}\n          readOnly={false}\n        />\n      </div>\n      <div className={`${baseClass}__actions`}>\n        <FormSubmit size=\"large\">{t('authentication:createUser')}</FormSubmit>\n      </div>\n    </Form>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/CreateFirstUser/index.css

@@ -0,0 +1,69 @@
+@layer payload-default {
+  .create-first-user {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-5);
+    align-items: center;
+    width: 100%;
+  }
+
+  .create-first-user__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    align-items: center;
+    text-align: center;
+    width: 100%;
+  }
+
+  .create-first-user__header h1 {
+    margin: 0;
+    font-family: var(--text-heading-large-font-family);
+    font-size: var(--text-heading-large-font-size);
+    font-weight: var(--text-heading-large-font-weight);
+    line-height: var(--text-heading-large-line-height);
+    letter-spacing: var(--text-heading-large-letter-spacing);
+    color: var(--color-text);
+  }
+
+  .create-first-user__header p {
+    margin: 0;
+    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);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    color: var(--color-text-secondary);
+  }
+
+  .create-first-user__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-5);
+    width: 100%;
+  }
+
+  .create-first-user__form__inputWrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+  }
+
+  .create-first-user__form__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    align-items: center;
+    width: 100%;
+  }
+
+  .create-first-user__form__actions .form-submit {
+    width: 100%;
+  }
+
+  .create-first-user__form__actions .form-submit .btn {
+    width: 100%;
+    height: var(--spacer-4);
+    justify-content: center;
+  }
+}

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

@@ -1,5 +1,5 @@
 import type { AdminViewServerProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare function CreateFirstUserView({ initPageResult }: AdminViewServerProps): Promise<React.JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/CreateFirstUser/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAGrB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,wBAAsB,mBAAmB,CAAC,EAAE,cAAc,EAAE,EAAE,oBAAoB,8BA8EjF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/CreateFirstUser/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAGrB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAIpB,wBAAsB,mBAAmB,CAAC,EAAE,cAAc,EAAE,EAAE,oBAAoB,8BAgFjF"}

package/dist/views/CreateFirstUser/index.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { getDocPreferences } from '../Document/getDocPreferences.js';
 import { getDocumentData } from '../Document/getDocumentData.js';
 import { CreateFirstUserClient } from './index.client.js';
+const baseClass = 'create-first-user';
 export async function CreateFirstUserView({
   initPageResult
 }) {
@@ -71,11 +72,14 @@ export async function CreateFirstUserView({
     skipValidation: true
   });
   return /*#__PURE__*/_jsxs("div", {
-    className: "create-first-user",
-    children: [/*#__PURE__*/_jsx("h1", {
-      children: req.t('general:welcome')
-    }), /*#__PURE__*/_jsx("p", {
-      children: req.t('authentication:beginCreateFirstUser')
+    className: baseClass,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header`,
+      children: [/*#__PURE__*/_jsx("h1", {
+        children: req.t('general:welcome')
+      }), /*#__PURE__*/_jsx("p", {
+        children: req.t('authentication:beginCreateFirstUser')
+      })]
     }), /*#__PURE__*/_jsx(CreateFirstUserClient, {
       docPermissions: docPermissionsForForm,
       docPreferences: docPreferences,

package/dist/views/CreateFirstUser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["buildFormState","React","getDocPreferences","getDocumentData","CreateFirstUserClient","CreateFirstUserView","initPageResult","locale","req","payload","collections","config","admin","user","userSlug","collectionConfig","auth","authOptions","loginWithUsername","data","collectionSlug","slug","docPreferences","baseFields","Object","fromEntries","fields","filter","f","name","map","create","read","update","docPermissionsForForm","delete","readVersions","state","formState","docPermissions","code","operation","renderAllFields","schemaPath","skipClientConfigAuth","skipValidation","_jsxs","className","_jsx","t","initialState"],"sources":["../../../src/views/CreateFirstUser/index.tsx"],"sourcesContent":["import type {\n  AdminViewServerProps,\n  SanitizedDocumentPermissions,\n  SanitizedFieldsPermissions,\n} from 'payload'\n\nimport { buildFormState } from '@payloadcms/ui/utilities/buildFormState'\nimport React from 'react'\n\nimport { getDocPreferences } from '../Document/getDocPreferences.js'\nimport { getDocumentData } from '../Document/getDocumentData.js'\nimport { CreateFirstUserClient } from './index.client.js'\nimport './index.scss'\n\nexport async function CreateFirstUserView({ initPageResult }: AdminViewServerProps) {\n  const {\n    locale,\n    req,\n    req: {\n      payload: {\n        collections,\n        config: {\n          admin: { user: userSlug },\n        },\n      },\n    },\n  } = initPageResult\n\n  const collectionConfig = collections?.[userSlug]?.config\n  const { auth: authOptions } = collectionConfig\n  const loginWithUsername = authOptions.loginWithUsername\n\n  // Fetch the data required for the view\n  const data = await getDocumentData({\n    collectionSlug: collectionConfig.slug,\n    locale,\n    payload: req.payload,\n    req,\n    user: req.user,\n  })\n\n  // Get document preferences\n  const docPreferences = await getDocPreferences({\n    collectionSlug: collectionConfig.slug,\n    payload: req.payload,\n    user: req.user,\n  })\n\n  const baseFields: SanitizedFieldsPermissions = Object.fromEntries(\n    collectionConfig.fields\n      .filter((f): f is { name: string } & typeof f => 'name' in f && typeof f.name === 'string')\n      .map((f) => [f.name, { create: true, read: true, update: true }]),\n  )\n\n  // In create-first-user we should always allow all fields\n  const docPermissionsForForm: SanitizedDocumentPermissions = {\n    create: true,\n    delete: true,\n    fields: baseFields,\n    read: true,\n    readVersions: true,\n    update: true,\n  }\n\n  // Build initial form state from data\n  const { state: formState } = await buildFormState({\n    collectionSlug: collectionConfig.slug,\n    data,\n    docPermissions: docPermissionsForForm,\n    docPreferences,\n    locale: locale?.code,\n    operation: 'create',\n    renderAllFields: true,\n    req,\n    schemaPath: collectionConfig.slug,\n    skipClientConfigAuth: true,\n    skipValidation: true,\n  })\n\n  return (\n    <div className=\"create-first-user\">\n      <h1>{req.t('general:welcome')}</h1>\n      <p>{req.t('authentication:beginCreateFirstUser')}</p>\n      <CreateFirstUserClient\n        docPermissions={docPermissionsForForm}\n        docPreferences={docPreferences}\n        initialState={formState}\n        loginWithUsername={loginWithUsername}\n        userSlug={userSlug}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAMA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AAGtC,OAAO,eAAeC,oBAAoB;EAAEC;AAAc,CAAwB;EAChF,MAAM;IACJC,MAAM;IACNC,GAAG;IACHA,GAAA,EAAK;MACHC,OAAA,EAAS;QACPC,WAAW;QACXC,MAAA,EAAQ;UACNC,KAAA,EAAO;YAAEC,IAAA,EAAMC;UAAQ;QAAE;MAC1B;IACF;EACF,CACF,GAAGR,cAAA;EAEJ,MAAMS,gBAAA,GAAmBL,WAAA,GAAcI,QAAA,CAAS,EAAEH,MAAA;EAClD,MAAM;IAAEK,IAAA,EAAMC;EAAW,CAAE,GAAGF,gBAAA;EAC9B,MAAMG,iBAAA,GAAoBD,WAAA,CAAYC,iBAAiB;EAEvD;EACA,MAAMC,IAAA,GAAO,MAAMhB,eAAA,CAAgB;IACjCiB,cAAA,EAAgBL,gBAAA,CAAiBM,IAAI;IACrCd,MAAA;IACAE,OAAA,EAASD,GAAA,CAAIC,OAAO;IACpBD,GAAA;IACAK,IAAA,EAAML,GAAA,CAAIK;EACZ;EAEA;EACA,MAAMS,cAAA,GAAiB,MAAMpB,iBAAA,CAAkB;IAC7CkB,cAAA,EAAgBL,gBAAA,CAAiBM,IAAI;IACrCZ,OAAA,EAASD,GAAA,CAAIC,OAAO;IACpBI,IAAA,EAAML,GAAA,CAAIK;EACZ;EAEA,MAAMU,UAAA,GAAyCC,MAAA,CAAOC,WAAW,CAC/DV,gBAAA,CAAiBW,MAAM,CACpBC,MAAM,CAAEC,CAAA,IAAwC,UAAUA,CAAA,IAAK,OAAOA,CAAA,CAAEC,IAAI,KAAK,UACjFC,GAAG,CAAEF,CAAA,IAAM,CAACA,CAAA,CAAEC,IAAI,EAAE;IAAEE,MAAA,EAAQ;IAAMC,IAAA,EAAM;IAAMC,MAAA,EAAQ;EAAK,EAAE;EAGpE;EACA,MAAMC,qBAAA,GAAsD;IAC1DH,MAAA,EAAQ;IACRI,MAAA,EAAQ;IACRT,MAAA,EAAQH,UAAA;IACRS,IAAA,EAAM;IACNI,YAAA,EAAc;IACdH,MAAA,EAAQ;EACV;EAEA;EACA,MAAM;IAAEI,KAAA,EAAOC;EAAS,CAAE,GAAG,MAAMtC,cAAA,CAAe;IAChDoB,cAAA,EAAgBL,gBAAA,CAAiBM,IAAI;IACrCF,IAAA;IACAoB,cAAA,EAAgBL,qBAAA;IAChBZ,cAAA;IACAf,MAAA,EAAQA,MAAA,EAAQiC,IAAA;IAChBC,SAAA,EAAW;IACXC,eAAA,EAAiB;IACjBlC,GAAA;IACAmC,UAAA,EAAY5B,gBAAA,CAAiBM,IAAI;IACjCuB,oBAAA,EAAsB;IACtBC,cAAA,EAAgB;EAClB;EAEA,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAU;4BACbC,IAAA,CAAC;gBAAIxC,GAAA,CAAIyC,CAAC,CAAC;qBACXD,IAAA,CAAC;gBAAGxC,GAAA,CAAIyC,CAAC,CAAC;qBACVD,IAAA,CAAC5C,qBAAA;MACCmC,cAAA,EAAgBL,qBAAA;MAChBZ,cAAA,EAAgBA,cAAA;MAChB4B,YAAA,EAAcZ,SAAA;MACdpB,iBAAA,EAAmBA,iBAAA;MACnBJ,QAAA,EAAUA;;;AAIlB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["buildFormState","React","getDocPreferences","getDocumentData","CreateFirstUserClient","baseClass","CreateFirstUserView","initPageResult","locale","req","payload","collections","config","admin","user","userSlug","collectionConfig","auth","authOptions","loginWithUsername","data","collectionSlug","slug","docPreferences","baseFields","Object","fromEntries","fields","filter","f","name","map","create","read","update","docPermissionsForForm","delete","readVersions","state","formState","docPermissions","code","operation","renderAllFields","schemaPath","skipClientConfigAuth","skipValidation","_jsxs","className","_jsx","t","initialState"],"sources":["../../../src/views/CreateFirstUser/index.tsx"],"sourcesContent":["import type {\n  AdminViewServerProps,\n  SanitizedDocumentPermissions,\n  SanitizedFieldsPermissions,\n} from 'payload'\n\nimport { buildFormState } from '@payloadcms/ui/utilities/buildFormState'\nimport React from 'react'\n\nimport { getDocPreferences } from '../Document/getDocPreferences.js'\nimport { getDocumentData } from '../Document/getDocumentData.js'\nimport { CreateFirstUserClient } from './index.client.js'\nimport './index.css'\n\nconst baseClass = 'create-first-user'\n\nexport async function CreateFirstUserView({ initPageResult }: AdminViewServerProps) {\n  const {\n    locale,\n    req,\n    req: {\n      payload: {\n        collections,\n        config: {\n          admin: { user: userSlug },\n        },\n      },\n    },\n  } = initPageResult\n\n  const collectionConfig = collections?.[userSlug]?.config\n  const { auth: authOptions } = collectionConfig\n  const loginWithUsername = authOptions.loginWithUsername\n\n  // Fetch the data required for the view\n  const data = await getDocumentData({\n    collectionSlug: collectionConfig.slug,\n    locale,\n    payload: req.payload,\n    req,\n    user: req.user,\n  })\n\n  // Get document preferences\n  const docPreferences = await getDocPreferences({\n    collectionSlug: collectionConfig.slug,\n    payload: req.payload,\n    user: req.user,\n  })\n\n  const baseFields: SanitizedFieldsPermissions = Object.fromEntries(\n    collectionConfig.fields\n      .filter((f): f is { name: string } & typeof f => 'name' in f && typeof f.name === 'string')\n      .map((f) => [f.name, { create: true, read: true, update: true }]),\n  )\n\n  // In create-first-user we should always allow all fields\n  const docPermissionsForForm: SanitizedDocumentPermissions = {\n    create: true,\n    delete: true,\n    fields: baseFields,\n    read: true,\n    readVersions: true,\n    update: true,\n  }\n\n  // Build initial form state from data\n  const { state: formState } = await buildFormState({\n    collectionSlug: collectionConfig.slug,\n    data,\n    docPermissions: docPermissionsForForm,\n    docPreferences,\n    locale: locale?.code,\n    operation: 'create',\n    renderAllFields: true,\n    req,\n    schemaPath: collectionConfig.slug,\n    skipClientConfigAuth: true,\n    skipValidation: true,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h1>{req.t('general:welcome')}</h1>\n        <p>{req.t('authentication:beginCreateFirstUser')}</p>\n      </div>\n      <CreateFirstUserClient\n        docPermissions={docPermissionsForForm}\n        docPreferences={docPreferences}\n        initialState={formState}\n        loginWithUsername={loginWithUsername}\n        userSlug={userSlug}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAMA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AAGtC,MAAMC,SAAA,GAAY;AAElB,OAAO,eAAeC,oBAAoB;EAAEC;AAAc,CAAwB;EAChF,MAAM;IACJC,MAAM;IACNC,GAAG;IACHA,GAAA,EAAK;MACHC,OAAA,EAAS;QACPC,WAAW;QACXC,MAAA,EAAQ;UACNC,KAAA,EAAO;YAAEC,IAAA,EAAMC;UAAQ;QAAE;MAC1B;IACF;EACF,CACF,GAAGR,cAAA;EAEJ,MAAMS,gBAAA,GAAmBL,WAAA,GAAcI,QAAA,CAAS,EAAEH,MAAA;EAClD,MAAM;IAAEK,IAAA,EAAMC;EAAW,CAAE,GAAGF,gBAAA;EAC9B,MAAMG,iBAAA,GAAoBD,WAAA,CAAYC,iBAAiB;EAEvD;EACA,MAAMC,IAAA,GAAO,MAAMjB,eAAA,CAAgB;IACjCkB,cAAA,EAAgBL,gBAAA,CAAiBM,IAAI;IACrCd,MAAA;IACAE,OAAA,EAASD,GAAA,CAAIC,OAAO;IACpBD,GAAA;IACAK,IAAA,EAAML,GAAA,CAAIK;EACZ;EAEA;EACA,MAAMS,cAAA,GAAiB,MAAMrB,iBAAA,CAAkB;IAC7CmB,cAAA,EAAgBL,gBAAA,CAAiBM,IAAI;IACrCZ,OAAA,EAASD,GAAA,CAAIC,OAAO;IACpBI,IAAA,EAAML,GAAA,CAAIK;EACZ;EAEA,MAAMU,UAAA,GAAyCC,MAAA,CAAOC,WAAW,CAC/DV,gBAAA,CAAiBW,MAAM,CACpBC,MAAM,CAAEC,CAAA,IAAwC,UAAUA,CAAA,IAAK,OAAOA,CAAA,CAAEC,IAAI,KAAK,UACjFC,GAAG,CAAEF,CAAA,IAAM,CAACA,CAAA,CAAEC,IAAI,EAAE;IAAEE,MAAA,EAAQ;IAAMC,IAAA,EAAM;IAAMC,MAAA,EAAQ;EAAK,EAAE;EAGpE;EACA,MAAMC,qBAAA,GAAsD;IAC1DH,MAAA,EAAQ;IACRI,MAAA,EAAQ;IACRT,MAAA,EAAQH,UAAA;IACRS,IAAA,EAAM;IACNI,YAAA,EAAc;IACdH,MAAA,EAAQ;EACV;EAEA;EACA,MAAM;IAAEI,KAAA,EAAOC;EAAS,CAAE,GAAG,MAAMvC,cAAA,CAAe;IAChDqB,cAAA,EAAgBL,gBAAA,CAAiBM,IAAI;IACrCF,IAAA;IACAoB,cAAA,EAAgBL,qBAAA;IAChBZ,cAAA;IACAf,MAAA,EAAQA,MAAA,EAAQiC,IAAA;IAChBC,SAAA,EAAW;IACXC,eAAA,EAAiB;IACjBlC,GAAA;IACAmC,UAAA,EAAY5B,gBAAA,CAAiBM,IAAI;IACjCuB,oBAAA,EAAsB;IACtBC,cAAA,EAAgB;EAClB;EAEA,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAW3C,SAAA;4BACd0C,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAG3C,SAAA,UAAmB;8BACpC4C,IAAA,CAAC;kBAAIxC,GAAA,CAAIyC,CAAC,CAAC;uBACXD,IAAA,CAAC;kBAAGxC,GAAA,CAAIyC,CAAC,CAAC;;qBAEZD,IAAA,CAAC7C,qBAAA;MACCoC,cAAA,EAAgBL,qBAAA;MAChBZ,cAAA,EAAgBA,cAAA;MAChB4B,YAAA,EAAcZ,SAAA;MACdpB,iBAAA,EAAmBA,iBAAA;MACnBJ,QAAA,EAAUA;;;AAIlB","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/DashboardStepNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardStepNav.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAa3C,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,MAAM,EACN,SAAS,EACT,WAAW,EACX,UAAU,EACV,YAAY,EACZ,OAAO,GACR,EAAE;IACD,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAChC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/B,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1C,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,+BAoCA;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,+BAsDA"}
+{"version":3,"file":"DashboardStepNav.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAc3C,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,MAAM,EACN,SAAS,EACT,WAAW,EACX,UAAU,EACV,YAAY,EACZ,OAAO,GACR,EAAE;IACD,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAChC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/B,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1C,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,+BAoCA;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,+BAmEA"}

package/dist/views/Dashboard/Default/ModularDashboard/DashboardStepNav.js

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, DrawerToggler, ItemsDrawer, ReactSelect, useStepNav, useTranslation } from '@payloadcms/ui';
+import { Button, ChevronIcon, DrawerToggler, ItemsDrawer, Popup, PopupList, useStepNav, useTranslation } from '@payloadcms/ui';
 import { useEffect, useId } from 'react';
 export function DashboardStepNav(t0) {
   const $ = _c(15);
@@ -76,7 +76,7 @@ export function DashboardStepNav(t0) {
   return t3;
 }
 export function DashboardBreadcrumbDropdown(props) {
-  const $ = _c(12);
+  const $ = _c(14);
   const {
     isEditing,
     onCancel,
@@ -101,7 +101,7 @@ export function DashboardBreadcrumbDropdown(props) {
             className: "drawer-toggler--unstyled",
             slug: widgetsDrawerSlug,
             children: _jsx(Button, {
-              buttonStyle: "pill",
+              buttonStyle: "primary",
               el: "span",
               size: "medium",
               children: t("dashboard:addButton")
@@ -131,45 +131,26 @@ export function DashboardBreadcrumbDropdown(props) {
   }
   let t0;
   if ($[5] !== onEditClick || $[6] !== onResetLayout || $[7] !== t) {
-    const options = [{
-      label: t("dashboard:editDashboard"),
-      value: "edit"
-    }, {
-      label: t("dashboard:resetLayout"),
-      value: "reset"
-    }];
-    let t1;
-    if ($[9] !== onEditClick || $[10] !== onResetLayout) {
-      t1 = selectedOption => {
-        const option = Array.isArray(selectedOption) ? selectedOption[0] : selectedOption;
-        if (option?.value === "edit") {
-          onEditClick();
-        } else {
-          if (option?.value === "reset") {
+    t0 = t1 => {
+      const {
+        close
+      } = t1;
+      return _jsxs(PopupList.ButtonGroup, {
+        children: [_jsx(PopupList.Button, {
+          onClick: () => {
+            close();
+            onEditClick();
+          },
+          children: t("dashboard:editDashboard")
+        }), _jsx(PopupList.Button, {
+          onClick: () => {
+            close();
             onResetLayout();
-          }
-        }
-      };
-      $[9] = onEditClick;
-      $[10] = onResetLayout;
-      $[11] = t1;
-    } else {
-      t1 = $[11];
-    }
-    const handleChange = t1;
-    t0 = _jsx(ReactSelect, {
-      className: "dashboard-breadcrumb-select",
-      isClearable: false,
-      isSearchable: false,
-      menuIsOpen: undefined,
-      onChange: handleChange,
-      options,
-      placeholder: t("general:dashboard"),
-      value: {
-        label: t("general:dashboard"),
-        value: "dashboard"
-      }
-    });
+          },
+          children: t("dashboard:resetLayout")
+        })]
+      });
+    };
     $[5] = onEditClick;
     $[6] = onResetLayout;
     $[7] = t;
@@ -177,6 +158,52 @@ export function DashboardBreadcrumbDropdown(props) {
   } else {
     t0 = $[8];
   }
-  return t0;
+  let t1;
+  if ($[9] !== t) {
+    t1 = t2 => {
+      const {
+        active: _active,
+        onClick,
+        onKeyDown,
+        ...ariaProps
+      } = t2;
+      return _jsx(Button, {
+        "aria-label": t("general:dashboard"),
+        buttonStyle: "ghost",
+        extraButtonProps: {
+          onKeyDown
+        },
+        onClick,
+        ...ariaProps,
+        children: _jsxs("span", {
+          className: "dashboard-breadcrumb-dropdown__label",
+          children: [t("general:dashboard"), _jsx(ChevronIcon, {
+            direction: "down",
+            size: 16
+          })]
+        })
+      });
+    };
+    $[9] = t;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  let t2;
+  if ($[11] !== t0 || $[12] !== t1) {
+    t2 = _jsx(Popup, {
+      className: "dashboard-breadcrumb-dropdown",
+      horizontalAlign: "left",
+      render: t0,
+      renderButton: t1,
+      size: "large"
+    });
+    $[11] = t0;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
 }
 //# sourceMappingURL=DashboardStepNav.js.map

package/dist/views/Dashboard/Default/ModularDashboard/DashboardStepNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardStepNav.js","names":["c","_c","Button","DrawerToggler","ItemsDrawer","ReactSelect","useStepNav","useTranslation","useEffect","useId","DashboardStepNav","t0","$","addWidget","cancel","isEditing","resetLayout","saveLayout","setIsEditing","widgets","t","setStepNav","uuid","drawerSlug","t1","t2","label","_jsx","DashboardBreadcrumbDropdown","onCancel","onEditClick","onResetLayout","onSaveChanges","widgetsDrawerSlug","t3","_Fragment","children","items","onItemClick","widget","slug","searchPlaceholder","title","props","_jsxs","className","buttonStyle","el","size","onClick","options","value","selectedOption","option","Array","isArray","handleChange","isClearable","isSearchable","menuIsOpen","undefined","onChange","placeholder"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx"],"sourcesContent":["'use client'\nimport type { ClientWidget } from 'payload'\n\nimport {\n  Button,\n  DrawerToggler,\n  ItemsDrawer,\n  type ReactSelectOption as Option,\n  ReactSelect,\n  useStepNav,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { useEffect, useId } from 'react'\n\nexport function DashboardStepNav({\n  addWidget,\n  cancel,\n  isEditing,\n  resetLayout,\n  saveLayout,\n  setIsEditing,\n  widgets,\n}: {\n  addWidget: (slug: string) => void\n  cancel: () => void\n  isEditing: boolean\n  resetLayout: () => Promise<void>\n  saveLayout: () => Promise<void>\n  setIsEditing: (isEditing: boolean) => void\n  widgets: ClientWidget[]\n}) {\n  const { t } = useTranslation()\n  const { setStepNav } = useStepNav()\n  const uuid = useId()\n  const drawerSlug = `widgets-drawer-${uuid}`\n\n  useEffect(() => {\n    setStepNav([\n      {\n        label: (\n          <DashboardBreadcrumbDropdown\n            isEditing={isEditing}\n            onCancel={cancel}\n            onEditClick={() => setIsEditing(true)}\n            onResetLayout={resetLayout}\n            onSaveChanges={saveLayout}\n            widgetsDrawerSlug={drawerSlug}\n          />\n        ),\n      },\n    ])\n  }, [isEditing, drawerSlug, cancel, resetLayout, saveLayout, setIsEditing, setStepNav])\n\n  return (\n    <>\n      {isEditing && (\n        <ItemsDrawer\n          drawerSlug={drawerSlug}\n          items={widgets}\n          onItemClick={(widget) => addWidget(widget.slug)}\n          searchPlaceholder={t('dashboard:searchWidgets')}\n          title={t('dashboard:addWidget')}\n        />\n      )}\n    </>\n  )\n}\n\nexport function DashboardBreadcrumbDropdown(props: {\n  isEditing: boolean\n  onCancel: () => void\n  onEditClick: () => void\n  onResetLayout: () => void\n  onSaveChanges: () => void\n  widgetsDrawerSlug: string\n}) {\n  const { isEditing, onCancel, onEditClick, onResetLayout, onSaveChanges, widgetsDrawerSlug } =\n    props\n  const { t } = useTranslation()\n\n  if (isEditing) {\n    return (\n      <div className=\"dashboard-breadcrumb-dropdown__editing\">\n        <span>{t('dashboard:editingDashboard')}</span>\n        <div className=\"dashboard-breadcrumb-dropdown__actions\">\n          <DrawerToggler className=\"drawer-toggler--unstyled\" slug={widgetsDrawerSlug}>\n            <Button buttonStyle=\"pill\" el=\"span\" size=\"medium\">\n              {t('dashboard:addButton')}\n            </Button>\n          </DrawerToggler>\n          <Button buttonStyle=\"pill\" onClick={onSaveChanges} size=\"medium\">\n            {t('fields:saveChanges')}\n          </Button>\n          <Button buttonStyle=\"pill\" onClick={onCancel} size=\"medium\">\n            {t('general:cancel')}\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  const options = [\n    { label: t('dashboard:editDashboard'), value: 'edit' },\n    { label: t('dashboard:resetLayout'), value: 'reset' },\n  ]\n\n  const handleChange = (selectedOption: Option | Option[]) => {\n    // Since isMulti is false, we expect a single Option\n    const option = Array.isArray(selectedOption) ? selectedOption[0] : selectedOption\n\n    if (option?.value === 'edit') {\n      onEditClick()\n    } else if (option?.value === 'reset') {\n      onResetLayout()\n    }\n  }\n\n  return (\n    <ReactSelect\n      className=\"dashboard-breadcrumb-select\"\n      isClearable={false}\n      isSearchable={false}\n      menuIsOpen={undefined} // Let ReactSelect handle open/close\n      onChange={handleChange}\n      options={options}\n      placeholder={t('general:dashboard')}\n      value={{ label: t('general:dashboard'), value: 'dashboard' }}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DashboardStepNav.js","names":["c","_c","Button","ChevronIcon","DrawerToggler","ItemsDrawer","Popup","PopupList","useStepNav","useTranslation","useEffect","useId","DashboardStepNav","t0","$","addWidget","cancel","isEditing","resetLayout","saveLayout","setIsEditing","widgets","t","setStepNav","uuid","drawerSlug","t1","t2","label","_jsx","DashboardBreadcrumbDropdown","onCancel","onEditClick","onResetLayout","onSaveChanges","widgetsDrawerSlug","t3","_Fragment","children","items","onItemClick","widget","slug","searchPlaceholder","title","props","_jsxs","className","buttonStyle","el","size","onClick","close","ButtonGroup","active","_active","onKeyDown","ariaProps","extraButtonProps","direction","horizontalAlign","render"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx"],"sourcesContent":["'use client'\nimport type { ClientWidget } from 'payload'\n\nimport {\n  Button,\n  ChevronIcon,\n  DrawerToggler,\n  ItemsDrawer,\n  Popup,\n  PopupList,\n  useStepNav,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { useEffect, useId } from 'react'\n\nexport function DashboardStepNav({\n  addWidget,\n  cancel,\n  isEditing,\n  resetLayout,\n  saveLayout,\n  setIsEditing,\n  widgets,\n}: {\n  addWidget: (slug: string) => void\n  cancel: () => void\n  isEditing: boolean\n  resetLayout: () => Promise<void>\n  saveLayout: () => Promise<void>\n  setIsEditing: (isEditing: boolean) => void\n  widgets: ClientWidget[]\n}) {\n  const { t } = useTranslation()\n  const { setStepNav } = useStepNav()\n  const uuid = useId()\n  const drawerSlug = `widgets-drawer-${uuid}`\n\n  useEffect(() => {\n    setStepNav([\n      {\n        label: (\n          <DashboardBreadcrumbDropdown\n            isEditing={isEditing}\n            onCancel={cancel}\n            onEditClick={() => setIsEditing(true)}\n            onResetLayout={resetLayout}\n            onSaveChanges={saveLayout}\n            widgetsDrawerSlug={drawerSlug}\n          />\n        ),\n      },\n    ])\n  }, [isEditing, drawerSlug, cancel, resetLayout, saveLayout, setIsEditing, setStepNav])\n\n  return (\n    <>\n      {isEditing && (\n        <ItemsDrawer\n          drawerSlug={drawerSlug}\n          items={widgets}\n          onItemClick={(widget) => addWidget(widget.slug)}\n          searchPlaceholder={t('dashboard:searchWidgets')}\n          title={t('dashboard:addWidget')}\n        />\n      )}\n    </>\n  )\n}\n\nexport function DashboardBreadcrumbDropdown(props: {\n  isEditing: boolean\n  onCancel: () => void\n  onEditClick: () => void\n  onResetLayout: () => void\n  onSaveChanges: () => void\n  widgetsDrawerSlug: string\n}) {\n  const { isEditing, onCancel, onEditClick, onResetLayout, onSaveChanges, widgetsDrawerSlug } =\n    props\n  const { t } = useTranslation()\n\n  if (isEditing) {\n    return (\n      <div className=\"dashboard-breadcrumb-dropdown__editing\">\n        <span>{t('dashboard:editingDashboard')}</span>\n        <div className=\"dashboard-breadcrumb-dropdown__actions\">\n          <DrawerToggler className=\"drawer-toggler--unstyled\" slug={widgetsDrawerSlug}>\n            <Button buttonStyle=\"primary\" el=\"span\" size=\"medium\">\n              {t('dashboard:addButton')}\n            </Button>\n          </DrawerToggler>\n          <Button buttonStyle=\"pill\" onClick={onSaveChanges} size=\"medium\">\n            {t('fields:saveChanges')}\n          </Button>\n          <Button buttonStyle=\"pill\" onClick={onCancel} size=\"medium\">\n            {t('general:cancel')}\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <Popup\n      className=\"dashboard-breadcrumb-dropdown\"\n      horizontalAlign=\"left\"\n      render={({ close }) => (\n        <PopupList.ButtonGroup>\n          <PopupList.Button\n            onClick={() => {\n              close()\n              onEditClick()\n            }}\n          >\n            {t('dashboard:editDashboard')}\n          </PopupList.Button>\n          <PopupList.Button\n            onClick={() => {\n              close()\n              onResetLayout()\n            }}\n          >\n            {t('dashboard:resetLayout')}\n          </PopupList.Button>\n        </PopupList.ButtonGroup>\n      )}\n      renderButton={({ active: _active, onClick, onKeyDown, ...ariaProps }) => (\n        <Button\n          aria-label={t('general:dashboard')}\n          buttonStyle=\"ghost\"\n          extraButtonProps={{ onKeyDown }}\n          onClick={onClick}\n          {...ariaProps}\n        >\n          <span className=\"dashboard-breadcrumb-dropdown__label\">\n            {t('general:dashboard')}\n            <ChevronIcon direction=\"down\" size={16} />\n          </span>\n        </Button>\n      )}\n      size=\"large\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetConfigDrawer.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,SAAS,CAAA;AAetD,OAAO,KAA4D,MAAM,OAAO,CAAA;AAKhF,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/C,MAAM,EAAE,YAAY,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACrC,CAAA;AAMD,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,MAAM,EACN,MAAM,EACN,UAAU,GACX,EAAE,uBAAuB,qBAwHzB"}
+{"version":3,"file":"WidgetConfigDrawer.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,SAAS,CAAA;AAgBtD,OAAO,KAA4D,MAAM,OAAO,CAAA;AAKhF,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/C,MAAM,EAAE,YAAY,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACrC,CAAA;AAMD,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,MAAM,EACN,MAAM,EACN,UAAU,GACX,EAAE,uBAAuB,qBA0HzB"}

package/dist/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Drawer, Form, FormSubmit, OperationProvider, RenderFields, ShimmerEffect, useLocale, useModal, useServerFunctions, useTranslation } from '@payloadcms/ui';
+import { Drawer, DrawerContentContainer, Form, FormSubmit, OperationProvider, RenderFields, ShimmerEffect, useLocale, useModal, useServerFunctions, useTranslation } from '@payloadcms/ui';
 import { abortAndIgnore } from '@payloadcms/ui/shared';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { v4 as uuid } from 'uuid';
@@ -99,28 +99,31 @@ export function WidgetConfigDrawer({
     title: `${t('general:edit')} ${widgetLabel}`,
     children: initialState === false ? /*#__PURE__*/_jsx(ShimmerEffect, {
       height: "250px"
-    }) : /*#__PURE__*/_jsx(OperationProvider, {
-      operation: "update",
-      children: /*#__PURE__*/_jsxs(Form, {
-        fields: fields,
-        initialState: initialState,
-        onChange: [onChange],
-        onSubmit: (_, data) => {
-          onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields));
-          closeModal(drawerSlug);
-        },
-        uuid: formUUID,
-        children: [/*#__PURE__*/_jsx(RenderFields, {
+    }) : /*#__PURE__*/_jsx(DrawerContentContainer, {
+      className: "widget-config-drawer__content",
+      children: /*#__PURE__*/_jsx(OperationProvider, {
+        operation: "update",
+        children: /*#__PURE__*/_jsxs(Form, {
           fields: fields,
-          forceRender: true,
-          parentIndexPath: "",
-          parentPath: "",
-          parentSchemaPath: widget.slug,
-          permissions: true,
-          readOnly: false
-        }), /*#__PURE__*/_jsx(FormSubmit, {
-          children: t('fields:saveChanges')
-        })]
+          initialState: initialState,
+          onChange: [onChange],
+          onSubmit: (_, data) => {
+            onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields));
+            closeModal(drawerSlug);
+          },
+          uuid: formUUID,
+          children: [/*#__PURE__*/_jsx(RenderFields, {
+            fields: fields,
+            forceRender: true,
+            parentIndexPath: "",
+            parentPath: "",
+            parentSchemaPath: widget.slug,
+            permissions: true,
+            readOnly: false
+          }), /*#__PURE__*/_jsx(FormSubmit, {
+            children: t('fields:saveChanges')
+          })]
+        })
       })
     })
   });

package/dist/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetConfigDrawer.js","names":["Drawer","Form","FormSubmit","OperationProvider","RenderFields","ShimmerEffect","useLocale","useModal","useServerFunctions","useTranslation","abortAndIgnore","React","useCallback","useEffect","useMemo","useRef","useState","v4","uuid","extractLocaleData","mergeLocaleData","EMPTY_WIDGET_PREFERENCES","fields","WidgetConfigDrawer","drawerSlug","onSave","widget","widgetData","closeModal","modalState","getFormState","t","locale","localeCode","code","onChangeAbortControllerRef","initialState","setInitialState","isOpen","Boolean","formUUID","widgetLabel","label","slug","length","controller","AbortController","loadInitialState","localeFilteredData","state","data","docPermissions","docPreferences","operation","renderAllFields","schemaPath","signal","widgetSlug","onChange","formState","prevFormState","current","_jsx","title","height","_jsxs","onSubmit","_","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientWidget, FormState } from 'payload'\n\nimport {\n  Drawer,\n  Form,\n  FormSubmit,\n  OperationProvider,\n  RenderFields,\n  ShimmerEffect,\n  useLocale,\n  useModal,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport { extractLocaleData, mergeLocaleData } from './utils/localeUtils.js'\n\ntype WidgetConfigDrawerProps = {\n  drawerSlug: string\n  onSave: (data: Record<string, unknown>) => void\n  widget: ClientWidget\n  widgetData?: Record<string, unknown>\n}\n\nconst EMPTY_WIDGET_PREFERENCES = {\n  fields: {},\n}\n\nexport function WidgetConfigDrawer({\n  drawerSlug,\n  onSave,\n  widget,\n  widgetData,\n}: WidgetConfigDrawerProps) {\n  const { closeModal, modalState } = useModal()\n  const { getFormState } = useServerFunctions()\n  const { t } = useTranslation()\n  const locale = useLocale()\n  const localeCode = locale?.code ?? 'en'\n  const onChangeAbortControllerRef = useRef<AbortController>(null)\n\n  const [initialState, setInitialState] = useState<false | FormState | undefined>(false)\n\n  const isOpen = Boolean(modalState?.[drawerSlug]?.isOpen)\n  const formUUID = useMemo(() => uuid(), [])\n  const widgetLabel = useMemo(\n    () => (typeof widget.label === 'string' ? widget.label : widget.slug),\n    [widget.label, widget.slug],\n  )\n  const fields = useMemo(() => widget.fields ?? [], [widget.fields])\n\n  useEffect(() => {\n    if (!isOpen || fields.length === 0) {\n      setInitialState(false)\n      return\n    }\n\n    const controller = new AbortController()\n\n    const loadInitialState = async () => {\n      const localeFilteredData = extractLocaleData(widgetData ?? {}, localeCode, fields)\n\n      const { state } = await getFormState({\n        data: localeFilteredData,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: EMPTY_WIDGET_PREFERENCES,\n        locale: localeCode,\n        operation: 'update',\n        renderAllFields: true,\n        schemaPath: widget.slug,\n        signal: controller.signal,\n        widgetSlug: widget.slug,\n      })\n\n      if (state) {\n        setInitialState(state)\n      }\n    }\n\n    void loadInitialState()\n\n    return () => {\n      abortAndIgnore(controller)\n    }\n  }, [fields, getFormState, isOpen, localeCode, widget.slug, widgetData])\n\n  const onChange = useCallback(\n    async ({ formState: prevFormState }: { formState: FormState }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state } = await getFormState({\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: EMPTY_WIDGET_PREFERENCES,\n        formState: prevFormState,\n        operation: 'update',\n        schemaPath: widget.slug,\n        signal: controller.signal,\n        widgetSlug: widget.slug,\n      })\n\n      if (!state) {\n        return prevFormState\n      }\n\n      return state\n    },\n    [getFormState, widget.slug],\n  )\n\n  useEffect(() => {\n    return () => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [])\n\n  return (\n    <Drawer slug={drawerSlug} title={`${t('general:edit')} ${widgetLabel}`}>\n      {initialState === false ? (\n        <ShimmerEffect height=\"250px\" />\n      ) : (\n        <OperationProvider operation=\"update\">\n          <Form\n            fields={fields}\n            initialState={initialState}\n            onChange={[onChange]}\n            onSubmit={(_, data) => {\n              onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields))\n              closeModal(drawerSlug)\n            }}\n            uuid={formUUID}\n          >\n            <RenderFields\n              fields={fields}\n              forceRender\n              parentIndexPath=\"\"\n              parentPath=\"\"\n              parentSchemaPath={widget.slug}\n              permissions={true}\n              readOnly={false}\n            />\n            <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n          </Form>\n        </OperationProvider>\n      )}\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"WidgetConfigDrawer.js","names":["Drawer","DrawerContentContainer","Form","FormSubmit","OperationProvider","RenderFields","ShimmerEffect","useLocale","useModal","useServerFunctions","useTranslation","abortAndIgnore","React","useCallback","useEffect","useMemo","useRef","useState","v4","uuid","extractLocaleData","mergeLocaleData","EMPTY_WIDGET_PREFERENCES","fields","WidgetConfigDrawer","drawerSlug","onSave","widget","widgetData","closeModal","modalState","getFormState","t","locale","localeCode","code","onChangeAbortControllerRef","initialState","setInitialState","isOpen","Boolean","formUUID","widgetLabel","label","slug","length","controller","AbortController","loadInitialState","localeFilteredData","state","data","docPermissions","docPreferences","operation","renderAllFields","schemaPath","signal","widgetSlug","onChange","formState","prevFormState","current","_jsx","title","height","className","_jsxs","onSubmit","_","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientWidget, FormState } from 'payload'\n\nimport {\n  Drawer,\n  DrawerContentContainer,\n  Form,\n  FormSubmit,\n  OperationProvider,\n  RenderFields,\n  ShimmerEffect,\n  useLocale,\n  useModal,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport { extractLocaleData, mergeLocaleData } from './utils/localeUtils.js'\n\ntype WidgetConfigDrawerProps = {\n  drawerSlug: string\n  onSave: (data: Record<string, unknown>) => void\n  widget: ClientWidget\n  widgetData?: Record<string, unknown>\n}\n\nconst EMPTY_WIDGET_PREFERENCES = {\n  fields: {},\n}\n\nexport function WidgetConfigDrawer({\n  drawerSlug,\n  onSave,\n  widget,\n  widgetData,\n}: WidgetConfigDrawerProps) {\n  const { closeModal, modalState } = useModal()\n  const { getFormState } = useServerFunctions()\n  const { t } = useTranslation()\n  const locale = useLocale()\n  const localeCode = locale?.code ?? 'en'\n  const onChangeAbortControllerRef = useRef<AbortController>(null)\n\n  const [initialState, setInitialState] = useState<false | FormState | undefined>(false)\n\n  const isOpen = Boolean(modalState?.[drawerSlug]?.isOpen)\n  const formUUID = useMemo(() => uuid(), [])\n  const widgetLabel = useMemo(\n    () => (typeof widget.label === 'string' ? widget.label : widget.slug),\n    [widget.label, widget.slug],\n  )\n  const fields = useMemo(() => widget.fields ?? [], [widget.fields])\n\n  useEffect(() => {\n    if (!isOpen || fields.length === 0) {\n      setInitialState(false)\n      return\n    }\n\n    const controller = new AbortController()\n\n    const loadInitialState = async () => {\n      const localeFilteredData = extractLocaleData(widgetData ?? {}, localeCode, fields)\n\n      const { state } = await getFormState({\n        data: localeFilteredData,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: EMPTY_WIDGET_PREFERENCES,\n        locale: localeCode,\n        operation: 'update',\n        renderAllFields: true,\n        schemaPath: widget.slug,\n        signal: controller.signal,\n        widgetSlug: widget.slug,\n      })\n\n      if (state) {\n        setInitialState(state)\n      }\n    }\n\n    void loadInitialState()\n\n    return () => {\n      abortAndIgnore(controller)\n    }\n  }, [fields, getFormState, isOpen, localeCode, widget.slug, widgetData])\n\n  const onChange = useCallback(\n    async ({ formState: prevFormState }: { formState: FormState }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state } = await getFormState({\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: EMPTY_WIDGET_PREFERENCES,\n        formState: prevFormState,\n        operation: 'update',\n        schemaPath: widget.slug,\n        signal: controller.signal,\n        widgetSlug: widget.slug,\n      })\n\n      if (!state) {\n        return prevFormState\n      }\n\n      return state\n    },\n    [getFormState, widget.slug],\n  )\n\n  useEffect(() => {\n    return () => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [])\n\n  return (\n    <Drawer slug={drawerSlug} title={`${t('general:edit')} ${widgetLabel}`}>\n      {initialState === false ? (\n        <ShimmerEffect height=\"250px\" />\n      ) : (\n        <DrawerContentContainer className=\"widget-config-drawer__content\">\n          <OperationProvider operation=\"update\">\n            <Form\n              fields={fields}\n              initialState={initialState}\n              onChange={[onChange]}\n              onSubmit={(_, data) => {\n                onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields))\n                closeModal(drawerSlug)\n              }}\n              uuid={formUUID}\n            >\n              <RenderFields\n                fields={fields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\"\n                parentSchemaPath={widget.slug}\n                permissions={true}\n                readOnly={false}\n              />\n              <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n            </Form>\n          </OperationProvider>\n        </DrawerContentContainer>\n      )}\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAA4B,MAAM,OAAO,CAAA;AAwBhD,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,WAAW,CAAA;IACrB,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B,MAAM,EAAE,oBAAoB,CAAA;CAC7B,GAAG,IAAI,CAAA;AAYR,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EAAE,aAAa,EAC3B,OAAO,GACR,EAAE;IACD,YAAY,EAAE,oBAAoB,EAAE,CAAA;IACpC,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,qBA8KA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAA4B,MAAM,OAAO,CAAA;AAwBhD,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,WAAW,CAAA;IACrB,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B,MAAM,EAAE,oBAAoB,CAAA;CAC7B,GAAG,IAAI,CAAA;AAYR,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EAAE,aAAa,EAC3B,OAAO,GACR,EAAE;IACD,YAAY,EAAE,oBAAoB,EAAE,CAAA;IACpC,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,qBA6KA"}

package/dist/views/Dashboard/Default/ModularDashboard/index.client.js

@@ -145,8 +145,7 @@ export function ModularDashboardClient(t0) {
               disabled: !isEditing,
               id: widget_1.item.id,
               style: {
-                width: `${WIDTH_TO_PERCENTAGE[widget_1.item.width]}%`,
-                padding: "6px"
+                width: `${WIDTH_TO_PERCENTAGE[widget_1.item.width]}%`
               },
               width: widget_1.item.width,
               children: _jsxs("div", {