@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ea6e8f8

package/dist/elements/Autosave/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["dequal","formatAdminURL","getAutosaveInterval","hasDraftValidationEnabled","reduceFieldsToValues","qs","React","useDeferredValue","useEffect","useRef","useState","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useEffectEvent","useQueue","useConfig","useDocumentInfo","useLocale","useTranslation","reduceFieldsToValuesWithValidation","LeaveWithoutSaving","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","config","routes","api","docConfig","mostRecentVersionIsAutosaved","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","isValid","setBackgroundProcessing","submit","formState","modified","submitted","code","locale","t","interval","validateOnDraft","_saving","setSaving","saving","debouncedFormState","queueTask","autosaveTimeoutRef","handleAutosave","current","undefined","startTimestamp","endTimestamp","hideIndicator","setTimeout","stopAutoSaveIndicator","Date","getTime","url","method","entitySlug","params","stringify","autosave","depth","draft","addQueryPrefix","slug","apiRoute","path","valid","skipSubmission","result","acceptValues","overrideLocalChanges","action","context","getDocPermissions","incrementVersionCount","disableFormWhileProcessing","disableSuccessStatus","overrides","_status","skipValidation","res","ok","prev","newDate","afterProcess","beforeProcess","didMount","previousDebouncedData","updatedAt","_","formData","__","prevFormData","clearTimeout","_jsxs","Fragment","_jsx","className"],"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport { dequal } from 'dequal/lite'\nimport {\n  formatAdminURL,\n  getAutosaveInterval,\n  hasDraftValidationEnabled,\n  reduceFieldsToValues,\n} from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useDeferredValue, useEffect, useRef, useState } from 'react'\n\nimport type { OnSaveContext } from '../../views/Edit/index.js'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useQueue } from '../../hooks/useQueue.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'\nimport { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'\nimport './index.css'\n\nconst baseClass = 'autosave'\n// The minimum time the saving state should be shown\nconst minimumAnimationTime = 1000\n\nexport type Props = {\n  collection?: ClientCollectionConfig\n  global?: ClientGlobalConfig\n  id?: number | string\n  publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc }) => {\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const {\n    docConfig,\n    mostRecentVersionIsAutosaved,\n    setMostRecentVersionIsAutosaved,\n    setUnpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { isValid, setBackgroundProcessing, submit } = useForm()\n\n  const [formState] = useAllFormFields()\n  const modified = useFormModified()\n  const submitted = useFormSubmitted()\n\n  const { code: locale } = useLocale()\n  const { t } = useTranslation()\n\n  const interval = getAutosaveInterval(docConfig)\n  const validateOnDraft = hasDraftValidationEnabled(docConfig)\n\n  const [_saving, setSaving] = useState(false)\n\n  const saving = useDeferredValue(_saving)\n\n  const debouncedFormState = useDebounce(formState, interval)\n\n  const { queueTask } = useQueue()\n\n  const autosaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const handleAutosave = useEffectEvent(() => {\n    autosaveTimeoutRef.current = undefined\n    // We need to log the time in order to figure out if we need to trigger the state off later\n    let startTimestamp = undefined\n    let endTimestamp = undefined\n\n    const hideIndicator = () => {\n      // If request was faster than minimum animation time, animate the difference\n      if (endTimestamp - startTimestamp < minimumAnimationTime) {\n        autosaveTimeoutRef.current = setTimeout(\n          () => {\n            setSaving(false)\n          },\n          minimumAnimationTime - (endTimestamp - startTimestamp),\n        )\n      } else {\n        stopAutoSaveIndicator()\n      }\n    }\n\n    queueTask(\n      async () => {\n        if (modified) {\n          startTimestamp = new Date().getTime()\n\n          setSaving(true)\n\n          let url: string\n          let method: string\n          let entitySlug: string\n          const params = qs.stringify(\n            {\n              autosave: true,\n              depth: 0,\n              draft: true,\n              'fallback-locale': 'null',\n              locale,\n            },\n            {\n              addQueryPrefix: true,\n            },\n          )\n\n          if (collection && id) {\n            entitySlug = collection.slug\n            url = formatAdminURL({\n              apiRoute: api,\n              path: `/${entitySlug}/${id}${params}`,\n            })\n            method = 'PATCH'\n          }\n\n          if (globalDoc) {\n            entitySlug = globalDoc.slug\n            url = formatAdminURL({\n              apiRoute: api,\n              path: `/globals/${entitySlug}${params}`,\n            })\n            method = 'POST'\n          }\n\n          const { valid } = reduceFieldsToValuesWithValidation(formState, true)\n\n          const skipSubmission = submitted && !valid && validateOnDraft\n\n          if (!skipSubmission && modified && url) {\n            const result = await submit<any, OnSaveContext>({\n              acceptValues: {\n                overrideLocalChanges: false,\n              },\n              action: url,\n              context: {\n                getDocPermissions: false,\n                incrementVersionCount: !mostRecentVersionIsAutosaved,\n              },\n              disableFormWhileProcessing: false,\n              disableSuccessStatus: true,\n              method,\n              overrides: {\n                _status: 'draft',\n              },\n              skipValidation: !validateOnDraft,\n            })\n\n            if (result && result?.res?.ok && !mostRecentVersionIsAutosaved) {\n              setMostRecentVersionIsAutosaved(true)\n              setUnpublishedVersionCount((prev) => prev + 1)\n            }\n\n            const newDate = new Date()\n\n            // We need to log the time in order to figure out if we need to trigger the state off later\n            endTimestamp = newDate.getTime()\n\n            hideIndicator()\n          }\n        }\n      },\n      {\n        afterProcess: () => {\n          setBackgroundProcessing(false)\n        },\n        beforeProcess: () => {\n          setBackgroundProcessing(true)\n        },\n      },\n    )\n  })\n\n  const didMount = useRef(false)\n  const previousDebouncedData = useRef(reduceFieldsToValues(debouncedFormState))\n\n  // When debounced fields change, autosave\n  useEffect(() => {\n    /**\n     * Ensure autosave doesn't run on mount\n     */\n    if (!didMount.current) {\n      didMount.current = true\n      return\n    }\n\n    /**\n     * Ensure autosave only runs if the form data changes, not every time the entire form state changes\n     * Remove `updatedAt` from comparison as it changes on every autosave interval.\n     */\n    const { updatedAt: _, ...formData } = reduceFieldsToValues(debouncedFormState)\n    const { updatedAt: __, ...prevFormData } = previousDebouncedData.current\n\n    if (dequal(formData, prevFormData)) {\n      return\n    }\n\n    previousDebouncedData.current = formData\n\n    handleAutosave()\n  }, [debouncedFormState])\n\n  /**\n   * If component unmounts, clear the autosave timeout\n   */\n  useEffect(() => {\n    return () => {\n      stopAutoSaveIndicator()\n    }\n  }, [])\n\n  const stopAutoSaveIndicator = useEffectEvent(() => {\n    if (autosaveTimeoutRef.current) {\n      clearTimeout(autosaveTimeoutRef.current)\n    }\n\n    setSaving(false)\n  })\n\n  return (\n    <React.Fragment>\n      {validateOnDraft && !isValid && <LeaveWithoutSaving />}\n      {saving && <div className={baseClass}>{t('general:saving')}</div>}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["dequal","formatAdminURL","getAutosaveInterval","hasDraftValidationEnabled","reduceFieldsToValues","qs","React","useDeferredValue","useEffect","useRef","useState","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useEffectEvent","useQueue","useBranchParam","useConfig","useDocumentInfo","useLocale","useTranslation","useUploadEdits","reduceFieldsToValuesWithValidation","LeaveWithoutSaving","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","config","routes","api","docConfig","mostRecentVersionIsAutosaved","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","isValid","setBackgroundProcessing","submit","formState","modified","submitted","currentLocale","locale","code","branch","t","uploadEdits","interval","validateOnDraft","_saving","setSaving","saving","debouncedFormState","queueTask","autosaveTimeoutRef","handleAutosave","current","undefined","startTimestamp","endTimestamp","hideIndicator","setTimeout","stopAutoSaveIndicator","Date","getTime","url","method","entitySlug","params","stringify","autosave","depth","draft","addQueryPrefix","slug","apiRoute","path","valid","skipSubmission","result","acceptValues","overrideLocalChanges","action","context","getDocPermissions","incrementVersionCount","disableFormWhileProcessing","disableSuccessStatus","overrides","_status","skipValidation","res","ok","prev","newDate","afterProcess","beforeProcess","didMount","previousDebouncedData","previousUploadEdits","updatedAt","_","formData","__","prevFormData","clearTimeout","_jsxs","Fragment","_jsx","className"],"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport { dequal } from 'dequal/lite'\nimport {\n  formatAdminURL,\n  getAutosaveInterval,\n  hasDraftValidationEnabled,\n  reduceFieldsToValues,\n} from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useDeferredValue, useEffect, useRef, useState } from 'react'\n\nimport type { OnSaveContext } from '../../views/Edit/index.js'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useQueue } from '../../hooks/useQueue.js'\nimport { useBranchParam } from '../../providers/Branch/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useUploadEdits } from '../../providers/UploadEdits/index.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'\nimport { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'\nimport './index.css'\n\nconst baseClass = 'autosave'\n// The minimum time the saving state should be shown\nconst minimumAnimationTime = 1000\n\nexport type Props = {\n  collection?: ClientCollectionConfig\n  global?: ClientGlobalConfig\n  id?: number | string\n  publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc }) => {\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const {\n    docConfig,\n    mostRecentVersionIsAutosaved,\n    setMostRecentVersionIsAutosaved,\n    setUnpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { isValid, setBackgroundProcessing, submit } = useForm()\n\n  const [formState] = useAllFormFields()\n  const modified = useFormModified()\n  const submitted = useFormSubmitted()\n\n  const currentLocale = useLocale()\n  const locale = currentLocale?.code\n  const branch = useBranchParam()\n  const { t } = useTranslation()\n  const { uploadEdits } = useUploadEdits()\n\n  const interval = getAutosaveInterval(docConfig)\n  const validateOnDraft = hasDraftValidationEnabled(docConfig)\n\n  const [_saving, setSaving] = useState(false)\n\n  const saving = useDeferredValue(_saving)\n\n  const debouncedFormState = useDebounce(formState, interval)\n\n  const { queueTask } = useQueue()\n\n  const autosaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const handleAutosave = useEffectEvent(() => {\n    autosaveTimeoutRef.current = undefined\n    // We need to log the time in order to figure out if we need to trigger the state off later\n    let startTimestamp = undefined\n    let endTimestamp = undefined\n\n    const hideIndicator = () => {\n      // If request was faster than minimum animation time, animate the difference\n      if (endTimestamp - startTimestamp < minimumAnimationTime) {\n        autosaveTimeoutRef.current = setTimeout(\n          () => {\n            setSaving(false)\n          },\n          minimumAnimationTime - (endTimestamp - startTimestamp),\n        )\n      } else {\n        stopAutoSaveIndicator()\n      }\n    }\n\n    queueTask(\n      async () => {\n        if (modified) {\n          startTimestamp = new Date().getTime()\n\n          setSaving(true)\n\n          let url: string\n          let method: string\n          let entitySlug: string\n          const params = qs.stringify(\n            {\n              autosave: true,\n              branch,\n              depth: 0,\n              draft: true,\n              'fallback-locale': 'null',\n              locale,\n              uploadEdits: uploadEdits || undefined,\n            },\n            {\n              addQueryPrefix: true,\n            },\n          )\n\n          if (collection && id) {\n            entitySlug = collection.slug\n            url = formatAdminURL({\n              apiRoute: api,\n              path: `/${entitySlug}/${id}${params}`,\n            })\n            method = 'PATCH'\n          }\n\n          if (globalDoc) {\n            entitySlug = globalDoc.slug\n            url = formatAdminURL({\n              apiRoute: api,\n              path: `/globals/${entitySlug}${params}`,\n            })\n            method = 'POST'\n          }\n\n          const { valid } = reduceFieldsToValuesWithValidation(formState, true)\n\n          const skipSubmission = submitted && !valid && validateOnDraft\n\n          if (!skipSubmission && modified && url) {\n            const result = await submit<any, OnSaveContext>({\n              acceptValues: {\n                overrideLocalChanges: false,\n              },\n              action: url,\n              context: {\n                getDocPermissions: false,\n                incrementVersionCount: !mostRecentVersionIsAutosaved,\n              },\n              disableFormWhileProcessing: false,\n              disableSuccessStatus: true,\n              method,\n              overrides: {\n                _status: 'draft',\n              },\n              skipValidation: !validateOnDraft,\n            })\n\n            if (result && result?.res?.ok && !mostRecentVersionIsAutosaved) {\n              setMostRecentVersionIsAutosaved(true)\n              setUnpublishedVersionCount((prev) => prev + 1)\n            }\n\n            const newDate = new Date()\n\n            // We need to log the time in order to figure out if we need to trigger the state off later\n            endTimestamp = newDate.getTime()\n\n            hideIndicator()\n          }\n        }\n      },\n      {\n        afterProcess: () => {\n          setBackgroundProcessing(false)\n        },\n        beforeProcess: () => {\n          setBackgroundProcessing(true)\n        },\n      },\n    )\n  })\n\n  const didMount = useRef(false)\n  const previousDebouncedData = useRef(reduceFieldsToValues(debouncedFormState))\n  const previousUploadEdits = useRef(uploadEdits)\n\n  // When debounced fields change, autosave\n  useEffect(() => {\n    /**\n     * Ensure autosave doesn't run on mount\n     */\n    if (!didMount.current) {\n      didMount.current = true\n      return\n    }\n\n    /**\n     * Ensure autosave only runs if the form data changes, not every time the entire form state changes\n     * Remove `updatedAt` from comparison as it changes on every autosave interval.\n     */\n    const { updatedAt: _, ...formData } = reduceFieldsToValues(debouncedFormState)\n    const { updatedAt: __, ...prevFormData } = previousDebouncedData.current\n\n    if (dequal(formData, prevFormData) && dequal(uploadEdits, previousUploadEdits.current)) {\n      return\n    }\n\n    previousDebouncedData.current = formData\n    previousUploadEdits.current = uploadEdits\n\n    handleAutosave()\n  }, [debouncedFormState, uploadEdits])\n\n  /**\n   * If component unmounts, clear the autosave timeout\n   */\n  useEffect(() => {\n    return () => {\n      stopAutoSaveIndicator()\n    }\n  }, [])\n\n  const stopAutoSaveIndicator = useEffectEvent(() => {\n    if (autosaveTimeoutRef.current) {\n      clearTimeout(autosaveTimeoutRef.current)\n    }\n\n    setSaving(false)\n  })\n\n  return (\n    <React.Fragment>\n      {validateOnDraft && !isValid && <LeaveWithoutSaving />}\n      {saving && <div className={baseClass}>{t('general:saving')}</div>}\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,MAAM,QAAQ;AACvB,SACEC,cAAc,EACdC,mBAAmB,EACnBC,yBAAyB,EACzBC,oBAAoB,QACf;AACP,YAAYC,EAAA,MAAQ;AACpB,OAAOC,KAAA,IAASC,gBAAgB,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAIrE,SACEC,gBAAgB,EAChBC,OAAO,EACPC,eAAe,EACfC,gBAAgB,QACX;AACP,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,kCAAkC,QAAQ;AACnD,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB;AACA,MAAMC,oBAAA,GAAuB;AAS7B,OAAO,MAAMC,QAAA,GAA4BA,CAAC;EAAEC,EAAE;EAAEC,UAAU;EAAEC,MAAA,EAAQC;AAAS,CAAE;EAC7E,MAAM;IACJC,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG;IAAE;EAChB,CACF,GAAGhB,SAAA;EAEJ,MAAM;IACJiB,SAAS;IACTC,4BAA4B;IAC5BC,+BAA+B;IAC/BC;EAA0B,CAC3B,GAAGnB,eAAA;EAEJ,MAAM;IAAEoB,OAAO;IAAEC,uBAAuB;IAAEC;EAAM,CAAE,GAAG9B,OAAA;EAErD,MAAM,CAAC+B,SAAA,CAAU,GAAGhC,gBAAA;EACpB,MAAMiC,QAAA,GAAW/B,eAAA;EACjB,MAAMgC,SAAA,GAAY/B,gBAAA;EAElB,MAAMgC,aAAA,GAAgBzB,SAAA;EACtB,MAAM0B,MAAA,GAASD,aAAA,EAAeE,IAAA;EAC9B,MAAMC,MAAA,GAAS/B,cAAA;EACf,MAAM;IAAEgC;EAAC,CAAE,GAAG5B,cAAA;EACd,MAAM;IAAE6B;EAAW,CAAE,GAAG5B,cAAA;EAExB,MAAM6B,QAAA,GAAWlD,mBAAA,CAAoBkC,SAAA;EACrC,MAAMiB,eAAA,GAAkBlD,yBAAA,CAA0BiC,SAAA;EAElD,MAAM,CAACkB,OAAA,EAASC,SAAA,CAAU,GAAG7C,QAAA,CAAS;EAEtC,MAAM8C,MAAA,GAASjD,gBAAA,CAAiB+C,OAAA;EAEhC,MAAMG,kBAAA,GAAqB1C,WAAA,CAAY4B,SAAA,EAAWS,QAAA;EAElD,MAAM;IAAEM;EAAS,CAAE,GAAGzC,QAAA;EAEtB,MAAM0C,kBAAA,GAAqBlD,MAAA,CAA8B;EAEzD,MAAMmD,cAAA,GAAiB5C,cAAA,CAAe;IACpC2C,kBAAA,CAAmBE,OAAO,GAAGC,SAAA;IAC7B;IACA,IAAIC,cAAA,GAAiBD,SAAA;IACrB,IAAIE,YAAA,GAAeF,SAAA;IAEnB,MAAMG,aAAA,GAAgBA,CAAA;MACpB;MACA,IAAID,YAAA,GAAeD,cAAA,GAAiBpC,oBAAA,EAAsB;QACxDgC,kBAAA,CAAmBE,OAAO,GAAGK,UAAA,CAC3B;UACEX,SAAA,CAAU;QACZ,GACA5B,oBAAA,IAAwBqC,YAAA,GAAeD,cAAa;MAExD,OAAO;QACLI,qBAAA;MACF;IACF;IAEAT,SAAA,CACE;MACE,IAAId,QAAA,EAAU;QACZmB,cAAA,GAAiB,IAAIK,IAAA,GAAOC,OAAO;QAEnCd,SAAA,CAAU;QAEV,IAAIe,GAAA;QACJ,IAAIC,MAAA;QACJ,IAAIC,UAAA;QACJ,MAAMC,MAAA,GAASpE,EAAA,CAAGqE,SAAS,CACzB;UACEC,QAAA,EAAU;UACV1B,MAAA;UACA2B,KAAA,EAAO;UACPC,KAAA,EAAO;UACP,mBAAmB;UACnB9B,MAAA;UACAI,WAAA,EAAaA,WAAA,IAAeW;QAC9B,GACA;UACEgB,cAAA,EAAgB;QAClB;QAGF,IAAIhD,UAAA,IAAcD,EAAA,EAAI;UACpB2C,UAAA,GAAa1C,UAAA,CAAWiD,IAAI;UAC5BT,GAAA,GAAMrE,cAAA,CAAe;YACnB+E,QAAA,EAAU7C,GAAA;YACV8C,IAAA,EAAM,IAAIT,UAAA,IAAc3C,EAAA,GAAK4C,MAAA;UAC/B;UACAF,MAAA,GAAS;QACX;QAEA,IAAIvC,SAAA,EAAW;UACbwC,UAAA,GAAaxC,SAAA,CAAU+C,IAAI;UAC3BT,GAAA,GAAMrE,cAAA,CAAe;YACnB+E,QAAA,EAAU7C,GAAA;YACV8C,IAAA,EAAM,YAAYT,UAAA,GAAaC,MAAA;UACjC;UACAF,MAAA,GAAS;QACX;QAEA,MAAM;UAAEW;QAAK,CAAE,GAAG1D,kCAAA,CAAmCmB,SAAA,EAAW;QAEhE,MAAMwC,cAAA,GAAiBtC,SAAA,IAAa,CAACqC,KAAA,IAAS7B,eAAA;QAE9C,IAAI,CAAC8B,cAAA,IAAkBvC,QAAA,IAAY0B,GAAA,EAAK;UACtC,MAAMc,MAAA,GAAS,MAAM1C,MAAA,CAA2B;YAC9C2C,YAAA,EAAc;cACZC,oBAAA,EAAsB;YACxB;YACAC,MAAA,EAAQjB,GAAA;YACRkB,OAAA,EAAS;cACPC,iBAAA,EAAmB;cACnBC,qBAAA,EAAuB,CAACrD;YAC1B;YACAsD,0BAAA,EAA4B;YAC5BC,oBAAA,EAAsB;YACtBrB,MAAA;YACAsB,SAAA,EAAW;cACTC,OAAA,EAAS;YACX;YACAC,cAAA,EAAgB,CAAC1C;UACnB;UAEA,IAAI+B,MAAA,IAAUA,MAAA,EAAQY,GAAA,EAAKC,EAAA,IAAM,CAAC5D,4BAAA,EAA8B;YAC9DC,+BAAA,CAAgC;YAChCC,0BAAA,CAA4B2D,IAAA,IAASA,IAAA,GAAO;UAC9C;UAEA,MAAMC,OAAA,GAAU,IAAI/B,IAAA;UAEpB;UACAJ,YAAA,GAAemC,OAAA,CAAQ9B,OAAO;UAE9BJ,aAAA;QACF;MACF;IACF,GACA;MACEmC,YAAA,EAAcA,CAAA;QACZ3D,uBAAA,CAAwB;MAC1B;MACA4D,aAAA,EAAeA,CAAA;QACb5D,uBAAA,CAAwB;MAC1B;IACF;EAEJ;EAEA,MAAM6D,QAAA,GAAW7F,MAAA,CAAO;EACxB,MAAM8F,qBAAA,GAAwB9F,MAAA,CAAOL,oBAAA,CAAqBqD,kBAAA;EAC1D,MAAM+C,mBAAA,GAAsB/F,MAAA,CAAO0C,WAAA;EAEnC;EACA3C,SAAA,CAAU;IACR;;;IAGA,IAAI,CAAC8F,QAAA,CAASzC,OAAO,EAAE;MACrByC,QAAA,CAASzC,OAAO,GAAG;MACnB;IACF;IAEA;;;;IAIA,MAAM;MAAE4C,SAAA,EAAWC,CAAC;MAAE,GAAGC;IAAA,CAAU,GAAGvG,oBAAA,CAAqBqD,kBAAA;IAC3D,MAAM;MAAEgD,SAAA,EAAWG,EAAE;MAAE,GAAGC;IAAA,CAAc,GAAGN,qBAAA,CAAsB1C,OAAO;IAExE,IAAI7D,MAAA,CAAO2G,QAAA,EAAUE,YAAA,KAAiB7G,MAAA,CAAOmD,WAAA,EAAaqD,mBAAA,CAAoB3C,OAAO,GAAG;MACtF;IACF;IAEA0C,qBAAA,CAAsB1C,OAAO,GAAG8C,QAAA;IAChCH,mBAAA,CAAoB3C,OAAO,GAAGV,WAAA;IAE9BS,cAAA;EACF,GAAG,CAACH,kBAAA,EAAoBN,WAAA,CAAY;EAEpC;;;EAGA3C,SAAA,CAAU;IACR,OAAO;MACL2D,qBAAA;IACF;EACF,GAAG,EAAE;EAEL,MAAMA,qBAAA,GAAwBnD,cAAA,CAAe;IAC3C,IAAI2C,kBAAA,CAAmBE,OAAO,EAAE;MAC9BiD,YAAA,CAAanD,kBAAA,CAAmBE,OAAO;IACzC;IAEAN,SAAA,CAAU;EACZ;EAEA,oBACEwD,KAAA,CAACzG,KAAA,CAAM0G,QAAQ;eACZ3D,eAAA,IAAmB,CAACb,OAAA,iBAAWyE,IAAA,CAACxF,kBAAA,OAChC+B,MAAA,iBAAUyD,IAAA,CAAC;MAAIC,SAAA,EAAWxF,SAAA;gBAAYwB,CAAA,CAAE;;;AAG/C","ignoreList":[]}

