@linagora/twake-mui 10.4.0 → 10.5.0

package/dist/components/BottomSheet/index.js

@@ -0,0 +1,158 @@
+import { Backdrop, Portal } from '@mui/material';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useMutationObserver, useTimeoutWhen } from 'rooks';
+import { ANIMATION_DURATION, computeBottomSpacer, computeMaxHeight, computeMediumHeight, computeMinHeight, getCssValue, makeOverriddenChildren, minimizeAndClose, setBottomPosition, setTopPosition } from './helpers';
+import { BORDER_RADIUS, BottomSheetBounceSafer, BottomSheetContainer, BottomSheetHandleBar, BottomSheetIndicator, BottomSheetOffsetSafer, BottomSheetRenderSafer, BottomSheetRenderSaferFill, BottomSheetRoot, BottomSheetSpacer, BottomSheetStack } from './styles';
+/** Shared default, so that effects depending on it do not run on every render */
+const NO_TOOLBAR_PROPS = {};
+const DEFAULT_MEDIUM_HEIGHT_RATIO = 0.75;
+const SPRING_CONFIG = { tension: 165, friction: 17, clamp: true };
+const BottomSheetContent = memo(function BottomSheetContent({ toolbarProps = NO_TOOLBAR_PROPS, settings, backdrop = false, skipAnimation, onClose, offset = 0, children }) {
+    const mediumHeight = settings?.mediumHeight ?? null;
+    const mediumHeightRatio = settings?.mediumHeightRatio ?? DEFAULT_MEDIUM_HEIGHT_RATIO;
+    const isOpenMin = settings?.isOpenMin ?? false;
+    const hasMinHeightOffset = settings?.hasMinHeightOffset ?? false;
+    const innerContentRef = useRef(null);
+    const headerRef = useRef(null);
+    const headerContentRef = useRef(null);
+    const [isTopPosition, setIsTopPosition] = useState(false);
+    const [isBottomPosition, setIsBottomPosition] = useState(false);
+    const [isHidden, setIsHidden] = useState(false);
+    const [showBackdrop, setShowBackdrop] = useState(backdrop);
+    const [peekHeights, setPeekHeights] = useState(null);
+    // Starts at the medium stop, the one the initial position is computed from
+    const [currentIndex, setCurrentIndex] = useState(1);
+    const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0);
+    const [initPos, setInitPos] = useState(0);
+    const prevInitPos = useRef(0);
+    const [forceRender, setForceRender] = useState(0);
+    const hasToolbarProps = Object.keys(toolbarProps).length > 0;
+    const isClosable = !!onClose || backdrop;
+    const renderSaferHeight = initPos < prevInitPos.current ? prevInitPos.current - BORDER_RADIUS : 0;
+    const showRenderSafer = prevInitPos.current !== 0 && prevInitPos.current > initPos;
+    const overriddenChildren = makeOverriddenChildren(children, headerContentRef);
+    if (backdrop && !onClose) {
+        throw new Error('BottomSheet must have `onClose` method to work properly when setting `backdrop` to `true`');
+    }
+    const handleClose = useCallback(() => {
+        setShowBackdrop(false);
+        setIsHidden(true);
+        onClose?.();
+    }, [onClose]);
+    const handleIndexChange = (snapIndex) => {
+        setCurrentIndex(snapIndex);
+        setTopPosition({
+            snapIndex,
+            peekHeights: peekHeights ?? [],
+            isTopPosition,
+            setIsTopPosition
+        });
+        setBottomPosition({ snapIndex, isBottomPosition, setIsBottomPosition });
+    };
+    const handleBackdropClick = () => {
+        minimizeAndClose({
+            backdrop,
+            setCurrentIndex,
+            setIsTopPosition,
+            setIsBottomPosition,
+            handleClose
+        });
+    };
+    // Recomputes the stops when the content changes, after loading or navigating inside it
+    useMutationObserver(innerContentRef, () => {
+        setForceRender(value => value + 1);
+    });
+    // Prevents the pull-to-refresh of iOS Safari while dragging the sheet down
+    useEffect(() => {
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, []);
+    useTimeoutWhen(() => handleClose(), ANIMATION_DURATION, isClosable && isBottomPosition);
+    useEffect(() => {
+        const headerContent = headerContentRef.current;
+        const innerContentHeight = innerContentRef.current?.offsetHeight ?? 0;
+        const actionButtonsHeight = getCssValue(headerContent, 'height');
+        const actionButtonsBottomMargin = getCssValue(headerContent, 'padding-bottom');
+        const maxHeight = computeMaxHeight(toolbarProps);
+        const newBottomSpacerHeight = computeBottomSpacer({
+            backdrop,
+            maxHeight,
+            innerContentHeight,
+            toolbarProps,
+            offset
+        });
+        const minHeight = computeMinHeight({
+            isClosable,
+            isOpenMin,
+            headerRef,
+            offset: hasMinHeightOffset ? offset : 0,
+            actionButtonsHeight,
+            actionButtonsBottomMargin
+        });
+        const computedMediumHeight = isOpenMin && actionButtonsHeight > 0
+            ? minHeight + 1
+            : computeMediumHeight({
+                backdrop,
+                maxHeight,
+                mediumHeight,
+                mediumHeightRatio,
+                innerContentHeight,
+                bottomSpacerHeight: newBottomSpacerHeight,
+                offset
+            });
+        const newPeekHeights = [
+            ...new Set([minHeight, computedMediumHeight, maxHeight])
+        ];
+        const hasPeekHeightsChanged = peekHeights?.toString() !== newPeekHeights.toString();
+        // Lowers the sheet when its stops change while it is at the top
+        const snapIndex = hasPeekHeightsChanged && isTopPosition
+            ? currentIndex - 1 - (currentIndex - (newPeekHeights.length - 1))
+            : currentIndex;
+        setCurrentIndex(snapIndex);
+        setPeekHeights(newPeekHeights);
+        prevInitPos.current = initPos;
+        setInitPos(computedMediumHeight);
+        setTopPosition({
+            snapIndex,
+            peekHeights: newPeekHeights,
+            isTopPosition,
+            setIsTopPosition
+        });
+        // Lets the sheet open up to the top without stopping at the content height
+        setBottomSpacerHeight(newBottomSpacerHeight);
+        // initPos is left out on purpose: the effect needs its previous value
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        innerContentRef,
+        toolbarProps,
+        mediumHeightRatio,
+        mediumHeight,
+        showBackdrop,
+        backdrop,
+        isClosable,
+        offset,
+        forceRender
+    ]);
+    const content = (React.createElement(React.Fragment, null,
+        showBackdrop && React.createElement(Backdrop, { open: true, onClick: handleBackdropClick }),
+        React.createElement(BottomSheetRoot, { isTopPosition: isTopPosition, hasToolbar: hasToolbarProps, peekHeights: peekHeights, defaultHeight: initPos, fullHeight: !hasToolbarProps, currentIndex: currentIndex, onIndexChange: handleIndexChange, threshold: 0, springConfig: SPRING_CONFIG, disabledClosing: !onClose, hidden: isHidden, snapPointSeekerMode: "next", skipAnimation: skipAnimation },
+            React.createElement("div", { ref: innerContentRef },
+                React.createElement(BottomSheetHandleBar, { "data-testid": "bottomSheet-header", ref: headerRef, elevation: 0, square: true },
+                    React.createElement(BottomSheetIndicator, null)),
+                React.createElement(BottomSheetStack, { spacing: 1.5 }, overriddenChildren)),
+            React.createElement(BottomSheetSpacer, { spacerHeight: bottomSpacerHeight })),
+        showRenderSafer && (React.createElement(BottomSheetRenderSafer, { saferHeight: renderSaferHeight },
+            React.createElement(BottomSheetRenderSaferFill, { elevation: 0, square: true }))),
+        !isBottomPosition && React.createElement(BottomSheetBounceSafer, null),
+        Boolean(offset) && (React.createElement(BottomSheetOffsetSafer, { offset: offset, isBottomPosition: isBottomPosition }))));
+    return showBackdrop ? (React.createElement(BottomSheetContainer, null, content)) : (content);
+});
+/**
+ * Panel coming up from the bottom of the screen, that the user can drag between a minimum, a
+ * medium and a full height. Rendered in a portal, like dialogs.
+ */
+const BottomSheet = ({ portalProps, ...props }) => (React.createElement(Portal, { ...portalProps },
+    React.createElement(BottomSheetContent, { ...props })));
+export default BottomSheet;

