chore: clean up types for HiddenField and WatchCondition (#9208)

### What?
Aligns types for HiddenField and the WatchCondition component with the
rest of the fields. Since path is required when rendering a Field
component, there is no need to keep it optional in the WatchCondition
component.

### Why?
Hidden fields were requiring the `field` property to be passed, but the
only reason it needed it was to allow the path to fallback to name if
path was not passed. But path is required so there is no need for this
anymore.

This makes using the HiddenField simpler now.

### How?
Adjusts type on the HiddenField and the WatchCondition component.

packages/next/src/views/ResetPassword/ResetPasswordForm/index.tsx

@@ -79,18 +79,7 @@ export const ResetPasswordForm: React.FC<Args> = ({ token }) => {
           schemaPath={`${userSlug}.password`}
         />
         <ConfirmPasswordField />
-        <HiddenField
+        <HiddenField path="token" schemaPath={`${userSlug}.token`} value={token} />
-          field={{
-            name: 'token',
-            type: 'text',
-            admin: {
-              hidden: true,
-            },
-          }}
-          path="token"
-          schemaPath={`${userSlug}.token`}
-          value={token}
-        />
       </div>
       <FormSubmit size="large">{i18n.t('authentication:resetPassword')}</FormSubmit>
     </Form>

packages/payload/src/admin/fields/Hidden.ts

@@ -1,13 +1,11 @@
-import type { ClientField } from '../../fields/config/types.js'
 import type { ClientFieldBase } from '../types.js'
 
 type HiddenFieldBaseClientProps = {
   readonly disableModifyingForm?: false
-  readonly field?: {
+  readonly field?: never
-    readonly name?: string
-  } & ClientField
   readonly path: string
   readonly value?: unknown
 }
 
-export type HiddenFieldProps = ClientFieldBase & HiddenFieldBaseClientProps
+export type HiddenFieldProps = HiddenFieldBaseClientProps &
+  Pick<ClientFieldBase, 'forceRender' | 'schemaPath'>

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

@@ -12,14 +12,7 @@ import { withCondition } from '../../forms/withCondition/index.js'
  * For example, this sets the `ìd` property of a block in the Blocks field.
  */
 const HiddenFieldComponent: React.FC<HiddenFieldProps> = (props) => {
-  const {
+  const { disableModifyingForm = true, path, value: valueFromProps } = props
-    disableModifyingForm = true,
-    field: { name } = {},
-    path: pathFromProps,
-    value: valueFromProps,
-  } = props
-
-  const path = pathFromProps ?? (name || '')
 
   const { setValue, value } = useField({
     path,

packages/ui/src/fields/index.tsx

@@ -5,6 +5,7 @@ import type {
   GenericDescriptionProps,
   GenericErrorProps,
   GenericLabelProps,
+  HiddenFieldProps,
 } from 'payload'
 import type React from 'react'
 
@@ -43,9 +44,10 @@ import { UploadField } from './Upload/index.js'
 export * from './shared/index.js'
 
 export type FieldTypesComponents = {
-  [K in 'hidden' | 'password' | FieldTypes]: React.FC<ClientFieldBase>
+  [K in 'password' | FieldTypes]: React.FC<ClientFieldBase>
 } & {
   confirmPassword: React.FC<ConfirmPasswordFieldProps>
+  hidden: React.FC<HiddenFieldProps>
 }
 
 export const fieldComponents: FieldTypesComponents = {

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

@@ -67,7 +67,7 @@ export function RenderField({
   }
 
   if (clientFieldConfig.admin?.hidden) {
-    return <HiddenField {...baseFieldProps} field={clientFieldConfig} path={path} />
+    return <HiddenField {...baseFieldProps} path={path} />
   }
 
   switch (clientFieldConfig.type) {

packages/ui/src/forms/withCondition/WatchCondition.tsx

@@ -1,5 +1,4 @@
 'use client'
-import type { FieldTypes } from 'payload'
 
 import React, { Fragment } from 'react'
 
@@ -8,13 +7,9 @@ import { useFormFields } from '../Form/context.js'
 export const WatchCondition: React.FC<{
   children: React.ReactNode
   indexPath: string
-  name?: string
+  path: string
-  path?: string
-  type: FieldTypes
 }> = (props) => {
-  const { name, children, path: pathFromProps } = props
+  const { children, path } = props
-
-  const path = typeof pathFromProps === 'string' ? pathFromProps : name
 
   const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)
 

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

@@ -1,29 +1,19 @@
 'use client'
-import type { ClientFieldProps, FieldPaths } from 'payload'
+import type { FieldPaths } from 'payload'
 import type { MarkOptional } from 'ts-essentials'
 
 import React from 'react'
 
 import { WatchCondition } from './WatchCondition.js'
 
-export const withCondition = <
+export const withCondition = <P extends MarkOptional<FieldPaths, 'indexPath' | 'path'>>(
-  P extends MarkOptional<FieldPaths & Pick<ClientFieldProps, 'field'>, 'indexPath' | 'path'>,
->(
   Field: React.ComponentType<P>,
 ): React.FC<P> => {
   const CheckForCondition: React.FC<P> = (props) => {
-    const {
+    const { indexPath, path } = props
-      field: { type },
-      indexPath,
-      path: pathFromProps,
-    } = props
-
-    const name = 'name' in props.field ? props.field.name : undefined
-
-    const path = pathFromProps ?? name
 
     return (
-      <WatchCondition indexPath={indexPath} name={name} path={path} type={type}>
+      <WatchCondition indexPath={indexPath} path={path}>
         <Field {...props} />
       </WatchCondition>
     )