chore(ui): more elements default fixes

packages/next/src/views/Versions/buildColumns.tsx

@@ -6,7 +6,7 @@ import type {
   SanitizedGlobalConfig,
 } from 'payload/types'
 
-import SortColumn from '@payloadcms/ui/elements/SortColumn'
+import { SortColumn } from '@payloadcms/ui/elements/SortColumn'
 import React from 'react'
 
 import { AutosaveCell } from './cells/AutosaveCell/index.js'

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

@@ -25,7 +25,7 @@ export type Props = {
   publishedDocUpdatedAt: string
 }
 
-const Autosave: React.FC<Props> = ({
+export const Autosave: React.FC<Props> = ({
   id,
   collection,
   global: globalDoc,
@@ -175,5 +175,3 @@ const Autosave: React.FC<Props> = ({
     </div>
   )
 }
-
-export default Autosave

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

@@ -29,7 +29,7 @@ export type Props = {
   useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']
 }
 
-const DeleteDocument: React.FC<Props> = (props) => {
+export const DeleteDocument: React.FC<Props> = (props) => {
   const { id, buttonId, collectionSlug, singularLabel, title: titleFromProps } = props
   const { Modal, useModal } = facelessUIImport
 
@@ -159,5 +159,3 @@ const DeleteDocument: React.FC<Props> = (props) => {
 
   return null
 }
-
-export default DeleteDocument

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

@@ -143,5 +143,3 @@ export const DeleteMany: React.FC<Props> = (props) => {
     </React.Fragment>
   )
 }
-
-export default DeleteMany

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

@@ -7,8 +7,8 @@ import React, { Fragment } from 'react'
 import { useConfig } from '../../providers/Config/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { formatDate } from '../../utilities/formatDate.js'
-import Autosave from '../Autosave/index.js'
-import DeleteDocument from '../DeleteDocument/index.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 { PopupList } from '../Popup/index.js'
@@ -17,7 +17,7 @@ import { PreviewButton } from '../PreviewButton/index.js'
 import { Publish } from '../Publish/index.js'
 import { Save } from '../Save/index.js'
 import { SaveDraft } from '../SaveDraft/index.js'
-import Status from '../Status/index.js'
+import { Status } from '../Status/index.js'
 import './index.scss'
 
 const baseClass = 'doc-controls'

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

@@ -23,7 +23,7 @@ export type FileDetailsProps = {
   uploadConfig: SanitizedCollectionConfig['upload']
 }
 
-const FileDetails: React.FC<FileDetailsProps> = (props) => {
+export const FileDetails: React.FC<FileDetailsProps> = (props) => {
   const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } =
     props
 
@@ -68,5 +68,3 @@ const FileDetails: React.FC<FileDetailsProps> = (props) => {
     </div>
   )
 }
-
-export default FileDetails

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

@@ -18,7 +18,7 @@ import { DeleteMany } from '../DeleteMany/index.js'
 import { EditMany } from '../EditMany/index.js'
 import { Pill } from '../Pill/index.js'
 import { PublishMany } from '../PublishMany/index.js'
-import SearchFilter from '../SearchFilter/index.js'
+import { SearchFilter } from '../SearchFilter/index.js'
 import { UnpublishMany } from '../UnpublishMany/index.js'
 import { WhereBuilder } from '../WhereBuilder/index.js'
 import validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'

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

@@ -24,7 +24,7 @@ import { LoadingOverlay } from '../Loading/index.js'
 import { Pill } from '../Pill/index.js'
 import { ReactSelect } from '../ReactSelect/index.js'
 import { TableColumnsProvider } from '../TableColumns/index.js'
-import ViewDescription from '../ViewDescription/index.js'
+import { ViewDescription } from '../ViewDescription/index.js'
 import { baseClass } from './index.js'
 
 const hoistQueryParamsToAnd = (where: Where, queryParams: Where) => {

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

@@ -81,4 +81,3 @@ export const useLoadingOverlay = (): LoadingOverlayContext => {
 
   return contextHook
 }
-export default Context

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

@@ -22,7 +22,7 @@ import './index.scss'
 
 const baseClass = 'search-filter'
 
-const SearchFilter: React.FC<SearchFilterProps> = (props) => {
+export const SearchFilter: React.FC<SearchFilterProps> = (props) => {
   const {
     fieldLabel = 'ID',
     fieldName = 'id',
@@ -104,5 +104,3 @@ const SearchFilter: React.FC<SearchFilterProps> = (props) => {
     </div>
   )
 }
-
-export default SearchFilter

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

@@ -83,5 +83,3 @@ export const SortColumn: React.FC<SortColumnProps> = (props) => {
     </div>
   )
 }
-
-export default SortColumn

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

@@ -23,7 +23,7 @@ import './index.scss'
 
 const baseClass = 'sort-complex'
 
-const SortComplex: React.FC<SortComplexProps> = (props) => {
+export const SortComplex: React.FC<SortComplexProps> = (props) => {
   const { collection, handleChange, modifySearchQuery = true } = props
 
   const router = useRouter()
@@ -98,5 +98,3 @@ const SortComplex: React.FC<SortComplexProps> = (props) => {
     </div>
   )
 }
-
-export default SortComplex

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

@@ -15,7 +15,7 @@ import './index.scss'
 
 const baseClass = 'status'
 
-const Status: React.FC = () => {
+export const Status: React.FC = () => {
   const { Modal, useModal } = facelessUIImport
 
   const {
@@ -207,5 +207,3 @@ const Status: React.FC = () => {
 
   return null
 }
-
-export default Status

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

@@ -17,7 +17,7 @@ const baseClass = 'stay-logged-in'
 
 const modalSlug = 'stay-logged-in'
 
-const StayLoggedInModal: React.FC<StayLoggedInProps> = (props) => {
+export const StayLoggedInModal: React.FC<StayLoggedInProps> = (props) => {
   const { Modal, useModal } = facelessUIImport
 
   const { refreshCookie } = props
@@ -60,5 +60,3 @@ const StayLoggedInModal: React.FC<StayLoggedInProps> = (props) => {
     </Modal>
   )
 }
-
-export default StayLoggedInModal

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

@@ -15,7 +15,7 @@ import { Button } from '../Button/index.js'
 import { Drawer, DrawerToggler } from '../Drawer/index.js'
 import { Dropzone } from '../Dropzone/index.js'
 import { EditUpload } from '../EditUpload/index.js'
-import FileDetails from '../FileDetails/index.js'
+import { FileDetails } from '../FileDetails/index.js'
 import { PreviewSizes } from '../PreviewSizes/index.js'
 import { Thumbnail } from '../Thumbnail/index.js'
 import './index.scss'

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

@@ -19,7 +19,7 @@ export function isComponent(description: Description): description is Descriptio
   return React.isValidElement(description)
 }
 
-const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {
+export const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {
   const { i18n } = useTranslation()
   const { description } = props
 
@@ -38,5 +38,3 @@ const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {
 
   return null
 }
-
-export default ViewDescription

packages/ui/src/elements/WhereBuilder/Condition/Number/index.tsx

@@ -7,7 +7,7 @@ import './index.scss'
 
 const baseClass = 'condition-value-number'
 
-const NumberField: React.FC<Props> = ({ disabled, onChange, value }) => {
+export const NumberField: React.FC<Props> = ({ disabled, onChange, value }) => {
   const { t } = useTranslation()
   return (
     <input
@@ -20,5 +20,3 @@ const NumberField: React.FC<Props> = ({ disabled, onChange, value }) => {
     />
   )
 }
-
-export default NumberField

packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx

@@ -16,7 +16,7 @@ const baseClass = 'condition-value-relationship'
 
 const maxResultsPerRequest = 10
 
-const RelationshipField: React.FC<Props> = (props) => {
+export const RelationshipField: React.FC<Props> = (props) => {
   const { admin: { isSortable } = {}, disabled, hasMany, onChange, relationTo, value } = props
 
   const {
@@ -303,5 +303,3 @@ const RelationshipField: React.FC<Props> = (props) => {
     </div>
   )
 }
-
-export default RelationshipField

packages/ui/src/elements/WhereBuilder/Condition/index.tsx

@@ -17,23 +17,24 @@ import { useDebounce } from '../../../hooks/useDebounce.js'
 import { Button } from '../../Button/index.js'
 import { ReactSelect } from '../../ReactSelect/index.js'
 import { DateField } from './Date/index.js'
-import Number from './Number/index.js'
-import Relationship from './Relationship/index.js'
+import { NumberField } from './Number/index.js'
+import { RelationshipField } from './Relationship/index.js'
 import { Select } from './Select/index.js'
 import Text from './Text/index.js'
 import './index.scss'
 
-const valueFields = {
-  DateField,
-  Number,
-  Relationship,
+type ComponentType = 'Date' | 'Number' | 'Relationship' | 'Select' | 'Text'
+const valueFields: Record<ComponentType, React.FC> = {
+  Date: DateField,
+  Number: NumberField,
+  Relationship: RelationshipField,
   Select,
   Text,
 }
 
 const baseClass = 'condition'
 
-const Condition: React.FC<Props> = (props) => {
+export const Condition: React.FC<Props> = (props) => {
   const { andIndex, dispatch, fields, orIndex, value } = props
   const fieldName = Object.keys(value)[0]
   const [activeField, setActiveField] = useState<FieldCondition>(() =>
@@ -171,5 +172,3 @@ const Condition: React.FC<Props> = (props) => {
     </div>
   )
 }
-
-export default Condition

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

@@ -9,7 +9,7 @@ import { useConfig } from '../../providers/Config/index.js'
 import { useSearchParams } from '../../providers/SearchParams/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { Button } from '../Button/index.js'
-import Condition from './Condition/index.js'
+import { Condition } from './Condition/index.js'
 import fieldTypes from './field-types.js'
 import './index.scss'
 import reducer from './reducer.js'

packages/ui/src/fields/Upload/Input.tsx

@@ -11,7 +11,7 @@ import type { UploadFieldProps } from './types.js'
 
 import { Button } from '../../elements/Button/index.js'
 import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'
-import FileDetails from '../../elements/FileDetails/index.js'
+import { FileDetails } from '../../elements/FileDetails/index.js'
 import { useListDrawer } from '../../elements/ListDrawer/index.js'
 import { Label as LabelComp } from '../../forms/Label/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'