@alfalab/core-components-bottom-sheet 3.1.0 → 4.0.1

package/dist/modern/component-5b171f70.d.ts

@@ -0,0 +1,181 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { BottomSheetTitleAlign } from "./index";
+import { TransitionProps } from 'react-transition-group/Transition';
+type HeaderProps = {
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для компонента крестика
+     */
+    closerClassName?: string;
+    /**
+     * Дополнительный класс для компонента стрелки назад
+     */
+    backerClassName?: string;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие компонента стрелки назад
+     */
+    hasBacker?: boolean;
+    /**
+     * Выравнивание заголовка
+     */
+    titleAlign?: BottomSheetTitleAlign;
+    /**
+     * Будет ли обрезан заголовок
+     */
+    trimTitle?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+};
+declare const Header: FC<HeaderProps>;
+type BottomSheetTitleAlign$0 = 'center' | 'left';
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс шапки
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для компонента крестика
+     */
+    closerClassName?: string;
+    /**
+     * Дополнительный класс для компонента стрелки назад
+     */
+    backerClassName?: string;
+    /**
+     * TransitionProps, прокидываются в компонент CSSTransitionProps.
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Будет ли свайпаться шторка
+     * @default true
+     */
+    swipeable?: boolean;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие компонента стрелки назад
+     */
+    hasBacker?: boolean;
+    /**
+     * Выравнивание заголовка
+     */
+    titleAlign?: BottomSheetTitleAlign$0;
+    /**
+     * Фиксирует шапку
+     */
+    stickyHeader?: boolean;
+    /**
+     * Фиксирует футер
+     */
+    stickyFooter?: boolean;
+    /**
+     * Высота шторки
+     */
+    initialHeight?: 'default' | 'full';
+    /**
+     * Будет ли виден оверлэй
+     */
+    hideOverlay?: boolean;
+    /**
+     * Будет ли видна шапка
+     */
+    hideHeader?: boolean;
+    /**
+     * Будет ли обрезан заголовок
+     */
+    trimTitle?: boolean;
+    /**
+     * Запретить закрытие шторки кликом на оверлэй
+     */
+    disableOverlayClick?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+};
+declare const HEADER_OFFSET = 24;
+declare const CLOSE_OFFSET = 0.2;
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+export { HeaderProps, Header, BottomSheetTitleAlign$0 as BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };

package/dist/modern/component-5b171f70.js

