@alfalab/core-components 41.17.0-beta.12 → 41.17.0-beta.13

package/bottom-sheet/component.js

@@ -30,7 +30,7 @@ require('./index.css');
 
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f;
-    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onOffsetChange = _a.onOffsetChange;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange;
     var hasInitialIdx = initialActiveAreaIndex !== undefined;
     var fullHeight = reactDiv100vh.use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
@@ -83,6 +83,12 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
             sheetHeight.current = sheetRef.current.getBoundingClientRect().height - sheetOffset;
         }
     };
+    var handleTransitionEnd = function (event) {
+        setSheetHeight();
+        if (event.propertyName === 'transform' && event.target === event.currentTarget) {
+            onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
+        }
+    };
     var scrollToArea = function (idx) {
         setSwipingInProgress(false);
         var nextArea = magneticAreas[idx];
@@ -235,6 +241,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         setBackdropOpacity(1);
         setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0]);
         setActiveArea(nextArea);
+        onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
         if (transitionProps.onExited) {
             transitionProps.onExited(node);
         }
@@ -256,6 +263,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         setSheetHeight();
         // Ready for swiping
         setSwipingInProgress(false);
+        onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
         if (transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
@@ -295,7 +303,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
                 _c)), onTransitionEnd: setSheetHeight },
             React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles.component, bgClassName, className, (_d = {},
                     _d[styles.withTransition] = swipingInProgress === false,
-                    _d)), style: tslib.__assign(tslib.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeableHandlers, { ref: mergeRefs__default.default([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: setSheetHeight }),
+                    _d)), style: tslib.__assign(tslib.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeableHandlers, { ref: mergeRefs__default.default([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: handleTransitionEnd }),
                 React__default.default.createElement("div", tslib.__assign({}, containerProps, { className: cn__default.default(styles.scrollableContainer, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, containerClassName, (_e = {},
                         _e[styles.scrollLocked] = scrollLockedProp || swipingInProgress,
                         _e[styles.hiddenScrollbar] = hideScrollbar,

package/bottom-sheet/cssm/component.js

@@ -31,7 +31,7 @@ var getDataTestId = function (dataTestId, element) {
 
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f;
-    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onOffsetChange = _a.onOffsetChange;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange;
     var hasInitialIdx = initialActiveAreaIndex !== undefined;
     var fullHeight = reactDiv100vh.use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
@@ -84,6 +84,12 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
             sheetHeight.current = sheetRef.current.getBoundingClientRect().height - sheetOffset;
         }
     };
+    var handleTransitionEnd = function (event) {
+        setSheetHeight();
+        if (event.propertyName === 'transform' && event.target === event.currentTarget) {
+            onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
+        }
+    };
     var scrollToArea = function (idx) {
         setSwipingInProgress(false);
         var nextArea = magneticAreas[idx];
@@ -236,6 +242,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         setBackdropOpacity(1);
         setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0]);
         setActiveArea(nextArea);
+        onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
         if (transitionProps.onExited) {
             transitionProps.onExited(node);
         }
@@ -257,6 +264,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         setSheetHeight();
         // Ready for swiping
         setSwipingInProgress(false);
+        onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
         if (transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
@@ -296,7 +304,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
                 _c)), onTransitionEnd: setSheetHeight },
             React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.component, bgClassName, className, (_d = {},
                     _d[styles__default.default.withTransition] = swipingInProgress === false,
-                    _d)), style: tslib.__assign(tslib.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeableHandlers, { ref: mergeRefs__default.default([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: setSheetHeight }),
+                    _d)), style: tslib.__assign(tslib.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeableHandlers, { ref: mergeRefs__default.default([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: handleTransitionEnd }),
                 React__default.default.createElement("div", tslib.__assign({}, containerProps, { className: cn__default.default(styles__default.default.scrollableContainer, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, containerClassName, (_e = {},
                         _e[styles__default.default.scrollLocked] = scrollLockedProp || swipingInProgress,
                         _e[styles__default.default.hiddenScrollbar] = hideScrollbar,

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

@@ -228,9 +228,13 @@ type BottomSheetProps = {
      */
     onBack?: () => void;
     /**
-     * Вызывается после притягивания к одной из `magneticAreas`
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
     /**
      * Вызывается при изменении положения шторки
      */

package/bottom-sheet/esm/component.js

@@ -22,7 +22,7 @@ require('./index.css');
 
 var BottomSheet = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f;
-    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onOffsetChange = _a.onOffsetChange;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange;
     var hasInitialIdx = initialActiveAreaIndex !== undefined;
     var fullHeight = use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
@@ -75,6 +75,12 @@ var BottomSheet = forwardRef(function (_a, ref) {
             sheetHeight.current = sheetRef.current.getBoundingClientRect().height - sheetOffset;
         }
     };
+    var handleTransitionEnd = function (event) {
+        setSheetHeight();
+        if (event.propertyName === 'transform' && event.target === event.currentTarget) {
+            onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
+        }
+    };
     var scrollToArea = function (idx) {
         setSwipingInProgress(false);
         var nextArea = magneticAreas[idx];
@@ -227,6 +233,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
         setBackdropOpacity(1);
         setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0]);
         setActiveArea(nextArea);
+        onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
         if (transitionProps.onExited) {
             transitionProps.onExited(node);
         }
@@ -248,6 +255,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
         setSheetHeight();
         // Ready for swiping
         setSwipingInProgress(false);
+        onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
         if (transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
@@ -287,7 +295,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
                 _c)), onTransitionEnd: setSheetHeight },
             React.createElement("div", __assign({ className: cn(styles.component, bgClassName, className, (_d = {},
                     _d[styles.withTransition] = swipingInProgress === false,
-                    _d)), style: __assign(__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeableHandlers, { ref: mergeRefs([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: setSheetHeight }),
+                    _d)), style: __assign(__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeableHandlers, { ref: mergeRefs([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: handleTransitionEnd }),
                 React.createElement("div", __assign({}, containerProps, { className: cn(styles.scrollableContainer, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, containerClassName, (_e = {},
                         _e[styles.scrollLocked] = scrollLockedProp || swipingInProgress,
                         _e[styles.hiddenScrollbar] = hideScrollbar,

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

@@ -228,9 +228,13 @@ type BottomSheetProps = {
      */
     onBack?: () => void;
     /**
-     * Вызывается после притягивания к одной из `magneticAreas`
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
     /**
      * Вызывается при изменении положения шторки
      */

package/bottom-sheet/modern/component.js

@@ -19,7 +19,7 @@ const getDataTestId = (dataTestId, element) => {
 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, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, onClose, onBack, onMagnetize, onOffsetChange, }, 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, onMagnetizeEnd, onOffsetChange, }, ref) => {
     const hasInitialIdx = initialActiveAreaIndex !== undefined;
     const fullHeight = use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
@@ -92,6 +92,12 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
             sheetHeight.current = sheetRef.current.getBoundingClientRect().height - sheetOffset;
         }
     };
+    const handleTransitionEnd = (event) => {
+        setSheetHeight();
+        if (event.propertyName === 'transform' && event.target === event.currentTarget) {
+            onMagnetizeEnd?.();
+        }
+    };
     const scrollToArea = (idx) => {
         setSwipingInProgress(false);
         const nextArea = magneticAreas[idx];
@@ -240,6 +246,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         setBackdropOpacity(1);
         setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0]);
         setActiveArea(nextArea);
+        onMagnetizeEnd?.();
         if (transitionProps.onExited) {
             transitionProps.onExited(node);
         }
@@ -261,6 +268,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         setSheetHeight();
         // Ready for swiping
         setSwipingInProgress(false);
+        onMagnetizeEnd?.();
         if (transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
@@ -316,7 +324,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
                 }), style: {
                     ...getSwipeStyles(),
                     ...getHeightStyles(),
-                }, ...sheetSwipeableHandlers, ref: mergeRefs([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: setSheetHeight },
+                }, ...sheetSwipeableHandlers, ref: mergeRefs([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: handleTransitionEnd },
                 React.createElement("div", { ...containerProps, className: cn(styles.scrollableContainer, containerProps?.className, containerClassName, {
                         [styles.scrollLocked]: scrollLockedProp || swipingInProgress,
                         [styles.hiddenScrollbar]: hideScrollbar,

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

@@ -228,9 +228,13 @@ type BottomSheetProps = {
      */
     onBack?: () => void;
     /**
-     * Вызывается после притягивания к одной из `magneticAreas`
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
     /**
      * Вызывается при изменении положения шторки
      */

package/bottom-sheet/types.d.ts

@@ -228,9 +228,13 @@ type BottomSheetProps = {
      */
     onBack?: () => void;
     /**
-     * Вызывается после притягивания к одной из `magneticAreas`
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
     /**
      * Вызывается при изменении положения шторки
      */

package/calendar/{Component.responsive-2435f9ed.d.ts → Component.responsive-109fc9aa.d.ts}

@@ -19,6 +19,10 @@ type CalendarMobileProps = CalendarDesktopProps & {
      * Обработчик закрытия модалки
      */
     onClose?: () => void;
+    /**
+     * Обработчик клика на название месяца в мобильном календаре
+     */
+    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
     /**
      * Количество лет для генерации в обе стороны от текущего года
      */
@@ -36,6 +40,7 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopPro
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement>) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;
@@ -658,6 +663,7 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;

package/calendar/{Component.responsive-2435f9ed.js → Component.responsive-109fc9aa.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, 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, 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 initialMonthIndex = React.useMemo(function () {
         var currentMonthIndex = new Date().getMonth();
         var monthIndex = currentMonthIndex;
@@ -111,7 +111,12 @@ var CalendarMonthOnlyView = function (_a) {
             }), title: "".concat(utils.monthName(item.date), " ").concat(item.date.getFullYear()) })); });
     }, [events, offDays, holidays, dayAddons, months, yearsAmount, minDate, maxDate, selected]);
     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),
+        onMonthTitleClick ? (
+        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+        React__default.default.createElement("span", { className: styles.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (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;
@@ -119,7 +124,7 @@ var CalendarMonthOnlyView = function (_a) {
 };
 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, 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 _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 _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
@@ -143,7 +148,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 }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, 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-2435f9ed.js');
+var components_calendarMobile_Component = require('./Component.responsive-109fc9aa.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-2435f9ed.js');
+var components_calendarMobile_Component = require('../../Component.responsive-109fc9aa.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-2435f9ed";
+export * from "../../Component.responsive-109fc9aa";
 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-2435f9ed.js');
+var components_calendarMobile_Component = require('../../Component.responsive-109fc9aa.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

package/calendar/{esm/Component.responsive-13136ea1.d.ts → cssm/Component.responsive-8e647f59.d.ts}

@@ -19,6 +19,10 @@ type CalendarMobileProps = CalendarDesktopProps & {
      * Обработчик закрытия модалки
      */
     onClose?: () => void;
+    /**
+     * Обработчик клика на название месяца в мобильном календаре
+     */
+    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
     /**
      * Количество лет для генерации в обе стороны от текущего года
      */
@@ -36,6 +40,7 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopPro
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement>) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;
@@ -658,6 +663,7 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;

package/calendar/cssm/{Component.responsive-fa4cf9a1.js → Component.responsive-8e647f59.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, 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, 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 initialMonthIndex = React.useMemo(function () {
         var currentMonthIndex = new Date().getMonth();
         var monthIndex = currentMonthIndex;
@@ -111,7 +111,12 @@ var CalendarMonthOnlyView = function (_a) {
             }), title: "".concat(utils.monthName(item.date), " ").concat(item.date.getFullYear()) })); });
     }, [events, offDays, holidays, dayAddons, months, yearsAmount, minDate, maxDate, selected]);
     var renderMonth = function (index) { return (React__default.default.createElement("div", { className: styles__default.default.daysTable, id: "month-".concat(index) },
-        React__default.default.createElement("span", { className: styles__default.default.month }, activeMonths[index].title),
+        onMonthTitleClick ? (
+        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+        React__default.default.createElement("span", { className: styles__default.default.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (React__default.default.createElement("span", { className: styles__default.default.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;
@@ -119,7 +124,7 @@ var CalendarMonthOnlyView = function (_a) {
 };
 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, 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 _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 _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
@@ -143,7 +148,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 }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
         return (React__default.default.createElement(Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: styles__default.default.calendar }, commonProps, restProps)));
     };

package/calendar/cssm/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-fa4cf9a1.js');
+var components_calendarMobile_Component = require('./Component.responsive-8e647f59.js');
 require('./Component.desktop.js');
 require('react-virtuoso');
 require('@juggle/resize-observer');

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

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

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

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-fa4cf9a1";
+export * from "../../Component.responsive-8e647f59";
 export {};

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

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

package/calendar/cssm/index.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_desktop = require('./Component.desktop.js');
-var components_calendarMobile_Component = require('./Component.responsive-fa4cf9a1.js');
+var components_calendarMobile_Component = require('./Component.responsive-8e647f59.js');
 var usePeriod = require('./usePeriod.js');
 var useCalendar = require('./useCalendar.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');

package/calendar/cssm/mobile.js

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

package/calendar/cssm/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-fa4cf9a1";
+export * from "./Component.responsive-8e647f59";
 export {};

package/calendar/cssm/responsive.js

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

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

@@ -19,6 +19,10 @@ type CalendarMobileProps = CalendarDesktopProps & {
      * Обработчик закрытия модалки
      */
     onClose?: () => void;
+    /**
+     * Обработчик клика на название месяца в мобильном календаре
+     */
+    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
     /**
      * Количество лет для генерации в обе стороны от текущего года
      */
@@ -36,6 +40,7 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopPro
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement>) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;
@@ -658,6 +663,7 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     open: boolean;
     title?: string | undefined;
     onClose?: (() => void) | undefined;
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;

package/calendar/esm/{Component.responsive-13136ea1.js → Component.responsive-e7e677b1.js}

@@ -74,7 +74,7 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.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, 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, 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 initialMonthIndex = useMemo(function () {
         var currentMonthIndex = new Date().getMonth();
         var monthIndex = currentMonthIndex;
@@ -134,7 +134,12 @@ var CalendarMonthOnlyView = function (_a) {
             }), title: "".concat(monthName(item.date), " ").concat(item.date.getFullYear()) })); });
     }, [events, offDays, holidays, dayAddons, months, yearsAmount, minDate, maxDate, selected]);
     var renderMonth = function (index) { return (React.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
-        React.createElement("span", { className: styles.month }, activeMonths[index].title),
+        onMonthTitleClick ? (
+        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+        React.createElement("span", { className: styles.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (React.createElement("span", { className: styles.month },
+            " ",
+            activeMonths[index].title,
+            " ")),
         React.createElement(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;
@@ -142,7 +147,7 @@ var CalendarMonthOnlyView = function (_a) {
 };
 var CalendarMobile = 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, 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 = __rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "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, 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 = __rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
     var _k = useState(), modalRef = _k[0], setModalRef = _k[1];
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
@@ -166,7 +171,7 @@ var CalendarMobile = forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React.createElement(CalendarMonthOnlyView, __assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef }, commonProps, restProps)));
+            return (React.createElement(CalendarMonthOnlyView, __assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
         return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: styles.calendar }, commonProps, restProps)));
     };