chore: progress to element exports

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

@@ -29,7 +29,7 @@ import LinkImport from 'next/link.js'
 import { formatFilesize } from 'payload/utilities'
 import React, { Fragment, useEffect } from 'react'
 
-import type { CollectionComponentMap } from '../../../../../ui/src/utilities/buildComponentMap/types.js'
+import type { CollectionComponentMap } from '../../../../../ui/src/providers/ComponentMap/buildComponentMap/types.js'
 
 import { RelationshipProvider } from './RelationshipProvider/index.js'
 import './index.scss'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx

@@ -1,6 +1,6 @@
 import type { I18n } from '@payloadcms/translations'
 import type { SelectFieldProps } from 'packages/ui/src/forms/fields/Select/types.js'
-import type { MappedField } from 'packages/ui/src/utilities/buildComponentMap/types.js'
+import type { MappedField } from 'packages/ui/src/providers/ComponentMap/buildComponentMap/types.js'
 import type { OptionObject, SelectField } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx

@@ -1,5 +1,5 @@
 import type { TabsFieldProps } from 'packages/ui/src/forms/fields/Tabs/types.js'
-import type { MappedField } from 'packages/ui/src/utilities/buildComponentMap/types.js'
+import type { MappedField } from 'packages/ui/src/providers/ComponentMap/buildComponentMap/types.js'
 
 import React from 'react'
 

packages/ui/package.json

@@ -26,6 +26,12 @@
       "default": "./src/elements/*/index.tsx",
       "types": "./src/elements/*/index.tsx"
     },
