fix: Update FormFieldShim to work with Field context changes

change/@fluentui-react-field-e9d7d534-adfe-4fc5-a7e5-5849ba7b44c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Make contextValues argument required on renderField_unstable",
+  "packageName": "@fluentui/react-field",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-field/etc/react-field.api.md

@@ -97,7 +97,7 @@ export function makeDeprecatedField<ControlProps>(Control: React_2.ComponentType
 }): ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;
 
 // @public
-export const renderField_unstable: (state: FieldState, contextValues?: FieldContextValues | undefined) => JSX.Element;
+export const renderField_unstable: (state: FieldState, contextValues: FieldContextValues) => JSX.Element;
 
 // @public
 export const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;

packages/react-components/react-field/src/components/Field/renderField.tsx

@@ -7,12 +7,12 @@ import type { FieldContextValues, FieldSlots, FieldState } from './Field.types';
 /**
  * Render the final JSX of Field
  */
-export const renderField_unstable = (state: FieldState, contextValues?: FieldContextValues) => {
+export const renderField_unstable = (state: FieldState, contextValues: FieldContextValues) => {
   const { slots, slotProps } = getSlots<FieldSlots>(state);
 
   let { children } = state;
   if (typeof children === 'function') {
-    children = children(getFieldControlProps(contextValues?.field) || {});
+    children = children(getFieldControlProps(contextValues.field) || {});
   }
 
   return (

packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx

@@ -1,6 +1,7 @@
 import {
   FieldProps,
   renderField_unstable,
+  useFieldContextValues_unstable,
   useFieldStyles_unstable,
   useField_unstable,
 } from '@fluentui/react-components/unstable';
@@ -42,7 +43,7 @@ type CustomInputFieldProps = React.PropsWithChildren<{
 }>;
 
 export const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {
-  const { errorMessage, required, control, label, children } = props;
+  const { errorMessage, required, control, label } = props;
   const fieldProps: FieldProps = { required };
 
   if (errorMessage && control?.error === 'true') {
@@ -63,12 +64,21 @@ export const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputField
     }
   }
 
-  fieldProps.children = (children || control?.content) as React.ReactElement;
+  const children: FieldProps['children'] = props.children || control?.content;
 
-  const state = useField_unstable(fieldProps, ref);
+  if (React.isValidElement(children)) {
+    const child: React.ReactElement = children;
+
+    // Use the Field's child render function to pass the field control props to the child
+    fieldProps.children = fieldControlProps => React.cloneElement(child, { ...fieldControlProps, ...child.props });
+  } else {
+    fieldProps.children = children;
+  }
 
+  const state = useField_unstable(fieldProps, ref);
   useFieldStyles_unstable(state);
-  return renderField_unstable(state);
+  const context = useFieldContextValues_unstable(state);
+  return renderField_unstable(state, context);
 });
 
 FormFieldShim.displayName = 'FormFieldShim';