Support nested/parallel third-party dialogs#2339
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
🦋 Changeset detectedLatest commit: ce2fbf4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
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 |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit ce2fbf4:
|
@georgekaran Likely. If the third-party element is only appended to the DOM when it's visible, Ariakit will automatically consider it a nested dialog. Users will be able to interact with it as if it were part of the modal itself. Click, focus, etc. Everything will work without closing the underlying modal. This heuristic covers browser extensions like Grammarly, Google Translate, and probably more. Third-party libraries may also be contemplated here if they follow these rules. In fact, Ariakit itself is covered if you render a nested dialog outside of its parent, but only when it's open: <Dialog>
<button onClick={openNestedDialog} />
</Dialog>
{nestedDialogOpen && <Dialog />}It doesn't seem to be the case with React-Toastify, though. It looks like it appends a toast container element early. Since Ariakit can't tell the difference between this element and other elements on the page, it will be disabled by Ariakit when a modal opens. But this PR also adds a <Dialog
getPersistentElements={() => document.querySelectorAll(".Toastify")}
/> |
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @ariakit/core@0.1.5 ### Patch Changes - Updated `isFocusable` function to return `false` when the element is `inert` or is a descendant of an `inert` element. ([#2339](#2339)) - Fixed build target. ([#2355](#2355)) - Updated JSDocs. ## @ariakit/react@0.1.7 ### Patch Changes - Fixed `Menu` focusing on the first menu item rather than the menu container when opened with a mouse click. ([#2339](#2339)) - Added `getPersistentElements` prop to `Dialog` to better support third-party elements that are already in the DOM by the time the dialog is opened. ([#2339](#2339)) - Added support on `Dialog` for nested/parallel dialogs, such as portalled dialogs created by third-party libraries and extensions. ([#2339](#2339)) - Fixed nested `Dialog` closing when dragging from the nested dialog to the parent dialog. ([#2339](#2339)) - Fixed build target. ([#2355](#2355)) - Updated JSDocs. - Updated dependencies: `@ariakit/react-core@0.1.7`, `@ariakit/core@0.1.5`. ## @ariakit/react-core@0.1.7 ### Patch Changes - Fixed `Menu` focusing on the first menu item rather than the menu container when opened with a mouse click. ([#2339](#2339)) - Added `getPersistentElements` prop to `Dialog` to better support third-party elements that are already in the DOM by the time the dialog is opened. ([#2339](#2339)) - Added support on `Dialog` for nested/parallel dialogs, such as portalled dialogs created by third-party libraries and extensions. ([#2339](#2339)) - Fixed nested `Dialog` closing when dragging from the nested dialog to the parent dialog. ([#2339](#2339)) - Fixed build target. ([#2355](#2355)) - Updated JSDocs. - Updated dependencies: `@ariakit/core@0.1.5`. ## @ariakit/test@0.1.6 ### Patch Changes - Fixed build target. ([#2355](#2355)) - Fixed `mock-get-client-rects` module marking elements not connected to the DOM as visible. ([#2339](#2339)) - Updated dependencies: `@ariakit/core@0.1.5`. Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Closes #2089
Closes #2330
Closes #2232
This PR updates the modal behavior on
Dialog. Instead of including only the dialog element in the modal "box", we're now handling the whole document. This means we can include more elements other than the dialog.Elements added to the body after the modal dialog is opened will be automatically marked as nested dialogs. They won't close the underlying modal dialog when the user interacts with them. This covers most browser extensions, like Grammarly and Google Translate, and third-party libraries that only render their dialogs when they're open.
For third-party libraries that render elements early, like React-Toastify, Intercom, etc., a new
getPersistentElementsfunction prop can pass toDialogthe elements that should be part of the modal "box". For non-modal dialogs, likePopover, these elements will not hide the dialog when interacted with.