Component type incompatible with wrapFieldsWithMeta type

[bencmbrook]

Describe the issue that you're seeing. Any Loom videos or screenshots usually help a lot!

The type returned from wrapFieldsWithMeta includes a form property:

tinacms/packages/tinacms/src/toolkit/fields/plugins/field-props.ts

Lines 4 to 8 in 18c674b

	export interface FieldProps<InputProps>
	extends FieldRenderProps<any, HTMLElement> {
	field: Field & InputProps
	form: FormApi
	}

However, the Component type does not expect this property:

tinacms/packages/@tinacms/schema-tools/src/types/index.ts

Lines 10 to 33 in 18c674b

	type Component<Type, List> = (props: {
	field: TinaField & { namespace: string[] }
	input: {
	/**
	* The full name of the field, for fields nested inside object
	* fields, this will be the full path:
	*
	* `myObject.0.title`
	*/
	name: string
	onBlur: (event?: React.FocusEvent<Type>) => void
	/**
	* The value provided will be saved to the form so it
	* should match the configured type:
	*
	* `input.onChange('some string')`
	*/
	onChange: (event: React.ChangeEvent<Type>) => void
	onFocus: (event?: React.FocusEvent<Type>) => void
	type?: string
	value: List extends true ? Type[] : Type
	}
	meta: Meta
	}) => any

Reproduction:

import { wrapFieldsWithMeta, type Collection } from 'tinacms';

export const myCollection: Collection = {
  label: 'Docs',
  name: 'doc',
  path: 'docs',
  format: 'mdx',
  fields: [
    {
      name: 'body',
      type: 'string',
      label: 'Doc Content',
      required: true,
      isBody: true,
      ui: {
        component: wrapFieldsWithMeta((props) => <input />),
        // ^^^ Property 'form' is missing on `component` expected type, but included on `wrapFieldsWithMeta` return type
      },
    },
  ],
};

Yields this TypeScript error:

Property 'form' is missing in type '{ field: TinaField & { namespace: string[]; }; input: { name: string; onBlur: (event?: FocusEvent<string, Element> | undefined) => void; onChange: (event: ChangeEvent<...>) => void; onFocus: (event?: FocusEvent<...> | undefined) => void; type?: string | undefined; value: string[]; }; meta: Meta; }' but required in type 'FieldProps<TinaField & { namespace: string[]; }>'.

Complete TypeError:

Type '(props: InputFieldType<{ field: TinaField<false> & { namespace: string[]; }; input: { name: string; onBlur: (event?: FocusEvent<string, Element> | undefined) => void; onChange: (event: ChangeEvent<...>) => void; onFocus: (event?: FocusEvent<...> | undefined) => void; type?: string | undefined; value: string; }; meta...' is not assignable to type 'string | Component<string, true> | null | undefined'.
  Type '(props: InputFieldType<{ field: TinaField<false> & { namespace: string[]; }; input: { name: string; onBlur: (event?: FocusEvent<string, Element> | undefined) => void; onChange: (event: ChangeEvent<...>) => void; onFocus: (event?: FocusEvent<...> | undefined) => void; type?: string | undefined; value: string; }; meta...' is not assignable to type 'Component<string, true>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type '{ field: TinaField<false> & { namespace: string[]; }; input: { name: string; onBlur: (event?: FocusEvent<string, Element> | undefined) => void; onChange: (event: ChangeEvent<...>) => void; onFocus: (event?: FocusEvent<...> | undefined) => void; type?: string | undefined; value: string[]; }; meta: Meta; }' is not assignable to type 'InputFieldType<{ field: TinaField<false> & { namespace: string[]; }; input: { name: string; onBlur: (event?: FocusEvent<string, Element> | undefined) => void; onChange: (event: ChangeEvent<...>) => void; onFocus: (event?: FocusEvent<...> | undefined) => void; type?: string | undefined; value: string; }; meta: Meta; ...'.
        Property 'form' is missing in type '{ field: TinaField<false> & { namespace: string[]; }; input: { name: string; onBlur: (event?: FocusEvent<string, Element> | undefined) => void; onChange: (event: ChangeEvent<...>) => void; onFocus: (event?: FocusEvent<...> | undefined) => void; type?: string | undefined; value: string[]; }; meta: Meta; }' but required in type 'FieldProps<TinaField<false> & { namespace: string[]; }>'.

Reproduction

See description for a simple repro

Steps to reproduce

No response

System Info

`"tinacms": "^1.6.3",`

`"typescript": "^5.4.2",`

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug.