chore: export type EventHandler/EventData from react-utilities for typing callback props

change/@fluentui-react-utilities-a3ed4257-d715-43f5-8585-72d1a93681d9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add new type EventHandler/EventData for callback props",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -40,6 +40,18 @@ export function createPriorityQueue<T>(compare: PriorityQueueCompareFn<T>): Prio
 // @internal
 export function elementContains(parent: Node | null, child: Node | null): boolean;
 
+// @public
+export type EventData<Type extends string, TEvent> = {
+    type: undefined;
+    event: React_2.SyntheticEvent | Event;
+} | {
+    type: Type;
+    event: TEvent;
+};
+
+// @public
+export type EventHandler<TData extends EventData<string, unknown>> = (ev: React_2.SyntheticEvent | Event, data: TData) => void;
+
 // @public
 export type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;
 

packages/react-components/react-utilities/src/compose/types.ts

@@ -262,3 +262,34 @@ export type SlotComponentType<Props extends UnknownSlotProps> = Props & {
     | React.ComponentType<Props>
     | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
 };
+
+/**
+ * Data type for event handlers. It makes data a discriminated union, where each object requires `event` and `type` property.
+ * - `event` is the specific event type
+ * - `type` is a string literal. It serves as a clear identifier of the event type that reflects the component's state when the event occurred.
+ *    For example, the Tree component's `onNavigation` event handler has different `type` for different key presses: `{ event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight } | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }`.
+ *    Developers can use the `type` property to identify and filter events of interest.
+ * See RFC event-handlers-event-type.md for more details.
+ *
+ * Example usage:
+ * type OnOpenChangeData = (
+ *   | EventData\<'click', React.MouseEvent\<MyComponentElement\>\>
+ *   | EventData\<'keydown', React.KeyboardEvent\<MyComponentElement\>\>
+ * ) & \{ open: boolean; \};
+ */
+export type EventData<Type extends string, TEvent> =
+  | { type: undefined; event: React.SyntheticEvent | Event }
+  | { type: Type; event: TEvent };
+
+/**
+ * Type for props that are event handlers.
+ * See RFC event-handlers-event-type.md for more details.
+ *
+ * Example usage:
+ * type OnSomeEventData = EventData\<'click', React.MouseEvent\<MyComponentElement\>\> & \{ open: boolean; \};
+ * type SomeProps = \{ onSomeEvent?: EventHandler\<OnSomeEventData\>; \};
+ */
+export type EventHandler<TData extends EventData<string, unknown>> = (
+  ev: React.SyntheticEvent | Event,
+  data: TData,
+) => void;

packages/react-components/react-utilities/src/index.ts

@@ -33,6 +33,8 @@ export type {
   SlotComponentType,
   SlotOptions,
   InferredElementRefType,
+  EventData,
+  EventHandler,
 } from './compose/index';
 
 export {