chore(ui): resolves self-referencing imports (#7707)

packages/payload/src/exports/shared.ts

@@ -61,6 +61,8 @@ export { setsAreEqual } from '../utilities/setsAreEqual.js'
 
 export { default as toKebabCase } from '../utilities/toKebabCase.js'
 
+export { unflatten } from '../utilities/unflatten.js'
+
 export { wait } from '../utilities/wait.js'
 
 export { default as wordBoundariesRegex } from '../utilities/wordBoundariesRegex.js'

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

@@ -1,16 +1,17 @@
 'use client'
-import { CloseMenuIcon, MenuIcon } from '@payloadcms/ui'
 import React from 'react'
 
 import { ChevronIcon } from '../../icons/Chevron/index.js'
+import { CloseMenuIcon } from '../../icons/CloseMenu/index.js'
+import { MenuIcon } from '../../icons/Menu/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'
 
 const baseClass = 'hamburger'
 
 export const Hamburger: React.FC<{
-  closeIcon?: 'collapse' | 'x'
-  isActive?: boolean
+  readonly closeIcon?: 'collapse' | 'x'
+  readonly isActive?: boolean
 }> = (props) => {
   const { t } = useTranslation()
   const { closeIcon = 'x', isActive = false } = props

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

@@ -9,11 +9,10 @@ import AnimateHeightImport from 'react-animate-height'
 const AnimateHeight = (AnimateHeightImport.default ||
   AnimateHeightImport) as typeof AnimateHeightImport.default
 
-import { useListInfo } from '@payloadcms/ui'
-
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js'
 import { ChevronIcon } from '../../icons/Chevron/index.js'
 import { SearchIcon } from '../../icons/Search/index.js'
+import { useListInfo } from '../../providers/ListInfo/index.js'
 import { useListQuery } from '../../providers/ListQuery/index.js'
 import { useSearchParams } from '../../providers/SearchParams/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
@@ -32,13 +31,13 @@ import './index.scss'
 const baseClass = 'list-controls'
 
 export type ListControlsProps = {
-  collectionConfig: ClientCollectionConfig
-  enableColumns?: boolean
-  enableSort?: boolean
-  fields: ClientField[]
-  handleSearchChange?: (search: string) => void
-  handleSortChange?: (sort: string) => void
-  handleWhereChange?: (where: Where) => void
+  readonly collectionConfig: ClientCollectionConfig
+  readonly enableColumns?: boolean
+  readonly enableSort?: boolean
+  readonly fields: ClientField[]
+  readonly handleSearchChange?: (search: string) => void
+  readonly handleSortChange?: (sort: string) => void
+  readonly handleWhereChange?: (where: Where) => void
 }
 
 /**

packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx

@@ -1,11 +1,11 @@
 'use client'
 import type { DropdownIndicatorProps } from 'react-select'
 
-import { ChevronIcon } from '@payloadcms/ui'
 import React, { type JSX } from 'react'
 
 import type { Option as OptionType } from '../types.js'
 
+import { ChevronIcon } from '../../../icons/Chevron/index.js'
 import './index.scss'
 
 const baseClass = 'dropdown-indicator'

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

@@ -8,10 +8,9 @@ import { useTranslation } from '../../providers/Translation/index.js'
 import { StepNavProvider, useStepNav } from './context.js'
 import './index.scss'
 export { SetStepNav } from './SetStepNav.js'
-import { PayloadIcon } from '@payloadcms/ui'
-
 import type { StepNavItem } from './types.js'
 
+import { PayloadIcon } from '../../graphics/Icon/index.js'
 import { RenderComponent } from '../../providers/Config/RenderComponent.js'
 
 const baseClass = 'step-nav'

packages/ui/src/elements/Table/DefaultCell/fields/Date/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { DateFieldClient, DefaultCellComponentProps } from 'payload'
 
-import { useConfig } from '@payloadcms/ui'
 import React from 'react'
 
+import { useConfig } from '../../../../../providers/Config/index.js'
 import { useTranslation } from '../../../../../providers/Translation/index.js'
 import { formatDate } from '../../../../../utilities/formatDate.js'
 

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

@@ -6,12 +6,12 @@ import type {
   StaticLabel,
 } from 'payload'
 
-import { DefaultCell } from '@payloadcms/ui'
 import React from 'react'
 
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js'
 import type { Column } from '../Table/index.js'
 
+import { DefaultCell } from '../../elements/Table/DefaultCell/index.js'
 import { FieldLabel } from '../../fields/FieldLabel/index.js'
 import { flattenFieldMap } from '../../utilities/flattenFieldMap.js'
 import { SelectAll } from '../SelectAll/index.js'

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

@@ -1,16 +1,17 @@
 'use client'
 import type { FormState, SanitizedCollectionConfig, UploadEdits } from 'payload'
 
-import { useForm, useUploadEdits } from '@payloadcms/ui'
 import { isImage, reduceFieldsToValues } from 'payload/shared'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
 import { FieldError } from '../../fields/FieldError/index.js'
 import { fieldBaseClass } from '../../fields/shared/index.js'
+import { useForm } from '../../forms/Form/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
+import { useUploadEdits } from '../../providers/UploadEdits/index.js'
 import { Button } from '../Button/index.js'
 import { Drawer, DrawerToggler } from '../Drawer/index.js'
 import { Dropzone } from '../Dropzone/index.js'
@@ -33,10 +34,10 @@ const validate = (value) => {
 }
 
 type UploadActionsArgs = {
-  customActions?: React.ReactNode[]
-  enableAdjustments: boolean
-  enablePreviewSizes: boolean
-  mimeType: string
+  readonly customActions?: React.ReactNode[]
+  readonly enableAdjustments: boolean
+  readonly enablePreviewSizes: boolean
+  readonly mimeType: string
 }
 
 export const UploadActions = ({
@@ -77,11 +78,11 @@ export const UploadActions = ({
 }
 
 export type UploadProps = {
-  collectionSlug: string
-  customActions?: React.ReactNode[]
-  initialState?: FormState
-  onChange?: (file?: File) => void
-  uploadConfig: SanitizedCollectionConfig['upload']
+  readonly collectionSlug: string
+  readonly customActions?: React.ReactNode[]
+  readonly initialState?: FormState
+  readonly onChange?: (file?: File) => void
+  readonly uploadConfig: SanitizedCollectionConfig['upload']
 }
 
 export const Upload: React.FC<UploadProps> = (props) => {
@@ -265,7 +266,9 @@ export const Upload: React.FC<UploadProps> = (props) => {
                 <div className={`${baseClass}__add-file-wrap`}>
                   <button
                     className={`${baseClass}__add-file`}
-                    onClick={handleUrlSubmit}
+                    onClick={() => {
+                      void handleUrlSubmit()
+                    }}
                     type="button"
                   >
                     {t('upload:addFile')}

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

@@ -1,7 +1,6 @@
 'use client'
 import type { PasswordFieldValidation, PayloadRequest } from 'payload'
 
-import { useConfig, useLocale, useTranslation } from '@payloadcms/ui'
 import { password } from 'payload/shared'
 import React, { useCallback } from 'react'
 
@@ -9,6 +8,9 @@ import type { PasswordFieldProps } from './types.js'
 
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import { isFieldRTL } from '../shared/index.js'
 import './index.scss'
 import { PasswordInput } from './input.js'

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

@@ -2,10 +2,11 @@
 
 import type { ClientField, FieldPermissions } from 'payload'
 
-import { HiddenField, useFieldComponents } from '@payloadcms/ui'
 import React from 'react'
 
+import { HiddenField } from '../../fields/Hidden/index.js'
 import { RenderComponent } from '../../providers/Config/RenderComponent.js'
+import { useFieldComponents } from '../../providers/FieldComponents/index.js'
 import { useOperation } from '../../providers/Operation/index.js'
 import { FieldPropsProvider, useFieldProps } from '../FieldPropsProvider/index.js'
 

packages/ui/src/graphics/Account/index.tsx

@@ -2,20 +2,20 @@
 import { usePathname } from 'next/navigation.js'
 import React from 'react'
 
+import { useAuth } from '../../providers/Auth/index.js'
 import { RenderComponent } from '../../providers/Config/RenderComponent.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { formatAdminURL } from '../../utilities/formatAdminURL.js'
-import { GravatarAccountIcon } from './Gravatar/index.js'
-import { useAuth } from '@payloadcms/ui'
 import { DefaultAccountIcon } from './Default/index.js'
+import { GravatarAccountIcon } from './Gravatar/index.js'
 
 export const Account = () => {
   const {
     config: {
       admin: {
         avatar,
-        routes: { account: accountRoute },
         components: { Avatar: CustomAvatar },
+        routes: { account: accountRoute },
       },
       routes: { admin: adminRoute },
     },

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

@@ -1,9 +1,10 @@
 'use client'
 import type { MappedComponent } from 'payload'
 
-import { useConfig } from '@payloadcms/ui'
 import React, { createContext, useContext, useEffect, useState } from 'react'
 
+import { useConfig } from '../../providers/Config/index.js'
+
 export { SetViewActions } from './SetViewActions/index.js'
 
 type ActionsContextType = {
@@ -18,7 +19,9 @@ const ActionsContext = createContext<ActionsContextType>({
 
 export const useActions = () => useContext(ActionsContext)
 
-export const ActionsProvider = ({ children }) => {
+export const ActionsProvider: React.FC<{
+  readonly children: React.ReactNode
+}> = ({ children }) => {
   const [viewActions, setViewActions] = useState([])
   const [adminActions, setAdminActions] = useState([])
 

packages/ui/src/utilities/reduceFieldsToValuesWithValidation.ts

@@ -1,6 +1,6 @@
 import type { Data, FormState } from 'payload'
 
-import { unflatten as flatleyUnflatten } from '../../../payload/src/utilities/unflatten.js'
+import { unflatten as flatleyUnflatten } from 'payload/shared'
 
 type ReturnType = {
   data: Data