replace useTheme with internal useGlobals

[mayank99]

Changes

• Removed useTheme hook, which means ThemeProvider is now required.
• ThemeProvider must always be used with children.
• Removed the deprecated ownerDocument option in ThemeProvider.
• Added new useGlobals hook in every component. Will be used for global setup (e.g. context for Future: Scoped sizing using Context #969 and useToaster) and side-effects (e.g. css imports and console warnings).

Testing

Everything seems to work same as before when app is wrapped in <ThemeProvider>.

When not wrapped, the warning is correctly displayed in dev environment.

Docs

Changeset added.

Migration guide updated: https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v3-migration-guide#breaking-changes

[gretanausedaite]

@gretanausedaite Maybe you want to investigate?

Controlled tooltip is also broken :)

It appears that Popover does not get rootRef from ThemeProvider therefore adds content to owerDocument.body.
I added id='iui-root' in theme provider for testing purposes:

And added a query for that in Popover:

And now Select with controlled Popover and Controlled Tooltip works:

My guess this is the same reason why in some cases Popover does not append itself to our theme provider root. (eg. recent ColorPicker issue, AppUI select issue)

Maybe we can add data attribute to ThemeProvider for Popover to look for?

[mayank99]

Controlled tooltip is also broken

Both fixed. It looks like rootRef.current was undefined on first re-render and correctly set on second render, so when using visible: true, it was appending to body.

Fixed by using key. See d3c5c9e

Edit: key was causing other issues, so I'm now using a check for useIsDomAvailable. Everything seems to work and all tests pass. See c92565f.

When we implement our custom Popover using floating-ui, we will need to do something similar to wait until rootRef is available.

[LostABike]

Ok I have tried to test and toggle globals for everything that has more than a name change, and some random ones with only name change and everything seems to work fine for me (Windows + Chrome). Have also read the actual code changes.

[gretanausedaite]

Toasts get theme warning in Storybook. Probably because it's storybook.

LGTM.

[mayank99]

Toasts get theme warning in Storybook. Probably because it's storybook.

I think it's expected, because we are calling a separate createRoot inside Toaster. Should be fixed when we provide new useToaster api.