feat: Add reusable BottomSheet component

src/custom/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,90 @@
+import React, { useId } from 'react';
+import Slide, { SlideProps } from '@mui/material/Slide';
+import { Dialog } from '../../base/Dialog';
+import { DialogContent } from '../../base/DialogContent';
+import { IconButton } from '../../base/IconButton';
+import { Box } from '../../base/Box';
+import { Typography } from '../../base/Typography';
+import { Divider } from '../../base/Divider';
+import { CloseIcon } from '../../icons/Close';
+
+const SlideUp = React.forwardRef<unknown, SlideProps>((props, ref) => (
+  <Slide direction="up" ref={ref} {...props} />
+));
+SlideUp.displayName = 'SlideUp';
+
+export interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  /** @default '80vh' */
+  maxHeight?: string;
+  closeButtonAriaLabel?: string;
+}
+
+/**
+ * BottomSheet — a mobile-friendly dialog that slides up from the bottom of the screen.
+ */
+const BottomSheet = ({
+  open,
+  onClose,
+  title,
+  children,
+  maxHeight = '80vh',
+  closeButtonAriaLabel = 'Close',
+}: BottomSheetProps) => {
+  const titleId = useId();
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      fullWidth
+      aria-labelledby={title ? titleId : undefined}
+      slots={{ transition: SlideUp }}
+      sx={{
+        zIndex: 1600,
+        '& .MuiDialog-container': { alignItems: 'flex-end' },
+        '& .MuiDialog-paper': {
+          margin: 0,
+          width: '100%',
+          maxWidth: '100%',
+          borderRadius: '12px 12px 0 0',
+          maxHeight,
+        },
+      }}
+    >
+      {title && (
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              px: 2,
+              py: 1.25,
+              minHeight: 52,
+            }}
+          >
+            <Typography
+              id={titleId}
+              variant="subtitle1"
+              sx={{ fontWeight: 600, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+            >
+              {title}
+            </Typography>
+            <IconButton aria-label={closeButtonAriaLabel} onClick={onClose} size="small" edge="end">
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          <Divider />
+        </>
+      )}
+      <DialogContent sx={{ px: 2, py: 1.5, overflowY: 'auto' }}>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default BottomSheet;

src/custom/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { default as BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';

src/custom/Modal/index.tsx

@@ -1,5 +1,6 @@
 import { ButtonProps, DialogProps, styled } from '@mui/material';
 import React, { useRef, useState } from 'react';
+import { omit } from 'lodash';
 import { Box, Dialog, IconButton, Paper, Typography } from '../../base';
 import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
 import { iconLarge } from '../../constants/iconsSizes';
@@ -162,9 +163,8 @@ export const Modal: React.FC<ModalProps> = ({
    */
   const {
     fullScreen: initialFullScreenState = false,
-    fullWidth: _ignoredFullWidth,
     ...restProps
-  } = props;
+  } = omit(props, ['fullWidth']);
 
   const [fullScreen, setFullScreen] = useState(initialFullScreenState);
 

src/custom/index.tsx

@@ -172,3 +172,4 @@ export * from './ShareModal';
 export * from './UserSearchField';
 export * from './Workspaces';
 export * from './LiquidGlass';
+export * from './BottomSheet';