@linagora/twake-mui 10.4.1 → 10.5.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @linagora/twake-mui [10.5.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.4.1...@linagora/twake-mui@10.5.0) (2026-10-07)
+
+
+### Features
+
+* **twake-mui:** Migrate BottomSheet from cozy-ui ([5144650](https://github.com/linagora/twake-ui/commit/51446500bc88f45859bfc5e8278a88347d6f91f5))
+* **twake-mui:** Migrate BottomSheet subcomponents from cozy-ui ([006d755](https://github.com/linagora/twake-ui/commit/006d7559d13d8740b28f1e6c456372956884e7fb))
+
 ## @linagora/twake-mui [10.4.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.4.0...@linagora/twake-mui@10.4.1) (2026-10-07)
 
 

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+interface ExampleArgs {
+    open: boolean;
+    backdrop: boolean;
+    closable: boolean;
+    skipAnimation: boolean;
+    disablePortal: boolean;
+    withFakeToolbar: boolean;
+    withHeader: boolean;
+    withTitle: boolean;
+    withListContent: boolean;
+    longContent: boolean;
+    isOpenMin: boolean;
+    hasMinHeightOffset: boolean;
+    mediumHeight?: number;
+    mediumHeightRatio?: number;
+    offset?: number;
+}
+declare const meta: Meta<ExampleArgs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/BottomSheet/BottomSheet.stories.js

@@ -0,0 +1,139 @@
+import { File, FileTypeSheet, FileTypeSlide, FileTypeText, FileTypeVideo, Icon, Right } from '@linagora/twake-icons';
+import { Button, Checkbox, Divider, List, ListItemIcon, Radio } from '@mui/material';
+import React, { useState } from 'react';
+import BottomSheetHeader from './BottomSheetHeader';
+import BottomSheetItem from './BottomSheetItem';
+import BottomSheetTitle from './BottomSheetTitle';
+import BottomSheet from './index';
+import ListItemButton from '../ListItemButton';
+import ListItemText from '../ListItemText';
+const shortContent = 'Ada Lovelace wrote the first algorithm intended to be carried out by a machine, the Analytical Engine imagined by Charles Babbage.';
+const longContent = Array.from({ length: 12 }, (_, index) => `${index + 1}. ${shortContent} She saw that such a machine could handle symbols as well as numbers, and could one day compose music.`).join(' ');
+const ListContent = ({ withTitle }) => (React.createElement(BottomSheetItem, { disableGutters: true },
+    withTitle && (React.createElement(React.Fragment, null,
+        React.createElement(BottomSheetTitle, { icon: FileTypeText, label: "Title" }),
+        React.createElement(Divider, null))),
+    React.createElement(List, null,
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: File })),
+            React.createElement(ListItemText, { primary: "Item with icon", secondary: "and with secondary text" })),
+        React.createElement(Divider, { variant: "inset" }),
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Checkbox, null)),
+            React.createElement(ListItemText, { primary: "Item with checkbox" })),
+        React.createElement(Divider, { variant: "inset" }),
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Radio, null)),
+            React.createElement(ListItemText, { primary: "Item with radio" })),
+        React.createElement(Divider, { variant: "inset" }),
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: File })),
+            React.createElement(ListItemText, { primary: "Item with secondary action" }),
+            React.createElement(Icon, { icon: Right }))),
+    React.createElement(Divider, null),
+    React.createElement(List, null,
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeText, size: 32 })),
+            React.createElement(ListItemText, { primary: "Files" })),
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeSheet, size: 32 })),
+            React.createElement(ListItemText, { primary: "Sheets" }))),
+    React.createElement(Divider, { variant: "inset" }),
+    React.createElement(List, null,
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeSlide, size: 32 })),
+            React.createElement(ListItemText, { primary: "Slides" })),
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeVideo, size: 32 })),
+            React.createElement(ListItemText, { primary: "Videos" })))));
+const ExampleBottomSheet = args => {
+    const [isOpen, setIsOpen] = useState(args.open);
+    const [isSecondOpen, setIsSecondOpen] = useState(false);
+    const handleClose = () => setIsOpen(false);
+    const settings = args.mediumHeight === undefined && args.mediumHeightRatio === undefined
+        ? {}
+        : {
+            mediumHeight: args.mediumHeight,
+            mediumHeightRatio: args.mediumHeightRatio
+        };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { variant: "outlined", onClick: () => setIsOpen(true) }, "Open BottomSheet"),
+        isOpen && (React.createElement(BottomSheet, { toolbarProps: args.withFakeToolbar ? { height: 50 } : undefined, settings: {
+                ...settings,
+                isOpenMin: args.isOpenMin,
+                hasMinHeightOffset: args.hasMinHeightOffset
+            }, backdrop: args.backdrop, skipAnimation: args.skipAnimation, offset: args.offset, onClose: args.closable ? handleClose : undefined, portalProps: { disablePortal: args.disablePortal } },
+            args.withHeader && (React.createElement(BottomSheetHeader, { sx: { px: 2, pb: 2, gap: 1 } },
+                React.createElement(Button, { variant: "outlined", fullWidth: true, onClick: () => setIsSecondOpen(true) }, "Open BottomSheet"),
+                React.createElement(Button, { variant: "outlined", fullWidth: true }, "Button 2"),
+                isSecondOpen && (React.createElement(BottomSheet, { backdrop: true, onClose: () => setIsSecondOpen(false) },
+                    React.createElement(BottomSheetItem, null, shortContent))))),
+            args.withListContent ? (React.createElement(ListContent, { withTitle: args.withTitle })) : (React.createElement(React.Fragment, null,
+                args.withTitle && React.createElement(BottomSheetTitle, { label: "Title" }),
+                React.createElement(BottomSheetItem, null, args.longContent ? longContent : shortContent)))))));
+};
+const meta = {
+    title: 'BottomSheet',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A `backdrop` requires the sheet to be closable: check `closable` whenever `backdrop` is checked.'
+            }
+        }
+    },
+    argTypes: {
+        open: { control: 'boolean' },
+        backdrop: { control: 'boolean' },
+        closable: { control: 'boolean' },
+        skipAnimation: { control: 'boolean' },
+        disablePortal: { control: 'boolean' },
+        withFakeToolbar: { control: 'boolean' },
+        withHeader: { control: 'boolean' },
+        withTitle: { control: 'boolean' },
+        withListContent: { control: 'boolean' },
+        longContent: { control: 'boolean' },
+        isOpenMin: { control: 'boolean' },
+        hasMinHeightOffset: { control: 'boolean' },
+        mediumHeight: { control: 'number' },
+        mediumHeightRatio: { control: { type: 'number', step: 0.05 } },
+        offset: { control: 'number' }
+    },
+    args: {
+        open: false,
+        backdrop: true,
+        closable: true,
+        skipAnimation: false,
+        disablePortal: false,
+        withFakeToolbar: false,
+        withHeader: true,
+        withTitle: false,
+        withListContent: false,
+        longContent: false,
+        isOpenMin: false,
+        hasMinHeightOffset: false
+    },
+    render: args => React.createElement(ExampleBottomSheet, { ...args })
+};
+export default meta;
+export const Default = {};
+// Visual Regression - the sheet open at its medium stop, with every subcomponent. Kept out of
+// the docs page, where its open sheet would cover the whole page
+export const Screenshot = {
+    tags: ['argos', '!autodocs'],
+    render: () => (React.createElement(BottomSheet, { backdrop: true, skipAnimation: true, settings: { mediumHeight: 450 }, onClose: () => undefined },
+        React.createElement(BottomSheetHeader, { sx: { px: 2, pb: 2, gap: 1 } },
+            React.createElement(Button, { variant: "outlined", fullWidth: true }, "Button 1"),
+            React.createElement(Button, { variant: "outlined", fullWidth: true }, "Button 2")),
+        React.createElement(BottomSheetTitle, { label: "Title" }),
+        React.createElement(BottomSheetItem, null, shortContent),
+        React.createElement(ListContent, { withTitle: true })))
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BottomSheetItemProps } from './BottomSheetItem';
+export type BottomSheetHeaderProps = Omit<BottomSheetItemProps, 'disableGutters' | 'disableElevation'>;
+/**
+ * Content kept visible at the bottom of the sheet when it is at its lowest stop, such as action
+ * buttons. Its height and bottom padding are part of the sheet minimum height.
+ */
+declare const BottomSheetHeader: React.ForwardRefExoticComponent<BottomSheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default BottomSheetHeader;

