From 9649c48c2857fb2f68c71091f977c1ad4746ceac Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Tue, 6 May 2025 13:15:47 -0400
Subject: [PATCH 01/14] feat: extracts relationship input for exteral use

---
 packages/payload/src/fields/config/types.ts   |   2 +-
 packages/ui/src/fields/Relationship/Input.tsx | 759 +++++++++++++++++
 .../fields/Relationship/createRelationMap.ts  |  35 +-
 packages/ui/src/fields/Relationship/index.tsx | 800 ++----------------
 packages/ui/src/fields/Relationship/types.ts  |  50 +-
 5 files changed, 915 insertions(+), 731 deletions(-)
 create mode 100644 packages/ui/src/fields/Relationship/Input.tsx

diff --git a/packages/payload/src/fields/config/types.ts b/packages/payload/src/fields/config/types.ts
index 3050e6250cd..a1411e2f3c4 100644
--- a/packages/payload/src/fields/config/types.ts
+++ b/packages/payload/src/fields/config/types.ts
@@ -1174,7 +1174,7 @@ export type PolymorphicRelationshipField = {
 
 export type PolymorphicRelationshipFieldClient = {
   admin?: {
-    sortOptions?: Pick<PolymorphicRelationshipField['admin'], 'sortOptions'>
+    sortOptions?: PolymorphicRelationshipField['admin']['sortOptions']
   } & RelationshipAdminClient
 } & Pick<PolymorphicRelationshipField, 'relationTo'> &
   SharedRelationshipPropertiesClient
diff --git a/packages/ui/src/fields/Relationship/Input.tsx b/packages/ui/src/fields/Relationship/Input.tsx
new file mode 100644
index 00000000000..530fb313357
--- /dev/null
+++ b/packages/ui/src/fields/Relationship/Input.tsx
@@ -0,0 +1,759 @@
+'use client'
+import type { FilterOptionsResult, PaginatedDocs, ValueWithRelation, Where } from 'payload'
+
+import { dequal } from 'dequal/lite'
+import { wordBoundariesRegex } from 'payload/shared'
+import * as qs from 'qs-esm'
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
+
+import type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'
+import type { ListDrawerProps } from '../../elements/ListDrawer/types.js'
+import type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'
+import type { GetResults, Option, RelationshipInputProps, Value } from './types.js'
+
+import { AddNewRelation } from '../../elements/AddNewRelation/index.js'
+import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'
+import { useListDrawer } from '../../elements/ListDrawer/index.js'
+import { ReactSelect } from '../../elements/ReactSelect/index.js'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { FieldDescription } from '../../fields/FieldDescription/index.js'
+import { FieldError } from '../../fields/FieldError/index.js'
+import { FieldLabel } from '../../fields/FieldLabel/index.js'
+import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js'
+import { useEffectEvent } from '../../hooks/useEffectEvent.js'
+import { useAuth } from '../../providers/Auth/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { fieldBaseClass } from '../shared/index.js'
+import { createRelationMap } from './createRelationMap.js'
+import { findOptionsByValue } from './findOptionsByValue.js'
+import { optionsReducer } from './optionsReducer.js'
+import { MultiValueLabel } from './select-components/MultiValueLabel/index.js'
+import { SingleValue } from './select-components/SingleValue/index.js'
+import './index.scss'
+
+const baseClass = 'relationship'
+
+export const RelationshipInput: React.FC<RelationshipInputProps> = (props) => {
+  const {
+    AfterInput,
+    allowCreate = true,
+    allowEdit = true,
+    appearance = 'select',
+    BeforeInput,
+    className,
+    description,
+    Description,
+    Error,
+    filterOptions,
+    hasMany,
+    initialValue,
+    isPolymorphic,
+    isSortable = true,
+    label,
+    Label,
+    localized,
+    maxResultsPerRequest = 10,
+    onChange,
+    path,
+    readOnly,
+    relationTo,
+    required,
+    showError,
+    sortOptions,
+    style,
+    value,
+  } = props
+
+  const { config, getEntityConfig } = useConfig()
+
+  const {
+    routes: { api },
+    serverURL,
+  } = config
+
+  const { i18n, t } = useTranslation()
+  const { permissions } = useAuth()
+  const { code: locale } = useLocale()
+
+  const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState<
+    Parameters<ReactSelectAdapterProps['customProps']['onDocumentDrawerOpen']>[0]
+  >({
+    id: undefined,
+    collectionSlug: undefined,
+    hasReadPermission: false,
+  })
+
+  const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1)
+  const [lastLoadedPage, setLastLoadedPage] = useState<Record<string, number>>({})
+  const [errorLoading, setErrorLoading] = useState('')
+  const [search, setSearch] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false)
+  const [menuIsOpen, setMenuIsOpen] = useState(false)
+  const hasLoadedFirstPageRef = useRef(false)
+
+  const [options, dispatchOptions] = useReducer(optionsReducer, [])
+
+  const valueRef = useRef(value)
+  // the line below seems odd
+  valueRef.current = value
+
+  const [DocumentDrawer, , { isDrawerOpen, openDrawer }] = useDocumentDrawer({
+    id: currentlyOpenRelationship.id,
+    collectionSlug: currentlyOpenRelationship.collectionSlug,
+  })
+
+  // Filter selected values from displaying in the list drawer
+  const listDrawerFilterOptions = useMemo<FilterOptionsResult>(() => {
+    let newFilterOptions = filterOptions
+
+    if (value) {
+      ;(hasMany === false ? [value] : value).forEach((val) => {
+        relationTo.forEach((relation) => {
+          newFilterOptions = {
+            ...(filterOptions || {}),
+            [relation]: {
+              ...(typeof filterOptions?.[relation] === 'object' ? filterOptions[relation] : {}),
+              id: {
+                not_in: [typeof val === 'object' ? val.value : val],
+              },
+            },
+          }
+        })
+      })
+    }
+
+    return newFilterOptions
+  }, [filterOptions, value, hasMany, relationTo])
+
+  const [
+    ListDrawer,
+    ,
+    { closeDrawer: closeListDrawer, isDrawerOpen: isListDrawerOpen, openDrawer: openListDrawer },
+  ] = useListDrawer({
+    collectionSlugs: relationTo,
+    filterOptions: listDrawerFilterOptions,
+  })
+
+  const onListSelect = useCallback<NonNullable<ListDrawerProps['onSelect']>>(
+    ({ collectionSlug, doc }) => {
+      if (hasMany) {
+        const withSelection = Array.isArray(value) ? value : []
+        withSelection.push({
+          relationTo: collectionSlug,
+          value: doc.id,
+        })
+        onChange(withSelection)
+      } else if (hasMany === false) {
+        onChange({
+          relationTo: collectionSlug,
+          value: doc.id,
+        })
+      }
+
+      closeListDrawer()
+    },
+    [hasMany, onChange, closeListDrawer, value],
+  )
+
+  const openDrawerWhenRelationChanges = useRef(false)
+
+  const getResults: GetResults = useCallback(
+    async ({
+      filterOptions,
+      lastFullyLoadedRelation: lastFullyLoadedRelationArg,
+      lastLoadedPage: lastLoadedPageArg,
+      onSuccess,
+      search: searchArg,
+      sort,
+      value: valueArg,
+    }) => {
+      if (!permissions) {
+        return
+      }
+      const lastFullyLoadedRelationToUse =
+        typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1
+
+      const relations = Array.isArray(relationTo) ? relationTo : [relationTo]
+      const relationsToFetch =
+        lastFullyLoadedRelationToUse === -1
+          ? relations
+          : relations.slice(lastFullyLoadedRelationToUse + 1)
+
+      let resultsFetched = 0
+      const relationMap = createRelationMap({
+        hasMany,
+        isPolymorphic,
+        relationTo,
+        value: valueArg,
+      })
+
+      if (!errorLoading) {
+        await relationsToFetch.reduce(async (priorRelation, relation) => {
+          const relationFilterOption = filterOptions?.[relation]
+
+          let lastLoadedPageToUse
+          if (search !== searchArg) {
+            lastLoadedPageToUse = 1
+          } else {
+            lastLoadedPageToUse = lastLoadedPageArg[relation] + 1
+          }
+          await priorRelation
+
+          if (relationFilterOption === false) {
+            setLastFullyLoadedRelation(relations.indexOf(relation))
+            return Promise.resolve()
+          }
+
+          if (resultsFetched < 10) {
+            const collection = getEntityConfig({ collectionSlug: relation })
+            const fieldToSearch = collection?.admin?.useAsTitle || 'id'
+            let fieldToSort = collection?.defaultSort || 'id'
+            if (typeof sortOptions === 'string') {
+              fieldToSort = sortOptions
+            } else if (sortOptions?.[relation]) {
+              fieldToSort = sortOptions[relation]
+            }
+
+            const query: {
+              [key: string]: unknown
+              where: Where
+            } = {
+              depth: 0,
+              draft: true,
+              limit: maxResultsPerRequest,
+              locale,
+              page: lastLoadedPageToUse,
+              sort: fieldToSort,
+              where: {
+                and: [
+                  {
+                    id: {
+                      not_in: relationMap[relation],
+                    },
+                  },
+                ],
+              },
+            }
+
+            if (searchArg) {
+              query.where.and.push({
+                [fieldToSearch]: {
+                  like: searchArg,
+                },
+              })
+            }
+
+            if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
+              query.where.and.push(relationFilterOption)
+            }
+
+            const response = await fetch(`${serverURL}${api}/${relation}`, {
+              body: qs.stringify(query),
+              credentials: 'include',
+              headers: {
+                'Accept-Language': i18n.language,
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'X-HTTP-Method-Override': 'GET',
+              },
+              method: 'POST',
+            })
+
+            if (response.ok) {
+              const data: PaginatedDocs<unknown> = await response.json()
+              setLastLoadedPage((prevState) => {
+                return {
+                  ...prevState,
+                  [relation]: lastLoadedPageToUse,
+                }
+              })
+
+              if (!data.nextPage) {
+                setLastFullyLoadedRelation(relations.indexOf(relation))
+              }
+
+              if (data.docs.length > 0) {
+                resultsFetched += data.docs.length
+
+                dispatchOptions({
+                  type: 'ADD',
+                  collection,
+                  config,
+                  docs: data.docs,
+                  i18n,
+                  sort,
+                })
+              }
+            } else if (response.status === 403) {
+              setLastFullyLoadedRelation(relations.indexOf(relation))
+              dispatchOptions({
+                type: 'ADD',
+                collection,
+                config,
+                docs: [],
+                i18n,
+                ids: relationMap[relation],
+                sort,
+              })
+            } else {
+              setErrorLoading(t('error:unspecific'))
+            }
+          }
+        }, Promise.resolve())
+
+        if (typeof onSuccess === 'function') {
+          onSuccess()
+        }
+      }
+    },
+    [
+      permissions,
+      relationTo,
+      hasMany,
+      isPolymorphic,
+      errorLoading,
+      search,
+      getEntityConfig,
+      sortOptions,
+      maxResultsPerRequest,
+      locale,
+      serverURL,
+      api,
+      i18n,
+      config,
+      t,
+    ],
+  )
+
+  const updateSearch = useDebouncedCallback((searchArg: string, valueArg: Value | Value[]) => {
+    void getResults({
+      filterOptions,
+      lastLoadedPage: {},
+      search: searchArg,
+      sort: true,
+      value: valueArg,
+    })
+    setSearch(searchArg)
+  }, 300)
+
+  const handleInputChange = useCallback(
+    (searchArg: string, valueArg: Value | Value[]) => {
+      if (search !== searchArg) {
+        setLastLoadedPage({})
+        updateSearch(searchArg, valueArg, searchArg !== '')
+      }
+    },
+    [search, updateSearch],
+  )
+
+  const handleValueChange = useEffectEvent((value: Value | Value[]) => {
+    const relationMap = createRelationMap({
+      hasMany,
+      isPolymorphic,
+      relationTo,
+      value,
+    })
+
+    void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
+      await priorRelation
+
+      const idsToLoad = ids.filter((id) => {
+        return !options.find((optionGroup) =>
+          optionGroup?.options?.find(
+            (option) => option.value === id && option.relationTo === relation,
+          ),
+        )
+      })
+
+      if (idsToLoad.length > 0) {
+        const query = {
+          depth: 0,
+          draft: true,
+          limit: idsToLoad.length,
+          locale,
+          where: {
+            id: {
+              in: idsToLoad,
+            },
+          },
+        }
+
+        if (!errorLoading) {
+          const response = await fetch(`${serverURL}${api}/${relation}`, {
+            body: qs.stringify(query),
+            credentials: 'include',
+            headers: {
+              'Accept-Language': i18n.language,
+              'Content-Type': 'application/x-www-form-urlencoded',
+              'X-HTTP-Method-Override': 'GET',
+            },
+            method: 'POST',
+          })
+
+          const collection = getEntityConfig({ collectionSlug: relation })
+          let docs = []
+
+          if (response.ok) {
+            const data = await response.json()
+            docs = data.docs
+          }
+
+          dispatchOptions({
+            type: 'ADD',
+            collection,
+            config,
+            docs,
+            i18n,
+            ids: idsToLoad,
+            sort: true,
+          })
+        }
+      }
+    }, Promise.resolve())
+  })
+
+  const prevValue = useRef(value)
+  const isFirstRenderRef = useRef(true)
+  // ///////////////////////////////////
+  // Ensure we have an option for each value
+  // ///////////////////////////////////
+  useEffect(() => {
+    if (isFirstRenderRef.current || !dequal(value, prevValue.current)) {
+      handleValueChange(value)
+    }
+    isFirstRenderRef.current = false
+    prevValue.current = value
+  }, [value])
+
+  // Determine if we should switch to word boundary search
+  useEffect(() => {
+    const relations = Array.isArray(relationTo) ? relationTo : [relationTo]
+    const isIdOnly = relations.reduce((idOnly, relation) => {
+      const collection = getEntityConfig({ collectionSlug: relation })
+      const fieldToSearch = collection?.admin?.useAsTitle || 'id'
+      return fieldToSearch === 'id' && idOnly
+    }, true)
+    setEnableWordBoundarySearch(!isIdOnly)
+  }, [relationTo, getEntityConfig])
+
+  const getResultsEffectEvent: GetResults = useEffectEvent(async (args) => {
+    return await getResults(args)
+  })
+
+  // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
+  // Note - effect should not run on first run
+  useEffect(() => {
+    // If the menu is open while filterOptions changes
+    // due to latency of form state and fast clicking into this field,
+    // re-fetch options
+    if (hasLoadedFirstPageRef.current && menuIsOpen) {
+      setIsLoading(true)
+      void getResultsEffectEvent({
+        filterOptions,
+        lastLoadedPage: {},
+        onSuccess: () => {
+          hasLoadedFirstPageRef.current = true
+          setIsLoading(false)
+        },
+        value: valueRef.current,
+      })
+    }
+
+    // If the menu is not open, still reset the field state
+    // because we need to get new options next time the menu opens
+    dispatchOptions({
+      type: 'CLEAR',
+      exemptValues: valueRef.current,
+    })
+
+    setLastFullyLoadedRelation(-1)
+    setLastLoadedPage({})
+  }, [relationTo, filterOptions, locale, path, menuIsOpen])
+
+  const onSave = useCallback<DocumentDrawerProps['onSave']>(
+    (args) => {
+      dispatchOptions({
+        type: 'UPDATE',
+        collection: args.collectionConfig,
+        config,
+        doc: args.doc,
+        i18n,
+      })
+
+      const docID = args.doc.id
+
+      if (hasMany) {
+        const currentValue = valueRef.current
+          ? Array.isArray(valueRef.current)
+            ? valueRef.current
+            : [valueRef.current]
+          : []
+
+        const unchanged = currentValue.some((option: ValueWithRelation) => {
+          return option.value === docID && option.relationTo === args.collectionConfig.slug
+        })
+
+        const valuesToSet = currentValue.map((option: ValueWithRelation) => {
+          return {
+            relationTo: option.value === docID ? args.collectionConfig.slug : option.relationTo,
+            value: option.value,
+          }
+        })
+
+        onChange(valuesToSet, unchanged)
+      } else if (hasMany === false) {
+        const unchanged = !Array.isArray(valueRef.current) && valueRef.current.value === docID
+
+        onChange({ relationTo: args.collectionConfig.slug, value: docID }, unchanged)
+      }
+    },
+    [i18n, config, hasMany, onChange],
+  )
+
+  const onDuplicate = useCallback<DocumentDrawerProps['onDuplicate']>(
+    (args) => {
+      dispatchOptions({
+        type: 'ADD',
+        collection: args.collectionConfig,
+        config,
+        docs: [args.doc],
+        i18n,
+        sort: true,
+      })
+
+      if (hasMany) {
+        onChange(
+          valueRef.current
+            ? (valueRef.current as ValueWithRelation[]).concat({
+                relationTo: args.collectionConfig.slug,
+                value: args.doc.id,
+              })
+            : null,
+        )
+      } else if (hasMany === false) {
+        onChange({
+          relationTo: args.collectionConfig.slug,
+          value: args.doc.id,
+        })
+      }
+    },
+    [i18n, config, hasMany, onChange],
+  )
+
+  const onDelete = useCallback<DocumentDrawerProps['onDelete']>(
+    (args) => {
+      dispatchOptions({
+        id: args.id,
+        type: 'REMOVE',
+        collection: args.collectionConfig,
+        config,
+        i18n,
+      })
+
+      if (hasMany) {
+        onChange(
+          valueRef.current
+            ? (valueRef.current as ValueWithRelation[]).filter((option) => {
+                return option.value !== args.id
+              })
+            : null,
+        )
+      } else {
+        onChange(null)
+      }
+
+      return
+    },
+    [i18n, config, hasMany, onChange],
+  )
+
+  const filterOption = useCallback((item: Option, searchFilter: string) => {
+    if (!searchFilter) {
+      return true
+    }
+    const r = wordBoundariesRegex(searchFilter || '')
+    // breaking the labels to search into smaller parts increases performance
+    const breakApartThreshold = 250
+    let labelString = String(item.label)
+    // strings less than breakApartThreshold length won't be chunked
+    while (labelString.length > breakApartThreshold) {
+      // slicing by the next space after the length of the search input prevents slicing the string up by partial words
+      const indexOfSpace = labelString.indexOf(' ', searchFilter.length)
+      if (
+        r.test(labelString.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))
+      ) {
+        return true
+      }
+      labelString = labelString.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1)
+    }
+    return r.test(labelString.slice(-breakApartThreshold))
+  }, [])
+
+  const onDocumentDrawerOpen = useCallback<
+    ReactSelectAdapterProps['customProps']['onDocumentDrawerOpen']
+  >(({ id, collectionSlug, hasReadPermission }) => {
+    openDrawerWhenRelationChanges.current = true
+    setCurrentlyOpenRelationship({
+      id,
+      collectionSlug,
+      hasReadPermission,
+    })
+  }, [])
+
+  useEffect(() => {
+    if (openDrawerWhenRelationChanges.current) {
+      openDrawer()
+      openDrawerWhenRelationChanges.current = false
+    }
+  }, [openDrawer, currentlyOpenRelationship])
+
+  const valueToRender = findOptionsByValue({ allowEdit, options, value })
+
+  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
+    valueToRender.value = null
+  }
+
+  return (
+    <div
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && 'error',
+        errorLoading && 'error-loading',
+        readOnly && `${baseClass}--read-only`,
+        !readOnly && allowCreate && `${baseClass}--allow-create`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      id={`field-${path.replace(/\./g, '__')}`}
+      style={style}
+    >
+      <RenderCustomComponent
+        CustomComponent={Label}
+        Fallback={
+          <FieldLabel label={label} localized={localized} path={path} required={required} />
+        }
+      />
+      <div className={`${fieldBaseClass}__wrap`}>
+        <RenderCustomComponent
+          CustomComponent={Error}
+          Fallback={<FieldError path={path} showError={showError} />}
+        />
+        {BeforeInput}
+        {!errorLoading && (
+          <div className={`${baseClass}__wrap`}>
+            <ReactSelect
+              backspaceRemovesValue={!(isDrawerOpen || isListDrawerOpen)}
+              components={{
+                MultiValueLabel,
+                SingleValue,
+                ...(appearance !== 'select' && { DropdownIndicator: null }),
+              }}
+              customProps={{
+                disableKeyDown: isDrawerOpen || isListDrawerOpen,
+                disableMouseDown: isDrawerOpen || isListDrawerOpen,
+                onDocumentDrawerOpen,
+                onSave,
+              }}
+              disabled={readOnly || isDrawerOpen || isListDrawerOpen}
+              filterOption={enableWordBoundarySearch ? filterOption : undefined}
+              getOptionValue={(option: ValueWithRelation) => {
+                if (!option) {
+                  return undefined
+                }
+                return hasMany && Array.isArray(relationTo)
+                  ? `${option.relationTo}_${option.value}`
+                  : (option.value as string)
+              }}
+              isLoading={appearance === 'select' && isLoading}
+              isMulti={hasMany}
+              isSearchable={appearance === 'select'}
+              isSortable={isSortable}
+              menuIsOpen={appearance === 'select' ? menuIsOpen : false}
+              onChange={
+                !readOnly
+                  ? (selected) => {
+                      if (hasMany) {
+                        if (selected === null) {
+                          onChange([])
+                        } else if (Array.isArray(selected)) {
+                          onChange(selected as ValueWithRelation[])
+                        }
+                      } else if (hasMany === false) {
+                        if (selected === null) {
+                          onChange(null)
+                        } else if (!Array.isArray(selected)) {
+                          // @todo: parent will need to handle polymorphic values
+                          onChange(selected as ValueWithRelation)
+                        }
+                      }
+                    }
+                  : undefined
+              }
+              onInputChange={(newSearch) => handleInputChange(newSearch, value)}
+              onMenuClose={() => {
+                setMenuIsOpen(false)
+              }}
+              onMenuOpen={() => {
+                if (appearance === 'drawer') {
+                  openListDrawer()
+                } else if (appearance === 'select') {
+                  setMenuIsOpen(true)
+                  if (!hasLoadedFirstPageRef.current) {
+                    setIsLoading(true)
+                    void getResults({
+                      filterOptions,
+                      lastLoadedPage: {},
+                      onSuccess: () => {
+                        hasLoadedFirstPageRef.current = true
+                        setIsLoading(false)
+                      },
+                      value: initialValue,
+                    })
+                  }
+                }
+              }}
+              onMenuScrollToBottom={() => {
+                void getResults({
+                  filterOptions,
+                  lastFullyLoadedRelation,
+                  lastLoadedPage,
+                  search,
+                  sort: false,
+                  value: initialValue,
+                })
+              }}
+              options={options}
+              showError={showError}
+              value={valueToRender ?? null}
+            />
+            {!readOnly && allowCreate && (
+              <AddNewRelation
+                hasMany={hasMany}
+                path={path}
+                relationTo={relationTo}
+                setValue={onChange}
+                value={value}
+              />
+            )}
+          </div>
+        )}
+        {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}
+        {AfterInput}
+        <RenderCustomComponent
+          CustomComponent={Description}
+          Fallback={<FieldDescription description={description} path={path} />}
+        />
+      </div>
+      {currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && (
+        <DocumentDrawer onDelete={onDelete} onDuplicate={onDuplicate} onSave={onSave} />
+      )}
+      {appearance === 'drawer' && !readOnly && (
+        <ListDrawer allowCreate={allowCreate} enableRowSelections={false} onSelect={onListSelect} />
+      )}
+    </div>
+  )
+}
diff --git a/packages/ui/src/fields/Relationship/createRelationMap.ts b/packages/ui/src/fields/Relationship/createRelationMap.ts
index 6a3d030c2ae..593fa284828 100644
--- a/packages/ui/src/fields/Relationship/createRelationMap.ts
+++ b/packages/ui/src/fields/Relationship/createRelationMap.ts
@@ -7,20 +7,20 @@ type RelationMap = {
 
 type CreateRelationMap = (args: {
   hasMany: boolean
-  relationTo: string | string[]
+  isPolymorphic: boolean
+  relationTo: string[]
   value: null | Value | Value[] // really needs to be `ValueWithRelation`
 }) => RelationMap
 
-export const createRelationMap: CreateRelationMap = ({ hasMany, relationTo, value }) => {
-  const hasMultipleRelations = Array.isArray(relationTo)
-  let relationMap: RelationMap
-  if (Array.isArray(relationTo)) {
-    relationMap = relationTo.reduce((map, current) => {
-      return { ...map, [current]: [] }
-    }, {})
-  } else {
-    relationMap = { [relationTo]: [] }
-  }
+export const createRelationMap: CreateRelationMap = ({
+  hasMany,
+  isPolymorphic,
+  relationTo,
+  value,
+}) => {
+  const relationMap: RelationMap = relationTo.reduce((map, current) => {
+    return { ...map, [current]: [] }
+  }, {})
 
   if (value === null) {
     return relationMap
@@ -38,25 +38,20 @@ export const createRelationMap: CreateRelationMap = ({ hasMany, relationTo, valu
 
   if (hasMany && Array.isArray(value)) {
     value.forEach((val) => {
-      if (
-        hasMultipleRelations &&
-        typeof val === 'object' &&
-        'relationTo' in val &&
-        'value' in val
-      ) {
+      if (isPolymorphic && typeof val === 'object' && 'relationTo' in val && 'value' in val) {
         add(val.relationTo, val.value)
       }
 
-      if (!hasMultipleRelations && typeof relationTo === 'string') {
+      if (!isPolymorphic && typeof relationTo === 'string') {
         add(relationTo, val)
       }
     })
-  } else if (hasMultipleRelations && Array.isArray(relationTo)) {
+  } else if (isPolymorphic) {
     if (typeof value === 'object' && 'relationTo' in value && 'value' in value) {
       add(value.relationTo, value.value)
     }
   } else {
-    add(relationTo, value)
+    add(relationTo[0], value)
   }
 
   return relationMap
diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
index 449c1e1374b..473c0d62712 100644
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -1,49 +1,15 @@
 'use client'
-import type {
-  FilterOptionsResult,
-  PaginatedDocs,
-  RelationshipFieldClientComponent,
-  Where,
-} from 'payload'
+import type { RelationshipFieldClientComponent, ValueWithRelation } from 'payload'
 
-import { dequal } from 'dequal/lite'
-import { wordBoundariesRegex } from 'payload/shared'
-import * as qs from 'qs-esm'
-import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 
-import type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'
-import type { ListDrawerProps } from '../../elements/ListDrawer/types.js'
-import type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'
-import type { GetResults, Option, Value } from './types.js'
+import type { Value } from './types.js'
 
-import { AddNewRelation } from '../../elements/AddNewRelation/index.js'
-import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'
-import { useListDrawer } from '../../elements/ListDrawer/index.js'
-import { ReactSelect } from '../../elements/ReactSelect/index.js'
-import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
-import { FieldDescription } from '../../fields/FieldDescription/index.js'
-import { FieldError } from '../../fields/FieldError/index.js'
-import { FieldLabel } from '../../fields/FieldLabel/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
-import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js'
-import { useEffectEvent } from '../../hooks/useEffectEvent.js'
-import { useAuth } from '../../providers/Auth/index.js'
-import { useConfig } from '../../providers/Config/index.js'
-import { useLocale } from '../../providers/Locale/index.js'
-import { useTranslation } from '../../providers/Translation/index.js'
-import './index.scss'
 import { mergeFieldStyles } from '../mergeFieldStyles.js'
-import { fieldBaseClass } from '../shared/index.js'
-import { createRelationMap } from './createRelationMap.js'
-import { findOptionsByValue } from './findOptionsByValue.js'
-import { optionsReducer } from './optionsReducer.js'
-import { MultiValueLabel } from './select-components/MultiValueLabel/index.js'
-import { SingleValue } from './select-components/SingleValue/index.js'
-
-const maxResultsPerRequest = 10
-
-const baseClass = 'relationship'
+import { RelationshipInput } from './Input.js'
+import './index.scss'
 
 const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) => {
   const {
@@ -69,35 +35,6 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
     validate,
   } = props
 
-  const { config, getEntityConfig } = useConfig()
-
-  const {
-    routes: { api },
-    serverURL,
-  } = config
-
-  const { i18n, t } = useTranslation()
-  const { permissions } = useAuth()
-  const { code: locale } = useLocale()
-  const hasMultipleRelations = Array.isArray(relationTo)
-
-  const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState<
-    Parameters<ReactSelectAdapterProps['customProps']['onDocumentDrawerOpen']>[0]
-  >({
-    id: undefined,
-    collectionSlug: undefined,
-    hasReadPermission: false,
-  })
-
-  const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1)
-  const [lastLoadedPage, setLastLoadedPage] = useState<Record<string, number>>({})
-  const [errorLoading, setErrorLoading] = useState('')
-  const [search, setSearch] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false)
-  const [menuIsOpen, setMenuIsOpen] = useState(false)
-  const hasLoadedFirstPageRef = useRef(false)
-
   const memoizedValidate = useCallback(
     (value, validationOptions) => {
       if (typeof validate === 'function') {
@@ -121,670 +58,115 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
     validate: memoizedValidate,
   })
 
-  const [options, dispatchOptions] = useReducer(optionsReducer, [])
-
-  const valueRef = useRef(value)
-  valueRef.current = value
-
-  const [DocumentDrawer, , { isDrawerOpen, openDrawer }] = useDocumentDrawer({
-    id: currentlyOpenRelationship.id,
-    collectionSlug: currentlyOpenRelationship.collectionSlug,
-  })
-
-  // Filter selected values from displaying in the list drawer
-  const listDrawerFilterOptions = useMemo<FilterOptionsResult>(() => {
-    let newFilterOptions = filterOptions
-
-    if (value) {
-      ;(Array.isArray(value) ? value : [value]).forEach((val) => {
-        ;(Array.isArray(relationTo) ? relationTo : [relationTo]).forEach((relationTo) => {
-          newFilterOptions = {
-            ...(filterOptions || {}),
-            [relationTo]: {
-              ...(typeof filterOptions?.[relationTo] === 'object' ? filterOptions[relationTo] : {}),
-              id: {
-                not_in: [typeof val === 'object' ? val.value : val],
-              },
-            },
-          }
-        })
-      })
-    }
-
-    return newFilterOptions
-  }, [filterOptions, value, relationTo])
-
-  const [
-    ListDrawer,
-    ,
-    { closeDrawer: closeListDrawer, isDrawerOpen: isListDrawerOpen, openDrawer: openListDrawer },
-  ] = useListDrawer({
-    collectionSlugs: hasMultipleRelations ? relationTo : [relationTo],
-    filterOptions: listDrawerFilterOptions,
-  })
-
-  const onListSelect = useCallback<NonNullable<ListDrawerProps['onSelect']>>(
-    ({ collectionSlug, doc }) => {
-      const formattedSelection = hasMultipleRelations
-        ? {
-            relationTo: collectionSlug,
-            value: doc.id,
-          }
-        : doc.id
-
-      if (hasMany) {
-        const withSelection = Array.isArray(value) ? value : []
-        withSelection.push(formattedSelection)
-        setValue(withSelection)
-      } else {
-        setValue(formattedSelection)
-      }
-
-      closeListDrawer()
-    },
-    [hasMany, hasMultipleRelations, setValue, closeListDrawer, value],
-  )
-
-  const openDrawerWhenRelationChanges = useRef(false)
+  const styles = useMemo(() => mergeFieldStyles(field), [field])
+  const isPolymorphic = Array.isArray(relationTo)
+  const safeRelationTo = Array.isArray(relationTo) ? relationTo : [relationTo]
 
-  const getResults: GetResults = useCallback(
-    async ({
-      filterOptions,
-      lastFullyLoadedRelation: lastFullyLoadedRelationArg,
-      lastLoadedPage: lastLoadedPageArg,
-      onSuccess,
-      search: searchArg,
-      sort,
-      value: valueArg,
-    }) => {
-      if (!permissions) {
+  const handleChangeHasMulti = useCallback(
+    (value: ValueWithRelation[], disableModifyForm?: boolean) => {
+      if (!value) {
+        setValue(null, Boolean(disableModifyForm))
         return
       }
-      const lastFullyLoadedRelationToUse =
-        typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1
-
-      const relations = Array.isArray(relationTo) ? relationTo : [relationTo]
-      const relationsToFetch =
-        lastFullyLoadedRelationToUse === -1
-          ? relations
-          : relations.slice(lastFullyLoadedRelationToUse + 1)
-
-      let resultsFetched = 0
-      const relationMap = createRelationMap({
-        hasMany,
-        relationTo,
-        value: valueArg,
-      })
-
-      if (!errorLoading) {
-        await relationsToFetch.reduce(async (priorRelation, relation) => {
-          const relationFilterOption = filterOptions?.[relation]
-
-          let lastLoadedPageToUse
-          if (search !== searchArg) {
-            lastLoadedPageToUse = 1
-          } else {
-            lastLoadedPageToUse = lastLoadedPageArg[relation] + 1
-          }
-          await priorRelation
-
-          if (relationFilterOption === false) {
-            setLastFullyLoadedRelation(relations.indexOf(relation))
-            return Promise.resolve()
-          }
-
-          if (resultsFetched < 10) {
-            const collection = getEntityConfig({ collectionSlug: relation })
-            const fieldToSearch = collection?.admin?.useAsTitle || 'id'
-            let fieldToSort = collection?.defaultSort || 'id'
-            if (typeof sortOptions === 'string') {
-              fieldToSort = sortOptions
-            } else if (sortOptions?.[relation]) {
-              fieldToSort = sortOptions[relation]
-            }
-
-            const query: {
-              [key: string]: unknown
-              where: Where
-            } = {
-              depth: 0,
-              draft: true,
-              limit: maxResultsPerRequest,
-              locale,
-              page: lastLoadedPageToUse,
-              sort: fieldToSort,
-              where: {
-                and: [
-                  {
-                    id: {
-                      not_in: relationMap[relation],
-                    },
-                  },
-                ],
-              },
-            }
-
-            if (searchArg) {
-              query.where.and.push({
-                [fieldToSearch]: {
-                  like: searchArg,
-                },
-              })
-            }
-
-            if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
-              query.where.and.push(relationFilterOption)
-            }
-
-            const response = await fetch(`${serverURL}${api}/${relation}`, {
-              body: qs.stringify(query),
-              credentials: 'include',
-              headers: {
-                'Accept-Language': i18n.language,
-                'Content-Type': 'application/x-www-form-urlencoded',
-                'X-HTTP-Method-Override': 'GET',
-              },
-              method: 'POST',
-            })
-
-            if (response.ok) {
-              const data: PaginatedDocs<unknown> = await response.json()
-              setLastLoadedPage((prevState) => {
-                return {
-                  ...prevState,
-                  [relation]: lastLoadedPageToUse,
-                }
-              })
-
-              if (!data.nextPage) {
-                setLastFullyLoadedRelation(relations.indexOf(relation))
-              }
-
-              if (data.docs.length > 0) {
-                resultsFetched += data.docs.length
-
-                dispatchOptions({
-                  type: 'ADD',
-                  collection,
-                  config,
-                  docs: data.docs,
-                  i18n,
-                  sort,
-                })
-              }
-            } else if (response.status === 403) {
-              setLastFullyLoadedRelation(relations.indexOf(relation))
-              dispatchOptions({
-                type: 'ADD',
-                collection,
-                config,
-                docs: [],
-                i18n,
-                ids: relationMap[relation],
-                sort,
-              })
-            } else {
-              setErrorLoading(t('error:unspecific'))
-            }
-          }
-        }, Promise.resolve())
-
-        if (typeof onSuccess === 'function') {
-          onSuccess()
-        }
-      }
-    },
-    [
-      permissions,
-      relationTo,
-      hasMany,
-      errorLoading,
-      search,
-      getEntityConfig,
-      locale,
-      serverURL,
-      sortOptions,
-      api,
-      i18n,
-      config,
-      t,
-    ],
-  )
-
-  const updateSearch = useDebouncedCallback((searchArg: string, valueArg: Value | Value[]) => {
-    void getResults({
-      filterOptions,
-      lastLoadedPage: {},
-      search: searchArg,
-      sort: true,
-      value: valueArg,
-    })
-    setSearch(searchArg)
-  }, 300)
-
-  const handleInputChange = useCallback(
-    (searchArg: string, valueArg: Value | Value[]) => {
-      if (search !== searchArg) {
-        setLastLoadedPage({})
-        updateSearch(searchArg, valueArg, searchArg !== '')
-      }
-    },
-    [search, updateSearch],
-  )
-
-  const handleValueChange = useEffectEvent((value: Value | Value[]) => {
-    const relationMap = createRelationMap({
-      hasMany,
-      relationTo,
-      value,
-    })
-
-    void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
-      await priorRelation
-
-      const idsToLoad = ids.filter((id) => {
-        return !options.find((optionGroup) =>
-          optionGroup?.options?.find(
-            (option) => option.value === id && option.relationTo === relation,
-          ),
-        )
-      })
-
-      if (idsToLoad.length > 0) {
-        const query = {
-          depth: 0,
-          draft: true,
-          limit: idsToLoad.length,
-          locale,
-          where: {
-            id: {
-              in: idsToLoad,
-            },
-          },
-        }
-
-        if (!errorLoading) {
-          const response = await fetch(`${serverURL}${api}/${relation}`, {
-            body: qs.stringify(query),
-            credentials: 'include',
-            headers: {
-              'Accept-Language': i18n.language,
-              'Content-Type': 'application/x-www-form-urlencoded',
-              'X-HTTP-Method-Override': 'GET',
-            },
-            method: 'POST',
-          })
-
-          const collection = getEntityConfig({ collectionSlug: relation })
-          let docs = []
-
-          if (response.ok) {
-            const data = await response.json()
-            docs = data.docs
-          }
 
-          dispatchOptions({
-            type: 'ADD',
-            collection,
-            config,
-            docs,
-            i18n,
-            ids: idsToLoad,
-            sort: true,
-          })
+      const dataToSet = value.map((val) => {
+        if (isPolymorphic) {
+          return val
+        } else {
+          return val.value
         }
-      }
-    }, Promise.resolve())
-  })
-
-  const prevValue = useRef(value)
-  const isFirstRenderRef = useRef(true)
-  // ///////////////////////////////////
-  // Ensure we have an option for each value
-  // ///////////////////////////////////
-  useEffect(() => {
-    if (isFirstRenderRef.current || !dequal(value, prevValue.current)) {
-      handleValueChange(value)
-    }
-    isFirstRenderRef.current = false
-    prevValue.current = value
-  }, [value])
-
-  // Determine if we should switch to word boundary search
-  useEffect(() => {
-    const relations = Array.isArray(relationTo) ? relationTo : [relationTo]
-    const isIdOnly = relations.reduce((idOnly, relation) => {
-      const collection = getEntityConfig({ collectionSlug: relation })
-      const fieldToSearch = collection?.admin?.useAsTitle || 'id'
-      return fieldToSearch === 'id' && idOnly
-    }, true)
-    setEnableWordBoundarySearch(!isIdOnly)
-  }, [relationTo, getEntityConfig])
-
-  const getResultsEffectEvent: GetResults = useEffectEvent(async (args) => {
-    return await getResults(args)
-  })
-
-  // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
-  // Note - effect should not run on first run
-  useEffect(() => {
-    // If the menu is open while filterOptions changes
-    // due to latency of form state and fast clicking into this field,
-    // re-fetch options
-    if (hasLoadedFirstPageRef.current && menuIsOpen) {
-      setIsLoading(true)
-      void getResultsEffectEvent({
-        filterOptions,
-        lastLoadedPage: {},
-        onSuccess: () => {
-          hasLoadedFirstPageRef.current = true
-          setIsLoading(false)
-        },
-        value: valueRef.current,
-      })
-    }
-
-    // If the menu is not open, still reset the field state
-    // because we need to get new options next time the menu opens
-    dispatchOptions({
-      type: 'CLEAR',
-      exemptValues: valueRef.current,
-    })
-
-    setLastFullyLoadedRelation(-1)
-    setLastLoadedPage({})
-  }, [relationTo, filterOptions, locale, path, menuIsOpen])
-
-  const onSave = useCallback<DocumentDrawerProps['onSave']>(
-    (args) => {
-      dispatchOptions({
-        type: 'UPDATE',
-        collection: args.collectionConfig,
-        config,
-        doc: args.doc,
-        i18n,
       })
 
-      const currentValue = valueRef.current
-      const docID = args.doc.id
-
-      if (hasMany) {
-        const unchanged = (currentValue as Option[]).some((option) =>
-          typeof option === 'string' ? option === docID : option.value === docID,
-        )
-
-        const valuesToSet = (currentValue as Option[]).map((option) =>
-          option.value === docID
-            ? { relationTo: args.collectionConfig.slug, value: docID }
-            : option,
-        )
-
-        setValue(valuesToSet, unchanged)
-      } else {
-        const unchanged = currentValue === docID
-
-        setValue({ relationTo: args.collectionConfig.slug, value: docID }, unchanged)
-      }
+      setValue(dataToSet, Boolean(disableModifyForm))
     },
-    [i18n, config, hasMany, setValue],
+    [isPolymorphic, setValue],
   )
 
-  const onDuplicate = useCallback<DocumentDrawerProps['onDuplicate']>(
-    (args) => {
-      dispatchOptions({
-        type: 'ADD',
-        collection: args.collectionConfig,
-        config,
-        docs: [args.doc],
-        i18n,
-        sort: true,
-      })
-
-      if (hasMany) {
-        setValue(
-          valueRef.current
-            ? (valueRef.current as Option[]).concat({
-                relationTo: args.collectionConfig.slug,
-                value: args.doc.id,
-              } as Option)
-            : null,
-        )
-      } else {
-        setValue({
-          relationTo: args.collectionConfig.slug,
-          value: args.doc.id,
-        })
+  const handleChangeSingle = useCallback(
+    (value: ValueWithRelation, disableModifyForm?: boolean) => {
+      if (!value) {
+        setValue(null, Boolean(disableModifyForm))
+        return
       }
-    },
-    [i18n, config, hasMany, setValue],
-  )
 
-  const onDelete = useCallback<DocumentDrawerProps['onDelete']>(
-    (args) => {
-      dispatchOptions({
-        id: args.id,
-        type: 'REMOVE',
-        collection: args.collectionConfig,
-        config,
-        i18n,
-      })
-
-      if (hasMany) {
-        setValue(
-          valueRef.current
-            ? (valueRef.current as Option[]).filter((option) => {
-                return option.value !== args.id
-              })
-            : null,
-        )
+      if (isPolymorphic) {
+        setValue(value, Boolean(disableModifyForm))
       } else {
-        setValue(null)
+        setValue(value.value, Boolean(disableModifyForm))
       }
-
-      return
     },
-    [i18n, config, hasMany, setValue],
+    [isPolymorphic, setValue],
   )
 
-  const filterOption = useCallback((item: Option, searchFilter: string) => {
-    if (!searchFilter) {
-      return true
-    }
-    const r = wordBoundariesRegex(searchFilter || '')
-    // breaking the labels to search into smaller parts increases performance
-    const breakApartThreshold = 250
-    let labelString = String(item.label)
-    // strings less than breakApartThreshold length won't be chunked
-    while (labelString.length > breakApartThreshold) {
-      // slicing by the next space after the length of the search input prevents slicing the string up by partial words
-      const indexOfSpace = labelString.indexOf(' ', searchFilter.length)
-      if (
-        r.test(labelString.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))
-      ) {
-        return true
-      }
-      labelString = labelString.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1)
-    }
-    return r.test(labelString.slice(-breakApartThreshold))
-  }, [])
-
-  const onDocumentDrawerOpen = useCallback<
-    ReactSelectAdapterProps['customProps']['onDocumentDrawerOpen']
-  >(({ id, collectionSlug, hasReadPermission }) => {
-    openDrawerWhenRelationChanges.current = true
-    setCurrentlyOpenRelationship({
-      id,
-      collectionSlug,
-      hasReadPermission,
-    })
-  }, [])
-
-  useEffect(() => {
-    if (openDrawerWhenRelationChanges.current) {
-      openDrawer()
-      openDrawerWhenRelationChanges.current = false
-    }
-  }, [openDrawer, currentlyOpenRelationship])
-
-  const valueToRender = findOptionsByValue({ allowEdit, options, value })
-
-  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
-    valueToRender.value = null
+  const sharedProps = {
+    AfterInput,
+    allowCreate,
+    allowEdit,
+    appearance,
+    BeforeInput,
+    className,
+    Description,
+    description,
+    Error,
+    filterOptions,
+    initialValue,
+    isPolymorphic: Array.isArray(relationTo),
+    isSortable,
+    Label,
+    label,
+    localized,
+    maxResultsPerRequest: 10,
+    maxRows: field?.maxRows,
+    minRows: field?.minRows,
+    path,
+    readOnly: readOnly || disabled,
+    relationTo: safeRelationTo,
+    required,
+    showError,
+    sortOptions: sortOptions as any, // todo: fix this, handle Record<string, string> type
+    style: styles,
   }
 
-  const styles = useMemo(() => mergeFieldStyles(field), [field])
-
-  return (
-    <div
-      className={[
-        fieldBaseClass,
-        baseClass,
-        className,
-        showError && 'error',
-        errorLoading && 'error-loading',
-        (readOnly || disabled) && `${baseClass}--read-only`,
-        !(readOnly || disabled) && allowCreate && `${baseClass}--allow-create`,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      id={`field-${path.replace(/\./g, '__')}`}
-      style={styles}
-    >
-      <RenderCustomComponent
-        CustomComponent={Label}
-        Fallback={
-          <FieldLabel label={label} localized={localized} path={path} required={required} />
+  if (hasMany) {
+    return (
+      <RelationshipInput
+        {...sharedProps}
+        hasMany={true}
+        onChange={handleChangeHasMulti}
+        value={
+          value
+            ? (Array.isArray(value) ? value : [value]).map((val) => {
+                if (isPolymorphic) {
+                  return val as ValueWithRelation
+                } else {
+                  return {
+                    relationTo: safeRelationTo[0],
+                    value: val as ValueWithRelation['value'],
+                  }
+                }
+              })
+            : null
         }
       />
-      <div className={`${fieldBaseClass}__wrap`}>
-        <RenderCustomComponent
-          CustomComponent={Error}
-          Fallback={<FieldError path={path} showError={showError} />}
-        />
-        {BeforeInput}
-        {!errorLoading && (
-          <div className={`${baseClass}__wrap`}>
-            <ReactSelect
-              backspaceRemovesValue={!(isDrawerOpen || isListDrawerOpen)}
-              components={{
-                MultiValueLabel,
-                SingleValue,
-                ...(appearance !== 'select' && { DropdownIndicator: null }),
-              }}
-              customProps={{
-                disableKeyDown: isDrawerOpen || isListDrawerOpen,
-                disableMouseDown: isDrawerOpen || isListDrawerOpen,
-                onDocumentDrawerOpen,
-                onSave,
-              }}
-              disabled={readOnly || disabled || isDrawerOpen || isListDrawerOpen}
-              filterOption={enableWordBoundarySearch ? filterOption : undefined}
-              getOptionValue={(option) => {
-                if (!option) {
-                  return undefined
-                }
-                return hasMany && Array.isArray(relationTo)
-                  ? `${option.relationTo}_${option.value}`
-                  : (option.value as string)
-              }}
-              isLoading={appearance === 'select' && isLoading}
-              isMulti={hasMany}
-              isSearchable={appearance === 'select'}
-              isSortable={isSortable}
-              menuIsOpen={appearance === 'select' ? menuIsOpen : false}
-              onChange={
-                !(readOnly || disabled)
-                  ? (selected) => {
-                      if (selected === null) {
-                        setValue(hasMany ? [] : null)
-                      } else if (hasMany && Array.isArray(selected)) {
-                        setValue(
-                          selected
-                            ? selected.map((option) => {
-                                if (hasMultipleRelations) {
-                                  return {
-                                    relationTo: option.relationTo,
-                                    value: option.value,
-                                  }
-                                }
+    )
+  }
 
-                                return option.value
-                              })
-                            : null,
-                        )
-                      } else if (hasMultipleRelations && !Array.isArray(selected)) {
-                        setValue({
-                          relationTo: selected.relationTo,
-                          value: selected.value,
-                        })
-                      } else if (!Array.isArray(selected)) {
-                        setValue(selected.value)
-                      }
-                    }
-                  : undefined
+  return (
+    <RelationshipInput
+      {...sharedProps}
+      hasMany={false}
+      onChange={handleChangeSingle}
+      value={
+        value
+          ? isPolymorphic
+            ? (value as ValueWithRelation)
+            : {
+                relationTo: safeRelationTo[0],
+                value: value as ValueWithRelation['value'],
               }
-              onInputChange={(newSearch) => handleInputChange(newSearch, value)}
-              onMenuClose={() => {
-                setMenuIsOpen(false)
-              }}
-              onMenuOpen={() => {
-                if (appearance === 'drawer') {
-                  openListDrawer()
-                } else if (appearance === 'select') {
-                  setMenuIsOpen(true)
-                  if (!hasLoadedFirstPageRef.current) {
-                    setIsLoading(true)
-                    void getResults({
-                      filterOptions,
-                      lastLoadedPage: {},
-                      onSuccess: () => {
-                        hasLoadedFirstPageRef.current = true
-                        setIsLoading(false)
-                      },
-                      value: initialValue,
-                    })
-                  }
-                }
-              }}
-              onMenuScrollToBottom={() => {
-                void getResults({
-                  filterOptions,
-                  lastFullyLoadedRelation,
-                  lastLoadedPage,
-                  search,
-                  sort: false,
-                  value: initialValue,
-                })
-              }}
-              options={options}
-              showError={showError}
-              value={valueToRender ?? null}
-            />
-            {!(readOnly || disabled) && allowCreate && (
-              <AddNewRelation
-                hasMany={hasMany}
-                path={path}
-                relationTo={relationTo}
-                setValue={setValue}
-                value={value}
-              />
-            )}
-          </div>
-        )}
-        {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}
-        {AfterInput}
-        <RenderCustomComponent
-          CustomComponent={Description}
-          Fallback={<FieldDescription description={description} path={path} />}
-        />
-      </div>
-      {currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && (
-        <DocumentDrawer onDelete={onDelete} onDuplicate={onDuplicate} onSave={onSave} />
-      )}
-      {appearance === 'drawer' && !readOnly && (
-        <ListDrawer allowCreate={allowCreate} enableRowSelections={false} onSelect={onListSelect} />
-      )}
-    </div>
+          : null
+      }
+    />
   )
 }
 
diff --git a/packages/ui/src/fields/Relationship/types.ts b/packages/ui/src/fields/Relationship/types.ts
index 8336f39ebc2..1ac1797cfdc 100644
--- a/packages/ui/src/fields/Relationship/types.ts
+++ b/packages/ui/src/fields/Relationship/types.ts
@@ -1,5 +1,12 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { ClientCollectionConfig, ClientConfig, FilterOptionsResult } from 'payload'
+import type {
+  ClientCollectionConfig,
+  ClientConfig,
+  CollectionSlug,
+  FilterOptionsResult,
+  StaticDescription,
+  StaticLabel,
+} from 'payload'
 
 export type Option = {
   allowEdit: boolean
@@ -63,3 +70,44 @@ export type GetResults = (args: {
   sort?: boolean
   value?: Value | Value[]
 }) => Promise<void>
+
+export type RelationshipInputProps = {
+  readonly AfterInput: React.ReactNode // optional
+  readonly allowCreate: boolean // optional
+  readonly allowEdit: boolean // optional
+  readonly appearance: 'drawer' | 'select' // optional
+  readonly BeforeInput: React.ReactNode // optional
+  readonly className: string // optional
+  readonly Description: React.ReactNode // optional
+  readonly description: StaticDescription // optional
+  readonly Error: React.ReactNode // optional
+  readonly filterOptions: FilterOptionsResult // optional
+  readonly initialValue: Value | Value[] // optional
+  readonly isPolymorphic: boolean
+  readonly isSortable: boolean // optional
+  readonly Label: React.ReactNode // optional
+  readonly label: StaticLabel // optional
+  readonly localized: boolean // optional
+  readonly maxResultsPerRequest: number // optional
+  readonly maxRows: number // optional
+  readonly minRows: number // optional
+  readonly path: string
+  readonly readOnly: boolean // optional
+  readonly relationTo: string[]
+  readonly required: boolean // optional
+  readonly showError: boolean // optional
+  readonly sortOptions: Partial<Record<CollectionSlug, string>> // optional
+  readonly style: React.CSSProperties // optional
+} & SharedRelationshipInputProps
+
+type SharedRelationshipInputProps =
+  | {
+      readonly hasMany: false
+      readonly onChange: (value: ValueWithRelation, modifyForm?: boolean) => void
+      readonly value?: null | ValueWithRelation
+    }
+  | {
+      readonly hasMany: true
+      readonly onChange: (value: ValueWithRelation[], modifyForm?: boolean) => void
+      readonly value?: null | ValueWithRelation[]
+    }

From 65c202abb9bdf23a718f0cde307e0bec70450a07 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Tue, 6 May 2025 14:26:03 -0400
Subject: [PATCH 02/14] feat: adds confirm modal and syncs selector state

---
 .../src/components/TenantSelector/index.tsx   | 90 +++++++++++++++++--
 .../WatchTenantCollection/index.tsx           | 35 ++++++++
 .../plugin-multi-tenant/src/exports/client.ts |  1 +
 packages/plugin-multi-tenant/src/index.ts     | 27 ++++++
 .../TenantSelectionProvider/index.client.tsx  | 28 +++++-
 test/plugin-multi-tenant/config.ts            |  2 +-
 6 files changed, 175 insertions(+), 8 deletions(-)
 create mode 100644 packages/plugin-multi-tenant/src/components/WatchTenantCollection/index.tsx

diff --git a/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx b/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx
index 38d11df84ab..5b714f77f8c 100644
--- a/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx
+++ b/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx
@@ -3,18 +3,52 @@ import type { ReactSelectOption } from '@payloadcms/ui'
 import type { ViewTypes } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
-import { SelectInput, useTranslation } from '@payloadcms/ui'
+import {
+  ConfirmationModal,
+  SelectInput,
+  Translation,
+  useModal,
+  useTranslation,
+} from '@payloadcms/ui'
 import React from 'react'
 
+import type {
+  PluginMultiTenantTranslationKeys,
+  PluginMultiTenantTranslations,
+} from '../../../translations/index.js'
+
 import { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js'
 import './index.scss'
 
+const confirmSwitchTenantSlug = 'confirmSwitchTenant'
+
 export const TenantSelector = ({ label, viewType }: { label: string; viewType?: ViewTypes }) => {
-  const { options, selectedTenantID, setTenant } = useTenantSelection()
-  const { i18n } = useTranslation()
+  const { options, preventRefreshOnChange, selectedTenantID, setTenant } = useTenantSelection()
+  const { openModal } = useModal()
+  const { i18n, t } = useTranslation<
+    PluginMultiTenantTranslations,
+    PluginMultiTenantTranslationKeys
+  >()
+  const [tenantSelection, setTenantSelection] = React.useState<
+    ReactSelectOption | ReactSelectOption[]
+  >()
 
-  const handleChange = React.useCallback(
-    (option: ReactSelectOption | ReactSelectOption[]) => {
+  const selectedValue = React.useMemo(() => {
+    if (selectedTenantID) {
+      return options.find((option) => option.value === selectedTenantID)
+    }
+    return undefined
+  }, [options, selectedTenantID])
+
+  const newSelectedValue = React.useMemo(() => {
+    if (tenantSelection && 'value' in tenantSelection) {
+      return options.find((option) => option.value === tenantSelection.value)
+    }
+    return undefined
+  }, [options, tenantSelection])
+
+  const switchTenant = React.useCallback(
+    (option: ReactSelectOption | ReactSelectOption[] | undefined) => {
       if (option && 'value' in option) {
         setTenant({ id: option.value as string, refresh: true })
       } else {
@@ -24,6 +58,19 @@ export const TenantSelector = ({ label, viewType }: { label: string; viewType?:
     [setTenant],
   )
 
+  const onChange = React.useCallback(
+    (option: ReactSelectOption | ReactSelectOption[]) => {
+      if (!preventRefreshOnChange) {
+        switchTenant(option)
+        return
+      } else {
+        setTenantSelection(option)
+        openModal(confirmSwitchTenantSlug)
+      }
+    },
+    [openModal, preventRefreshOnChange, switchTenant],
+  )
+
   if (options.length <= 1) {
     return null
   }
@@ -34,11 +81,42 @@ export const TenantSelector = ({ label, viewType }: { label: string; viewType?:
         isClearable={viewType === 'list'}
         label={getTranslation(label, i18n)}
         name="setTenant"
-        onChange={handleChange}
+        onChange={onChange}
         options={options}
         path="setTenant"
         value={selectedTenantID as string | undefined}
       />
+
+      <ConfirmationModal
+        body={
+          <Translation
+            elements={{
+              0: ({ children }) => {
+                return <b>{children}</b>
+              },
+            }}
+            i18nKey="plugin-multi-tenant:confirm-tenant-switch--body"
+            t={t}
+            variables={{
+              fromTenant: selectedValue?.label,
+              toTenant: newSelectedValue?.label,
+            }}
+          />
+        }
+        heading={
+          <Translation
+            i18nKey="plugin-multi-tenant:confirm-tenant-switch--heading"
+            t={t}
+            variables={{
+              tenantLabel: label.toLowerCase(),
+            }}
+          />
+        }
+        modalSlug={confirmSwitchTenantSlug}
+        onConfirm={() => {
+          switchTenant(tenantSelection)
+        }}
+      />
     </div>
   )
 }
diff --git a/packages/plugin-multi-tenant/src/components/WatchTenantCollection/index.tsx b/packages/plugin-multi-tenant/src/components/WatchTenantCollection/index.tsx
new file mode 100644
index 00000000000..b20a559b310
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/components/WatchTenantCollection/index.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import type { ClientCollectionConfig } from 'payload'
+
+import { useConfig, useDocumentInfo, useEffectEvent, useFormFields } from '@payloadcms/ui'
+import React from 'react'
+
+import { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js'
+
+export const WatchTenantCollection = () => {
+  const { id, collectionSlug, title } = useDocumentInfo()
+  const { getEntityConfig } = useConfig()
+  const [useAsTitleName] = React.useState(
+    () => (getEntityConfig({ collectionSlug }) as ClientCollectionConfig).admin.useAsTitle,
+  )
+  const titleField = useFormFields(([fields]) => fields[useAsTitleName])
+
+  const { updateTenants } = useTenantSelection()
+
+  const syncTenantTitle = useEffectEvent(() => {
+    if (id) {
+      updateTenants({ id, label: title })
+    }
+  })
+
+  React.useEffect(() => {
+    // only update the tenant selector when the document saves
+    // → aka when initial value changes
+    if (id && titleField?.initialValue) {
+      syncTenantTitle()
+    }
+  }, [id, titleField?.initialValue])
+
+  return null
+}
diff --git a/packages/plugin-multi-tenant/src/exports/client.ts b/packages/plugin-multi-tenant/src/exports/client.ts
index cd6fb65b94b..d14df7a70cb 100644
--- a/packages/plugin-multi-tenant/src/exports/client.ts
+++ b/packages/plugin-multi-tenant/src/exports/client.ts
@@ -1,3 +1,4 @@
 export { TenantField } from '../components/TenantField/index.client.js'
 export { TenantSelector } from '../components/TenantSelector/index.js'
+export { WatchTenantCollection } from '../components/WatchTenantCollection/index.js'
 export { useTenantSelection } from '../providers/TenantSelectionProvider/index.client.js'
diff --git a/packages/plugin-multi-tenant/src/index.ts b/packages/plugin-multi-tenant/src/index.ts
index 6d5bf308592..dccb0f888f5 100644
--- a/packages/plugin-multi-tenant/src/index.ts
+++ b/packages/plugin-multi-tenant/src/index.ts
@@ -1,8 +1,11 @@
 import type { AcceptedLanguages } from '@payloadcms/translations'
 import type { CollectionConfig, Config } from 'payload'
 
+import { deepMergeSimple } from 'payload'
+
 import type { MultiTenantPluginConfig } from './types.js'
 
+import { translations } from '../translations/index.js'
 import { defaults } from './defaults.js'
 import { tenantField } from './fields/tenantField/index.js'
 import { tenantsArrayField } from './fields/tenantsArrayField/index.js'
@@ -229,6 +232,21 @@ export const multiTenantPlugin =
             usersTenantsArrayTenantFieldName: tenantsArrayTenantFieldName,
           })
         }
+
+        /**
+         * Add custom tenant field that watches and dispatches updates to the selector
+         */
+        collection.fields.push({
+          name: '_watchTenant',
+          type: 'ui',
+          admin: {
+            components: {
+              Field: {
+                path: '@payloadcms/plugin-multi-tenant/client#WatchTenantCollection',
+              },
+            },
+          },
+        })
       } else if (pluginConfig.collections?.[collection.slug]) {
         const isGlobal = Boolean(pluginConfig.collections[collection.slug]?.isGlobal)
 
@@ -340,5 +358,14 @@ export const multiTenantPlugin =
       path: '@payloadcms/plugin-multi-tenant/client#TenantSelector',
     })
 
+    /**
+     * Merge plugin translations
+     */
+
+    incomingConfig.i18n = {
+      ...incomingConfig.i18n,
+      translations: deepMergeSimple(translations, incomingConfig.i18n?.translations ?? {}),
+    }
+
     return incomingConfig
   }
diff --git a/packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx b/packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx
index 4aad06e2319..5a00ed80a36 100644
--- a/packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx
+++ b/packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx
@@ -11,6 +11,7 @@ type ContextType = {
    * Array of options to select from
    */
   options: OptionObject[]
+  preventRefreshOnChange: boolean
   /**
    * The currently selected tenant ID
    */
@@ -28,20 +29,26 @@ type ContextType = {
    * @param args.refresh - Whether to refresh the page after changing the tenant
    */
   setTenant: (args: { id: number | string | undefined; refresh?: boolean }) => void
+  /**
+   *
+   */
+  updateTenants: (args: { id: number | string; label: string }) => void
 }
 
 const Context = createContext<ContextType>({
   options: [],
+  preventRefreshOnChange: false,
   selectedTenantID: undefined,
   setPreventRefreshOnChange: () => null,
   setTenant: () => null,
+  updateTenants: () => null,
 })
 
 export const TenantSelectionProviderClient = ({
   children,
   initialValue,
   tenantCookie,
-  tenantOptions,
+  tenantOptions: tenantOptionsFromProps,
 }: {
   children: React.ReactNode
   initialValue?: number | string
@@ -54,6 +61,9 @@ export const TenantSelectionProviderClient = ({
   const [preventRefreshOnChange, setPreventRefreshOnChange] = React.useState(false)
   const { user } = useAuth()
   const userID = React.useMemo(() => user?.id, [user?.id])
+  const [tenantOptions, setTenantOptions] = React.useState<OptionObject[]>(
+    () => tenantOptionsFromProps,
+  )
   const selectedTenantLabel = React.useMemo(
     () => tenantOptions.find((option) => option.value === selectedTenantID)?.label,
     [selectedTenantID, tenantOptions],
@@ -91,6 +101,20 @@ export const TenantSelectionProviderClient = ({
     [deleteCookie, preventRefreshOnChange, router, setCookie, setSelectedTenantID, tenantOptions],
   )
 
+  const updateTenants = React.useCallback<ContextType['updateTenants']>(({ id, label }) => {
+    setTenantOptions((prev) => {
+      return prev.map((currentTenant) => {
+        if (id === currentTenant.value) {
+          return {
+            label,
+            value: id,
+          }
+        }
+        return currentTenant
+      })
+    })
+  }, [])
+
   React.useEffect(() => {
     if (selectedTenantID && !tenantOptions.find((option) => option.value === selectedTenantID)) {
       if (tenantOptions?.[0]?.value) {
@@ -132,9 +156,11 @@ export const TenantSelectionProviderClient = ({
       <Context
         value={{
           options: tenantOptions,
+          preventRefreshOnChange,
           selectedTenantID,
           setPreventRefreshOnChange,
           setTenant,
+          updateTenants,
         }}
       >
         {children}
diff --git a/test/plugin-multi-tenant/config.ts b/test/plugin-multi-tenant/config.ts
index 999de7acbfd..1a4bb8b3093 100644
--- a/test/plugin-multi-tenant/config.ts
+++ b/test/plugin-multi-tenant/config.ts
@@ -41,7 +41,7 @@ export default buildConfigWithDefaults({
           isGlobal: true,
         },
       },
-      tenantSelectorLabel: 'Sites',
+      tenantSelectorLabel: 'Site',
     }),
   ],
   typescript: {

From 06b2800f339dfcf9a38240f18b1d100bbf35bce5 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Mon, 12 May 2025 11:43:48 -0400
Subject: [PATCH 03/14] setup and generate plugin translations

---
 packages/plugin-multi-tenant/package.json     |  1 +
 .../scripts/generateTranslations.ts           | 37 ++++++++
 .../src/components/TenantSelector/index.tsx   |  6 +-
 packages/plugin-multi-tenant/src/index.ts     |  2 +-
 .../src/translations/index.ts                 | 91 +++++++++++++++++++
 .../src/translations/languages/ar.ts          | 14 +++
 .../src/translations/languages/az.ts          | 14 +++
 .../src/translations/languages/bg.ts          | 14 +++
 .../src/translations/languages/ca.ts          | 14 +++
 .../src/translations/languages/cs.ts          | 14 +++
 .../src/translations/languages/da.ts          | 14 +++
 .../src/translations/languages/de.ts          | 14 +++
 .../src/translations/languages/en.ts          | 14 +++
 .../src/translations/languages/es.ts          | 14 +++
 .../src/translations/languages/et.ts          | 14 +++
 .../src/translations/languages/fa.ts          | 14 +++
 .../src/translations/languages/fr.ts          | 14 +++
 .../src/translations/languages/he.ts          | 14 +++
 .../src/translations/languages/hr.ts          | 14 +++
 .../src/translations/languages/hu.ts          | 14 +++
 .../src/translations/languages/hy.ts          | 14 +++
 .../src/translations/languages/it.ts          | 14 +++
 .../src/translations/languages/ja.ts          | 14 +++
 .../src/translations/languages/ko.ts          | 14 +++
 .../src/translations/languages/lt.ts          | 14 +++
 .../src/translations/languages/my.ts          | 14 +++
 .../src/translations/languages/nb.ts          | 14 +++
 .../src/translations/languages/nl.ts          | 14 +++
 .../src/translations/languages/pl.ts          | 14 +++
 .../src/translations/languages/pt.ts          | 14 +++
 .../src/translations/languages/rn.sh          |  3 +
 .../src/translations/languages/ro.ts          | 14 +++
 .../src/translations/languages/rs.ts          | 14 +++
 .../src/translations/languages/rsLatin.ts     | 14 +++
 .../src/translations/languages/ru.ts          | 14 +++
 .../src/translations/languages/sk.ts          | 14 +++
 .../src/translations/languages/sl.ts          | 14 +++
 .../src/translations/languages/sv.ts          | 14 +++
 .../src/translations/languages/th.ts          | 14 +++
 .../src/translations/languages/tr.ts          | 14 +++
 .../src/translations/languages/uk.ts          | 14 +++
 .../src/translations/languages/vi.ts          | 14 +++
 .../src/translations/languages/zh.ts          | 13 +++
 .../src/translations/languages/zhTw.ts        | 14 +++
 .../src/translations/types.ts                 | 12 +++
 packages/plugin-multi-tenant/tsconfig.json    |  7 +-
 46 files changed, 687 insertions(+), 3 deletions(-)
 create mode 100644 packages/plugin-multi-tenant/scripts/generateTranslations.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/index.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/ar.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/az.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/bg.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/ca.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/cs.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/da.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/de.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/en.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/es.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/et.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/fa.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/fr.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/he.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/hr.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/hu.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/hy.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/it.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/ja.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/ko.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/lt.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/my.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/nb.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/nl.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/pl.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/pt.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/rn.sh
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/ro.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/rs.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/rsLatin.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/ru.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/sk.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/sl.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/sv.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/th.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/tr.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/uk.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/vi.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/zh.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/languages/zhTw.ts
 create mode 100644 packages/plugin-multi-tenant/src/translations/types.ts

diff --git a/packages/plugin-multi-tenant/package.json b/packages/plugin-multi-tenant/package.json
index 37f18983794..df26f29baa5 100644
--- a/packages/plugin-multi-tenant/package.json
+++ b/packages/plugin-multi-tenant/package.json
@@ -71,6 +71,7 @@
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "generateTranslations": "node --no-deprecation --import @swc-node/register/esm-register scripts/generateTranslations.ts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "pack:plugin": "pnpm prepublishOnly && pnpm copyfiles && pnpm pack",
diff --git a/packages/plugin-multi-tenant/scripts/generateTranslations.ts b/packages/plugin-multi-tenant/scripts/generateTranslations.ts
new file mode 100644
index 00000000000..ce740fec735
--- /dev/null
+++ b/packages/plugin-multi-tenant/scripts/generateTranslations.ts
@@ -0,0 +1,37 @@
+import type { AcceptedLanguages, GenericTranslationsObject } from '@payloadcms/translations'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+// @ts-ignore
+import { translateObject } from '../../translations/scripts/translateNewKeys/index.js'
+import { translations } from '../src/translations/index.js'
+import { enTranslations } from '../src/translations/languages/en.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const allTranslations: {
+  [key in AcceptedLanguages]?: {
+    dateFNSKey: string
+    translations: GenericTranslationsObject
+  }
+} = {}
+
+for (const key of Object.keys(translations)) {
+  allTranslations[key as AcceptedLanguages] = {
+    dateFNSKey: translations[key as AcceptedLanguages]?.dateFNSKey ?? 'unknown-date-fns-key',
+    translations: translations[key as AcceptedLanguages]?.translations ?? {},
+  }
+}
+
+void translateObject({
+  allTranslationsObject: allTranslations,
+  fromTranslationsObject: enTranslations,
+  targetFolder: path.resolve(dirname, '../src/translations/languages'),
+  tsFilePrefix: `import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'\n\nexport const {{locale}}Translations: PluginDefaultTranslationsObject = `,
+  tsFileSuffix: `\n\nexport const {{locale}}: PluginLanguage = {
+    dateFNSKey: {{dateFNSKey}},
+    translations: {{locale}}Translations,
+  }  `,
+})
diff --git a/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx b/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx
index 5b714f77f8c..16cba016934 100644
--- a/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx
+++ b/packages/plugin-multi-tenant/src/components/TenantSelector/index.tsx
@@ -15,7 +15,7 @@ import React from 'react'
 import type {
   PluginMultiTenantTranslationKeys,
   PluginMultiTenantTranslations,
-} from '../../../translations/index.js'
+} from '../../translations/index.js'
 
 import { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js'
 import './index.scss'
@@ -95,6 +95,8 @@ export const TenantSelector = ({ label, viewType }: { label: string; viewType?:
                 return <b>{children}</b>
               },
             }}
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
             i18nKey="plugin-multi-tenant:confirm-tenant-switch--body"
             t={t}
             variables={{
@@ -105,6 +107,8 @@ export const TenantSelector = ({ label, viewType }: { label: string; viewType?:
         }
         heading={
           <Translation
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
             i18nKey="plugin-multi-tenant:confirm-tenant-switch--heading"
             t={t}
             variables={{
diff --git a/packages/plugin-multi-tenant/src/index.ts b/packages/plugin-multi-tenant/src/index.ts
index dccb0f888f5..cb243778754 100644
--- a/packages/plugin-multi-tenant/src/index.ts
+++ b/packages/plugin-multi-tenant/src/index.ts
@@ -5,7 +5,6 @@ import { deepMergeSimple } from 'payload'
 
 import type { MultiTenantPluginConfig } from './types.js'
 
-import { translations } from '../translations/index.js'
 import { defaults } from './defaults.js'
 import { tenantField } from './fields/tenantField/index.js'
 import { tenantsArrayField } from './fields/tenantsArrayField/index.js'
@@ -13,6 +12,7 @@ import { addTenantCleanup } from './hooks/afterTenantDelete.js'
 import { filterDocumentsBySelectedTenant } from './list-filters/filterDocumentsBySelectedTenant.js'
 import { filterTenantsBySelectedTenant } from './list-filters/filterTenantsBySelectedTenant.js'
 import { filterUsersBySelectedTenant } from './list-filters/filterUsersBySelectedTenant.js'
+import { translations } from './translations/index.js'
 import { addCollectionAccess } from './utilities/addCollectionAccess.js'
 import { addFilterOptionsToFields } from './utilities/addFilterOptionsToFields.js'
 import { combineListFilters } from './utilities/combineListFilters.js'
diff --git a/packages/plugin-multi-tenant/src/translations/index.ts b/packages/plugin-multi-tenant/src/translations/index.ts
new file mode 100644
index 00000000000..f8e78168185
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/index.ts
@@ -0,0 +1,91 @@
+import type {
+  GenericTranslationsObject,
+  NestedKeysStripped,
+  SupportedLanguages,
+} from '@payloadcms/translations'
+
+import type { PluginDefaultTranslationsObject } from './types.js'
+
+import { ar } from './languages/ar.js'
+import { az } from './languages/az.js'
+import { bg } from './languages/bg.js'
+import { ca } from './languages/ca.js'
+import { cs } from './languages/cs.js'
+import { da } from './languages/da.js'
+import { de } from './languages/de.js'
+import { en } from './languages/en.js'
+import { es } from './languages/es.js'
+import { et } from './languages/et.js'
+import { fa } from './languages/fa.js'
+import { fr } from './languages/fr.js'
+import { he } from './languages/he.js'
+import { hr } from './languages/hr.js'
+import { hu } from './languages/hu.js'
+import { hy } from './languages/hy.js'
+import { it } from './languages/it.js'
+import { ja } from './languages/ja.js'
+import { ko } from './languages/ko.js'
+import { lt } from './languages/lt.js'
+import { my } from './languages/my.js'
+import { nb } from './languages/nb.js'
+import { nl } from './languages/nl.js'
+import { pl } from './languages/pl.js'
+import { pt } from './languages/pt.js'
+import { ro } from './languages/ro.js'
+import { rs } from './languages/rs.js'
+import { rsLatin } from './languages/rsLatin.js'
+import { ru } from './languages/ru.js'
+import { sk } from './languages/sk.js'
+import { sl } from './languages/sl.js'
+import { sv } from './languages/sv.js'
+import { th } from './languages/th.js'
+import { tr } from './languages/tr.js'
+import { uk } from './languages/uk.js'
+import { vi } from './languages/vi.js'
+import { zh } from './languages/zh.js'
+import { zhTw } from './languages/zhTw.js'
+
+export const translations = {
+  ar,
+  az,
+  bg,
+  ca,
+  cs,
+  da,
+  de,
+  en,
+  es,
+  et,
+  fa,
+  fr,
+  he,
+  hr,
+  hu,
+  hy,
+  it,
+  ja,
+  ko,
+  lt,
+  my,
+  nb,
+  nl,
+  pl,
+  pt,
+  ro,
+  rs,
+  'rs-latin': rsLatin,
+  ru,
+  sk,
+  sl,
+  sv,
+  th,
+  tr,
+  uk,
+  vi,
+  zh,
+  'zh-TW': zhTw,
+} as SupportedLanguages<PluginDefaultTranslationsObject>
+
+export type PluginMultiTenantTranslations = GenericTranslationsObject
+
+export type PluginMultiTenantTranslationKeys = NestedKeysStripped<PluginMultiTenantTranslations>
diff --git a/packages/plugin-multi-tenant/src/translations/languages/ar.ts b/packages/plugin-multi-tenant/src/translations/languages/ar.ts
new file mode 100644
index 00000000000..ff50feeb56c
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/ar.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const arTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'أنت على وشك تغيير الملكية من <0>{{fromTenant}}</0> إلى <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'تأكيد تغيير {{tenantLabel}}',
+  },
+}
+
+export const ar: PluginLanguage = {
+  dateFNSKey: 'ar',
+  translations: arTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/az.ts b/packages/plugin-multi-tenant/src/translations/languages/az.ts
new file mode 100644
index 00000000000..3c7ace19b47
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/az.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const azTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Siz <0>{{fromTenant}}</0> mülkiyyətini <0>{{toTenant}}</0> mülkiyyətinə dəyişdirəcəksiniz.',
+    'confirm-tenant-switch--heading': '{{tenantLabel}} dəyişikliyini təsdiqləyin',
+  },
+}
+
+export const az: PluginLanguage = {
+  dateFNSKey: 'az',
+  translations: azTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/bg.ts b/packages/plugin-multi-tenant/src/translations/languages/bg.ts
new file mode 100644
index 00000000000..488b0b9b1a6
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/bg.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const bgTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Предстои да промените собствеността от <0>{{fromTenant}}</0> на <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Потвърдете промяната на {{tenantLabel}}',
+  },
+}
+
+export const bg: PluginLanguage = {
+  dateFNSKey: 'bg',
+  translations: bgTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/ca.ts b/packages/plugin-multi-tenant/src/translations/languages/ca.ts
new file mode 100644
index 00000000000..0de5a291cf4
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/ca.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const caTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Estàs a punt de canviar la propietat de <0>{{fromTenant}}</0> a <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Confirmeu el canvi de {{tenantLabel}}',
+  },
+}
+
+export const ca: PluginLanguage = {
+  dateFNSKey: 'ca',
+  translations: caTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/cs.ts b/packages/plugin-multi-tenant/src/translations/languages/cs.ts
new file mode 100644
index 00000000000..30d024ad51a
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/cs.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const csTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Chystáte se změnit vlastnictví z <0>{{fromTenant}}</0> na <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Potvrďte změnu {{tenantLabel}}',
+  },
+}
+
+export const cs: PluginLanguage = {
+  dateFNSKey: 'cs',
+  translations: csTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/da.ts b/packages/plugin-multi-tenant/src/translations/languages/da.ts
new file mode 100644
index 00000000000..a7c38980588
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/da.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const daTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Du er ved at ændre ejerskab fra <0>{{fromTenant}}</0> til <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Bekræft {{tenantLabel}} ændring',
+  },
+}
+
+export const da: PluginLanguage = {
+  dateFNSKey: 'da',
+  translations: daTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/de.ts b/packages/plugin-multi-tenant/src/translations/languages/de.ts
new file mode 100644
index 00000000000..d36e28346a8
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/de.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const deTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Sie sind dabei, den Besitz von <0>{{fromTenant}}</0> auf <0>{{toTenant}}</0> zu übertragen.',
+    'confirm-tenant-switch--heading': 'Bestätigen Sie die Änderung von {{tenantLabel}}.',
+  },
+}
+
+export const de: PluginLanguage = {
+  dateFNSKey: 'de',
+  translations: deTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/en.ts b/packages/plugin-multi-tenant/src/translations/languages/en.ts
new file mode 100644
index 00000000000..4e790e89d86
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/en.ts
@@ -0,0 +1,14 @@
+import type { PluginLanguage } from '../types.js'
+
+export const enTranslations = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'You are about to change ownership from <0>{{fromTenant}}</0> to <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Confirm {{tenantLabel}} change',
+  },
+}
+
+export const en: PluginLanguage = {
+  dateFNSKey: 'en-US',
+  translations: enTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/es.ts b/packages/plugin-multi-tenant/src/translations/languages/es.ts
new file mode 100644
index 00000000000..4e72ff9d0b6
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/es.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const esTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Está a punto de cambiar la propiedad de <0>{{fromTenant}}</0> a <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Confirme el cambio de {{tenantLabel}}',
+  },
+}
+
+export const es: PluginLanguage = {
+  dateFNSKey: 'es',
+  translations: esTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/et.ts b/packages/plugin-multi-tenant/src/translations/languages/et.ts
new file mode 100644
index 00000000000..1b86bf72a5c
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/et.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const etTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Te olete tegemas omandiõiguse muudatust <0>{{fromTenant}}</0>lt <0>{{toTenant}}</0>le.',
+    'confirm-tenant-switch--heading': 'Kinnita {{tenantLabel}} muutus',
+  },
+}
+
+export const et: PluginLanguage = {
+  dateFNSKey: 'et',
+  translations: etTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/fa.ts b/packages/plugin-multi-tenant/src/translations/languages/fa.ts
new file mode 100644
index 00000000000..d64610a7296
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/fa.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const faTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'شما در حال تغییر مالکیت از <0>{{fromTenant}}</0> به <0>{{toTenant}}</0> هستید',
+    'confirm-tenant-switch--heading': 'تایید تغییر {{tenantLabel}}',
+  },
+}
+
+export const fa: PluginLanguage = {
+  dateFNSKey: 'fa-IR',
+  translations: faTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/fr.ts b/packages/plugin-multi-tenant/src/translations/languages/fr.ts
new file mode 100644
index 00000000000..720cb3d7978
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/fr.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const frTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Vous êtes sur le point de changer la propriété de <0>{{fromTenant}}</0> à <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Confirmer le changement de {{tenantLabel}}',
+  },
+}
+
+export const fr: PluginLanguage = {
+  dateFNSKey: 'fr',
+  translations: frTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/he.ts b/packages/plugin-multi-tenant/src/translations/languages/he.ts
new file mode 100644
index 00000000000..1a522ec86fc
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/he.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const heTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'אתה עומד לשנות בעלות מ- <0>{{fromTenant}}</0> ל- <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'אשר שינוי {{tenantLabel}}',
+  },
+}
+
+export const he: PluginLanguage = {
+  dateFNSKey: 'he',
+  translations: heTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/hr.ts b/packages/plugin-multi-tenant/src/translations/languages/hr.ts
new file mode 100644
index 00000000000..292ec35218a
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/hr.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const hrTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Upravo ćete promijeniti vlasništvo sa <0>{{fromTenant}}</0> na <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Potvrdi promjenu {{tenantLabel}}',
+  },
+}
+
+export const hr: PluginLanguage = {
+  dateFNSKey: 'hr',
+  translations: hrTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/hu.ts b/packages/plugin-multi-tenant/src/translations/languages/hu.ts
new file mode 100644
index 00000000000..5e7a03bf2e7
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/hu.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const huTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Ön azon van, hogy megváltoztassa a tulajdonjogot <0>{{fromTenant}}</0>-ről <0>{{toTenant}}</0>-re.',
+    'confirm-tenant-switch--heading': 'Erősítse meg a(z) {{tenantLabel}} változtatást',
+  },
+}
+
+export const hu: PluginLanguage = {
+  dateFNSKey: 'hu',
+  translations: huTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/hy.ts b/packages/plugin-multi-tenant/src/translations/languages/hy.ts
new file mode 100644
index 00000000000..e46f11ac5fd
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/hy.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const hyTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Դուք պատրաստ եք փոխել գերեցդիմատնին ընկերությունը <0>{{fromTenant}}</0>-ից <0>{{toTenant}}</0>-ին',
+    'confirm-tenant-switch--heading': 'Հաստատեք {{tenantLabel}} փոփոխությունը',
+  },
+}
+
+export const hy: PluginLanguage = {
+  dateFNSKey: 'hy-AM',
+  translations: hyTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/it.ts b/packages/plugin-multi-tenant/src/translations/languages/it.ts
new file mode 100644
index 00000000000..af0ce98a753
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/it.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const itTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Stai per cambiare proprietà da <0>{{fromTenant}}</0> a <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Conferma il cambiamento di {{tenantLabel}}',
+  },
+}
+
+export const it: PluginLanguage = {
+  dateFNSKey: 'it',
+  translations: itTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/ja.ts b/packages/plugin-multi-tenant/src/translations/languages/ja.ts
new file mode 100644
index 00000000000..23adbe41317
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/ja.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const jaTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'あなたは所有権を<0>{{fromTenant}}</0>から<0>{{toTenant}}</0>へ変更しようとしています',
+    'confirm-tenant-switch--heading': '{{tenantLabel}}の変更を確認してください',
+  },
+}
+
+export const ja: PluginLanguage = {
+  dateFNSKey: 'ja',
+  translations: jaTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/ko.ts b/packages/plugin-multi-tenant/src/translations/languages/ko.ts
new file mode 100644
index 00000000000..7836ab8f9e6
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/ko.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const koTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      '<0>{{fromTenant}}</0>에서 <0>{{toTenant}}</0>으로 소유권을 변경하려고 합니다.',
+    'confirm-tenant-switch--heading': '{{tenantLabel}} 변경을 확인하세요',
+  },
+}
+
+export const ko: PluginLanguage = {
+  dateFNSKey: 'ko',
+  translations: koTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/lt.ts b/packages/plugin-multi-tenant/src/translations/languages/lt.ts
new file mode 100644
index 00000000000..396855ada9c
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/lt.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const ltTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Jūs ketinate pakeisti nuosavybės teisę iš <0>{{fromTenant}}</0> į <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Patvirtinkite {{tenantLabel}} pakeitimą',
+  },
+}
+
+export const lt: PluginLanguage = {
+  dateFNSKey: 'lt',
+  translations: ltTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/my.ts b/packages/plugin-multi-tenant/src/translations/languages/my.ts
new file mode 100644
index 00000000000..ae1a6349b65
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/my.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const myTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Anda akan mengubah pemilikan dari <0>{{fromTenant}}</0> ke <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Sahkan perubahan {{tenantLabel}}',
+  },
+}
+
+export const my: PluginLanguage = {
+  dateFNSKey: 'en-US',
+  translations: myTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/nb.ts b/packages/plugin-multi-tenant/src/translations/languages/nb.ts
new file mode 100644
index 00000000000..c7f85e270d7
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/nb.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const nbTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Du er i ferd med å endre eierskap fra <0>{{fromTenant}}</0> til <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Bekreft {{tenantLabel}} endring',
+  },
+}
+
+export const nb: PluginLanguage = {
+  dateFNSKey: 'nb',
+  translations: nbTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/nl.ts b/packages/plugin-multi-tenant/src/translations/languages/nl.ts
new file mode 100644
index 00000000000..21ee10b6d0c
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/nl.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const nlTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'U staat op het punt het eigendom te wijzigen van <0>{{fromTenant}}</0> naar <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Bevestig wijziging van {{tenantLabel}}',
+  },
+}
+
+export const nl: PluginLanguage = {
+  dateFNSKey: 'nl',
+  translations: nlTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/pl.ts b/packages/plugin-multi-tenant/src/translations/languages/pl.ts
new file mode 100644
index 00000000000..4f1a7322461
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/pl.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const plTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Za chwilę nastąpi zmiana właściciela z <0>{{fromTenant}}</0> na <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Potwierdź zmianę {{tenantLabel}}',
+  },
+}
+
+export const pl: PluginLanguage = {
+  dateFNSKey: 'pl',
+  translations: plTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/pt.ts b/packages/plugin-multi-tenant/src/translations/languages/pt.ts
new file mode 100644
index 00000000000..1e52af5ec7d
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/pt.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const ptTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Você está prestes a alterar a propriedade de <0>{{fromTenant}}</0> para <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Confirme a alteração de {{tenantLabel}}',
+  },
+}
+
+export const pt: PluginLanguage = {
+  dateFNSKey: 'pt',
+  translations: ptTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/rn.sh b/packages/plugin-multi-tenant/src/translations/languages/rn.sh
new file mode 100644
index 00000000000..ef6b3ed6c4d
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/rn.sh
@@ -0,0 +1,3 @@
+for file in *.js; do
+    mv -- "$file" "${file%.js}.ts"
+done
diff --git a/packages/plugin-multi-tenant/src/translations/languages/ro.ts b/packages/plugin-multi-tenant/src/translations/languages/ro.ts
new file mode 100644
index 00000000000..b6a40cd36fb
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/ro.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const roTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Sunteți pe punctul de a schimba proprietatea de la <0>{{fromTenant}}</0> la <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Confirmați schimbarea {{tenantLabel}}',
+  },
+}
+
+export const ro: PluginLanguage = {
+  dateFNSKey: 'ro',
+  translations: roTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/rs.ts b/packages/plugin-multi-tenant/src/translations/languages/rs.ts
new file mode 100644
index 00000000000..19c63dc59ef
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/rs.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const rsTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Upravo ćete promeniti vlasništvo sa <0>{{fromTenant}}</0> na <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Potvrdi promena {{tenantLabel}}',
+  },
+}
+
+export const rs: PluginLanguage = {
+  dateFNSKey: 'rs',
+  translations: rsTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/rsLatin.ts b/packages/plugin-multi-tenant/src/translations/languages/rsLatin.ts
new file mode 100644
index 00000000000..c4f56096f0e
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/rsLatin.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const rsLatinTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Uskoro ćete promeniti vlasništvo sa <0>{{fromTenant}}</0> na <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Potvrdite promenu {{tenantLabel}}',
+  },
+}
+
+export const rsLatin: PluginLanguage = {
+  dateFNSKey: 'rs-Latin',
+  translations: rsLatinTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/ru.ts b/packages/plugin-multi-tenant/src/translations/languages/ru.ts
new file mode 100644
index 00000000000..66bfaa76cbf
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/ru.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const ruTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Вы собираетесь изменить владельца с <0>{{fromTenant}}</0> на <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Подтвердите изменение {{tenantLabel}}',
+  },
+}
+
+export const ru: PluginLanguage = {
+  dateFNSKey: 'ru',
+  translations: ruTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/sk.ts b/packages/plugin-multi-tenant/src/translations/languages/sk.ts
new file mode 100644
index 00000000000..22148c870fa
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/sk.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const skTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Chystáte sa zmeniť vlastníctvo z <0>{{fromTenant}}</0> na <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Potvrďte zmenu {{tenantLabel}}',
+  },
+}
+
+export const sk: PluginLanguage = {
+  dateFNSKey: 'sk',
+  translations: skTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/sl.ts b/packages/plugin-multi-tenant/src/translations/languages/sl.ts
new file mode 100644
index 00000000000..c2f6bb2bf67
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/sl.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const slTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Ravno ste pred spremembo lastništva iz <0>{{fromTenant}}</0> na <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Potrdi spremembo {{tenantLabel}}',
+  },
+}
+
+export const sl: PluginLanguage = {
+  dateFNSKey: 'sl-SI',
+  translations: slTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/sv.ts b/packages/plugin-multi-tenant/src/translations/languages/sv.ts
new file mode 100644
index 00000000000..57659262653
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/sv.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const svTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Du är på väg att ändra ägande från <0>{{fromTenant}}</0> till <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Bekräfta ändring av {{tenantLabel}}',
+  },
+}
+
+export const sv: PluginLanguage = {
+  dateFNSKey: 'sv',
+  translations: svTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/th.ts b/packages/plugin-multi-tenant/src/translations/languages/th.ts
new file mode 100644
index 00000000000..cdfdc45c9ae
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/th.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const thTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'คุณกำลังจะเปลี่ยนความเป็นเจ้าของจาก <0>{{fromTenant}}</0> เป็น <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'ยืนยันการเปลี่ยนแปลง {{tenantLabel}}',
+  },
+}
+
+export const th: PluginLanguage = {
+  dateFNSKey: 'th',
+  translations: thTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/tr.ts b/packages/plugin-multi-tenant/src/translations/languages/tr.ts
new file mode 100644
index 00000000000..2f969402e2d
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/tr.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const trTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      "Sahipliği <0>{{fromTenant}}</0>'den <0>{{toTenant}}</0>'e değiştirmek üzeresiniz.",
+    'confirm-tenant-switch--heading': '{{tenantLabel}} değişikliğini onayla',
+  },
+}
+
+export const tr: PluginLanguage = {
+  dateFNSKey: 'tr',
+  translations: trTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/uk.ts b/packages/plugin-multi-tenant/src/translations/languages/uk.ts
new file mode 100644
index 00000000000..8e0fa892332
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/uk.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const ukTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Ви збираєтесь змінити власність з <0>{{fromTenant}}</0> на <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Підтвердіть зміну {{tenantLabel}}',
+  },
+}
+
+export const uk: PluginLanguage = {
+  dateFNSKey: 'uk',
+  translations: ukTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/vi.ts b/packages/plugin-multi-tenant/src/translations/languages/vi.ts
new file mode 100644
index 00000000000..e017d9a05eb
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/vi.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const viTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      'Bạn đang chuẩn bị chuyển quyền sở hữu từ <0>{{fromTenant}}</0> sang <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': 'Xác nhận thay đổi {{tenantLabel}}',
+  },
+}
+
+export const vi: PluginLanguage = {
+  dateFNSKey: 'vi',
+  translations: viTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/zh.ts b/packages/plugin-multi-tenant/src/translations/languages/zh.ts
new file mode 100644
index 00000000000..047847258cd
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/zh.ts
@@ -0,0 +1,13 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const zhTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body': '您即将将所有权从<0>{{fromTenant}}</0>更改为<0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': '确认更改{{tenantLabel}}',
+  },
+}
+
+export const zh: PluginLanguage = {
+  dateFNSKey: 'zh-CN',
+  translations: zhTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/languages/zhTw.ts b/packages/plugin-multi-tenant/src/translations/languages/zhTw.ts
new file mode 100644
index 00000000000..4950b18cb4f
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/languages/zhTw.ts
@@ -0,0 +1,14 @@
+import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'
+
+export const zhTwTranslations: PluginDefaultTranslationsObject = {
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body':
+      '您即將將所有權從 <0>{{fromTenant}}</0> 轉移至 <0>{{toTenant}}</0>',
+    'confirm-tenant-switch--heading': '確認{{tenantLabel}}更改',
+  },
+}
+
+export const zhTw: PluginLanguage = {
+  dateFNSKey: 'zh-TW',
+  translations: zhTwTranslations,
+}
diff --git a/packages/plugin-multi-tenant/src/translations/types.ts b/packages/plugin-multi-tenant/src/translations/types.ts
new file mode 100644
index 00000000000..d1750a2c809
--- /dev/null
+++ b/packages/plugin-multi-tenant/src/translations/types.ts
@@ -0,0 +1,12 @@
+import type { Language } from '@payloadcms/translations'
+
+import type { enTranslations } from './languages/en.js'
+
+export type PluginLanguage = Language<{
+  'plugin-multi-tenant': {
+    'confirm-tenant-switch--body': string
+    'confirm-tenant-switch--heading': string
+  }
+}>
+
+export type PluginDefaultTranslationsObject = typeof enTranslations
diff --git a/packages/plugin-multi-tenant/tsconfig.json b/packages/plugin-multi-tenant/tsconfig.json
index b14b853dc0b..561b5a63d76 100644
--- a/packages/plugin-multi-tenant/tsconfig.json
+++ b/packages/plugin-multi-tenant/tsconfig.json
@@ -1,4 +1,9 @@
 {
   "extends": "../../tsconfig.base.json",
-  "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}]
+  "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "scripts/**/*.ts"
+  ]
 }