@@ -0,0 +1,230 @@
+import React, { useContext, useEffect, forwardRef, useState, useRef, useCallback } from 'react';
+import cn from 'classnames';
+import { use100vh } from 'react-div-100vh';
+import { useSwipeable } from 'react-swipeable';
+import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/dist/modern';
+import { Typography } from '@alfalab/core-components-typography/dist/modern';
+import { Closer } from './components/closer/Component.js';
+import { Backer } from './components/backer/Component.js';
+import { Footer } from './components/footer/Component.js';
+import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
+
+var styles = {"header":"bottom-sheet__header_1qzdw","sticky":"bottom-sheet__sticky_1qzdw","highlighted":"bottom-sheet__highlighted_1qzdw","justifyEnd":"bottom-sheet__justifyEnd_1qzdw","addon":"bottom-sheet__addon_1qzdw","addonFixed":"bottom-sheet__addonFixed_1qzdw","addonLeft":"bottom-sheet__addonLeft_1qzdw","addonRight":"bottom-sheet__addonRight_1qzdw","title":"bottom-sheet__title_1qzdw","titleCenter":"bottom-sheet__titleCenter_1qzdw","titleLeft":"bottom-sheet__titleLeft_1qzdw","trimTitle":"bottom-sheet__trimTitle_1qzdw","titleBigIndentHorizontal":"bottom-sheet__titleBigIndentHorizontal_1qzdw","titleIndentRight":"bottom-sheet__titleIndentRight_1qzdw","titleIndentLeft":"bottom-sheet__titleIndentLeft_1qzdw"};
+require('./components/header/index.css')
+
+const Header = ({ title, className, addonClassName, closerClassName, backerClassName, leftAddons, rightAddons, hasCloser, hasBacker, titleAlign, trimTitle, sticky, onBack, }) => {
+    const { headerHighlighted, setHasHeader, setHeaderOffset } = useContext(BaseModalContext);
+    const hasLeftPart = hasBacker || leftAddons || titleAlign === 'center';
+    const hasRightPart = hasCloser || rightAddons || titleAlign === 'center';
+    const hasHeaderContent = title || hasBacker || hasCloser;
+    useEffect(() => {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    useEffect(() => {
+        setHeaderOffset(HEADER_OFFSET);
+    }, [setHeaderOffset]);
+    const getTitleIndent = () => {
+        const titleAlignedCenter = titleAlign === 'center';
+        const hasLeftPart = hasBacker || leftAddons;
+        const hasRightPart = hasCloser || rightAddons;
+        return cn({
+            [styles.titleBigIndentHorizontal]: !sticky && titleAlignedCenter && (hasLeftPart || hasRightPart),
+            [styles.titleIndentLeft]: !sticky && !titleAlignedCenter && hasLeftPart,
+            [styles.titleIndentRight]: !sticky && !titleAlignedCenter && hasRightPart,
+        });
+    };
+    return (React.createElement("div", { className: cn(styles.header, className, {
+            [styles.justifyEnd]: !title,
+            [styles.highlighted]: headerHighlighted && sticky,
+            [styles.sticky]: sticky,
+        }) },
+        hasLeftPart && (React.createElement("div", { className: cn(styles.addon, addonClassName, {
+                [styles.addonFixed]: !sticky,
+                [styles.addonLeft]: !sticky,
+            }) }, hasBacker ? (React.createElement(Backer, { className: backerClassName, onClick: onBack })) : (leftAddons))),
+        hasHeaderContent && (React.createElement(Typography.Text, { view: 'primary-large', weight: 'bold', className: cn(styles.title, getTitleIndent(), {
+                [styles.titleCenter]: titleAlign === 'center',
+                [styles.titleLeft]: titleAlign === 'left',
+                [styles.trimTitle]: trimTitle,
+            }), color: 'primary' }, title)),
+        hasRightPart && (React.createElement("div", { className: cn(styles.addon, addonClassName, {
+                [styles.addonFixed]: !sticky,
+                [styles.addonRight]: !sticky,
+            }) }, hasCloser ? React.createElement(Closer, { className: closerClassName }) : rightAddons))));
+};
+
+var styles$1 = {"modal":"bottom-sheet__modal_b5hs7","component":"bottom-sheet__component_b5hs7","withTransition":"bottom-sheet__withTransition_b5hs7","scrollableContainer":"bottom-sheet__scrollableContainer_b5hs7","marker":"bottom-sheet__marker_b5hs7","content":"bottom-sheet__content_b5hs7","noHeader":"bottom-sheet__noHeader_b5hs7","noFooter":"bottom-sheet__noFooter_b5hs7","scrollLocked":"bottom-sheet__scrollLocked_b5hs7","appear":"bottom-sheet__appear_b5hs7","enter":"bottom-sheet__enter_b5hs7","appearActive":"bottom-sheet__appearActive_b5hs7","enterActive":"bottom-sheet__enterActive_b5hs7","enterDone":"bottom-sheet__enterDone_b5hs7","appearDone":"bottom-sheet__appearDone_b5hs7","exit":"bottom-sheet__exit_b5hs7","exitActive":"bottom-sheet__exitActive_b5hs7"};
+require('./index.css')
+
+const TIMEOUT = 300;
+const SWIPE_CLOSE_VELOCITY = 0.4;
+const MIN_BACKDROP_OPACITY = 0.2;
+const HEADER_HEIGHT = 56;
+const MARKET_HEIGHT = 24;
+/* Верхний отступ шторки, если она открыта на максимальную высоту */
+const HEADER_OFFSET = 24;
+const CLOSE_OFFSET = 0.2;
+const BottomSheet = forwardRef(({ open, title, actionButton, contentClassName, headerClassName, addonClassName, closerClassName, backerClassName, className, leftAddons, rightAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideHeader, disableOverlayClick, children, zIndex, transitionProps = {}, dataTestId, swipeable = true, onClose, onBack, }, ref) => {
+    const [sheetOffset, setSheetOffset] = useState(0);
+    const [backdropOpacity, setBackdropOpacity] = useState(1);
+    const [scrollLocked, setScrollLocked] = useState(false);
+    const sheetHeight = useRef(0);
+    const scrollableContainer = useRef(null);
+    const scrollableContainerScrollValue = useRef(0);
+    const emptyHeader = !hasCloser && !hasBacker && !leftAddons && !rightAddons && !title;
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    const fullHeight = use100vh();
+    const targetHeight = `${fullHeight - HEADER_OFFSET}px`;
+    const headerProps = {
+        title,
+        headerClassName,
+        addonClassName,
+        closerClassName,
+        backerClassName,
+        leftAddons,
+        rightAddons,
+        hasCloser,
+        hasBacker,
+        titleAlign,
+        trimTitle,
+        sticky: stickyHeader,
+        onBack,
+    };
+    const getBackdropOpacity = (offset) => {
+        if (sheetHeight.current === 0)
+            return MIN_BACKDROP_OPACITY;
+        const opacity = 1 - (1 - MIN_BACKDROP_OPACITY) * (offset / sheetHeight.current);
+        return Number(opacity.toFixed(2));
+    };
+    const getSheetOffset = (deltaY) => {
+        let offset = deltaY > 0 ? 0 : -deltaY;
+        offset -= scrollableContainerScrollValue.current;
+        return Math.floor(Math.max(0, offset));
+    };
+    /**
+     * Если контент внутри шторки скроллится - то шторка не должна свайпаться
+     * Если шапка внутри шторки зафиксирована - то шторка должна свайпаться только в области шапки
+     */
+    const shouldSkipSwiping = (offsetY) => {
+        if (!swipeable)
+            return true;
+        if (!scrollableContainer.current ||
+            (stickyHeader && offsetY <= HEADER_HEIGHT + HEADER_OFFSET) ||
+            (!stickyHeader && offsetY <= MARKET_HEIGHT + HEADER_OFFSET)) {
+            return false;
+        }
+        if (!scrollableContainerScrollValue.current) {
+            scrollableContainerScrollValue.current = Math.floor(scrollableContainer.current.scrollTop);
+        }
+        return scrollableContainer.current.scrollTop > 0;
+    };
+    const handleBackdropSwipedDown = ({ velocity }) => {
+        if (velocity > SWIPE_CLOSE_VELOCITY) {
+            onClose();
+        }
+    };
+    const handleSheetSwipedDown = ({ velocity, initial }) => {
+        const offsetY = initial[1];
+        if (shouldSkipSwiping(offsetY)) {
+            return;
+        }
+        const shouldClose = sheetOffset > sheetHeight.current * CLOSE_OFFSET || velocity > SWIPE_CLOSE_VELOCITY;
+        if (shouldClose) {
+            onClose();
+        }
+        else {
+            setSheetOffset(0);
+            setBackdropOpacity(1);
+        }
+    };
+    const handleSheetSwiped = () => {
+        setScrollLocked(false);
+        scrollableContainerScrollValue.current = 0;
+    };
+    const handleSheetSwiping = ({ deltaY, initial }) => {
+        const offsetY = initial[1];
+        if (shouldSkipSwiping(offsetY)) {
+            return;
+        }
+        const offset = getSheetOffset(deltaY);
+        const opacity = getBackdropOpacity(offset);
+        setSheetOffset(offset);
+        setBackdropOpacity(opacity);
+        /**
+         * Если шторка начинает свайпаться, то блокируем скролл внутри нее
+         */
+        if (offset > 0) {
+            setScrollLocked(true);
+        }
+    };
+    const backdropSwipeablehandlers = useSwipeable({
+        onSwipedDown: handleBackdropSwipedDown,
+        delta: 100,
+        trackMouse: swipeable,
+    });
+    const sheetSwipeablehandlers = useSwipeable({
+        onSwiping: handleSheetSwiping,
+        onSwipedDown: handleSheetSwipedDown,
+        onSwiped: handleSheetSwiped,
+        delta: 5,
+        trackMouse: swipeable,
+    });
+    const handleExited = useCallback(node => {
+        setBackdropOpacity(1);
+        if (transitionProps.onExited) {
+            transitionProps.onExited(node);
+        }
+    }, [transitionProps]);
+    const handleEntered = useCallback((node, isAppearing) => {
+        if (!sheetHeight.current) {
+            sheetHeight.current = node.getBoundingClientRect().height;
+        }
+        setBackdropOpacity(1);
+        if (transitionProps.onEntered) {
+            transitionProps.onEntered(node, isAppearing);
+        }
+    }, [transitionProps]);
+    useEffect(() => {
+        if (!open) {
+            setSheetOffset(0);
+        }
+    }, [open]);
+    const getSwipeStyles = () => ({
+        transform: sheetOffset ? `translateY(${sheetOffset}px)` : '',
+    });
+    const getHeightStyles = () => ({
+        height: initialHeight === 'full' ? targetHeight : 'unset',
+        maxHeight: targetHeight,
+    });
+    return (React.createElement(BaseModal, { open: open, ref: ref, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: {
+            opacity: backdropOpacity,
+            handlers: swipeable ? backdropSwipeablehandlers : false,
+            opacityTimeout: TIMEOUT,
+            invisible: initialHeight === 'full' ? false : hideOverlay,
+        }, disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: styles$1.modal, transitionProps: {
+            appear: true,
+            timeout: TIMEOUT,
+            classNames: styles$1,
+            ...transitionProps,
+            onExited: handleExited,
+            onEntered: handleEntered,
+        } },
+        React.createElement("div", Object.assign({ className: cn(styles$1.component, className, {
+                [styles$1.withTransition]: !sheetOffset,
+            }), style: {
+                ...getSwipeStyles(),
+                ...getHeightStyles(),
+            } }, sheetSwipeablehandlers),
+            React.createElement("div", { className: cn(styles$1.scrollableContainer, {
+                    [styles$1.scrollLocked]: scrollLocked,
+                }), ref: scrollableContainer },
+                swipeable && React.createElement("div", { className: cn(styles$1.marker) }),
+                !hideHeader && !emptyHeader && React.createElement(Header, Object.assign({}, headerProps)),
+                React.createElement("div", { className: cn(styles$1.content, contentClassName, {
+                        [styles$1.noHeader]: hideHeader || emptyHeader,
+                        [styles$1.noFooter]: !actionButton,
+                    }) }, children),
+                actionButton && React.createElement(Footer, { sticky: stickyFooter }, actionButton)))));
+});
+
+export { BottomSheet as B, CLOSE_OFFSET as C, HEADER_OFFSET as H, Header as a };

package/dist/modern/component.d.ts

@@ -1,55 +0,0 @@
-/// <reference types="react-transition-group" />
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-import { TransitionProps } from 'react-transition-group/Transition';
-type BottomSheetProps = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Управление видимостью
-     */
-    open: boolean;
-    /**
-     * Заголовок
-     */
-    title?: ReactNode;
-    /**
-     * Кнопка действия (обычно, это кнопка закрытия)
-     */
-    actionButton?: ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс
-     */
-    contentClassName?: string;
-    /**
-     * TransitionProps, прокидываются в компонент CSSTransitionProps.
-     */
-    transitionProps?: Partial<TransitionProps>;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Будет ли свайпаться на десктопе
-     * @default false
-     */
-    desktopSwipeable?: boolean;
-    /**
-     * Обработчик закрытия
-     */
-    onClose: () => void;
-};
-declare const CLOSE_OFFSET = 0.2;
-declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
-export { BottomSheetProps, CLOSE_OFFSET, BottomSheet };

package/dist/modern/component.js

@@ -1,144 +1,15 @@
-import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
-import cn from 'classnames';
-import { useSwipeable } from 'react-swipeable';
-import { BaseModal } from '@alfalab/core-components-base-modal/dist/modern';
-import { Typography } from '@alfalab/core-components-typography/dist/modern';
-import { Footer } from './components/footer/Component.js';
+import 'react';
+import 'classnames';
+import 'react-div-100vh';
+import 'react-swipeable';
+import '@alfalab/core-components-base-modal/dist/modern';
+import '@alfalab/core-components-typography/dist/modern';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './components/closer/Component.js';
+import '@alfalab/icons-glyph/ArrowBackMIcon';
+import './components/backer/Component.js';
+export { B as BottomSheet, C as CLOSE_OFFSET, H as HEADER_OFFSET } from './component-5b171f70.js';
+import './components/footer/Component.js';
 import '@alfalab/core-components-backdrop/dist/modern';
-import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
-
-var styles = {"modal":"bottom-sheet__modal_1umf1","component":"bottom-sheet__component_1umf1","withTransition":"bottom-sheet__withTransition_1umf1","marker":"bottom-sheet__marker_1umf1","scrollableContainer":"bottom-sheet__scrollableContainer_1umf1","withPadding":"bottom-sheet__withPadding_1umf1","content":"bottom-sheet__content_1umf1","title":"bottom-sheet__title_1umf1","scrollLocked":"bottom-sheet__scrollLocked_1umf1","appear":"bottom-sheet__appear_1umf1","enter":"bottom-sheet__enter_1umf1","appearActive":"bottom-sheet__appearActive_1umf1","enterActive":"bottom-sheet__enterActive_1umf1","enterDone":"bottom-sheet__enterDone_1umf1","appearDone":"bottom-sheet__appearDone_1umf1","exit":"bottom-sheet__exit_1umf1","exitActive":"bottom-sheet__exitActive_1umf1"};
-require('./index.css')
-
-const TIMEOUT = 300;
-const SWIPE_CLOSE_VELOCITY = 0.4;
-const MIN_BACKDROP_OPACITY = 0.2;
-const CLOSE_OFFSET = 0.2;
-const BottomSheet = forwardRef(({ open, title, actionButton, contentClassName, className, children, zIndex, transitionProps = {}, dataTestId, desktopSwipeable: trackMouse = false, onClose, }, ref) => {
-    const [sheetOffset, setSheetOffset] = useState(0);
-    const [backdropOpacity, setBackdropOpacity] = useState(1);
-    const [scrollLocked, setScrollLocked] = useState(false);
-    const sheetHeight = useRef(0);
-    const scrollableContainer = useRef(null);
-    const scrollableContainerScrollValue = useRef(0);
-    const getBackdropOpacity = (offset) => {
-        if (sheetHeight.current === 0)
-            return MIN_BACKDROP_OPACITY;
-        const opacity = 1 - (1 - MIN_BACKDROP_OPACITY) * (offset / sheetHeight.current);
-        return Number(opacity.toFixed(2));
-    };
-    const getSheetOffset = (deltaY) => {
-        let offset = deltaY > 0 ? 0 : -deltaY;
-        offset -= scrollableContainerScrollValue.current;
-        return Math.floor(Math.max(0, offset));
-    };
-    /**
-     * Если контент внутри шторки скроллится - то шторка не должна свайпаться
-     */
-    const shouldSkipSwiping = () => {
-        if (!scrollableContainer.current) {
-            return false;
-        }
-        if (!scrollableContainerScrollValue.current) {
-            scrollableContainerScrollValue.current = Math.floor(scrollableContainer.current.scrollTop);
-        }
-        return scrollableContainer.current.scrollTop > 0;
-    };
-    const handleBackdropSwipedDown = ({ velocity }) => {
-        if (velocity > SWIPE_CLOSE_VELOCITY) {
-            onClose();
-        }
-    };
-    const handleSheetSwipedDown = ({ velocity }) => {
-        if (shouldSkipSwiping()) {
-            return;
-        }
-        const shouldClose = sheetOffset > sheetHeight.current * CLOSE_OFFSET || velocity > SWIPE_CLOSE_VELOCITY;
-        if (shouldClose) {
-            onClose();
-        }
-        else {
-            setSheetOffset(0);
-            setBackdropOpacity(1);
-        }
-    };
-    const handleSheetSwiped = () => {
-        setScrollLocked(false);
-        scrollableContainerScrollValue.current = 0;
-    };
-    const handleSheetSwiping = ({ deltaY }) => {
-        if (shouldSkipSwiping()) {
-            return;
-        }
-        const offset = getSheetOffset(deltaY);
-        const opacity = getBackdropOpacity(offset);
-        setSheetOffset(offset);
-        setBackdropOpacity(opacity);
-        /**
-         * Если шторка начинает свайпаться, то блокируем скролл внутри нее
-         */
-        if (offset > 0) {
-            setScrollLocked(true);
-        }
-    };
-    const backdropSwipeablehandlers = useSwipeable({
-        onSwipedDown: handleBackdropSwipedDown,
-        delta: 100,
-        trackMouse,
-    });
-    const sheetSwipeablehandlers = useSwipeable({
-        onSwiping: handleSheetSwiping,
-        onSwipedDown: handleSheetSwipedDown,
-        onSwiped: handleSheetSwiped,
-        delta: 5,
-        trackMouse,
-    });
-    const handleExited = useCallback(node => {
-        setBackdropOpacity(1);
-        if (transitionProps.onExited) {
-            transitionProps.onExited(node);
-        }
-    }, [transitionProps]);
-    const handleEntered = useCallback((node, isAppearing) => {
-        if (!sheetHeight.current) {
-            sheetHeight.current = node.getBoundingClientRect().height;
-        }
-        setBackdropOpacity(1);
-        if (transitionProps.onEntered) {
-            transitionProps.onEntered(node, isAppearing);
-        }
-    }, [transitionProps]);
-    useEffect(() => {
-        if (!open) {
-            setSheetOffset(0);
-        }
-    }, [open]);
-    const getSwipeStyles = () => ({
-        transform: sheetOffset ? `translateY(${sheetOffset}px)` : '',
-    });
-    return (React.createElement(BaseModal, { open: open, ref: ref, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: {
-            opacity: backdropOpacity,
-            handlers: backdropSwipeablehandlers,
-            opacityTimeout: TIMEOUT,
-        }, className: styles.modal, transitionProps: {
-            appear: true,
-            timeout: TIMEOUT,
-            classNames: styles,
-            ...transitionProps,
-            onExited: handleExited,
-            onEntered: handleEntered,
-        } },
-        React.createElement("div", Object.assign({ className: cn(styles.component, className, {
-                [styles.withTransition]: !sheetOffset,
-            }), style: getSwipeStyles() }, sheetSwipeablehandlers),
-            React.createElement("div", { className: styles.marker }),
-            React.createElement("div", { className: cn(styles.scrollableContainer, {
-                    [styles.scrollLocked]: scrollLocked,
-                    [styles.withPadding]: !actionButton,
-                }), ref: scrollableContainer },
-                title && (React.createElement(Typography.Title, { view: 'small', font: 'system', tag: 'h2', className: styles.title, color: 'primary' }, title)),
-                React.createElement("div", { className: cn(styles.content, contentClassName) }, children),
-                actionButton && React.createElement(Footer, null, actionButton)))));
-});
-
-export { BottomSheet, CLOSE_OFFSET };
+import './components/swipeable-backdrop/Component.js';

package/dist/modern/components/backer/Component.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonHTMLAttributes, ElementType } from "react";
+import { IconButtonProps } from "@alfalab/core-components-icon-button";
+type BackerProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Размер кнопки
+     */
+    size?: IconButtonProps['size'];
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Обработчик нажатия
+     */
+    onClick?: () => void;
+};
+declare const Backer: React.FC<BackerProps>;
+export { BackerProps, Backer };

package/dist/modern/components/backer/Component.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import cn from 'classnames';
+import { IconButton } from '@alfalab/core-components-icon-button/dist/modern';
+import { ArrowBackMIcon } from '@alfalab/icons-glyph/ArrowBackMIcon';
+
+var styles = {"backer":"bottom-sheet__backer_1wvld","button":"bottom-sheet__button_1wvld"};
+require('./index.css')
+
+const Backer = ({ className, size = 'xs', icon = ArrowBackMIcon, onClick, ...restProps }) => {
+    return (React.createElement("div", { className: cn(styles.backer, className) },
+        React.createElement(IconButton, Object.assign({ size: size, className: styles.button, "aria-label": '\u043D\u0430\u0437\u0430\u0434', onClick: onClick, icon: icon }, restProps))));
+};
+
+export { Backer };