Feedback Components

/**
 * Dialog component for displaying content in a modal overlay
 * @param props - Dialog props
 * @returns Dialog React component
 */
function Dialog(props: DialogProps): JSX.Element;

interface DialogProps extends StandardProps<ModalProps, DialogClassKey> {
  children?: React.ReactNode;
  fullScreen?: boolean;
  fullWidth?: boolean;
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
  onClose?: ModalProps['onClose'];
  open: boolean;
  PaperComponent?: React.ComponentType<PaperProps>;
  PaperProps?: Partial<PaperProps>;
  scroll?: 'body' | 'paper';
  TransitionComponent?: React.ComponentType<TransitionProps>;
  transitionDuration?: TransitionProps['timeout'];
  TransitionProps?: TransitionProps;
}

type DialogClassKey = 'root' | 'scrollPaper' | 'scrollBody' | 'container' | 'paper' | 'paperScrollPaper' | 'paperScrollBody' | 'paperWidthFalse' | 'paperWidthXs' | 'paperWidthSm' | 'paperWidthMd' | 'paperWidthLg' | 'paperWidthXl' | 'paperFullWidth' | 'paperFullScreen';

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@material-ui/core';

const [open, setOpen] = useState(false);

<Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
  <DialogTitle>Confirm Action</DialogTitle>
  <DialogContent>
    Are you sure you want to continue?
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setOpen(false)} color="primary">
      Cancel
    </Button>
    <Button onClick={() => setOpen(false)} color="primary" variant="contained">
      Confirm
    </Button>
  </DialogActions>
</Dialog>

/**
 * Title area of a dialog
 * @param props - Dialog title props
 * @returns Dialog title React component
 */
function DialogTitle(props: DialogTitleProps): JSX.Element;

interface DialogTitleProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogTitleClassKey> {
  children?: React.ReactNode;
  disableTypography?: boolean;
}

type DialogTitleClassKey = 'root';

/**
 * Main content area of a dialog
 * @param props - Dialog content props  
 * @returns Dialog content React component
 */
function DialogContent(props: DialogContentProps): JSX.Element;

interface DialogContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogContentClassKey> {
  children?: React.ReactNode;
  dividers?: boolean;
}

type DialogContentClassKey = 'root' | 'dividers';

/**
 * Text content for dialogs with proper styling
 * @param props - Dialog content text props
 * @returns Dialog content text React component
 */
function DialogContentText(props: DialogContentTextProps): JSX.Element;

interface DialogContentTextProps extends StandardProps<TypographyProps, DialogContentTextClassKey> {}

type DialogContentTextClassKey = 'root';

/**
 * Action area of a dialog for buttons and other controls
 * @param props - Dialog actions props
 * @returns Dialog actions React component
 */
function DialogActions(props: DialogActionsProps): JSX.Element;

interface DialogActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogActionsClassKey> {
  children?: React.ReactNode;
  disableSpacing?: boolean;
}

type DialogActionsClassKey = 'root' | 'spacing';

/**
 * Snackbar component for displaying brief notifications
 * @param props - Snackbar props
 * @returns Snackbar React component
 */
function Snackbar(props: SnackbarProps): JSX.Element;

interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, SnackbarClassKey> {
  action?: React.ReactNode;
  anchorOrigin?: SnackbarOrigin;
  autoHideDuration?: number | null;
  children?: React.ReactElement<any, any>;
  ClickAwayListenerProps?: Partial<ClickAwayListenerProps>;
  ContentProps?: Partial<SnackbarContentProps>;
  disableWindowBlurListener?: boolean;
  key?: any;
  message?: React.ReactNode;
  onClose?: (event: React.SyntheticEvent<any> | null, reason: SnackbarCloseReason) => void;
  onEnter?: TransitionHandlerProps['onEnter'];
  onEntered?: TransitionHandlerProps['onEntered'];
  onEntering?: TransitionHandlerProps['onEntering'];
  onExit?: TransitionHandlerProps['onExit'];
  onExited?: TransitionHandlerProps['onExited'];
  onExiting?: TransitionHandlerProps['onExiting'];
  open: boolean;
  resumeHideDuration?: number;
  TransitionComponent?: React.ComponentType<TransitionProps>;
  transitionDuration?: TransitionProps['timeout'];
  TransitionProps?: TransitionProps;
}

