Add dialog-next-router example (#2369)

This PR adds a new example to the site using Next.js App Router. The
example is presented within an iframe with a chrome bar.

Alongside this, a few adjustments were made to the `Dialog` component:

- Fixed `DialogBackdrop` not including the `data-backdrop` attribute in
the initial render, causing a flash of unstyled content when the dialog
is initially open.
- Fixed `Dialog` calling `hideOnInteractOutside` twice when clicking on
the backdrop.
- The built-in `DialogBackdrop` component is no longer focusable.
- Call `autoFocusOnHide` and `autoFocusOnShow` with a `null` argument
when there's no element to focus or the element is not focusable. This
allows users to specify a fallback element to focus on hide or show.

These changes should make it easier to control the Dialog using the
Next.js App Router.

.changeset/dialog-backdrop-data-attribute.md

@@ -0,0 +1,6 @@
+---
+"@ariakit/react-core": patch
+"@ariakit/react": patch
+---
+
+Fixed `DialogBackdrop` not including the `data-backdrop` attribute in the initial render, causing a flash of unstyled content when the dialog is initially open. ([#2369](https://github.com/ariakit/ariakit/pull/2369))

.changeset/dialog-backdrop-duplicate-hide.md

@@ -0,0 +1,6 @@
+---
+"@ariakit/react-core": patch
+"@ariakit/react": patch
+---
+
+Fixed `Dialog` calling `hideOnInteractOutside` twice when clicking on the backdrop. ([#2369](https://github.com/ariakit/ariakit/pull/2369))

.changeset/dialog-backdrop-tabindex.md

@@ -0,0 +1,6 @@
+---
+"@ariakit/react-core": patch
+"@ariakit/react": patch
+---
+
+The built-in `DialogBackdrop` component is no longer focusable. ([#2369](https://github.com/ariakit/ariakit/pull/2369))

.changeset/dialog-final-focus.md

@@ -0,0 +1,6 @@
+---
+"@ariakit/react-core": patch
+"@ariakit/react": patch
+---
+
+Call `autoFocusOnHide` and `autoFocusOnShow` with a `null` argument when there's no element to focus or the element is not focusable. This allows users to specify a fallback element to focus on hide or show. ([#2369](https://github.com/ariakit/ariakit/pull/2369))

package.json

@@ -116,7 +116,7 @@
     "monaco-editor-webpack-plugin": "7.0.1",
     "monaco-textmate": "3.0.1",
     "monaco-vscode-textmate-theme-converter": "0.1.7",
-    "next": "13.3.4",
+    "next": "13.4.1",
     "null-loader": "4.0.1",
     "onigasm": "2.2.5",
     "open-cli": "7.2.0",

packages/ariakit-react-core/package.json

@@ -165,6 +165,7 @@
     "./dialog/utils/prepend-hidden-dismiss": "./src/dialog/utils/prepend-hidden-dismiss.ts",
     "./dialog/utils/orchestrate": "./src/dialog/utils/orchestrate.ts",
     "./dialog/utils/mark-tree-outside": "./src/dialog/utils/mark-tree-outside.ts",
+    "./dialog/utils/is-backdrop": "./src/dialog/utils/is-backdrop.ts",
     "./dialog/utils/disable-tree-outside": "./src/dialog/utils/disable-tree-outside.ts",
     "./dialog/utils/disable-accessibility-tree-outside": "./src/dialog/utils/disable-accessibility-tree-outside.ts",
     "./dialog/dialog": "./src/dialog/dialog.tsx",

packages/ariakit-react-core/src/dialog/dialog-backdrop.tsx

@@ -1,29 +1,14 @@
-import type {
-  KeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  ReactNode,
-} from "react";
+import type { ReactNode } from "react";
 import { useMemo, useRef } from "react";
-import { isSelfTarget } from "@ariakit/core/utils/events";
 import { noop } from "@ariakit/core/utils/misc";
 import { useDisclosureContent } from "../disclosure/disclosure-content.js";
-import {
-  useBooleanEvent,
-  useEvent,
-  useForkRef,
-  useSafeLayoutEffect,
-} from "../utils/hooks.js";
+import { useForkRef, useSafeLayoutEffect } from "../utils/hooks.js";
 import type { DialogProps } from "./dialog.js";
-import { usePreviousMouseDownRef } from "./utils/use-previous-mouse-down-ref.js";
+import { markAncestor } from "./utils/mark-tree-outside.js";
 
 type DialogBackdropProps = Pick<
   DialogProps,
-  | "store"
-  | "backdrop"
-  | "backdropProps"
-  | "hideOnInteractOutside"
-  | "hideOnEscape"
-  | "hidden"
+  "store" | "backdrop" | "backdropProps" | "hidden"
 > & {
   children?: ReactNode;
 };
@@ -32,8 +17,6 @@ export function DialogBackdrop({
   store,
   backdrop,
   backdropProps,
-  hideOnInteractOutside = true,
-  hideOnEscape = true,
   hidden,
   children,
 }: DialogBackdropProps) {
@@ -59,47 +42,24 @@ export function DialogBackdrop({
     backdrop.style.zIndex = getComputedStyle(dialog).zIndex;
   }, [contentElement]);
 
-  const onClickProp = backdropProps?.onClick;
-  const hideOnInteractOutsideProp = useBooleanEvent(hideOnInteractOutside);
-  const mounted = store.useState("mounted");
-  const previousMouseDownRef = usePreviousMouseDownRef(mounted);
-
-  const onClick = useEvent((event: ReactMouseEvent<HTMLDivElement>) => {
-    onClickProp?.(event);
-    if (event.defaultPrevented) return;
-    if (!isSelfTarget(event)) return;
-    if (previousMouseDownRef.current !== event.currentTarget) return;
-    if (!hideOnInteractOutsideProp(event)) return;
-    event.stopPropagation();
-    store.hide();
-  });
-
-  const onKeyDownProp = backdropProps?.onKeyDown;
-  const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
-
-  // When hideOnInteractOutside is false and the backdrop is clicked, the
-  // backdrop will receive focus (because we set the tabIndex on it). Therefore,
-  // the Escape key will not be captured by the Dialog component. So we listen
-  // to it here.
-  const onKeyDown = useEvent((event: KeyboardEvent<HTMLDivElement>) => {
-    onKeyDownProp?.(event);
-    if (event.defaultPrevented) return;
-    if (event.key !== "Escape") return;
-    if (!isSelfTarget(event)) return;
-    if (!hideOnEscapeProp(event)) return;
-    store.hide();
-  });
+  // Mark the backdrop element as an ancestor of the dialog, otherwise clicking
+  // on it won't close the dialog when the dialog uses portal, in which case
+  // elements are only marked outside the portal element.
+  useSafeLayoutEffect(() => {
+    const id = contentElement?.id;
+    if (!id) return;
+    const backdrop = ref.current;
+    if (!backdrop) return;
+    return markAncestor(backdrop, id);
+  }, [contentElement]);
 
   const props = useDisclosureContent({
     store,
     id: undefined,
     role: "presentation",
-    tabIndex: -1,
     hidden,
     ...backdropProps,
     ref: useForkRef(backdropProps?.ref, ref),
-    onClick,
-    onKeyDown,
     style: {
       position: "fixed",
       top: 0,
@@ -113,7 +73,7 @@ export function DialogBackdrop({
   const Component = typeof backdrop !== "boolean" ? backdrop || "div" : "div";
 
   return (
-    <Component {...props} data-backdrop={contentElement?.id}>
+    <Component {...props} data-backdrop={contentElement?.id || ""}>
       {children}
     </Component>
   );