fix: indentation level of modals

[kark]

Summary

This PR addresses an issue encountered with the usage of the useModalState hook for managing modal state within our documentation. Currently, following the steps as outlined in the documentation snippets doesn't allow applying correct indentation levels for modals stacking layers due to a lack of DOM mutation events that can be picked up by the Mutation Observer used within the portals container.

The problem is that following the steps from our snippets e.g.

<FormModalPage
      isOpen={formModalState.isModalOpen}

doesn't really work (i.e. Modal component from the react-modal library technically triggers a DOM mutation, by applying a grandchild element of the portals container, but the Mutation Observer doesn't react to it).

Until now the conditional rendering was the solution to make it work instead:

{formModalState.isModalOpen && <FormModalPage
      isOpen

With this PR, whenever the useModalState hook is used to manage modal state and isModalState changes, the necessary child-level DOM mutation is triggered. This ensures that the Mutation Observer can properly compute the correct indentation level for the modal's stacking layer.

Before	After

Alternatives considered

Technically there is a subtree option that can be passed to the Mutation Observer observe method call, but it didn't work either. I suspect it might be related to https://stackoverflow.com/a/61315048 but I felt that creating a custom Tree Walker is an overkill (but maybe that would be your preferred solution)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
merchant-center-application-kit-components-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 9, 2024 8:31am

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: f289bba7ac96b867adab7e92a83dda4d3dbff710

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 36 packages

| Name | Type | | ----------------------------------------------------------------------------------- | ----- | | @commercetools-frontend/application-components | Patch | | @commercetools-frontend/application-shell | Patch | | @commercetools-frontend/codemod | Patch | | @commercetools-frontend/mc-scripts | Patch | | @commercetools-frontend/react-notifications | Patch | | @commercetools-applications/merchant-center-template-starter-typescript | Patch | | @commercetools-applications/merchant-center-template-starter | Patch | | @commercetools-applications/merchant-center-custom-view-template-starter-typescript | Patch | | @commercetools-applications/merchant-center-custom-view-template-starter | Patch | | @commercetools-local/playground | Patch | | @commercetools-local/visual-testing-app | Patch | | @commercetools-website/components-playground | Patch | | @commercetools-frontend/cypress | Patch | | @commercetools-backend/eslint-config-node | Patch | | @commercetools-backend/express | Patch | | @commercetools-backend/loggers | Patch | | @commercetools-frontend/actions-global | Patch | | @commercetools-frontend/application-config | Patch | | @commercetools-frontend/application-shell-connectors | Patch | | @commercetools-frontend/assets | Patch | | @commercetools-frontend/babel-preset-mc-app | Patch | | @commercetools-frontend/browser-history | Patch | | @commercetools-frontend/constants | Patch | | @commercetools-frontend/create-mc-app | Patch | | @commercetools-frontend/eslint-config-mc-app | Patch | | @commercetools-frontend/i18n | Patch | | @commercetools-frontend/jest-preset-mc-app | Patch | | @commercetools-frontend/jest-stylelint-runner | Patch | | @commercetools-frontend/l10n | Patch | | @commercetools-frontend/mc-dev-authentication | Patch | | @commercetools-frontend/mc-html-template | Patch | | @commercetools-frontend/notifications | Patch | | @commercetools-frontend/permissions | Patch | | @commercetools-frontend/sdk | Patch | | @commercetools-frontend/sentry | Patch | | @commercetools-frontend/url-utils | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR