chore(next): moves edit and list views (#5170)

app/(payload)/admin/(dashboard)/collections/[collection]/[...segments]/layout.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { DocumentLayout } from '@payloadcms/next/layouts/Document'
 import configPromise from 'payload-config'
 

app/(payload)/admin/(dashboard)/globals/[global]/layout.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { DocumentLayout } from '@payloadcms/next/layouts/Document'
 import configPromise from 'payload-config'
 

app/(payload)/admin/(dashboard)/layout.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { AdminLayout } from '@payloadcms/next/layouts/Admin'
 import configPromise from 'payload-config'
 

app/(payload)/admin/create-first-user/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import {
   CreateFirstUser,
   generateMetadata as generateMeta,

app/(payload)/admin/forgot/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import {
   ForgotPassword,
   generateMetadata as generateMeta,

app/(payload)/admin/login/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Login, generateMetadata as generateMeta } from '@payloadcms/next/pages/Login'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/admin/logout-inactivity/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Logout, generateMetadata as generateMeta } from '@payloadcms/next/pages/Logout'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/admin/logout/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Logout, generateMetadata as generateMeta } from '@payloadcms/next/pages/Logout'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/admin/reset/[token]/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import {
   ResetPassword,
   generateMetadata as generateMeta,

app/(payload)/admin/unauthorized/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Unauthorized, generateMetadata as generateMeta } from '@payloadcms/next/pages/Unauthorized'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/admin/verify/[token]/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Verify, generateMetadata as generateMeta } from '@payloadcms/next/pages/Verify'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/layout.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { RootLayout } from '@payloadcms/next/layouts/Root'
 import configPromise from 'payload-config'
 

packages/next/src/layouts/Root/index.tsx

@@ -7,6 +7,9 @@ import { cookies, headers } from 'next/headers'
 import { deepMerge } from 'payload/utilities'
 import React from 'react'
 
+import { DefaultEditView } from '../../pages/Edit/Default'
+import { DefaultListView } from '../../pages/List/Default'
+import { DefaultCell } from '../../pages/List/Default/Cell'
 import { createClientConfig } from '../../utilities/createClientConfig'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage'
 
@@ -42,7 +45,12 @@ export const RootLayout = async ({
     value: language,
   }))
 
