From e734d51760095743e15664ba8adef9c1ded00f56 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Fri, 26 Jul 2024 13:50:23 -0400
Subject: [PATCH] chore(ui)!: update the names of internal components so that
 they respect eslint rules (#7362)

So `_Upload` becomes `UploadComponent` which doesnt break the naming
convention of react components and **we no longer export these internal
components**
---
 .../eslint-config/configs/react/index.mjs     |  2 +-
 packages/ui/src/fields/Blocks/index.tsx       |  6 +-
 packages/ui/src/fields/Checkbox/index.tsx     |  4 +-
 packages/ui/src/fields/Code/index.tsx         |  4 +-
 packages/ui/src/fields/Collapsible/index.tsx  |  5 +-
 packages/ui/src/fields/DateTime/index.tsx     |  4 +-
 packages/ui/src/fields/Email/index.tsx        |  4 +-
 packages/ui/src/fields/Group/index.tsx        |  4 +-
 packages/ui/src/fields/Hidden/index.tsx       |  4 +-
 packages/ui/src/fields/JSON/index.tsx         |  4 +-
 packages/ui/src/fields/Number/index.tsx       |  4 +-
 packages/ui/src/fields/Password/index.tsx     |  4 +-
 packages/ui/src/fields/Point/index.tsx        |  8 +-
 packages/ui/src/fields/RadioGroup/index.tsx   |  4 +-
 packages/ui/src/fields/Relationship/index.tsx |  4 +-
 packages/ui/src/fields/Row/index.tsx          |  4 +-
 packages/ui/src/fields/Select/index.tsx       |  4 +-
 packages/ui/src/fields/Tabs/index.tsx         | 78 +++++++++----------
 packages/ui/src/fields/Text/index.tsx         |  4 +-
 packages/ui/src/fields/Textarea/index.tsx     |  4 +-
 packages/ui/src/fields/Upload/index.tsx       |  4 +-
 21 files changed, 84 insertions(+), 79 deletions(-)

diff --git a/packages/eslint-config/configs/react/index.mjs b/packages/eslint-config/configs/react/index.mjs
index 61905db8a..abafc59e8 100644
--- a/packages/eslint-config/configs/react/index.mjs
+++ b/packages/eslint-config/configs/react/index.mjs
@@ -39,7 +39,7 @@ export const index = deepMerge(
       },
     },
     rules: {
-      'react-hooks/rules-of-hooks': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
     },
   },
 )
diff --git a/packages/ui/src/fields/Blocks/index.tsx b/packages/ui/src/fields/Blocks/index.tsx
index 2ecdb1dee..a422afcfd 100644
--- a/packages/ui/src/fields/Blocks/index.tsx
+++ b/packages/ui/src/fields/Blocks/index.tsx
@@ -46,7 +46,7 @@ export type BlocksFieldProps = {
   width?: string
 } & FormFieldBase
 
