[dialog] Create new component and hook

docs/pages/experiments/dialog.module.css

@@ -0,0 +1,76 @@
+.page {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 16px;
+  font-family: IBM Plex Sans;
+
+  h1 {
+    font-family: General Sans;
+    font-weight: 600;
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+}
+
+.dialog {
+  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;
+  padding: 16px;
+
+  &::backdrop {
+    backdrop-filter: blur(8px);
+    background: radial-gradient(#cecdcf36, #8b94ab47);
+  }
+}
+
+.button {
+  background: #eee;
+  padding: 8px 16px;
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+  font-family: inherit;
+
+  &:hover {
+    background: #ffbf2b;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #ffbf2b;
+  }
+
+  &:active {
+    background: #cc9922;
+    border-color: #cc9922;
+
+    &:focus-visible {
+      outline-color: #cc9922;
+    }
+  }
+
+  & + .button {
+    margin-left: 8px;
+  }
+}
+
+.form {
+  display: flex;
+  gap: 16px;
+  margin-top: 24px;
+
+  & > * {
+    flex: 1;
+    margin: 0;
+  }
+}
+
+.nonmodal {
+  top: 20vh;
+}

docs/pages/experiments/dialog.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import * as Dialog from '@base_ui/react/Dialog';
+import clsx from 'clsx';
+import classes from './dialog.module.css';
+
+function UncontrolledDialogDemo() {
+  return (
+    <div>
+      <Dialog.Root closeOnClickOutside>
+        <Dialog.Trigger>
+          <button type="button" className={classes.button}>
+            Open
+          </button>
+        </Dialog.Trigger>
+        <Dialog.Popup className={classes.dialog}>
+          <Dialog.Title className={classes.title}>Dialog</Dialog.Title>
+          <Dialog.Description>This is a sample dialog</Dialog.Description>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget sapien id dolor rutrum
+            porta. Sed enim nulla, placerat eu tincidunt non, ultrices in lectus. Curabitur
+            pellentesque diam nec ligula hendrerit dapibus.
+          </p>
+
+          <form method="dialog" className={classes.form}>
+            <button type="submit" className={classes.button}>
+              Submit
+            </button>
+            <Dialog.Close className={classes.button}>Cancel</Dialog.Close>
+          </form>
+        </Dialog.Popup>
+      </Dialog.Root>
+    </div>
+  );
+}
+
+function ControlledDialogDemo() {
+  const [open, setOpen] = React.useState(false);
+  const [modal, setModal] = React.useState(true);
+
+  function setState(shouldOpen: boolean, shouldBeModal?: boolean) {
+    return () => {
+      setOpen(shouldOpen);
+      if (shouldBeModal !== undefined) {
+        setModal(shouldBeModal);
+      }
+    };
+  }
+
+  return (
+    <div>
+      <button type="button" className={classes.button} onClick={setState(true, false)}>
+        Open non-modal
+      </button>
+      <button type="button" className={classes.button} onClick={setState(true, true)}>
+        Open modal
+      </button>
+      <Dialog.Root open={open} modal={modal} onOpenChange={setState(false)} closeOnClickOutside>
+        <Dialog.Popup className={clsx(classes.dialog, modal ? classes.modal : classes.nonmodal)}>
+          <Dialog.Title className={classes.title}>Dialog</Dialog.Title>
+          <Dialog.Description>This is a sample dialog</Dialog.Description>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget sapien id dolor rutrum
+            porta. Sed enim nulla, placerat eu tincidunt non, ultrices in lectus. Curabitur
+            pellentesque diam nec ligula hendrerit dapibus.
+          </p>
+
+          <form method="dialog" className={classes.form}>
+            <button type="submit" className={classes.button}>
+              Submit
+            </button>
+            <button type="button" className={classes.button} onClick={setState(false)}>
+              Cancel
+            </button>
+          </form>
+        </Dialog.Popup>
+      </Dialog.Root>
+    </div>
+  );
+}
+
+export default function DialogExperiment() {
+  return (
+    <div className={classes.page}>
+      <h1>Dialog</h1>
+      <h2>Uncontrolled</h2>
+      <UncontrolledDialogDemo />
+      <h2>Controlled</h2>
+      <ControlledDialogDemo />
+    </div>
+  );
+}

packages/mui-base/src/Dialog/Close/DialogClose.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { defaultRenderFunctions } from '../../utils/defaultRenderFunctions';
+import { useDialogRootContext } from '../Root/DialogRootContext';
+
+const DialogClose = React.forwardRef(function DialogClose(
+  props: React.ComponentPropsWithRef<'button'>,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { open, onOpenChange } = useDialogRootContext();
+
+  const handleClick = React.useCallback(() => {
+    if (open) {
+      onOpenChange?.(false);
+    }
+  }, [open, onOpenChange]);
+
+  const rootProps = {
+    ...props,
+    onClick: handleClick,
+    ref: forwardedRef,
+  };
+
+  return defaultRenderFunctions.button(rootProps);
+});
+
+DialogClose.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+} as any;
+
+export { DialogClose };

packages/mui-base/src/Dialog/Description/DialogDescription.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { defaultRenderFunctions } from '../../utils/defaultRenderFunctions';
+import { useId } from '../../utils/useId';
+import { useDialogRootContext } from '../Root/DialogRootContext';
+
+const DialogDescription = React.forwardRef(function DialogDescription(
+  props: React.ComponentPropsWithRef<'p'>,
+  forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
+) {
+  const { id: idProp } = props;
+  const { registerDescription } = useDialogRootContext();
+  const id = useId(idProp);
+
+  React.useEffect(() => {
+    registerDescription(id ?? null);
+    return () => {
+      registerDescription(null);
+    };
+  }, [id, registerDescription]);
+
+  const rootProps = {
+    ...props,
+    id,
+    ref: forwardedRef,
+  };
+
+  return defaultRenderFunctions.p(rootProps);
+});
+
+DialogDescription.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+} as any;
+
+export { DialogDescription };