@alfalab/core-components 41.17.0-beta.1 → 41.17.0-beta.11

package/bottom-sheet/modern/component.js

@@ -7,7 +7,7 @@ import { BaseModal } from '../../base-modal/modern';
 import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
-import { convertPercentToNumber, HEADER_OFFSET, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
+import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
 import '../../navigation-bar/modern';
 import '../../backdrop/modern';
 
@@ -16,26 +16,28 @@ const getDataTestId = (dataTestId, element) => {
     return dataTestId ? `${dataTestId}${elementPart}` : undefined;
 };
 
-const styles = {"modal":"bottom-sheet__modal_1yfxn","wrapper":"bottom-sheet__wrapper_1yfxn","component":"bottom-sheet__component_1yfxn","withTransition":"bottom-sheet__withTransition_1yfxn","scrollableContainer":"bottom-sheet__scrollableContainer_1yfxn","marker":"bottom-sheet__marker_1yfxn","content":"bottom-sheet__content_1yfxn","noHeader":"bottom-sheet__noHeader_1yfxn","noFooter":"bottom-sheet__noFooter_1yfxn","scrollLocked":"bottom-sheet__scrollLocked_1yfxn","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1yfxn","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1yfxn","appear":"bottom-sheet__appear_1yfxn","enter":"bottom-sheet__enter_1yfxn","appearActive":"bottom-sheet__appearActive_1yfxn","enterActive":"bottom-sheet__enterActive_1yfxn","enterDone":"bottom-sheet__enterDone_1yfxn","appearDone":"bottom-sheet__appearDone_1yfxn","exit":"bottom-sheet__exit_1yfxn","exitActive":"bottom-sheet__exitActive_1yfxn","background-accent":"bottom-sheet__background-accent_1yfxn","background-info":"bottom-sheet__background-info_1yfxn","background-attention-muted":"bottom-sheet__background-attention-muted_1yfxn","background-positive-muted":"bottom-sheet__background-positive-muted_1yfxn","background-negative-muted":"bottom-sheet__background-negative-muted_1yfxn","background-primary":"bottom-sheet__background-primary_1yfxn","background-primary-inverted":"bottom-sheet__background-primary-inverted_1yfxn","background-secondary":"bottom-sheet__background-secondary_1yfxn","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1yfxn","background-tertiary":"bottom-sheet__background-tertiary_1yfxn","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1yfxn","background-quaternary":"bottom-sheet__background-quaternary_1yfxn","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1yfxn","background-specialbg-component":"bottom-sheet__background-specialbg-component_1yfxn","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1yfxn","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1yfxn","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1yfxn","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1yfxn","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1yfxn","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1yfxn","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1yfxn","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1yfxn"};
+const styles = {"modal":"bottom-sheet__modal_1yfxn","wrapper":"bottom-sheet__wrapper_1yfxn","fullscreen":"bottom-sheet__fullscreen_1yfxn","component":"bottom-sheet__component_1yfxn","withTransition":"bottom-sheet__withTransition_1yfxn","scrollableContainer":"bottom-sheet__scrollableContainer_1yfxn","marker":"bottom-sheet__marker_1yfxn","content":"bottom-sheet__content_1yfxn","noHeader":"bottom-sheet__noHeader_1yfxn","noFooter":"bottom-sheet__noFooter_1yfxn","scrollLocked":"bottom-sheet__scrollLocked_1yfxn","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1yfxn","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1yfxn","appear":"bottom-sheet__appear_1yfxn","enter":"bottom-sheet__enter_1yfxn","appearActive":"bottom-sheet__appearActive_1yfxn","enterActive":"bottom-sheet__enterActive_1yfxn","enterDone":"bottom-sheet__enterDone_1yfxn","appearDone":"bottom-sheet__appearDone_1yfxn","exit":"bottom-sheet__exit_1yfxn","exitActive":"bottom-sheet__exitActive_1yfxn","background-accent":"bottom-sheet__background-accent_1yfxn","background-info":"bottom-sheet__background-info_1yfxn","background-attention-muted":"bottom-sheet__background-attention-muted_1yfxn","background-positive-muted":"bottom-sheet__background-positive-muted_1yfxn","background-negative-muted":"bottom-sheet__background-negative-muted_1yfxn","background-primary":"bottom-sheet__background-primary_1yfxn","background-primary-inverted":"bottom-sheet__background-primary-inverted_1yfxn","background-secondary":"bottom-sheet__background-secondary_1yfxn","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1yfxn","background-tertiary":"bottom-sheet__background-tertiary_1yfxn","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1yfxn","background-quaternary":"bottom-sheet__background-quaternary_1yfxn","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1yfxn","background-specialbg-component":"bottom-sheet__background-specialbg-component_1yfxn","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1yfxn","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1yfxn","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1yfxn","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1yfxn","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1yfxn","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1yfxn","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1yfxn","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1yfxn"};
 require('./index.css');
 
-const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, onClose, onBack, onMagnetize, }, ref) => {
+const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, onClose, onBack, onMagnetize, onOffsetChange, }, ref) => {
     const hasInitialIdx = initialActiveAreaIndex !== undefined;
     const fullHeight = use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
     const magneticAreas = useMemo(() => {
         if (magneticAreasProp) {
-            return magneticAreasProp.map((area) => convertPercentToNumber(area, fullHeight));
+            return magneticAreasProp.map((area) => convertPercentToNumber(area, fullHeight, headerOffset));
         }
-        return [0, fullHeight - HEADER_OFFSET];
-    }, [fullHeight, magneticAreasProp]);
+        return [0, fullHeight - headerOffset];
+    }, [fullHeight, headerOffset, magneticAreasProp]);
     const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
     const [sheetOffset, setSheetOffset] = useState(0);
     const [backdropOpacity, setBackdropOpacity] = useState(1);
     const [activeArea, setActiveArea] = useState(0);