package/dist/components/BottomSheet/BottomSheetHeader.js

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+import React, { forwardRef } from 'react';
+import BottomSheetItem from './BottomSheetItem';
+const BottomSheetHeaderRoot = styled(BottomSheetItem)({
+    display: 'flex',
+    alignItems: 'center'
+});
+/**
+ * Content kept visible at the bottom of the sheet when it is at its lowest stop, such as action
+ * buttons. Its height and bottom padding are part of the sheet minimum height.
+ */
+const BottomSheetHeader = forwardRef((props, ref) => (React.createElement(BottomSheetHeaderRoot, { ref: ref, disableGutters: true, disableElevation: true, ...props })));
+BottomSheetHeader.displayName = 'BottomSheetHeader';
+export default BottomSheetHeader;

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

@@ -0,0 +1,10 @@
+import { PaperProps } from '@mui/material';
+import React from 'react';
+export interface BottomSheetItemProps extends Omit<PaperProps, 'ref'> {
+    /** Removes the default padding */
+    disableGutters?: boolean;
+    /** Removes the default elevation */
+    disableElevation?: boolean;
+}
+declare const BottomSheetItem: React.ForwardRefExoticComponent<BottomSheetItemProps & React.RefAttributes<HTMLDivElement>>;
+export default BottomSheetItem;

