chore: adjust imports for richtext-slate

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

@@ -1,5 +1,5 @@
 'use client'
-import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui/forms/Form'
 
 import { DocumentControls } from '@payloadcms/ui/elements/DocumentControls'
 import { DocumentFields } from '@payloadcms/ui/elements/DocumentFields'

packages/next/src/views/LivePreview/index.client.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui/forms/Form'
 import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { LivePreviewConfig } from 'payload/config'
 import type {

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

@@ -1,6 +1,6 @@
 'use client'
 
-import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui/forms/Form'
 
 import { Form } from '@payloadcms/ui/forms/Form'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'

packages/richtext-lexical/src/field/features/link/drawer/index.tsx

@@ -1,4 +1,4 @@
-import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui/forms/Form'
 import type { FormState } from 'payload/types'
 
 import { Drawer } from '@payloadcms/ui/elements/Drawer'

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

@@ -7,7 +7,7 @@ const { useLexicalComposerContext } = lexicalComposerContextImport
 import { getTranslation } from '@payloadcms/translations'
 import lexicalImport from 'lexical'
 const { $getNodeByKey } = lexicalImport
-import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui/forms/Form'
 
 import { Drawer } from '@payloadcms/ui/elements/Drawer'
 import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'

packages/richtext-slate/src/field/RichText.tsx

@@ -1,13 +1,15 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/types'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 import type { BaseEditor, BaseOperation } from 'slate'
 import type { HistoryEditor } from 'slate-history'
 import type { ReactEditor } from 'slate-react'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useEditDepth, useField, useTranslation } from '@payloadcms/ui'
-import { withCondition } from '@payloadcms/ui/forms'
+import { useField } from '@payloadcms/ui/forms/useField'
+import { withCondition } from '@payloadcms/ui/forms/withCondition'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import isHotkey from 'is-hotkey'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { Node, Element as SlateElement, Text, Transforms, createEditor } from 'slate'

packages/richtext-slate/src/field/elements/Button.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { ElementType } from 'react'
 
-import { Tooltip } from '@payloadcms/ui'
+import { Tooltip } from '@payloadcms/ui/elements/Tooltip'
 import React, { useCallback, useState } from 'react'
 import { useSlate } from 'slate-react'
 

packages/richtext-slate/src/field/elements/EnabledRelationshipsCondition.tsx

@@ -3,7 +3,8 @@
 import type { ClientUser } from 'payload/auth'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import { useAuth, useConfig } from '@payloadcms/ui/providers'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useConfig } from '@payloadcms/ui/providers/Config'
 import * as React from 'react'
 
 type options = {

packages/richtext-slate/src/field/elements/link/Button/index.tsx

@@ -3,15 +3,13 @@
 import type { FormState } from 'payload/types'
 
 import * as facelessUIImport from '@faceless-ui/modal'
-import {
-  getFormState,
-  reduceFieldsToValues,
-  useConfig,
-  useDocumentInfo,
-  useDrawerSlug,
-  useTranslation,
-} from '@payloadcms/ui'
-import { useFieldPath } from '@payloadcms/ui/forms'
+import { useDrawerSlug } from '@payloadcms/ui/elements/Drawer'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
+import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'
 import React, { Fragment, useState } from 'react'
 import { Editor, Range, Transforms } from 'slate'
 import { ReactEditor, useSlate } from 'slate-react'
@@ -25,7 +23,7 @@ import { linkFieldsSchemaPath } from '../shared.js'
 import { unwrapLink } from '../utilities.js'
 
 /**
- * This function is called when an new link is created - not when an existing link is edited.
+ * This function is called when a new link is created - not when an existing link is edited.
  */
 const insertLink = (editor, fields) => {
   const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)
@@ -75,7 +73,7 @@ export const LinkButton: React.FC = () => {
   const { closeModal, openModal } = useModal()
   const drawerSlug = useDrawerSlug('rich-text-link')
   const { id, collectionSlug } = useDocumentInfo()
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
 
   const { richTextComponentMap } = fieldProps
 

packages/richtext-slate/src/field/elements/link/Element/index.tsx

@@ -4,19 +4,17 @@ import type { FormState } from 'payload/types'
 
 import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Button,
-  Popup,
-  Translation,
-  getFormState,
-  reduceFieldsToValues,
-  useAuth,
-  useConfig,
-  useDocumentInfo,
-  useDrawerSlug,
-  useLocale,
-  useTranslation,
-} from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { useDrawerSlug } from '@payloadcms/ui/elements/Drawer'
+import { Popup } from '@payloadcms/ui/elements/Popup'
+import { Translation } from '@payloadcms/ui/elements/Translation'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useLocale } from '@payloadcms/ui/providers/Locale'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
+import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'
 import { deepCopyObject } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 import { Editor, Node, Transforms } from 'slate'

packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx

@@ -1,20 +1,18 @@
 'use client'
 
-import {
-  Drawer,
-  Form,
-  type FormProps,
-  FormSubmit,
-  RenderFields,
-  getFormState,
-  useConfig,
-  useDocumentInfo,
-  useEditDepth,
-  useFieldPath,
-  useTranslation,
-} from '@payloadcms/ui'
-import { FieldPathProvider } from '@payloadcms/ui/forms'
-import { useHotkey } from '@payloadcms/ui/hooks'
+import type { FormProps } from '@payloadcms/ui/forms/Form'
+
+import { Drawer } from '@payloadcms/ui/elements/Drawer'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { RenderFields } from '@payloadcms/ui/forms/RenderFields'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import { useHotkey } from '@payloadcms/ui/hooks/useHotkey'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
 import React, { useCallback, useRef } from 'react'
 
 import type { Props } from './types.js'
@@ -31,7 +29,7 @@ export const LinkDrawer: React.FC<Props> = ({
   initialState,
 }) => {
   const { t } = useTranslation()
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
   const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`
   const { id } = useDocumentInfo()
   const config = useConfig()

packages/richtext-slate/src/field/elements/link/LinkDrawer/types.ts

@@ -1,4 +1,4 @@
-import type { FieldMap } from '@payloadcms/ui'
+import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { FormState } from 'payload/types'
 
 export type Props = {

packages/richtext-slate/src/field/elements/relationship/Button/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useListDrawer, useTranslation } from '@payloadcms/ui'
+import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 import { ReactEditor, useSlate } from 'slate-react'
 

packages/richtext-slate/src/field/elements/relationship/Element/index.tsx

@@ -1,16 +1,14 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/types'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Button,
-  useConfig,
-  useDocumentDrawer,
-  useListDrawer,
-  usePayloadAPI,
-  useTranslation,
-} from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer'
+import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'
+import usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback, useReducer, useState } from 'react'
 import { Transforms } from 'slate'
 import { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'

packages/richtext-slate/src/field/elements/upload/Button/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useListDrawer, useTranslation } from '@payloadcms/ui'
+import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { Fragment, useCallback } from 'react'
 import { ReactEditor, useSlate } from 'slate-react'
 

packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx

@@ -1,23 +1,20 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/types'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
 import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Drawer,
-  Form,
-  FormSubmit,
-  RenderFields,
-  getFormState,
-  useAuth,
-  useConfig,
-  useDocumentInfo,
-  useLocale,
-  useTranslation,
-} from '@payloadcms/ui'
-import { FieldPathProvider } from '@payloadcms/ui/forms'
+import { Drawer } from '@payloadcms/ui/elements/Drawer'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { RenderFields } from '@payloadcms/ui/forms/RenderFields'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useLocale } from '@payloadcms/ui/providers/Locale'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
 import { deepCopyObject } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 import { Transforms } from 'slate'

packages/richtext-slate/src/field/elements/upload/Element/index.tsx

@@ -1,21 +1,18 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/types'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Button,
-  DrawerToggler,
-  FileGraphic,
-  useConfig,
-  useDocumentDrawer,
-  useDrawerSlug,
-  useListDrawer,
-  usePayloadAPI,
-  useThumbnail,
-  useTranslation,
-} from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer'
+import { DrawerToggler, useDrawerSlug } from '@payloadcms/ui/elements/Drawer'
+import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'
+import { File } from '@payloadcms/ui/graphics/File'
+import usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'
+import { useThumbnail } from '@payloadcms/ui/hooks/useThumbnail'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback, useReducer, useState } from 'react'
 import { Transforms } from 'slate'
 import { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'
@@ -150,7 +147,7 @@ const UploadElement: React.FC<Props & { enabledCollectionSlugs?: string[] }> = (
       <div className={`${baseClass}__card`}>
         <div className={`${baseClass}__topRow`}>
           <div className={`${baseClass}__thumbnail`}>
-            {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <FileGraphic />}
+            {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <File />}
           </div>
           <div className={`${baseClass}__topRowRightPanel`}>
             <div className={`${baseClass}__collectionLabel`}>

packages/richtext-slate/src/field/index.tsx

@@ -1,9 +1,10 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui/types'
 
-import { ShimmerEffect } from '@payloadcms/ui'
-import { useFieldPath } from '@payloadcms/ui/forms'
-import { useClientFunctions } from '@payloadcms/ui/providers'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+
+import { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'
 import React, { Suspense, lazy, useEffect, useState } from 'react'
 
 import type { RichTextPlugin } from '../types.js'
@@ -25,7 +26,7 @@ export const RichTextField: React.FC<
 > = (props) => {
   const { richTextComponentMap } = props
 
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
   const clientFunctions = useClientFunctions()
   const [hasLoadedPlugins, setHasLoadedPlugins] = useState(false)
 

packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx

@@ -1,5 +1,6 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui/types'
+
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 
 import React from 'react'
 

packages/richtext-slate/src/field/providers/ElementProvider.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui/types'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 import type { Element } from 'slate'
 
 import React from 'react'

packages/richtext-slate/src/field/providers/LeafButtonProvider.tsx

@@ -1,5 +1,6 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui/types'
+
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 
 import React from 'react'
 

packages/richtext-slate/src/field/providers/LeafProvider.tsx

@@ -1,5 +1,6 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui/types'
+
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 
 import React from 'react'
 

packages/richtext-slate/src/utilities/useSlatePlugin.tsx

@@ -1,12 +1,12 @@
 import type { Editor } from 'slate'
 
-import { useFieldPath } from '@payloadcms/ui/forms'
-import { useAddClientFunction } from '@payloadcms/ui/providers'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useAddClientFunction } from '@payloadcms/ui/providers/ClientFunction'
 
 type Plugin = (editor: Editor) => Editor
 
 export const useSlatePlugin = (key: string, plugin: Plugin) => {
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
 
   useAddClientFunction(`slatePlugin.${schemaPath}.${key}`, plugin)
 }

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

@@ -6,7 +6,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
 
-import type { Props as FormProps } from '../../forms/Form/index.js'
+import type { FormProps } from '../../forms/Form/index.js'
 
 import { useForm } from '../../forms/Form/context.js'
 import { Form } from '../../forms/Form/index.js'

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

@@ -10,7 +10,12 @@ import QueryString from 'qs'
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Context as FormContextType, GetDataByPath, Props, SubmitOptions } from './types.js'
+import type {
+  Context as FormContextType,
+  FormProps,
+  GetDataByPath,
+  SubmitOptions,
+} from './types.js'
 
 import { useDebouncedEffect } from '../../hooks/useDebouncedEffect.js'
 import useThrottledEffect from '../../hooks/useThrottledEffect.js'
@@ -41,7 +46,7 @@ import { mergeServerFormState } from './mergeServerFormState.js'
 
 const baseClass = 'form'
 
-export const Form: React.FC<Props> = (props) => {
+export const Form: React.FC<FormProps> = (props) => {
   const { id, collectionSlug, globalSlug } = useDocumentInfo()
 
   const {

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

@@ -8,7 +8,7 @@ export type Preferences = {
   [key: string]: unknown
 }
 
-export type Props = (
+export type FormProps = (
   | {
       action: (formData: FormData) => Promise<void>
     }