Updated ChoiceGroup to allow callbacks to define one prop type (#25475)

* Updated to ease defining callbacks of one prop type * yarn change
microsoft · Nov 3, 2022 · f5a12b3 · f5a12b3
1 parent 6bfd92e
commit f5a12b3
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/change/@fluentui-react-89430e74-6347-4a7d-ad5b-9a3b5bebfc31.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -3348,8 +3348,8 @@ export interface IChoiceGroupOption extends Omit<React_2.InputHTMLAttributes<HTM
     imageSrc?: string;
     key: string;
     labelId?: string;
-    onRenderField?: IRenderFunction<IChoiceGroupOption | IChoiceGroupOptionProps>;
-    onRenderLabel?: IRenderFunction<IChoiceGroupOption | IChoiceGroupOptionProps>;
+    onRenderField?: IRenderFunction<IChoiceGroupOption & IChoiceGroupOptionProps>;
+    onRenderLabel?: IRenderFunction<IChoiceGroupOption & IChoiceGroupOptionProps>;
     selectedImageSrc?: string;
     styles?: IStyleFunctionOrObject<IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles>;
     text: string;
@@ -3364,9 +3364,9 @@ export interface IChoiceGroupOptionProps extends Omit<IChoiceGroupOption, 'key'>
     itemKey: string;
     key?: string;
     name?: string;
-    onBlur?: (ev?: React_2.FocusEvent<HTMLElement>, props?: IChoiceGroupOption | IChoiceGroupOptionProps) => void;
-    onChange?: (evt?: React_2.FormEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption | IChoiceGroupOptionProps) => void;
-    onFocus?: (ev?: React_2.FocusEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption | IChoiceGroupOptionProps) => void | undefined;
+    onBlur?: (ev?: React_2.FocusEvent<HTMLElement>, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void;
+    onChange?: (evt?: React_2.FormEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void;
+    onFocus?: (ev?: React_2.FocusEvent<HTMLElement | HTMLInputElement>, 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
@@ -96,12 +96,12 @@ export interface IChoiceGroupOption extends Omit<React.InputHTMLAttributes<HTMLE
   /**
    * Used to customize option rendering.
    */
-  onRenderField?: IRenderFunction<IChoiceGroupOption | IChoiceGroupOptionProps>;
+  onRenderField?: IRenderFunction<IChoiceGroupOption & IChoiceGroupOptionProps>;
 
   /**
    * Used to customize label rendering.
    */
-  onRenderLabel?: IRenderFunction<IChoiceGroupOption | IChoiceGroupOptionProps>;
+  onRenderLabel?: IRenderFunction<IChoiceGroupOption & IChoiceGroupOptionProps>;
 
   /**
    * 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
@@ -73,7 +73,7 @@ export const ChoiceGroupOptionBase: React.FunctionComponent<IChoiceGroupOptionPr
       ? composeRenderFunction(props.onRenderLabel, defaultOnRenderLabel)
       : defaultOnRenderLabel;
 
-    const label = onRenderLabel(props);
+    const label = onRenderLabel({ ...props, key: props.itemKey });
 
     return (
       <label htmlFor={id} className={classNames.field}>
@@ -102,15 +102,15 @@ export const ChoiceGroupOptionBase: React.FunctionComponent<IChoiceGroupOptionPr
   const { onRenderField = defaultOnRenderField } = props;
 
   const onChange = (evt: React.FormEvent<HTMLInputElement>): void => {
-    props.onChange?.(evt, props);
+    props.onChange?.(evt, { ...props, key: props.itemKey });
   };
 
   const onBlur = (evt: React.FocusEvent<HTMLElement>) => {
     props.onBlur?.(evt);
   };
 
   const onFocus = (evt: React.FocusEvent<HTMLElement>) => {
-    props.onFocus?.(evt, props);
+    props.onFocus?.(evt, { ...props, key: props.itemKey });
   };
 
   return (
@@ -130,7 +130,7 @@ export const ChoiceGroupOptionBase: React.FunctionComponent<IChoiceGroupOptionPr
           onFocus={onFocus}
           onBlur={onBlur}
         />
-        {onRenderField(props, defaultOnRenderField)}
+        {onRenderField({ ...props, key: props.itemKey }, defaultOnRenderField)}
       </div>
     </div>
   );

diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts
@@ -34,21 +34,21 @@ export interface IChoiceGroupOptionProps extends Omit<IChoiceGroupOption, 'key'>
    */
   onChange?: (
     evt?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    props?: IChoiceGroupOption | IChoiceGroupOptionProps,
+    props?: IChoiceGroupOption & IChoiceGroupOptionProps,
   ) => void;
 
   /**
    * Callback for the ChoiceGroup creating the option to be notified when the choice has received focus.
    */
   onFocus?: (
     ev?: React.FocusEvent<HTMLElement | HTMLInputElement>,
-    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<HTMLElement>, props?: IChoiceGroupOption | IChoiceGroupOptionProps) => void;
+  onBlur?: (ev?: React.FocusEvent<HTMLElement>, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void;
 
   /**
    * Indicates if the ChoiceGroupOption should appear focused, visually