package/dist/components/BottomSheet/safeArea.d.ts

@@ -0,0 +1,3 @@
+import { SafeAreaSide } from './types';
+/** Returns the device safe area inset (notch, home indicator), in px */
+export declare function getSafeAreaInset(side: SafeAreaSide): number;

package/dist/components/BottomSheet/safeArea.js

@@ -0,0 +1,10 @@
+/** Returns the device safe area inset (notch, home indicator), in px */
+export function getSafeAreaInset(side) {
+    // env() is only resolved through a style, so a probe element reads it
+    const probe = document.createElement('div');
+    probe.style.paddingTop = `env(safe-area-inset-${side})`;
+    document.body.appendChild(probe);
+    const inset = parseFloat(getComputedStyle(probe).paddingTop) || 0;
+    probe.remove();
+    return inset;
+}

package/dist/components/BottomSheet/styles.d.ts

@@ -0,0 +1,25 @@
+import { Theme } from '@mui/material/styles';
+export declare const BORDER_RADIUS = 16;
+export declare const BottomSheetContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BottomSheetRoot: import("@emotion/styled").StyledComponent<import("./core/BottomSheetCore").BottomSheetCoreProps & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isTopPosition: boolean;
+    hasToolbar: boolean;
+}, {}, {}>;
+export declare const BottomSheetHandleBar: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "square" | "className" | "elevation" | "children" | "classes" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const BottomSheetIndicator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BottomSheetStack: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const BottomSheetSpacer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    spacerHeight: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** Covers the screen bottom while the sheet bounces up */
+export declare const BottomSheetBounceSafer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** Covers the offset area below the sheet */
+export declare const BottomSheetOffsetSafer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    offset: number;
+    isBottomPosition: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** Hides the gap left under the sheet while it shrinks to a lower content height */
+export declare const BottomSheetRenderSafer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    saferHeight: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BottomSheetRenderSaferFill: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "square" | "className" | "elevation" | "children" | "classes" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/dist/components/BottomSheet/styles.js

