[@wordpress/components] [TypeScript] Unnecessary Requirement of Pointer Events on SVG Components

[rafaucau]

Description

When using SVG-based components such as the Spinner from @wordpress/components, TypeScript errors are generated unless pointer event handlers like onPointerEnterCapture and onPointerLeaveCapture are provided. These properties should not be required for components like <Spinner/>, but the current TypeScript types make them mandatory, leading to an unnecessary complication for developers.

The problem most likely lies in these types: https://github.com/WordPress/gutenberg/blob/ed678300cf67d234b57291b4f5e04505a5d72ec7/packages/components/src/context/wordpress-component.ts

Step-by-step reproduction instructions

1. Import the Spinner component from @wordpress/components.
2. Use the Spinner component in a React component like so: <Spinner />.
3. Observe TypeScript error requiring onPointerEnterCapture and onPointerLeaveCapture which should not be mandatory.

Screenshots, screen recording, code snippet

Environment info

• @wordpress/compoennts: 27.4.0
• TypeScript: 5.4.5

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[mirka]

What version of @types/react/@types/react-dom are you using in your project? Looks related to DefinitelyTyped/DefinitelyTyped#69006 and #60796.

[rafaucau]

I have now manually installed the latest version of React types, but it has not helped.

"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",

Up until now I had installed the type versions provided by the @wordpress/* packages.