search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
9.89k stars 3.94k forks source link

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

Open rafaucau opened 2 weeks ago

rafaucau commented 2 weeks ago

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

image

Environment info

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 commented 1 week ago

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

rafaucau commented 1 week ago

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.