[Dialog] Create new component and hook

docs/data/base/components/dialog/NestedDialogs.js

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import * as BaseDialog from '@base_ui/react/Dialog';
+import { styled } from '@mui/system';
+
+export default function NestedDialogs() {
+  return (
+    <BaseDialog.Root softClose>
+      <Trigger>Open</Trigger>
+      <Popup>
+        <Title>Dialog 1</Title>
+        <BaseDialog.Root softClose>
+          <Trigger>Open Nested</Trigger>
+          <Popup>
+            <Title>Dialog 2</Title>
+            <BaseDialog.Root softClose>
+              <Trigger>Open Nested</Trigger>
+              <Popup>
+                <Title>Dialog 3</Title>
+                <Close>Close</Close>
+              </Popup>
+            </BaseDialog.Root>
+            <Close>Close</Close>
+          </Popup>
+        </BaseDialog.Root>
+        <Close>Close</Close>
+      </Popup>
+    </BaseDialog.Root>
+  );
+}
+
+const Popup = styled(BaseDialog.Popup)`
+  --transition-duration: 150ms;
+
+  background: #fff;
+  border: 1px solid #f5f5f5;
+  min-width: 300px;
+  max-width: 500px;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  padding: 16px;
+  font-family: IBM Plex Sans;
+  z-index: 1;
+  transform: translate(-50%, -50%);
+  opacity: calc(pow(0.95, var(--nested-dialogs)));
+  transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs))))
+    translateY(calc(-30px * var(--nested-dialogs)));
+  visibility: hidden;
+  opacity: 0.5;
+  transition:
+    transform var(--transition-duration) ease-in,
+    opacity var(--transition-duration) ease-in,
+    visibility var(--transition-duration) step-end;
+
+  &[data-state='open'] {
+    @starting-style {
+      & {
+        transform: translate(-50%, -35%) scale(0.8) translateY(0);
+        opacity: 0.5;
+      }
+    }
+
+    visibility: visible;
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
+      translateY(calc(-30px * var(--nested-dialogs)));
+    transition:
+      transform var(--transition-duration) ease-out,
+      opacity var(--transition-duration) ease-out,
+      visibility var(--transition-duration) step-start;
+  }
+`;
+
+const Title = styled(BaseDialog.Title)`
+  font-size: 1.5rem;
+  font-weight: 600;
+`;
+
+const Trigger = styled(BaseDialog.Trigger)`
+  background-color: #000;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 2px;
+  font-family: IBM Plex Sans;
+  margin: 4px;
+`;
+
+const Close = styled(BaseDialog.Close)`
+  background-color: #000;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 2px;
+  font-family: IBM Plex Sans;
+  margin: 4px;
+`;

docs/data/base/components/dialog/NestedDialogs.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import * as BaseDialog from '@base_ui/react/Dialog';
+import { styled } from '@mui/system';
+
+export default function NestedDialogs() {
+  return (
+    <BaseDialog.Root softClose>
+      <Trigger>Open</Trigger>
+      <Popup>
+        <Title>Dialog 1</Title>
+        <BaseDialog.Root softClose>
+          <Trigger>Open Nested</Trigger>
+          <Popup>
+            <Title>Dialog 2</Title>
+            <BaseDialog.Root softClose>
+              <Trigger>Open Nested</Trigger>
+              <Popup>
+                <Title>Dialog 3</Title>
+                <Close>Close</Close>
+              </Popup>
+            </BaseDialog.Root>
+            <Close>Close</Close>
+          </Popup>
+        </BaseDialog.Root>
+        <Close>Close</Close>
+      </Popup>
+    </BaseDialog.Root>
+  );
+}
+
+const Popup = styled(BaseDialog.Popup)`
+  --transition-duration: 150ms;
+
+  background: #fff;
+  border: 1px solid #f5f5f5;
+  min-width: 300px;
+  max-width: 500px;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  padding: 16px;
+  font-family: IBM Plex Sans;
+  z-index: 1;
+  transform: translate(-50%, -50%);
+  opacity: calc(pow(0.95, var(--nested-dialogs)));
+  transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs))))
+    translateY(calc(-30px * var(--nested-dialogs)));
+  visibility: hidden;
+  opacity: 0.5;
+  transition:
+    transform var(--transition-duration) ease-in,
+    opacity var(--transition-duration) ease-in,
+    visibility var(--transition-duration) step-end;
+
+  &[data-state='open'] {
+    @starting-style {
+      & {
+        transform: translate(-50%, -35%) scale(0.8) translateY(0);
+        opacity: 0.5;
+      }
+    }
+
+    visibility: visible;
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
+      translateY(calc(-30px * var(--nested-dialogs)));
+    transition:
+      transform var(--transition-duration) ease-out,
+      opacity var(--transition-duration) ease-out,
+      visibility var(--transition-duration) step-start;
+  }
+`;
+
+const Title = styled(BaseDialog.Title)`
+  font-size: 1.5rem;
+  font-weight: 600;
+`;
+
+const Trigger = styled(BaseDialog.Trigger)`
+  background-color: #000;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 2px;
+  font-family: IBM Plex Sans;
+  margin: 4px;
+`;
+
+const Close = styled(BaseDialog.Close)`
+  background-color: #000;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 2px;
+  font-family: IBM Plex Sans;
+  margin: 4px;
+`;

