diff --git a/change/@fluentui-react-field-e9d7d534-adfe-4fc5-a7e5-5849ba7b44c9.json b/change/@fluentui-react-field-e9d7d534-adfe-4fc5-a7e5-5849ba7b44c9.json new file mode 100644 index 00000000000000..3a7e0c08d4381a --- /dev/null +++ b/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": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-field/etc/react-field.api.md b/packages/react-components/react-field/etc/react-field.api.md index 9bfb790dfa878d..a225cfa05ffd74 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/packages/react-components/react-field/etc/react-field.api.md @@ -97,7 +97,7 @@ export function makeDeprecatedField(Control: React_2.ComponentType }): ForwardRefComponent>; // @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) => FieldState; diff --git a/packages/react-components/react-field/src/components/Field/renderField.tsx b/packages/react-components/react-field/src/components/Field/renderField.tsx index 361b8166eab7f7..c4a299b3cdffa1 100644 --- a/packages/react-components/react-field/src/components/Field/renderField.tsx +++ b/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(state); let { children } = state; if (typeof children === 'function') { - children = children(getFieldControlProps(contextValues?.field) || {}); + children = children(getFieldControlProps(contextValues.field) || {}); } return ( diff --git a/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx b/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx index 9b30fa30050a4c..3dc16ae8acda1c 100644 --- a/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx +++ b/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((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 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';