interface SnackbarOrigin {
  horizontal: 'left' | 'center' | 'right';
  vertical: 'top' | 'bottom';
}

type SnackbarCloseReason = 'timeout' | 'clickaway';
type SnackbarClassKey = 'root' | 'anchorOriginTopCenter' | 'anchorOriginBottomCenter' | 'anchorOriginTopRight' | 'anchorOriginBottomRight' | 'anchorOriginTopLeft' | 'anchorOriginBottomLeft';

import { Snackbar, IconButton } from '@material-ui/core';
import { Close as CloseIcon } from '@material-ui/icons';

const [open, setOpen] = useState(false);

<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={() => setOpen(false)}
  message="This is a notification message"
  action={
    <IconButton size="small" color="inherit" onClick={() => setOpen(false)}>
      <CloseIcon fontSize="small" />
    </IconButton>
  }
/>

/**
 * Content component for snackbars with message and action areas
 * @param props - Snackbar content props
 * @returns Snackbar content React component
 */
function SnackbarContent(props: SnackbarContentProps): JSX.Element;

interface SnackbarContentProps extends StandardProps<PaperProps, SnackbarContentClassKey> {
  action?: React.ReactNode;
  message?: React.ReactNode;
}

type SnackbarContentClassKey = 'root' | 'message' | 'action';

/**
 * Circular progress indicator for loading states  
 * @param props - Circular progress props
 * @returns Circular progress React component
 */
function CircularProgress(props: CircularProgressProps): JSX.Element;

interface CircularProgressProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CircularProgressClassKey> {
  color?: 'primary' | 'secondary' | 'inherit';
  disableShrink?: boolean;
  size?: number | string;
  thickness?: number;
  value?: number;
  variant?: 'determinate' | 'indeterminate' | 'static';
}

type CircularProgressClassKey = 'root' | 'static' | 'indeterminate' | 'colorPrimary' | 'colorSecondary' | 'svg' | 'circle' | 'circleStatic' | 'circleIndeterminate' | 'circleDisableShrink';

/**
 * Linear progress bar for loading states
 * @param props - Linear progress props  
 * @returns Linear progress React component
 */
function LinearProgress(props: LinearProgressProps): JSX.Element;

interface LinearProgressProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, LinearProgressClassKey> {
  color?: 'primary' | 'secondary';
  value?: number;
  valueBuffer?: number;
  variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
}

type LinearProgressClassKey = 'root' | 'colorPrimary' | 'colorSecondary' | 'determinate' | 'indeterminate' | 'buffer' | 'query' | 'dashed' | 'dashedColorPrimary' | 'dashedColorSecondary' | 'bar' | 'barColorPrimary' | 'barColorSecondary' | 'bar1Indeterminate' | 'bar1Determinate' | 'bar1Buffer' | 'bar2Indeterminate' | 'bar2Buffer';

import { CircularProgress, LinearProgress, Box } from '@material-ui/core';

// Circular progress
<CircularProgress />
<CircularProgress color="secondary" />
<CircularProgress variant="determinate" value={75} />

// Linear progress
<LinearProgress />
<LinearProgress color="secondary" />
<LinearProgress variant="determinate" value={50} />

// Progress with label
<Box display="flex" alignItems="center">
  <Box width="100%" mr={1}>
    <LinearProgress variant="determinate" value={progress} />
  </Box>
  <Box minWidth={35}>
    <Typography variant="body2" color="textSecondary">{`${Math.round(progress)}%`}</Typography>
  </Box>
</Box>

/**
 * Tooltip component for displaying contextual information on hover
 * @param props - Tooltip props
 * @returns Tooltip React component
 */
function Tooltip(props: TooltipProps): JSX.Element;

interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TooltipClassKey> {
  arrow?: boolean;
  children: React.ReactElement<any, any>;
  disableFocusListener?: boolean;
  disableHoverListener?: boolean;
  disableTouchListener?: boolean;
  enterDelay?: number;
  enterNextDelay?: number;
  enterTouchDelay?: number;
  id?: string;
  interactive?: boolean;
  leaveDelay?: number;
  leaveTouchDelay?: number;
  onClose?: (event: React.SyntheticEvent) => void;
  onOpen?: (event: React.SyntheticEvent) => void;
  open?: boolean;
  placement?: TooltipPlacement;
  PopperComponent?: React.ComponentType<PopperProps>;
  PopperProps?: Partial<PopperProps>;
  title: React.ReactNode;
  TransitionComponent?: React.ComponentType<TransitionProps>;
  TransitionProps?: TransitionProps;
}

