@alfalab/core-components 25.6.0 → 26.0.0

package/bottom-sheet/modern/component-6718dad9.js

@@ -0,0 +1,234 @@
+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 '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/ArrowBackMIcon';
+import { BaseModalContext, BaseModal } from '../../base-modal/modern';
+import { Typography } from '../../typography/modern';
+import '../../icon-button/modern';
+import { Closer } from './components/closer/Component.js';
+import { Backer } from './components/backer/Component.js';
+import { Footer } from './components/footer/Component.js';
+import '../../backdrop/modern';
+import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
+
+var styles = {"header":"bottom-sheet__header_6oyfh","sticky":"bottom-sheet__sticky_6oyfh","highlighted":"bottom-sheet__highlighted_6oyfh","justifyEnd":"bottom-sheet__justifyEnd_6oyfh","marker":"bottom-sheet__marker_6oyfh","addon":"bottom-sheet__addon_6oyfh","addonFixed":"bottom-sheet__addonFixed_6oyfh","addonLeft":"bottom-sheet__addonLeft_6oyfh","addonRight":"bottom-sheet__addonRight_6oyfh","title":"bottom-sheet__title_6oyfh","titleCenter":"bottom-sheet__titleCenter_6oyfh","titleLeft":"bottom-sheet__titleLeft_6oyfh","trimTitle":"bottom-sheet__trimTitle_6oyfh","titleBigIndentHorizontal":"bottom-sheet__titleBigIndentHorizontal_6oyfh","titleIndentRight":"bottom-sheet__titleIndentRight_6oyfh","titleIndentLeft":"bottom-sheet__titleIndentLeft_6oyfh"};
+require('./components/header/index.css');
+
+const Header = ({ title, className, addonClassName, closerClassName, backerClassName, swipeable, 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,
+        }) },
+        swipeable && React.createElement("div", { className: cn(styles.marker) }),
+        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_2931u","component":"bottom-sheet__component_2931u","withTransition":"bottom-sheet__withTransition_2931u","scrollableContainer":"bottom-sheet__scrollableContainer_2931u","marker":"bottom-sheet__marker_2931u","content":"bottom-sheet__content_2931u","noHeader":"bottom-sheet__noHeader_2931u","noFooter":"bottom-sheet__noFooter_2931u","scrollLocked":"bottom-sheet__scrollLocked_2931u","appear":"bottom-sheet__appear_2931u","enter":"bottom-sheet__enter_2931u","appearActive":"bottom-sheet__appearActive_2931u","enterActive":"bottom-sheet__enterActive_2931u","enterDone":"bottom-sheet__enterDone_2931u","appearDone":"bottom-sheet__appearDone_2931u","exit":"bottom-sheet__exit_2931u","exitActive":"bottom-sheet__exitActive_2931u"};
+require('./index.css');
+
+const TIMEOUT = 300;
+const SWIPE_CLOSE_VELOCITY = 0.4;
+const MIN_BACKDROP_OPACITY = 0.2;
+const HEADER_HEIGHT = 56;
+/* Верхний отступ шторки, если она открыта на максимальную высоту */
+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, 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,
+        swipeable,
+        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)) {
+            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 && (hideHeader || emptyHeader) && (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/bottom-sheet/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/bottom-sheet/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 '../../base-modal/modern';
-import { Typography } from '../../typography/modern';
-import { Footer } from './components/footer/Component.js';
+import 'react';
+import 'classnames';
+import 'react-div-100vh';
+import 'react-swipeable';
+import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/ArrowBackMIcon';
+import '../../base-modal/modern';
+import '../../typography/modern';
+import '../../icon-button/modern';
+import './components/closer/Component.js';
+import './components/backer/Component.js';
+import './components/footer/Component.js';
 import '../../backdrop/modern';
-import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
-
-var styles = {"modal":"bottom-sheet__modal_13jph","component":"bottom-sheet__component_13jph","withTransition":"bottom-sheet__withTransition_13jph","marker":"bottom-sheet__marker_13jph","scrollableContainer":"bottom-sheet__scrollableContainer_13jph","withPadding":"bottom-sheet__withPadding_13jph","content":"bottom-sheet__content_13jph","title":"bottom-sheet__title_13jph","scrollLocked":"bottom-sheet__scrollLocked_13jph","appear":"bottom-sheet__appear_13jph","enter":"bottom-sheet__enter_13jph","appearActive":"bottom-sheet__appearActive_13jph","enterActive":"bottom-sheet__enterActive_13jph","enterDone":"bottom-sheet__enterDone_13jph","appearDone":"bottom-sheet__appearDone_13jph","exit":"bottom-sheet__exit_13jph","exitActive":"bottom-sheet__exitActive_13jph"};
-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';
+export { B as BottomSheet, C as CLOSE_OFFSET, H as HEADER_OFFSET } from './component-6718dad9.js';

package/bottom-sheet/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 "../../../../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/bottom-sheet/modern/components/backer/Component.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import cn from 'classnames';
+import { ArrowBackMIcon } from '@alfalab/icons-glyph/ArrowBackMIcon';
+import { IconButton } from '../../../../icon-button/modern';
+
+var styles = {"backer":"bottom-sheet__backer_1svh2","button":"bottom-sheet__button_1svh2"};
+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 };

package/bottom-sheet/modern/components/backer/index.css

@@ -0,0 +1,16 @@
+/* hash: k9who */
+.bottom-sheet__backer_1svh2 {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.bottom-sheet__button_1svh2 {
+    background: rgba(0, 0, 0, 0.04);
+    -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+    border-radius: 50px;
+}

package/bottom-sheet/modern/components/closer/Component.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonHTMLAttributes, ElementType } from "react";
+import { IconButtonProps } from "../../../../icon-button";
+type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Размер кнопки
+     */
+    size?: IconButtonProps['size'];
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+};
+declare const Closer: React.FC<CloserProps>;
+export { CloserProps, Closer };

