MUI Docs Infra Documentation

Warning

This is an internal project, and is not intended for public use. No support or stability guarantees are provided.

Component API

Root

A simple component that displays a title and optional children.

Prop	Type	Description
onStateChange	`\| ((details: Component.Root.ChangeEventDetails) => void) \| undefined`	Callback fired when the state changes. Receives the event details containing previous and new states.
partState	`Component.Part.State \| undefined`	Optional state from the Part component. This demonstrates cross-component type references.
title	`string`	The title to display
disabled	`boolean \| undefined`	Whether the component is disabled
children	`React.ReactNode \| undefined`	Child elements

Data Attribute	Description	Default
data-disabled	Present when the component is disabled.
data-title	Present when the component has a title.

Component.Root.Props

type ComponentRootProps = {
  /** The title to display */
  title: string;
  /** Whether the component is disabled */
  disabled?: boolean;
  /** Child elements */
  children?: React.ReactNode;
  /**
   * Callback fired when the state changes.
   * Receives the event details containing previous and new states.
   */
  onStateChange?: (details: Component.Root.ChangeEventDetails) => void;
  /**
   * Optional state from the Part component.
   * This demonstrates cross-component type references.
   */
  partState?: Component.Part.State;
}

Component.Root.State

type ComponentRootState = {
  /** Whether the component is disabled */
  disabled: boolean;
  /** Whether the component is active */
  active: boolean;
}

Component.Root.ChangeEventDetails

type ComponentRootChangeEventDetails = {
  /** The previous state */
  previousState: Component.Root.State;
  /** The new state */
  newState: Component.Root.State;
}

Part

A simple component that displays a title and optional children.

Prop	Type	Description
input	`InputType \| undefined`
title	`string`	The title to display
disabled	`boolean \| undefined`	Whether the component is disabled
children	`React.ReactNode \| undefined`	Child elements

Data Attribute	Description	Default
data-disabled	Present when the component is disabled.
data-title	Present when the component has a title.

Component.Part.Props

type ComponentPartProps = {
  /** The title to display */
  title: string;
  /** Whether the component is disabled */
  disabled?: boolean;
  input?: InputType;
  /** Child elements */
  children?: React.ReactNode;
}

Component.Part.State

type ComponentPartState = {
  /** Whether the part is visible */
  visible: boolean;
  /** Whether the part is expanded */
  expanded: boolean;
}

Additional Types

InputType

type InputType =
  | 'text'
  | 'number'
  | 'email'
  | 'password'
  | 'date'
  | 'checkbox'
  | 'radio'
  | 'file'
  | 'hidden'
  | 'submit'
  | 'reset'
  | 'button'
  | 'color'
  | 'datetime-local'
  | 'month'
  | 'range'
  | 'search'
  | 'tel'
  | 'time'
  | 'url'
  | 'week'

import * as React from 'react';
import { TypesComponent as ComponentTypes, TypesComponentAdditional } from './types';

export function TypesComponent() {
  return (
    <div>
      <h3>Component API</h3>
      <h3>Root</h3>
      <ComponentTypes.Root />
      <h3>Part</h3>
      <ComponentTypes.Part />
      <h3>Additional Types</h3>
      <TypesComponentAdditional />
    </div>
  );
}

ExpandCollapse