docs/data/base/components/dialog/UnstyledDialogIntroduction/css/index.js

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import * as Dialog from '@base_ui/react/Dialog';
+import { useTheme } from '@mui/system';
+
+export default function UnstyledDialogIntroduction() {
+  return (
+    <React.Fragment>
+      <Dialog.Root softClose>
+        <Dialog.Trigger className="trigger">Open dialog</Dialog.Trigger>
+        <Dialog.Backdrop className="backdrop" />
+        <Dialog.Popup className="popup">
+          <Dialog.Title className="title">Confirm</Dialog.Title>
+          <Dialog.Description>Are you sure you want to do this?</Dialog.Description>
+          <div className="controls">
+            <Dialog.Close className="close">Yes</Dialog.Close>
+            <Dialog.Close className="close">No</Dialog.Close>
+          </div>
+        </Dialog.Popup>
+      </Dialog.Root>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const grey = {
+  900: '#0f172a',
+  800: '#1e293b',
+  700: '#334155',
+  500: '#64748b',
+  300: '#cbd5e1',
+  200: '#e2e8f0',
+  100: '#f1f5f9',
+  50: '#f8fafc',
+};
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+        .popup {
+          background: ${isDarkMode ? grey[900] : grey[50]};
+          border: 1px solid ${isDarkMode ? grey[700] : grey[100]};
+          min-width: 400px;
+          border-radius: 4px;
+          box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          font-family: IBM Plex Sans;
+          transform: translate(-50%, -50%);
+          padding: 16px;
+          z-index: 2100;
+        }
+
+        .trigger {
+          background-color: ${isDarkMode ? grey[50] : grey[900]};
+          color: ${isDarkMode ? grey[900] : grey[50]};
+          padding: 8px 16px;
+          border-radius: 4px;
+          border: none;
+          font-family:
+            IBM Plex Sans,
+            sans-serif;
+
+          &:hover {
+            background-color: ${isDarkMode ? grey[200] : grey[700]};
+          }
+        }
+
+        .close {
+          background-color: transparent;
+          border: 1px solid ${isDarkMode ? grey[300] : grey[500]};
+          color: ${isDarkMode ? grey[50] : grey[900]};
+          padding: 8px 16px;
+          border-radius: 4px;
+          font-family: IBM Plex Sans, sans-serif;
+          min-width: 80px;
+
+          &:hover {
+            background-color: ${isDarkMode ? grey[700] : grey[200]};
+          }
+        }
+
+        .controls {
+          display: flex;
+          flex-direction: row-reverse;
+          background: ${isDarkMode ? grey[800] : grey[100]};
+          gap: 8px;
+          padding: 16px;
+          margin: 32px -16px -16px;
+        }
+
+        .title {
+          font-size: 1.25rem;
+        }
+
+        .backdrop {
+          background: rgba(0, 0, 0, 0.35);
+          position: fixed;
+          inset: 0;
+          backdrop-filter: blur(4px);
+          z-index: 2000;
+        }
+    `}
+    </style>
+  );
+}