-    const swipingInProgress = useRef(null);
+    const [swipingInProgress, setSwipingInProgress] = useState(null);
+    const scrollOccurred = useRef(false);
     const headerRef = useRef(null);
+    const contentRef = useRef(null);
     const sheetHeight = useRef(0);
     const sheetRef = useRef(null);
     const scrollableContainer = useRef(null);
@@ -47,6 +49,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
             : { title: title ? title?.toString() : undefined }),
         scrollableParentRef: scrollableContainer,
         headerRef,
+        headerOffset,
         className: headerClassName,
         addonClassName,
         closerClassName,
@@ -90,15 +93,17 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         }
     };
     const scrollToArea = (idx) => {
-        swipingInProgress.current = false;
+        setSwipingInProgress(false);
         const nextArea = magneticAreas[idx];
         if (nextArea === 0) {
             onClose();
+            onMagnetize?.(0);
             return;
         }
         if (nextArea) {
             setActiveArea(nextArea);
             setSheetOffset(lastMagneticArea - nextArea);
+            onMagnetize?.(getActiveAreaIndex(nextArea));
         }
     };
     const magnetize = (dir, velocity, deltaY) => {
@@ -111,6 +116,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
                 .find((area) => area < activeArea);
             if (nextArea === 0) {
                 onClose();
+                onMagnetize?.(0);
                 return;
             }
             const offset = nextArea
@@ -118,6 +124,9 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
                 : lastMagneticArea - activeArea;
             setSheetOffset(offset);
             setActiveArea((prevState) => nextArea ?? prevState);
+            if (nextArea) {
+                onMagnetize?.(getActiveAreaIndex(nextArea));
+            }
             return;
         }
         if (shouldMagnetizeUpByVelocity) {
@@ -125,6 +134,9 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
             const offset = nextArea ? lastMagneticArea - nextArea : 0;
             setSheetOffset(offset);
             setActiveArea((prevState) => nextArea ?? prevState);
+            if (nextArea) {
+                onMagnetize?.(getActiveAreaIndex(nextArea));
+            }
             return;
         }
         const offset = getSheetOffset(deltaY);
