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]

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]

🦋 Changeset detected

Latest commit: f289bba

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