[AlertDialog] Move types to namespaces (#591)

docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx

@@ -19,7 +19,7 @@ export default function UnstyledDialogIntroduction() {
   );
 }
 
-function TriggerButton(props: AlertDialog.TriggerProps) {
+function TriggerButton(props: AlertDialog.Trigger.Props) {
   const className = `
     bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900
     py-2 px-4 rounded min-w-[80px] border-none font-sans
@@ -28,7 +28,7 @@ function TriggerButton(props: AlertDialog.TriggerProps) {
   return <AlertDialog.Trigger {...props} className={className} />;
 }
 
-function Popup(props: AlertDialog.PopupProps) {
+function Popup(props: AlertDialog.Popup.Props) {
   const className = `
     bg-slate-50 dark:bg-slate-900 border-[1px] border-solid border-slate-100 dark:border-slate-700
     min-w-[400px] rounded shadow-xl fixed top-2/4 left-2/4 z-[2100]
@@ -46,7 +46,7 @@ function Controls(props: React.ComponentPropsWithoutRef<'div'>) {
   );
 }
 
-function CloseButton(props: AlertDialog.CloseProps) {
+function CloseButton(props: AlertDialog.Close.Props) {
   const className = `
     bg-transparent border-[1px] border-solid border-slate-500 dark:border-slate-300
     text-slate-900 dark:text-slate-50 py-2 px-4 rounded font-sans min-w-[80px]
@@ -55,15 +55,15 @@ function CloseButton(props: AlertDialog.CloseProps) {
   return <AlertDialog.Close {...props} className={className} />;
 }
 
-function Title(props: AlertDialog.TitleProps) {
+function Title(props: AlertDialog.Title.Props) {
   return <AlertDialog.Title {...props} className="text-lg" />;
 }
 
-function Description(props: AlertDialog.DescriptionProps) {
+function Description(props: AlertDialog.Description.Props) {
   return <AlertDialog.Description {...props} />;
 }
 
-function Backdrop(props: AlertDialog.BackdropProps) {
+function Backdrop(props: AlertDialog.Backdrop.Props) {
   return (
     <AlertDialog.Backdrop
       {...props}

packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.tsx

@@ -2,13 +2,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { FloatingPortal } from '@floating-ui/react';
-import type {
-  AlertDialogBackdropOwnerState,
-  AlertDialogBackdropProps,
-} from './AlertDialogBackdrop.types';
 import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
 import { useDialogBackdrop } from '../../Dialog/Backdrop/useDialogBackdrop';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { TransitionStatus } from '../../utils/useTransitionStatus';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -21,7 +19,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
  * - [AlertDialogBackdrop API](https://base-ui.netlify.app/components/react-alert-dialog/#api-reference-AlertDialogBackdrop)
  */
 const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop(
-  props: AlertDialogBackdropProps,
+  props: AlertDialogBackdrop.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { render, className, keepMounted = false, ...other } = props;
@@ -38,7 +36,7 @@ const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop(
     onUnmount: handleUnmount,
   });
 
-  const ownerState: AlertDialogBackdropOwnerState = { open, transitionStatus };
+  const ownerState: AlertDialogBackdrop.OwnerState = { open, transitionStatus };
 
   const { renderElement } = useComponentRenderer({
     render: render ?? 'div',
@@ -72,6 +70,22 @@ const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop(
   return <FloatingPortal>{renderElement()}</FloatingPortal>;
 });
 
+namespace AlertDialogBackdrop {
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {
+    /**
+     * If `true`, the backdrop element is kept in the DOM when closed.
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+  }
+
+  export interface OwnerState {
+    open: boolean;
+    transitionStatus: TransitionStatus;
+  }
+}
+
 AlertDialogBackdrop.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

packages/mui-base/src/AlertDialog/Close/AlertDialogClose.tsx

@@ -1,10 +1,10 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { AlertDialogCloseOwnerState, AlertDialogCloseProps } from './AlertDialogClose.types';
 import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
 import { useDialogClose } from '../../Dialog/Close/useDialogClose';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -17,14 +17,14 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
  * - [AlertDialogClose API](https://base-ui.netlify.app/components/react-alert-dialog/#api-reference-AlertDialogClose)
  */
 const AlertDialogClose = React.forwardRef(function AlertDialogClose(
-  props: AlertDialogCloseProps,
+  props: AlertDialogClose.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const { render, className, ...other } = props;
   const { open, onOpenChange } = useAlertDialogRootContext();
   const { getRootProps } = useDialogClose({ open, onOpenChange });
 
-  const ownerState: AlertDialogCloseOwnerState = {
+  const ownerState: AlertDialogClose.OwnerState = {
     open,
   };
 
@@ -40,6 +40,14 @@ const AlertDialogClose = React.forwardRef(function AlertDialogClose(
   return renderElement();
 });
 
+namespace AlertDialogClose {
+  export interface Props extends BaseUIComponentProps<'button', OwnerState> {}
+
+  export interface OwnerState {
+    open: boolean;
+  }
+}
+
 AlertDialogClose.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx

@@ -1,14 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type {
-  AlertDialogDescriptionOwnerState,
-  AlertDialogDescriptionProps,
-} from './AlertDialogDescription.types';
 import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useId } from '../../utils/useId';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -21,13 +18,13 @@ import { useId } from '../../utils/useId';
  * - [AlertDialogDescription API](https://base-ui.netlify.app/components/react-alert-dialog/#api-reference-AlertDialogDescription)
  */
 const AlertDialogDescription = React.forwardRef(function AlertDialogDescription(
-  props: AlertDialogDescriptionProps,
+  props: AlertDialogDescription.Props,
   forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
 ) {
   const { render, className, id: idProp, ...other } = props;
   const { setDescriptionElementId, open } = useAlertDialogRootContext();
 
-  const ownerState: AlertDialogDescriptionOwnerState = {
+  const ownerState: AlertDialogDescription.OwnerState = {
     open,
   };
 
@@ -51,6 +48,14 @@ const AlertDialogDescription = React.forwardRef(function AlertDialogDescription(
   return renderElement();
 });
 
+namespace AlertDialogDescription {
+  export interface Props extends BaseUIComponentProps<'p', OwnerState> {}
+
+  export interface OwnerState {
+    open: boolean;
+  }
+}
+
 AlertDialogDescription.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx

@@ -2,11 +2,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
-import { AlertDialogPopupOwnerState, AlertDialogPopupProps } from './AlertDialogPopup.types';
 import { useDialogPopup } from '../../Dialog/Popup/useDialogPopup';
 import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { refType, HTMLElementType } from '../../utils/proptypes';
+import type { BaseUIComponentProps } from '../../utils/types';
+import type { TransitionStatus } from '../../utils/useTransitionStatus';
 
 /**
  *
@@ -19,7 +20,7 @@ import { refType, HTMLElementType } from '../../utils/proptypes';
  * - [AlertDialogPopup API](https://base-ui.netlify.app/components/react-alert-dialog/#api-reference-AlertDialogPopup)
  */
 const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
-  props: AlertDialogPopupProps,
+  props: AlertDialogPopup.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { className, container, id, keepMounted = false, render, ...other } = props;
@@ -35,7 +36,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
     ...rootContext,
   });
 
-  const ownerState: AlertDialogPopupOwnerState = {
+  const ownerState: AlertDialogPopup.OwnerState = {
     open,
     nestedOpenDialogCount,
     transitionStatus,
@@ -79,6 +80,27 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
   );
 });
 
+namespace AlertDialogPopup {
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {
+    /**
+     * The container element to which the popup is appended to.
+     */
+    container?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
+    /**
+     * If `true`, the dialog element is kept in the DOM when closed.
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+  }
+
+  export interface OwnerState {
+    open: boolean;
+    nestedOpenDialogCount: number;
+    transitionStatus: TransitionStatus;
+  }
+}
+
 AlertDialogPopup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { AlertDialogRootProps } from './AlertDialogRoot.types';
+import type { DialogRootProps } from '../../Dialog/Root/DialogRoot.types';
 import { AlertDialogRootContext } from './AlertDialogRootContext';
 import { useDialogRoot } from '../../Dialog/Root/useDialogRoot';
 
@@ -15,7 +15,7 @@ import { useDialogRoot } from '../../Dialog/Root/useDialogRoot';
  *
  * - [AlertDialogRoot API](https://base-ui.netlify.app/components/react-alert-dialog/#api-reference-AlertDialogRoot)
  */
-function AlertDialogRoot(props: AlertDialogRootProps) {
+function AlertDialogRoot(props: AlertDialogRoot.Props) {
   const { children, defaultOpen, onOpenChange, open: openProp, animated = true } = props;
 
   const dialogRootContext = React.useContext(AlertDialogRootContext);
@@ -43,6 +43,10 @@ function AlertDialogRoot(props: AlertDialogRootProps) {
   );
 }
 
+namespace AlertDialogRoot {
+  export type Props = Omit<DialogRootProps, 'modal' | 'dismissible'>;
+}
+
 AlertDialogRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts

@@ -1,8 +1,20 @@
 'use client';
 import * as React from 'react';
-import type { AlertDialogRootContextValue } from './AlertDialogRoot.types';
+import { UseDialogRootReturnValue } from '@base_ui/react/Dialog';
 
-export const AlertDialogRootContext = React.createContext<AlertDialogRootContextValue | undefined>(
+export interface AlertDialogRootContext extends UseDialogRootReturnValue {
+  /**
+   * If `true`, the dialog supports CSS-based animations and transitions.
+   * It is kept in the DOM until the animation completes.
+   */
+  animated: boolean;
+  /**
+   * Determines if the dialog is nested within a parent dialog.
+   */
+  hasParentDialog: boolean;
+}
+
+export const AlertDialogRootContext = React.createContext<AlertDialogRootContext | undefined>(
   undefined,
 );