type TooltipPlacement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
type TooltipClassKey = 'popper' | 'popperInteractive' | 'popperArrow' | 'tooltip' | 'tooltipArrow' | 'arrow' | 'touch' | 'tooltipPlacementLeft' | 'tooltipPlacementRight' | 'tooltipPlacementTop' | 'tooltipPlacementBottom';

import { Tooltip, Button, IconButton } from '@material-ui/core';
import { Delete as DeleteIcon } from '@material-ui/icons';

// Basic tooltip
<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

// Tooltip with custom placement and arrow
<Tooltip title="Add item to cart" placement="top" arrow>
  <Button variant="contained" color="primary">
    Add to Cart  
  </Button>
</Tooltip>

// Interactive tooltip
<Tooltip
  title="This tooltip is interactive"
  interactive
  placement="right"
>
  <Button>Interactive Tooltip</Button>
</Tooltip>

/**
 * Backdrop component for creating overlay effects behind dialogs and drawers
 * @param props - Backdrop props
 * @returns Backdrop React component
 */
function Backdrop(props: BackdropProps): JSX.Element;

interface BackdropProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, BackdropClassKey> {
  children?: React.ReactNode;
  invisible?: boolean;
  open: boolean;
  transitionDuration?: TransitionProps['timeout'];
}

type BackdropClassKey = 'root' | 'invisible';

/**
 * Expandable panel component for collapsible content sections
 * @param props - Expansion panel props
 * @returns Expansion panel React component
 */
function ExpansionPanel(props: ExpansionPanelProps): JSX.Element;

interface ExpansionPanelProps extends StandardProps<PaperProps, ExpansionPanelClassKey> {
  children: React.ReactNode;
  defaultExpanded?: boolean;
  disabled?: boolean;
  expanded?: boolean;
  onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void;
  TransitionComponent?: React.ComponentType<TransitionProps>;
  TransitionProps?: TransitionProps;
}

type ExpansionPanelClassKey = 'root' | 'rounded' | 'expanded' | 'disabled';

/**
 * Header/summary area of an expansion panel
 * @param props - Expansion panel summary props
 * @returns Expansion panel summary React component
 */
function ExpansionPanelSummary(props: ExpansionPanelSummaryProps): JSX.Element;

interface ExpansionPanelSummaryProps extends StandardProps<ButtonBaseProps, ExpansionPanelSummaryClassKey> {
  children?: React.ReactNode;
  expandIcon?: React.ReactNode;
  IconButtonProps?: Partial<IconButtonProps>;
}

type ExpansionPanelSummaryClassKey = 'root' | 'expanded' | 'focused' | 'disabled' | 'content' | 'contentExpanded' | 'expandIcon' | 'expandIconExpanded';

/**
 * Content area of an expansion panel
 * @param props - Expansion panel details props
 * @returns Expansion panel details React component
 */
function ExpansionPanelDetails(props: ExpansionPanelDetailsProps): JSX.Element;

interface ExpansionPanelDetailsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ExpansionPanelDetailsClassKey> {
  children?: React.ReactNode;
}

type ExpansionPanelDetailsClassKey = 'root';

/**
 * Action area of an expansion panel for buttons and controls
 * @param props - Expansion panel actions props
 * @returns Expansion panel actions React component
 */
function ExpansionPanelActions(props: ExpansionPanelActionsProps): JSX.Element;

interface ExpansionPanelActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ExpansionPanelActionsClassKey> {
  children?: React.ReactNode;
  disableSpacing?: boolean;
}

type ExpansionPanelActionsClassKey = 'root' | 'spacing';

import { 
  ExpansionPanel, 
  ExpansionPanelSummary, 
  ExpansionPanelDetails, 
  ExpansionPanelActions,
  Typography,
  Button
} from '@material-ui/core';
import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';

<ExpansionPanel>
  <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
    <Typography variant="h6">General Settings</Typography>
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>
    <Typography>
      Configure your general application settings here.
    </Typography>
  </ExpansionPanelDetails>
  <ExpansionPanelActions>
    <Button size="small">Cancel</Button>
    <Button size="small" color="primary">Save</Button>
  </ExpansionPanelActions>
</ExpansionPanel>