-const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
+const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
   const { i18n, t } = useTranslation()
 
   const {
@@ -278,6 +278,7 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
                   {(draggableSortableItemProps) => (
                     <BlockRow
                       {...draggableSortableItemProps}
+                      // eslint-disable-next-line @typescript-eslint/no-misused-promises
                       addRow={addRow}
                       block={blockToRender}
                       blocks={blocks}
@@ -341,6 +342,7 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
             </Button>
           </DrawerToggler>
           <BlocksDrawer
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
             addRow={addRow}
             addRowIndex={rows?.length || 0}
             blocks={blocks}
@@ -353,4 +355,4 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
   )
 }
 
-export const BlocksField = withCondition(_BlocksField)
+export const BlocksField = withCondition(BlocksFieldComponent)
diff --git a/packages/ui/src/fields/Checkbox/index.tsx b/packages/ui/src/fields/Checkbox/index.tsx
index 17433bfba..5fdb7f713 100644
--- a/packages/ui/src/fields/Checkbox/index.tsx
+++ b/packages/ui/src/fields/Checkbox/index.tsx
@@ -22,7 +22,7 @@ const baseClass = 'checkbox'
 
 export { CheckboxFieldProps, CheckboxInput, type CheckboxInputProps }
 
-const _CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
+const CheckboxFieldComponent: React.FC<CheckboxFieldProps> = (props) => {
   const {
     id,
     name,
@@ -124,4 +124,4 @@ const _CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
   )
 }
 
-export const CheckboxField = withCondition(_CheckboxField)
+export const CheckboxField = withCondition(CheckboxFieldComponent)
diff --git a/packages/ui/src/fields/Code/index.tsx b/packages/ui/src/fields/Code/index.tsx
index 01c1be9a1..c97168ffa 100644
--- a/packages/ui/src/fields/Code/index.tsx
+++ b/packages/ui/src/fields/Code/index.tsx
@@ -30,7 +30,7 @@ const prismToMonacoLanguageMap = {
 
 const baseClass = 'code-field'
 
-const _CodeField: React.FC<CodeFieldProps> = (props) => {
+const CodeFieldComponent: React.FC<CodeFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -110,4 +110,4 @@ const _CodeField: React.FC<CodeFieldProps> = (props) => {
   )
 }
 
-export const CodeField = withCondition(_CodeField)
+export const CodeField = withCondition(CodeFieldComponent)
diff --git a/packages/ui/src/fields/Collapsible/index.tsx b/packages/ui/src/fields/Collapsible/index.tsx
index 4756d6364..072ac604e 100644
--- a/packages/ui/src/fields/Collapsible/index.tsx
+++ b/packages/ui/src/fields/Collapsible/index.tsx
@@ -30,7 +30,7 @@ export type CollapsibleFieldProps = {
   width?: string
 } & FormFieldBase
 
-const _CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {
+const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
   const {
     CustomDescription,
     CustomLabel,
@@ -145,6 +145,7 @@ const _CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {
             </div>
           }
           initCollapsed={collapsedOnMount}
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onToggle={onToggle}
         >
           <RenderFields
@@ -164,4 +165,4 @@ const _CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {
   )
 }
 
-export const CollapsibleField = withCondition(_CollapsibleField)
+export const CollapsibleField = withCondition(CollapsibleFieldComponent)
diff --git a/packages/ui/src/fields/DateTime/index.tsx b/packages/ui/src/fields/DateTime/index.tsx
index 0753d41eb..f32187d21 100644
--- a/packages/ui/src/fields/DateTime/index.tsx
+++ b/packages/ui/src/fields/DateTime/index.tsx
@@ -28,7 +28,7 @@ export type DateFieldProps = {
   width?: string
 } & FormFieldBase
 
-const _DateTimeField: React.FC<DateFieldProps> = (props) => {
+const DateTimeFieldComponent: React.FC<DateFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -116,4 +116,4 @@ const _DateTimeField: React.FC<DateFieldProps> = (props) => {
   )
 }
 
-export const DateTimeField = withCondition(_DateTimeField)
+export const DateTimeField = withCondition(DateTimeFieldComponent)
diff --git a/packages/ui/src/fields/Email/index.tsx b/packages/ui/src/fields/Email/index.tsx
index 5be3f186e..330974011 100644
--- a/packages/ui/src/fields/Email/index.tsx
+++ b/packages/ui/src/fields/Email/index.tsx
@@ -24,7 +24,7 @@ export type EmailFieldProps = {
   width?: string
 } & FormFieldBase
 
-const _EmailField: React.FC<EmailFieldProps> = (props) => {
+const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -107,4 +107,4 @@ const _EmailField: React.FC<EmailFieldProps> = (props) => {
   )
 }
 
-export const EmailField = withCondition(_EmailField)
+export const EmailField = withCondition(EmailFieldComponent)
diff --git a/packages/ui/src/fields/Group/index.tsx b/packages/ui/src/fields/Group/index.tsx
index 06138afb6..d10a07e90 100644
--- a/packages/ui/src/fields/Group/index.tsx
+++ b/packages/ui/src/fields/Group/index.tsx
@@ -35,7 +35,7 @@ export type GroupFieldProps = {
   width?: string
 } & FormFieldBase
 
-export const _GroupField: React.FC<GroupFieldProps> = (props) => {
+const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
   const {
     CustomDescription,
     CustomLabel,
@@ -124,4 +124,4 @@ export const _GroupField: React.FC<GroupFieldProps> = (props) => {
 
 export { GroupProvider, useGroup }
 
-export const GroupField = withCondition(_GroupField)
+export const GroupField = withCondition(GroupFieldComponent)
diff --git a/packages/ui/src/fields/Hidden/index.tsx b/packages/ui/src/fields/Hidden/index.tsx
index c525d9812..e07d27869 100644
--- a/packages/ui/src/fields/Hidden/index.tsx
+++ b/packages/ui/src/fields/Hidden/index.tsx
@@ -19,7 +19,7 @@ export type HiddenInputFieldProps = {
  * This is mainly used to save a value on the form that is not visible to the user.
  * For example, this sets the `ìd` property of a block in the Blocks field.
  */
-const _HiddenField: React.FC<HiddenInputFieldProps> = (props) => {
+const HiddenFieldComponent: React.FC<HiddenInputFieldProps> = (props) => {
   const {
     name,
     disableModifyingForm = true,
@@ -51,4 +51,4 @@ const _HiddenField: React.FC<HiddenInputFieldProps> = (props) => {
   )
 }
 
-export const HiddenField = withCondition(_HiddenField)
+export const HiddenField = withCondition(HiddenFieldComponent)
diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx
index 68325b994..6bc10d2a7 100644
--- a/packages/ui/src/fields/JSON/index.tsx
+++ b/packages/ui/src/fields/JSON/index.tsx
@@ -26,7 +26,7 @@ export type JSONFieldProps = {
   width?: string
 } & FormFieldBase
 
-const _JSONField: React.FC<JSONFieldProps> = (props) => {
+const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -160,4 +160,4 @@ const _JSONField: React.FC<JSONFieldProps> = (props) => {
   )
 }
 
-export const JSONField = withCondition(_JSONField)
+export const JSONField = withCondition(JSONFieldComponent)
diff --git a/packages/ui/src/fields/Number/index.tsx b/packages/ui/src/fields/Number/index.tsx
index bd98e3879..026bc8853 100644
--- a/packages/ui/src/fields/Number/index.tsx
+++ b/packages/ui/src/fields/Number/index.tsx
@@ -32,7 +32,7 @@ export type NumberFieldProps = {
   width?: string
 } & FormFieldBase
 
-const _NumberField: React.FC<NumberFieldProps> = (props) => {
+const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -223,4 +223,4 @@ const _NumberField: React.FC<NumberFieldProps> = (props) => {
   )
 }
 
-export const NumberField = withCondition(_NumberField)
+export const NumberField = withCondition(NumberFieldComponent)
diff --git a/packages/ui/src/fields/Password/index.tsx b/packages/ui/src/fields/Password/index.tsx
index 2baf4165a..161d4fe8c 100644
--- a/packages/ui/src/fields/Password/index.tsx
+++ b/packages/ui/src/fields/Password/index.tsx
@@ -25,7 +25,7 @@ export type PasswordFieldProps = {
   width?: string
 } & FormFieldBase
 
-const _PasswordField: React.FC<PasswordFieldProps> = (props) => {
+const PasswordFieldComponent: React.FC<PasswordFieldProps> = (props) => {
   const {
     name,
     CustomError,
@@ -97,4 +97,4 @@ const _PasswordField: React.FC<PasswordFieldProps> = (props) => {
   )
 }
 
-export const PasswordField = withCondition(_PasswordField)
+export const PasswordField = withCondition(PasswordFieldComponent)
diff --git a/packages/ui/src/fields/Point/index.tsx b/packages/ui/src/fields/Point/index.tsx
index 9353688bf..1a568a737 100644
--- a/packages/ui/src/fields/Point/index.tsx
+++ b/packages/ui/src/fields/Point/index.tsx
@@ -27,7 +27,7 @@ export type PointFieldProps = {
   width?: string
 } & FormFieldBase
 
-export const _PointField: React.FC<PointFieldProps> = (props) => {
+const PointFieldComponent: React.FC<PointFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -122,6 +122,8 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
           )}
           <div className="input-wrapper">
             {BeforeInput}
+            {/* disable eslint rule because the label is dynamic */}
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             <input
               disabled={readOnly}
               id={`field-longitude-${path.replace(/\./g, '__')}`}
@@ -144,6 +146,8 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
           <div className="input-wrapper">
             <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
             {BeforeInput}
+            {/* disable eslint rule because the label is dynamic */}
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             <input
               disabled={readOnly}
               id={`field-latitude-${path.replace(/\./g, '__')}`}
@@ -167,4 +171,4 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
   )
 }
 
-export const PointField = withCondition(_PointField)
+export const PointField = withCondition(PointFieldComponent)
diff --git a/packages/ui/src/fields/RadioGroup/index.tsx b/packages/ui/src/fields/RadioGroup/index.tsx
index 926c00146..e1660a0a4 100644
--- a/packages/ui/src/fields/RadioGroup/index.tsx
+++ b/packages/ui/src/fields/RadioGroup/index.tsx
@@ -32,7 +32,7 @@ export type RadioFieldProps = {
 
 export type OnChange<T = string> = (value: T) => void
 
-const _RadioGroupField: React.FC<RadioFieldProps> = (props) => {
+const RadioGroupFieldComponent: React.FC<RadioFieldProps> = (props) => {
   const {
     name,
     CustomDescription,
@@ -155,4 +155,4 @@ const _RadioGroupField: React.FC<RadioFieldProps> = (props) => {
   )
 }
 
-export const RadioGroupField = withCondition(_RadioGroupField)
+export const RadioGroupField = withCondition(RadioGroupFieldComponent)
diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
index e9c6b08b9..4823b16eb 100644
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -35,7 +35,7 @@ const baseClass = 'relationship'
 
 export { RelationshipFieldProps }
 
-const _RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
+const RelationshipFieldComponent: React.FC<RelationshipFieldProps> = (props) => {
   const {
     name,
     CustomDescription,
@@ -606,4 +606,4 @@ const _RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
   )
 }
 
-export const RelationshipField = withCondition(_RelationshipField)
+export const RelationshipField = withCondition(RelationshipFieldComponent)
diff --git a/packages/ui/src/fields/Row/index.tsx b/packages/ui/src/fields/Row/index.tsx
index ef40270e2..45af47741 100644
--- a/packages/ui/src/fields/Row/index.tsx
+++ b/packages/ui/src/fields/Row/index.tsx
@@ -14,7 +14,7 @@ export { RowProvider, useRow }
 
 const baseClass = 'row'
 
-export const _RowField: React.FC<RowFieldProps> = (props) => {
+const RowFieldComponent: React.FC<RowFieldProps> = (props) => {
   const { className, fieldMap, forceRender = false } = props
 
   const { indexPath, path, readOnly, schemaPath, siblingPermissions } = useFieldProps()
@@ -36,4 +36,4 @@ export const _RowField: React.FC<RowFieldProps> = (props) => {
   )
 }
 
-export const RowField = withCondition(_RowField)
+export const RowField = withCondition(RowFieldComponent)
diff --git a/packages/ui/src/fields/Select/index.tsx b/packages/ui/src/fields/Select/index.tsx
index 906265426..ea3647c3f 100644
--- a/packages/ui/src/fields/Select/index.tsx
+++ b/packages/ui/src/fields/Select/index.tsx
@@ -36,7 +36,7 @@ const formatOptions = (options: Option[]): OptionObject[] =>
     } as OptionObject
   })
 
-const _SelectField: React.FC<SelectFieldProps> = (props) => {
+const SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -134,6 +134,6 @@ const _SelectField: React.FC<SelectFieldProps> = (props) => {
   )
 }
 
-export const SelectField = withCondition(_SelectField)
+export const SelectField = withCondition(SelectFieldComponent)
 
 export { SelectInput, type SelectInputProps }
diff --git a/packages/ui/src/fields/Tabs/index.tsx b/packages/ui/src/fields/Tabs/index.tsx
index fbbbe9a14..dc77a1bea 100644
--- a/packages/ui/src/fields/Tabs/index.tsx
+++ b/packages/ui/src/fields/Tabs/index.tsx
@@ -33,7 +33,7 @@ export type TabsFieldProps = {
   width?: string
 } & FormFieldBase
 
-const _TabsField: React.FC<TabsFieldProps> = (props) => {
+const TabsFieldComponent: React.FC<TabsFieldProps> = (props) => {
   const {
     name,
     CustomDescription,
@@ -142,7 +142,7 @@ const _TabsField: React.FC<TabsFieldProps> = (props) => {
                   isActive={activeTabIndex === tabIndex}
                   key={tabIndex}
                   parentPath={path}
-                  setIsActive={() => handleTabChange(tabIndex)}
+                  setIsActive={() => void handleTabChange(tabIndex)}
                   tab={tab}
                 />
               )
@@ -151,43 +151,41 @@ const _TabsField: React.FC<TabsFieldProps> = (props) => {
         </div>
         <div className={`${baseClass}__content-wrap`}>
           {activeTabConfig && (
-            <React.Fragment>
-              <div
-                className={[
-                  `${baseClass}__tab`,
-                  activeTabConfig.label &&
-                    `${baseClass}__tabConfigLabel-${toKebabCase(
-                      getTranslation(activeTabConfig.label, i18n),
-                    )}`,
-                ]
-                  .filter(Boolean)
-                  .join(' ')}
-              >
-                {CustomDescription ? (
-                  CustomDescription
-                ) : (
-                  <FieldDescription {...(descriptionProps || {})} />
-                )}
-                <RenderFields
-                  fieldMap={activeTabConfig.fieldMap}
-                  forceRender={forceRender}
-                  key={
-                    activeTabConfig.label
-                      ? getTranslation(activeTabConfig.label, i18n)
-                      : activeTabConfig['name']
-                  }
-                  margins="small"
-                  path={generateTabPath()}
-                  permissions={
-                    'name' in activeTabConfig && siblingPermissions?.[activeTabConfig.name]?.fields
-                      ? siblingPermissions[activeTabConfig.name]?.fields
-                      : siblingPermissions
-                  }
-                  readOnly={readOnly}
-                  schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}
-                />
-              </div>
-            </React.Fragment>
+            <div
+              className={[
+                `${baseClass}__tab`,
+                activeTabConfig.label &&
+                  `${baseClass}__tabConfigLabel-${toKebabCase(
+                    getTranslation(activeTabConfig.label, i18n),
+                  )}`,
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {CustomDescription ? (
+                CustomDescription
+              ) : (
+                <FieldDescription {...(descriptionProps || {})} />
+              )}
+              <RenderFields
+                fieldMap={activeTabConfig.fieldMap}
+                forceRender={forceRender}
+                key={
+                  activeTabConfig.label
+                    ? getTranslation(activeTabConfig.label, i18n)
+                    : activeTabConfig['name']
+                }
+                margins="small"
+                path={generateTabPath()}
+                permissions={
+                  'name' in activeTabConfig && siblingPermissions?.[activeTabConfig.name]?.fields
+                    ? siblingPermissions[activeTabConfig.name]?.fields
+                    : siblingPermissions
+                }
+                readOnly={readOnly}
+                schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}
+              />
+            </div>
           )}
         </div>
       </TabsProvider>
@@ -195,4 +193,4 @@ const _TabsField: React.FC<TabsFieldProps> = (props) => {
   )
 }
 
-export const TabsField = withCondition(_TabsField)
+export const TabsField = withCondition(TabsFieldComponent)
diff --git a/packages/ui/src/fields/Text/index.tsx b/packages/ui/src/fields/Text/index.tsx
index 28a8414ad..2458c1eb9 100644
--- a/packages/ui/src/fields/Text/index.tsx
+++ b/packages/ui/src/fields/Text/index.tsx
@@ -17,7 +17,7 @@ import './index.scss'
 
 export { TextFieldProps, TextInput, TextInputProps }
 
-const _TextField: React.FC<TextFieldProps> = (props) => {
+const TextFieldComponent: React.FC<TextFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -153,4 +153,4 @@ const _TextField: React.FC<TextFieldProps> = (props) => {
   )
 }
 
-export const TextField = withCondition(_TextField)
+export const TextField = withCondition(TextFieldComponent)
diff --git a/packages/ui/src/fields/Textarea/index.tsx b/packages/ui/src/fields/Textarea/index.tsx
index ca5d16bc5..5bf8dbfb9 100644
--- a/packages/ui/src/fields/Textarea/index.tsx
+++ b/packages/ui/src/fields/Textarea/index.tsx
@@ -17,7 +17,7 @@ import './index.scss'
 
 export { TextAreaInputProps, TextareaFieldProps, TextareaInput }
 
-const _TextareaField: React.FC<TextareaFieldProps> = (props) => {
+const TextareaFieldComponent: React.FC<TextareaFieldProps> = (props) => {
   const {
     name,
     AfterInput,
@@ -102,4 +102,4 @@ const _TextareaField: React.FC<TextareaFieldProps> = (props) => {
   )
 }
 
-export const TextareaField = withCondition(_TextareaField)
+export const TextareaField = withCondition(TextareaFieldComponent)
diff --git a/packages/ui/src/fields/Upload/index.tsx b/packages/ui/src/fields/Upload/index.tsx
index 7ac804801..7ee3cd001 100644
--- a/packages/ui/src/fields/Upload/index.tsx
+++ b/packages/ui/src/fields/Upload/index.tsx
@@ -16,7 +16,7 @@ import './index.scss'
 export { UploadFieldProps, UploadInput }
 export type { UploadInputProps }
 
-const _Upload: React.FC<UploadFieldProps> = (props) => {
+const UploadComponent: React.FC<UploadFieldProps> = (props) => {
   const {
     CustomDescription,
     CustomError,
@@ -115,4 +115,4 @@ const _Upload: React.FC<UploadFieldProps> = (props) => {
   return null
 }
 
-export const UploadField = withCondition(_Upload)
+export const UploadField = withCondition(UploadComponent)