ModalProviderProps type includes style but not className

[peteragarclover]

🐛 Bug Report

Using className on OverlayProvider results in TypeScript errors. ModalProviderProps extends DOMAttributes which doesn't include className.

🤔 Expected Behavior

OverlayProvider should allow className.

😯 Current Behavior

TypeScript errors:

TS2322: Type '{ children: Element; className: string; }' is not assignable to type 'IntrinsicAttributes & ModalProviderProps'.
  Property 'className' does not exist on type 'IntrinsicAttributes & ModalProviderProps'.

💁 Possible Solution

Add className to DOMAttributes. According to MDN class is a supported attribute of both HTML and SVG elements.

🔦 Context

My app does not allow the entire body to scroll. Instead it's a fixed height of 100% of available space, and there is a content div which scrolls. To do this, the main app container must have height: 100% as well as all ancestor elements. 100vh is not reliable as it can be more than the visible height.

OverlayProvider introduces a wrapper div element. I was applying a className to set the height.

I can workaround is to apply styles directly with the style attribute, but, reporting anyway.

I can also rework how the app the scrolling is achieved using a scrollable body, and fixed/sticky header/nav elements, but... this was an unexpected API change.

💻 Code Sample

<OverlayProvider className="foo">

🌍 Your Environment

Software	Version(s)
@react-aria/overlays	3.10.0

[LFDanLu]

This is a regression on our part, thanks for catching this!