@@ -135,6 +147,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         const shouldCloseByOffset = isSecondArea && canClose && 1 - currentSheetHeight / activeArea > CLOSE_OFFSET;
         if (shouldCloseByOffset) {
             onClose();
+            onMagnetize?.(0);
             return;
         }
         const { nearestArea } = magneticAreas.reduceRight((res, area) => {
@@ -149,21 +162,26 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         });
         if (nearestArea === 0) {
             onClose();
+            onMagnetize?.(0);
         }
         else {
             setSheetOffset(lastMagneticArea - nearestArea);
             setActiveArea(nearestArea);
             setBackdropOpacity(1);
+            onMagnetize?.(getActiveAreaIndex(nearestArea));
         }
     };
     /**
      * Если контент внутри шторки скроллится - то шторка не должна свайпаться
      * Если шапка внутри шторки зафиксирована - то шторка должна свайпаться только в области шапки
      */
-    const shouldSkipSwiping = (dir, startY) => {
+    const shouldSkipSwiping = (dir, startY, event) => {
         if (!swipeable)
             return true;
-        if (scrollLockedProp || swipingInProgress.current)
+        if (!swipeableContent && contentRef.current?.contains(event.target)) {
+            return true;
+        }
+        if (scrollLockedProp || swipingInProgress)
             return false;
         const scrollableNode = scrollableContainer.current;
         // Точка верхней границы (y координата)
@@ -175,30 +193,35 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
                 Math.abs(bottomSheetTopY - startY) <= headerRef.current.clientHeight)) {
             return false;
         }
-        return dir === 'Down'
+        const shouldScroll = dir === 'Down'
             ? scrollableNode.scrollTop > 0
             : scrollableNode.scrollHeight -
                 scrollableNode.scrollTop -
                 scrollableNode.clientHeight >
                 SCROLL_OFFSET;
+        if (!scrollOccurred.current && shouldScroll) {
+            scrollOccurred.current = true;
+        }
+        return shouldScroll;
     };