package/dist/components/BottomSheet/BottomSheetItem.js

@@ -0,0 +1,18 @@
+import { Paper } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { forwardRef } from 'react';
+/** Flat extra shadow the theme defines past the 24 MUI elevations */
+const ITEM_ELEVATION = 25;
+const BottomSheetItemRoot = styled(Paper, {
+    shouldForwardProp: prop => prop !== 'disableGutters'
+})(({ theme }) => ({
+    variants: [
+        {
+            props: { disableGutters: false },
+            style: { padding: theme.spacing(2) }
+        }
+    ]
+}));
+const BottomSheetItem = forwardRef(({ disableGutters = false, disableElevation = false, ...props }, ref) => (React.createElement(BottomSheetItemRoot, { ref: ref, elevation: disableElevation ? 0 : ITEM_ELEVATION, square: true, disableGutters: disableGutters, ...props })));
+BottomSheetItem.displayName = 'BottomSheetItem';
+export default BottomSheetItem;

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

@@ -0,0 +1,10 @@
+import { IconProps } from '@linagora/twake-icons';
+import React from 'react';
+export interface BottomSheetTitleProps {
+    className?: string;
+    label?: string;
+    /** Shows the title as a list item with this icon */
+    icon?: IconProps['icon'];
+}
+declare const BottomSheetTitle: React.ForwardRefExoticComponent<BottomSheetTitleProps & React.RefAttributes<HTMLElement>>;
+export default BottomSheetTitle;

package/dist/components/BottomSheet/BottomSheetTitle.js

