diff --git a/change/@fluentui-react-89430e74-6347-4a7d-ad5b-9a3b5bebfc31.json b/change/@fluentui-react-89430e74-6347-4a7d-ad5b-9a3b5bebfc31.json new file mode 100644 index 00000000000000..93bcc6cda06b06 --- /dev/null +++ b/change/@fluentui-react-89430e74-6347-4a7d-ad5b-9a3b5bebfc31.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Make callbacks able to take one param type or the other rather than requiring both.", + "packageName": "@fluentui/react", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 5fa51df95c8522..bc953f5297f6e5 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -3348,8 +3348,8 @@ export interface IChoiceGroupOption extends Omit; - onRenderLabel?: IRenderFunction; + onRenderField?: IRenderFunction; + onRenderLabel?: IRenderFunction; selectedImageSrc?: string; styles?: IStyleFunctionOrObject; text: string; @@ -3364,9 +3364,9 @@ export interface IChoiceGroupOptionProps extends Omit itemKey: string; key?: string; name?: string; - onBlur?: (ev?: React_2.FocusEvent, props?: IChoiceGroupOption | IChoiceGroupOptionProps) => void; - onChange?: (evt?: React_2.FormEvent, props?: IChoiceGroupOption | IChoiceGroupOptionProps) => void; - onFocus?: (ev?: React_2.FocusEvent, props?: IChoiceGroupOption | IChoiceGroupOptionProps) => void | undefined; + onBlur?: (ev?: React_2.FocusEvent, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void; + onChange?: (evt?: React_2.FormEvent, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void; + onFocus?: (ev?: React_2.FocusEvent, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void | undefined; required?: boolean; theme?: ITheme; } diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts b/packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts index fd21d205111309..f7e404c328cdf4 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts @@ -96,12 +96,12 @@ export interface IChoiceGroupOption extends Omit; + onRenderField?: IRenderFunction; /** * Used to customize label rendering. */ - onRenderLabel?: IRenderFunction; + onRenderLabel?: IRenderFunction; /** * Props for an icon to display with this option. diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx index 01ca4f0636b432..1dc51a0f25affa 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx @@ -73,7 +73,7 @@ export const ChoiceGroupOptionBase: React.FunctionComponent @@ -102,7 +102,7 @@ export const ChoiceGroupOptionBase: React.FunctionComponent): void => { - props.onChange?.(evt, props); + props.onChange?.(evt, { ...props, key: props.itemKey }); }; const onBlur = (evt: React.FocusEvent) => { @@ -110,7 +110,7 @@ export const ChoiceGroupOptionBase: React.FunctionComponent) => { - props.onFocus?.(evt, props); + props.onFocus?.(evt, { ...props, key: props.itemKey }); }; return ( @@ -130,7 +130,7 @@ export const ChoiceGroupOptionBase: React.FunctionComponent - {onRenderField(props, defaultOnRenderField)} + {onRenderField({ ...props, key: props.itemKey }, defaultOnRenderField)} ); diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts index 01ed2067a268f4..f57b1a798adfc0 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts @@ -34,7 +34,7 @@ export interface IChoiceGroupOptionProps extends Omit */ onChange?: ( evt?: React.FormEvent, - props?: IChoiceGroupOption | IChoiceGroupOptionProps, + props?: IChoiceGroupOption & IChoiceGroupOptionProps, ) => void; /** @@ -42,13 +42,13 @@ export interface IChoiceGroupOptionProps extends Omit */ onFocus?: ( ev?: React.FocusEvent, - props?: IChoiceGroupOption | IChoiceGroupOptionProps, + props?: IChoiceGroupOption & IChoiceGroupOptionProps, ) => void | undefined; /** * Callback for the ChoiceGroup creating the option to be notified when the choice has lost focus. */ - onBlur?: (ev?: React.FocusEvent, props?: IChoiceGroupOption | IChoiceGroupOptionProps) => void; + onBlur?: (ev?: React.FocusEvent, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void; /** * Indicates if the ChoiceGroupOption should appear focused, visually