-    const handleSheetSwipe = ({ dir, initial, velocity, deltaY }) => {
-        if (shouldSkipSwiping(dir, initial[1])) {
+    const handleSheetSwipe = ({ dir, initial, velocity, deltaY, event }) => {
+        if (scrollOccurred.current || shouldSkipSwiping(dir, initial[1], event)) {
             return;
         }
         magnetize(dir, velocity, deltaY);
     };
-    const handleSheetSwipeStart = ({ dir, initial }) => {
-        if (shouldSkipSwiping(dir, initial[1])) {
+    const handleSheetSwipeStart = ({ dir, initial, event }) => {
+        if (shouldSkipSwiping(dir, initial[1], event)) {
             return;
         }
-        swipingInProgress.current = true;
+        setSwipingInProgress(true);
     };
-    const handleSheetSwiped = () => {
-        swipingInProgress.current = false;
+    const handleTouchEnd = () => {
+        setSwipingInProgress(false);
+        scrollOccurred.current = false;
     };
-    const handleSheetSwiping = ({ initial, deltaY, dir }) => {
-        if (shouldSkipSwiping(dir, initial[1])) {
+    const handleSheetSwiping = ({ initial, deltaY, dir, event }) => {
+        if (scrollOccurred.current || shouldSkipSwiping(dir, initial[1], event)) {
             return;
         }
         const offset = getSheetOffset(deltaY);
@@ -211,24 +234,31 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         onSwiping: handleSheetSwiping,
         onSwipedDown: handleSheetSwipe,
         onSwipedUp: handleSheetSwipe,
-        onSwiped: handleSheetSwiped,
+        onTouchEndOrOnMouseUp: handleTouchEnd,
         trackMouse: swipeable,
-        delta: 5,
+        delta: swipeThreshold,
     });
     const handleExited = (node) => {
         const idx = initialActiveAreaIndex;
+        const nextArea = hasInitialIdx ? magneticAreas[idx] : lastMagneticArea;
         setBackdropOpacity(1);
         setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0]);
-        setActiveArea(hasInitialIdx ? magneticAreas[idx] : lastMagneticArea);
+        setActiveArea(nextArea);
         if (transitionProps.onExited) {
             transitionProps.onExited(node);
         }
     };
+    const handleEnter = (node, isAppearing) => {
+        onMagnetize?.(getActiveAreaIndex(activeArea));
+        if (transitionProps.onEnter) {
+            transitionProps.onEnter(node, isAppearing);
+        }
+    };
     const handleEntered = (node, isAppearing) => {
         setBackdropOpacity(1);
         setSheetHeight();
         // Ready for swiping
-        swipingInProgress.current = false;
+        setSwipingInProgress(false);
         if (transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
@@ -242,9 +272,13 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isFirstRender]);
     useEffect(() => {
-        onMagnetize?.(open ? getActiveAreaIndex(activeArea) : 0);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeArea, open]);
+        if (!sheetRef.current)
+            return;
+        const maxOffset = fullHeight - headerOffset;
+        const offset = open ? sheetOffset : maxOffset;
+        const percent = (offset / maxOffset) * 100;
+        onOffsetChange?.(offset, percent);
+    }, [fullHeight, headerOffset, onOffsetChange, open, sheetOffset]);
     useImperativeHandle(bottomSheetInstanceRef, () => ({
         scrollToArea,
     }));
@@ -269,21 +303,24 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
             ...transitionProps,
             onExited: handleExited,
             onEntered: handleEntered,
+            onEnter: handleEnter,
         } },
