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

[YuanboXue-Amber]

Background:

We agreed on new event type for v9 callbacks.

Below types will be exported from react-utilities as helpers:

export type EventData<Type extends string, TEvent> =
  | { type: undefined; event: React.SyntheticEvent | Event }
  | { type: Type; event: TEvent };

export type EventHandler<TData extends EventData<string, unknown>> = (
  ev: React.SyntheticEvent | Event,
  data: TData,
) => void;

And they will be used for typing callbacks:

type MyComponentElement = HTMLElement;

type OnSomeEventData = (
  | EventData<'click', React.MouseEvent<MyComponentElement>>
  | EventData<'focus', React.FocusEvent<MyComponentElement>>
) & {
  open: boolean;
};

type SomeProps = {
  onSomeEvent?: EventHandler<OnSomeEventData>;
};

detailed proposal: https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/event-handlers-event-type.md

This PR does:

Export the helper types as mentioned above.

To make sure this type is used, PR #30293 adds lint rule to force its usage, and PR #30301 deprecates consistent-callback-args test that checks for older callback types.

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	619	647	5000
Button	mount	298	301	5000
Field	mount	1118	1092	5000
FluentProvider	mount	691	719	5000
FluentProviderWithTheme	mount	87	85	10
FluentProviderWithTheme	virtual-rerender	75	76	10
FluentProviderWithTheme	virtual-rerender-with-unmount	79	79	10
MakeStyles	mount	842	875	50000
Persona	mount	1751	1751	5000
SpinButton	mount	1435	1409	5000

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c3aa4af:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
global-context createContext	510 B 328 B
global-context createContextSelector	537 B 339 B
react-accordion Accordion (including children components)	93.951 kB 28.702 kB
react-alert Alert	83.737 kB 23.474 kB
react-avatar Avatar	50.175 kB 15.944 kB
react-avatar AvatarGroup	19.704 kB 7.796 kB
react-avatar AvatarGroupItem	64.831 kB 20.274 kB
react-badge Badge	26.905 kB 8.729 kB
react-badge CounterBadge	27.806 kB 9.024 kB
react-badge PresenceBadge	25.311 kB 9.306 kB
react-button Button	39.513 kB 11.169 kB
react-button CompoundButton	46.874 kB 12.661 kB
react-button MenuButton	44.292 kB 12.542 kB
react-button SplitButton	52.306 kB 14.134 kB
react-button ToggleButton	56.559 kB 13.068 kB
react-calendar-compat Calendar Compat	142.225 kB 37.167 kB
react-card Card - All	94.643 kB 27.238 kB
react-card Card	89.467 kB 25.725 kB
react-card CardFooter	13.064 kB 5.385 kB
react-card CardHeader	15.307 kB 6.143 kB
react-card CardPreview	14.015 kB 5.752 kB
react-checkbox Checkbox	34.746 kB 11.902 kB
react-combobox Combobox (including child components)	97.318 kB 31.442 kB
react-combobox Dropdown (including child components)	98.511 kB 31.431 kB
react-components react-components: Button, FluentProvider & webLightTheme	69.901 kB 20.261 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	210.483 kB 60.048 kB
react-components react-components: FluentProvider & webLightTheme	42.388 kB 14.103 kB
react-datepicker-compat DatePicker Compat	214.054 kB 60.081 kB
react-dialog Dialog (including children components)	95.512 kB 28.476 kB
react-divider Divider	20.82 kB 7.763 kB
react-field Field	22.427 kB 8.573 kB
react-image Image	15.736 kB 6.228 kB
react-infobutton InfoButton	132.941 kB 41.84 kB
react-infobutton InfoLabel	136.629 kB 42.98 kB
react-input Input	26.887 kB 9.118 kB
react-jsx-runtime Classic Pragma	1.057 kB 530 B
react-jsx-runtime JSX Dev Runtime	3.783 kB 1.648 kB
react-jsx-runtime JSX Runtime	4.377 kB 1.881 kB
react-label Label	14.149 kB 5.759 kB
react-link Link	17.082 kB 6.911 kB
react-menu Menu (including children components)	142.783 kB 43.714 kB
react-menu Menu (including selectable components)	145.469 kB 44.221 kB
react-message-bar MessageBar (all components)	25.181 kB 9.039 kB
react-overflow hooks only	12.837 kB 4.818 kB
react-persona Persona	57.066 kB 17.821 kB
react-popover Popover	121.135 kB 38.23 kB
react-portal Portal	12.788 kB 4.67 kB
react-portal-compat PortalCompatProvider	7.099 kB 2.385 kB
react-positioning usePositioning	26.162 kB 9.465 kB
react-progress ProgressBar	17.428 kB 6.898 kB
react-provider FluentProvider	22.928 kB 8.472 kB
react-radio Radio	32.042 kB 10.046 kB
react-radio RadioGroup	15.345 kB 6.263 kB
react-select Select	28.609 kB 10.205 kB
react-slider Slider	39.15 kB 12.769 kB
react-spinbutton SpinButton	36.774 kB 11.788 kB
react-spinner Spinner	23.402 kB 8.467 kB
react-switch Switch	34.23 kB 10.995 kB
react-table DataGrid	157.347 kB 43.944 kB
react-table Table (Primitives only)	44.493 kB 13.921 kB
react-table Table as DataGrid	130.311 kB 35.163 kB
react-table Table (Selection only)	75.365 kB 20.367 kB
react-table Table (Sort only)	74.031 kB 19.976 kB
react-tags InteractionTag	15.259 kB 6.058 kB
react-tags Tag	29.982 kB 9.439 kB
react-tags TagGroup	74.394 kB 22.305 kB
react-text Text - Default	16.705 kB 6.569 kB
react-text Text - Wrappers	19.878 kB 6.896 kB
react-textarea Textarea	30.947 kB 10.476 kB
react-timepicker-compat TimePicker	99.152 kB 32.873 kB
react-toast Toast (including Toaster)	93.263 kB 28.039 kB
react-tooltip Tooltip	53.515 kB 18.907 kB
react-utilities SSRProvider	180 B 160 B

_{🤖 This report was generated against 0c422edc87177d3d707c71fa3cad3fa2b872bdf8}

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 0c422edc87177d3d707c71fa3cad3fa2b872bdf8 (build)

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main