package/bottom-sheet/modern/components/closer/Component.js

@@ -0,0 +1,19 @@
+import React, { useContext, useCallback } from 'react';
+import cn from 'classnames';
+import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
+import { BaseModalContext } from '../../../../base-modal/modern';
+import { IconButton } from '../../../../icon-button/modern';
+
+var styles = {"closer":"bottom-sheet__closer_3tn3y","button":"bottom-sheet__button_3tn3y"};
+require('./index.css');
+
+const Closer = ({ className, size = 'xs', icon = CrossMIcon, ...restProps }) => {
+    const { onClose } = useContext(BaseModalContext);
+    const handleClick = useCallback((event) => {
+        onClose(event, 'closerClick');
+    }, [onClose]);
+    return (React.createElement("div", { className: cn(styles.closer, className) },
+        React.createElement(IconButton, Object.assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
+};
+
+export { Closer };

package/bottom-sheet/modern/components/closer/index.css

@@ -0,0 +1,16 @@
+/* hash: ycx49 */
+.bottom-sheet__closer_3tn3y {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.bottom-sheet__button_3tn3y {
+    background: rgba(0, 0, 0, 0.04);
+    -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+    border-radius: 50px;
+}

package/bottom-sheet/modern/components/footer/Component.d.ts

@@ -4,6 +4,10 @@ type FooterProps = {
      * Контент футера
      */
     children?: ReactNode;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
     /**
      * Дополнительный класс
      */

package/bottom-sheet/modern/components/footer/Component.js

@@ -2,16 +2,17 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/modern';
 
-var styles = {"footer":"bottom-sheet__footer_1v1zj","highlighted":"bottom-sheet__highlighted_1v1zj"};
+var styles = {"footer":"bottom-sheet__footer_1jt1d","sticky":"bottom-sheet__sticky_1jt1d","highlighted":"bottom-sheet__highlighted_1jt1d"};
 require('./index.css');
 
-const Footer = ({ children, className }) => {
+const Footer = ({ children, className, sticky }) => {
     const { footerHighlighted, setHasFooter } = useContext(BaseModalContext);
     useEffect(() => {
         setHasFooter(true);
     }, [setHasFooter]);
     return (React.createElement("div", { className: cn(styles.footer, className, {
-            [styles.highlighted]: footerHighlighted,
+            [styles.sticky]: sticky,
+            [styles.highlighted]: footerHighlighted && sticky,
         }) }, children));
 };
 

package/bottom-sheet/modern/components/footer/index.css

@@ -1,26 +1,32 @@
 /* hash: 1585q */
 :root {
     --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
 }
 :root {
 
     /* Hard */
 
     /* Up */
-    --shadow-s-up: 0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08);
 
     /* Hard up */
 }
 :root {
     --gap-m: 16px;
-    --gap-3xl: 40px;
 }
-.bottom-sheet__footer_1v1zj {
+:root {
+    --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-primary);
+    --bottom-sheet-footer-background-color: var(--color-light-bg-primary);
+}
+.bottom-sheet__footer_1jt1d {
+    padding: var(--gap-m) var(--gap-m);
+    background-color: var(--color-light-bg-primary);
+}
+.bottom-sheet__sticky_1jt1d {
     position: sticky;
     bottom: 0;
-    padding: var(--gap-m) var(--gap-m) var(--gap-3xl);
-    background-color: var(--color-light-bg-primary);
 }
-.bottom-sheet__highlighted_1v1zj {
-    box-shadow: var(--shadow-s-up);
+.bottom-sheet__highlighted_1jt1d {
+    border-top: var(--bottom-sheet-footer-border-top);
+    background-color: var(--bottom-sheet-footer-background-color);
 }

package/bottom-sheet/modern/components/header/Component.js

@@ -0,0 +1,15 @@
+import 'react';
+import 'classnames';
+import 'react-div-100vh';
+import 'react-swipeable';
+import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/ArrowBackMIcon';
+import '../../../../base-modal/modern';
+import '../../../../typography/modern';
+import '../../../../icon-button/modern';
+import '../closer/Component.js';
+import '../backer/Component.js';
+import '../footer/Component.js';
+import '../../../../backdrop/modern';
+import '../swipeable-backdrop/Component.js';
+export { a as Header } from '../../component-6718dad9.js';