@@ -0,0 +1,100 @@
+import { Paper, Stack } from '@mui/material';
+import { keyframes, styled } from '@mui/material/styles';
+import { BottomSheetCore } from './core/BottomSheetCore';
+import { ANIMATION_DURATION } from './helpers';
+export const BORDER_RADIUS = 16;
+const BOUNCE_SAFER_HEIGHT = 50;
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const collapse = keyframes({ from: { height: '100%' }, to: { height: 0 } });
+export const BottomSheetContainer = styled('div')(({ theme }) => ({
+    position: 'fixed',
+    zIndex: theme.zIndex.modal,
+    inset: 0
+}));
+export const BottomSheetRoot = styled(BottomSheetCore, {
+    shouldForwardProp: prop => prop !== 'isTopPosition' && prop !== 'hasToolbar'
+})(({ theme }) => ({
+    borderTopLeftRadius: BORDER_RADIUS,
+    borderTopRightRadius: BORDER_RADIUS,
+    transition: 'border-radius 0.5s',
+    boxShadow: '0 -0.5px 0px 0 rgba(0, 0, 0, 0.10), 0 -2px 2px 0 rgba(0, 0, 0, 0.02), 0 -4px 4px 0 rgba(0, 0, 0, 0.02), 0 -8px 8px 0 rgba(0, 0, 0, 0.02), 0 -16px 16px 0 rgba(0, 0, 0, 0.02)',
+    backgroundColor: theme.vars.palette.background.paper,
+    zIndex: theme.zIndex.modal,
+    variants: [
+        {
+            props: { isTopPosition: true },
+            style: {
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+                boxShadow: '0 -1px 0 0 rgba(255, 255, 255, 1)'
+            }
+        },
+        {
+            props: { isTopPosition: true, hasToolbar: true },
+            style: { boxShadow: '0 0 1px 0 rgba(0, 0, 0, 0.5)' }
+        }
+    ]
+}));
+export const BottomSheetHandleBar = styled(Paper)({
+    width: '100%',
+    height: '3rem',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+});
+export const BottomSheetIndicator = styled('div')(({ theme }) => ({
+    width: '4rem',
+    height: '0.25rem',
+    borderRadius: 99,
+    backgroundColor: theme.vars.palette.text.secondary
+}));
+export const BottomSheetStack = styled(Stack)(({ theme }) => ({
+    overflow: 'hidden',
+    backgroundColor: theme.vars.palette.background.default
+}));
+export const BottomSheetSpacer = styled('div', {
+    shouldForwardProp: prop => prop !== 'spacerHeight'
+})(({ spacerHeight }) => ({ height: spacerHeight }));
+/** Covers the screen bottom while the sheet bounces up */
+export const BottomSheetBounceSafer = styled('div')(({ theme }) => ({
+    height: BOUNCE_SAFER_HEIGHT,
+    width: '100%',
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    backgroundColor: theme.vars.palette.background.paper,
+    animation: `${fadeIn} ${ANIMATION_DURATION}ms ${theme.transitions.easing.easeInOut}`
+}));
+/** Covers the offset area below the sheet */
+export const BottomSheetOffsetSafer = styled('div', {
+    shouldForwardProp: prop => prop !== 'offset' && prop !== 'isBottomPosition'
+})(({ theme, offset, isBottomPosition }) => ({
+    opacity: isBottomPosition ? 0 : 1,
+    height: offset,
+    width: '100%',
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    backgroundColor: theme.vars.palette.background.paper,
+    zIndex: theme.zIndex.modal + 10,
+    transition: `opacity ${ANIMATION_DURATION}ms`,
+    animation: `${fadeIn} ${ANIMATION_DURATION}ms ${theme.transitions.easing.easeInOut}`
+}));
+/** Hides the gap left under the sheet while it shrinks to a lower content height */
+export const BottomSheetRenderSafer = styled('div', {
+    shouldForwardProp: prop => prop !== 'saferHeight'
+})(({ saferHeight }) => ({
+    height: saferHeight,
+    width: '100%',
+    position: 'fixed',
+    bottom: 0,
+    pointerEvents: 'none'
+}));
+export const BottomSheetRenderSaferFill = styled(Paper)({
+    position: 'absolute',
+    bottom: 0,
+    height: 0,
+    width: '100%',
+    animation: `${collapse} 1s`
+});