package/dist/elements/Banner/index.css

@@ -1,12 +1,15 @@
 @layer payload-default {
+  [data-test='payload-ui-barrel-sentinel'] {
+    --payload-ui-barrel-loaded: 1;
+  }
+
   .banner {
     display: flex;
     align-items: center;
     gap: var(--spacer-1);
-    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);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     letter-spacing: var(--text-letter-spacing);
     border-radius: var(--radius-medium);
     padding: var(--spacer-2);

package/dist/elements/Banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Banner/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;AAE1C,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;CAC9D,CAAC,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuClC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Banner/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;AAE1C,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;CAC9D,CAAC,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4ClC,CAAA"}

package/dist/elements/Banner/index.js

@@ -26,6 +26,7 @@ export const Banner = ({
   }
   return /*#__PURE__*/_jsxs(RenderedType, {
     className: classes,
+    "data-test": "payload-ui-barrel-sentinel",
     href: to || null,
     onClick: onClick,
     children: [icon && alignIcon === 'left' && /*#__PURE__*/_jsx(React.Fragment, {

package/dist/elements/Banner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","InfoIcon","Link","baseClass","Banner","type","alignIcon","children","className","icon","iconFromProps","onClick","to","undefined","_jsx","classes","filter","Boolean","join","RenderedType","_jsxs","href","Fragment"],"sources":["../../../src/elements/Banner/index.tsx"],"sourcesContent":["'use client'\nimport type { MouseEvent } from 'react'\n\nimport React from 'react'\n\nimport { InfoIcon } from '../../icons/Info/index.js'\nimport { Link } from '../Link/index.js'\nimport './index.css'\n\nconst baseClass = 'banner'\n\ntype onClick = (event: MouseEvent) => void\n\nexport type Props = Readonly<{\n  alignIcon?: 'left' | 'right'\n  children?: React.ReactNode\n  className?: string\n  icon?: React.ReactNode\n  onClick?: onClick\n  to?: string\n  type?: 'brand' | 'danger' | 'default' | 'success' | 'warning'\n}>\n\nexport type RenderedTypeProps = {\n  children?: React.ReactNode\n  className?: string\n  onClick?: onClick\n  to: string\n}\n\nexport const Banner: React.FC<Props> = ({\n  type = 'default',\n  alignIcon = 'left',\n  children,\n  className,\n  icon: iconFromProps,\n  onClick,\n  to,\n}) => {\n  const icon = iconFromProps === undefined ? <InfoIcon /> : iconFromProps\n\n  const classes = [\n    baseClass,\n    `${baseClass}--type-${type}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let RenderedType: React.ComponentType<RenderedTypeProps> | React.ElementType = 'div'\n\n  if (onClick && !to) {\n    RenderedType = 'button'\n  }\n  if (to) {\n    RenderedType = Link\n  }\n\n  return (\n    <RenderedType className={classes} href={to || null} onClick={onClick}>\n      {icon && alignIcon === 'left' && <React.Fragment>{icon}</React.Fragment>}\n      <span className={`${baseClass}__content`}>{children}</span>\n      {icon && alignIcon === 'right' && <React.Fragment>{icon}</React.Fragment>}\n    </RenderedType>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAqBlB,OAAO,MAAMC,MAAA,GAA0BA,CAAC;EACtCC,IAAA,GAAO,SAAS;EAChBC,SAAA,GAAY,MAAM;EAClBC,QAAQ;EACRC,SAAS;EACTC,IAAA,EAAMC,aAAa;EACnBC,OAAO;EACPC;AAAE,CACH;EACC,MAAMH,IAAA,GAAOC,aAAA,KAAkBG,SAAA,gBAAYC,IAAA,CAACb,QAAA,QAAcS,aAAA;EAE1D,MAAMK,OAAA,GAAU,CACdZ,SAAA,EACA,GAAGA,SAAA,UAAmBE,IAAA,EAAM,EAC5BG,SAAA,IAAaA,SAAA,EACbI,EAAA,IAAM,GAAGT,SAAA,YAAqB,EAC7B,CAAAS,EAAA,IAAMD,OAAM,KAAM,GAAGR,SAAA,cAAuB,EAC7CM,IAAA,IAAQ,GAAGN,SAAA,YAAqB,EAChCM,IAAA,IAAQ,GAAGN,SAAA,gBAAyBG,SAAA,EAAW,CAChD,CACEU,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIC,YAAA,GAA2E;EAE/E,IAAIR,OAAA,IAAW,CAACC,EAAA,EAAI;IAClBO,YAAA,GAAe;EACjB;EACA,IAAIP,EAAA,EAAI;IACNO,YAAA,GAAejB,IAAA;EACjB;EAEA,oBACEkB,KAAA,CAACD,YAAA;IAAaX,SAAA,EAAWO,OAAA;IAASM,IAAA,EAAMT,EAAA,IAAM;IAAMD,OAAA,EAASA,OAAA;eAC1DF,IAAA,IAAQH,SAAA,KAAc,uBAAUQ,IAAA,CAACd,KAAA,CAAMsB,QAAQ;gBAAEb;qBAClDK,IAAA,CAAC;MAAKN,SAAA,EAAW,GAAGL,SAAA,WAAoB;gBAAGI;QAC1CE,IAAA,IAAQH,SAAA,KAAc,wBAAWQ,IAAA,CAACd,KAAA,CAAMsB,QAAQ;gBAAEb;;;AAGzD","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","InfoIcon","Link","baseClass","Banner","type","alignIcon","children","className","icon","iconFromProps","onClick","to","undefined","_jsx","classes","filter","Boolean","join","RenderedType","_jsxs","href","Fragment"],"sources":["../../../src/elements/Banner/index.tsx"],"sourcesContent":["'use client'\nimport type { MouseEvent } from 'react'\n\nimport React from 'react'\n\nimport { InfoIcon } from '../../icons/Info/index.js'\nimport { Link } from '../Link/index.js'\nimport './index.css'\n\nconst baseClass = 'banner'\n\ntype onClick = (event: MouseEvent) => void\n\nexport type Props = Readonly<{\n  alignIcon?: 'left' | 'right'\n  children?: React.ReactNode\n  className?: string\n  icon?: React.ReactNode\n  onClick?: onClick\n  to?: string\n  type?: 'brand' | 'danger' | 'default' | 'success' | 'warning'\n}>\n\nexport type RenderedTypeProps = {\n  children?: React.ReactNode\n  className?: string\n  onClick?: onClick\n  to: string\n}\n\nexport const Banner: React.FC<Props> = ({\n  type = 'default',\n  alignIcon = 'left',\n  children,\n  className,\n  icon: iconFromProps,\n  onClick,\n  to,\n}) => {\n  const icon = iconFromProps === undefined ? <InfoIcon /> : iconFromProps\n\n  const classes = [\n    baseClass,\n    `${baseClass}--type-${type}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let RenderedType: React.ComponentType<RenderedTypeProps> | React.ElementType = 'div'\n\n  if (onClick && !to) {\n    RenderedType = 'button'\n  }\n  if (to) {\n    RenderedType = Link\n  }\n\n  return (\n    <RenderedType\n      className={classes}\n      data-test=\"payload-ui-barrel-sentinel\"\n      href={to || null}\n      onClick={onClick}\n    >\n      {icon && alignIcon === 'left' && <React.Fragment>{icon}</React.Fragment>}\n      <span className={`${baseClass}__content`}>{children}</span>\n      {icon && alignIcon === 'right' && <React.Fragment>{icon}</React.Fragment>}\n    </RenderedType>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAqBlB,OAAO,MAAMC,MAAA,GAA0BA,CAAC;EACtCC,IAAA,GAAO,SAAS;EAChBC,SAAA,GAAY,MAAM;EAClBC,QAAQ;EACRC,SAAS;EACTC,IAAA,EAAMC,aAAa;EACnBC,OAAO;EACPC;AAAE,CACH;EACC,MAAMH,IAAA,GAAOC,aAAA,KAAkBG,SAAA,gBAAYC,IAAA,CAACb,QAAA,QAAcS,aAAA;EAE1D,MAAMK,OAAA,GAAU,CACdZ,SAAA,EACA,GAAGA,SAAA,UAAmBE,IAAA,EAAM,EAC5BG,SAAA,IAAaA,SAAA,EACbI,EAAA,IAAM,GAAGT,SAAA,YAAqB,EAC7B,CAAAS,EAAA,IAAMD,OAAM,KAAM,GAAGR,SAAA,cAAuB,EAC7CM,IAAA,IAAQ,GAAGN,SAAA,YAAqB,EAChCM,IAAA,IAAQ,GAAGN,SAAA,gBAAyBG,SAAA,EAAW,CAChD,CACEU,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIC,YAAA,GAA2E;EAE/E,IAAIR,OAAA,IAAW,CAACC,EAAA,EAAI;IAClBO,YAAA,GAAe;EACjB;EACA,IAAIP,EAAA,EAAI;IACNO,YAAA,GAAejB,IAAA;EACjB;EAEA,oBACEkB,KAAA,CAACD,YAAA;IACCX,SAAA,EAAWO,OAAA;IACX,aAAU;IACVM,IAAA,EAAMT,EAAA,IAAM;IACZD,OAAA,EAASA,OAAA;eAERF,IAAA,IAAQH,SAAA,KAAc,uBAAUQ,IAAA,CAACd,KAAA,CAAMsB,QAAQ;gBAAEb;qBAClDK,IAAA,CAAC;MAAKN,SAAA,EAAW,GAAGL,SAAA,WAAoB;gBAAGI;QAC1CE,IAAA,IAAQH,SAAA,KAAc,wBAAWQ,IAAA,CAACd,KAAA,CAAMsB,QAAQ;gBAAEb;;;AAGzD","ignoreList":[]}

package/dist/elements/BranchSelector/NewBranchModal/index.css

@@ -0,0 +1,46 @@
+@layer payload-default {
+  .new-branch-modal {
+    --dialog-width: 400px;
+  }
+
+  .new-branch-modal__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .new-branch-modal__form .field-type {
+    margin-bottom: 0;
+  }
+
+  .new-branch-modal__source {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+
+  .new-branch-modal__source-label {
+    color: var(--color-text);
+  }
+
+  /* Shaped like the inputs above it so the trail reads as one column, but inert:
+     there is only ever one source branch to show. */
+  .new-branch-modal__source-value {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    min-height: var(--spacer-5);
+    padding-inline: var(--spacer-1);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    color: var(--color-text-secondary);
+  }
+
+  .new-branch-modal__source-value .icon--branch {
+    color: var(--color-icon);
+  }
+
+  .new-branch-modal__source-name {
+    color: var(--color-text);
+  }
+}

package/dist/elements/BranchSelector/NewBranchModal/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.css';
+export declare const newBranchModalSlug = "new-branch";
+/**
+ * Creates a branch without leaving the current view.
+ *
+ * The slug is derived from the name server-side rather than asked for, so the
+ * only thing required here is a name — which is why this is a modal rather than
+ * a trip to the collection's create view.
+ */
+export declare const NewBranchModal: React.FC;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/BranchSelector/NewBranchModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BranchSelector/NewBranchModal/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAapD,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,kBAAkB,eAAe,CAAA;AAI9C;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAqJlC,CAAA"}

package/dist/elements/BranchSelector/NewBranchModal/index.js

@@ -0,0 +1,174 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { branchesCollectionSlug, formatAdminURL, MAIN_BRANCH } from 'payload/shared';
+import React, { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { TextInput } from '../../../fields/Text/Input.js';
+import { BranchIcon } from '../../../icons/Branch/index.js';
+import { useBranch } from '../../../providers/Branch/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { requests } from '../../../utilities/api.js';
+import { Button } from '../../Button/index.js';
+import { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js';
+import { useModal } from '../../Modal/index.js';
+import { Pill } from '../../Pill/index.js';
+import './index.css';
+export const newBranchModalSlug = 'new-branch';
+const baseClass = 'new-branch-modal';
+/**
+ * Creates a branch without leaving the current view.
+ *
+ * The slug is derived from the name server-side rather than asked for, so the
+ * only thing required here is a name — which is why this is a modal rather than
+ * a trip to the collection's create view.
+ */
+export const NewBranchModal = () => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    closeModal
+  } = useModal();
+  const {
+    setBranch
+  } = useBranch();
+  const {
+    config: {
+      routes: {
+        api
+      },
+      serverURL
+    }
+  } = useConfig();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const trimmedName = name.trim();
+  const reset = useCallback(() => {
+    setName('');
+    setDescription('');
+  }, []);
+  const handleCreate = useCallback(async () => {
+    if (!trimmedName || isCreating) {
+      return;
+    }
+    setIsCreating(true);
+    try {
+      const trimmedDescription = description.trim();
+      const response = await requests.post(formatAdminURL({
+        apiRoute: api,
+        path: `/${branchesCollectionSlug}`,
+        serverURL
+      }), {
+        body: JSON.stringify({
+          name: trimmedName,
+          ...(trimmedDescription ? {
+            description: trimmedDescription
+          } : {})
+        }),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+      const json = await response.json();
+      if (!response.ok) {
+        const fieldErrors = json?.errors?.flatMap(({
+          data
+        }) => data?.errors ?? []) ?? [];
+        // Field errors are reported against `slug`, which is derived rather than
+        // typed — naming it would point the editor at a field they never saw. The
+        // name is what they control, so that is what the message names.
+        const messages = fieldErrors.length ? fieldErrors.map(({
+          message,
+          path
+        }) => path === 'slug' ? `${t('branching:branchName')}: ${message}` : message) : json?.errors?.map(({
+          message: message_0
+        }) => message_0) ?? [];
+        if (messages.length) {
+          messages.forEach(message_1 => toast.error(message_1));
+        } else {
+          toast.error(t('error:unknown'));
+        }
+        return;
+      }
+      closeModal(newBranchModalSlug);
+      reset();
+      // Creating a branch is a declaration of intent to work on it, so the
+      // switch follows the save.
+      if (json?.doc?.slug) {
+        setBranch(json.doc.slug);
+      }
+    } catch (_err) {
+      toast.error(t('error:unknown'));
+    } finally {
+      setIsCreating(false);
+    }
+  }, [api, closeModal, description, isCreating, reset, serverURL, setBranch, t, trimmedName]);
+  return /*#__PURE__*/_jsxs(DialogModal, {
+    className: baseClass,
+    closeOnBlur: true,
+    slug: newBranchModalSlug,
+    children: [/*#__PURE__*/_jsx(DialogHeader, {
+      showClose: true,
+      title: t('branching:createNewBranch')
+    }), /*#__PURE__*/_jsx(DialogBody, {
+      children: /*#__PURE__*/_jsxs("form", {
+        className: `${baseClass}__form`,
+        onSubmit: e => {
+          e.preventDefault();
+          void handleCreate();
+        },
+        children: [/*#__PURE__*/_jsx(TextInput, {
+          label: t('branching:branchName'),
+          onChange: e_0 => setName(e_0.target.value),
+          path: "name",
+          required: true,
+          value: name
+        }), /*#__PURE__*/_jsx(TextInput, {
+          label: t('branching:branchDescription'),
+          onChange: e_1 => setDescription(e_1.target.value),
+          path: "description",
+          value: description
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__source`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__source-label`,
+            children: t('branching:branchedFrom')
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__source-value`,
+            children: [/*#__PURE__*/_jsx(BranchIcon, {
+              size: 24
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__source-name`,
+              children: MAIN_BRANCH
+            }), /*#__PURE__*/_jsx(Pill, {
+              pillStyle: "light-gray",
+              size: "small",
+              children: t('branching:defaultBranch')
+            })]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogFooter, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        buttonStyle: "secondary",
+        disabled: isCreating,
+        onClick: () => {
+          closeModal(newBranchModalSlug);
+          reset();
+        },
+        size: "medium",
+        children: t('general:cancel')
+      }), /*#__PURE__*/_jsx(Button, {
+        buttonStyle: "primary",
+        disabled: !trimmedName || isCreating,
+        onClick: () => void handleCreate(),
+        size: "medium",
+        children: isCreating ? t('general:creating') : t('branching:createAndSwitch')
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/BranchSelector/NewBranchModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["branchesCollectionSlug","formatAdminURL","MAIN_BRANCH","React","useCallback","useState","toast","TextInput","BranchIcon","useBranch","useConfig","useTranslation","requests","Button","DialogBody","DialogFooter","DialogHeader","DialogModal","useModal","Pill","newBranchModalSlug","baseClass","NewBranchModal","t","closeModal","setBranch","config","routes","api","serverURL","name","setName","description","setDescription","isCreating","setIsCreating","trimmedName","trim","reset","handleCreate","trimmedDescription","response","post","apiRoute","path","body","JSON","stringify","headers","json","ok","fieldErrors","errors","flatMap","data","messages","length","map","message","forEach","error","doc","slug","_err","_jsxs","className","closeOnBlur","_jsx","showClose","title","onSubmit","e","preventDefault","label","onChange","target","value","required","size","pillStyle","buttonStyle","disabled","onClick"],"sources":["../../../../src/elements/BranchSelector/NewBranchModal/index.tsx"],"sourcesContent":["'use client'\n\nimport { branchesCollectionSlug, formatAdminURL, MAIN_BRANCH } from 'payload/shared'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { TextInput } from '../../../fields/Text/Input.js'\nimport { BranchIcon } from '../../../icons/Branch/index.js'\nimport { useBranch } from '../../../providers/Branch/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js'\nimport { useModal } from '../../Modal/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport './index.css'\n\nexport const newBranchModalSlug = 'new-branch'\n\nconst baseClass = 'new-branch-modal'\n\n/**\n * Creates a branch without leaving the current view.\n *\n * The slug is derived from the name server-side rather than asked for, so the\n * only thing required here is a name — which is why this is a modal rather than\n * a trip to the collection's create view.\n */\nexport const NewBranchModal: React.FC = () => {\n  const { t } = useTranslation()\n  const { closeModal } = useModal()\n  const { setBranch } = useBranch()\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const [name, setName] = useState('')\n  const [description, setDescription] = useState('')\n  const [isCreating, setIsCreating] = useState(false)\n\n  const trimmedName = name.trim()\n\n  const reset = useCallback(() => {\n    setName('')\n    setDescription('')\n  }, [])\n\n  const handleCreate = useCallback(async () => {\n    if (!trimmedName || isCreating) {\n      return\n    }\n\n    setIsCreating(true)\n\n    try {\n      const trimmedDescription = description.trim()\n\n      const response = await requests.post(\n        formatAdminURL({ apiRoute: api, path: `/${branchesCollectionSlug}`, serverURL }),\n        {\n          body: JSON.stringify({\n            name: trimmedName,\n            ...(trimmedDescription ? { description: trimmedDescription } : {}),\n          }),\n          headers: { 'Content-Type': 'application/json' },\n        },\n      )\n\n      const json = (await response.json()) as {\n        doc?: { slug?: string }\n        errors?: {\n          data?: { errors?: { message: string; path: string }[] }\n          message: string\n        }[]\n      }\n\n      if (!response.ok) {\n        const fieldErrors = json?.errors?.flatMap(({ data }) => data?.errors ?? []) ?? []\n\n        // Field errors are reported against `slug`, which is derived rather than\n        // typed — naming it would point the editor at a field they never saw. The\n        // name is what they control, so that is what the message names.\n        const messages = fieldErrors.length\n          ? fieldErrors.map(({ message, path }) =>\n              path === 'slug' ? `${t('branching:branchName')}: ${message}` : message,\n            )\n          : (json?.errors?.map(({ message }) => message) ?? [])\n\n        if (messages.length) {\n          messages.forEach((message) => toast.error(message))\n        } else {\n          toast.error(t('error:unknown'))\n        }\n\n        return\n      }\n\n      closeModal(newBranchModalSlug)\n      reset()\n\n      // Creating a branch is a declaration of intent to work on it, so the\n      // switch follows the save.\n      if (json?.doc?.slug) {\n        setBranch(json.doc.slug)\n      }\n    } catch (_err) {\n      toast.error(t('error:unknown'))\n    } finally {\n      setIsCreating(false)\n    }\n  }, [api, closeModal, description, isCreating, reset, serverURL, setBranch, t, trimmedName])\n\n  return (\n    <DialogModal className={baseClass} closeOnBlur slug={newBranchModalSlug}>\n      <DialogHeader showClose title={t('branching:createNewBranch')} />\n      <DialogBody>\n        <form\n          className={`${baseClass}__form`}\n          onSubmit={(e) => {\n            e.preventDefault()\n            void handleCreate()\n          }}\n        >\n          <TextInput\n            label={t('branching:branchName')}\n            onChange={(e) => setName(e.target.value)}\n            path=\"name\"\n            required\n            value={name}\n          />\n          <TextInput\n            label={t('branching:branchDescription')}\n            onChange={(e) => setDescription(e.target.value)}\n            path=\"description\"\n            value={description}\n          />\n          {/* Display-only: branching from a branch is not supported, so `main` is\n              the only possible source and there is nothing here to choose. */}\n          <div className={`${baseClass}__source`}>\n            <span className={`${baseClass}__source-label`}>{t('branching:branchedFrom')}</span>\n            <div className={`${baseClass}__source-value`}>\n              <BranchIcon size={24} />\n              <span className={`${baseClass}__source-name`}>{MAIN_BRANCH}</span>\n              <Pill pillStyle=\"light-gray\" size=\"small\">\n                {t('branching:defaultBranch')}\n              </Pill>\n            </div>\n          </div>\n        </form>\n      </DialogBody>\n      <DialogFooter>\n        <Button\n          buttonStyle=\"secondary\"\n          disabled={isCreating}\n          onClick={() => {\n            closeModal(newBranchModalSlug)\n            reset()\n          }}\n          size=\"medium\"\n        >\n          {t('general:cancel')}\n        </Button>\n        <Button\n          buttonStyle=\"primary\"\n          disabled={!trimmedName || isCreating}\n          onClick={() => void handleCreate()}\n          size=\"medium\"\n        >\n          {isCreating ? t('general:creating') : t('branching:createAndSwitch')}\n        </Button>\n      </DialogFooter>\n    </DialogModal>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BranchSelector/index.css

@@ -0,0 +1,172 @@
+@layer payload-default {
+  .branch-selector {
+    flex-shrink: 0;
+  }
+
+  /* The chevron lives inside the label rather than in the button's own icon
+     slot, which is taken by the branch icon, so close the end padding by hand. */
+  .branch-selector__trigger.btn--size-medium {
+    padding-inline-end: var(--spacer-1);
+  }
+
+  .branch-selector__trigger .btn__label {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .branch-selector__trigger-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    min-width: 0;
+    /* Matches `.step-nav__item`: a branch name gets the same room as a crumb
+       before it starts costing the trail beside it. */
+    max-width: calc(var(--spacer-6) * 4);
+  }
+
+  .branch-selector__trigger-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .branch-selector__popup .combobox__entry {
+    flex-direction: column;
+  }
+
+  .branch-selector__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    width: 100%;
+    padding-inline: var(--spacer-3);
+    padding-block: var(--spacer-1);
+    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);
+    color: var(--color-text);
+
+    &:hover {
+      background: var(--color-bg-secondary);
+    }
+  }
+
+  .branch-selector__option svg {
+    flex-shrink: 0;
+    color: var(--color-icon);
+  }
+
+  .branch-selector__option-labels {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacer-2);
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  .branch-selector__option-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  /* The branch you are on, pinned above the list of the ones you are not. */
+  .branch-selector__current {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    padding-inline: var(--spacer-3);
+    padding-block: var(--spacer-1);
+  }
+
+  .branch-selector__current-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--text-body-medium-strong-font-family);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    color: var(--color-text);
+  }
+
+  /* On a branch the name is the way into its manage view. The icon is the standing
+     affordance, so the underline is held back for hover — a permanently underlined
+     name reads as decoration on what is otherwise the row's heading. */
+  .branch-selector__current-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    min-width: 0;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-text-brand);
+    }
+
+    &:hover .branch-selector__current-text {
+      text-decoration: underline;
+    }
+  }
+
+  .branch-selector__current-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .branch-selector__current-icon {
+    flex-shrink: 0;
+    color: var(--color-icon);
+  }
+
+  .branch-selector__current-link:hover .branch-selector__current-icon {
+    color: var(--color-text-brand);
+  }
+
+  /* Reads as a state to notice rather than a footnote, so it takes the same green
+     the banner on the branch page does. */
+  .branch-selector__option-scheduled {
+    flex-shrink: 0;
+    font-family: var(--text-body-small-font-family);
+    font-size: var(--text-body-small-font-size);
+    color: var(--color-text-success);
+  }
+
+  /* Muted and small: it qualifies the name rather than competing with it. */
+  .branch-selector__option-merged {
+    flex-shrink: 0;
+    font-family: var(--text-body-small-font-family);
+    font-size: var(--text-body-small-font-size);
+    color: var(--color-text-secondary);
+  }
+
+  /* Shared by the pinned footer rows, which are a link and a button rather than
+     combobox entries and so arrive with their own user-agent styling. */
+  .branch-selector__action {
+    background: none;
+    border: none;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    color: var(--color-text);
+    cursor: pointer;
+  }
+
+  .branch-selector__action .branch-selector__option-labels {
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .branch-selector__footer-divider {
+    height: var(--stroke-width-small);
+    margin-block: var(--spacer-2);
+    background: var(--color-border);
+  }
+
+  .branch-selector__option--active .branch-selector__option-name {
+    font-family: var(--text-body-medium-strong-font-family);
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+}

package/dist/elements/BranchSelector/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.css';
+/**
+ * Switcher for the active content branch, sitting to the left of the breadcrumb
+ * trail — everything after it is scoped to the branch it names.
+ *
+ * Renders nothing when branching is off, and nothing while `main` is the only
+ * branch there is — until a branch exists there is nothing to switch to.
+ */
+export declare const BranchSelector: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/BranchSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/BranchSelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAkBhD,OAAO,aAAa,CAAA;AAIpB;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CA6M3D,CAAA"}