[Dialog] Move types to namespaces

docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx

@@ -26,7 +26,7 @@ export default function UnstyledDialogIntroduction() {
   );
 }
 
-function TriggerButton(props: Dialog.TriggerProps) {
+function TriggerButton(props: Dialog.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
@@ -35,7 +35,7 @@ function TriggerButton(props: Dialog.TriggerProps) {
   return <Dialog.Trigger {...props} className={className} />;
 }
 
-function Popup(props: Dialog.PopupProps) {
+function Popup(props: Dialog.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]
@@ -53,7 +53,7 @@ function Controls(props: React.ComponentPropsWithoutRef<'div'>) {
   );
 }
 
-function CloseButton(props: Dialog.CloseProps) {
+function CloseButton(props: Dialog.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]
@@ -62,15 +62,15 @@ function CloseButton(props: Dialog.CloseProps) {
   return <Dialog.Close {...props} className={className} />;
 }
 
-function Title(props: Dialog.TitleProps) {
+function Title(props: Dialog.Title.Props) {
   return <Dialog.Title {...props} className="text-lg" />;
 }
 
-function Description(props: Dialog.DescriptionProps) {
+function Description(props: Dialog.Description.Props) {
   return <Dialog.Description {...props} />;
 }
 
-function Backdrop(props: Dialog.BackdropProps) {
+function Backdrop(props: Dialog.Backdrop.Props) {
   return (
     <Dialog.Backdrop
       {...props}

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 type { DialogRootProps } from '../../Dialog/Root/DialogRoot.types';
+import type { DialogRoot } from '../../Dialog/Root/DialogRoot';
 import { AlertDialogRootContext } from './AlertDialogRootContext';
 import { useDialogRoot } from '../../Dialog/Root/useDialogRoot';
 
@@ -44,7 +44,7 @@ function AlertDialogRoot(props: AlertDialogRoot.Props) {
 }
 
 namespace AlertDialogRoot {
-  export type Props = Omit<DialogRootProps, 'modal' | 'dismissible'>;
+  export type Props = Omit<DialogRoot.Props, 'modal' | 'dismissible'>;
 }
 
 AlertDialogRoot.propTypes /* remove-proptypes */ = {

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

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import { UseDialogRootReturnValue } from '@base_ui/react/Dialog';
+import { type useDialogRoot } from '../../Dialog/Root/useDialogRoot';
 
-export interface AlertDialogRootContext extends UseDialogRootReturnValue {
+export interface AlertDialogRootContext extends useDialogRoot.ReturnValue {
   /**
    * If `true`, the dialog supports CSS-based animations and transitions.
    * It is kept in the DOM until the animation completes.

packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.tsx

@@ -2,10 +2,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { FloatingPortal } from '@floating-ui/react';
-import type { DialogBackdropOwnerState, DialogBackdropProps } from './DialogBackdrop.types';
 import { useDialogBackdrop } from './useDialogBackdrop';
 import { useDialogRootContext } from '../Root/DialogRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { type TransitionStatus } from '../../utils/useTransitionStatus';
+import { type BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -18,7 +19,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
  * - [DialogBackdrop API](https://base-ui.netlify.app/components/react-dialog/#api-reference-DialogBackdrop)
  */
 const DialogBackdrop = React.forwardRef(function DialogBackdrop(
-  props: DialogBackdropProps,
+  props: DialogBackdrop.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { render, className, keepMounted = false, ...other } = props;
@@ -35,7 +36,7 @@ const DialogBackdrop = React.forwardRef(function DialogBackdrop(
     onUnmount: handleUnmount,
   });
 
-  const ownerState: DialogBackdropOwnerState = React.useMemo(
+  const ownerState: DialogBackdrop.OwnerState = React.useMemo(
     () => ({ open, modal, transitionStatus }),
     [open, modal, transitionStatus],
   );
@@ -72,6 +73,23 @@ const DialogBackdrop = React.forwardRef(function DialogBackdrop(
   return <FloatingPortal>{renderElement()}</FloatingPortal>;
 });
 
+namespace DialogBackdrop {
+  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;
+    modal: boolean;
+    transitionStatus: TransitionStatus;
+  }
+}
+
 DialogBackdrop.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

packages/mui-base/src/Dialog/Backdrop/useDialogBackdrop.ts

@@ -1,13 +1,15 @@
 'use client';
 import * as React from 'react';
-import type { UseDialogBackdropParams, UseDialogBackdropReturnValue } from './DialogBackdrop.types';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useAnimatedElement } from '../../utils/useAnimatedElement';
 import { useForkRef } from '../../utils/useForkRef';
 import { useEventCallback } from '../../utils/useEventCallback';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { type TransitionStatus } from '../../utils/useTransitionStatus';
 
-export function useDialogBackdrop(params: UseDialogBackdropParams): UseDialogBackdropReturnValue {
+export function useDialogBackdrop(
+  params: useDialogBackdrop.Parameters,
+): useDialogBackdrop.ReturnValue {
   const { animated, open, ref, onMount: onMountParam, onUnmount: onUnmountParam } = params;
 
   const backdropRef = React.useRef<HTMLElement | null>(null);
@@ -43,3 +45,44 @@ export function useDialogBackdrop(params: UseDialogBackdropParams): UseDialogBac
     transitionStatus,
   };
 }
+
+export namespace useDialogBackdrop {
+  export interface Parameters {
+    /**
+     * 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 open.
+     */
+    open: boolean;
+    /**
+     * The ref to the background element.
+     */
+    ref: React.Ref<HTMLElement>;
+    /**
+     * Callback to invoke when the backdrop is mounted.
+     */
+    onMount: () => void;
+    /**
+     * Callback to invoke when the backdrop is unmounted.
+     */
+    onUnmount: () => void;
+  }
+
+  export interface ReturnValue {
+    /**
+     * Resolver for the root element props.
+     */
+    getRootProps: (externalProps?: Record<string, any>) => Record<string, any>;
+    /**
+     * Determines if the dialog should be mounted even if closed (as the exit animation is still in progress).
+     */
+    mounted: boolean;
+    /**
+     * The current transition status of the dialog.
+     */
+    transitionStatus: TransitionStatus;
+  }
+}

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

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

packages/mui-base/src/Dialog/Close/useDialogClose.ts

@@ -1,9 +1,8 @@
 'use client';
 import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
-import type { UseDialogCloseParameters, UseDialogCloseReturnValue } from './DialogClose.types';
 
-export function useDialogClose(params: UseDialogCloseParameters): UseDialogCloseReturnValue {
+export function useDialogClose(params: useDialogClose.Parameters): useDialogClose.ReturnValue {
   const { open, onOpenChange } = params;
   const handleClick = React.useCallback(() => {
     if (open) {
@@ -18,3 +17,23 @@ export function useDialogClose(params: UseDialogCloseParameters): UseDialogClose
     getRootProps,
   };
 }
+
+export namespace useDialogClose {
+  export interface Parameters {
+    /**
+     * Determines whether the dialog is open.
+     */
+    open: boolean;
+    /**
+     * Callback invoked when the dialog is being opened or closed.
+     */
+    onOpenChange: (open: boolean) => void;
+  }
+
+  export interface ReturnValue {
+    /**
+     * Resolver for the root element props.
+     */
+    getRootProps: (externalProps: React.HTMLAttributes<any>) => React.HTMLAttributes<any>;
+  }
+}

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

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