-  const componentMap = buildComponentMap({ config })
+  const componentMap = buildComponentMap({
+    DefaultCell,
+    DefaultEditView,
+    DefaultListView,
+    config,
+  })
 
   return (
     <html dir={dir} lang={lang}>

packages/next/src/pages/API/index.client.tsx

@@ -9,7 +9,6 @@ import {
   MinimizeMaximize,
   Number as NumberInput,
   Select,
-  SetDocumentStepNav as SetStepNav,
   useActions,
   useConfig,
   useDocumentInfo,
@@ -21,6 +20,7 @@ import qs from 'qs'
 import * as React from 'react'
 import { toast } from 'react-toastify'
 
+import { SetStepNav } from '../Edit/Default/SetStepNav'
 import { RenderJSON } from './RenderJSON'
 import './index.scss'
 

packages/next/src/pages/API/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import type { ServerSideEditViewProps } from '../../../../ui/src/views/types'
+import type { ServerSideEditViewProps } from '../Edit/types'
 
-import { sanitizedEditViewProps } from '../Edit/sanitizedEditViewProps'
+import { sanitizeEditViewProps } from '../Edit/sanitizeEditViewProps'
 import { APIViewClient } from './index.client'
 
 export const APIView: React.FC<ServerSideEditViewProps> = async (props) => {
-  const clientSideProps = sanitizedEditViewProps(props)
+  const clientSideProps = sanitizeEditViewProps(props)
   return <APIViewClient {...clientSideProps} />
 }

packages/next/src/pages/Document/index.tsx

@@ -21,7 +21,7 @@ import { notFound } from 'next/navigation'
 import queryString from 'qs'
 import React, { Fragment } from 'react'
 
-import type { ServerSideEditViewProps } from '../../../../ui/src/views/types'
+import type { ServerSideEditViewProps } from '../Edit/types'
 
 import { initPage } from '../../utilities/initPage'
 import { getViewsFromConfig } from './getViewsFromConfig'

packages/next/src/pages/Edit/Default/Auth/APIKey.tsx

@@ -1,16 +1,17 @@
 'use client'
+import {
+  CopyToClipboard,
+  GenerateConfirmation,
+  Label,
+  fieldBaseClass,
+  useField,
+  useFormFields,
+  useTranslation,
+} from '@payloadcms/ui'
 import { text } from 'payload/fields/validations'
 import React, { useEffect, useMemo, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
-import CopyToClipboard from '../../../elements/CopyToClipboard'
-import GenerateConfirmation from '../../../elements/GenerateConfirmation'
-import { useFormFields } from '../../../forms/Form/context'
-import Label from '../../../forms/Label'
-import { fieldBaseClass } from '../../../forms/fields/shared'
-import useField from '../../../forms/useField'
-import { useTranslation } from '../../../providers/Translation'
-
 const path = 'apiKey'
 const baseClass = 'api-key'
 

packages/next/src/pages/Edit/Default/Auth/index.scss

@@ -1,7 +1,7 @@
-@import '../../../scss/styles.scss';
+@import '../../../../../../ui/src/scss/styles.scss';
 
 .auth-fields {
-  padding: base(2);
+  padding: calc(var(--base) * 2);
   background: var(--theme-elevation-50);
   display: flex;
   flex-direction: column;
@@ -39,7 +39,7 @@
 }
 
 .field-type.api-key {
-  margin-bottom: $baseline;
+  margin-bottom: var(--base);
 
   input {
     @include formInput;

packages/next/src/pages/Edit/Default/Auth/index.tsx

@@ -1,17 +1,20 @@
 'use client'
+import {
+  Button,
+  Checkbox,
+  ConfirmPassword,
+  Email,
+  Password,
+  useConfig,
+  useFormFields,
+  useFormModified,
+  useTranslation,
+} from '@payloadcms/ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 
 import type { Props } from './types'
 
-import { Button } from '../../../elements/Button'
-import { useFormFields, useFormModified } from '../../../forms/Form/context'
-import Checkbox from '../../../forms/fields/Checkbox'
-import ConfirmPassword from '../../../forms/fields/ConfirmPassword'
-import { Email } from '../../../forms/fields/Email'
-import { Password } from '../../../forms/fields/Password'
-import { useConfig } from '../../../providers/Config'
-import { useTranslation } from '../../../providers/Translation'
 import APIKey from './APIKey'
 import './index.scss'
 

packages/next/src/pages/Edit/Default/SetDocumentTitle/index.tsx

@@ -2,13 +2,9 @@
 import type { ClientConfig } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { formatDate, useDocumentInfo, useFormFields, useTranslation } from '@payloadcms/ui'
 import { useEffect } from 'react'
 
-import { formatDate } from '../../..'
-import { useFormFields } from '../../../forms/Form/context'
-import { useDocumentInfo } from '../../../providers/DocumentInfo'
-import { useTranslation } from '../../../providers/Translation'
-
 export const SetDocumentTitle: React.FC<{
   collectionConfig?: ClientConfig['collections'][0]
   config?: ClientConfig

packages/next/src/pages/Edit/Default/SetStepNav/index.tsx

@@ -1,17 +1,17 @@
 'use client'
+import type { StepNavItem } from '@payloadcms/ui'
 import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import {
+  useConfig,
+  useDocumentInfo,
+  useEditDepth,
+  useStepNav,
+  useTranslation,
+} from '@payloadcms/ui'
 import { useEffect } from 'react'
 
-import type { StepNavItem } from '../../../elements/StepNav/types'
-
-import { useStepNav } from '../../../elements/StepNav'
-import { useConfig } from '../../../providers/Config'
-import { useDocumentInfo } from '../../../providers/DocumentInfo'
-import { useEditDepth } from '../../../providers/EditDepth'
-import { useTranslation } from '../../../providers/Translation'
-
 export const SetStepNav: React.FC<{
   collectionSlug?: SanitizedCollectionConfig['slug']
   globalLabel?: SanitizedGlobalConfig['label']

packages/next/src/pages/Edit/Default/index.scss

@@ -1,4 +1,4 @@
-@import '../../scss/styles.scss';
+@import '../../../../../ui/src/scss/styles.scss';
 
 .collection-edit {
   width: 100%;

packages/next/src/pages/Edit/Default/index.tsx

@@ -1,24 +1,26 @@
 'use client'
+import type { FormProps } from '@payloadcms/ui'
+
+import {
+  DocumentControls,
+  DocumentFields,
+  FieldPathProvider,
+  Form,
+  FormLoadingOverlayToggle,
+  LeaveWithoutSaving,
+  OperationProvider,
+  getFormState,
+  useComponentMap,
+  useConfig,
+  useDocumentInfo,
+} from '@payloadcms/ui'
 import React, { Fragment, useCallback } from 'react'
 
-import type { Props as FormProps } from '../../forms/Form/types'
-
+import { Upload } from '../../../../../ui/src/elements/Upload'
 // import { getTranslation } from '@payloadcms/translations'
-import { DocumentControls } from '../../elements/DocumentControls'
-import { DocumentFields } from '../../elements/DocumentFields'
-import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving'
-import { FormLoadingOverlayToggle } from '../../elements/Loading'
-import { FieldPathProvider } from '../../forms/FieldPathProvider'
-import Form from '../../forms/Form'
-import { useComponentMap } from '../../providers/ComponentMapProvider'
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { OperationProvider } from '../../providers/OperationProvider'
-import { getFormState } from '../../utilities/getFormState'
 import Auth from './Auth'
 import { SetDocumentTitle } from './SetDocumentTitle'
 import { SetStepNav } from './SetStepNav'
-import { Upload } from './Upload'
 import './index.scss'
 
 const baseClass = 'collection-edit'

packages/next/src/pages/Edit/index.client.tsx

@@ -1,10 +1,8 @@
 'use client'
-import { useComponentMap, useDocumentInfo } from '@payloadcms/ui'
+import { LoadingOverlay, useComponentMap, useDocumentInfo } from '@payloadcms/ui'
 import React, { Fragment } from 'react'
 import { useCallback } from 'react'
 
-import { LoadingOverlay } from '../../../../ui/src/elements/Loading'
-
 export const DefaultEditViewClient: React.FC = () => {
   const { id, collectionSlug, getDocPermissions, getVersions, globalSlug } = useDocumentInfo()
 

packages/next/src/pages/Edit/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { ServerSideEditViewProps } from '../../../../ui/src/views/types'
+import type { ServerSideEditViewProps } from './types'
 
 import { DefaultEditViewClient } from './index.client'
 

packages/next/src/pages/Edit/sanitizeEditViewProps.ts

@@ -1,7 +1,8 @@
-import type { ServerSideEditViewProps } from '@payloadcms/ui'
 import type { EditViewProps } from 'payload/config'
 
-export const sanitizedEditViewProps = (props: ServerSideEditViewProps) => {
+import type { ServerSideEditViewProps } from './types'
+
+export const sanitizeEditViewProps = (props: ServerSideEditViewProps) => {
   const clientSideProps = { ...props }
   delete clientSideProps.payload
   delete clientSideProps.config

packages/next/src/pages/Edit/types.ts

@@ -1,4 +1,5 @@
 import type { I18n } from '@payloadcms/translations'
+import type { FormState } from '@payloadcms/ui'
 import type { Permissions, User } from 'payload/auth'
 import type { EditViewProps } from 'payload/config'
 import type {
@@ -9,8 +10,6 @@ import type {
   SanitizedConfig,
 } from 'payload/types'
 
-import type { FormState } from '../forms/Form/types'
-
 export type ServerSideEditViewProps = EditViewProps & {
   action?: string
   apiURL: string

packages/next/src/pages/List/Default/Cell/cellTypes.spec.tsx

@@ -3,11 +3,11 @@ import React from 'react'
 
 import type { BlockField, DateField, SelectField } from 'payload/types'
 
-import BlocksCell from './fields/Blocks'
-import Checkbox from './fields/Checkbox'
-import DateCell from './fields/Date'
-import Select from './fields/Select'
-import Textarea from './fields/Textarea'
+import { BlocksCell } from './fields/Blocks'
+import { Checkbox } from './fields/Checkbox'
+import { DateCell } from './fields/Date'
+import { Select } from './fields/Select'
+import { Textarea } from './fields/Textarea'
 
 jest.mock('../../../../utilities/Config', () => ({
   useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }),

packages/next/src/pages/List/Default/Cell/fields/Array/index.tsx

@@ -2,10 +2,9 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
-import { useTranslation } from '../../../../../providers/Translation'
-
 export interface ArrayCellProps extends CellComponentProps<Record<string, unknown>[]> {
   labels: CellProps['labels']
 }

packages/next/src/pages/List/Default/Cell/fields/Blocks/index.tsx

@@ -2,10 +2,9 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
-import { useTranslation } from '../../../../../providers/Translation'
-
 export interface BlocksCellProps extends CellComponentProps<any> {
   blocks: CellProps['blocks']
   labels: CellProps['labels']

packages/next/src/pages/List/Default/Cell/fields/Checkbox/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../scss/styles.scss';
+@import '../../../../../../../../ui/src/scss/styles.scss';
 
 .bool-cell {
   font-size: 1rem;

packages/next/src/pages/List/Default/Cell/fields/Code/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../scss/styles.scss';
+@import '../../../../../../../../ui/src/scss/styles.scss';
 
 .code-cell {
   font-size: 1rem;

packages/next/src/pages/List/Default/Cell/fields/Date/index.tsx

@@ -1,12 +1,9 @@
 'use client'
 import type { CellComponentProps, CellProps } from 'payload/types'
 
+import { formatDate, useConfig, useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
-import { useConfig } from '../../../../../providers/Config'
-import { useTranslation } from '../../../../../providers/Translation'
-import { formatDate } from '../../../../../utilities/formatDate'
-
 export interface DateCellProps extends CellComponentProps<string> {
   dateDisplayFormat?: CellProps['dateDisplayFormat']
 }

packages/next/src/pages/List/Default/Cell/fields/File/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../scss/styles.scss';
+@import '../../../../../../../../ui/src/scss/styles.scss';
 
 .file {
   display: flex;

packages/next/src/pages/List/Default/Cell/fields/File/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { CellComponentProps } from 'payload/types'
 
+import { Thumbnail } from '@payloadcms/ui'
 import React from 'react'
 
-import Thumbnail from '../../../../../elements/Thumbnail'
 import './index.scss'
 
 const baseClass = 'file'

packages/next/src/pages/List/Default/Cell/fields/JSON/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../scss/styles.scss';
+@import '../../../../../../../../ui/src/scss/styles.scss';
 
 .json-cell {
   font-size: 1rem;

packages/next/src/pages/List/Default/Cell/fields/Relationship/index.tsx

@@ -2,12 +2,9 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { formatDocTitle, useConfig, useIntersect, useTranslation } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
-import { useIntersect } from '../../../../../hooks/useIntersect'
-import { useConfig } from '../../../../../providers/Config'
-import { useTranslation } from '../../../../../providers/Translation'
-import { formatDocTitle } from '../../../../../utilities/formatDocTitle'
 import { useListRelationships } from '../../../RelationshipProvider'
 import './index.scss'
 

packages/next/src/pages/List/Default/Cell/fields/Select/index.tsx

@@ -2,11 +2,10 @@
 import type { CellComponentProps, CellProps, OptionObject } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useTranslation } from '@payloadcms/ui'
 import { optionsAreObjects } from 'payload/types'
 import React from 'react'
 
-import { useTranslation } from '../../../../../providers/Translation'
-
 export interface SelectCellProps extends CellComponentProps<any> {
   options: CellProps['options']
 }

packages/next/src/pages/List/Default/Cell/index.tsx

@@ -5,10 +5,8 @@ import React from 'react' // TODO: abstract this out to support all routers
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useConfig, useTableCell, useTranslation } from '@payloadcms/ui'
 
-import { useTableCell } from '../../../elements/Table/TableCellProvider'
-import { useConfig } from '../../../providers/Config'
-import { useTranslation } from '../../../providers/Translation'
 import cellComponents from './fields'
 import { CodeCell } from './fields/Code'
 

packages/next/src/pages/List/Default/RelationshipProvider/index.tsx

@@ -1,13 +1,10 @@
 'use client'
 import type { TypeWithID } from 'payload/types'
 
+import { useConfig, useDebounce, useLocale, useTranslation } from '@payloadcms/ui'
 import querystring from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
 
-import useDebounce from '../../../hooks/useDebounce'
-import { useConfig } from '../../../providers/Config'
-import { useLocale } from '../../../providers/Locale'
-import { useTranslation } from '../../../providers/Translation'
 import { reducer } from './reducer'
 
 // documents are first set to null when requested

packages/next/src/pages/List/Default/SelectAll/index.scss

@@ -1,5 +1,3 @@
-@import '../../../scss/styles.scss';
-
 .select-all {
   &__checkbox {
     display: block;

packages/next/src/pages/List/Default/SelectAll/index.tsx

@@ -1,9 +1,7 @@
 'use client'
+import { CheckboxInput, SelectAllStatus, useSelection, useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
-import { useTranslation } from '../../../exports'
-import CheckboxInput from '../../../forms/fields/Checkbox'
-import { SelectAllStatus, useSelection } from '../SelectionProvider'
 import './index.scss'
 
 const baseClass = 'select-all'

packages/next/src/pages/List/Default/SelectRow/index.scss

@@ -1,5 +1,3 @@
-@import '../../../scss/styles.scss';
-
 .select-row {
   &__checkbox {
     display: block;

packages/next/src/pages/List/Default/SelectRow/index.tsx

@@ -1,8 +1,7 @@
 'use client'
+import { CheckboxInput, useSelection } from '@payloadcms/ui'
 import React from 'react'
 
-import CheckboxInput from '../../../forms/fields/Checkbox'
-import { useSelection } from '../SelectionProvider'
 import './index.scss'
 
 const baseClass = 'select-row'

packages/next/src/pages/List/Default/index.scss

@@ -1,4 +1,4 @@
-@import '../../scss/styles';
+@import '../../../../../ui/src/scss/styles.scss';
 
 .collection-list {
   width: 100%;

packages/next/src/pages/List/Default/index.tsx

@@ -1,27 +1,29 @@
 'use client'
 import { getTranslation } from '@payloadcms/translations'
+import {
+  Button,
+  Gutter,
+  ListControls,
+  Pagination,
+  PerPage,
+  Pill,
+  SelectionProvider,
+  StaggeredShimmers,
+  Table,
+  useComponentMap,
+  useConfig,
+  useListInfo,
+  useStepNav,
+  useTranslation,
+} from '@payloadcms/ui'
 import React, { Fragment, useEffect } from 'react'
 
-import { Button } from '../../elements/Button'
-import { Gutter } from '../../elements/Gutter'
-import { ListControls } from '../../elements/ListControls'
-import { Pagination } from '../../elements/Pagination'
-import { PerPage } from '../../elements/PerPage'
-import Pill from '../../elements/Pill'
-import { StaggeredShimmers } from '../../elements/ShimmerEffect'
-import { useStepNav } from '../../elements/StepNav'
-import { Table } from '../../elements/Table'
-import { useComponentMap } from '../../providers/ComponentMapProvider'
-import { useConfig } from '../../providers/Config'
-import { useListInfo } from '../../providers/ListInfo'
-import { useTranslation } from '../../providers/Translation'
 import { RelationshipProvider } from './RelationshipProvider'
-import { SelectionProvider } from './SelectionProvider'
 import './index.scss'
 
 const baseClass = 'collection-list'
 
-export const DefaultList: React.FC = () => {
+export const DefaultListView: React.FC = () => {
   const {
     Header,
     data,

packages/next/src/pages/List/Default/types.ts

@@ -1,3 +1,4 @@
+import type { ColumnPreferences } from '@payloadcms/ui'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
 export type DefaultListViewProps = {
@@ -9,10 +10,7 @@ export type ListIndexProps = {
 }
 
 export type ListPreferences = {
-  columns: {
-    accessor: string
-    active: boolean
-  }[]
+  columns: ColumnPreferences
   limit: number
   sort: number
 }

packages/next/src/pages/List/index.tsx

@@ -1,19 +1,18 @@
-import type { DefaultListViewProps } from '@payloadcms/ui'
 import type { SanitizedConfig } from 'payload/types'
 
 import {
-  DefaultList,
   HydrateClientUser,
+  ListInfoProvider,
   RenderCustomComponent,
   TableColumnsProvider,
 } from '@payloadcms/ui'
 import { notFound } from 'next/navigation'
 import React, { Fragment } from 'react'
 
-import type { ListPreferences } from '../../../../ui/src/views/List/types'
+import type { DefaultListViewProps, ListPreferences } from './Default/types'
 
-import { ListInfoProvider } from '../../../../ui/src/providers/ListInfo'
 import { initPage } from '../../utilities/initPage'
+import { DefaultListView } from './Default'
 
 export const ListView = async ({
   collectionSlug,
@@ -60,12 +59,12 @@ export const ListView = async ({
       admin: { components: { views: { List: CustomList } = {} } = {} },
     } = collectionConfig
 
-    let ListToRender = null
+    let CustomListView = null
 
     if (CustomList && typeof CustomList === 'function') {
-      ListToRender = CustomList
+      CustomListView = CustomList
     } else if (typeof CustomList === 'object' && typeof CustomList.Component === 'function') {
-      ListToRender = CustomList.Component
+      CustomListView = CustomList.Component
     }
 
     const limit = Number(searchParams?.limit) || collectionConfig.admin.pagination.defaultLimit
@@ -93,8 +92,8 @@ export const ListView = async ({
         >
           <TableColumnsProvider collectionSlug={collectionSlug} listPreferences={listPreferences}>
             <RenderCustomComponent
-              CustomComponent={ListToRender}
-              DefaultComponent={DefaultList}
+              CustomComponent={CustomListView}
+              DefaultComponent={DefaultListView}
               componentProps={componentProps}
             />
           </TableColumnsProvider>

packages/next/src/pages/Versions/index.tsx

@@ -1,10 +1,11 @@
-import type { ServerSideEditViewProps } from '@payloadcms/ui'
-
 import { getTranslation } from '@payloadcms/translations'
-import { Gutter, SetDocumentStepNav as SetStepNav } from '@payloadcms/ui'
+import { Gutter } from '@payloadcms/ui'
 import { notFound } from 'next/navigation'
 import React from 'react'
 
+import type { ServerSideEditViewProps } from '../Edit/types'
+
+import { SetStepNav } from '../Edit/Default/SetStepNav'
 import { buildVersionColumns } from './buildColumns'
 import { VersionsViewClient } from './index.client'
 import './index.scss'

packages/richtext-lexical/src/field/features/Upload/component/ExtraFieldsDrawer/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
 import { useModal } from '@faceless-ui/modal'

packages/ui/src/elements/DeleteMany/index.tsx

@@ -8,10 +8,10 @@ import type { Props } from './types'
 
 import { useAuth } from '../../providers/Auth'
 import { useConfig } from '../../providers/Config'
+import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
 import { useTranslation } from '../../providers/Translation'
 // import { requests } from '../../../api'
 import { MinimalTemplate } from '../../templates/Minimal'
-import { SelectAllStatus, useSelection } from '../../views/List/SelectionProvider'
 import { Button } from '../Button'
 import Pill from '../Pill'
 import './index.scss'
@@ -70,20 +70,7 @@ const DeleteMany: React.FC<Props> = (props) => {
     //       return addDefaultError()
     //     }
     //   })
-  }, [
-    addDefaultError,
-    api,
-    getQueryParams,
-    i18n.language,
-    modalSlug,
-    resetParams,
-    selectAll,
-    serverURL,
-    slug,
-    t,
-    toggleAll,
-    toggleModal,
-  ])
+  }, [])
 
   if (selectAll === SelectAllStatus.None || !hasDeletePermission) {
     return null

packages/ui/src/elements/DeleteMany/types.ts

@@ -1,9 +1,7 @@
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import type { DefaultListViewProps } from '../../views/List/types'
-
 export type Props = {
   collection: SanitizedCollectionConfig
-  resetParams: DefaultListViewProps['resetParams']
+  resetParams: () => void
   title?: string
 }

packages/ui/src/elements/EditMany/index.tsx

@@ -9,13 +9,12 @@ import Form from '../../forms/Form'
 import { useForm } from '../../forms/Form/context'
 import RenderFields from '../../forms/RenderFields'
 import FormSubmit from '../../forms/Submit'
-import { fieldTypes } from '../../forms/fields'
 import { X } from '../../icons/X'
 import { useAuth } from '../../providers/Auth'
 import { useConfig } from '../../providers/Config'
 import { OperationContext } from '../../providers/OperationProvider'
+import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
 import { useTranslation } from '../../providers/Translation'
-import { SelectAllStatus, useSelection } from '../../views/List/SelectionProvider'
 import { Drawer, DrawerToggler } from '../Drawer'
 import { FieldSelect } from '../FieldSelect'
 import './index.scss'

packages/ui/src/elements/EditMany/types.ts

@@ -1,8 +1,6 @@
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import type { DefaultListViewProps } from '../../views/List/types'
-
 export type Props = {
   collection: SanitizedCollectionConfig
-  resetParams: DefaultListViewProps['resetParams']
+  resetParams: () => void
 }

packages/ui/src/elements/EditUpload/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { Data } from 'payload/types'
 
 import { useModal } from '@faceless-ui/modal'
@@ -5,10 +6,10 @@ import React, { useRef, useState } from 'react'
 import ReactCrop, { type Crop as CropType } from 'react-image-crop'
 import 'react-image-crop/dist/ReactCrop.css'
 
+import { editDrawerSlug } from '../../elements/Upload'
 import { Plus } from '../../icons/Plus'
 import { useFormQueryParams } from '../../providers/FormQueryParams'
 import { useTranslation } from '../../providers/Translation'
-import { editDrawerSlug } from '../../views/Edit/Upload'
 import { Button } from '../Button'
 import './index.scss'
 

packages/ui/src/elements/FileDetails/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import type { Props } from './types'
 
-import { UploadActions } from '../../views/Edit/Upload'
+import { UploadActions } from '../../elements/Upload'
 import { Button } from '../Button'
 import Thumbnail from '../Thumbnail'
 import Meta from './Meta'

packages/ui/src/elements/GenerateConfirmation/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Modal, useModal } from '@faceless-ui/modal'
 import React from 'react'
 import { toast } from 'react-toastify'

packages/ui/src/elements/ListControls/types.ts

@@ -1,6 +1,5 @@
 import type { FieldAffectingData, SanitizedCollectionConfig, Where } from 'payload/types'
 
-import type { DefaultListViewProps } from '../../views/List/types'
 import type { Column } from '../Table/types'
 
 export type Props = {
@@ -12,7 +11,7 @@ export type Props = {
   handleSortChange?: (sort: string) => void
   handleWhereChange?: (where: Where) => void
   modifySearchQuery?: boolean
-  resetParams?: DefaultListViewProps['resetParams']
+  resetParams?: () => void
   textFieldsToBeSearched?: FieldAffectingData[]
   titleField: FieldAffectingData
 }

packages/ui/src/elements/ListDrawer/DrawerContent.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { SanitizedCollectionConfig } from 'payload/types'
 import type { Where } from 'payload/types'
 

packages/ui/src/elements/ListSelection/index.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react'
 
+import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
 import { useTranslation } from '../../providers/Translation'
-import { SelectAllStatus, useSelection } from '../../views/List/SelectionProvider'
 import './index.scss'
 
 const baseClass = 'list-selection'

packages/ui/src/elements/PublishMany/index.tsx

@@ -8,10 +8,10 @@ import type { Props } from './types'
 
 import { useAuth } from '../../providers/Auth'
 import { useConfig } from '../../providers/Config'
+import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
 import { useTranslation } from '../../providers/Translation'
 // import { requests } from '../../../api'
 import { MinimalTemplate } from '../../templates/Minimal'
-import { SelectAllStatus, useSelection } from '../../views/List/SelectionProvider'
 import { Button } from '../Button'
 import Pill from '../Pill'
 import './index.scss'

packages/ui/src/elements/PublishMany/types.ts

@@ -1,8 +1,6 @@
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import type { DefaultListViewProps } from '../../views/List/types'
-
 export type Props = {
   collection: SanitizedCollectionConfig
-  resetParams: DefaultListViewProps['resetParams']
+  resetParams: () => void
 }

packages/ui/src/elements/RenderCustomComponent/index.tsx

@@ -11,5 +11,9 @@ export const RenderCustomComponent: React.FC<{
     return <CustomComponent {...componentProps} />
   }
 
+  if (DefaultComponent) {
     return <DefaultComponent {...componentProps} />
   }
+
+  return null
+}

packages/ui/src/elements/StayLoggedIn/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Modal, useModal } from '@faceless-ui/modal'
 import React from 'react'
 import { useHistory } from 'react-router-dom'

packages/ui/src/elements/TableColumns/buildColumns.ts

@@ -1,12 +1,12 @@
 import type { CellProps, SanitizedCollectionConfig } from 'payload/types'
 
 import type { Column } from '../../elements/Table/types'
+import type { ColumnPreferences } from '../../providers/ListInfo/types'
 import type { FieldMap } from '../../utilities/buildComponentMap/types'
-import type { ListPreferences } from '../../views/List/types'
 
 export const buildColumns = (args: {
   cellProps: Partial<CellProps>[]
-  columnPreferences: ListPreferences['columns']
+  columnPreferences: ColumnPreferences
   defaultColumns?: string[]
   fieldMap: FieldMap
   useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']

packages/ui/src/elements/TableColumns/index.tsx

@@ -1,10 +1,10 @@
 'use client'
-import type { Field, SanitizedCollectionConfig } from 'payload/types'
+import type { SanitizedCollectionConfig } from 'payload/types'
 import type { CellProps } from 'payload/types'
 
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
 
-import type { ListPreferences } from '../../views/List/types'
+import type { ColumnPreferences } from '../../providers/ListInfo/types'
 import type { Column } from '../Table/types'
 import type { Action } from './columnReducer'
 
@@ -30,7 +30,9 @@ export const TableColumnsProvider: React.FC<{
   cellProps?: Partial<CellProps>[]
   children: React.ReactNode
   collectionSlug: string
-  listPreferences: ListPreferences
+  listPreferences: {
+    columns: ColumnPreferences
+  }
 }> = ({ cellProps, children, collectionSlug, listPreferences }) => {
   const config = useConfig()
 
@@ -70,7 +72,9 @@ export const TableColumnsProvider: React.FC<{
       const collectionHasChanged = prevCollection.current !== collectionSlug
 
       if (collectionHasChanged) {
-        const currentPreferences = await getPreference<ListPreferences>(preferenceKey)
+        const currentPreferences = await getPreference<{
+          columns: ColumnPreferences
+        }>(preferenceKey)
         prevCollection.current = collectionSlug
 
         if (currentPreferences.columns) {

packages/ui/src/elements/UnpublishMany/index.tsx

@@ -8,10 +8,10 @@ import type { Props } from './types'
 
 import { useAuth } from '../../providers/Auth'
 import { useConfig } from '../../providers/Config'
+import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
 import { useTranslation } from '../../providers/Translation'
 // import { requests } from '../../../api'
 import { MinimalTemplate } from '../../templates/Minimal'
-import { SelectAllStatus, useSelection } from '../../views/List/SelectionProvider'
 import { Button } from '../Button'
 import Pill from '../Pill'
 import './index.scss'

packages/ui/src/elements/UnpublishMany/types.ts

@@ -1,8 +1,6 @@
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import type { DefaultListViewProps } from '../../views/List/types'
-
 export type Props = {
   collection: SanitizedCollectionConfig
-  resetParams: DefaultListViewProps['resetParams']
+  resetParams: () => void
 }

packages/ui/src/elements/Upload/index.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/styles.scss';
+@import '../../scss/styles.scss';
 
 .file-field {
   position: relative;

packages/ui/src/elements/Upload/index.tsx

@@ -4,20 +4,20 @@ import React, { useCallback, useEffect, useState } from 'react'
 
 import type { Props } from './types'
 
-import { Button } from '../../../elements/Button'
-import { Drawer, DrawerToggler } from '../../../elements/Drawer'
-import { Dropzone } from '../../../elements/Dropzone'
-import { EditUpload } from '../../../elements/EditUpload'
-import FileDetails from '../../../elements/FileDetails'
-import PreviewSizes from '../../../elements/PreviewSizes'
-import Thumbnail from '../../../elements/Thumbnail'
-import Error from '../../../forms/Error'
-import { useFormSubmitted } from '../../../forms/Form/context'
-import reduceFieldsToValues from '../../../forms/Form/reduceFieldsToValues'
-import { fieldBaseClass } from '../../../forms/fields/shared'
-import useField from '../../../forms/useField'
-import { useDocumentInfo } from '../../../providers/DocumentInfo'
-import { useTranslation } from '../../../providers/Translation'
+import Error from '../../forms/Error'
+import { useFormSubmitted } from '../../forms/Form/context'
+import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues'
+import { fieldBaseClass } from '../../forms/fields/shared'
+import useField from '../../forms/useField'
+import { useDocumentInfo } from '../../providers/DocumentInfo'
+import { useTranslation } from '../../providers/Translation'
+import { Button } from '../Button'
+import { Drawer, DrawerToggler } from '../Drawer'
+import { Dropzone } from '../Dropzone'
+import { EditUpload } from '../EditUpload'
+import FileDetails from '../FileDetails'
+import PreviewSizes from '../PreviewSizes'
+import Thumbnail from '../Thumbnail'
 import './index.scss'
 
 const baseClass = 'file-field'

packages/ui/src/elements/Upload/types.ts

@@ -1,6 +1,6 @@
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import type { FormState } from '../../../forms/Form/types'
+import type { FormState } from '../../forms/Form/types'
 
 export type Props = {
   collectionSlug: string

packages/ui/src/exports/elements.ts

@@ -9,12 +9,15 @@ export { DocumentHeader } from '../elements/DocumentHeader'
 export { Drawer, DrawerToggler, formatDrawerSlug } from '../elements/Drawer'
 export { useDrawerSlug } from '../elements/Drawer/useDrawerSlug'
 export { ErrorPill } from '../elements/ErrorPill'
+export { default as GenerateConfirmation } from '../elements/GenerateConfirmation'
 export { Gutter } from '../elements/Gutter'
 export { HydrateClientUser } from '../elements/HydrateClientUser'
 export { LeaveWithoutSaving } from '../elements/LeaveWithoutSaving'
+export { ListControls } from '../elements/ListControls'
 export { useListDrawer } from '../elements/ListDrawer'
 export { LoadingOverlayToggle } from '../elements/Loading'
 export { FormLoadingOverlayToggle } from '../elements/Loading'
+export { LoadingOverlay } from '../elements/Loading'
 export { Pagination } from '../elements/Pagination'
 export { PerPage } from '../elements/PerPage'
 export { Pill } from '../elements/Pill'
@@ -23,6 +26,7 @@ export { default as ReactSelect } from '../elements/ReactSelect'
 export type { Option } from '../elements/ReactSelect/types'
 export { RenderCustomComponent } from '../elements/RenderCustomComponent'
 export { ShimmerEffect } from '../elements/ShimmerEffect'
+export { StaggeredShimmers } from '../elements/ShimmerEffect'
 export { SortColumn } from '../elements/SortColumn'
 export { useStepNav } from '../elements/StepNav'
 export { SetStepNav } from '../elements/StepNav/SetStepNav'
@@ -31,8 +35,8 @@ export { Table } from '../elements/Table'
 export { useTableCell } from '../elements/Table/TableCellProvider'
 export type { Column } from '../elements/Table/types'
 export { TableColumnsProvider } from '../elements/TableColumns'
+export { default as Thumbnail } from '../elements/Thumbnail'
 export { Tooltip } from '../elements/Tooltip'
 // export { useThumbnail } from '../elements/Upload'
 export { Translation } from '../elements/Translation'
 export { BlocksDrawer } from '../forms/fields/Blocks/BlocksDrawer'
-export { SetStepNav as SetDocumentStepNav } from '../views/Edit/SetStepNav'

packages/ui/src/exports/forms.ts

@@ -10,8 +10,10 @@ export {
   useFormSubmitted,
   useWatchForm,
 } from '../forms/Form/context'
+export { useFormModified } from '../forms/Form/context'
 export { createNestedFieldPath } from '../forms/Form/createNestedFieldPath'
 export { default as reduceFieldsToValues } from '../forms/Form/reduceFieldsToValues'
+export type { Props as FormProps } from '../forms/Form/types'
 export type { FormState } from '../forms/Form/types'
 export { default as Label } from '../forms/Label'
 export { default as RenderFields } from '../forms/RenderFields'

packages/ui/src/exports/hooks.ts

@@ -1,3 +1,4 @@
+export { default as useDebounce } from '../hooks/useDebounce'
 export { default as useHotkey } from '../hooks/useHotkey'
 export { useIntersect } from '../hooks/useIntersect'
 export { default as usePayloadAPI } from '../hooks/usePayloadAPI'

packages/ui/src/exports/index.ts

@@ -1,5 +1,4 @@
 export * from './elements'
-export * from './views'
 export * from './forms'
 export * from './hooks'
 export * from './providers'

packages/ui/src/exports/providers.ts

@@ -12,9 +12,13 @@ export { EditDepthContext, EditDepthProvider } from '../providers/EditDepth'
 export { useEditDepth } from '../providers/EditDepth'
 export { FormQueryParams, FormQueryParamsProvider } from '../providers/FormQueryParams'
 export type { QueryParamTypes } from '../providers/FormQueryParams'
+export { useListInfo } from '../providers/ListInfo'
+export { ListInfoProvider } from '../providers/ListInfo'
+export type { ColumnPreferences } from '../providers/ListInfo/types'
 export { useLocale } from '../providers/Locale'
 export { OperationProvider } from '../providers/OperationProvider'
 export { RootProvider } from '../providers/Root'
+export { SelectAllStatus, SelectionProvider, useSelection } from '../providers/SelectionProvider'
 export { useTheme } from '../providers/Theme'
 export type { Theme } from '../providers/Theme/types'
 export { useTranslation } from '../providers/Translation'

packages/ui/src/exports/utilities.ts

@@ -4,6 +4,7 @@ export { buildFieldSchemaMap } from '../utilities/buildFieldSchemaMap'
 export type { FieldSchemaMap } from '../utilities/buildFieldSchemaMap/types'
 export { findLocaleFromCode } from '../utilities/findLocaleFromCode'
 export { formatDate } from '../utilities/formatDate'
+export { formatDocTitle } from '../utilities/formatDocTitle'
 export { formatFields } from '../utilities/formatFields'
 export { getFormState } from '../utilities/getFormState'
 export type { EntityToGroup, Group } from '../utilities/groupNavItems'

packages/ui/src/exports/views.ts

@@ -1,5 +0,0 @@
-export { DefaultEditView } from '../views/Edit'
-export { default as Auth } from '../views/Edit/Auth'
-export { DefaultList } from '../views/List'
-export type { DefaultListViewProps } from '../views/List/types'
-export type { ServerSideEditViewProps } from '../views/types'

packages/ui/src/forms/Form/index.tsx

@@ -146,7 +146,7 @@ const Form: React.FC<Props> = (props) => {
     }
 
     return isValid
-  }, [id, user, operation, t, dispatchFields, config, beforeSubmit])
+  }, [id, user, operation, t, dispatchFields, config])
 
   const submit = useCallback(
     async (options: SubmitOptions = {}, e): Promise<void> => {
@@ -352,6 +352,8 @@ const Form: React.FC<Props> = (props) => {
       t,
       i18n,
       waitForAutocomplete,
+      beforeSubmit,
+      debouncedFormState,
     ],
   )
 
@@ -415,7 +417,7 @@ const Form: React.FC<Props> = (props) => {
       setModified(false)
       // dispatchFields({ state, type: 'REPLACE_STATE' })
     },
-    [id, user, operation, locale, t, dispatchFields, getDocPreferences, config],
+    [getDocPreferences],
   )
 
   const replaceState = useCallback(
@@ -508,9 +510,9 @@ const Form: React.FC<Props> = (props) => {
         }
       }
 
-      executeOnChange()
+      executeOnChange() // eslint-disable-line @typescript-eslint/no-floating-promises
     }
-  }, [debouncedFormState])
+  }, [debouncedFormState, dispatchFields, onChange])
 
   return (
     <form

packages/ui/src/forms/fields/Relationship/AddNew/index.tsx

@@ -4,7 +4,7 @@ import type { SanitizedCollectionConfig } from 'payload/types'
 import { getTranslation } from '@payloadcms/translations'
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 
-import type { EditViewProps } from '../../../../views/types'
+import type { EditViewProps } from '../../../../../../next/src/pages/Edit/types'
 import type { Value } from '../types'
 import type { Props } from './types'
 

packages/ui/src/providers/DocumentInfo/types.ts

@@ -22,7 +22,7 @@ export type DocumentInfoProps = {
   collectionSlug?: SanitizedCollectionConfig['slug']
   disableActions?: boolean
   disableLeaveWithoutSaving?: boolean
-  docPermissions: DocumentPermissions
+  docPermissions?: DocumentPermissions
   docPreferences?: DocumentPreferences
   globalSlug?: SanitizedGlobalConfig['slug']
   hasSavePermission?: boolean

packages/ui/src/providers/ListInfo/types.ts

@@ -1,6 +1,10 @@
 import type { Data, FieldAffectingData, SanitizedCollectionConfig, Where } from 'payload/types'
 import type React from 'react'
 
+import type { Column } from '../..'
+
+export type ColumnPreferences = Pick<Column, 'accessor' | 'active'>[]
+
 export type ListInfoProps = {
   Header?: React.ReactNode
   collectionSlug: SanitizedCollectionConfig['slug']

packages/ui/src/providers/SelectionProvider/index.tsx

@@ -4,7 +4,7 @@ import type { Where } from 'payload/types'
 import queryString from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
 
-import { useLocale } from '../../../providers/Locale'
+import { useLocale } from '../Locale'
 
 export enum SelectAllStatus {
   AllAvailable = 'allAvailable',

packages/ui/src/utilities/buildComponentMap/index.tsx

@@ -6,11 +6,12 @@ import React from 'react'
 
 import type { CollectionComponentMap, ComponentMap, GlobalComponentMap } from './types'
 
-import { DefaultEditView } from '../../views/Edit'
-import { DefaultList } from '../../views/List'
 import { mapFields } from './mapFields'
 
 export const buildComponentMap = (args: {
+  DefaultCell: React.FC<any>
+  DefaultEditView: React.FC<EditViewProps>
+  DefaultListView: React.FC<EditViewProps>
   config: SanitizedConfig
   operation?: 'create' | 'update'
   permissions?:
@@ -20,7 +21,15 @@ export const buildComponentMap = (args: {
     | FieldPermissions
   readOnly?: boolean
 }): ComponentMap => {
-  const { config, operation = 'update', permissions, readOnly: readOnlyOverride } = args
+  const {
+    DefaultCell,
+    DefaultEditView,
+    DefaultListView,
+    config,
+    operation = 'update',
+    permissions,
+    readOnly: readOnlyOverride,
+  } = args
 
   // Collections
   const collections = config.collections.reduce((acc, collectionConfig) => {
@@ -49,7 +58,7 @@ export const buildComponentMap = (args: {
           : undefined
 
     const Edit = CustomEditView || DefaultEditView
-    const List = CustomListView || DefaultList
+    const List = CustomListView || DefaultListView
 
     const beforeList = collectionConfig?.admin?.components?.BeforeList
 
@@ -60,22 +69,27 @@ export const buildComponentMap = (args: {
     const afterListTable = collectionConfig?.admin?.components?.AfterListTable
 
     const BeforeList =
-      beforeList && Array.isArray(beforeList) && beforeList?.map((Component) => <Component />)
+      (beforeList && Array.isArray(beforeList) && beforeList?.map((Component) => <Component />)) ||
+      null
 
     const BeforeListTable =
-      beforeListTable &&
+      (beforeListTable &&
         Array.isArray(beforeListTable) &&
-      beforeListTable?.map((Component) => <Component />)
+        beforeListTable?.map((Component) => <Component />)) ||
+      null
 
     const AfterList =
-      afterList && Array.isArray(afterList) && afterList?.map((Component) => <Component />)
+      (afterList && Array.isArray(afterList) && afterList?.map((Component) => <Component />)) ||
+      null
 
     const AfterListTable =
-      afterListTable &&
+      (afterListTable &&
         Array.isArray(afterListTable) &&
-      afterListTable?.map((Component) => <Component />)
+        afterListTable?.map((Component) => <Component />)) ||
+      null
 
     const mappedFields = mapFields({
+      DefaultCell,
       config,
       fieldSchema: fields,
       operation,
@@ -104,6 +118,7 @@ export const buildComponentMap = (args: {
     const { fields, slug } = globalConfig
 
     const mappedFields = mapFields({
+      DefaultCell,
       config,
       fieldSchema: fields,
       operation,

packages/ui/src/utilities/buildComponentMap/mapFields.tsx

@@ -15,9 +15,9 @@ import DefaultError from '../../forms/Error'
 import DefaultDescription from '../../forms/FieldDescription'
 import DefaultLabel from '../../forms/Label'
 import { fieldTypes } from '../../forms/fields'
-import { DefaultCell } from '../../views/List/Cell'
 
 export const mapFields = (args: {
+  DefaultCell?: React.FC<any>
   config: SanitizedConfig
   fieldSchema: FieldWithPath[]
   filter?: (field: Field) => boolean
@@ -31,6 +31,7 @@ export const mapFields = (args: {
   readOnly?: boolean
 }): FieldMap => {
   const {
+    DefaultCell,
     config,
     fieldSchema,
     filter,
@@ -98,6 +99,7 @@ export const mapFields = (args: {
           field.fields &&
           Array.isArray(field.fields) &&
           mapFields({
+            DefaultCell,
             config,
             fieldSchema: field.fields,
             filter,
@@ -114,6 +116,7 @@ export const mapFields = (args: {
           Array.isArray(field.tabs) &&
           field.tabs.map((tab) => {
             const tabFieldMap = mapFields({
+              DefaultCell,
               config,
               fieldSchema: tab.fields,
               filter,
@@ -139,6 +142,7 @@ export const mapFields = (args: {
           Array.isArray(field.blocks) &&
           field.blocks.map((block) => {
             const blockFieldMap = mapFields({
+              DefaultCell,
               config,
               fieldSchema: block.fields,
               filter,
@@ -340,7 +344,7 @@ export const mapFields = (args: {
   if (!hasID) {
     result.push({
       name: 'id',
-      Cell: <DefaultCell name="id" />,
+      Cell: typeof DefaultCell === 'function' ? <DefaultCell name="id" /> : null,
       Field: <HiddenInput name="id" />,
       Heading: <SortColumn label="ID" name="id" />,
       fieldIsPresentational: false,

packages/ui/src/utilities/buildComponentMap/mapRichText.tsx

@@ -1,15 +0,0 @@
-import type { RichTextField } from 'payload/types'
-
-type elements = {
-  Button: React.ReactNode
-}[]
-
-export const mapRichText = (field: RichTextField) => {
-  const cellComponent = null
-  const leafComponent = null
-
-  let elements
-
-  if ('editor' in field) {
-  }
-}