chore(react-aria): improve internal typings

[bsunderhus]

Current Behavior

Currently useARIAButtonProps infers event typings throughout props.

  const handleClick: Props['onClick'] = useEventCallback(ev => {});

  const handleKeyDown: Props['onKeyDown'] = useEventCallback(ev => {});

  const handleKeyUp: Props['onKeyUp'] = useEventCallback(ev => {});

New Behavior

Instead of inferring throughout props, narrowing it down by using ARIAButtonElementIntersection would be more appropriate.

  const handleClick = useEventCallback((ev: React.MouseEvent<ARIAButtonElementIntersection>) => {});

  const handleKeyDown = useEventCallback((ev: React.KeyboardEvent<ARIAButtonElementIntersection>) => {});

  const handleKeyUp = useEventCallback((ev: React.KeyboardEvent<ARIAButtonElementIntersection>) => {});

Related Issue(s)

Without narrowing down the type inference are causing conflicts

[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 d4804dc:

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

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	78.914 kB 24.06 kB
react-alert Alert	83.228 kB 20.889 kB
react-avatar Avatar	48.381 kB 13.696 kB
react-avatar AvatarGroup	14.95 kB 5.989 kB
react-avatar AvatarGroupItem	68.349 kB 19.039 kB
react-button Button	35.836 kB 9.59 kB
react-button CompoundButton	42.862 kB 10.808 kB
react-button MenuButton	38.454 kB 10.461 kB
react-button SplitButton	45.87 kB 11.811 kB
react-button ToggleButton	51.017 kB 11.007 kB
react-card Card - All	67.002 kB 19.261 kB
react-card Card	62.684 kB 18.177 kB
react-card CardFooter	8.561 kB 3.601 kB
react-card CardHeader	9.604 kB 3.94 kB
react-card CardPreview	8.662 kB 3.656 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	187.656 kB 51.96 kB
react-components react-components: FluentProvider & webLightTheme	33.359 kB 11.004 kB
react-dialog Dialog (including children components)	80.983 kB 24.187 kB
react-menu Menu (including children components)	115.735 kB 35.419 kB
react-menu Menu (including selectable components)	118.934 kB 35.916 kB
react-popover Popover	102.938 kB 31.542 kB
react-portal-compat PortalCompatProvider	5.851 kB 1.964 kB

_{🤖 This report was generated against 81191d9a45e629126a416e7202af3e241cd5e0fc}

[size-auditor]

Asset size changes

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

Baseline commit: 81191d9a45e629126a416e7202af3e241cd5e0fc (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1272	1273	5000
Button	mount	927	921	5000
FluentProvider	mount	1479	1478	5000
FluentProviderWithTheme	mount	571	582	10
FluentProviderWithTheme	virtual-rerender	537	535	10
FluentProviderWithTheme	virtual-rerender-with-unmount	570	579	10
MakeStyles	mount	1941	1948	50000
SpinButton	mount	2348	2349	5000