[joy-ui][Drawer] Add Drawer component (#38169)

docs/data/joy/components/drawer/DrawerAnchor.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Drawer from '@mui/joy/Drawer';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import Button from '@mui/joy/Button';
+import List from '@mui/joy/List';
+import Divider from '@mui/joy/Divider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+export default function DrawerAnchor() {
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+
+  const toggleDrawer = (anchor, open) => (event) => {
+    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+      return;
+    }
+
+    setState({ ...state, [anchor]: open });
+  };
+
+  const list = (anchor) => (
+    <Box
+      role="presentation"
+      onClick={toggleDrawer(anchor, false)}
+      onKeyDown={toggleDrawer(anchor, false)}
+    >
+      <List>
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text) => (
+          <ListItem key={text}>
+            <ListItemButton>{text}</ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {['All mail', 'Trash', 'Spam'].map((text) => (
+          <ListItem key={text}>
+            <ListItemButton>{text}</ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  return (
+    <React.Fragment>
+      <ButtonGroup variant="outlined">
+        {['left', 'right', 'top', 'bottom'].map((anchor) => (
+          <Button key={anchor} onClick={toggleDrawer(anchor, true)}>
+            {anchor}
+          </Button>
+        ))}
+      </ButtonGroup>
+      {['left', 'right', 'top', 'bottom'].map((anchor) => (
+        <Drawer
+          key={anchor}
+          anchor={anchor}
+          open={state[anchor]}
+          onClose={toggleDrawer(anchor, false)}
+        >
+          {list(anchor)}
+        </Drawer>
+      ))}
+    </React.Fragment>
+  );
+}

docs/data/joy/components/drawer/DrawerAnchor.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Drawer from '@mui/joy/Drawer';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import Button from '@mui/joy/Button';
+import List from '@mui/joy/List';
+import Divider from '@mui/joy/Divider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+type Anchor = 'top' | 'left' | 'bottom' | 'right';
+
+export default function DrawerAnchor() {
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+
+  const toggleDrawer =
+    (anchor: Anchor, open: boolean) =>
+    (event: React.KeyboardEvent | React.MouseEvent) => {
+      if (
+        event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+      ) {
+        return;
+      }
+
+      setState({ ...state, [anchor]: open });
+    };
+
+  const list = (anchor: Anchor) => (
+    <Box
+      role="presentation"
+      onClick={toggleDrawer(anchor, false)}
+      onKeyDown={toggleDrawer(anchor, false)}
+    >
+      <List>
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text) => (
+          <ListItem key={text}>
+            <ListItemButton>{text}</ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {['All mail', 'Trash', 'Spam'].map((text) => (
+          <ListItem key={text}>
+            <ListItemButton>{text}</ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  return (
+    <React.Fragment>
+      <ButtonGroup variant="outlined">
+        {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
+          <Button key={anchor} onClick={toggleDrawer(anchor, true)}>
+            {anchor}
+          </Button>
+        ))}
+      </ButtonGroup>
+      {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
+        <Drawer
+          key={anchor}
+          anchor={anchor}
+          open={state[anchor]}
+          onClose={toggleDrawer(anchor, false)}
+        >
+          {list(anchor)}
+        </Drawer>
+      ))}
+    </React.Fragment>
+  );
+}

docs/data/joy/components/drawer/DrawerBasic.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Drawer from '@mui/joy/Drawer';
+import Button from '@mui/joy/Button';
+import List from '@mui/joy/List';
+import Divider from '@mui/joy/Divider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+export default function DrawerBasic() {
+  const [open, setOpen] = React.useState(false);
+
+  const toggleDrawer = (inOpen) => (event) => {
+    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+      return;
+    }
+
+    setOpen(inOpen);
+  };
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <Button variant="outlined" color="neutral" onClick={toggleDrawer(true)}>
+        Open drawer
+      </Button>
+      <Drawer open={open} onClose={toggleDrawer(false)}>
+        <Box
+          role="presentation"
+          onClick={toggleDrawer(false)}
+          onKeyDown={toggleDrawer(false)}
+        >
+          <List>
+            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text) => (
+              <ListItem key={text}>
+                <ListItemButton>{text}</ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+          <List>
+            {['All mail', 'Trash', 'Spam'].map((text) => (
+              <ListItem key={text}>
+                <ListItemButton>{text}</ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Drawer>
+    </Box>
+  );
+}

docs/data/joy/components/drawer/DrawerBasic.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Drawer from '@mui/joy/Drawer';
+import Button from '@mui/joy/Button';
+import List from '@mui/joy/List';
+import Divider from '@mui/joy/Divider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+export default function DrawerBasic() {
+  const [open, setOpen] = React.useState(false);
+
+  const toggleDrawer =
+    (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
+      if (
+        event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+      ) {
+        return;
+      }
+
+      setOpen(inOpen);
+    };
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <Button variant="outlined" color="neutral" onClick={toggleDrawer(true)}>
+        Open drawer
+      </Button>
+      <Drawer open={open} onClose={toggleDrawer(false)}>
+        <Box
+          role="presentation"
+          onClick={toggleDrawer(false)}
+          onKeyDown={toggleDrawer(false)}
+        >
+          <List>
+            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text) => (
+              <ListItem key={text}>
+                <ListItemButton>{text}</ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+          <List>
+            {['All mail', 'Trash', 'Spam'].map((text) => (
+              <ListItem key={text}>
+                <ListItemButton>{text}</ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Drawer>
+    </Box>
+  );
+}

docs/data/joy/components/drawer/DrawerCloseButton.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Drawer from '@mui/joy/Drawer';
+import DialogTitle from '@mui/joy/DialogTitle';
+import ModalClose from '@mui/joy/ModalClose';
+
+export default function DrawerCloseButton() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open drawer
+      </Button>
+      <Drawer open={open} onClose={() => setOpen(false)}>
+        <ModalClose />
+        <DialogTitle>Title</DialogTitle>
+      </Drawer>
+    </Box>
+  );
+}

docs/data/joy/components/drawer/DrawerCloseButton.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Drawer from '@mui/joy/Drawer';
+import DialogTitle from '@mui/joy/DialogTitle';
+import ModalClose from '@mui/joy/ModalClose';
+
+export default function DrawerCloseButton() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open drawer
+      </Button>
+      <Drawer open={open} onClose={() => setOpen(false)}>
+        <ModalClose />
+        <DialogTitle>Title</DialogTitle>
+      </Drawer>
+    </Box>
+  );
+}

docs/data/joy/components/drawer/DrawerCloseButton.tsx.preview

@@ -0,0 +1,7 @@
+<Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+  Open drawer
+</Button>
+<Drawer open={open} onClose={() => setOpen(false)}>
+  <ModalClose />
+  <DialogTitle>Title</DialogTitle>
+</Drawer>