@linagora/twake-mui 10.4.0 → 10.5.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# @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)
+
+
+### Bug Fixes
+
+* **twake-mui:** Follow the color scheme in overrides and SearchBar ([#142](https://github.com/linagora/twake-ui/issues/142)) ([1c2efac](https://github.com/linagora/twake-ui/commit/1c2efacba0a3e140384775e9a4f8e76416409b7a))
+
 # @linagora/twake-mui [10.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.3.0...@linagora/twake-mui@10.4.0) (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;