package/dist/components/BottomSheet/types.d.ts

@@ -0,0 +1,77 @@
+import { PortalProps } from '@mui/material';
+import React, { RefObject } from 'react';
+export type SafeAreaSide = 'top' | 'bottom';
+export interface BottomSheetToolbarProps {
+    /** Ref of the toolbar the sheet must stay under when fully open */
+    ref?: RefObject<HTMLElement | null>;
+    /** Height of that toolbar, in px, used instead of measuring `ref` */
+    height?: number;
+}
+export interface BottomSheetSettings {
+    /** Height of the middle stop, in px */
+    mediumHeight?: number | null;
+    /** Height of the middle stop, as a ratio of the available height */
+    mediumHeightRatio?: number;
+    /** Includes the offset in the minimum height */
+    hasMinHeightOffset?: boolean;
+    /** Opens the sheet at its minimum height, when it has a header */
+    isOpenMin?: boolean;
+}
+export interface BottomSheetProps {
+    /** Toolbar the sheet must stay under when fully open */
+    toolbarProps?: BottomSheetToolbarProps;
+    settings?: BottomSheetSettings;
+    /** Adds a backdrop, which requires `onClose` */
+    backdrop?: boolean;
+    /** Removes animations */
+    skipAnimation?: boolean;
+    /** Space kept at the bottom of the sheet, in px */
+    offset?: number;
+    /** Lets the user close the sheet by swiping it down */
+    onClose?: () => void;
+    portalProps?: Omit<PortalProps, 'children'>;
+    children?: React.ReactNode;
+}
+export type BottomSheetContentProps = Omit<BottomSheetProps, 'portalProps'>;
+export interface MediumHeightParams {
+    backdrop: boolean;
+    maxHeight: number;
+    mediumHeight?: number | null;
+    mediumHeightRatio: number;
+    innerContentHeight: number;
+    bottomSpacerHeight: number;
+    offset: number;
+}
+export interface MinHeightParams {
+    isClosable: boolean;
+    isOpenMin: boolean;
+    headerRef: RefObject<HTMLElement | null>;
+    offset?: number;
+    actionButtonsHeight: number;
+    actionButtonsBottomMargin: number;
+}
+export interface TopPositionParams {
+    snapIndex: number;
+    peekHeights: number[];
+    isTopPosition: boolean;
+    setIsTopPosition: (isTopPosition: boolean) => void;
+}
+export interface BottomPositionParams {
+    snapIndex: number;
+    isBottomPosition: boolean;
+    setIsBottomPosition: (isBottomPosition: boolean) => void;
+}
+export interface MinimizeAndCloseParams {
+    backdrop: boolean;
+    setCurrentIndex: (index: number) => void;
+    setIsTopPosition: (isTopPosition: boolean) => void;
+    setIsBottomPosition: (isBottomPosition: boolean) => void;
+    handleClose: () => void;
+}
+export interface BottomSpacerParams {
+    backdrop: boolean;
+    maxHeight: number;
+    innerContentHeight: number;
+    toolbarProps?: BottomSheetToolbarProps;
+    offset: number;
+}

