fix: Append popover elements to scoped root

iTwin / iTwinUI-react

A react component library for iTwinUI.

https://github.com/iTwin/iTwinUI

Other

83 stars 23 forks source link

fix: Append popover elements to scoped root #901

Closed mayank99 closed 1 year ago

mayank99 commented 1 year ago

Fixes #898 for popovers. Modals and toasts will still respect the topmost ThemeProvider but not any scoped roots.

Main changes

ThemeProvider: Now saves rootRef.
Popover: Access rootRef from theme context and uses it for appendTo.
getContainer: Now tries to add container to .iui-root if one exists.
Toast: Removed useTheme because it unnecessarily runs a layout effect outside the main tree, adding redundant classes to <body>.

mayank99 commented 1 year ago

I have decided to leave out modals/toasts from this PR because I think those are less important from a scoping perspective (they always appear in the same place, regardless of what part of the app is scoped).

In a future PR I plan to introduce two new hooks:

useRoot which will return the nearest ThemeProvider element (and can then be passed into Modal or Toast).
useToaster which will automatically put toasts in a scoped root.