Access to browser events

[Devmond]

We build a lowcode platform as shown here:
https://codesolvent.com/lowcodr/

We've just integrated Cloudscape but have run into the issue of native browser events not being exposed directly via props. Basically we need access to the mouseenter,mouseover,mousedown,drag,drop events.

I looked at some of the typescript code and see that the components seem to be limited to being bound to only select events (onClick for instance on button).

Native browser events are really not to be messed with as there are so many use-cases that rely on them, unfortunately nuking access to them seem to be a trend in react component libraries, we ran into similar issues with Adobe's Spectrum library.

Is there some trick we could employ to get access to these events?

If no easy trick, can someone answer whether ref/ref forwarding is something we could use? I see some ref forwarding in the code but I am not sure it is applied consistently.

[pan-kot]

Hello,

Could you please describe a specific use case that requires having more events exposed on a particular component? In most cases it should be enough to attach these events on a wrapper component instead.

Some components do expose refs but the API is usually limited to the .focus() call and sometimes a few more methods but none of the components give direct access to the underlying DOM nodes.

[Devmond]

Thanks for the follow up @pan-kot

Our primary use-case is doing drag-n-drop UI composition, basically being able to drag-n-drop the components on a canvas to build apps.

We are aware of the wrapper component option and that is what we have settled on for now. In our case we're just wrapping span tags around components and so far that seems manageable.

One problem with wrapper components is that they may not play well when inserted into slots that expect a specific component type, for instance a card may expect a title component and not handle an unexpected wrapper component around the title component.

Our platform is a generic one that targets all react & vue design systems and component libraries, hence our preference for the built-in browser events directly on the components.

[pan-kot]

Got it, thank you. I propose we come back to this discussion as soon there is a particular use case requiring a specific change in a specific component. The majority of Cloudscape components do use wrappers of some sort internally. Thus, the Input component's root node is not HTMLInput but HTMLDiv etc. We also don't give guarantees that the internal structure of any component does not change in the future so any assumption made with regards to that comes with a risk.