package/dist/components/BottomSheet/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ContactPopover/AttendeeInfo.js

@@ -1,6 +1,6 @@
 import { Icon } from '@linagora/twake-icons';
 import { Copy } from '@linagora/twake-icons';
-import { Box, IconButton, Typography, useTheme, alpha } from '@mui/material';
+import { Box, IconButton, Typography, useTheme } from '@mui/material';
 import React, { useState } from 'react';
 import { useI18n } from 'twake-i18n';
 import { Avatar } from '../Avatar';
@@ -28,8 +28,8 @@ export const AttendeeInfo = ({ name, email, onEmailCopy }) => {
             name && name !== email ? (React.createElement(Typography, { variant: "body1", sx: { fontWeight: 500, wordBreak: 'break-word' } }, name)) : null,
             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
                 React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { wordBreak: 'break-word' } }, email),
-                React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: alpha(theme.palette.grey[900], 0.9) }, title: showCopied
+                React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: 'text.primary' }, title: showCopied
                         ? t('ContactPopover.copiedTooltip')
                         : t('ContactPopover.copyTooltip') },
-                    React.createElement(Icon, { icon: Copy, size: 16, color: theme.palette.text.icon }))))));
+                    React.createElement(Icon, { icon: Copy, size: 16, color: theme.vars.palette.text.icon }))))));
 };

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverCalendarAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverChatAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/ContactPopover/ContactPopoverEmailAction.js

@@ -6,7 +6,7 @@ export const ContactPopoverEmailAction = ({ url, disabled = false }) => {
     const { t } = useI18n();
     return (React.createElement(Button, { href: url, target: "_blank", rel: "noopener noreferrer", variant: "outlined", size: "small", disabled: disabled, sx: {
             justifyContent: 'center',
-            color: theme.palette.text.primary,
-            borderColor: theme.palette.divider
+            color: theme.vars.palette.text.primary,
+            borderColor: theme.vars.palette.divider
         } }, t('ContactPopover.emailButton')));
 };

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverVideoAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: Camera, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: Camera, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/SearchBar/DisableHighlight.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
 import { Highlight } from './Highlight';
 export const DisableHighlight = styled(Highlight)(({ theme }) => ({
-    backgroundColor: theme.palette.action.disabled
+    backgroundColor: theme.vars.palette.action.disabled
 }));

package/dist/components/SearchBar/FocusHighlight.js

@@ -2,5 +2,5 @@ import { styled } from '@mui/material';
 import { Highlight } from './Highlight';
 export const FocusHighlight = styled(Highlight)(({ theme }) => ({
     pointerEvents: 'none',
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: theme.vars.palette.action.hover
 }));

package/dist/components/SearchBar/SearchBarIconWrapper.js

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material';
 export const SearchBarIconWrapper = styled('div')(({ theme }) => ({
-    color: theme.palette.text.secondary,
+    color: theme.vars.palette.text.secondary,
     padding: '0 1rem',
     display: 'flex'
 }));

package/dist/components/SearchBar/SearchBarRoot.js

@@ -15,10 +15,10 @@ export const SearchBarRoot = styled(Paper, {
         borderStyle: 'solid',
         borderWidth: 1,
         paddingRight: '0.5rem',
-        borderColor: isFocused ? theme.palette.primary.main : 'transparent',
+        borderColor: isFocused ? theme.vars.palette.primary.main : 'transparent',
         backgroundColor: isFocused
-            ? theme.palette.background.paper
-            : theme.palette.background.default,
+            ? theme.vars.palette.background.paper
+            : theme.vars.palette.background.default,
         transition: theme.transitions.create(['border-color', 'background-color']),
         '&:hover': {
             '&:not(.Mui-disabled):not(.SearchBar-focused)': {
@@ -29,7 +29,7 @@ export const SearchBarRoot = styled(Paper, {
         },
         '&.Mui-disabled': {
             '& .SearchBar-icon': {
-                color: theme.palette.text.disabled
+                color: theme.vars.palette.text.disabled
             },
             '& .SearchBar-disableHighlight': {
                 opacity: 1

package/dist/components/SpaceOverlay/OverlayFrame.js

@@ -1,24 +1,20 @@
-import { Box } from '@mui/material';
-import React, { useLayoutEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+import { Box, Portal } from '@mui/material';
+import React from 'react';
 export const OverlayFrame = ({ name, src, title, sandbox, allow, clipPath }) => {
-    const ref = useRef(null);
     const empty = clipPath.startsWith('inset(');
-    // Set by hand: it changes with every move of a menu, a class per value
-    // would pile up.
-    useLayoutEffect(() => {
-        if (ref.current)
-            ref.current.style.clipPath = clipPath;
-    }, [clipPath, ref]);
-    return createPortal(React.createElement(Box, { component: "iframe", ref: ref, name: name, src: src, title: title, sandbox: sandbox, allow: allow, "aria-hidden": empty || undefined, tabIndex: empty ? -1 : undefined, sx: {
-            position: 'fixed',
-            inset: 0,
-            width: '100%',
-            height: '100%',
-            border: 0,
-            background: 'transparent',
-            // A frame whose colour scheme differs from the page is painted opaque
-            colorScheme: 'normal',
-            zIndex: theme => theme.zIndex.modal - 1
-        } }), document.body);
+    return (React.createElement(Portal, null,
+        React.createElement(Box, { component: "iframe", name: name, src: src, title: title, sandbox: sandbox, allow: allow, "aria-hidden": empty || undefined, tabIndex: empty ? -1 : undefined, 
+            // Inline: it changes with every move of a menu, a class per value
+            // would pile up
+            style: { clipPath }, sx: {
+                position: 'fixed',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                border: 0,
+                background: 'transparent',
+                // A frame whose colour scheme differs from the page is painted opaque
+                colorScheme: 'normal',
+                zIndex: theme => theme.zIndex.modal - 1
+            } })));
 };

package/dist/components/SpaceOverlay/SpaceOverlay.js

@@ -1,5 +1,5 @@
+import { Portal } from '@mui/material';
 import React, { createContext, useContext, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
 const SpaceOverlayContext = createContext(null);
 export const SpaceOverlayProvider = ({ overlay, children }) => (React.createElement(SpaceOverlayContext.Provider, { value: overlay }, children));
 const NO_OVERLAY = () => () => undefined;
@@ -31,7 +31,7 @@ export const OverlayPortal = ({ children }) => {
     if (status === 'connecting')
         return null;
     const body = status === 'connected' ? (overlay?.getBody() ?? null) : null;
-    return React.createElement(React.Fragment, null, body === null ? children : createPortal(children, body));
+    return (React.createElement(Portal, { container: body, disablePortal: body === null }, children));
 };
 /**
  * Theme options sending every dialog and temporary drawer to the overlay, so

package/dist/index.d.ts

@@ -8,6 +8,10 @@ export { radius } from './lib/radius';
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { Button, default as ButtonDefault } from './components/Button';
+export { default as BottomSheet } from './components/BottomSheet';
+export { default as BottomSheetItem } from './components/BottomSheet/BottomSheetItem';
+export { default as BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader';
+export { default as BottomSheetTitle } from './components/BottomSheet/BottomSheetTitle';
 export { default as Chip } from './components/Chip';
 export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
@@ -41,11 +45,18 @@ export { default as AccordionExpandIcon } from './components/AccordionExpandIcon
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export * from './components/SpaceOverlay';
+export { connectSpaceOverlay, computeOverlayRegion } from './components/SpaceOverlay/spaceOverlay';
+export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './components/SpaceOverlay/SpaceOverlay';
+export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './components/SpaceOverlay/region';
+export { OverlayFrame } from './components/SpaceOverlay/OverlayFrame';
 export type { TwakeTheme } from './lib/theme';
 export type { PaletteJson } from './lib/types';
 export type { AvatarProps } from './components/Avatar';
 export type { ButtonProps } from './components/Button';
+export type { BottomSheetProps, BottomSheetSettings, BottomSheetToolbarProps } from './components/BottomSheet/types';
+export type { BottomSheetItemProps } from './components/BottomSheet/BottomSheetItem';
+export type { BottomSheetHeaderProps } from './components/BottomSheet/BottomSheetHeader';
+export type { BottomSheetTitleProps } from './components/BottomSheet/BottomSheetTitle';
 export type { ContactPopoverProps } from './components/ContactPopover';
 export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';
 export type { ContactPopoverActionsProps } from './components/ContactPopover/ContactPopoverActions';
@@ -54,6 +65,10 @@ export type { ContactPopoverVideoActionProps } from './components/ContactPopover
 export type { ContactPopoverCalendarActionProps } from './components/ContactPopover/ContactPopoverCalendarAction';
 export type { ContactPopoverEmailActionProps } from './components/ContactPopover/ContactPopoverEmailAction';
 export type { ChipProps } from './components/Chip';
+export type { SpaceOverlay, SpaceOverlayStatus } from './components/SpaceOverlay/spaceOverlay';
+export type { SpaceOverlayProviderProps } from './components/SpaceOverlay/SpaceOverlay';
+export type { OverlayBox, OverlayRegion } from './components/SpaceOverlay/region';
+export type { OverlayFrameProps } from './components/SpaceOverlay/OverlayFrame';
 export type { DialogProps, DialogSize } from './components/Dialog';
 export type { PointerAlertProps, PointerAlertDirection } from './components/PointerAlert';
 export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';

package/dist/index.js

@@ -11,6 +11,10 @@ export { radius } from './lib/radius';
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { Button, default as ButtonDefault } from './components/Button';
+export { default as BottomSheet } from './components/BottomSheet';
+export { default as BottomSheetItem } from './components/BottomSheet/BottomSheetItem';
+export { default as BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader';
+export { default as BottomSheetTitle } from './components/BottomSheet/BottomSheetTitle';
 export { default as Chip } from './components/Chip';
 export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
@@ -44,5 +48,8 @@ export { default as AccordionExpandIcon } from './components/AccordionExpandIcon
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export * from './components/SpaceOverlay';
+export { connectSpaceOverlay, computeOverlayRegion } from './components/SpaceOverlay/spaceOverlay';
+export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './components/SpaceOverlay/SpaceOverlay';
+export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './components/SpaceOverlay/region';
+export { OverlayFrame } from './components/SpaceOverlay/OverlayFrame';
 export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';