-        React.createElement("div", { style: { ...getHeightStyles() }, className: styles.wrapper, onTransitionEnd: setSheetHeight },
+        React.createElement("div", { style: { ...getHeightStyles() }, className: cn(styles.wrapper, {
+                [styles.fullscreen]: headerOffset === 0 && sheetOffset === 0,
+            }), onTransitionEnd: setSheetHeight },
             React.createElement("div", { className: cn(styles.component, bgClassName, className, {
-                    [styles.withTransition]: swipingInProgress.current === false,
+                    [styles.withTransition]: swipingInProgress === false,
                 }), style: {
                     ...getSwipeStyles(),
                     ...getHeightStyles(),
                 }, ...sheetSwipeableHandlers, ref: mergeRefs([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: setSheetHeight },
                 React.createElement("div", { ...containerProps, className: cn(styles.scrollableContainer, containerProps?.className, containerClassName, {
-                        [styles.scrollLocked]: scrollLockedProp || swipingInProgress.current,
+                        [styles.scrollLocked]: scrollLockedProp || swipingInProgress,
                         [styles.hiddenScrollbar]: hideScrollbar,
                     }), ref: mergeRefs([scrollableContainer, scrollableContainerRef]) },
                     swipeable && React.createElement("div", { className: cn(styles.marker) }),
                     !hideHeader && !emptyHeader && React.createElement(Header, { ...headerProps }),
-                    React.createElement("div", { className: cn(styles.content, contentClassName, {
+                    React.createElement("div", { ref: contentRef, className: cn(styles.content, contentClassName, {
                             [styles.noHeader]: hideHeader || emptyHeader,
                             [styles.noFooter]: !actionButton,
                         }) }, children),

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

@@ -2,6 +2,7 @@ import { FC, RefObject } from 'react';
 import { NavigationBarProps } from "../../../../navigation-bar";
 type HeaderProps = Omit<NavigationBarProps, 'view' | 'size'> & {
     headerRef: RefObject<HTMLDivElement>;
+    headerOffset: number;
 };
 declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

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

@@ -2,16 +2,15 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/modern';
 import { NavigationBar } from '../../../../navigation-bar/modern';
-import { HEADER_OFFSET } from '../../utils.js';
 
 const styles = {"headerWrapper":"bottom-sheet__headerWrapper_4ccwl","hasContent":"bottom-sheet__hasContent_4ccwl","header":"bottom-sheet__header_4ccwl","sticky":"bottom-sheet__sticky_4ccwl","highlighted":"bottom-sheet__highlighted_4ccwl","justifyEnd":"bottom-sheet__justifyEnd_4ccwl","addon":"bottom-sheet__addon_4ccwl","addonFixed":"bottom-sheet__addonFixed_4ccwl","title":"bottom-sheet__title_4ccwl","titleCenter":"bottom-sheet__titleCenter_4ccwl","titleLeft":"bottom-sheet__titleLeft_4ccwl","trimTitle":"bottom-sheet__trimTitle_4ccwl"};
 require('./index.css');
 
-const Header = ({ className, sticky, headerRef, title, children, ...restProps }) => {
+const Header = ({ className, sticky, headerRef, headerOffset, title, children, ...restProps }) => {
     const { setHeaderOffset, setHasHeader, headerHighlighted, onClose } = useContext(BaseModalContext);
     useEffect(() => {
-        setHeaderOffset(HEADER_OFFSET);
-    }, [setHeaderOffset]);
+        setHeaderOffset(headerOffset);
+    }, [headerOffset, setHeaderOffset]);
     useEffect(() => {
         setHasHeader(true);
     }, [setHasHeader]);

package/bottom-sheet/modern/index.css

@@ -58,6 +58,9 @@
     pointer-events: none;
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
+    transition: border-radius 0.3s ease;
+} .bottom-sheet__fullscreen_1yfxn {
+    border-radius: 0;
 } .bottom-sheet__component_1yfxn {
     overflow: hidden;
     position: relative;

package/bottom-sheet/modern/types.d.ts

@@ -105,6 +105,14 @@ type BottomSheetProps = {
      * @default true
      */
     swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
     /**
      * Слот слева
      */
@@ -207,6 +215,10 @@ type BottomSheetProps = {
      * Скрыть скроллбар внутри шторки
      */
     hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
     /**
      * Обработчик закрытия
      */
@@ -219,5 +231,9 @@ type BottomSheetProps = {
      * Вызывается после притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/modern/utils.d.ts

@@ -1,8 +1,8 @@
 declare const TIMEOUT = 500;
 declare const SWIPE_VELOCITY = 0.4;
 declare const MARKER_HEIGHT = 24;
-declare const HEADER_OFFSET = 24;
 declare const CLOSE_OFFSET = 0.2;
 declare const SCROLL_OFFSET = 1;
-declare const convertPercentToNumber: (value: string | number, fullHeight: number) => number;
-export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, HEADER_OFFSET, CLOSE_OFFSET, SCROLL_OFFSET, convertPercentToNumber };
+declare const HEADER_OFFSET = 24;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };

package/bottom-sheet/modern/utils.js

@@ -1,12 +1,11 @@
 const TIMEOUT = 500;
 const SWIPE_VELOCITY = 0.4;
 const MARKER_HEIGHT = 24;
-/* Верхний отступ шторки, если она открыта на максимальную высоту */
-const HEADER_OFFSET = 24;
 const CLOSE_OFFSET = 0.2;
 const SCROLL_OFFSET = 1;
-const convertPercentToNumber = (value, fullHeight) => {
-    const maxHeight = fullHeight - HEADER_OFFSET;
+const HEADER_OFFSET = 24;
+const convertPercentToNumber = (value, fullHeight, headerOffset = HEADER_OFFSET) => {
+    const maxHeight = fullHeight - headerOffset;
     if (typeof value === 'string') {
         const percent = parseFloat(value) / 100;
         if (percent < 0) {

package/bottom-sheet/types.d.ts

@@ -105,6 +105,14 @@ type BottomSheetProps = {
      * @default true
      */
     swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
     /**
      * Слот слева
      */
@@ -207,6 +215,10 @@ type BottomSheetProps = {
      * Скрыть скроллбар внутри шторки
      */
     hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
     /**
      * Обработчик закрытия
      */
@@ -219,5 +231,9 @@ type BottomSheetProps = {
      * Вызывается после притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/utils.d.ts

@@ -1,8 +1,8 @@
 declare const TIMEOUT = 500;
 declare const SWIPE_VELOCITY = 0.4;
 declare const MARKER_HEIGHT = 24;
-declare const HEADER_OFFSET = 24;
 declare const CLOSE_OFFSET = 0.2;
 declare const SCROLL_OFFSET = 1;
-declare const convertPercentToNumber: (value: string | number, fullHeight: number) => number;
-export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, HEADER_OFFSET, CLOSE_OFFSET, SCROLL_OFFSET, convertPercentToNumber };
+declare const HEADER_OFFSET = 24;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };

package/bottom-sheet/utils.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var TIMEOUT = 500;
 var SWIPE_VELOCITY = 0.4;
 var MARKER_HEIGHT = 24;
-/* Верхний отступ шторки, если она открыта на максимальную высоту */
-var HEADER_OFFSET = 24;
 var CLOSE_OFFSET = 0.2;
 var SCROLL_OFFSET = 1;
-var convertPercentToNumber = function (value, fullHeight) {
-    var maxHeight = fullHeight - HEADER_OFFSET;
+var HEADER_OFFSET = 24;
+var convertPercentToNumber = function (value, fullHeight, headerOffset) {
+    if (headerOffset === void 0) { headerOffset = HEADER_OFFSET; }
+    var maxHeight = fullHeight - headerOffset;
     if (typeof value === 'string') {
         var percent = parseFloat(value) / 100;
         if (percent < 0) {

package/calendar/{Component.responsive-416c85ab.d.ts → Component.responsive-db33f065.d.ts}

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 /// <reference types="react-transition-group" />
+/// <reference types="react" />
 import React from "react";
 import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, ButtonHTMLAttributes, ElementType, ForwardRefExoticComponent, RefAttributes, HTMLAttributes, RefObject } from "react";
 import { CalendarDesktopProps } from "./Component.desktop";
@@ -19,10 +19,6 @@ type CalendarMobileProps = CalendarDesktopProps & {
      * Обработчик закрытия модалки
      */
     onClose?: () => void;
-    /**
-     * Обработчик клика на тайтл месяца в мобильном календаре
-     */
-    onMonthTitleClick?: (event: React.SyntheticEvent) => void;
     /**
      * Количество лет для генерации в обе стороны от текущего года
      */
@@ -40,7 +36,6 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopPro
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
-    onMonthTitleClick?: ((event: React.SyntheticEvent) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;
@@ -663,7 +658,6 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
-    onMonthTitleClick?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;

package/calendar/{Component.responsive-416c85ab.js → Component.responsive-db33f065.js}

@@ -51,7 +51,7 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = resizeObserver.ResizeObserver;
 }
 var CalendarMonthOnlyView = function (_a) {
-    var value = _a.value, defaultView = _a.defaultView, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, onMonthChange = _a.onMonthChange, _b = _a.yearsAmount, yearsAmount = _b === void 0 ? 3 : _b, dayAddons = _a.dayAddons, _c = _a.shape, shape = _c === void 0 ? 'rounded' : _c, scrollableContainer = _a.scrollableContainer;
+    var value = _a.value, defaultView = _a.defaultView, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, onMonthChange = _a.onMonthChange, _b = _a.yearsAmount, yearsAmount = _b === void 0 ? 3 : _b, dayAddons = _a.dayAddons, _c = _a.shape, shape = _c === void 0 ? 'rounded' : _c, scrollableContainer = _a.scrollableContainer;
     var initialMonthIndex = React.useMemo(function () {
         var currentMonthIndex = new Date().getMonth();
         var monthIndex = currentMonthIndex;
@@ -110,28 +110,16 @@ var CalendarMonthOnlyView = function (_a) {
                 dayAddonsMap: dayAddonsMap,
             }), title: "".concat(utils.monthName(item.date), " ").concat(item.date.getFullYear()) })); });
     }, [events, offDays, holidays, dayAddons, months, yearsAmount, minDate, maxDate, selected]);
-    var renderMonth = function (index) {
-        var handleMonthTitleKeyDown = function (event) {
-            if (event.key === 'Enter' && onMonthTitleClick) {
-                onMonthTitleClick(event);
-            }
-        };
-        var handleMonthTitleClick = function (event) {
-            if (onMonthTitleClick) {
-                onMonthTitleClick(event);
-            }
-        };
-        return (React__default.default.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
-            React__default.default.createElement("span", { className: styles.month, onClick: handleMonthTitleClick, onKeyDown: handleMonthTitleKeyDown, tabIndex: -1, role: 'button' }, activeMonths[index].title),
-            React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape })));
-    };
+    var renderMonth = function (index) { return (React__default.default.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
+        React__default.default.createElement("span", { className: styles.month }, activeMonths[index].title),
+        React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape }))); };
     if (!scrollableContainer)
         return null;
     return (React__default.default.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex, align: 'center' }, increaseViewportBy: 1000, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true }));
 };
 var CalendarMobile = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, restProps = tslib.__rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
+    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, restProps = tslib.__rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
     var _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
@@ -155,7 +143,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef }, commonProps, restProps)));
         }
         return (React__default.default.createElement(Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: styles.calendar }, commonProps, restProps)));
     };

