Modal and TooltipDialog don't pass environment to useModal hook

[Fredx87]

When using Garden components inside an element with a Shadow Root, we need to override the document prop of the theme to fix some issues related to the fact that the components are rendered inside the Shadow DOM. We especially need to override the activeElement property, because otherwise document.activeElement returns the entire Shadow Root, breaking some of the logic related to focus jail and so on.

This solution worked fine in v8 for the legacy dropdowns, and we didn't find any issues with modals. When I tried to migrate to v9, modals are broken. This is a reproduction on Stackblitz: https://stackblitz.com/edit/vitejs-vite-yggmpwxg?file=src%2Fmain.tsx

Issues:

• There is no focus jail on the modal, and when the user presses tab, the modal closes by itself
• When clicking on any interactive element, the modal closes by itself
• The focus is not restored to the initial element when the modal is closed
• The TooltipDialog component has more or less the same issues
• Drawer works fine

I noticed that the useModal hook accepts an environment property, but the Modal component doesn't pass this property to the hook, nor the TooltipDialog component. The Drawer component instead passes it.

I created a patch to test if passing the environment would solve the issue, and it seems so: https://stackblitz.com/edit/vitejs-vite-9xvpzbtv?file=src%2Fmain.tsx. The only change in this StackBlitz is a patch applied to the react-modals package to pass the environment from the two components. The patch is really simple, and it can be found in the patches folder in the Stackblitz.

I can open a PR, but I am not completely sure if there is a reason why we don't pass the environment right now, and if the fix would fix all the issues with the modals in a Shadow Root