+    "./fields/*": {
+      "import": "./src/fields/*/index.tsx",
+      "require": "./src/fields/*/index.tsx",
+      "default": "./src/fields/*/index.tsx",
+      "types": "./src/fields/*/index.tsx"
+    },
     "./forms/*": {
       "import": "./src/forms/*/index.tsx",
       "require": "./src/forms/*/index.tsx",
@@ -63,10 +69,10 @@
       "types": "./src/templates/*/index.tsx"
     },
     "./utilities/*": {
-      "import": "./src/utilities/*/index.tsx",
-      "require": "./src/utilities/*/index.tsx",
-      "default": "./src/utilities/*/index.tsx",
-      "types": "./src/utilities/*/index.tsx"
+      "import": "./src/utilities/*.ts",
+      "require": "./src/utilities/*.ts",
+      "default": "./src/utilities/*.ts",
+      "types": "./src/utilities/*.ts"
     },
     "./scss": {
       "import": "./src/scss.scss",

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

@@ -1,23 +1,30 @@
 'use client'
 // TODO: abstract the `next/navigation` dependency out from this component
+import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
+
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types.js'
-
 import { useAllFormFields, useFormModified } from '../../forms/Form/context.js'
-import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues.js'
-import useDebounce from '../../hooks/useDebounce.js'
+import { reduceFieldsToValues } from '../../forms/Form/reduceFieldsToValues.js'
+import { useDebounce } from '../../hooks/useDebounce.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import { formatTimeToNow } from '../../utilities/formatDate/index.js'
+import { formatTimeToNow } from '../../utilities/formatDate.js'
 import './index.scss'
 
 const baseClass = 'autosave'
 
+export type Props = {
+  collection?: SanitizedCollectionConfig
+  global?: SanitizedGlobalConfig
+  id?: number | string
+  publishedDocUpdatedAt: string
+}
+
 const Autosave: React.FC<Props> = ({
   id,
   collection,

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

@@ -1,8 +0,0 @@
-import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
-
-export type Props = {
-  collection?: SanitizedCollectionConfig
-  global?: SanitizedGlobalConfig
-  id?: number | string
-  publishedDocUpdatedAt: string
-}

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

@@ -1,7 +1,7 @@
-import LinkImport from 'next/link.js'
-import React from 'react' // TODO: abstract this out to support all routers
+import LinkImport from 'next/link.js' // TODO: abstract this out to support all routers
+import type { MouseEvent } from 'react'
 
-import type { Props, RenderedTypeProps } from './types.js'
+import React from 'react'
 
 import './index.scss'
 
@@ -9,6 +9,25 @@ const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.
 
 const baseClass = 'banner'
 
+type onClick = (event: MouseEvent) => void
+
+export type Props = {
+  alignIcon?: 'left' | 'right'
+  children?: React.ReactNode
+  className?: string
+  icon?: React.ReactNode
+  onClick?: onClick
+  to?: string
+  type?: 'default' | 'error' | 'info' | 'success'
+}
+
+export type RenderedTypeProps = {
+  children?: React.ReactNode
+  className?: string
+  onClick?: onClick
+  to: string
+}
+
 export const Banner: React.FC<Props> = ({
   type = 'default',
   alignIcon = 'right',
@@ -43,5 +62,3 @@ export const Banner: React.FC<Props> = ({
     </RenderedType>
   )
 }
-
-export default Banner

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

@@ -1,20 +0,0 @@
-import type { MouseEvent } from 'react'
-
-type onClick = (event: MouseEvent) => void
-
-export type Props = {
-  alignIcon?: 'left' | 'right'
-  children?: React.ReactNode
-  className?: string
-  icon?: React.ReactNode
-  onClick?: onClick
-  to?: string
-  type?: 'default' | 'error' | 'info' | 'success'
-}
-
-export type RenderedTypeProps = {
-  children?: React.ReactNode
-  className?: string
-  onClick?: onClick
-  to: string
-}

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

@@ -1,10 +1,8 @@
 import type { ElementType, MouseEvent } from 'react'
 import type React from 'react'
 
-import type { LinkType } from '../../exports-old/types.js'
-
 export type Props = {
-  Link?: LinkType
+  Link?: React.ElementType
   'aria-label'?: string
   buttonId?: string
   buttonStyle?: 'error' | 'icon-label' | 'none' | 'primary' | 'secondary' | 'transparent'

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

@@ -1,10 +1,21 @@
-import React from 'react'
+import type { ElementType } from 'react'
 
-import type { Props } from './types.js'
+import React from 'react'
 
 import { Button } from '../Button/index.js'
 import './index.scss'
 
+export type Props = {
+  Link?: ElementType
+  actions?: React.ReactNode
+  buttonAriaLabel?: string
+  href?: string
+  id?: string
+  onClick?: () => void
+  title: string
+  titleAs?: ElementType
+}
+
 const baseClass = 'card'
 
 export const Card: React.FC<Props> = (props) => {

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

@@ -1,12 +0,0 @@
-import type { ElementType } from 'react'
-
-export type Props = {
-  Link?: ElementType
-  actions?: React.ReactNode
-  buttonAriaLabel?: string
-  href?: string
-  id?: string
-  onClick?: () => void
-  title: string
-  titleAs?: ElementType
-}

packages/ui/src/elements/CodeEditor/CodeEditor.tsx

@@ -46,4 +46,5 @@ const CodeEditor: React.FC<Props> = (props) => {
   )
 }
 
+// eslint-disable-next-line no-restricted-exports
 export default CodeEditor

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

@@ -6,6 +6,8 @@ import { ShimmerEffect } from '../ShimmerEffect/index.js'
 
 const LazyEditor = lazy(() => import('./CodeEditor.js'))
 
+export type { Props }
+
 export const CodeEditor: React.FC<Props> = (props) => {
   const { height = '35vh' } = props
 

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

@@ -2,11 +2,11 @@
 import React, { useState } from 'react'
 import AnimateHeightImport from 'react-animate-height'
 
+import type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'
+
 const AnimateHeight = (AnimateHeightImport.default ||
   AnimateHeightImport) as typeof AnimateHeightImport.default
 
-import type { Props } from './types.js'
-
 import { Chevron } from '../../icons/Chevron/index.js'
 import { DragHandle } from '../../icons/DragHandle/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
@@ -15,6 +15,20 @@ import { CollapsibleProvider, useCollapsible } from './provider.js'
 
 const baseClass = 'collapsible'
 
+export { CollapsibleProvider, useCollapsible }
+
+export type Props = {
+  actions?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+  collapsed?: boolean
+  collapsibleStyle?: 'default' | 'error'
+  dragHandleProps?: DragHandleProps
+  header?: React.ReactNode
+  initCollapsed?: boolean
+  onToggle?: (collapsed: boolean) => void
+}
+
 export const Collapsible: React.FC<Props> = ({
   actions,
   children,

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

@@ -1,15 +0,0 @@
-import type React from 'react'
-
-import type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'
-
-export type Props = {
-  actions?: React.ReactNode
-  children: React.ReactNode
-  className?: string
-  collapsed?: boolean
-  collapsibleStyle?: 'default' | 'error'
-  dragHandleProps?: DragHandleProps
-  header?: React.ReactNode
-  initCollapsed?: boolean
-  onToggle?: (collapsed: boolean) => void
-}

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

@@ -1,9 +1,9 @@
 'use client'
+import type { SanitizedCollectionConfig } from 'payload/types'
+
 import { getTranslation } from '@payloadcms/translations'
 import React, { useId } from 'react'
 
-import type { Props } from './types.js'
-
 import { Plus } from '../../icons/Plus/index.js'
 import { X } from '../../icons/X/index.js'
 import { useEditDepth } from '../../providers/EditDepth/index.js'
@@ -15,7 +15,11 @@ import './index.scss'
 
 const baseClass = 'column-selector'
 
-const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {
+export type Props = {
+  collectionSlug: SanitizedCollectionConfig['slug']
+}
+
+export const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {
   const { columns, moveColumn, toggleColumn } = useTableColumns()
 
   const { i18n } = useTranslation()
@@ -66,5 +70,3 @@ const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {
     </DraggableSortable>
   )
 }
-
-export default ColumnSelector

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

@@ -1,5 +0,0 @@
-import type { SanitizedCollectionConfig } from 'payload/types'
-
-export type Props = {
-  collectionSlug: SanitizedCollectionConfig['slug']
-}

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

@@ -1,8 +1,6 @@
 'use client'
 import React, { useRef, useState } from 'react'
 
-import type { Props } from './types.js'
-
 import { Copy } from '../../icons/Copy/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { Tooltip } from '../Tooltip/index.js'
@@ -10,7 +8,13 @@ import './index.scss'
 
 const baseClass = 'copy-to-clipboard'
 
-const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {
+export type Props = {
+  defaultMessage?: string
+  successMessage?: string
+  value?: string
+}
+
+export const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {
   const ref = useRef(null)
   const [copied, setCopied] = useState(false)
   const [hovered, setHovered] = useState(false)
@@ -50,5 +54,3 @@ const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, valu
 
   return null
 }
-
-export default CopyToClipboard

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

@@ -1,5 +0,0 @@
-export type Props = {
-  defaultMessage?: string
-  successMessage?: string
-  value?: string
-}

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -11,7 +11,7 @@ import type { Props } from './types.js'
 import { Calendar as CalendarIcon } from '../../icons/Calendar/index.js'
 import { X as XIcon } from '../../icons/X/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import { getDateLocale } from '../../utilities/formatDate/getDateLocale.js'
+import { getDateLocale } from '../../utilities/getDateLocale.js'
 import './index.scss'
 
 const baseClass = 'date-time-picker'
@@ -117,4 +117,5 @@ const DateTime: React.FC<Props> = (props) => {
   )
 }
 
+// eslint-disable-next-line no-restricted-exports
 export default DateTime

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

@@ -1,12 +1,12 @@
 'use client'
+import type { SanitizedCollectionConfig } from 'payload/types'
+
 import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types.js'
-
 import { useForm } from '../../forms/Form/context.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
@@ -20,6 +20,15 @@ import './index.scss'
 
 const baseClass = 'delete-document'
 
+export type Props = {
+  buttonId?: string
+  collectionSlug: SanitizedCollectionConfig['slug']
+  id?: string
+  singularLabel: SanitizedCollectionConfig['labels']['singular']
+  title?: string
+  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']
+}
+
 const DeleteDocument: React.FC<Props> = (props) => {
   const { id, buttonId, collectionSlug, singularLabel, title: titleFromProps } = props
   const { Modal, useModal } = facelessUIImport

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

@@ -1,10 +0,0 @@
-import type { SanitizedCollectionConfig } from 'payload/types'
-
-export type Props = {
-  buttonId?: string
-  collectionSlug: SanitizedCollectionConfig['slug']
-  id?: string
-  singularLabel: SanitizedCollectionConfig['labels']['singular']
-  title?: string
-  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']
-}

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

@@ -1,17 +1,17 @@
 'use client'
+import type { SanitizedCollectionConfig } from 'payload/types'
+
 import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types.js'
-
-import { useRouteCache } from '../../index.js'
 import { useAuth } from '../../providers/Auth/index.js'
 import { useConfig } from '../../providers/Config/index.js'
+import { useRouteCache } from '../../providers/RouteCache/index.js'
 import { useSearchParams } from '../../providers/SearchParams/index.js'
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { SelectAllStatus, useSelection } from '../../providers/Selection/index.jsx'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { MinimalTemplate } from '../../templates/Minimal/index.js'
 import { requests } from '../../utilities/api.js'
@@ -21,6 +21,11 @@ import './index.scss'
 
 const baseClass = 'delete-documents'
 
+export type Props = {
+  collection: SanitizedCollectionConfig
+  title?: string
+}
+
 export const DeleteMany: React.FC<Props> = (props) => {
   const { Modal, useModal } = facelessUIImport
 

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

@@ -1,6 +0,0 @@
-import type { SanitizedCollectionConfig } from 'payload/types'
-
-export type Props = {
-  collection: SanitizedCollectionConfig
-  title?: string
-}

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

@@ -6,14 +6,14 @@ import React, { Fragment } from 'react'
 
 import { useConfig } from '../../providers/Config/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import { formatDate } from '../../utilities/formatDate/index.js'
+import { formatDate } from '../../utilities/formatDate.js'
 import Autosave from '../Autosave/index.js'
 import DeleteDocument from '../DeleteDocument/index.js'
 import DuplicateDocument from '../DuplicateDocument/index.js'
 import { Gutter } from '../Gutter/index.js'
 import * as PopupList from '../Popup/PopupButtonList/index.js'
 import Popup from '../Popup/index.js'
-import PreviewButton from '../PreviewButton/index.js'
+import { PreviewButton } from '../PreviewButton/index.js'
 import { Publish } from '../Publish/index.js'
 import { Save } from '../Save/index.js'
 import { SaveDraft } from '../SaveDraft/index.js'

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

@@ -13,7 +13,7 @@ import { useRelatedCollections } from '../../forms/fields/Relationship/AddNew/us
 import usePayloadAPI from '../../hooks/usePayloadAPI.js'
 import { X } from '../../icons/X/index.js'
 import { formatDocTitle } from '../../index.js'
-import { useComponentMap } from '../../providers/ComponentMapProvider/index.js'
+import { useComponentMap } from '../../providers/ComponentMap/index.jsx'
 import { useConfig } from '../../providers/Config/index.js'
 import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'
 import { useFormQueryParams } from '../../providers/FormQueryParams/index.js'

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

@@ -3,7 +3,7 @@ import type { Description, DocumentPermissions } from 'payload/types'
 
 import React from 'react'
 
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { RenderFields } from '../../forms/RenderFields/index.js'
 import { Gutter } from '../Gutter/index.js'

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

@@ -16,12 +16,12 @@ import FormSubmit from '../../forms/Submit/index.js'
 import { X } from '../../icons/X/index.js'
 import { useRouteCache } from '../../index.js'
 import { useAuth } from '../../providers/Auth/index.js'
-import { useComponentMap } from '../../providers/ComponentMapProvider/index.js'
+import { useComponentMap } from '../../providers/ComponentMap/index.jsx'
 import { useConfig } from '../../providers/Config/index.js'
 import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'
-import { OperationContext } from '../../providers/OperationProvider/index.js'
+import { OperationContext } from '../../providers/Operation/index.jsx'
 import { useSearchParams } from '../../providers/SearchParams/index.js'
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { SelectAllStatus, useSelection } from '../../providers/Selection/index.jsx'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { getFormState } from '../../utilities/getFormState.js'
 import { Drawer, DrawerToggler } from '../Drawer/index.js'

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

@@ -6,7 +6,7 @@ import React, { useState } from 'react'
 
 import { useForm } from '../../forms/Form/context.js'
 import { createNestedFieldPath } from '../../forms/Form/createNestedFieldPath.js'
-import Label from '../../forms/Label/index.js'
+import { Label } from '../../forms/Label/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import ReactSelect from '../ReactSelect/index.js'
 import './index.scss'

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

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import type { Props } from './types.js'
 
 import { Edit } from '../../../icons/Edit/index.js'
-import CopyToClipboard from '../../CopyToClipboard/index.js'
+import { CopyToClipboard } from '../../CopyToClipboard/index.js'
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js'
 import { Tooltip } from '../../Tooltip/index.js'
 import './index.scss'

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

@@ -3,7 +3,7 @@ import LinkWithDefault from 'next/link.js'
 import React, { useEffect, useRef, useState } from 'react'
 
 import Account from '../../graphics/Account/index.js'
-import { useActions } from '../../providers/ActionsProvider/index.js'
+import { useActions } from '../../providers/Actions/index.jsx'
 import { useConfig } from '../../providers/Config/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { Hamburger } from '../Hamburger/index.js'

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

@@ -14,7 +14,7 @@ import usePayloadAPI from '../../hooks/usePayloadAPI.js'
 import { useUseTitleField } from '../../hooks/useUseAsTitle.sx'
 import { X } from '../../icons/X/index.js'
 import { useAuth } from '../../providers/Auth/index.js'
-import { useComponentMap } from '../../providers/ComponentMapProvider/index.js'
+import { useComponentMap } from '../../providers/ComponentMap/index.jsx'
 import { useConfig } from '../../providers/Config/index.js'
 import { ListInfoProvider } from '../../providers/ListInfo/index.js'
 import { usePreferences } from '../../providers/Preferences/index.js'

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

@@ -1,7 +1,7 @@
 'use client'
 import React, { Fragment } from 'react'
 
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { SelectAllStatus, useSelection } from '../../providers/Selection/index.jsx'
 import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'
 

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

@@ -38,7 +38,7 @@ type Props = {
   generatePreviewURL?: GeneratePreviewURL
 }
 
-const PreviewButton: React.FC<Props> = ({ CustomComponent, generatePreviewURL }) => {
+export const PreviewButton: React.FC<Props> = ({ CustomComponent, generatePreviewURL }) => {
   const { id, collectionSlug, globalSlug } = useDocumentInfo()
 
   const [isLoading, setIsLoading] = useState(false)
@@ -93,5 +93,3 @@ const PreviewButton: React.FC<Props> = ({ CustomComponent, generatePreviewURL })
     />
   )
 }
-
-export default PreviewButton

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

@@ -11,7 +11,7 @@ import { useRouteCache } from '../../index.js'
 import { useAuth } from '../../providers/Auth/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useSearchParams } from '../../providers/SearchParams/index.js'
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { SelectAllStatus, useSelection } from '../../providers/Selection/index.jsx'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { MinimalTemplate } from '../../templates/Minimal/index.js'
 import { requests } from '../../utilities/api.js'

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

@@ -3,7 +3,7 @@
 import React from 'react'
 
 import { CheckboxInput } from '../../forms/fields/Checkbox/Input.js'
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { SelectAllStatus, useSelection } from '../../providers/Selection/index.jsx'
 import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'
 

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

@@ -3,7 +3,7 @@ import React from 'react'
 
 import { useTableCell } from '../../elements/Table/TableCellProvider/index.js'
 import { CheckboxInput } from '../../forms/fields/Checkbox/Input.js'
-import { useSelection } from '../../providers/SelectionProvider/index.js'
+import { useSelection } from '../../providers/Selection/index.jsx'
 import './index.scss'
 
 const baseClass = 'select-row'

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

@@ -2,8 +2,8 @@ import type { CellProps, SanitizedCollectionConfig } from 'payload/types'
 
 import React from 'react'
 
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { ColumnPreferences } from '../../providers/ListInfo/types.js'
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
 import type { Column } from '../Table/types.js'
 
 import { SelectAll } from '../SelectAll/index.js'

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

@@ -8,7 +8,7 @@ import type { ColumnPreferences } from '../../providers/ListInfo/types.js'
 import type { Column } from '../Table/types.js'
 import type { Action } from './columnReducer.js'
 
-import { useComponentMap } from '../../providers/ComponentMapProvider/index.js'
+import { useComponentMap } from '../../providers/ComponentMap/index.jsx'
 import { useConfig } from '../../providers/Config/index.js'
 import { usePreferences } from '../../providers/Preferences/index.js'
 import { buildColumns } from './buildColumns.js'

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

@@ -11,7 +11,7 @@ import { useRouteCache } from '../../index.js'
 import { useAuth } from '../../providers/Auth/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useSearchParams } from '../../providers/SearchParams/index.js'
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { SelectAllStatus, useSelection } from '../../providers/Selection/index.jsx'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { MinimalTemplate } from '../../templates/Minimal/index.js'
 import { requests } from '../../utilities/api.js'

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

@@ -7,7 +7,7 @@ import type { Props } from './types.js'
 import { fieldBaseClass } from '../../fields/shared.js'
 import { Error } from '../../forms/Error/index.js'
 import { useFormSubmitted } from '../../forms/Form/context.js'
-import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues.js'
+import { reduceFieldsToValues } from '../../forms/Form/reduceFieldsToValues.js'
 import { useField } from '../../forms/useField/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'

packages/ui/src/exports-old/elements.ts

@@ -1,53 +0,0 @@
-export { Button } from '../elements/Button/index.jsx'
-export { Card } from '../elements/Card/index.jsx'
-export { Collapsible } from '../elements/Collapsible/index.jsx'
-export { default as CopyToClipboard } from '../elements/CopyToClipboard/index.jsx'
-export { DeleteMany } from '../elements/DeleteMany/index.jsx'
-export { DocumentControls } from '../elements/DocumentControls/index.jsx'
-export { useDocumentDrawer } from '../elements/DocumentDrawer/index.jsx'
-export { DocumentFields } from '../elements/DocumentFields/index.jsx'
-export { DocumentHeader } from '../elements/DocumentHeader/index.jsx'
-export { Drawer, DrawerToggler, formatDrawerSlug } from '../elements/Drawer/index.jsx'
-export { useDrawerSlug } from '../elements/Drawer/useDrawerSlug.jsx'
-export { EditMany } from '../elements/EditMany/index.jsx'
-export { ErrorPill } from '../elements/ErrorPill/index.jsx'
-export { default as GenerateConfirmation } from '../elements/GenerateConfirmation/index.jsx'
-export { Gutter } from '../elements/Gutter/index.jsx'
-export { HydrateClientUser } from '../elements/HydrateClientUser/index.jsx'
-export { ListControls } from '../elements/ListControls/index.jsx'
-export { useListDrawer } from '../elements/ListDrawer/index.jsx'
-export { ListSelection } from '../elements/ListSelection/index.jsx'
-export { LoadingOverlayToggle } from '../elements/Loading/index.jsx'
-export { FormLoadingOverlayToggle } from '../elements/Loading/index.jsx'
-export { LoadingOverlay } from '../elements/Loading/index.jsx'
-export { Pagination } from '../elements/Pagination/index.jsx'
-export { PerPage } from '../elements/PerPage/index.jsx'
-export { Pill } from '../elements/Pill/index.jsx'
-export * as PopupList from '../elements/Popup/PopupButtonList/index.jsx'
-export { default as Popup } from '../elements/Popup/index.jsx'
-export { PublishMany } from '../elements/PublishMany/index.jsx'
-export { default as ReactSelect } from '../elements/ReactSelect/index.jsx'
-export type { Option } from '../elements/ReactSelect/types.js'
-export { RenderCustomComponent } from '../elements/RenderCustomComponent/index.jsx'
-export { ShimmerEffect } from '../elements/ShimmerEffect/index.jsx'
-export { StaggeredShimmers } from '../elements/ShimmerEffect/index.jsx'
-export { SortColumn } from '../elements/SortColumn/index.jsx'
-export { SetStepNav } from '../elements/StepNav/SetStepNav.jsx'
-export { useStepNav } from '../elements/StepNav/index.jsx'
-export type { StepNavItem } from '../elements/StepNav/types.js'
-export { TableCellProvider, useTableCell } from '../elements/Table/TableCellProvider/index.jsx'
-export { Table } from '../elements/Table/index.jsx'
-export type { Column } from '../elements/Table/types.js'
-export { TableColumnsProvider } from '../elements/TableColumns/index.jsx'
-export { default as Thumbnail } from '../elements/Thumbnail/index.jsx'
-export { Tooltip } from '../elements/Tooltip/index.jsx'
-// export { useThumbnail } from '../elements/Upload/index.js'
-export { Translation } from '../elements/Translation/index.jsx'
-export { UnpublishMany } from '../elements/UnpublishMany/index.jsx'
-export { Upload } from '../elements/Upload/index.jsx'
-export { BlocksDrawer } from '../forms/fields/Blocks/BlocksDrawer/index.js'
-export { SetViewActions } from '../providers/ActionsProvider/SetViewActions/index.jsx'
-import * as facelessUIImport from '@faceless-ui/modal'
-const { Modal } =
-  facelessUIImport && 'Modal' in facelessUIImport ? facelessUIImport : { Modal: undefined }
-export { Modal }

packages/ui/src/exports-old/form-utilities.ts

@@ -1,3 +0,0 @@
-export { default as reduceFieldsToValues } from '../forms/Form/reduceFieldsToValues.js'
-export { buildStateFromSchema } from '../forms/buildStateFromSchema/index.js'
-export type { BuildFormStateArgs } from '../forms/buildStateFromSchema/index.js'

packages/ui/src/exports-old/graphics.ts

@@ -1,2 +0,0 @@
-export { default as FileGraphic } from '../graphics/File/index.jsx'
-export { Logo } from '../graphics/Logo/index.jsx'

packages/ui/src/exports-old/hooks.ts

@@ -1,20 +0,0 @@
-export { useAdminThumbnail } from '../hooks/useAdminThumbnail.js'
-export { default as useDebounce } from '../hooks/useDebounce.js'
-export { default as useHotkey } from '../hooks/useHotkey.jsx'
-export { useIntersect } from '../hooks/useIntersect.jsx'
-export { default as usePayloadAPI } from '../hooks/usePayloadAPI.jsx'
-export { useResize } from '../hooks/useResize.js'
-export { default as useThumbnail } from '../hooks/useThumbnail.js'
-
-import * as facelessUIImport from '@faceless-ui/modal'
-
-const { useModal } =
-  facelessUIImport && 'useModal' in facelessUIImport ? facelessUIImport : { useModal: undefined }
-export { useModal }
-
-import * as facelessUIImport2 from '@faceless-ui/window-info'
-const { useWindowInfo } =
-  facelessUIImport && 'useWindowInfo' in facelessUIImport2
-    ? facelessUIImport2
-    : { useWindowInfo: undefined }
-export { useWindowInfo }

packages/ui/src/exports-old/providers.ts

@@ -1,33 +0,0 @@
-export { useActions } from '../providers/ActionsProvider/index.jsx'
-export { useAuth } from '../providers/Auth/index.jsx'
-export { ClientFunctionProvider, useAddClientFunction } from '../providers/ClientFunction/index.jsx'
-export { useClientFunctions } from '../providers/ClientFunction/index.jsx'
-export { useComponentMap } from '../providers/ComponentMapProvider/index.jsx'
-export type { IComponentMapContext } from '../providers/ComponentMapProvider/index.jsx'
-export { ConfigProvider, useConfig } from '../providers/Config/index.jsx'
-export { useDocumentEvents } from '../providers/DocumentEvents/index.jsx'
-export {
-  type DocumentInfo,
-  type DocumentInfoContext,
-  type DocumentInfoProps,
-  DocumentInfoProvider,
-} from '../providers/DocumentInfo/index.js'
-export { useDocumentInfo } from '../providers/DocumentInfo/index.jsx'
-export { EditDepthContext, EditDepthProvider } from '../providers/EditDepth/index.js'
-export { useEditDepth } from '../providers/EditDepth/index.js'
-export { FormQueryParams, FormQueryParamsProvider } from '../providers/FormQueryParams/index.js'
-export { useFormQueryParams } from '../providers/FormQueryParams/index.js'
-export { useListInfo } from '../providers/ListInfo/index.js'
-export { ListInfoProvider } from '../providers/ListInfo/index.js'
-export type { ColumnPreferences } from '../providers/ListInfo/types.js'
-export { useLocale } from '../providers/Locale/index.jsx'
-export { OperationProvider } from '../providers/OperationProvider/index.jsx'
-export { RootProvider } from '../providers/Root/index.jsx'
-export { useRouteCache } from '../providers/RouteCache/index.jsx'
-export {
-  SelectAllStatus,
-  SelectionProvider,
-  useSelection,
-} from '../providers/SelectionProvider/index.js'
-export { useTheme } from '../providers/Theme/index.js'
-export { useTranslation } from '../providers/Translation/index.js'

packages/ui/src/exports-old/scss.scss

@@ -1,5 +0,0 @@
-@import '../scss/vars.scss';
-@import '../scss/queries.scss';
-@import '../scss/colors.scss';
-@import '../scss/resets.scss';
-@import '../scss/type.scss';

packages/ui/src/exports-old/templates.ts

@@ -1,2 +0,0 @@
-export { DefaultTemplate } from '../templates/Default/index.jsx'
-export { MinimalTemplate } from '../templates/Minimal/index.jsx'

packages/ui/src/exports-old/types.ts

@@ -1,9 +0,0 @@
-import type React from 'react'
-
-// Pass a component from your routing library to override the default anchor tag.
-// @example
-// import Link from 'next/link' // TODO: abstract this out to support all routers
-// @example
-// import { Link } from 'next/link'
-export type LinkType = React.ElementType
-export type { FormFieldBase } from '../forms/fields/shared.js'

packages/ui/src/exports-old/utilities.ts

@@ -1,15 +0,0 @@
-export { buildComponentMap } from '../utilities/buildComponentMap/index.jsx'
-export { mapFields } from '../utilities/buildComponentMap/mapFields.jsx'
-export type { FieldMap, MappedField } from '../utilities/buildComponentMap/types.js'
-export type { ReducedBlock } from '../utilities/buildComponentMap/types.js'
-export { buildFieldSchemaMap } from '../utilities/buildFieldSchemaMap/index.js'
-export type { FieldSchemaMap } from '../utilities/buildFieldSchemaMap/types.js'
-export { default as canUseDOM } from '../utilities/canUseDOM.js'
-export { findLocaleFromCode } from '../utilities/findLocaleFromCode.js'
-export { formatDate } from '../utilities/formatDate/index.js'
-export { formatDocTitle } from '../utilities/formatDocTitle.js'
-export { formatFields } from '../utilities/formatFields.jsx'
-export { getFormState } from '../utilities/getFormState.js'
-export type { EntityToGroup, Group } from '../utilities/groupNavItems.js'
-export { EntityType, groupNavItems } from '../utilities/groupNavItems.js'
-export { withMergedProps } from '../utilities/withMergedProps/index.jsx'

packages/ui/src/fields/Array/ArrayRow.tsx

@@ -5,7 +5,7 @@ import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
 import type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { ArrayAction } from '../../elements/ArrayAction/index.js'
 import { Collapsible } from '../../elements/Collapsible/index.js'

packages/ui/src/fields/Array/index.tsx

@@ -6,10 +6,10 @@ import type { ArrayField as ArrayFieldType } from 'payload/types'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
 
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared.js'
 
-import Banner from '../../elements/Banner/index.js'
+import { Banner } from '../../elements/Banner/index.js'
 import { Button } from '../../elements/Button/index.js'
 import DraggableSortableItem from '../../elements/DraggableSortable/DraggableSortableItem/index.js'
 import DraggableSortable from '../../elements/DraggableSortable/index.js'

packages/ui/src/fields/Blocks/BlockRow.tsx

@@ -6,7 +6,7 @@ import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
 import type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'
-import type { ReducedBlock } from '../../utilities/buildComponentMap/types.js'
+import type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { Collapsible } from '../../elements/Collapsible/index.js'
 import { ErrorPill } from '../../elements/ErrorPill/index.js'

packages/ui/src/fields/Blocks/BlocksDrawer/index.tsx

@@ -6,7 +6,7 @@ import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useEffect, useState } from 'react'
 
-import type { ReducedBlock } from '../../../utilities/buildComponentMap/types.js'
+import type { ReducedBlock } from '../../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { Drawer } from '../../../elements/Drawer/index.js'
 import { ThumbnailCard } from '../../../elements/ThumbnailCard/index.js'

packages/ui/src/fields/Blocks/RowActions.tsx

@@ -4,7 +4,10 @@ import type { Labels } from 'payload/types'
 import * as facelessUIImport from '@faceless-ui/modal'
 import React from 'react'
 
-import type { FieldMap, ReducedBlock } from '../../utilities/buildComponentMap/types.js'
+import type {
+  FieldMap,
+  ReducedBlock,
+} from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { ArrayAction } from '../../elements/ArrayAction/index.js'
 import { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js'

packages/ui/src/fields/Blocks/index.tsx

@@ -28,7 +28,10 @@ const baseClass = 'blocks-field'
 import type { FieldPermissions } from 'payload/auth'
 import type { BlockField, FieldBase } from 'payload/types'
 
-import type { FieldMap, ReducedBlock } from '../../utilities/buildComponentMap/types.js'
+import type {
+  FieldMap,
+  ReducedBlock,
+} from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared.js'
 
 export type BlocksFieldProps = FormFieldBase & {

packages/ui/src/fields/Collapsible/index.tsx

@@ -22,7 +22,7 @@ const baseClass = 'collapsible-field'
 import type { FieldPermissions } from 'payload/auth'
 import type { FieldBase } from 'payload/types'
 
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared.js'
 
 export type CollapsibleFieldProps = FormFieldBase & {

packages/ui/src/fields/Group/index.tsx

@@ -4,7 +4,7 @@ import type { FieldBase } from 'payload/types'
 
 import React, { Fragment } from 'react'
 
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared.js'
 
 import { useCollapsible } from '../../elements/Collapsible/provider.js'

packages/ui/src/fields/RichText/index.tsx

@@ -1,6 +1,6 @@
 import type React from 'react'
 
-import type { MappedField } from '../../utilities/buildComponentMap/types.js'
+import type { MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared.js'
 
 export type RichTextFieldProps = FormFieldBase & {

packages/ui/src/fields/Row/types.ts

@@ -1,6 +1,6 @@
 import type { FieldPermissions } from 'payload/auth'
 
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared.js'
 
 export type RowFieldProps = FormFieldBase & {

packages/ui/src/fields/Tabs/Tab/index.tsx

@@ -2,7 +2,7 @@
 import { getTranslation } from '@payloadcms/translations'
 import React, { useState } from 'react'
 
-import type { MappedTab } from '../../../utilities/buildComponentMap/types.js'
+import type { MappedTab } from '../../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { ErrorPill } from '../../../elements/ErrorPill/index.js'
 import { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'

packages/ui/src/fields/Tabs/index.tsx

@@ -6,7 +6,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { toKebabCase } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import type { FieldMap, MappedTab } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap, MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared.js'
 
 import { useCollapsible } from '../../elements/Collapsible/provider.js'

packages/ui/src/forms/Form/buildFieldSchemaMap.ts

@@ -1,64 +0,0 @@
-import type { Field } from 'payload/types'
-
-import { createNestedFieldPath } from './createNestedFieldPath.js'
-
-/**
- * **Returns Map with array and block field schemas**
- * - Takes entity fields and returns a Map to retrieve field schemas by path without indexes
- *
- * **Accessing field schemas**
- * - array fields: indexes must be removed from path i.e. `array.innerArray` instead of `array.0.innerArray`
- * - block fields: the block slug must be appended to the path `blocksFieldName.blockSlug` instead of `blocksFieldName`
- *
- * @param entityFields
- * @returns Map<string, Field[]>
- */
-export const buildFieldSchemaMap = (entityFields: Field[]): Map<string, Field[]> => {
-  const fieldMap = new Map<string, Field[]>()
-
-  const buildUpMap = (fields: Field[], parentPath = '') => {
-    fields.forEach((field) => {
-      const path = createNestedFieldPath(parentPath, field)
-
-      switch (field.type) {
-        case 'blocks':
-          field.blocks.forEach((block) => {
-            const blockPath = `${path}.${block.slug}`
-            fieldMap.set(blockPath, block.fields)
-            buildUpMap(block.fields, blockPath)
-          })
-          break
-
-        case 'array':
-          fieldMap.set(path, field.fields)
-          buildUpMap(field.fields, path)
-          break
-
-        case 'row':
-        case 'collapsible':
-        case 'group':
-          buildUpMap(field.fields, path)
-          break
-
-        case 'tabs':
-          field.tabs.forEach((tab) => {
-            let tabPath = path
-            if (tabPath) {
-              tabPath = 'name' in tab ? `${tabPath}.${tab.name}` : tabPath
-            } else {
-              tabPath = 'name' in tab ? `${tab.name}` : tabPath
-            }
-            buildUpMap(tab.fields, tabPath)
-          })
-          break
-
-        default:
-          break
-      }
-    })
-  }
-
-  buildUpMap(entityFields)
-
-  return fieldMap
-}

packages/ui/src/forms/Form/errorMessages.ts

@@ -1,3 +1,3 @@
-export default {
+export const errorMessages = {
   413: 'Your request was too large to submit successfully.',
 }

packages/ui/src/forms/Form/getDataByPath.ts

@@ -3,7 +3,7 @@ import type { FormState } from 'payload/types'
 import flatleyImport from 'flatley'
 const { unflatten } = flatleyImport
 
-const getDataByPath = <T = unknown>(fields: FormState, path: string): T => {
+export const getDataByPath = <T = unknown>(fields: FormState, path: string): T => {
   const pathPrefixToRemove = path.substring(0, path.lastIndexOf('.') + 1)
   const name = path.split('.').pop()
 
@@ -22,5 +22,3 @@ const getDataByPath = <T = unknown>(fields: FormState, path: string): T => {
 
   return unflattenedData?.[name]
 }
-
-export default getDataByPath

packages/ui/src/forms/Form/getSiblingData.ts

@@ -3,9 +3,9 @@ import type { Data, FormState } from 'payload/types'
 import flatleyImport from 'flatley'
 const { unflatten } = flatleyImport
 
-import reduceFieldsToValues from './reduceFieldsToValues.js'
+import { reduceFieldsToValues } from './reduceFieldsToValues.js'
 
-const getSiblingData = (fields: FormState, path: string): Data => {
+export const getSiblingData = (fields: FormState, path: string): Data => {
   if (path.indexOf('.') === -1) {
     return reduceFieldsToValues(fields, true)
   }
@@ -38,5 +38,3 @@ const getSiblingData = (fields: FormState, path: string): Data => {
 
   return unflatten(siblingFields, { safe: true })
 }
-
-export default getSiblingData

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

@@ -19,7 +19,7 @@ import { useConfig } from '../../providers/Config/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useFormQueryParams } from '../../providers/FormQueryParams/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
-import { useOperation } from '../../providers/OperationProvider/index.js'
+import { useOperation } from '../../providers/Operation/index.jsx'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { requests } from '../../utilities/api.js'
 import { getFormState } from '../../utilities/getFormState.js'
@@ -31,13 +31,15 @@ import {
   ProcessingContext,
   SubmittedContext,
 } from './context.js'
-import errorMessages from './errorMessages.js'
+import { errorMessages } from './errorMessages.js'
 import { fieldReducer } from './fieldReducer.js'
-import getDataByPathFunc from './getDataByPath.js'
-import getSiblingDataFunc from './getSiblingData.js'
-import initContextState from './initContextState.js'
+import { getDataByPath as getDataByPathFunc } from './getDataByPath.js'
+import { getSiblingData as getSiblingDataFunc } from './getSiblingData.js'
+import { initContextState } from './initContextState.js'
 import { mergeServerFormState } from './mergeServerFormState.js'
-import reduceFieldsToValues from './reduceFieldsToValues.js'
+import { reduceFieldsToValues } from './reduceFieldsToValues.js'
+
+export * from './types.js'
 
 const baseClass = 'form'
 

packages/ui/src/forms/Form/initContextState.ts

@@ -24,7 +24,7 @@ const setProcessing: SetProcessing = () => undefined
 const setSubmitted: SetSubmitted = () => undefined
 const reset: Reset = () => undefined
 
-const initialContextState: Context = {
+export const initContextState: Context = {
   addFieldRow: async () => undefined,
   buildRowErrors: () => undefined,
   createFormData,
@@ -47,5 +47,3 @@ const initialContextState: Context = {
   submit,
   validateForm,
 }
-
-export default initialContextState

packages/ui/src/forms/Form/reduceFieldsToValues.ts

@@ -9,7 +9,7 @@ const { unflatten: flatleyUnflatten } = flatleyImport
  * @param ignoreDisableFormData - if true, will include fields that have `disableFormData` set to true, for example, blocks or arrays fields.
  *
  */
-const reduceFieldsToValues = (
+export const reduceFieldsToValues = (
   fields: FormState,
   unflatten?: boolean,
   ignoreDisableFormData?: boolean,
@@ -28,5 +28,3 @@ const reduceFieldsToValues = (
 
   return data
 }
-
-export default reduceFieldsToValues

packages/ui/src/forms/RenderFields/RenderField.tsx

@@ -5,11 +5,14 @@ import type { FieldPermissions } from 'payload/types'
 
 import React from 'react'
 
-import type { FieldComponentProps, MappedField } from '../../utilities/buildComponentMap/types.js'
+import type {
+  FieldComponentProps,
+  MappedField,
+} from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { HiddenInput } from '../../index.js'
-import { useFieldComponents } from '../../providers/FieldComponentsProvider/index.js'
-import { useOperation } from '../../providers/OperationProvider/index.js'
+import { useFieldComponents } from '../../providers/FieldComponents/index.jsx'
+import { useOperation } from '../../providers/Operation/index.jsx'
 import { FieldPropsProvider, useFieldProps } from '../FieldPropsProvider/index.js'
 
 type Props = {

packages/ui/src/forms/RenderFields/types.ts

@@ -1,6 +1,6 @@
 import type { FieldPermissions, Operation } from 'payload/types'
 
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 export type Props = {
   className?: string

packages/ui/src/forms/WatchChildErrors/buildPathSegments.ts

@@ -1,4 +1,4 @@
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 export const buildPathSegments = (parentPath: string, fieldMap: FieldMap): string[] => {
   const pathNames = fieldMap.reduce((acc, subField) => {

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

@@ -1,7 +1,7 @@
 'use client'
 import type React from 'react'
 
-import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 import useThrottledEffect from '../../hooks/useThrottledEffect.js'
 import { useAllFormFields, useFormSubmitted } from '../Form/context.js'

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

@@ -8,7 +8,7 @@ import useThrottledEffect from '../../hooks/useThrottledEffect.js'
 import { useAuth } from '../../providers/Auth/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
-import { useOperation } from '../../providers/OperationProvider/index.js'
+import { useOperation } from '../../providers/Operation/index.jsx'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { useFieldProps } from '../FieldPropsProvider/index.js'
 import { useForm, useFormFields, useFormProcessing, useFormSubmitted } from '../Form/context.js'

packages/ui/src/hooks/usePayloadAPI.ts

@@ -2,8 +2,8 @@
 import queryString from 'qs'
 import { useEffect, useRef, useState } from 'react'
 
-import { useLocale } from '../providers/Locale/index.js'
-import { useTranslation } from '../providers/Translation/index.js'
+import { useLocale } from '../providers/Locale/index.jsx'
+import { useTranslation } from '../providers/Translation/index.jsx'
 import { requests } from '../utilities/api.js'
 
 type Result = [

packages/ui/src/hooks/useThumbnail.ts

@@ -2,7 +2,7 @@ import type { SanitizedCollectionConfig } from 'payload/types'
 
 import { isImage } from 'payload/utilities'
 
-import { useComponentMap } from '../providers/ComponentMapProvider/index.js'
+import { useComponentMap } from '../providers/ComponentMap/index.jsx'
 import { useConfig } from '../providers/Config/index.js'
 
 const absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i')

packages/ui/src/providers/Actions/SetViewActions/index.tsx

@@ -3,9 +3,9 @@ import type React from 'react'
 
 import { useEffect } from 'react'
 
-import type { ActionMap } from '../../../utilities/buildComponentMap/types.js'
+import type { ActionMap } from '../../ComponentMap/buildComponentMap/types.js'
 
-import { useActions } from '../index.js'
+import { useActions } from '../index.jsx'
 
 export const SetViewActions: React.FC<{ actions: ActionMap['Edit'][string] }> = ({ actions }) => {
   const { setViewActions } = useActions()

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

@@ -1,9 +1,9 @@
 'use client'
 import React, { createContext, useContext, useEffect, useState } from 'react'
 
-import type { ActionMap } from '../../utilities/buildComponentMap/types.js'
+import type { ActionMap } from '../ComponentMap/buildComponentMap/types.js'
 
-import { useComponentMap } from '../ComponentMapProvider/index.js'
+import { useComponentMap } from '../ComponentMap/index.jsx'
 
 type ActionsContextType = {
   actions: ActionMap['Edit'][string]
@@ -37,3 +37,5 @@ export const ActionsProvider = ({ children }) => {
     </ActionsContext.Provider>
   )
 }
+
+export { SetViewActions } from './SetViewActions/index.jsx'

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

@@ -1,6 +1,6 @@
 'use client'
 import type { ClientUser, Permissions } from 'payload/auth'
-import type { MeOperationResult } from 'payload/types.js'
+import type { MeOperationResult } from 'payload/types'
 
 import * as facelessUIImport from '@faceless-ui/modal'
 import { usePathname, useRouter } from 'next/navigation.js'
@@ -8,7 +8,7 @@ import qs from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import useDebounce from '../../hooks/useDebounce.js'
+import { useDebounce } from '../../hooks/useDebounce.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { requests } from '../../utilities/api.js'
 import { useConfig } from '../Config/index.js'

packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx

@@ -4,8 +4,8 @@ import React from 'react'
 
 import type { CollectionComponentMap, ComponentMap, GlobalComponentMap } from './types.js'
 
-import { mapActions } from './mapActions.js'
-import { mapFields } from './mapFields.js'
+import { mapActions } from './mapActions.jsx'
+import { mapFields } from './mapFields.jsx'
 
 export const buildComponentMap = (args: {
   DefaultCell: React.FC<any>

packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx

@@ -4,26 +4,26 @@ import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types'
 import { isPlainObject } from 'payload/utilities'
 import React, { Fragment } from 'react'
 
-import type { ArrayFieldProps } from '../../fields/Array/index.js'
-import type { BlocksFieldProps } from '../../fields/Blocks/index.js'
-import type { CheckboxFieldProps } from '../../fields/Checkbox/index.js'
-import type { CodeFieldProps } from '../../fields/Code/index.js'
-import type { CollapsibleFieldProps } from '../../fields/Collapsible/index.js'
-import type { DateFieldProps } from '../../fields/DateTime/index.js'
-import type { EmailFieldProps } from '../../fields/Email/index.js'
-import type { GroupFieldProps } from '../../fields/Group/index.js'
-import type { JSONFieldProps } from '../../fields/JSON/index.js'
-import type { NumberFieldProps } from '../../fields/Number/index.js'
-import type { PointFieldProps } from '../../fields/Point/index.js'
-import type { RelationshipFieldProps } from '../../fields/Relationship/types.js'
-import type { RowFieldProps } from '../../fields/Row/types.js'
-import type { SelectFieldProps } from '../../fields/Select/index.js'
-import type { TabsFieldProps } from '../../fields/Tabs/index.js'
-import type { TextFieldProps } from '../../fields/Text/types.js'
-import type { TextareaFieldProps } from '../../fields/Textarea/types.js'
-import type { UploadFieldProps } from '../../fields/Upload/types.js'
-import type { FormFieldBase } from '../../fields/shared.js'
-import type { Props as FieldDescription } from '../../forms/FieldDescription/types.js'
+import type { ArrayFieldProps } from '../../../fields/Array/index.jsx'
+import type { BlocksFieldProps } from '../../../fields/Blocks/index.jsx'
+import type { CheckboxFieldProps } from '../../../fields/Checkbox/index.jsx'
+import type { CodeFieldProps } from '../../../fields/Code/index.jsx'
+import type { CollapsibleFieldProps } from '../../../fields/Collapsible/index.jsx'
+import type { DateFieldProps } from '../../../fields/DateTime/index.jsx'
+import type { EmailFieldProps } from '../../../fields/Email/index.jsx'
+import type { GroupFieldProps } from '../../../fields/Group/index.jsx'
+import type { JSONFieldProps } from '../../../fields/JSON/index.jsx'
+import type { NumberFieldProps } from '../../../fields/Number/index.jsx'
+import type { PointFieldProps } from '../../../fields/Point/index.jsx'
+import type { RelationshipFieldProps } from '../../../fields/Relationship/types.js'
+import type { RowFieldProps } from '../../../fields/Row/types.js'
+import type { SelectFieldProps } from '../../../fields/Select/index.jsx'
+import type { TabsFieldProps } from '../../../fields/Tabs/index.jsx'
+import type { TextFieldProps } from '../../../fields/Text/types.js'
+import type { TextareaFieldProps } from '../../../fields/Textarea/types.js'
+import type { UploadFieldProps } from '../../../fields/Upload/types.js'
+import type { FormFieldBase } from '../../../fields/shared.js'
+import type { Props as FieldDescription } from '../../../forms/FieldDescription/types.js'
 import type {
   FieldComponentProps,
   FieldMap,
@@ -32,12 +32,12 @@ import type {
   ReducedBlock,
 } from './types.js'
 
-import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
-import { SortColumn } from '../../elements/SortColumn/index.js'
-import { HiddenInput } from '../../fields/HiddenInput/index.js'
-import { Error as DefaultError } from '../../forms/Error/index.js'
-import { FieldDescription as DefaultDescription } from '../../forms/FieldDescription/index.js'
-import { Label as DefaultLabel } from '../../forms/Label/index.js'
+import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.jsx'
+import { SortColumn } from '../../../elements/SortColumn/index.jsx'
+import { HiddenInput } from '../../../fields/HiddenInput/index.jsx'
+import { Error as DefaultError } from '../../../forms/Error/index.jsx'
+import { FieldDescription as DefaultDescription } from '../../../forms/FieldDescription/index.jsx'
+import { Label as DefaultLabel } from '../../../forms/Label/index.jsx'
 
 export const mapFields = (args: {
   DefaultCell?: React.FC<any>
@@ -479,7 +479,7 @@ export const mapFields = (args: {
 
             if (typeof field.editor.generateComponentMap === 'function') {
               const result = field.editor.generateComponentMap({ config, schemaPath: path })
-              // @ts-expect-error-next-line // TODO: the `richTextComponentMap` is not found on the union type
+              // @ts-expect-error
               fieldComponentProps.richTextComponentMap = result
               cellComponentProps.richTextComponentMap = result
             }

packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts

@@ -1,4 +1,4 @@
-import type { FieldTypes } from 'payload/config.js'
+import type { FieldTypes } from 'payload/config'
 import type {
   BlockField,
   SanitizedCollectionConfig,
@@ -6,24 +6,24 @@ import type {
   TabsField,
 } from 'payload/types'
 
-import type { ArrayFieldProps } from '../../forms/fields/Array/types.js'
-import type { BlocksFieldProps } from '../../forms/fields/Blocks/types.js'
-import type { CheckboxFieldProps } from '../../forms/fields/Checkbox/types.js'
-import type { CodeFieldProps } from '../../forms/fields/Code/types.js'
-import type { CollapsibleFieldProps } from '../../forms/fields/Collapsible/types.js'
-import type { DateFieldProps } from '../../forms/fields/DateTime/types.js'
-import type { EmailFieldProps } from '../../forms/fields/Email/types.js'
-import type { GroupFieldProps } from '../../forms/fields/Group/types.js'
-import type { JSONFieldProps } from '../../forms/fields/JSON/types.js'
-import type { NumberFieldProps } from '../../forms/fields/Number/types.js'
-import type { PointFieldProps } from '../../forms/fields/Point/types.js'
-import type { RelationshipFieldProps } from '../../forms/fields/Relationship/types.js'
-import type { RowFieldProps } from '../../forms/fields/Row/types.js'
-import type { SelectFieldProps } from '../../forms/fields/Select/types.js'
-import type { TabsFieldProps } from '../../forms/fields/Tabs/types.js'
-import type { TextFieldProps } from '../../forms/fields/Text/types.js'
-import type { TextareaFieldProps } from '../../forms/fields/Textarea/types.js'
-import type { UploadFieldProps } from '../../forms/fields/Upload/types.js'
+import type { ArrayFieldProps } from '../../../fields/Array/index.js'
+import type { BlocksFieldProps } from '../../../fields/Blocks/index.js'
+import type { CheckboxFieldProps } from '../../../fields/Checkbox/types.js'
+import type { CodeFieldProps } from '../../../fields/Code/index.js'
+import type { CollapsibleFieldProps } from '../../../fields/Collapsible/index.js'
+import type { DateFieldProps } from '../../../fields/DateTime/index.js'
+import type { EmailFieldProps } from '../../../fields/Email/index.js'
+import type { GroupFieldProps } from '../../../fields/Group/index.js'
+import type { JSONFieldProps } from '../../../fields/JSON/index.js'
+import type { NumberFieldProps } from '../../../fields/Number/index.js'
+import type { PointFieldProps } from '../../../fields/Point/index.js'
+import type { RelationshipFieldProps } from '../../../fields/Relationship/index.js'
+import type { RowFieldProps } from '../../../fields/Row/types.js'
+import type { SelectFieldProps } from '../../../fields/Select/index.js'
+import type { TabsFieldProps } from '../../../fields/Tabs/index.js'
+import type { TextFieldProps } from '../../../fields/Text/types.js'
+import type { TextareaFieldProps } from '../../../fields/Textarea/types.js'
+import type { UploadFieldProps } from '../../../fields/Upload/types.js'
 
 export type MappedTab = {
   fieldMap?: FieldMap

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

@@ -1,11 +1,7 @@
 'use client'
 import React, { createContext, useCallback, useContext } from 'react'
 
-import type {
-  ComponentMap,
-  FieldMap,
-  MappedField,
-} from '../../utilities/buildComponentMap/types.js'
+import type { ComponentMap, FieldMap, MappedField } from './buildComponentMap/types.js'
 
 export type IComponentMapContext = {
   componentMap: ComponentMap
@@ -85,3 +81,5 @@ export const ComponentMapProvider: React.FC<{
 }
 
 export const useComponentMap = (): IComponentMapContext => useContext(ComponentMapContext)
+
+export { buildComponentMap } from './buildComponentMap/index.js'

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

@@ -1,9 +1,9 @@
 'use client'
-import type { FieldTypes } from 'payload/config.js'
+import type { FieldTypes } from 'payload/config'
 
 import React, { createContext, useContext } from 'react'
 
-import { fieldComponents } from '../../forms/fields/index.js'
+import { fieldComponents } from '../../fields/index.jsx'
 
 export type IFieldComponentsContext = FieldTypes
 

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

@@ -8,19 +8,19 @@ import * as facelessUIImport2 from '@faceless-ui/window-info'
 import React, { Fragment } from 'react'
 import { Slide, ToastContainer } from 'react-toastify'
 
-import type { ComponentMap } from '../../utilities/buildComponentMap/types.js'
+import type { ComponentMap } from '../ComponentMap/buildComponentMap/types.js'
 import type { LanguageOptions } from '../Translation/index.js'
 
 import { LoadingOverlayProvider } from '../../elements/LoadingOverlay/index.js'
 import { NavProvider } from '../../elements/Nav/context.js'
 import { StepNavProvider } from '../../elements/StepNav/index.js'
-import { ActionsProvider } from '../ActionsProvider/index.js'
+import { ActionsProvider } from '../Actions/index.jsx'
 import { AuthProvider } from '../Auth/index.js'
 import { ClientFunctionProvider } from '../ClientFunction/index.js'
-import { ComponentMapProvider } from '../ComponentMapProvider/index.js'
+import { ComponentMapProvider } from '../ComponentMap/index.jsx'
 import { ConfigProvider } from '../Config/index.js'
 import { DocumentEventsProvider } from '../DocumentEvents/index.js'
-import { FieldComponentsProvider } from '../FieldComponentsProvider/index.js'
+import { FieldComponentsProvider } from '../FieldComponents/index.jsx'
 import { LocaleProvider } from '../Locale/index.js'
 import { ParamsProvider } from '../Params/index.js'
 import { PreferencesProvider } from '../Preferences/index.js'

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

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