package/calendar/Component.responsive.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('@alfalab/hooks');
-var components_calendarMobile_Component = require('./Component.responsive-416c85ab.js');
+var components_calendarMobile_Component = require('./Component.responsive-db33f065.js');
 require('./Component.desktop.js');
 require('react-virtuoso');
 require('@juggle/resize-observer');

package/calendar/components/calendar-mobile/Component.js

@@ -12,7 +12,7 @@ require('date-fns/startOfMonth');
 require('../../../button');
 require('../../../modal/mobile');
 require('../../Component.desktop.js');
-var components_calendarMobile_Component = require('../../Component.responsive-416c85ab.js');
+var components_calendarMobile_Component = require('../../Component.responsive-db33f065.js');
 require('date-fns/differenceInDays');
 require('@alfalab/hooks');
 require('../../useCalendar.js');

package/calendar/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-416c85ab";
+export * from "../../Component.responsive-db33f065";
 export {};

package/calendar/components/calendar-mobile/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('../../Component.responsive-416c85ab.js');
+var components_calendarMobile_Component = require('../../Component.responsive-db33f065.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

package/calendar/{esm/Component.responsive-3259f053.d.ts → cssm/Component.responsive-fa4cf9a1.d.ts}

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 /// <reference types="react-transition-group" />
+/// <reference types="react" />
 import React from "react";
 import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, ButtonHTMLAttributes, ElementType, ForwardRefExoticComponent, RefAttributes, HTMLAttributes, RefObject } from "react";
 import { CalendarDesktopProps } from "./Component.desktop";
@@ -19,10 +19,6 @@ type CalendarMobileProps = CalendarDesktopProps & {
      * Обработчик закрытия модалки
      */
     onClose?: () => void;
-    /**
-     * Обработчик клика на тайтл месяца в мобильном календаре
-     */
-    onMonthTitleClick?: (event: React.SyntheticEvent) => void;
     /**
      * Количество лет для генерации в обе стороны от текущего года
      */
@@ -40,7 +36,6 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopPro
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
-    onMonthTitleClick?: ((event: React.SyntheticEvent) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;
@@ -663,7 +658,6 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
-    onMonthTitleClick?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;