@@ -0,0 +1,20 @@
+import { Icon } from '@linagora/twake-icons';
+import { List, ListItemIcon, Typography } from '@mui/material';
+import React, { forwardRef } from 'react';
+import BottomSheetItem from './BottomSheetItem';
+import ListItem from '../ListItem';
+import ListItemText from '../ListItemText';
+const BottomSheetTitle = forwardRef(({ className, label, icon }, ref) => {
+    if (icon) {
+        return (React.createElement(BottomSheetItem, { disableGutters: true, disableElevation: true },
+            React.createElement(List, { ref: ref },
+                React.createElement(ListItem, null,
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, { icon: icon, size: 32 })),
+                    React.createElement(ListItemText, { primary: label, slotProps: { primary: { variant: 'h6', noWrap: true } } })))));
+    }
+    return (React.createElement(BottomSheetItem, { disableElevation: true },
+        React.createElement(Typography, { ref: ref, className: className, variant: "h6", align: "center" }, label)));
+});
+BottomSheetTitle.displayName = 'BottomSheetTitle';
+export default BottomSheetTitle;

package/dist/components/BottomSheet/core/BottomSheetCore.d.ts

@@ -0,0 +1,28 @@
+import type { SpringConfig } from '@react-spring/web';
+import React from 'react';
+export type SnapPointSeekerMode = 'close' | 'next';
+export interface BottomSheetCoreProps {
+    /** Height of the sheet when closed, in px */
+    defaultHeight?: number;
+    /** Intermediate heights the sheet stops at, in px */
+    peekHeights?: number[] | null;
+    /** Allows the sheet to go full screen, otherwise it tops out at its content height */
+    fullHeight?: boolean;
+    /** Index of the stop to move the sheet to, among `[defaultHeight, ...peekHeights, fullHeight]` */
+    currentIndex?: number;
+    /** Called with the index of the stop the user moved the sheet to */
+    onIndexChange?: (index: number) => void;
+    /** Moves the sheet off screen */
+    hidden?: boolean;
+    /** Distance above the highest stop, in px, at which dragging up is cancelled */
+    threshold?: number;
+    /** Prevents dragging the sheet below its lowest stop */
+    disabledClosing?: boolean;
+    /** On release, snaps to the closest stop or to the next one in the drag direction */
+    snapPointSeekerMode?: SnapPointSeekerMode;
+    springConfig?: SpringConfig;
+    skipAnimation?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function BottomSheetCore({ defaultHeight, peekHeights, fullHeight, currentIndex, onIndexChange, hidden, threshold, disabledClosing, snapPointSeekerMode, springConfig, skipAnimation, className, children }: BottomSheetCoreProps): React.JSX.Element;

package/dist/components/BottomSheet/core/BottomSheetCore.js

@@ -0,0 +1,118 @@
+/*
+ * Adapted from mui-bottom-sheet
+ * Copyright (c) 2020 Harley Alexander, MIT License
+ */
+import { animated, config, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import React, { useEffect, useRef } from 'react';
+import useMeasure from 'react-use-measure';
+import { computeClosestStop, computeNextStop, isNodeInside } from './helpers';
+const HIDDEN_MARGIN = 30;
+const HORIZONTAL_DRAG_RATIO = 0.8;
+export function BottomSheetCore({ defaultHeight = 100, peekHeights = [], fullHeight = true, currentIndex, onIndexChange, hidden = false, threshold = 70, disabledClosing = false, snapPointSeekerMode = 'close', springConfig = config.stiff, skipAnimation = false, className, children }) {
+    const computeStopPosition = (height) => window.innerHeight - height;
+    const defaultPosition = computeStopPosition(defaultHeight);
+    const stops = [defaultPosition];
+    const [measureRef, { height }] = useMeasure();
+    if (height > window.innerHeight && fullHeight) {
+        stops.push(0);
+    }
+    if (height < window.innerHeight && height > defaultHeight) {
+        stops.push(computeStopPosition(height));
+    }
+    peekHeights?.forEach(peekHeight => {
+        const position = computeStopPosition(peekHeight);
+        if (peekHeight < height &&
+            peekHeight < window.innerHeight &&
+            !stops.includes(position)) {
+            stops.push(position);
+        }
+    });
+    // Positions grow from top to bottom while peek heights grow from bottom to top, so a descending
+    // sort makes stop indexes match peek height indexes
+    stops.sort((a, b) => b - a);
+    const containerRef = useRef(null);
+    const lastDirectionYRef = useRef(0);
+    const [{ y }, api] = useSpring(() => ({ y: defaultPosition }));
+    const bind = useDrag(({ last, cancel, offset: [, offsetY], delta: [deltaX, deltaY], direction: [, directionY], event }) => {
+        event.stopPropagation();
+        if (!isNodeInside(event.target, containerRef.current))
+            return;
+        if (Math.abs(deltaX) >
+            HORIZONTAL_DRAG_RATIO * Math.hypot(deltaX, deltaY)) {
+            cancel();
+        }
+        if (containerRef.current?.scrollTop)
+            return;
+        if (offsetY < 0 || offsetY < Math.min(...stops) - threshold) {
+            cancel();
+        }
+        if (disabledClosing && offsetY > Math.max(...stops)) {
+            cancel();
+        }
+        if (!last) {
+            lastDirectionYRef.current = directionY;
+            void api.start({
+                y: offsetY,
+                config: { duration: 0 },
+                immediate: skipAnimation
+            });
+            return;
+        }
+        // The release event resets the direction when the pointer stood still, so the direction
+        // of the last move decides which stop comes next
+        const newPosition = snapPointSeekerMode === 'next'
+            ? computeNextStop(offsetY, lastDirectionYRef.current, stops)
+            : computeClosestStop(offsetY, stops);
+        void api.start({
+            y: newPosition,
+            config: springConfig,
+            immediate: skipAnimation
+        });
+        onIndexChange?.(stops.findIndex(stop => stop === newPosition));
+    }, {
+        // Once the content is scrolled, starting from that negative offset makes the sheet follow
+        // the pointer only after the content is back to its top
+        from: () => [
+            0,
+            containerRef.current?.scrollTop
+                ? -containerRef.current.scrollTop + Math.min(...stops)
+                : y.goal
+        ],
+        bounds: { top: 0 },
+        // Touch and mouse events let the content scroll natively, unlike pointer events
+        pointer: { touch: true, mouse: true },
+        // Arrow keys typed in the sheet content must not move the sheet
+        keys: false
+    });
+    useEffect(() => {
+        void api.start({
+            y: hidden ? window.innerHeight + HIDDEN_MARGIN : defaultPosition,
+            config: config.gentle,
+            immediate: skipAnimation
+        });
+    }, [hidden, api, defaultPosition, skipAnimation]);
+    // Stops are recomputed on every render, so this check runs after each one
+    useEffect(() => {
+        if (currentIndex !== undefined && y.goal !== stops[currentIndex]) {
+            void api.start({
+                y: stops[currentIndex],
+                config: springConfig,
+                immediate: skipAnimation
+            });
+        }
+    });
+    return (React.createElement(animated.div, { ...bind(), ref: containerRef, className: className, style: {
+            width: '100%',
+            minHeight: defaultHeight,
+            maxHeight: '100%',
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            y,
+            display: y.to(positionY => positionY < window.innerHeight + HIDDEN_MARGIN ? 'block' : 'none'),
+            // Content only scrolls once the sheet reached its highest stop
+            overflowY: y.to(positionY => positionY > Math.min(...stops) ? 'hidden' : 'scroll')
+        } },
+        React.createElement("div", { ref: measureRef }, children)));
+}

package/dist/components/BottomSheet/core/helpers.d.ts

@@ -0,0 +1,8 @@
+export declare function computeClosestStop(goal: number, stops: number[]): number;
+/**
+ * Finds the stop following `goal` in the drag direction: a higher value for a positive direction,
+ * a lower or equal one otherwise. A found `0` stop (full screen) falls back to the last stop like
+ * a miss: `||` is kept over `??` to preserve that snapping.
+ */
+export declare function computeNextStop(goal: number, direction: number, stops: number[]): number;
+export declare function isNodeInside(node: EventTarget | null, container: Node | null): boolean;

package/dist/components/BottomSheet/core/helpers.js

@@ -0,0 +1,29 @@
+/*
+ * Snap point helpers adapted from mui-bottom-sheet
+ * Copyright (c) 2020 Harley Alexander, MIT License
+ */
+export function computeClosestStop(goal, stops) {
+    return stops.reduce((prev, stop) => Math.abs(stop - goal) < Math.abs(prev - goal) ? stop : prev);
+}
+/**
+ * Finds the stop following `goal` in the drag direction: a higher value for a positive direction,
+ * a lower or equal one otherwise. A found `0` stop (full screen) falls back to the last stop like
+ * a miss: `||` is kept over `??` to preserve that snapping.
+ */
+export function computeNextStop(goal, direction, stops) {
+    if (direction > 0) {
+        const ascStops = [...stops].sort((a, b) => a - b);
+        return ascStops.find(stop => stop >= goal) || ascStops[ascStops.length - 1];
+    }
+    const descStops = [...stops].sort((a, b) => b - a);
+    return descStops.find(stop => stop <= goal) || descStops[descStops.length - 1];
+}
+export function isNodeInside(node, container) {
+    let current = node instanceof Node ? node : null;
+    while (current?.parentNode) {
+        if (current === container)
+            return true;
+        current = current.parentNode;
+    }
+    return false;
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BottomPositionParams, BottomSheetToolbarProps, BottomSpacerParams, MediumHeightParams, MinHeightParams, MinimizeAndCloseParams, TopPositionParams } from './types';
+export declare const ANIMATION_DURATION = 250;
+export declare const computeToolbarHeight: (toolbarProps?: BottomSheetToolbarProps) => number;
+export declare const computeMaxHeight: (toolbarProps?: BottomSheetToolbarProps) => number;
+export declare const computeMediumHeight: ({ backdrop, maxHeight, mediumHeight, mediumHeightRatio, innerContentHeight, bottomSpacerHeight, offset }: MediumHeightParams) => number;
+export declare const computeMinHeight: ({ isClosable, isOpenMin, headerRef, offset, actionButtonsHeight, actionButtonsBottomMargin }: MinHeightParams) => number;
+/** Gives the header child the ref the sheet measures it with */
+export declare const makeOverriddenChildren: (children: React.ReactNode, headerContentRef: React.Ref<HTMLDivElement>) => React.ReactNode;
+export declare const setTopPosition: ({ snapIndex, peekHeights, isTopPosition, setIsTopPosition }: TopPositionParams) => void;
+export declare const setBottomPosition: ({ snapIndex, isBottomPosition, setIsBottomPosition }: BottomPositionParams) => void;
+export declare const minimizeAndClose: ({ backdrop, setCurrentIndex, setIsTopPosition, setIsBottomPosition, handleClose }: MinimizeAndCloseParams) => void;
+export declare const computeBottomSpacer: ({ backdrop, maxHeight, innerContentHeight, toolbarProps, offset }: BottomSpacerParams) => number;
+export declare const getCssValue: (element: Element | null, property: string) => number;

package/dist/components/BottomSheet/helpers.js

@@ -0,0 +1,95 @@
+import React, { cloneElement, isValidElement } from 'react';
+import BottomSheetHeader from './BottomSheetHeader';
+import { getSafeAreaInset } from './safeArea';
+export const ANIMATION_DURATION = 250;
+export const computeToolbarHeight = (toolbarProps = {}) => {
+    const { ref, height } = toolbarProps;
+    let toolbarHeight = 1;
+    if (height) {
+        toolbarHeight = height;
+    }
+    else if (ref?.current) {
+        toolbarHeight = ref.current.offsetHeight;
+    }
+    return toolbarHeight + getSafeAreaInset('top');
+};
+export const computeMaxHeight = (toolbarProps) => {
+    return window.innerHeight - computeToolbarHeight(toolbarProps);
+};
+export const computeMediumHeight = ({ backdrop, maxHeight, mediumHeight, mediumHeightRatio, innerContentHeight, bottomSpacerHeight, offset }) => {
+    const mediumHeightOrWithRatio = mediumHeight || Math.round(maxHeight * mediumHeightRatio);
+    if (backdrop) {
+        if (mediumHeightOrWithRatio < innerContentHeight) {
+            return mediumHeightOrWithRatio < maxHeight
+                ? mediumHeightOrWithRatio
+                : maxHeight;
+        }
+        return innerContentHeight > maxHeight
+            ? maxHeight
+            : innerContentHeight + bottomSpacerHeight;
+    }
+    if (innerContentHeight < mediumHeightOrWithRatio) {
+        return innerContentHeight + offset;
+    }
+    return mediumHeightOrWithRatio > maxHeight
+        ? maxHeight
+        : mediumHeightOrWithRatio;
+};
+export const computeMinHeight = ({ isClosable, isOpenMin, headerRef, offset = 0, actionButtonsHeight, actionButtonsBottomMargin }) => {
+    if (isClosable && !isOpenMin)
+        return 0;
+    return ((headerRef.current?.offsetHeight ?? 0) +
+        offset +
+        actionButtonsHeight +
+        actionButtonsBottomMargin +
+        getSafeAreaInset('bottom'));
+};
+/** Gives the header child the ref the sheet measures it with */
+export const makeOverriddenChildren = (children, headerContentRef) => {
+    return React.Children.map(children, child => isValidElement(child) && child.type === BottomSheetHeader
+        ? cloneElement(child, {
+            ref: headerContentRef
+        })
+        : child);
+};
+export const setTopPosition = ({ snapIndex, peekHeights, isTopPosition, setIsTopPosition }) => {
+    const maxHeightSnapIndex = peekHeights.length - 1;
+    if (snapIndex > maxHeightSnapIndex) {
+        setIsTopPosition(true);
+    }
+    if (snapIndex === maxHeightSnapIndex && !isTopPosition) {
+        setIsTopPosition(true);
+    }
+    if (snapIndex < maxHeightSnapIndex && isTopPosition) {
+        setIsTopPosition(false);
+    }
+};
+export const setBottomPosition = ({ snapIndex, isBottomPosition, setIsBottomPosition }) => {
+    if (snapIndex === 0 && !isBottomPosition) {
+        setIsBottomPosition(true);
+    }
+    if (snapIndex !== 0 && isBottomPosition) {
+        setIsBottomPosition(false);
+    }
+};
+export const minimizeAndClose = ({ backdrop, setCurrentIndex, setIsTopPosition, setIsBottomPosition, handleClose }) => {
+    if (backdrop) {
+        setCurrentIndex(0);
+        setIsTopPosition(false);
+        setIsBottomPosition(true);
+        setTimeout(handleClose, ANIMATION_DURATION);
+    }
+};
+export const computeBottomSpacer = ({ backdrop, maxHeight, innerContentHeight, toolbarProps, offset }) => {
+    // Content taller than the available height
+    if (maxHeight - innerContentHeight <= 0) {
+        return offset + computeToolbarHeight(toolbarProps);
+    }
+    // Without backdrop, the sheet must be able to open up to the top of the window
+    return backdrop ? offset : maxHeight - innerContentHeight;
+};
+export const getCssValue = (element, property) => {
+    return element
+        ? parseFloat(getComputedStyle(element).getPropertyValue(property))
+        : 0;
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BottomSheetProps } from './types';
+/**
+ * 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.
+ */
+declare const BottomSheet: ({ portalProps, ...props }: BottomSheetProps) => React.JSX.Element;
+export default BottomSheet;

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/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';
@@ -49,6 +53,10 @@ 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';

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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "10.4.1",
+  "version": "10.5.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -60,7 +60,10 @@
   "dependencies": {
     "@linagora/twake-css": "^1.0.0",
     "@mui/utils": "^9.2.0",
+    "@react-spring/web": "10.1.2",
+    "@use-gesture/react": "10.3.1",
     "classnames": "^2.5.1",
+    "react-use-measure": "2.1.7",
     "react-virtuoso": "4.13.0",
     "rooks": "8.4.0"
   },