snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/toolbox/components/web/JitsiPortal.tsx

@@ -0,0 +1,58 @@
+import React, { ReactNode } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import DialogPortal from './DialogPortal';
+
+interface IProps {
+
+    /**
+     * The component(s) to be displayed within the drawer portal.
+     */
+    children: ReactNode;
+
+    /**
+     * Class name used to add custom styles to the portal.
+     */
+    className?: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        portal: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 351,
+            borderRadius: '16px 16px 0 0',
+
+            '&.notification-portal': {
+                zIndex: 901
+            },
+
+            '&::after': {
+                content: '""',
+                backgroundColor: theme.palette.toolboxBackground,
+                marginBottom: 'env(safe-area-inset-bottom, 0)'
+            }
+        }
+    };
+});
+
+/**
+ * Component meant to render a drawer at the bottom of the screen,
+ * by creating a portal containing the component's children.
+ *
+ * @returns {ReactElement}
+ */
+function JitsiPortal({ children, className }: IProps) {
+    const { classes, cx } = useStyles();
+
+    return (
+        <DialogPortal className = { cx(classes.portal, className) }>
+            { children }
+        </DialogPortal>
+    );
+}
+
+export default JitsiPortal;