From 4fd022dc2f3c11fb18794dfc66f2957c02c0c541 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Mon, 12 May 2025 12:31:28 -0400
Subject: [PATCH 04/14] revert changes that were moved into the
 feat/relationship-extract-input branch

---
 .../fields/Relationship/createRelationMap.ts  |  35 +-
 packages/ui/src/fields/Relationship/index.tsx | 837 ++++++++++++++++--
 .../MultiValueLabel/index.tsx                 |   7 +-
 .../select-components/SingleValue/index.tsx   |   7 +-
 packages/ui/src/fields/Relationship/types.ts  |  50 +-
 5 files changed, 775 insertions(+), 161 deletions(-)

diff --git a/packages/ui/src/fields/Relationship/createRelationMap.ts b/packages/ui/src/fields/Relationship/createRelationMap.ts
index 593fa284828..6a3d030c2ae 100644
--- a/packages/ui/src/fields/Relationship/createRelationMap.ts
+++ b/packages/ui/src/fields/Relationship/createRelationMap.ts
@@ -7,20 +7,20 @@ type RelationMap = {
 
 type CreateRelationMap = (args: {
   hasMany: boolean
-  isPolymorphic: boolean
-  relationTo: string[]
+  relationTo: string | string[]
   value: null | Value | Value[] // really needs to be `ValueWithRelation`
 }) => RelationMap
 
-export const createRelationMap: CreateRelationMap = ({
-  hasMany,
-  isPolymorphic,
-  relationTo,
-  value,
-}) => {
-  const relationMap: RelationMap = relationTo.reduce((map, current) => {
-    return { ...map, [current]: [] }
-  }, {})
+export const createRelationMap: CreateRelationMap = ({ hasMany, relationTo, value }) => {
+  const hasMultipleRelations = Array.isArray(relationTo)
+  let relationMap: RelationMap
+  if (Array.isArray(relationTo)) {
+    relationMap = relationTo.reduce((map, current) => {
+      return { ...map, [current]: [] }
+    }, {})
+  } else {
+    relationMap = { [relationTo]: [] }
+  }
 
   if (value === null) {
     return relationMap
@@ -38,20 +38,25 @@ export const createRelationMap: CreateRelationMap = ({
 
   if (hasMany && Array.isArray(value)) {
     value.forEach((val) => {
-      if (isPolymorphic && typeof val === 'object' && 'relationTo' in val && 'value' in val) {
+      if (
+        hasMultipleRelations &&
+        typeof val === 'object' &&
+        'relationTo' in val &&
+        'value' in val
+      ) {
         add(val.relationTo, val.value)
       }
 
-      if (!isPolymorphic && typeof relationTo === 'string') {
+      if (!hasMultipleRelations && typeof relationTo === 'string') {
         add(relationTo, val)
       }
     })
-  } else if (isPolymorphic) {
+  } else if (hasMultipleRelations && Array.isArray(relationTo)) {
     if (typeof value === 'object' && 'relationTo' in value && 'value' in value) {
       add(value.relationTo, value.value)
     }
   } else {
-    add(relationTo[0], value)
+    add(relationTo, value)
   }
 
   return relationMap
diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
index 473c0d62712..21cbaa42993 100644
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -1,15 +1,49 @@
 'use client'
-import type { RelationshipFieldClientComponent, ValueWithRelation } from 'payload'
+import type {
+  FilterOptionsResult,
+  PaginatedDocs,
+  RelationshipFieldClientComponent,
+  Where,
+} from 'payload'
 
-import React, { useCallback, useMemo } from 'react'
+import { dequal } from 'dequal/lite'
+import { formatAdminURL, wordBoundariesRegex } from 'payload/shared'
+import * as qs from 'qs-esm'
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 
-import type { Value } from './types.js'
+import type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'
+import type { ListDrawerProps } from '../../elements/ListDrawer/types.js'
+import type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'
+import type { GetResults, Option, Value } from './types.js'
 
+import { AddNewRelation } from '../../elements/AddNewRelation/index.js'
+import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'
+import { useListDrawer } from '../../elements/ListDrawer/index.js'
+import { ReactSelect } from '../../elements/ReactSelect/index.js'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { FieldDescription } from '../../fields/FieldDescription/index.js'
+import { FieldError } from '../../fields/FieldError/index.js'
+import { FieldLabel } from '../../fields/FieldLabel/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
-import { mergeFieldStyles } from '../mergeFieldStyles.js'
-import { RelationshipInput } from './Input.js'
+import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js'
+import { useEffectEvent } from '../../hooks/useEffectEvent.js'
+import { useAuth } from '../../providers/Auth/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'
+import { mergeFieldStyles } from '../mergeFieldStyles.js'
+import { fieldBaseClass } from '../shared/index.js'
+import { createRelationMap } from './createRelationMap.js'
+import { findOptionsByValue } from './findOptionsByValue.js'
+import { optionsReducer } from './optionsReducer.js'
+import { MultiValueLabel } from './select-components/MultiValueLabel/index.js'
+import { SingleValue } from './select-components/SingleValue/index.js'
+
+const maxResultsPerRequest = 10
+
+const baseClass = 'relationship'
 
 const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) => {
   const {
@@ -22,6 +56,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
         className,
         description,
         isSortable = true,
+        placeholder,
         sortOptions,
       } = {},
       hasMany,
@@ -35,6 +70,35 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
     validate,
   } = props
 
+  const { config, getEntityConfig } = useConfig()
+
+  const {
+    routes: { api },
+    serverURL,
+  } = config
+
+  const { i18n, t } = useTranslation()
+  const { permissions } = useAuth()
+  const { code: locale } = useLocale()
+  const hasMultipleRelations = Array.isArray(relationTo)
+
+  const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState<
+    Parameters<ReactSelectAdapterProps['customProps']['onDocumentOpen']>[0]
+  >({
+    id: undefined,
+    collectionSlug: undefined,
+    hasReadPermission: false,
+  })
+
+  const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1)
+  const [lastLoadedPage, setLastLoadedPage] = useState<Record<string, number>>({})
+  const [errorLoading, setErrorLoading] = useState('')
+  const [search, setSearch] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false)
+  const [menuIsOpen, setMenuIsOpen] = useState(false)
+  const hasLoadedFirstPageRef = useRef(false)
+
   const memoizedValidate = useCallback(
     (value, validationOptions) => {
       if (typeof validate === 'function') {
@@ -58,115 +122,706 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
     validate: memoizedValidate,
   })
 
-  const styles = useMemo(() => mergeFieldStyles(field), [field])
-  const isPolymorphic = Array.isArray(relationTo)
-  const safeRelationTo = Array.isArray(relationTo) ? relationTo : [relationTo]
+  const [options, dispatchOptions] = useReducer(optionsReducer, [])
 
-  const handleChangeHasMulti = useCallback(
-    (value: ValueWithRelation[], disableModifyForm?: boolean) => {
-      if (!value) {
-        setValue(null, Boolean(disableModifyForm))
-        return
-      }
+  const valueRef = useRef(value)
+  valueRef.current = value
+
+  const [DocumentDrawer, , { isDrawerOpen, openDrawer }] = useDocumentDrawer({
+    id: currentlyOpenRelationship.id,
+    collectionSlug: currentlyOpenRelationship.collectionSlug,
+  })
+
+  // Filter selected values from displaying in the list drawer
+  const listDrawerFilterOptions = useMemo<FilterOptionsResult>(() => {
+    let newFilterOptions = filterOptions
 
-      const dataToSet = value.map((val) => {
-        if (isPolymorphic) {
-          return val
-        } else {
-          return val.value
+    if (value) {
+      const valuesByRelation = (Array.isArray(value) ? value : [value]).reduce((acc, val) => {
+        if (typeof val === 'object' && val.relationTo) {
+          if (!acc[val.relationTo]) {
+            acc[val.relationTo] = []
+          }
+          acc[val.relationTo].push(val.value)
+        } else if (val) {
+          const relation = Array.isArray(relationTo) ? undefined : relationTo
+          if (relation) {
+            if (!acc[relation]) {
+              acc[relation] = []
+            }
+            acc[relation].push(val)
+          }
+        }
+        return acc
+      }, {})
+
+      ;(Array.isArray(relationTo) ? relationTo : [relationTo]).forEach((relation) => {
+        newFilterOptions = {
+          ...(newFilterOptions || {}),
+          [relation]: {
+            ...(typeof filterOptions?.[relation] === 'object' ? filterOptions[relation] : {}),
+            ...(valuesByRelation[relation]
+              ? {
+                  id: {
+                    not_in: valuesByRelation[relation],
+                  },
+                }
+              : {}),
+          },
         }
       })
+    }
 
-      setValue(dataToSet, Boolean(disableModifyForm))
+    return newFilterOptions
+  }, [filterOptions, value, relationTo])
+
+  const [
+    ListDrawer,
+    ,
+    { closeDrawer: closeListDrawer, isDrawerOpen: isListDrawerOpen, openDrawer: openListDrawer },
+  ] = useListDrawer({
+    collectionSlugs: hasMultipleRelations ? relationTo : [relationTo],
+    filterOptions: listDrawerFilterOptions,
+  })
+
+  const onListSelect = useCallback<NonNullable<ListDrawerProps['onSelect']>>(
+    ({ collectionSlug, doc }) => {
+      const formattedSelection = hasMultipleRelations
+        ? {
+            relationTo: collectionSlug,
+            value: doc.id,
+          }
+        : doc.id
+
+      if (hasMany) {
+        const withSelection = Array.isArray(value) ? value : []
+        setValue([...withSelection, formattedSelection])
+      } else {
+        setValue(formattedSelection)
+      }
+
+      closeListDrawer()
     },
-    [isPolymorphic, setValue],
+    [hasMany, hasMultipleRelations, setValue, closeListDrawer, value],
   )
 
-  const handleChangeSingle = useCallback(
-    (value: ValueWithRelation, disableModifyForm?: boolean) => {
-      if (!value) {
-        setValue(null, Boolean(disableModifyForm))
+  const openDrawerWhenRelationChanges = useRef(false)
+
+  const getResults: GetResults = useCallback(
+    async ({
+      filterOptions,
+      lastFullyLoadedRelation: lastFullyLoadedRelationArg,
+      lastLoadedPage: lastLoadedPageArg,
+      onSuccess,
+      search: searchArg,
+      sort,
+      value: valueArg,
+    }) => {
+      if (!permissions) {
         return
       }
+      const lastFullyLoadedRelationToUse =
+        typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1
+
+      const relations = Array.isArray(relationTo) ? relationTo : [relationTo]
+      const relationsToFetch =
+        lastFullyLoadedRelationToUse === -1
+          ? relations
+          : relations.slice(lastFullyLoadedRelationToUse + 1)
+
+      let resultsFetched = 0
+      const relationMap = createRelationMap({
+        hasMany,
+        relationTo,
+        value: valueArg,
+      })
+
+      if (!errorLoading) {
+        await relationsToFetch.reduce(async (priorRelation, relation) => {
+          const relationFilterOption = filterOptions?.[relation]
+
+          let lastLoadedPageToUse
+          if (search !== searchArg) {
+            lastLoadedPageToUse = 1
+          } else {
+            lastLoadedPageToUse = lastLoadedPageArg[relation] + 1
+          }
+          await priorRelation
+
+          if (relationFilterOption === false) {
+            setLastFullyLoadedRelation(relations.indexOf(relation))
+            return Promise.resolve()
+          }
+
+          if (resultsFetched < 10) {
+            const collection = getEntityConfig({ collectionSlug: relation })
+            const fieldToSearch = collection?.admin?.useAsTitle || 'id'
+            let fieldToSort = collection?.defaultSort || 'id'
+            if (typeof sortOptions === 'string') {
+              fieldToSort = sortOptions
+            } else if (sortOptions?.[relation]) {
+              fieldToSort = sortOptions[relation]
+            }
+
+            const query: {
+              [key: string]: unknown
+              where: Where
+            } = {
+              depth: 0,
+              draft: true,
+              limit: maxResultsPerRequest,
+              locale,
+              page: lastLoadedPageToUse,
+              select: {
+                [fieldToSearch]: true,
+              },
+              sort: fieldToSort,
+              where: {
+                and: [
+                  {
+                    id: {
+                      not_in: relationMap[relation],
+                    },
+                  },
+                ],
+              },
+            }
+
+            if (searchArg) {
+              query.where.and.push({
+                [fieldToSearch]: {
+                  like: searchArg,
+                },
+              })
+            }
+
+            if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
+              query.where.and.push(relationFilterOption)
+            }
+
+            const response = await fetch(`${serverURL}${api}/${relation}`, {
+              body: qs.stringify(query),
+              credentials: 'include',
+              headers: {
+                'Accept-Language': i18n.language,
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'X-HTTP-Method-Override': 'GET',
+              },
+              method: 'POST',
+            })
+
+            if (response.ok) {
+              const data: PaginatedDocs<unknown> = await response.json()
+              setLastLoadedPage((prevState) => {
+                return {
+                  ...prevState,
+                  [relation]: lastLoadedPageToUse,
+                }
+              })
+
+              if (!data.nextPage) {
+                setLastFullyLoadedRelation(relations.indexOf(relation))
+              }
+
+              if (data.docs.length > 0) {
+                resultsFetched += data.docs.length
+
+                dispatchOptions({
+                  type: 'ADD',
+                  collection,
+                  config,
+                  docs: data.docs,
+                  i18n,
+                  sort,
+                })
+              }
+            } else if (response.status === 403) {
+              setLastFullyLoadedRelation(relations.indexOf(relation))
+              dispatchOptions({
+                type: 'ADD',
+                collection,
+                config,
+                docs: [],
+                i18n,
+                ids: relationMap[relation],
+                sort,
+              })
+            } else {
+              setErrorLoading(t('error:unspecific'))
+            }
+          }
+        }, Promise.resolve())
+
+        if (typeof onSuccess === 'function') {
+          onSuccess()
+        }
+      }
+    },
+    [
+      permissions,
+      relationTo,
+      hasMany,
+      errorLoading,
+      search,
+      getEntityConfig,
+      locale,
+      serverURL,
+      sortOptions,
+      api,
+      i18n,
+      config,
+      t,
+    ],
+  )
+
+  const updateSearch = useDebouncedCallback((searchArg: string, valueArg: Value | Value[]) => {
+    void getResults({
+      filterOptions,
+      lastLoadedPage: {},
+      search: searchArg,
+      sort: true,
+      value: valueArg,
+    })
+    setSearch(searchArg)
+  }, 300)
+
+  const handleInputChange = useCallback(
+    (searchArg: string, valueArg: Value | Value[]) => {
+      if (search !== searchArg) {
+        setLastLoadedPage({})
+        updateSearch(searchArg, valueArg, searchArg !== '')
+      }
+    },
+    [search, updateSearch],
+  )
+
+  const handleValueChange = useEffectEvent((value: Value | Value[]) => {
+    const relationMap = createRelationMap({
+      hasMany,
+      relationTo,
+      value,
+    })
+
+    void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
+      await priorRelation
+
+      const idsToLoad = ids.filter((id) => {
+        return !options.find((optionGroup) =>
+          optionGroup?.options?.find(
+            (option) => option.value === id && option.relationTo === relation,
+          ),
+        )
+      })
 
-      if (isPolymorphic) {
-        setValue(value, Boolean(disableModifyForm))
+      if (idsToLoad.length > 0) {
+        const query = {
+          depth: 0,
+          draft: true,
+          limit: idsToLoad.length,
+          locale,
+          where: {
+            id: {
+              in: idsToLoad,
+            },
+          },
+        }
+
+        if (!errorLoading) {
+          const response = await fetch(`${serverURL}${api}/${relation}`, {
+            body: qs.stringify(query),
+            credentials: 'include',
+            headers: {
+              'Accept-Language': i18n.language,
+              'Content-Type': 'application/x-www-form-urlencoded',
+              'X-HTTP-Method-Override': 'GET',
+            },
+            method: 'POST',
+          })
+
+          const collection = getEntityConfig({ collectionSlug: relation })
+          let docs = []
+
+          if (response.ok) {
+            const data = await response.json()
+            docs = data.docs
+          }
+
+          dispatchOptions({
+            type: 'ADD',
+            collection,
+            config,
+            docs,
+            i18n,
+            ids: idsToLoad,
+            sort: true,
+          })
+        }
+      }
+    }, Promise.resolve())
+  })
+
+  const prevValue = useRef(value)
+  const isFirstRenderRef = useRef(true)
+  // ///////////////////////////////////
+  // Ensure we have an option for each value
+  // ///////////////////////////////////
+  useEffect(() => {
+    if (isFirstRenderRef.current || !dequal(value, prevValue.current)) {
+      handleValueChange(value)
+    }
+    isFirstRenderRef.current = false
+    prevValue.current = value
+  }, [value])
+
+  // Determine if we should switch to word boundary search
+  useEffect(() => {
+    const relations = Array.isArray(relationTo) ? relationTo : [relationTo]
+    const isIdOnly = relations.reduce((idOnly, relation) => {
+      const collection = getEntityConfig({ collectionSlug: relation })
+      const fieldToSearch = collection?.admin?.useAsTitle || 'id'
+      return fieldToSearch === 'id' && idOnly
+    }, true)
+    setEnableWordBoundarySearch(!isIdOnly)
+  }, [relationTo, getEntityConfig])
+
+  const getResultsEffectEvent: GetResults = useEffectEvent(async (args) => {
+    return await getResults(args)
+  })
+
+  // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
+  // Note - effect should not run on first run
+  useEffect(() => {
+    // If the menu is open while filterOptions changes
+    // due to latency of form state and fast clicking into this field,
+    // re-fetch options
+    if (hasLoadedFirstPageRef.current && menuIsOpen) {
+      setIsLoading(true)
+      void getResultsEffectEvent({
+        filterOptions,
+        lastLoadedPage: {},
+        onSuccess: () => {
+          hasLoadedFirstPageRef.current = true
+          setIsLoading(false)
+        },
+        value: valueRef.current,
+      })
+    }
+
+    // If the menu is not open, still reset the field state
+    // because we need to get new options next time the menu opens
+    dispatchOptions({
+      type: 'CLEAR',
+      exemptValues: valueRef.current,
+    })
+
+    setLastFullyLoadedRelation(-1)
+    setLastLoadedPage({})
+  }, [relationTo, filterOptions, locale, path, menuIsOpen])
+
+  const onSave = useCallback<DocumentDrawerProps['onSave']>(
+    (args) => {
+      dispatchOptions({
+        type: 'UPDATE',
+        collection: args.collectionConfig,
+        config,
+        doc: args.doc,
+        i18n,
+      })
+
+      const currentValue = valueRef.current
+      const docID = args.doc.id
+
+      if (hasMany) {
+        const unchanged = (currentValue as Option[]).some((option) =>
+          typeof option === 'string' ? option === docID : option.value === docID,
+        )
+
+        const valuesToSet = (currentValue as Option[]).map((option) =>
+          option.value === docID
+            ? { relationTo: args.collectionConfig.slug, value: docID }
+            : option,
+        )
+
+        setValue(valuesToSet, unchanged)
       } else {
-        setValue(value.value, Boolean(disableModifyForm))
+        const unchanged = currentValue === docID
+
+        setValue({ relationTo: args.collectionConfig.slug, value: docID }, unchanged)
       }
     },
-    [isPolymorphic, setValue],
+    [i18n, config, hasMany, setValue],
   )
 
-  const sharedProps = {
-    AfterInput,
-    allowCreate,
-    allowEdit,
-    appearance,
-    BeforeInput,
-    className,
-    Description,
-    description,
-    Error,
-    filterOptions,
-    initialValue,
-    isPolymorphic: Array.isArray(relationTo),
-    isSortable,
-    Label,
-    label,
-    localized,
-    maxResultsPerRequest: 10,
-    maxRows: field?.maxRows,
-    minRows: field?.minRows,
-    path,
-    readOnly: readOnly || disabled,
-    relationTo: safeRelationTo,
-    required,
-    showError,
-    sortOptions: sortOptions as any, // todo: fix this, handle Record<string, string> type
-    style: styles,
-  }
+  const onDuplicate = useCallback<DocumentDrawerProps['onDuplicate']>(
+    (args) => {
+      dispatchOptions({
+        type: 'ADD',
+        collection: args.collectionConfig,
+        config,
+        docs: [args.doc],
+        i18n,
+        sort: true,
+      })
 
-  if (hasMany) {
-    return (
-      <RelationshipInput
-        {...sharedProps}
-        hasMany={true}
-        onChange={handleChangeHasMulti}
-        value={
-          value
-            ? (Array.isArray(value) ? value : [value]).map((val) => {
-                if (isPolymorphic) {
-                  return val as ValueWithRelation
-                } else {
-                  return {
-                    relationTo: safeRelationTo[0],
-                    value: val as ValueWithRelation['value'],
-                  }
-                }
+      if (hasMany) {
+        setValue(
+          valueRef.current
+            ? (valueRef.current as Option[]).concat({
+                relationTo: args.collectionConfig.slug,
+                value: args.doc.id,
+              } as Option)
+            : null,
+        )
+      } else {
+        setValue({
+          relationTo: args.collectionConfig.slug,
+          value: args.doc.id,
+        })
+      }
+    },
+    [i18n, config, hasMany, setValue],
+  )
+
+  const onDelete = useCallback<DocumentDrawerProps['onDelete']>(
+    (args) => {
+      dispatchOptions({
+        id: args.id,
+        type: 'REMOVE',
+        collection: args.collectionConfig,
+        config,
+        i18n,
+      })
+
+      if (hasMany) {
+        setValue(
+          valueRef.current
+            ? (valueRef.current as Option[]).filter((option) => {
+                return option.value !== args.id
               })
-            : null
+            : null,
+        )
+      } else {
+        setValue(null)
+      }
+
+      return
+    },
+    [i18n, config, hasMany, setValue],
+  )
+
+  const filterOption = useCallback((item: Option, searchFilter: string) => {
+    if (!searchFilter) {
+      return true
+    }
+    const r = wordBoundariesRegex(searchFilter || '')
+    // breaking the labels to search into smaller parts increases performance
+    const breakApartThreshold = 250
+    let labelString = String(item.label)
+    // strings less than breakApartThreshold length won't be chunked
+    while (labelString.length > breakApartThreshold) {
+      // slicing by the next space after the length of the search input prevents slicing the string up by partial words
+      const indexOfSpace = labelString.indexOf(' ', searchFilter.length)
+      if (
+        r.test(labelString.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))
+      ) {
+        return true
+      }
+      labelString = labelString.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1)
+    }
+    return r.test(labelString.slice(-breakApartThreshold))
+  }, [])
+
+  const onDocumentOpen = useCallback<ReactSelectAdapterProps['customProps']['onDocumentOpen']>(
+    ({ id, collectionSlug, hasReadPermission, openInNewTab }) => {
+      if (openInNewTab) {
+        if (hasReadPermission && id && collectionSlug) {
+          const docUrl = formatAdminURL({
+            adminRoute: config.routes.admin,
+            path: `/collections/${collectionSlug}/${id}`,
+          })
+
+          window.open(docUrl, '_blank')
         }
-      />
-    )
+      } else {
+        openDrawerWhenRelationChanges.current = true
+
+        setCurrentlyOpenRelationship({
+          id,
+          collectionSlug,
+          hasReadPermission,
+        })
+      }
+    },
+    [setCurrentlyOpenRelationship, config.routes.admin],
+  )
+
+  useEffect(() => {
+    if (openDrawerWhenRelationChanges.current) {
+      openDrawer()
+      openDrawerWhenRelationChanges.current = false
+    }
+  }, [openDrawer, currentlyOpenRelationship])
+
+  const valueToRender = findOptionsByValue({ allowEdit, options, value })
+
+  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
+    valueToRender.value = null
   }
 
+  const styles = useMemo(() => mergeFieldStyles(field), [field])
+
   return (
-    <RelationshipInput
-      {...sharedProps}
-      hasMany={false}
-      onChange={handleChangeSingle}
-      value={
-        value
-          ? isPolymorphic
-            ? (value as ValueWithRelation)
-            : {
-                relationTo: safeRelationTo[0],
-                value: value as ValueWithRelation['value'],
+    <div
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && 'error',
+        errorLoading && 'error-loading',
+        (readOnly || disabled) && `${baseClass}--read-only`,
+        !(readOnly || disabled) && allowCreate && `${baseClass}--allow-create`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      id={`field-${path.replace(/\./g, '__')}`}
+      style={styles}
+    >
+      <RenderCustomComponent
+        CustomComponent={Label}
+        Fallback={
+          <FieldLabel label={label} localized={localized} path={path} required={required} />
+        }
+      />
+      <div className={`${fieldBaseClass}__wrap`}>
+        <RenderCustomComponent
+          CustomComponent={Error}
+          Fallback={<FieldError path={path} showError={showError} />}
+        />
+        {BeforeInput}
+        {!errorLoading && (
+          <div className={`${baseClass}__wrap`}>
+            <ReactSelect
+              backspaceRemovesValue={!(isDrawerOpen || isListDrawerOpen)}
+              components={{
+                MultiValueLabel,
+                SingleValue,
+                ...(appearance !== 'select' && { DropdownIndicator: null }),
+              }}
+              customProps={{
+                disableKeyDown: isDrawerOpen || isListDrawerOpen,
+                disableMouseDown: isDrawerOpen || isListDrawerOpen,
+                onDocumentOpen,
+                onSave,
+              }}
+              disabled={readOnly || disabled || isDrawerOpen || isListDrawerOpen}
+              filterOption={enableWordBoundarySearch ? filterOption : undefined}
+              getOptionValue={(option) => {
+                if (!option) {
+                  return undefined
+                }
+                return hasMany && Array.isArray(relationTo)
+                  ? `${option.relationTo}_${option.value}`
+                  : (option.value as string)
+              }}
+              isLoading={appearance === 'select' && isLoading}
+              isMulti={hasMany}
+              isSearchable={appearance === 'select'}
+              isSortable={isSortable}
+              menuIsOpen={appearance === 'select' ? menuIsOpen : false}
+              onChange={
+                !(readOnly || disabled)
+                  ? (selected) => {
+                      if (selected === null) {
+                        setValue(hasMany ? [] : null)
+                      } else if (hasMany && Array.isArray(selected)) {
+                        setValue(
+                          selected
+                            ? selected.map((option) => {
+                                if (hasMultipleRelations) {
+                                  return {
+                                    relationTo: option.relationTo,
+                                    value: option.value,
+                                  }
+                                }
+
+                                return option.value
+                              })
+                            : null,
+                        )
+                      } else if (hasMultipleRelations && !Array.isArray(selected)) {
+                        setValue({
+                          relationTo: selected.relationTo,
+                          value: selected.value,
+                        })
+                      } else if (!Array.isArray(selected)) {
+                        setValue(selected.value)
+                      }
+                    }
+                  : undefined
               }
-          : null
-      }
-    />
+              onInputChange={(newSearch) => handleInputChange(newSearch, value)}
+              onMenuClose={() => {
+                setMenuIsOpen(false)
+              }}
+              onMenuOpen={() => {
+                if (appearance === 'drawer') {
+                  openListDrawer()
+                } else if (appearance === 'select') {
+                  setMenuIsOpen(true)
+                  if (!hasLoadedFirstPageRef.current) {
+                    setIsLoading(true)
+                    void getResults({
+                      filterOptions,
+                      lastLoadedPage: {},
+                      onSuccess: () => {
+                        hasLoadedFirstPageRef.current = true
+                        setIsLoading(false)
+                      },
+                      value: initialValue,
+                    })
+                  }
+                }
+              }}
+              onMenuScrollToBottom={() => {
+                void getResults({
+                  filterOptions,
+                  lastFullyLoadedRelation,
+                  lastLoadedPage,
+                  search,
+                  sort: false,
+                  value: initialValue,
+                })
+              }}
+              options={options}
+              placeholder={placeholder}
+              showError={showError}
+              value={valueToRender ?? null}
+            />
+            {!(readOnly || disabled) && allowCreate && (
+              <AddNewRelation
+                hasMany={hasMany}
+                path={path}
+                relationTo={relationTo}
+                setValue={setValue}
+                value={value}
+              />
+            )}
+          </div>
+        )}
+        {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}
+        {AfterInput}
+        <RenderCustomComponent
+          CustomComponent={Description}
+          Fallback={<FieldDescription description={description} path={path} />}
+        />
+      </div>
+      {currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && (
+        <DocumentDrawer onDelete={onDelete} onDuplicate={onDuplicate} onSave={onSave} />
+      )}
+      {appearance === 'drawer' && !readOnly && (
+        <ListDrawer allowCreate={allowCreate} enableRowSelections={false} onSelect={onListSelect} />
+      )}
+    </div>
   )
 }
 
diff --git a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx
index 03cb247a53a..adc01e11d4c 100644
--- a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx
+++ b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx
@@ -25,7 +25,7 @@ export const MultiValueLabel: React.FC<
 > = (props) => {
   const {
     data: { allowEdit, label, relationTo, value },
-    selectProps: { customProps: { draggableProps, onDocumentDrawerOpen } = {} } = {},
+    selectProps: { customProps: { draggableProps, onDocumentOpen } = {} } = {},
   } = props
 
   const { permissions } = useAuth()
@@ -49,12 +49,13 @@ export const MultiValueLabel: React.FC<
           <button
             aria-label={`Edit ${label}`}
             className={`${baseClass}__drawer-toggler`}
-            onClick={() => {
+            onClick={(event) => {
               setShowTooltip(false)
-              onDocumentDrawerOpen({
+              onDocumentOpen({
                 id: value,
                 collectionSlug: relationTo,
                 hasReadPermission,
+                openInNewTab: event.metaKey || event.ctrlKey,
               })
             }}
             onKeyDown={(e) => {
diff --git a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx
index 0741da61b07..1397808d53d 100644
--- a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx
+++ b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx
@@ -26,7 +26,7 @@ export const SingleValue: React.FC<
   const {
     children,
     data: { allowEdit, label, relationTo, value },
-    selectProps: { customProps: { onDocumentDrawerOpen } = {} } = {},
+    selectProps: { customProps: { onDocumentOpen } = {} } = {},
   } = props
 
   const [showTooltip, setShowTooltip] = useState(false)
@@ -44,12 +44,13 @@ export const SingleValue: React.FC<
               <button
                 aria-label={t('general:editLabel', { label })}
                 className={`${baseClass}__drawer-toggler`}
-                onClick={() => {
+                onClick={(event) => {
                   setShowTooltip(false)
-                  onDocumentDrawerOpen({
+                  onDocumentOpen({
                     id: value,
                     collectionSlug: relationTo,
                     hasReadPermission,
+                    openInNewTab: event.metaKey || event.ctrlKey,
                   })
                 }}
                 onKeyDown={(e) => {
diff --git a/packages/ui/src/fields/Relationship/types.ts b/packages/ui/src/fields/Relationship/types.ts
index 1ac1797cfdc..8336f39ebc2 100644
--- a/packages/ui/src/fields/Relationship/types.ts
+++ b/packages/ui/src/fields/Relationship/types.ts
@@ -1,12 +1,5 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type {
-  ClientCollectionConfig,
-  ClientConfig,
-  CollectionSlug,
-  FilterOptionsResult,
-  StaticDescription,
-  StaticLabel,
-} from 'payload'
+import type { ClientCollectionConfig, ClientConfig, FilterOptionsResult } from 'payload'
 
 export type Option = {
   allowEdit: boolean
@@ -70,44 +63,3 @@ export type GetResults = (args: {
   sort?: boolean
   value?: Value | Value[]
 }) => Promise<void>
-
-export type RelationshipInputProps = {
-  readonly AfterInput: React.ReactNode // optional
-  readonly allowCreate: boolean // optional
-  readonly allowEdit: boolean // optional
-  readonly appearance: 'drawer' | 'select' // optional
-  readonly BeforeInput: React.ReactNode // optional
-  readonly className: string // optional
-  readonly Description: React.ReactNode // optional
-  readonly description: StaticDescription // optional
-  readonly Error: React.ReactNode // optional
-  readonly filterOptions: FilterOptionsResult // optional
-  readonly initialValue: Value | Value[] // optional
-  readonly isPolymorphic: boolean
-  readonly isSortable: boolean // optional
-  readonly Label: React.ReactNode // optional
-  readonly label: StaticLabel // optional
-  readonly localized: boolean // optional
-  readonly maxResultsPerRequest: number // optional
-  readonly maxRows: number // optional
-  readonly minRows: number // optional
-  readonly path: string
-  readonly readOnly: boolean // optional
-  readonly relationTo: string[]
-  readonly required: boolean // optional
-  readonly showError: boolean // optional
-  readonly sortOptions: Partial<Record<CollectionSlug, string>> // optional
-  readonly style: React.CSSProperties // optional
-} & SharedRelationshipInputProps
-
-type SharedRelationshipInputProps =
-  | {
-      readonly hasMany: false
-      readonly onChange: (value: ValueWithRelation, modifyForm?: boolean) => void
-      readonly value?: null | ValueWithRelation
-    }
-  | {
-      readonly hasMany: true
-      readonly onChange: (value: ValueWithRelation[], modifyForm?: boolean) => void
-      readonly value?: null | ValueWithRelation[]
-    }

From 718b5ea3fbf83a76ce2c67d5e1d1e808f57a0f3f Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Mon, 12 May 2025 13:24:03 -0400
Subject: [PATCH 05/14] fix overwritten types

---
 packages/payload/src/fields/config/types.ts   | 8 +++++---
 packages/ui/src/elements/ReactSelect/types.ts | 9 +++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/payload/src/fields/config/types.ts b/packages/payload/src/fields/config/types.ts
index a1411e2f3c4..a8aec98c94a 100644
--- a/packages/payload/src/fields/config/types.ts
+++ b/packages/payload/src/fields/config/types.ts
@@ -1061,6 +1061,7 @@ export type SelectField = {
     } & Admin['components']
     isClearable?: boolean
     isSortable?: boolean
+    placeholder?: LabelFunction | string
   } & Admin
   /**
    * Customize the SQL table name
@@ -1093,7 +1094,7 @@ export type SelectField = {
   Omit<FieldBase, 'validate'>
 
 export type SelectFieldClient = {
-  admin?: AdminClient & Pick<SelectField['admin'], 'isClearable' | 'isSortable'>
+  admin?: AdminClient & Pick<SelectField['admin'], 'isClearable' | 'isSortable' | 'placeholder'>
 } & FieldBaseClient &
   Pick<SelectField, 'hasMany' | 'interfaceName' | 'options' | 'type'>
 
@@ -1160,10 +1161,11 @@ type RelationshipAdmin = {
     >
   } & Admin['components']
   isSortable?: boolean
+  placeholder?: LabelFunction | string
 } & Admin
 
 type RelationshipAdminClient = AdminClient &
-  Pick<RelationshipAdmin, 'allowCreate' | 'allowEdit' | 'appearance' | 'isSortable'>
+  Pick<RelationshipAdmin, 'allowCreate' | 'allowEdit' | 'appearance' | 'isSortable' | 'placeholder'>
 
 export type PolymorphicRelationshipField = {
   admin?: {
@@ -1174,7 +1176,7 @@ export type PolymorphicRelationshipField = {
 
 export type PolymorphicRelationshipFieldClient = {
   admin?: {
-    sortOptions?: PolymorphicRelationshipField['admin']['sortOptions']
+    sortOptions?: Pick<PolymorphicRelationshipField['admin'], 'sortOptions'>
   } & RelationshipAdminClient
 } & Pick<PolymorphicRelationshipField, 'relationTo'> &
   SharedRelationshipPropertiesClient
diff --git a/packages/ui/src/elements/ReactSelect/types.ts b/packages/ui/src/elements/ReactSelect/types.ts
index 4520327b085..58e324b1ba5 100644
--- a/packages/ui/src/elements/ReactSelect/types.ts
+++ b/packages/ui/src/elements/ReactSelect/types.ts
@@ -1,11 +1,11 @@
+import type { LabelFunction } from 'payload'
 import type { CommonProps, GroupBase, Props as ReactSelectStateManagerProps } from 'react-select'
 
-import type { DocumentDrawerProps, UseDocumentDrawer } from '../DocumentDrawer/types.js'
+import type { DocumentDrawerProps } from '../DocumentDrawer/types.js'
 
 type CustomSelectProps = {
   disableKeyDown?: boolean
   disableMouseDown?: boolean
-  DocumentDrawerToggler?: ReturnType<UseDocumentDrawer>[1]
   draggableProps?: any
   droppableRef?: React.RefObject<HTMLDivElement | null>
   editableProps?: (
@@ -14,10 +14,11 @@ type CustomSelectProps = {
     selectProps: ReactSelectStateManagerProps,
   ) => any
   onDelete?: DocumentDrawerProps['onDelete']
-  onDocumentDrawerOpen?: (args: {
+  onDocumentOpen?: (args: {
     collectionSlug: string
     hasReadPermission: boolean
     id: number | string
+    openInNewTab?: boolean
   }) => void
   onDuplicate?: DocumentDrawerProps['onSave']
   onSave?: DocumentDrawerProps['onSave']
@@ -101,7 +102,7 @@ export type ReactSelectAdapterProps = {
   onMenuOpen?: () => void
   onMenuScrollToBottom?: () => void
   options: Option[] | OptionGroup[]
-  placeholder?: string
+  placeholder?: LabelFunction | string
   showError?: boolean
   value?: Option | Option[]
 }

From bdf8917b16c17fc84416842598a44a74351740b8 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Mon, 12 May 2025 13:27:33 -0400
Subject: [PATCH 06/14] remove Input component for now

---
 packages/ui/src/fields/Relationship/Input.tsx | 759 ------------------
 1 file changed, 759 deletions(-)
 delete mode 100644 packages/ui/src/fields/Relationship/Input.tsx

diff --git a/packages/ui/src/fields/Relationship/Input.tsx b/packages/ui/src/fields/Relationship/Input.tsx
deleted file mode 100644
index 530fb313357..00000000000
--- a/packages/ui/src/fields/Relationship/Input.tsx
+++ /dev/null
@@ -1,759 +0,0 @@
-'use client'
-import type { FilterOptionsResult, PaginatedDocs, ValueWithRelation, Where } from 'payload'
-
-import { dequal } from 'dequal/lite'
-import { wordBoundariesRegex } from 'payload/shared'
-import * as qs from 'qs-esm'
-import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
-
-import type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'
-import type { ListDrawerProps } from '../../elements/ListDrawer/types.js'
-import type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'
-import type { GetResults, Option, RelationshipInputProps, Value } from './types.js'
-
-import { AddNewRelation } from '../../elements/AddNewRelation/index.js'
-import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'
-import { useListDrawer } from '../../elements/ListDrawer/index.js'
-import { ReactSelect } from '../../elements/ReactSelect/index.js'
-import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
-import { FieldDescription } from '../../fields/FieldDescription/index.js'
-import { FieldError } from '../../fields/FieldError/index.js'
-import { FieldLabel } from '../../fields/FieldLabel/index.js'
-import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js'
-import { useEffectEvent } from '../../hooks/useEffectEvent.js'
-import { useAuth } from '../../providers/Auth/index.js'
-import { useConfig } from '../../providers/Config/index.js'
-import { useLocale } from '../../providers/Locale/index.js'
-import { useTranslation } from '../../providers/Translation/index.js'
-import { fieldBaseClass } from '../shared/index.js'
-import { createRelationMap } from './createRelationMap.js'
-import { findOptionsByValue } from './findOptionsByValue.js'
-import { optionsReducer } from './optionsReducer.js'
-import { MultiValueLabel } from './select-components/MultiValueLabel/index.js'
-import { SingleValue } from './select-components/SingleValue/index.js'
-import './index.scss'
-
-const baseClass = 'relationship'
-
-export const RelationshipInput: React.FC<RelationshipInputProps> = (props) => {
-  const {
-    AfterInput,
-    allowCreate = true,
-    allowEdit = true,
-    appearance = 'select',
-    BeforeInput,
-    className,
-    description,
-    Description,
-    Error,
-    filterOptions,
-    hasMany,
-    initialValue,
-    isPolymorphic,
-    isSortable = true,
-    label,
-    Label,
-    localized,
-    maxResultsPerRequest = 10,
-    onChange,
-    path,
-    readOnly,
-    relationTo,
-    required,
-    showError,
-    sortOptions,
-    style,
-    value,
-  } = props
-
-  const { config, getEntityConfig } = useConfig()
-
-  const {
-    routes: { api },
-    serverURL,
-  } = config
-
-  const { i18n, t } = useTranslation()
-  const { permissions } = useAuth()
-  const { code: locale } = useLocale()
-
-  const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState<
-    Parameters<ReactSelectAdapterProps['customProps']['onDocumentDrawerOpen']>[0]
-  >({
-    id: undefined,
-    collectionSlug: undefined,
-    hasReadPermission: false,
-  })
-
-  const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1)
-  const [lastLoadedPage, setLastLoadedPage] = useState<Record<string, number>>({})
-  const [errorLoading, setErrorLoading] = useState('')
-  const [search, setSearch] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false)
-  const [menuIsOpen, setMenuIsOpen] = useState(false)
-  const hasLoadedFirstPageRef = useRef(false)
-
-  const [options, dispatchOptions] = useReducer(optionsReducer, [])
-
-  const valueRef = useRef(value)
-  // the line below seems odd
-  valueRef.current = value
-
-  const [DocumentDrawer, , { isDrawerOpen, openDrawer }] = useDocumentDrawer({
-    id: currentlyOpenRelationship.id,
-    collectionSlug: currentlyOpenRelationship.collectionSlug,
-  })
-
-  // Filter selected values from displaying in the list drawer
-  const listDrawerFilterOptions = useMemo<FilterOptionsResult>(() => {
-    let newFilterOptions = filterOptions
-
-    if (value) {
-      ;(hasMany === false ? [value] : value).forEach((val) => {
-        relationTo.forEach((relation) => {
-          newFilterOptions = {
-            ...(filterOptions || {}),
-            [relation]: {
-              ...(typeof filterOptions?.[relation] === 'object' ? filterOptions[relation] : {}),
-              id: {
-                not_in: [typeof val === 'object' ? val.value : val],
-              },
-            },
-          }
-        })
-      })
-    }
-
-    return newFilterOptions
-  }, [filterOptions, value, hasMany, relationTo])
-
-  const [
-    ListDrawer,
-    ,
-    { closeDrawer: closeListDrawer, isDrawerOpen: isListDrawerOpen, openDrawer: openListDrawer },
-  ] = useListDrawer({
-    collectionSlugs: relationTo,
-    filterOptions: listDrawerFilterOptions,
-  })
-
-  const onListSelect = useCallback<NonNullable<ListDrawerProps['onSelect']>>(
-    ({ collectionSlug, doc }) => {
-      if (hasMany) {
-        const withSelection = Array.isArray(value) ? value : []
-        withSelection.push({
-          relationTo: collectionSlug,
-          value: doc.id,
-        })
-        onChange(withSelection)
-      } else if (hasMany === false) {
-        onChange({
-          relationTo: collectionSlug,
-          value: doc.id,
-        })
-      }
-
-      closeListDrawer()
-    },
-    [hasMany, onChange, closeListDrawer, value],
-  )
-
-  const openDrawerWhenRelationChanges = useRef(false)
-
-  const getResults: GetResults = useCallback(
-    async ({
-      filterOptions,
-      lastFullyLoadedRelation: lastFullyLoadedRelationArg,
-      lastLoadedPage: lastLoadedPageArg,
-      onSuccess,
-      search: searchArg,
-      sort,
-      value: valueArg,
-    }) => {
-      if (!permissions) {
-        return
-      }
-      const lastFullyLoadedRelationToUse =
-        typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1
-
-      const relations = Array.isArray(relationTo) ? relationTo : [relationTo]
-      const relationsToFetch =
-        lastFullyLoadedRelationToUse === -1
-          ? relations
-          : relations.slice(lastFullyLoadedRelationToUse + 1)
-
-      let resultsFetched = 0
-      const relationMap = createRelationMap({
-        hasMany,
-        isPolymorphic,
-        relationTo,
-        value: valueArg,
-      })
-
-      if (!errorLoading) {
-        await relationsToFetch.reduce(async (priorRelation, relation) => {
-          const relationFilterOption = filterOptions?.[relation]
-
-          let lastLoadedPageToUse
-          if (search !== searchArg) {
-            lastLoadedPageToUse = 1
-          } else {
-            lastLoadedPageToUse = lastLoadedPageArg[relation] + 1
-          }
-          await priorRelation
-
-          if (relationFilterOption === false) {
-            setLastFullyLoadedRelation(relations.indexOf(relation))
-            return Promise.resolve()
-          }
-
-          if (resultsFetched < 10) {
-            const collection = getEntityConfig({ collectionSlug: relation })
-            const fieldToSearch = collection?.admin?.useAsTitle || 'id'
-            let fieldToSort = collection?.defaultSort || 'id'
-            if (typeof sortOptions === 'string') {
-              fieldToSort = sortOptions
-            } else if (sortOptions?.[relation]) {
-              fieldToSort = sortOptions[relation]
-            }
-
-            const query: {
-              [key: string]: unknown
-              where: Where
-            } = {
-              depth: 0,
-              draft: true,
-              limit: maxResultsPerRequest,
-              locale,
-              page: lastLoadedPageToUse,
-              sort: fieldToSort,
-              where: {
-                and: [
-                  {
-                    id: {
-                      not_in: relationMap[relation],
-                    },
-                  },
-                ],
-              },
-            }
-
-            if (searchArg) {
-              query.where.and.push({
-                [fieldToSearch]: {
-                  like: searchArg,
-                },
-              })
-            }
-
-            if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
-              query.where.and.push(relationFilterOption)
-            }
-
-            const response = await fetch(`${serverURL}${api}/${relation}`, {
-              body: qs.stringify(query),
-              credentials: 'include',
-              headers: {
-                'Accept-Language': i18n.language,
-                'Content-Type': 'application/x-www-form-urlencoded',
-                'X-HTTP-Method-Override': 'GET',
-              },
-              method: 'POST',
-            })
-
-            if (response.ok) {
-              const data: PaginatedDocs<unknown> = await response.json()
-              setLastLoadedPage((prevState) => {
-                return {
-                  ...prevState,
-                  [relation]: lastLoadedPageToUse,
-                }
-              })
-
-              if (!data.nextPage) {
-                setLastFullyLoadedRelation(relations.indexOf(relation))
-              }
-
-              if (data.docs.length > 0) {
-                resultsFetched += data.docs.length
-
-                dispatchOptions({
-                  type: 'ADD',
-                  collection,
-                  config,
-                  docs: data.docs,
-                  i18n,
-                  sort,
-                })
-              }
-            } else if (response.status === 403) {
-              setLastFullyLoadedRelation(relations.indexOf(relation))
-              dispatchOptions({
-                type: 'ADD',
-                collection,
-                config,
-                docs: [],
-                i18n,
-                ids: relationMap[relation],
-                sort,
-              })
-            } else {
-              setErrorLoading(t('error:unspecific'))
-            }
-          }
-        }, Promise.resolve())
-
-        if (typeof onSuccess === 'function') {
-          onSuccess()
-        }
-      }
-    },
-    [
-      permissions,
-      relationTo,
-      hasMany,
-      isPolymorphic,
-      errorLoading,
-      search,
-      getEntityConfig,
-      sortOptions,
-      maxResultsPerRequest,
-      locale,
-      serverURL,
-      api,
-      i18n,
-      config,
-      t,
-    ],
-  )
-
-  const updateSearch = useDebouncedCallback((searchArg: string, valueArg: Value | Value[]) => {
-    void getResults({
-      filterOptions,
-      lastLoadedPage: {},
-      search: searchArg,
-      sort: true,
-      value: valueArg,
-    })
-    setSearch(searchArg)
-  }, 300)
-
-  const handleInputChange = useCallback(
-    (searchArg: string, valueArg: Value | Value[]) => {
-      if (search !== searchArg) {
-        setLastLoadedPage({})
-        updateSearch(searchArg, valueArg, searchArg !== '')
-      }
-    },
-    [search, updateSearch],
-  )
-
-  const handleValueChange = useEffectEvent((value: Value | Value[]) => {
-    const relationMap = createRelationMap({
-      hasMany,
-      isPolymorphic,
-      relationTo,
-      value,
-    })
-
-    void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
-      await priorRelation
-
-      const idsToLoad = ids.filter((id) => {
-        return !options.find((optionGroup) =>
-          optionGroup?.options?.find(
-            (option) => option.value === id && option.relationTo === relation,
-          ),
-        )
-      })
-
-      if (idsToLoad.length > 0) {
-        const query = {
-          depth: 0,
-          draft: true,
-          limit: idsToLoad.length,
-          locale,
-          where: {
-            id: {
-              in: idsToLoad,
-            },
-          },
-        }
-
-        if (!errorLoading) {
-          const response = await fetch(`${serverURL}${api}/${relation}`, {
-            body: qs.stringify(query),
-            credentials: 'include',
-            headers: {
-              'Accept-Language': i18n.language,
-              'Content-Type': 'application/x-www-form-urlencoded',
-              'X-HTTP-Method-Override': 'GET',
-            },
-            method: 'POST',
-          })
-
-          const collection = getEntityConfig({ collectionSlug: relation })
-          let docs = []
-
-          if (response.ok) {
-            const data = await response.json()
-            docs = data.docs
-          }
-
-          dispatchOptions({
-            type: 'ADD',
-            collection,
-            config,
-            docs,
-            i18n,
-            ids: idsToLoad,
-            sort: true,
-          })
-        }
-      }
-    }, Promise.resolve())
-  })
-
-  const prevValue = useRef(value)
-  const isFirstRenderRef = useRef(true)
-  // ///////////////////////////////////
-  // Ensure we have an option for each value
-  // ///////////////////////////////////
-  useEffect(() => {
-    if (isFirstRenderRef.current || !dequal(value, prevValue.current)) {
-      handleValueChange(value)
-    }
-    isFirstRenderRef.current = false
-    prevValue.current = value
-  }, [value])
-
-  // Determine if we should switch to word boundary search
-  useEffect(() => {
-    const relations = Array.isArray(relationTo) ? relationTo : [relationTo]
-    const isIdOnly = relations.reduce((idOnly, relation) => {
-      const collection = getEntityConfig({ collectionSlug: relation })
-      const fieldToSearch = collection?.admin?.useAsTitle || 'id'
-      return fieldToSearch === 'id' && idOnly
-    }, true)
-    setEnableWordBoundarySearch(!isIdOnly)
-  }, [relationTo, getEntityConfig])
-
-  const getResultsEffectEvent: GetResults = useEffectEvent(async (args) => {
-    return await getResults(args)
-  })
-
-  // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
-  // Note - effect should not run on first run
-  useEffect(() => {
-    // If the menu is open while filterOptions changes
-    // due to latency of form state and fast clicking into this field,
-    // re-fetch options
-    if (hasLoadedFirstPageRef.current && menuIsOpen) {
-      setIsLoading(true)
-      void getResultsEffectEvent({
-        filterOptions,
-        lastLoadedPage: {},
-        onSuccess: () => {
-          hasLoadedFirstPageRef.current = true
-          setIsLoading(false)
-        },
-        value: valueRef.current,
-      })
-    }
-
-    // If the menu is not open, still reset the field state
-    // because we need to get new options next time the menu opens
-    dispatchOptions({
-      type: 'CLEAR',
-      exemptValues: valueRef.current,
-    })
-
-    setLastFullyLoadedRelation(-1)
-    setLastLoadedPage({})
-  }, [relationTo, filterOptions, locale, path, menuIsOpen])
-
-  const onSave = useCallback<DocumentDrawerProps['onSave']>(
-    (args) => {
-      dispatchOptions({
-        type: 'UPDATE',
-        collection: args.collectionConfig,
-        config,
-        doc: args.doc,
-        i18n,
-      })
-
-      const docID = args.doc.id
-
-      if (hasMany) {
-        const currentValue = valueRef.current
-          ? Array.isArray(valueRef.current)
-            ? valueRef.current
-            : [valueRef.current]
-          : []
-
-        const unchanged = currentValue.some((option: ValueWithRelation) => {
-          return option.value === docID && option.relationTo === args.collectionConfig.slug
-        })
-
-        const valuesToSet = currentValue.map((option: ValueWithRelation) => {
-          return {
-            relationTo: option.value === docID ? args.collectionConfig.slug : option.relationTo,
-            value: option.value,
-          }
-        })
-
-        onChange(valuesToSet, unchanged)
-      } else if (hasMany === false) {
-        const unchanged = !Array.isArray(valueRef.current) && valueRef.current.value === docID
-
-        onChange({ relationTo: args.collectionConfig.slug, value: docID }, unchanged)
-      }
-    },
-    [i18n, config, hasMany, onChange],
-  )
-
-  const onDuplicate = useCallback<DocumentDrawerProps['onDuplicate']>(
-    (args) => {
-      dispatchOptions({
-        type: 'ADD',
-        collection: args.collectionConfig,
-        config,
-        docs: [args.doc],
-        i18n,
-        sort: true,
-      })
-
-      if (hasMany) {
-        onChange(
-          valueRef.current
-            ? (valueRef.current as ValueWithRelation[]).concat({
-                relationTo: args.collectionConfig.slug,
-                value: args.doc.id,
-              })
-            : null,
-        )
-      } else if (hasMany === false) {
-        onChange({
-          relationTo: args.collectionConfig.slug,
-          value: args.doc.id,
-        })
-      }
-    },
-    [i18n, config, hasMany, onChange],
-  )
-
-  const onDelete = useCallback<DocumentDrawerProps['onDelete']>(
-    (args) => {
-      dispatchOptions({
-        id: args.id,
-        type: 'REMOVE',
-        collection: args.collectionConfig,
-        config,
-        i18n,
-      })
-
-      if (hasMany) {
-        onChange(
-          valueRef.current
-            ? (valueRef.current as ValueWithRelation[]).filter((option) => {
-                return option.value !== args.id
-              })
-            : null,
-        )
-      } else {
-        onChange(null)
-      }
-
-      return
-    },
-    [i18n, config, hasMany, onChange],
-  )
-
-  const filterOption = useCallback((item: Option, searchFilter: string) => {
-    if (!searchFilter) {
-      return true
-    }
-    const r = wordBoundariesRegex(searchFilter || '')
-    // breaking the labels to search into smaller parts increases performance
-    const breakApartThreshold = 250
-    let labelString = String(item.label)
-    // strings less than breakApartThreshold length won't be chunked
-    while (labelString.length > breakApartThreshold) {
-      // slicing by the next space after the length of the search input prevents slicing the string up by partial words
-      const indexOfSpace = labelString.indexOf(' ', searchFilter.length)
-      if (
-        r.test(labelString.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))
-      ) {
-        return true
-      }
-      labelString = labelString.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1)
-    }
-    return r.test(labelString.slice(-breakApartThreshold))
-  }, [])
-
-  const onDocumentDrawerOpen = useCallback<
-    ReactSelectAdapterProps['customProps']['onDocumentDrawerOpen']
-  >(({ id, collectionSlug, hasReadPermission }) => {
-    openDrawerWhenRelationChanges.current = true
-    setCurrentlyOpenRelationship({
-      id,
-      collectionSlug,
-      hasReadPermission,
-    })
-  }, [])
-
-  useEffect(() => {
-    if (openDrawerWhenRelationChanges.current) {
-      openDrawer()
-      openDrawerWhenRelationChanges.current = false
-    }
-  }, [openDrawer, currentlyOpenRelationship])
-
-  const valueToRender = findOptionsByValue({ allowEdit, options, value })
-
-  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
-    valueToRender.value = null
-  }
-
-  return (
-    <div
-      className={[
-        fieldBaseClass,
-        baseClass,
-        className,
-        showError && 'error',
-        errorLoading && 'error-loading',
-        readOnly && `${baseClass}--read-only`,
-        !readOnly && allowCreate && `${baseClass}--allow-create`,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      id={`field-${path.replace(/\./g, '__')}`}
-      style={style}
-    >
-      <RenderCustomComponent
-        CustomComponent={Label}
-        Fallback={
-          <FieldLabel label={label} localized={localized} path={path} required={required} />
-        }
-      />
-      <div className={`${fieldBaseClass}__wrap`}>
-        <RenderCustomComponent
-          CustomComponent={Error}
-          Fallback={<FieldError path={path} showError={showError} />}
-        />
-        {BeforeInput}
-        {!errorLoading && (
-          <div className={`${baseClass}__wrap`}>
-            <ReactSelect
-              backspaceRemovesValue={!(isDrawerOpen || isListDrawerOpen)}
-              components={{
-                MultiValueLabel,
-                SingleValue,
-                ...(appearance !== 'select' && { DropdownIndicator: null }),
-              }}
-              customProps={{
-                disableKeyDown: isDrawerOpen || isListDrawerOpen,
-                disableMouseDown: isDrawerOpen || isListDrawerOpen,
-                onDocumentDrawerOpen,
-                onSave,
-              }}
-              disabled={readOnly || isDrawerOpen || isListDrawerOpen}
-              filterOption={enableWordBoundarySearch ? filterOption : undefined}
-              getOptionValue={(option: ValueWithRelation) => {
-                if (!option) {
-                  return undefined
-                }
-                return hasMany && Array.isArray(relationTo)
-                  ? `${option.relationTo}_${option.value}`
-                  : (option.value as string)
-              }}
-              isLoading={appearance === 'select' && isLoading}
-              isMulti={hasMany}
-              isSearchable={appearance === 'select'}
-              isSortable={isSortable}
-              menuIsOpen={appearance === 'select' ? menuIsOpen : false}
-              onChange={
-                !readOnly
-                  ? (selected) => {
-                      if (hasMany) {
-                        if (selected === null) {
-                          onChange([])
-                        } else if (Array.isArray(selected)) {
-                          onChange(selected as ValueWithRelation[])
-                        }
-                      } else if (hasMany === false) {
-                        if (selected === null) {
-                          onChange(null)
-                        } else if (!Array.isArray(selected)) {
-                          // @todo: parent will need to handle polymorphic values
-                          onChange(selected as ValueWithRelation)
-                        }
-                      }
-                    }
-                  : undefined
-              }
-              onInputChange={(newSearch) => handleInputChange(newSearch, value)}
-              onMenuClose={() => {
-                setMenuIsOpen(false)
-              }}
-              onMenuOpen={() => {
-                if (appearance === 'drawer') {
-                  openListDrawer()
-                } else if (appearance === 'select') {
-                  setMenuIsOpen(true)
-                  if (!hasLoadedFirstPageRef.current) {
-                    setIsLoading(true)
-                    void getResults({
-                      filterOptions,
-                      lastLoadedPage: {},
-                      onSuccess: () => {
-                        hasLoadedFirstPageRef.current = true
-                        setIsLoading(false)
-                      },
-                      value: initialValue,
-                    })
-                  }
-                }
-              }}
-              onMenuScrollToBottom={() => {
-                void getResults({
-                  filterOptions,
-                  lastFullyLoadedRelation,
-                  lastLoadedPage,
-                  search,
-                  sort: false,
-                  value: initialValue,
-                })
-              }}
-              options={options}
-              showError={showError}
-              value={valueToRender ?? null}
-            />
-            {!readOnly && allowCreate && (
-              <AddNewRelation
-                hasMany={hasMany}
-                path={path}
-                relationTo={relationTo}
-                setValue={onChange}
-                value={value}
-              />
-            )}
-          </div>
-        )}
-        {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}
-        {AfterInput}
-        <RenderCustomComponent
-          CustomComponent={Description}
-          Fallback={<FieldDescription description={description} path={path} />}
-        />
-      </div>
-      {currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && (
-        <DocumentDrawer onDelete={onDelete} onDuplicate={onDuplicate} onSave={onSave} />
-      )}
-      {appearance === 'drawer' && !readOnly && (
-        <ListDrawer allowCreate={allowCreate} enableRowSelections={false} onSelect={onListSelect} />
-      )}
-    </div>
-  )
-}

From 6b8fa57d8169e016de1e25dde512daab4ddaeb48 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Mon, 12 May 2025 13:34:26 -0400
Subject: [PATCH 07/14] revert tsconfig for multi-tenant

---
 packages/plugin-multi-tenant/tsconfig.json | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/plugin-multi-tenant/tsconfig.json b/packages/plugin-multi-tenant/tsconfig.json
index 561b5a63d76..b14b853dc0b 100644
--- a/packages/plugin-multi-tenant/tsconfig.json
+++ b/packages/plugin-multi-tenant/tsconfig.json
@@ -1,9 +1,4 @@
 {
   "extends": "../../tsconfig.base.json",
-  "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}],
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "scripts/**/*.ts"
-  ]
+  "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}]
 }

From 9cfca2b278d6b60d53fab607cb5964c135b6955a Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Mon, 12 May 2025 14:08:06 -0400
Subject: [PATCH 08/14] successful build

---
 packages/plugin-multi-tenant/scripts/generateTranslations.ts | 1 -
 packages/plugin-multi-tenant/tsconfig.json                   | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-multi-tenant/scripts/generateTranslations.ts b/packages/plugin-multi-tenant/scripts/generateTranslations.ts
index ce740fec735..f23645a3f9f 100644
--- a/packages/plugin-multi-tenant/scripts/generateTranslations.ts
+++ b/packages/plugin-multi-tenant/scripts/generateTranslations.ts
@@ -3,7 +3,6 @@ import type { AcceptedLanguages, GenericTranslationsObject } from '@payloadcms/t
 import path from 'path'
 import { fileURLToPath } from 'url'
 
-// @ts-ignore
 import { translateObject } from '../../translations/scripts/translateNewKeys/index.js'
 import { translations } from '../src/translations/index.js'
 import { enTranslations } from '../src/translations/languages/en.js'
diff --git a/packages/plugin-multi-tenant/tsconfig.json b/packages/plugin-multi-tenant/tsconfig.json
index b14b853dc0b..78c99ad732c 100644
--- a/packages/plugin-multi-tenant/tsconfig.json
+++ b/packages/plugin-multi-tenant/tsconfig.json
@@ -1,4 +1,5 @@
 {
   "extends": "../../tsconfig.base.json",
-  "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}]
+  "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}],
+  "exclude": ["scripts"]
 }

From 821cb2eaf49cf62c3d06cb1a025d661540bac4fb Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Mon, 12 May 2025 15:43:17 -0400
Subject: [PATCH 09/14] fix ts issues in translations plugin

---
 .../scripts/translateNewKeys/findMissingKeys.ts     |  2 +-
 .../translateNewKeys/generateTsObjectLiteral.ts     |  2 +-
 .../translations/scripts/translateNewKeys/index.ts  | 13 ++++++++-----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/translations/scripts/translateNewKeys/findMissingKeys.ts b/packages/translations/scripts/translateNewKeys/findMissingKeys.ts
index b37bcab103e..76ba8365c04 100644
--- a/packages/translations/scripts/translateNewKeys/findMissingKeys.ts
+++ b/packages/translations/scripts/translateNewKeys/findMissingKeys.ts
@@ -8,7 +8,7 @@ export function findMissingKeys(
   targetObj: GenericTranslationsObject,
   prefix = '',
 ): string[] {
-  let missingKeys = []
+  let missingKeys: string[] = []
 
   for (const key in baseObj) {
     const baseValue = baseObj[key]
diff --git a/packages/translations/scripts/translateNewKeys/generateTsObjectLiteral.ts b/packages/translations/scripts/translateNewKeys/generateTsObjectLiteral.ts
index 52fe51a7146..7a3dbb0a019 100644
--- a/packages/translations/scripts/translateNewKeys/generateTsObjectLiteral.ts
+++ b/packages/translations/scripts/translateNewKeys/generateTsObjectLiteral.ts
@@ -1,5 +1,5 @@
 export function generateTsObjectLiteral(obj: any): string {
-  const lines = []
+  const lines: string[] = []
   const entries = Object.entries(obj)
   for (const [key, value] of entries) {
     const safeKey = /^[\w$]+$/.test(key) ? key : JSON.stringify(key)
diff --git a/packages/translations/scripts/translateNewKeys/index.ts b/packages/translations/scripts/translateNewKeys/index.ts
index 1cdc2ae4f2c..cf204840898 100644
--- a/packages/translations/scripts/translateNewKeys/index.ts
+++ b/packages/translations/scripts/translateNewKeys/index.ts
@@ -128,7 +128,10 @@ export async function translateObject(props: {
 
     for (const missingKey of missingKeys) {
       const keys: string[] = missingKey.split('.')
-      const sourceText = keys.reduce((acc, key) => acc[key], fromTranslationsObject)
+      const sourceText = keys.reduce(
+        (acc, key) => acc[key] as GenericTranslationsObject,
+        fromTranslationsObject,
+      )
       if (!sourceText || typeof sourceText !== 'string') {
         throw new Error(
           `Missing key ${missingKey} or key not "leaf" in fromTranslationsObject for lang ${targetLang}. (2)`,
@@ -158,9 +161,9 @@ export async function translateObject(props: {
           }
           targetObj[keys[keys.length - 1]] = translated
 
-          allTranslatedTranslationsObject[targetLang].translations = sortKeys(
+          allTranslatedTranslationsObject[targetLang]!.translations = sortKeys(
             deepMergeSimple(
-              allTranslatedTranslationsObject[targetLang].translations,
+              allTranslatedTranslationsObject[targetLang]!.translations,
               allOnlyNewTranslatedTranslationsObject[targetLang],
             ),
           )
@@ -218,10 +221,10 @@ export async function translateObject(props: {
       const filePath = path.resolve(targetFolder, `${sanitizedKey}.ts`)
 
       // prefix & translations
-      let fileContent: string = `${tsFilePrefix.replace('{{locale}}', sanitizedKey)}${generateTsObjectLiteral(allTranslatedTranslationsObject[key].translations)}\n`
+      let fileContent: string = `${tsFilePrefix.replace('{{locale}}', sanitizedKey)}${generateTsObjectLiteral(allTranslatedTranslationsObject[key]?.translations)}\n`
 
       // suffix
-      fileContent += `${tsFileSuffix.replaceAll('{{locale}}', sanitizedKey).replaceAll('{{dateFNSKey}}', `'${allTranslatedTranslationsObject[key].dateFNSKey}'`)}\n`
+      fileContent += `${tsFileSuffix.replaceAll('{{locale}}', sanitizedKey).replaceAll('{{dateFNSKey}}', `'${allTranslatedTranslationsObject[key]?.dateFNSKey}'`)}\n`
 
       // eslint
       fileContent = await applyEslintFixes(fileContent, filePath)

From b88da1f6ece2497862aedf97cbd6a7635b2aa5ac Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Tue, 13 May 2025 13:10:06 -0400
Subject: [PATCH 10/14] chore: organize translation generation inside @tools

---
 eslint.config.js                              |  1 +
 packages/plugin-multi-tenant/package.json     |  1 -
 packages/richtext-lexical/package.json        |  3 +-
 packages/translations/.env.example            |  1 -
 packages/translations/package.json            |  3 +-
 .../scripts/translateNewKeys/run.ts           | 32 ---------------
 pnpm-lock.yaml                                |  6 +++
 tools/.env.example                            |  1 +
 tools/scripts/package.json                    |  6 ++-
 .../scripts/src/generateTranslations/core.ts  | 32 +++++++++++++++
 .../plugin-multi-tenant.ts                    | 11 ++++--
 .../generateTranslations/richtext-lexical.ts  | 39 +++++++++++--------
 .../src/generateTranslations/tsconfig.json    | 12 ++++++
 .../utils}/applyEslintFixes.ts                |  0
 .../utils}/findMissingKeys.ts                 |  2 +-
 .../utils}/generateTsObjectLiteral.ts         |  4 +-
 .../src/generateTranslations/utils}/index.ts  | 39 +++++++++++--------
 .../generateTranslations/utils}/sortKeys.ts   |  0
 .../utils}/translateText.ts                   |  2 +-
 19 files changed, 116 insertions(+), 79 deletions(-)
 delete mode 100644 packages/translations/.env.example
 delete mode 100644 packages/translations/scripts/translateNewKeys/run.ts
 create mode 100644 tools/.env.example
 create mode 100644 tools/scripts/src/generateTranslations/core.ts
 rename packages/plugin-multi-tenant/scripts/generateTranslations.ts => tools/scripts/src/generateTranslations/plugin-multi-tenant.ts (74%)
 rename packages/richtext-lexical/scripts/translateNewKeys.ts => tools/scripts/src/generateTranslations/richtext-lexical.ts (56%)
 create mode 100644 tools/scripts/src/generateTranslations/tsconfig.json
 rename {packages/translations/scripts/translateNewKeys => tools/scripts/src/generateTranslations/utils}/applyEslintFixes.ts (100%)
 rename {packages/translations/scripts/translateNewKeys => tools/scripts/src/generateTranslations/utils}/findMissingKeys.ts (90%)
 rename {packages/translations/scripts/translateNewKeys => tools/scripts/src/generateTranslations/utils}/generateTsObjectLiteral.ts (79%)
 rename {packages/translations/scripts/translateNewKeys => tools/scripts/src/generateTranslations/utils}/index.ts (88%)
 rename {packages/translations/scripts/translateNewKeys => tools/scripts/src/generateTranslations/utils}/sortKeys.ts (100%)
 rename {packages/translations/scripts/translateNewKeys => tools/scripts/src/generateTranslations/utils}/translateText.ts (95%)

diff --git a/eslint.config.js b/eslint.config.js
index b63fa17cc41..f808f18b4db 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -74,6 +74,7 @@ export const rootEslintConfig = [
       'no-console': 'off',
       'perfectionist/sort-object-types': 'off',
       'perfectionist/sort-objects': 'off',
+      'payload/no-relative-monorepo-imports': 'off',
     },
   },
 ]
diff --git a/packages/plugin-multi-tenant/package.json b/packages/plugin-multi-tenant/package.json
index 33bee35804c..077b46d5b1e 100644
--- a/packages/plugin-multi-tenant/package.json
+++ b/packages/plugin-multi-tenant/package.json
@@ -71,7 +71,6 @@
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
-    "generateTranslations": "node --no-deprecation --import @swc-node/register/esm-register scripts/generateTranslations.ts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "pack:plugin": "pnpm prepublishOnly && pnpm copyfiles && pnpm pack",
diff --git a/packages/richtext-lexical/package.json b/packages/richtext-lexical/package.json
index 466ec7f03e4..a8804585eb1 100644
--- a/packages/richtext-lexical/package.json
+++ b/packages/richtext-lexical/package.json
@@ -344,8 +344,7 @@
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "prepublishOnly": "pnpm clean && pnpm turbo build",
-    "translateNewKeys": "node --no-deprecation --import @swc-node/register/esm-register scripts/translateNewKeys.ts"
+    "prepublishOnly": "pnpm clean && pnpm turbo build"
   },
   "lint-staged": {
     "**/package.json": "sort-package-json",
diff --git a/packages/translations/.env.example b/packages/translations/.env.example
deleted file mode 100644
index 22d74139b5d..00000000000
--- a/packages/translations/.env.example
+++ /dev/null
@@ -1 +0,0 @@
-OPENAI_KEY=sk-
diff --git a/packages/translations/package.json b/packages/translations/package.json
index 7c4c9d97478..8d432ae8761 100644
--- a/packages/translations/package.json
+++ b/packages/translations/package.json
@@ -51,8 +51,7 @@
     "clean": "rimraf -g {dist,*.tsbuildinfo}",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "prepublishOnly": "pnpm clean && pnpm turbo build",
-    "translateNewKeys": "node --no-deprecation --import @swc-node/register/esm-register scripts/translateNewKeys/run.ts"
+    "prepublishOnly": "pnpm clean && pnpm turbo build"
   },
   "dependencies": {
     "date-fns": "4.1.0"
diff --git a/packages/translations/scripts/translateNewKeys/run.ts b/packages/translations/scripts/translateNewKeys/run.ts
deleted file mode 100644
index e903614f3d8..00000000000
--- a/packages/translations/scripts/translateNewKeys/run.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-import type { AcceptedLanguages, GenericTranslationsObject } from '../../src/types.js'
-
-import { translations } from '../../src/exports/all.js'
-import { enTranslations } from '../../src/languages/en.js'
-import { translateObject } from './index.js'
-
-const filename = fileURLToPath(import.meta.url)
-const dirname = path.dirname(filename)
-
-const allTranslations: {
-  [key in AcceptedLanguages]?: {
-    dateFNSKey: string
-    translations: GenericTranslationsObject
-  }
-} = {}
-
-for (const key of Object.keys(translations)) {
-  allTranslations[key] = {
-    dateFNSKey: translations[key].dateFNSKey,
-    translations: translations[key].translations,
-  }
-}
-
-void translateObject({
-  allTranslationsObject: allTranslations,
-  fromTranslationsObject: enTranslations,
-  //languages: ['de'],
-  targetFolder: path.resolve(dirname, '../../src/languages'),
-})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea9f7df22a0..9eca2844227 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1928,6 +1928,9 @@ importers:
 
   tools/scripts:
     dependencies:
+      '@payloadcms/translations':
+        specifier: workspace:*
+        version: link:../../packages/translations
       '@swc-node/register':
         specifier: 1.10.9
         version: 1.10.9(@swc/core@1.10.12(@swc/helpers@0.5.15))(@swc/types@0.1.17)(typescript@5.7.3)
@@ -1955,6 +1958,9 @@ importers:
       open:
         specifier: ^10.1.0
         version: 10.1.0
+      payload:
+        specifier: workspace:*
+        version: link:../../packages/payload
 
 packages:
 
diff --git a/tools/.env.example b/tools/.env.example
new file mode 100644
index 00000000000..ea5cc2a08bc
--- /dev/null
+++ b/tools/.env.example
@@ -0,0 +1 @@
+OPENAI_KEY=sk-your-key-here
\ No newline at end of file
diff --git a/tools/scripts/package.json b/tools/scripts/package.json
index 0b944c34a5b..2420bb74217 100644
--- a/tools/scripts/package.json
+++ b/tools/scripts/package.json
@@ -16,6 +16,8 @@
     "build": "tsc",
     "build-template-with-local-pkgs": "pnpm runts src/build-template-with-local-pkgs.ts",
     "gen-templates": "pnpm runts src/generate-template-variations.ts",
+    "generateTranslations:core": "node --no-deprecation --import @swc-node/register/esm-register src/generateTranslations/core.ts",
+    "generateTranslations:plugin-multi-tenant": "node --no-deprecation --import @swc-node/register/esm-register src/generateTranslations/plugin-multi-tenant.ts",
     "license-check": "pnpm runts src/license-check.ts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -24,6 +26,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "@payloadcms/translations": "workspace:*",
     "@swc-node/register": "1.10.9",
     "@tools/constants": "workspace:*",
     "@tools/releaser": "workspace:*",
@@ -32,6 +35,7 @@
     "create-payload-app": "workspace:*",
     "csv-stringify": "^6.5.2",
     "license-checker": "25.0.1",
-    "open": "^10.1.0"
+    "open": "^10.1.0",
+    "payload": "workspace:*"
   }
 }
diff --git a/tools/scripts/src/generateTranslations/core.ts b/tools/scripts/src/generateTranslations/core.ts
new file mode 100644
index 00000000000..17291374a5a
--- /dev/null
+++ b/tools/scripts/src/generateTranslations/core.ts
@@ -0,0 +1,32 @@
+import type { AcceptedLanguages, GenericTranslationsObject } from '@payloadcms/translations'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import { translations } from '../../../../packages/translations/src/exports/all.js'
+import { enTranslations } from '../../../../packages/translations/src/languages/en.js'
+import { translateObject } from './utils/index.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const allTranslations: {
+  [key in AcceptedLanguages]?: {
+    dateFNSKey: string
+    translations: GenericTranslationsObject
+  }
+} = {}
+
+for (const key of Object.keys(translations) as AcceptedLanguages[]) {
+  allTranslations[key] = {
+    dateFNSKey: translations[key]?.dateFNSKey || 'unknown-date-fns-key',
+    translations: translations[key]?.translations || {},
+  }
+}
+
+void translateObject({
+  allTranslationsObject: allTranslations,
+  fromTranslationsObject: enTranslations,
+  //languages: ['de'],
+  targetFolder: path.resolve(dirname, '../../../../packages/translations/src/languages'),
+})
diff --git a/packages/plugin-multi-tenant/scripts/generateTranslations.ts b/tools/scripts/src/generateTranslations/plugin-multi-tenant.ts
similarity index 74%
rename from packages/plugin-multi-tenant/scripts/generateTranslations.ts
rename to tools/scripts/src/generateTranslations/plugin-multi-tenant.ts
index f23645a3f9f..f14d063a1bb 100644
--- a/packages/plugin-multi-tenant/scripts/generateTranslations.ts
+++ b/tools/scripts/src/generateTranslations/plugin-multi-tenant.ts
@@ -3,9 +3,9 @@ import type { AcceptedLanguages, GenericTranslationsObject } from '@payloadcms/t
 import path from 'path'
 import { fileURLToPath } from 'url'
 
-import { translateObject } from '../../translations/scripts/translateNewKeys/index.js'
-import { translations } from '../src/translations/index.js'
-import { enTranslations } from '../src/translations/languages/en.js'
+import { translations } from '../../../../packages/plugin-multi-tenant/src/translations/index.js'
+import { enTranslations } from '../../../../packages/plugin-multi-tenant/src/translations/languages/en.js'
+import { translateObject } from './utils/index.js'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -27,7 +27,10 @@ for (const key of Object.keys(translations)) {
 void translateObject({
   allTranslationsObject: allTranslations,
   fromTranslationsObject: enTranslations,
-  targetFolder: path.resolve(dirname, '../src/translations/languages'),
+  targetFolder: path.resolve(
+    dirname,
+    '../../../../packages/plugin-multi-tenant/src/translations/languages',
+  ),
   tsFilePrefix: `import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.js'\n\nexport const {{locale}}Translations: PluginDefaultTranslationsObject = `,
   tsFileSuffix: `\n\nexport const {{locale}}: PluginLanguage = {
     dateFNSKey: {{dateFNSKey}},
diff --git a/packages/richtext-lexical/scripts/translateNewKeys.ts b/tools/scripts/src/generateTranslations/richtext-lexical.ts
similarity index 56%
rename from packages/richtext-lexical/scripts/translateNewKeys.ts
rename to tools/scripts/src/generateTranslations/richtext-lexical.ts
index 31c27f78037..457ff649a12 100644
--- a/packages/richtext-lexical/scripts/translateNewKeys.ts
+++ b/tools/scripts/src/generateTranslations/richtext-lexical.ts
@@ -8,13 +8,13 @@ import * as fs from 'node:fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
-import { translateObject } from '../../translations/scripts/translateNewKeys/index.js'
+import { translateObject } from './utils/index.js'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
 // Function to get all files with a specific name recursively in all subdirectories
-function findFilesRecursively(startPath, filter) {
-  let results = []
+function findFilesRecursively(startPath: string, filter: string): string[] {
+  let results: string[] = []
 
   const entries = fs.readdirSync(startPath, { withFileTypes: true })
 
@@ -33,7 +33,10 @@ function findFilesRecursively(startPath, filter) {
   return results
 }
 
-const i18nFilePaths = findFilesRecursively(path.resolve(dirname, '../src'), 'i18n.ts')
+const i18nFilePaths = findFilesRecursively(
+  path.resolve(dirname, '../../../../packages/richtext-lexical/src'),
+  'i18n.ts',
+)
 
 async function translate() {
   for (const i18nFilePath of i18nFilePaths) {
@@ -46,22 +49,26 @@ async function translate() {
       }
     } = {}
     for (const lang in translationsObject) {
-      allTranslations[lang] = {
+      allTranslations[lang as AcceptedLanguages] = {
         dateFNSKey: 'en',
-        translations: translationsObject[lang],
+        translations: translationsObject?.[lang as keyof GenericLanguages] || {},
       }
     }
 
-    console.log('Translating', i18nFilePath)
-    await translateObject({
-      allTranslationsObject: allTranslations,
-      fromTranslationsObject: translationsObject.en,
-      inlineFile: i18nFilePath,
-      tsFilePrefix: `import { GenericLanguages } from '@payloadcms/translations'
-
-export const i18n: Partial<GenericLanguages> = `,
-      tsFileSuffix: ``,
-    })
+    if (translationsObject.en) {
+      console.log('Translating', i18nFilePath)
+      await translateObject({
+        allTranslationsObject: allTranslations,
+        fromTranslationsObject: translationsObject.en,
+        inlineFile: i18nFilePath,
+        tsFilePrefix: `import { GenericLanguages } from '@payloadcms/translations'
+  
+  export const i18n: Partial<GenericLanguages> = `,
+        tsFileSuffix: ``,
+      })
+    } else {
+      console.error(`No English translations found in ${i18nFilePath}`)
+    }
   }
 }
 
diff --git a/tools/scripts/src/generateTranslations/tsconfig.json b/tools/scripts/src/generateTranslations/tsconfig.json
new file mode 100644
index 00000000000..b6f9efa0fbc
--- /dev/null
+++ b/tools/scripts/src/generateTranslations/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "strict": true,
+    "rootDir": "../../../../"
+  },
+  "include": [
+    "../../../../packages/**/*.ts",
+    "./*.ts",
+    "./**/*.ts",
+  ],
+}
diff --git a/packages/translations/scripts/translateNewKeys/applyEslintFixes.ts b/tools/scripts/src/generateTranslations/utils/applyEslintFixes.ts
similarity index 100%
rename from packages/translations/scripts/translateNewKeys/applyEslintFixes.ts
rename to tools/scripts/src/generateTranslations/utils/applyEslintFixes.ts
diff --git a/packages/translations/scripts/translateNewKeys/findMissingKeys.ts b/tools/scripts/src/generateTranslations/utils/findMissingKeys.ts
similarity index 90%
rename from packages/translations/scripts/translateNewKeys/findMissingKeys.ts
rename to tools/scripts/src/generateTranslations/utils/findMissingKeys.ts
index 76ba8365c04..4e406506955 100644
--- a/packages/translations/scripts/translateNewKeys/findMissingKeys.ts
+++ b/tools/scripts/src/generateTranslations/utils/findMissingKeys.ts
@@ -1,4 +1,4 @@
-import type { GenericTranslationsObject } from '../../src/types.js'
+import type { GenericTranslationsObject } from '@payloadcms/translations'
 
 /**
  * Returns keys which are present in baseObj but not in targetObj
diff --git a/packages/translations/scripts/translateNewKeys/generateTsObjectLiteral.ts b/tools/scripts/src/generateTranslations/utils/generateTsObjectLiteral.ts
similarity index 79%
rename from packages/translations/scripts/translateNewKeys/generateTsObjectLiteral.ts
rename to tools/scripts/src/generateTranslations/utils/generateTsObjectLiteral.ts
index 7a3dbb0a019..4bf3b494db2 100644
--- a/packages/translations/scripts/translateNewKeys/generateTsObjectLiteral.ts
+++ b/tools/scripts/src/generateTranslations/utils/generateTsObjectLiteral.ts
@@ -1,4 +1,6 @@
-export function generateTsObjectLiteral(obj: any): string {
+import type { JsonObject } from 'payload'
+
+export function generateTsObjectLiteral(obj: JsonObject): string {
   const lines: string[] = []
   const entries = Object.entries(obj)
   for (const [key, value] of entries) {
diff --git a/packages/translations/scripts/translateNewKeys/index.ts b/tools/scripts/src/generateTranslations/utils/index.ts
similarity index 88%
rename from packages/translations/scripts/translateNewKeys/index.ts
rename to tools/scripts/src/generateTranslations/utils/index.ts
index cf204840898..b3cb8e8177d 100644
--- a/packages/translations/scripts/translateNewKeys/index.ts
+++ b/tools/scripts/src/generateTranslations/utils/index.ts
@@ -1,17 +1,17 @@
 /* eslint no-console: 0 */
 
-import fs from 'fs'
-import path from 'path'
-import { format } from 'prettier'
-
 import type {
   AcceptedLanguages,
   GenericLanguages,
   GenericTranslationsObject,
-} from '../../src/types.js'
+} from '@payloadcms/translations'
+
+import { acceptedLanguages } from '@payloadcms/translations'
+import fs from 'fs'
+import path from 'path'
+import { deepMergeSimple } from 'payload/shared'
+import { format } from 'prettier'
 
-import { deepMergeSimple } from '../../src/utilities/deepMergeSimple.js'
-import { acceptedLanguages } from '../../src/utilities/languages.js'
 import { applyEslintFixes } from './applyEslintFixes.js'
 import { findMissingKeys } from './findMissingKeys.js'
 import { generateTsObjectLiteral } from './generateTsObjectLiteral.js'
@@ -104,16 +104,16 @@ export async function translateObject(props: {
      */
     for (const key of keysWhichDoNotExistInFromlang) {
       // Delete those keys in the target language object obj[lang]
-      const keys = key.split('.')
+      const keys: string[] = key.split('.')
       let targetObj = allTranslatedTranslationsObject?.[targetLang].translations
       for (let i = 0; i < keys.length - 1; i += 1) {
-        const nextObj = targetObj[keys[i]]
+        const nextObj = targetObj[keys[i] as string]
         if (typeof nextObj !== 'object') {
           throw new Error(`Key ${keys[i]} is not an object in ${targetLang} (1)`)
         }
         targetObj = nextObj
       }
-      delete targetObj[keys[keys.length - 1]]
+      delete targetObj[keys[keys.length - 1] as string]
     }
 
     if (!allTranslatedTranslationsObject?.[targetLang].translations) {
@@ -150,16 +150,16 @@ export async function translateObject(props: {
           }
           let targetObj = allOnlyNewTranslatedTranslationsObject?.[targetLang]
           for (let i = 0; i < keys.length - 1; i += 1) {
-            if (!targetObj[keys[i]]) {
-              targetObj[keys[i]] = {}
+            if (!targetObj[keys[i] as string]) {
+              targetObj[keys[i] as string] = {}
             }
-            const nextObj = targetObj[keys[i]]
+            const nextObj = targetObj[keys[i] as string]
             if (typeof nextObj !== 'object') {
               throw new Error(`Key ${keys[i]} is not an object in ${targetLang} (3)`)
             }
             targetObj = nextObj
           }
-          targetObj[keys[keys.length - 1]] = translated
+          targetObj[keys[keys.length - 1] as string] = translated
 
           allTranslatedTranslationsObject[targetLang]!.translations = sortKeys(
             deepMergeSimple(
@@ -183,9 +183,14 @@ export async function translateObject(props: {
   console.log('New translations:', allOnlyNewTranslatedTranslationsObject)
 
   if (inlineFile?.length) {
-    const simpleTranslationsObject = {}
+    const simpleTranslationsObject: GenericTranslationsObject = {}
     for (const lang in allTranslatedTranslationsObject) {
-      simpleTranslationsObject[lang] = allTranslatedTranslationsObject[lang].translations
+      if (lang in allTranslatedTranslationsObject) {
+        simpleTranslationsObject[lang as keyof typeof allTranslatedTranslationsObject] =
+          allTranslatedTranslationsObject[
+            lang as keyof typeof allTranslatedTranslationsObject
+          ]!.translations
+      }
     }
 
     // write allTranslatedTranslationsObject
@@ -221,7 +226,7 @@ export async function translateObject(props: {
       const filePath = path.resolve(targetFolder, `${sanitizedKey}.ts`)
 
       // prefix & translations
-      let fileContent: string = `${tsFilePrefix.replace('{{locale}}', sanitizedKey)}${generateTsObjectLiteral(allTranslatedTranslationsObject[key]?.translations)}\n`
+      let fileContent: string = `${tsFilePrefix.replace('{{locale}}', sanitizedKey)}${generateTsObjectLiteral(allTranslatedTranslationsObject[key]?.translations || {})}\n`
 
       // suffix
       fileContent += `${tsFileSuffix.replaceAll('{{locale}}', sanitizedKey).replaceAll('{{dateFNSKey}}', `'${allTranslatedTranslationsObject[key]?.dateFNSKey}'`)}\n`
diff --git a/packages/translations/scripts/translateNewKeys/sortKeys.ts b/tools/scripts/src/generateTranslations/utils/sortKeys.ts
similarity index 100%
rename from packages/translations/scripts/translateNewKeys/sortKeys.ts
rename to tools/scripts/src/generateTranslations/utils/sortKeys.ts
diff --git a/packages/translations/scripts/translateNewKeys/translateText.ts b/tools/scripts/src/generateTranslations/utils/translateText.ts
similarity index 95%
rename from packages/translations/scripts/translateNewKeys/translateText.ts
rename to tools/scripts/src/generateTranslations/utils/translateText.ts
index e53d3d31d4d..d7999e88b41 100644
--- a/packages/translations/scripts/translateNewKeys/translateText.ts
+++ b/tools/scripts/src/generateTranslations/utils/translateText.ts
@@ -4,7 +4,7 @@ import path from 'path'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
-dotenv.config({ path: path.resolve(dirname, '../../', '.env') })
+dotenv.config({ path: path.resolve(dirname, '../../../../', '.env') })
 
 export async function translateText(text: string, targetLang: string) {
   const response = await fetch('https://api.openai.com/v1/chat/completions', {

From cfe6a231d4b754f503808216b055fe89303a49f9 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Tue, 13 May 2025 14:34:54 -0400
Subject: [PATCH 11/14] working build

---
 packages/plugin-multi-tenant/package.json     | 20 +++++++++++++++++++
 packages/plugin-multi-tenant/tsconfig.json    |  3 +--
 pnpm-lock.yaml                                | 13 +++++++++---
 tools/scripts/package.json                    |  6 +++++-
 .../scripts/src/generateTranslations/core.ts  |  4 ++--
 .../plugin-multi-tenant.ts                    |  4 ++--
 .../src/generateTranslations/tsconfig.json    | 12 -----------
 tools/scripts/tsconfig.json                   |  3 ++-
 tsconfig.base.json                            |  8 +++++++-
 9 files changed, 49 insertions(+), 24 deletions(-)
 delete mode 100644 tools/scripts/src/generateTranslations/tsconfig.json

diff --git a/packages/plugin-multi-tenant/package.json b/packages/plugin-multi-tenant/package.json
index 077b46d5b1e..7a704b5cb79 100644
--- a/packages/plugin-multi-tenant/package.json
+++ b/packages/plugin-multi-tenant/package.json
@@ -56,6 +56,16 @@
       "import": "./src/exports/utilities.ts",
       "types": "./src/exports/utilities.ts",
       "default": "./src/exports/utilities.ts"
+    },
+    "./translations/languages/all": {
+      "import": "./src/translations/index.ts",
+      "types": "./src/translations/index.ts",
+      "default": "./src/translations/index.ts"
+    },
+    "./translations/languages/*": {
+      "import": "./src/translations/languages/*.ts",
+      "types": "./src/translations/languages/*.ts",
+      "default": "./src/translations/languages/*.ts"
     }
   },
   "main": "./src/index.ts",
@@ -118,6 +128,16 @@
         "import": "./dist/exports/utilities.js",
         "types": "./dist/exports/utilities.d.ts",
         "default": "./dist/exports/utilities.js"
+      },
+      "./translations/languages/all": {
+        "import": "./dist/translations/index.js",
+        "types": "./dist/translations/index.d.ts",
+        "default": "./dist/translations/index.js"
+      },
+      "./translations/languages/*": {
+        "import": "./dist/translations/languages/*.js",
+        "types": "./dist/translations/languages/*.d.ts",
+        "default": "./dist/translations/languages/*.js"
       }
     },
     "main": "./dist/index.js",
diff --git a/packages/plugin-multi-tenant/tsconfig.json b/packages/plugin-multi-tenant/tsconfig.json
index 78c99ad732c..b14b853dc0b 100644
--- a/packages/plugin-multi-tenant/tsconfig.json
+++ b/packages/plugin-multi-tenant/tsconfig.json
@@ -1,5 +1,4 @@
 {
   "extends": "../../tsconfig.base.json",
-  "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}],
-  "exclude": ["scripts"]
+  "references": [{ "path": "../payload" }, { "path": "../ui"}, { "path": "../translations"}]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9eca2844227..b74c4c7ccfb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1928,9 +1928,6 @@ importers:
 
   tools/scripts:
     dependencies:
-      '@payloadcms/translations':
-        specifier: workspace:*
-        version: link:../../packages/translations
       '@swc-node/register':
         specifier: 1.10.9
         version: 1.10.9(@swc/core@1.10.12(@swc/helpers@0.5.15))(@swc/types@0.1.17)(typescript@5.7.3)
@@ -1961,6 +1958,16 @@ importers:
       payload:
         specifier: workspace:*
         version: link:../../packages/payload
+    devDependencies:
+      '@payloadcms/plugin-multi-tenant':
+        specifier: workspace:*
+        version: link:../../packages/plugin-multi-tenant
+      '@payloadcms/richtext-lexical':
+        specifier: workspace:*
+        version: link:../../packages/richtext-lexical
+      '@payloadcms/translations':
+        specifier: workspace:*
+        version: link:../../packages/translations
 
 packages:
 
diff --git a/tools/scripts/package.json b/tools/scripts/package.json
index 2420bb74217..a7ca29cf6e5 100644
--- a/tools/scripts/package.json
+++ b/tools/scripts/package.json
@@ -26,7 +26,6 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@payloadcms/translations": "workspace:*",
     "@swc-node/register": "1.10.9",
     "@tools/constants": "workspace:*",
     "@tools/releaser": "workspace:*",
@@ -37,5 +36,10 @@
     "license-checker": "25.0.1",
     "open": "^10.1.0",
     "payload": "workspace:*"
+  },
+  "devDependencies": {
+    "@payloadcms/plugin-multi-tenant": "workspace:*",
+    "@payloadcms/richtext-lexical": "workspace:*",
+    "@payloadcms/translations": "workspace:*"
   }
 }
diff --git a/tools/scripts/src/generateTranslations/core.ts b/tools/scripts/src/generateTranslations/core.ts
index 17291374a5a..1c58513a97e 100644
--- a/tools/scripts/src/generateTranslations/core.ts
+++ b/tools/scripts/src/generateTranslations/core.ts
@@ -1,10 +1,10 @@
 import type { AcceptedLanguages, GenericTranslationsObject } from '@payloadcms/translations'
 
+import { translations } from '@payloadcms/translations/all'
+import { enTranslations } from '@payloadcms/translations/languages/en'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
-import { translations } from '../../../../packages/translations/src/exports/all.js'
-import { enTranslations } from '../../../../packages/translations/src/languages/en.js'
 import { translateObject } from './utils/index.js'
 
 const filename = fileURLToPath(import.meta.url)
diff --git a/tools/scripts/src/generateTranslations/plugin-multi-tenant.ts b/tools/scripts/src/generateTranslations/plugin-multi-tenant.ts
index f14d063a1bb..91b94c58b7b 100644
--- a/tools/scripts/src/generateTranslations/plugin-multi-tenant.ts
+++ b/tools/scripts/src/generateTranslations/plugin-multi-tenant.ts
@@ -1,10 +1,10 @@
 import type { AcceptedLanguages, GenericTranslationsObject } from '@payloadcms/translations'
 
+import { translations } from '@payloadcms/plugin-multi-tenant/translations/languages/all'
+import { enTranslations } from '@payloadcms/plugin-multi-tenant/translations/languages/en'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
-import { translations } from '../../../../packages/plugin-multi-tenant/src/translations/index.js'
-import { enTranslations } from '../../../../packages/plugin-multi-tenant/src/translations/languages/en.js'
 import { translateObject } from './utils/index.js'
 
 const filename = fileURLToPath(import.meta.url)
diff --git a/tools/scripts/src/generateTranslations/tsconfig.json b/tools/scripts/src/generateTranslations/tsconfig.json
deleted file mode 100644
index b6f9efa0fbc..00000000000
--- a/tools/scripts/src/generateTranslations/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "../../../../tsconfig.base.json",
-  "compilerOptions": {
-    "strict": true,
-    "rootDir": "../../../../"
-  },
-  "include": [
-    "../../../../packages/**/*.ts",
-    "./*.ts",
-    "./**/*.ts",
-  ],
-}
diff --git a/tools/scripts/tsconfig.json b/tools/scripts/tsconfig.json
index f9f8fe292b0..e14725842ae 100644
--- a/tools/scripts/tsconfig.json
+++ b/tools/scripts/tsconfig.json
@@ -2,5 +2,6 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "strict": true,
-  }
+  },
+  "references": [{ "path": "../../packages/translations" }, { "path": "../../packages/richtext-lexical"}, { "path": "../../packages/plugin-multi-tenant"}]
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 93d171a6a72..12877b1be6f 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/fields/config.ts"],
+      "@payload-config": ["./test/_community/config.ts"],
       "@payloadcms/admin-bar": ["./packages/admin-bar/src"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
@@ -70,6 +70,12 @@
         "./packages/plugin-multi-tenant/src/exports/client.ts"
       ],
       "@payloadcms/plugin-multi-tenant": ["./packages/plugin-multi-tenant/src/index.ts"],
+      "@payloadcms/plugin-multi-tenant/translations/languages/all": [
+        "./packages/plugin-multi-tenant/src/translations/index.ts"
+      ],
+      "@payloadcms/plugin-multi-tenant/translations/languages/*": [
+        "./packages/plugin-multi-tenant/src/translations/languages/*.ts"
+      ],
       "@payloadcms/next": ["./packages/next/src/exports/*"],
       "@payloadcms/storage-s3/client": ["./packages/storage-s3/src/exports/client.ts"],
       "@payloadcms/storage-vercel-blob/client": [

From dfcabc95d1a7c940ef88c6a940c438bf846fcb82 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Tue, 13 May 2025 14:53:45 -0400
Subject: [PATCH 12/14] chore: adjust sv translation

---
 packages/plugin-multi-tenant/src/translations/languages/sv.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-multi-tenant/src/translations/languages/sv.ts b/packages/plugin-multi-tenant/src/translations/languages/sv.ts
index 57659262653..fcf4972ff5c 100644
--- a/packages/plugin-multi-tenant/src/translations/languages/sv.ts
+++ b/packages/plugin-multi-tenant/src/translations/languages/sv.ts
@@ -3,7 +3,7 @@ import type { PluginDefaultTranslationsObject, PluginLanguage } from '../types.j
 export const svTranslations: PluginDefaultTranslationsObject = {
   'plugin-multi-tenant': {
     'confirm-tenant-switch--body':
-      'Du är på väg att ändra ägande från <0>{{fromTenant}}</0> till <0>{{toTenant}}</0>',
+      'Du är på väg att ändra ägare från <0>{{fromTenant}}</0> till <0>{{toTenant}}</0>',
     'confirm-tenant-switch--heading': 'Bekräfta ändring av {{tenantLabel}}',
   },
 }

From ee49b60dcdc2c1af360449ab94dcca1254e79e66 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Tue, 13 May 2025 15:06:16 -0400
Subject: [PATCH 13/14] chore: prevent generateTranslation files from being
 built

---
 tools/scripts/package.json        |  2 +-
 tools/scripts/tsconfig.build.json | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 tools/scripts/tsconfig.build.json

diff --git a/tools/scripts/package.json b/tools/scripts/package.json
index a7ca29cf6e5..2f949551b59 100644
--- a/tools/scripts/package.json
+++ b/tools/scripts/package.json
@@ -13,7 +13,7 @@
   },
   "main": "src/index.ts",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc --project tsconfig.build.json",
     "build-template-with-local-pkgs": "pnpm runts src/build-template-with-local-pkgs.ts",
     "gen-templates": "pnpm runts src/generate-template-variations.ts",
     "generateTranslations:core": "node --no-deprecation --import @swc-node/register/esm-register src/generateTranslations/core.ts",
diff --git a/tools/scripts/tsconfig.build.json b/tools/scripts/tsconfig.build.json
new file mode 100644
index 00000000000..bc25916d0a2
--- /dev/null
+++ b/tools/scripts/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "references": [
+    { "path": "../../packages/translations" },
+    { "path": "../../packages/richtext-lexical" },
+    { "path": "../../packages/plugin-multi-tenant" }
+  ],
+  "exclude": ["./src/generateTranslations"]
+}

From a744d774c4a356633de7f78a63d75185d08058b1 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Tue, 13 May 2025 17:05:55 -0400
Subject: [PATCH 14/14] fixes initial selector not showing

---
 packages/plugin-multi-tenant/src/index.ts          | 14 +++++++++++++-
 .../TenantSelectionProvider/index.client.tsx       |  3 ++-
 tools/scripts/src/generateTranslations/core.ts     |  1 -
 tools/scripts/src/index.ts                         |  0
 tsconfig.base.json                                 |  2 +-
 5 files changed, 16 insertions(+), 4 deletions(-)
 delete mode 100644 tools/scripts/src/index.ts

diff --git a/packages/plugin-multi-tenant/src/index.ts b/packages/plugin-multi-tenant/src/index.ts
index cb243778754..4b47f245943 100644
--- a/packages/plugin-multi-tenant/src/index.ts
+++ b/packages/plugin-multi-tenant/src/index.ts
@@ -3,6 +3,7 @@ import type { CollectionConfig, Config } from 'payload'
 
 import { deepMergeSimple } from 'payload'
 
+import type { PluginDefaultTranslationsObject } from './translations/types.js'
 import type { MultiTenantPluginConfig } from './types.js'
 
 import { defaults } from './defaults.js'
@@ -362,9 +363,20 @@ export const multiTenantPlugin =
      * Merge plugin translations
      */
 
+    const simplifiedTranslations = Object.entries(translations).reduce(
+      (acc, [key, value]) => {
+        acc[key] = value.translations
+        return acc
+      },
+      {} as Record<string, PluginDefaultTranslationsObject>,
+    )
+
     incomingConfig.i18n = {
       ...incomingConfig.i18n,
-      translations: deepMergeSimple(translations, incomingConfig.i18n?.translations ?? {}),
+      translations: deepMergeSimple(
+        simplifiedTranslations,
+        incomingConfig.i18n?.translations ?? {},
+      ),
     }
 
     return incomingConfig
diff --git a/packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx b/packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx
index 5a00ed80a36..be7828e36b1 100644
--- a/packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx
+++ b/packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx
@@ -129,13 +129,14 @@ export const TenantSelectionProviderClient = ({
     if (userID && !tenantCookie) {
       // User is logged in, but does not have a tenant cookie, set it
       setSelectedTenantID(initialValue)
+      setTenantOptions(tenantOptionsFromProps)
       if (initialValue) {
         setCookie(String(initialValue))
       } else {
         deleteCookie()
       }
     }
-  }, [userID, tenantCookie, initialValue, setCookie, deleteCookie, router])
+  }, [userID, tenantCookie, initialValue, setCookie, deleteCookie, router, tenantOptionsFromProps])
 
   React.useEffect(() => {
     if (!userID && tenantCookie) {
diff --git a/tools/scripts/src/generateTranslations/core.ts b/tools/scripts/src/generateTranslations/core.ts
index 1c58513a97e..b4c31cc1086 100644
--- a/tools/scripts/src/generateTranslations/core.ts
+++ b/tools/scripts/src/generateTranslations/core.ts
@@ -27,6 +27,5 @@ for (const key of Object.keys(translations) as AcceptedLanguages[]) {
 void translateObject({
   allTranslationsObject: allTranslations,
   fromTranslationsObject: enTranslations,
-  //languages: ['de'],
   targetFolder: path.resolve(dirname, '../../../../packages/translations/src/languages'),
 })
diff --git a/tools/scripts/src/index.ts b/tools/scripts/src/index.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 12877b1be6f..b2e5e043e1a 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/_community/config.ts"],
+      "@payload-config": ["./test/plugin-multi-tenant/config.ts"],
       "@payloadcms/admin-bar": ["./packages/admin-bar/src"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],