[DialogContent] Add divider prop type for TypeScript (#15273)

This PR adds the TS demo for ConfirmationDialog. This was separated from the main PR (#15271) because more changes were required for this demo.

Co-authored-by: Sebastian Silbermann <[email protected]>

docs/src/pages/demos/dialogs/ConfirmationDialog.js

@@ -31,39 +31,40 @@ const options = [
 ];
 
 function ConfirmationDialogRaw(props) {
-  const [value, setValue] = React.useState(props.value);
+  const { onClose, value: valueProp, ...other } = props;
+  const [value, setValue] = React.useState(valueProp);
   const radioGroupRef = React.useRef(null);
 
-  React.useEffect(() => {
-    setValue(props.value);
-  }, [props.value]);
+  if (valueProp !== value) {
+    setValue(valueProp);
+  }
 
   function handleEntering() {
-    radioGroupRef.current.focus();
+    if (radioGroupRef.current != null) {
+      radioGroupRef.current.focus();
+    }
   }
 
   function handleCancel() {
-    props.onClose(props.value);
+    onClose(value);
   }
 
   function handleOk() {
-    props.onClose(value);
+    onClose(value);
   }
 
   function handleChange(event, newValue) {
     setValue(newValue);
   }
 
-  const { value: valueProps, ...otherProps } = props;
-
   return (
     <Dialog
       disableBackdropClick
       disableEscapeKeyDown
       maxWidth="xs"
       onEntering={handleEntering}
       aria-labelledby="confirmation-dialog-title"
-      {...otherProps}
+      {...other}
     >
       <DialogTitle id="confirmation-dialog-title">Phone Ringtone</DialogTitle>
       <DialogContent dividers>

docs/src/pages/demos/dialogs/ConfirmationDialog.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const options = [
+  'None',
+  'Atria',
+  'Callisto',
+  'Dione',
+  'Ganymede',
+  'Hangouts Call',
+  'Luna',
+  'Oberon',
+  'Phobos',
+  'Pyxis',
+  'Sedna',
+  'Titania',
+  'Triton',
+  'Umbriel',
+];
+
+export interface ConfirmationDialogRawProps {
+  classes: Record<'paper', 'string'>;
+  value: string;
+  open: boolean;
+  onClose: (value: string) => void;
+}
+
+function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
+  const { onClose, value: valueProp, ...other } = props;
+  const [value, setValue] = React.useState(valueProp);
+  const radioGroupRef = React.useRef<HTMLElement>(null);
+
+  if (valueProp !== value) {
+    setValue(valueProp);
+  }
+
+  function handleEntering() {
+    if (radioGroupRef.current != null) {
+      radioGroupRef.current.focus();
+    }
+  }
+
+  function handleCancel() {
+    onClose(value);
+  }
+
+  function handleOk() {
+    onClose(value);
+  }
+
+  function handleChange(event: React.ChangeEvent<{}>, newValue: string) {
+    setValue(newValue);
+  }
+
+  return (
+    <Dialog
+      disableBackdropClick
+      disableEscapeKeyDown
+      maxWidth="xs"
+      onEntering={handleEntering}
+      aria-labelledby="confirmation-dialog-title"
+      {...other}
+    >
+      <DialogTitle id="confirmation-dialog-title">Phone Ringtone</DialogTitle>
+      <DialogContent dividers>
+        <RadioGroup
+          ref={radioGroupRef}
+          aria-label="Ringtone"
+          name="ringtone"
+          value={value}
+          onChange={handleChange}
+        >
+          {options.map(option => (
+            <FormControlLabel value={option} key={option} control={<Radio />} label={option} />
+          ))}
+        </RadioGroup>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleCancel} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={handleOk} color="primary">
+          Ok
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+ConfirmationDialogRaw.propTypes = {
+  onClose: PropTypes.func,
+  value: PropTypes.string,
+};
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+  paper: {
+    width: '80%',
+    maxHeight: 435,
+  },
+}));
+
+function ConfirmationDialog() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState('Dione');
+
+  function handleClickListItem() {
+    setOpen(true);
+  }
+
+  function handleClose(newValue: string) {
+    setOpen(false);
+    setValue(newValue);
+  }
+
+  return (
+    <div className={classes.root}>
+      <List>
+        <ListItem button divider disabled>
+          <ListItemText primary="Interruptions" />
+        </ListItem>
+        <ListItem
+          button
+          divider
+          aria-haspopup="true"
+          aria-controls="ringtone-menu"
+          aria-label="Phone ringtone"
+          onClick={handleClickListItem}
+        >
+          <ListItemText primary="Phone ringtone" secondary={value} />
+        </ListItem>
+        <ListItem button divider disabled>
+          <ListItemText primary="Default notification ringtone" secondary="Tethys" />
+        </ListItem>
+        <ConfirmationDialogRaw
+          classes={{
+            paper: classes.paper,
+          }}
+          open={open}
+          onClose={handleClose}
+          value={value}
+        />
+      </List>
+    </div>
+  );
+}
+
+export default ConfirmationDialog;

packages/material-ui/src/DialogContent/DialogContent.d.ts

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { StandardProps } from '..';
 
 export interface DialogContentProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogContentClassKey> {}
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogContentClassKey> {
+  dividers?: boolean;
+}
 
 export type DialogContentClassKey = 'root';