@alfalab/core-components 41.4.0-beta.1 → 41.5.0

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

@@ -36,6 +36,10 @@ type BottomSheetProps = {
      * Контейнер к которому будут добавляться порталы
      */
     container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
     /**
      * Дополнительный класс
      */

package/bottom-sheet/esm/component.js

@@ -17,16 +17,16 @@ var getDataTestId = function (dataTestId, element) {
     return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
 };
 
-var isClient = function () { return typeof window !== 'undefined'; };
-
 var styles = {"modal":"bottom-sheet__modal_1gfwj","wrapper":"bottom-sheet__wrapper_1gfwj","component":"bottom-sheet__component_1gfwj","withTransition":"bottom-sheet__withTransition_1gfwj","scrollableContainer":"bottom-sheet__scrollableContainer_1gfwj","marker":"bottom-sheet__marker_1gfwj","content":"bottom-sheet__content_1gfwj","noHeader":"bottom-sheet__noHeader_1gfwj","noFooter":"bottom-sheet__noFooter_1gfwj","scrollLocked":"bottom-sheet__scrollLocked_1gfwj","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1gfwj","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1gfwj","appear":"bottom-sheet__appear_1gfwj","enter":"bottom-sheet__enter_1gfwj","appearActive":"bottom-sheet__appearActive_1gfwj","enterActive":"bottom-sheet__enterActive_1gfwj","enterDone":"bottom-sheet__enterDone_1gfwj","appearDone":"bottom-sheet__appearDone_1gfwj","exit":"bottom-sheet__exit_1gfwj","exitActive":"bottom-sheet__exitActive_1gfwj","background-accent":"bottom-sheet__background-accent_1gfwj","background-info":"bottom-sheet__background-info_1gfwj","background-attention-muted":"bottom-sheet__background-attention-muted_1gfwj","background-positive-muted":"bottom-sheet__background-positive-muted_1gfwj","background-negative-muted":"bottom-sheet__background-negative-muted_1gfwj","background-primary":"bottom-sheet__background-primary_1gfwj","background-primary-inverted":"bottom-sheet__background-primary-inverted_1gfwj","background-secondary":"bottom-sheet__background-secondary_1gfwj","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1gfwj","background-tertiary":"bottom-sheet__background-tertiary_1gfwj","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1gfwj","background-quaternary":"bottom-sheet__background-quaternary_1gfwj","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1gfwj","background-specialbg-component":"bottom-sheet__background-specialbg-component_1gfwj","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1gfwj","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1gfwj","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1gfwj","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1gfwj","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1gfwj","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1gfwj","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1gfwj","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1gfwj"};
 require('./index.css');
 
 var BottomSheet = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
-    var open = _a.open, title = _a.title, container = _a.container, backgroundColor = _a.backgroundColor, _f = _a.titleSize, titleSize = _f === void 0 ? 'default' : _f, 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, _g = _a.titleAlign, titleAlign = _g === void 0 ? 'left' : _g, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _h = _a.stickyFooter, stickyFooter = _h === void 0 ? true : _h, _j = _a.initialHeight, initialHeight = _j === void 0 ? 'default' : _j, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, children = _a.children, zIndex = _a.zIndex, _k = _a.transitionProps, transitionProps = _k === void 0 ? {} : _k, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _l = _a.swipeable, swipeable = _l === void 0 ? true : _l, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _m = _a.scrollableContainerRef, scrollableContainerRef = _m === void 0 ? function () { return null; } : _m, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _o = _a.sheetContainerRef, sheetContainerRef = _o === void 0 ? function () { return null; } : _o, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _f = _a.titleSize, titleSize = _f === void 0 ? 'default' : _f, 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, _g = _a.titleAlign, titleAlign = _g === void 0 ? 'left' : _g, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _h = _a.stickyFooter, stickyFooter = _h === void 0 ? true : _h, _j = _a.initialHeight, initialHeight = _j === void 0 ? 'default' : _j, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, children = _a.children, zIndex = _a.zIndex, _k = _a.transitionProps, transitionProps = _k === void 0 ? {} : _k, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _l = _a.swipeable, swipeable = _l === void 0 ? true : _l, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _m = _a.scrollableContainerRef, scrollableContainerRef = _m === void 0 ? function () { return null; } : _m, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _o = _a.sheetContainerRef, sheetContainerRef = _o === void 0 ? function () { return null; } : _o, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize;
     var hasInitialIdx = initialActiveAreaIndex !== undefined;
-    var fullHeight = use100vh() || isClient() ? window.innerHeight : 0;
+    var fullHeight = use100vh() || 0;
+    // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
+    var isFirstRender = fullHeight === 0;
     var magneticAreas = useMemo(function () {
         if (magneticAreasProp) {
             return magneticAreasProp.map(function (area) { return convertPercentToNumber(area, fullHeight); });
@@ -34,12 +34,10 @@ var BottomSheet = forwardRef(function (_a, ref) {
         return [0, fullHeight - HEADER_OFFSET];
     }, [fullHeight, magneticAreasProp]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    var _p = useState(hasInitialIdx
-        ? lastMagneticArea - magneticAreas[initialActiveAreaIndex]
-        : magneticAreas[0]), sheetOffset = _p[0], setSheetOffset = _p[1];
+    var _p = useState(0), sheetOffset = _p[0], setSheetOffset = _p[1];
     var _q = useState(1), backdropOpacity = _q[0], setBackdropOpacity = _q[1];
-    var _r = useState(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea), activeArea = _r[0], setActiveArea = _r[1];
-    var swipingInProgress = useRef(false);
+    var _r = useState(0), activeArea = _r[0], setActiveArea = _r[1];
+    var swipingInProgress = useRef(null);
     var headerRef = useRef(null);
     var sheetHeight = useRef(0);
     var sheetRef = useRef(null);
@@ -74,6 +72,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
         }
     };
     var scrollToArea = function (idx) {
+        swipingInProgress.current = false;
         var nextArea = magneticAreas[idx];
         if (nextArea === 0) {
             onClose();
@@ -213,10 +212,20 @@ var BottomSheet = forwardRef(function (_a, ref) {
     var handleEntered = function (node, isAppearing) {
         setBackdropOpacity(1);
         setSheetHeight();
+        // Ready for swiping
+        swipingInProgress.current = false;
         if (transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
     };
+    useEffect(function () {
+        // Инициализируем стейт только после того, как была рассчитана высота вьюпорта.
+        if (!isFirstRender) {
+            setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[initialActiveAreaIndex] : 0);
+            setActiveArea(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFirstRender]);
     useEffect(function () {
         onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(open ? getActiveAreaIndex(activeArea) : 0);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -224,20 +233,20 @@ var BottomSheet = forwardRef(function (_a, ref) {
     useImperativeHandle(bottomSheetInstanceRef, function () { return ({
         scrollToArea: scrollToArea,
     }); });
-    var getSwipeStyles = function () { return ({
-        transform: sheetOffset ? "translateY(".concat(sheetOffset, "px)") : '',
-    }); };
+    var getSwipeStyles = function () {
+        return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
+    };
     var getHeightStyles = function () { return ({
-        height: initialHeight === 'full' ? "".concat(lastMagneticArea, "px") : 'unset',
-        maxHeight: "".concat(lastMagneticArea, "px"),
+        height: !isFirstRender && initialHeight === 'full' ? "".concat(lastMagneticArea, "px") : 'unset',
+        maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
     }); };
     var bgClassName = backgroundColor && styles["background-".concat(backgroundColor)];
-    return (React.createElement(BaseModal, { open: open, ref: ref, container: container, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: __assign(__assign({}, backdropProps), { className: styles.disabledPointerEvents, opacity: backdropOpacity, opacityTimeout: TIMEOUT, invisible: hideOverlay }), disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: cn(styles.modal, modalClassName), wrapperClassName: cn(modalWrapperClassName, (_b = {},
+    return (React.createElement(BaseModal, { open: open, ref: ref, container: container, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, usePortal: usePortal, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: __assign(__assign({}, backdropProps), { className: styles.disabledPointerEvents, opacity: backdropOpacity, opacityTimeout: TIMEOUT, invisible: hideOverlay }), disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: cn(styles.modal, modalClassName), wrapperClassName: cn(modalWrapperClassName, (_b = {},
             _b[styles.disabledPointerEvents] = hideOverlay,
             _b)), disableBlockingScroll: disableBlockingScroll, transitionProps: __assign(__assign({ appear: true, timeout: TIMEOUT, classNames: styles }, transitionProps), { onExited: handleExited, onEntered: handleEntered }) },
         React.createElement("div", { style: __assign({}, getHeightStyles()), className: styles.wrapper, onTransitionEnd: setSheetHeight },
             React.createElement("div", __assign({ className: cn(styles.component, bgClassName, className, (_c = {},
-                    _c[styles.withTransition] = !swipingInProgress.current,
+                    _c[styles.withTransition] = swipingInProgress.current === false,
                     _c)), style: __assign(__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeableHandlers, { ref: mergeRefs([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref]), onTransitionEnd: setSheetHeight }),
                 React.createElement("div", __assign({}, containerProps, { className: cn(styles.scrollableContainer, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, containerClassName, (_d = {},
                         _d[styles.scrollLocked] = scrollLockedProp || swipingInProgress.current,

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

@@ -36,6 +36,10 @@ type BottomSheetProps = {
      * Контейнер к которому будут добавляться порталы
      */
     container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
     /**
      * Дополнительный класс
      */

package/bottom-sheet/modern/component.js

@@ -16,14 +16,14 @@ const getDataTestId = (dataTestId, element) => {
     return dataTestId ? `${dataTestId}${elementPart}` : undefined;
 };
 
-const isClient = () => typeof window !== 'undefined';
-
 const styles = {"modal":"bottom-sheet__modal_1gfwj","wrapper":"bottom-sheet__wrapper_1gfwj","component":"bottom-sheet__component_1gfwj","withTransition":"bottom-sheet__withTransition_1gfwj","scrollableContainer":"bottom-sheet__scrollableContainer_1gfwj","marker":"bottom-sheet__marker_1gfwj","content":"bottom-sheet__content_1gfwj","noHeader":"bottom-sheet__noHeader_1gfwj","noFooter":"bottom-sheet__noFooter_1gfwj","scrollLocked":"bottom-sheet__scrollLocked_1gfwj","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1gfwj","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1gfwj","appear":"bottom-sheet__appear_1gfwj","enter":"bottom-sheet__enter_1gfwj","appearActive":"bottom-sheet__appearActive_1gfwj","enterActive":"bottom-sheet__enterActive_1gfwj","enterDone":"bottom-sheet__enterDone_1gfwj","appearDone":"bottom-sheet__appearDone_1gfwj","exit":"bottom-sheet__exit_1gfwj","exitActive":"bottom-sheet__exitActive_1gfwj","background-accent":"bottom-sheet__background-accent_1gfwj","background-info":"bottom-sheet__background-info_1gfwj","background-attention-muted":"bottom-sheet__background-attention-muted_1gfwj","background-positive-muted":"bottom-sheet__background-positive-muted_1gfwj","background-negative-muted":"bottom-sheet__background-negative-muted_1gfwj","background-primary":"bottom-sheet__background-primary_1gfwj","background-primary-inverted":"bottom-sheet__background-primary-inverted_1gfwj","background-secondary":"bottom-sheet__background-secondary_1gfwj","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1gfwj","background-tertiary":"bottom-sheet__background-tertiary_1gfwj","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1gfwj","background-quaternary":"bottom-sheet__background-quaternary_1gfwj","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1gfwj","background-specialbg-component":"bottom-sheet__background-specialbg-component_1gfwj","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1gfwj","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1gfwj","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1gfwj","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1gfwj","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1gfwj","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1gfwj","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1gfwj","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1gfwj"};
 require('./index.css');
 
-const BottomSheet = forwardRef(({ open, title, container, 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, 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, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, onClose, onBack, onMagnetize, }, ref) => {
     const hasInitialIdx = initialActiveAreaIndex !== undefined;
-    const fullHeight = use100vh() || isClient() ? window.innerHeight : 0;
+    const fullHeight = use100vh() || 0;
+    // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
+    const isFirstRender = fullHeight === 0;
     const magneticAreas = useMemo(() => {
         if (magneticAreasProp) {
             return magneticAreasProp.map((area) => convertPercentToNumber(area, fullHeight));
@@ -31,12 +31,10 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
         return [0, fullHeight - HEADER_OFFSET];
     }, [fullHeight, magneticAreasProp]);
     const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    const [sheetOffset, setSheetOffset] = useState(hasInitialIdx
-        ? lastMagneticArea - magneticAreas[initialActiveAreaIndex]
-        : magneticAreas[0]);
+    const [sheetOffset, setSheetOffset] = useState(0);
     const [backdropOpacity, setBackdropOpacity] = useState(1);
-    const [activeArea, setActiveArea] = useState(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea);
-    const swipingInProgress = useRef(false);
+    const [activeArea, setActiveArea] = useState(0);
+    const swipingInProgress = useRef(null);
     const headerRef = useRef(null);
     const sheetHeight = useRef(0);
     const sheetRef = useRef(null);
@@ -92,6 +90,7 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
         }
     };
     const scrollToArea = (idx) => {
+        swipingInProgress.current = false;
         const nextArea = magneticAreas[idx];
         if (nextArea === 0) {
             onClose();
@@ -228,10 +227,20 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
     const handleEntered = (node, isAppearing) => {
         setBackdropOpacity(1);
         setSheetHeight();
+        // Ready for swiping
+        swipingInProgress.current = false;
         if (transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
     };
+    useEffect(() => {
+        // Инициализируем стейт только после того, как была рассчитана высота вьюпорта.
+        if (!isFirstRender) {
+            setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[initialActiveAreaIndex] : 0);
+            setActiveArea(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFirstRender]);
     useEffect(() => {
         onMagnetize?.(open ? getActiveAreaIndex(activeArea) : 0);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -239,15 +248,13 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
     useImperativeHandle(bottomSheetInstanceRef, () => ({
         scrollToArea,
     }));
-    const getSwipeStyles = () => ({
-        transform: sheetOffset ? `translateY(${sheetOffset}px)` : '',
-    });
+    const getSwipeStyles = () => sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};
     const getHeightStyles = () => ({
-        height: initialHeight === 'full' ? `${lastMagneticArea}px` : 'unset',
-        maxHeight: `${lastMagneticArea}px`,
+        height: !isFirstRender && initialHeight === 'full' ? `${lastMagneticArea}px` : 'unset',
+        maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
     });
     const bgClassName = backgroundColor && styles[`background-${backgroundColor}`];
-    return (React.createElement(BaseModal, { open: open, ref: ref, container: container, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: {
+    return (React.createElement(BaseModal, { open: open, ref: ref, container: container, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, usePortal: usePortal, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: {
             ...backdropProps,
             className: styles.disabledPointerEvents,
             opacity: backdropOpacity,
@@ -265,7 +272,7 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
         } },
         React.createElement("div", { style: { ...getHeightStyles() }, className: styles.wrapper, onTransitionEnd: setSheetHeight },
             React.createElement("div", { className: cn(styles.component, bgClassName, className, {
-                    [styles.withTransition]: !swipingInProgress.current,
+                    [styles.withTransition]: swipingInProgress.current === false,
                 }), style: {
                     ...getSwipeStyles(),
                     ...getHeightStyles(),

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

@@ -36,6 +36,10 @@ type BottomSheetProps = {
      * Контейнер к которому будут добавляться порталы
      */
     container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
     /**
      * Дополнительный класс
      */

package/bottom-sheet/types.d.ts

@@ -36,6 +36,10 @@ type BottomSheetProps = {
      * Контейнер к которому будут добавляться порталы
      */
     container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
     /**
      * Дополнительный класс
      */

package/calendar/{Component.responsive-c7d32ac8.d.ts → Component.responsive-01fc776b.d.ts}

@@ -162,6 +162,11 @@ type BaseModalProps = {
      * Пропсы для анимации (CSSTransition)
      */
     transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
     /**
      * Обработчик события нажатия на бэкдроп
      */

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-c7d32ac8.js');
+var components_calendarMobile_Component = require('./Component.responsive-01fc776b.js');
 require('./Component.desktop.js');
 require('react-virtuoso');
 require('@juggle/resize-observer');

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

@@ -11,7 +11,7 @@ require('date-fns/startOfMonth');
 require('../../../button');
 require('../../../modal/mobile');
 require('../../Component.desktop.js');
-var components_calendarMobile_Component = require('../../Component.responsive-c7d32ac8.js');
+var components_calendarMobile_Component = require('../../Component.responsive-01fc776b.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-c7d32ac8";
+export * from "../../Component.responsive-01fc776b";
 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-c7d32ac8.js');
+var components_calendarMobile_Component = require('../../Component.responsive-01fc776b.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

package/calendar/cssm/Component.responsive-37401ddd.d.ts

@@ -162,6 +162,11 @@ type BaseModalProps = {
      * Пропсы для анимации (CSSTransition)
      */
     transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
     /**
      * Обработчик события нажатия на бэкдроп
      */

package/calendar/{modern/Component.responsive-bab04a75.d.ts → esm/Component.responsive-9c88d40b.d.ts}

@@ -162,6 +162,11 @@ type BaseModalProps = {
      * Пропсы для анимации (CSSTransition)
      */
     transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
     /**
      * Обработчик события нажатия на бэкдроп
      */

package/calendar/esm/Component.responsive.js

@@ -1,7 +1,7 @@
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-19c0b9a7.js';
+export { C as CalendarResponsive } from './Component.responsive-9c88d40b.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';

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

@@ -9,7 +9,7 @@ import 'date-fns/startOfMonth';
 import '../../../../button/esm';
 import '../../../../modal/esm/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-19c0b9a7.js';
+export { a as CalendarMobile } from '../../Component.responsive-9c88d40b.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

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

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-19c0b9a7";
+export * from "../../Component.responsive-9c88d40b";
 export {};

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

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-19c0b9a7.js';
+export { a as CalendarMobile } from '../../Component.responsive-9c88d40b.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/esm/index.js

@@ -1,5 +1,5 @@
 export { CalendarDesktop as Calendar } from './Component.desktop.js';
-export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-19c0b9a7.js';
+export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-9c88d40b.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
 export { useCalendar } from './useCalendar.js';
 export { PeriodSlider } from './components/period-slider/Component.js';

package/calendar/esm/mobile.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from './Component.responsive-19c0b9a7.js';
+export { a as CalendarMobile } from './Component.responsive-9c88d40b.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/esm/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-19c0b9a7";
+export * from "./Component.responsive-9c88d40b";
 export {};

package/calendar/esm/responsive.js

@@ -1,4 +1,4 @@
-export { C as CalendarResponsive } from './Component.responsive-19c0b9a7.js';
+export { C as CalendarResponsive } from './Component.responsive-9c88d40b.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/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-c7d32ac8.js');
+var components_calendarMobile_Component = require('./Component.responsive-01fc776b.js');
 var usePeriod = require('./usePeriod.js');
 var useCalendar = require('./useCalendar.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');

package/calendar/mobile.js

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

package/calendar/{esm/Component.responsive-19c0b9a7.d.ts → modern/Component.responsive-6909ce92.d.ts}

@@ -162,6 +162,11 @@ type BaseModalProps = {
      * Пропсы для анимации (CSSTransition)
      */
     transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
     /**
      * Обработчик события нажатия на бэкдроп
      */

package/calendar/modern/Component.responsive.js

@@ -1,6 +1,6 @@
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-bab04a75.js';
+export { C as CalendarResponsive } from './Component.responsive-6909ce92.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';

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

@@ -8,7 +8,7 @@ import 'date-fns/startOfMonth';
 import '../../../../button/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-bab04a75.js';
+export { a as CalendarMobile } from '../../Component.responsive-6909ce92.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

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

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-bab04a75";
+export * from "../../Component.responsive-6909ce92";
 export {};

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

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-bab04a75.js';
+export { a as CalendarMobile } from '../../Component.responsive-6909ce92.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';

package/calendar/modern/index.js

@@ -1,5 +1,5 @@
 export { CalendarDesktop as Calendar } from './Component.desktop.js';
-export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-bab04a75.js';
+export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-6909ce92.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
 export { useCalendar } from './useCalendar.js';
 export { PeriodSlider } from './components/period-slider/Component.js';

package/calendar/modern/mobile.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from './Component.responsive-bab04a75.js';
+export { a as CalendarMobile } from './Component.responsive-6909ce92.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';

package/calendar/modern/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-bab04a75";
+export * from "./Component.responsive-6909ce92";
 export {};

package/calendar/modern/responsive.js

@@ -1,4 +1,4 @@
-export { C as CalendarResponsive } from './Component.responsive-bab04a75.js';
+export { C as CalendarResponsive } from './Component.responsive-6909ce92.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';

package/calendar/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-c7d32ac8";
+export * from "./Component.responsive-01fc776b";
 export {};

package/calendar/responsive.js

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

package/calendar-range/Component.js

@@ -8,6 +8,7 @@ require('classnames');
 require('date-fns/startOfMonth');
 require('../calendar-input');
 require('../date-input');
+require('@alfalab/hooks');
 require('./components/divider/Component.js');
 require('./hooks.js');
 require('date-fns/addMonths');

package/calendar-range/cssm/Component.js

@@ -8,6 +8,7 @@ require('classnames');
 require('date-fns/startOfMonth');
 require('../../calendar-input/cssm');
 require('../../date-input/cssm');
+require('@alfalab/hooks');
 require('./components/divider/Component.js');
 require('./components/divider/index.module.css');
 require('./hooks.js');

package/calendar-range/cssm/index.js

@@ -8,6 +8,7 @@ require('classnames');
 require('date-fns/startOfMonth');
 require('../../calendar-input/cssm');
 require('../../date-input/cssm');
+require('@alfalab/hooks');
 require('./components/divider/Component.js');
 require('./components/divider/index.module.css');
 require('./hooks.js');

package/calendar-range/cssm/views/popover.js

@@ -6,6 +6,7 @@ var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
 var coreComponentsCalendarInput = require('../../../calendar-input/cssm');
 var coreComponentsDateInput = require('../../../date-input/cssm');
+var hooks$1 = require('@alfalab/hooks');
 var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
 var styles = require('./index.module.css');
@@ -58,12 +59,16 @@ var CalendarRangePopover = function (_a) {
         setInputToInvalid(inputToValue !== '' &&
             !coreComponentsCalendarInput.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays));
     }, [dateFrom, inputToValue, maxDate, minDate, offDays]);
-    var handleInputFromChange = React.useCallback(function (_, payload) {
+    var handleInputFromChange = function (event, payload) {
+        var _a;
         setInputFromValue(payload.value);
-    }, []);
-    var handleInputToChange = React.useCallback(function (_, payload) {
+        (_a = inputFromProps.onInputChange) === null || _a === void 0 ? void 0 : _a.call(inputFromProps, event, payload);
+    };
+    var handleInputToChange = function (event, payload) {
+        var _a;
         setInputToValue(payload.value);
-    }, []);
+        (_a = inputToProps.onInputChange) === null || _a === void 0 ? void 0 : _a.call(inputToProps, event, payload);
+    };
     var handleInputFromBlur = React.useCallback(function () {
         handleValidInputFrom();
         setResetKey(+new Date());
@@ -84,7 +89,7 @@ var CalendarRangePopover = function (_a) {
     React.useEffect(function () {
         setInputToValue(valueTo);
     }, [valueTo]);
-    React.useEffect(function () {
+    hooks$1.useDidUpdateEffect(function () {
         onDateFromChange({ value: inputFromValue, date: dateFrom });
         onChange({
             valueFrom: inputFromValue,
@@ -97,7 +102,7 @@ var CalendarRangePopover = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputFromValue]);
-    React.useEffect(function () {
+    hooks$1.useDidUpdateEffect(function () {
         onDateToChange({ value: inputToValue, date: dateTo });
         onChange({
             valueFrom: inputFromValue,

package/calendar-range/cssm/views/static.js

@@ -58,6 +58,8 @@ var CalendarRangeStatic = function (_a) {
     var _p = React.useState(coreComponentsDateInput.isCompleteDateInput(inputFromValue) && dateFrom === null), inputFromInvalid = _p[0], setInputFromInvalid = _p[1];
     var _q = React.useState(coreComponentsDateInput.isCompleteDateInput(inputToValue) && dateTo === null), inputToInvalid = _q[0], setInputToInvalid = _q[1];
     var hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
+    var calendarFromProps = inputFromProps.calendarProps, onInputChangeFrom = inputFromProps.onInputChange, dateInputFromProps = tslib.__rest(inputFromProps, ["calendarProps", "onInputChange"]);
+    var calendarToProps = inputToProps.calendarProps, onInputChangeTo = inputToProps.onInputChange, dateInputToProps = tslib.__rest(inputToProps, ["calendarProps", "onInputChange"]);
     var _r = hooks.useStaticViewMonthes({
         selectedFrom: period.selectedFrom,
         selectedTo: period.selectedTo,
@@ -70,12 +72,14 @@ var CalendarRangeStatic = function (_a) {
     var handleValidInputTo = React.useCallback(function () {
         setInputToInvalid(inputToValue !== '' && !validateInputToValue(inputToValue));
     }, [inputToValue, validateInputToValue]);
-    var handleInputFromChange = React.useCallback(function (_, payload) {
+    var handleInputFromChange = function (event, payload) {
         setInputFromValue(payload.value);
-    }, []);
-    var handleInputToChange = React.useCallback(function (_, payload) {
+        onInputChangeFrom === null || onInputChangeFrom === void 0 ? void 0 : onInputChangeFrom(event, payload);
+    };
+    var handleInputToChange = function (event, payload) {
         setInputToValue(payload.value);
-    }, []);
+        onInputChangeTo === null || onInputChangeTo === void 0 ? void 0 : onInputChangeTo(event, payload);
+    };
     var handleMouseOver = React.useCallback(function (event) {
         var target = event.target;
         var mouseOverDayButton = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
@@ -157,8 +161,6 @@ var CalendarRangeStatic = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasValidateError]);
     var rangeProps = hooks.useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
-    var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = tslib.__rest(inputFromProps, ["calendarProps"]);
-    var calendarToProps = inputToProps.calendarProps, dateInputToProps = tslib.__rest(inputToProps, ["calendarProps"]);
     var CalendarFromComponent = dateInputFromProps.Calendar || coreComponentsCalendar.Calendar;
     var CalendarToComponent = dateInputToProps.Calendar || coreComponentsCalendar.Calendar;
     var minMaxInSameMonth = minDate && maxDate && isSameMonth__default.default(minDate, maxDate);