@alfalab/core-components 47.3.0-beta.1 → 47.4.0

package/bottom-sheet/component.js

@@ -12,6 +12,7 @@ var components_footer_Component = require('./components/footer/Component.js');
 var components_header_Component = require('./components/header/Component.js');
 var components_swipeableBackdrop_Component = require('./components/swipeable-backdrop/Component.js');
 var consts_swipeConsts = require('./consts/swipeConsts.js');
+var hooks_useVisualviewportSize = require('./hooks/use-visualviewport-size.js');
 var utils = require('./utils.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -26,8 +27,11 @@ require('./index.css');
 var isNil = coreComponentsShared.fnUtils.isNil;
 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, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _t = _a.iOSLock, iOSLock = _t === void 0 ? false : _t;
-    var fullHeight = reactDiv100vh.use100vh() || 0;
+    var _g, _h;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _j = _a.titleSize, titleSize = _j === void 0 ? 'default' : _j, 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, _k = _a.titleAlign, titleAlign = _k === void 0 ? 'left' : _k, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _l = _a.stickyFooter, stickyFooter = _l === void 0 ? true : _l, _m = _a.initialHeight, initialHeight = _m === void 0 ? 'default' : _m, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _o = _a.transitionProps, transitionProps = _o === void 0 ? {} : _o, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _p = _a.swipeable, swipeable = _p === void 0 ? true : _p, _q = _a.swipeableContent, swipeableContent = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 5 : _r, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _s = _a.scrollableContainerRef, scrollableContainerRef = _s === void 0 ? function () { return null; } : _s, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _t = _a.sheetContainerRef, sheetContainerRef = _t === void 0 ? function () { return null; } : _t, _u = _a.headerOffset, headerOffset = _u === void 0 ? 24 : _u, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _v = _a.iOSLock, iOSLock = _v === void 0 ? false : _v, _w = _a.virtualKeyboard, virtualKeyboard = _w === void 0 ? false : _w;
+    var windowHeight = (_g = reactDiv100vh.use100vh()) !== null && _g !== void 0 ? _g : 0;
+    var visibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize(virtualKeyboard);
+    var fullHeight = virtualKeyboard ? (_h = visibleViewportSize === null || visibleViewportSize === void 0 ? void 0 : visibleViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
     var initialIndexRef = React.useRef(initialActiveAreaIndex);
@@ -41,14 +45,14 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         var iOSViewHeight = coreComponentsShared.isClient()
             ? ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight)
             : 0;
-        var viewHeight = coreComponentsShared.os.isIOS() ? iOSViewHeight : fullHeight;
+        var viewHeight = coreComponentsShared.os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    var _u = React.useState(0), sheetOffset = _u[0], setSheetOffset = _u[1];
-    var _v = React.useState(1), backdropOpacity = _v[0], setBackdropOpacity = _v[1];
-    var _w = React.useState(-1), activeAreaIdx = _w[0], setActiveAreaIdx = _w[1];
-    var _x = React.useState(null), swipingInProgress = _x[0], setSwipingInProgress = _x[1];
+    var _x = React.useState(0), sheetOffset = _x[0], setSheetOffset = _x[1];
+    var _y = React.useState(1), backdropOpacity = _y[0], setBackdropOpacity = _y[1];
+    var _z = React.useState(-1), activeAreaIdx = _z[0], setActiveAreaIdx = _z[1];
+    var _0 = React.useState(null), swipingInProgress = _0[0], setSwipingInProgress = _0[1];
     var scrollOccurred = React.useRef(false);
     var headerRef = React.useRef(null);
     var contentRef = React.useRef(null);
@@ -351,6 +355,9 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
             ? "".concat(lastMagneticArea, "px")
             : 'unset',
         maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
+            : undefined,
     }); };
     var renderMarker = function () {
         if (swipeable) {

package/bottom-sheet/cssm/component.js

@@ -12,6 +12,7 @@ var components_footer_Component = require('./components/footer/Component.js');
 var components_header_Component = require('./components/header/Component.js');
 var components_swipeableBackdrop_Component = require('./components/swipeable-backdrop/Component.js');
 var consts_swipeConsts = require('./consts/swipeConsts.js');
+var hooks_useVisualviewportSize = require('./hooks/use-visualviewport-size.js');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
 
@@ -25,8 +26,11 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var isNil = coreComponentsShared.fnUtils.isNil;
 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, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _t = _a.iOSLock, iOSLock = _t === void 0 ? false : _t;
-    var fullHeight = reactDiv100vh.use100vh() || 0;
+    var _g, _h;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _j = _a.titleSize, titleSize = _j === void 0 ? 'default' : _j, 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, _k = _a.titleAlign, titleAlign = _k === void 0 ? 'left' : _k, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _l = _a.stickyFooter, stickyFooter = _l === void 0 ? true : _l, _m = _a.initialHeight, initialHeight = _m === void 0 ? 'default' : _m, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _o = _a.transitionProps, transitionProps = _o === void 0 ? {} : _o, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _p = _a.swipeable, swipeable = _p === void 0 ? true : _p, _q = _a.swipeableContent, swipeableContent = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 5 : _r, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _s = _a.scrollableContainerRef, scrollableContainerRef = _s === void 0 ? function () { return null; } : _s, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _t = _a.sheetContainerRef, sheetContainerRef = _t === void 0 ? function () { return null; } : _t, _u = _a.headerOffset, headerOffset = _u === void 0 ? 24 : _u, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _v = _a.iOSLock, iOSLock = _v === void 0 ? false : _v, _w = _a.virtualKeyboard, virtualKeyboard = _w === void 0 ? false : _w;
+    var windowHeight = (_g = reactDiv100vh.use100vh()) !== null && _g !== void 0 ? _g : 0;
+    var visibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize(virtualKeyboard);
+    var fullHeight = virtualKeyboard ? (_h = visibleViewportSize === null || visibleViewportSize === void 0 ? void 0 : visibleViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
     var initialIndexRef = React.useRef(initialActiveAreaIndex);
@@ -40,14 +44,14 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         var iOSViewHeight = coreComponentsShared.isClient()
             ? ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight)
             : 0;
-        var viewHeight = coreComponentsShared.os.isIOS() ? iOSViewHeight : fullHeight;
+        var viewHeight = coreComponentsShared.os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    var _u = React.useState(0), sheetOffset = _u[0], setSheetOffset = _u[1];
-    var _v = React.useState(1), backdropOpacity = _v[0], setBackdropOpacity = _v[1];
-    var _w = React.useState(-1), activeAreaIdx = _w[0], setActiveAreaIdx = _w[1];
-    var _x = React.useState(null), swipingInProgress = _x[0], setSwipingInProgress = _x[1];
+    var _x = React.useState(0), sheetOffset = _x[0], setSheetOffset = _x[1];
+    var _y = React.useState(1), backdropOpacity = _y[0], setBackdropOpacity = _y[1];
+    var _z = React.useState(-1), activeAreaIdx = _z[0], setActiveAreaIdx = _z[1];
+    var _0 = React.useState(null), swipingInProgress = _0[0], setSwipingInProgress = _0[1];
     var scrollOccurred = React.useRef(false);
     var headerRef = React.useRef(null);
     var contentRef = React.useRef(null);
@@ -350,6 +354,9 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
             ? "".concat(lastMagneticArea, "px")
             : 'unset',
         maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
+            : undefined,
     }); };
     var renderMarker = function () {
         if (swipeable) {

package/bottom-sheet/cssm/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/cssm/hooks/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hooks_useVisualviewportSize = require('./use-visualviewport-size.js');
+
+
+
+exports.useVisibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize;

package/bottom-sheet/cssm/hooks/use-visualviewport-size.d.ts

@@ -0,0 +1,3 @@
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
+declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
+export { useVisibleViewportSize };

package/bottom-sheet/cssm/hooks/use-visualviewport-size.js

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsShared = require('../../../shared/cssm');
+
+var measureVisualViewport = function (visualViewport) {
+    if (!visualViewport)
+        return null;
+    var height = visualViewport.height, offsetTop = visualViewport.offsetTop;
+    return { height: height, offsetTop: offsetTop };
+};
+function useVisibleViewportSize(enabled) {
+    if (enabled === void 0) { enabled = false; }
+    var _a = React.useState(function () {
+        return coreComponentsShared.isClient() ? measureVisualViewport(window.visualViewport) : null;
+    }), size = _a[0], setSize = _a[1];
+    React.useEffect(function () {
+        var visualViewport = window.visualViewport;
+        if (!coreComponentsShared.isClient() || !enabled || !visualViewport)
+            return coreComponentsShared.fnUtils.noop;
+        var listener = function (event) {
+            return setSize(measureVisualViewport(event.target));
+        };
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return function () {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
+}
+
+exports.useVisibleViewportSize = useVisibleViewportSize;

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

@@ -281,5 +281,9 @@ type BottomSheetProps = {
      * Блокирует скролл когда модальное окно открыто. Работает только на iOS
      */
     iOSLock?: boolean;
+    /**
+     * Учитывать высоту виртуальной клавиатуры
+     */
+    virtualKeyboard?: boolean;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/esm/component.js

@@ -10,6 +10,7 @@ import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 import { horizontalDirections } from './consts/swipeConsts.js';
+import { useVisibleViewportSize } from './hooks/use-visualviewport-size.js';
 import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
 import '../../navigation-bar-private/esm';
 import '../../backdrop/esm';
@@ -21,8 +22,11 @@ require('./index.css');
 var isNil = fnUtils.isNil;
 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, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _t = _a.iOSLock, iOSLock = _t === void 0 ? false : _t;
-    var fullHeight = use100vh() || 0;
+    var _g, _h;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _j = _a.titleSize, titleSize = _j === void 0 ? 'default' : _j, 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, _k = _a.titleAlign, titleAlign = _k === void 0 ? 'left' : _k, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _l = _a.stickyFooter, stickyFooter = _l === void 0 ? true : _l, _m = _a.initialHeight, initialHeight = _m === void 0 ? 'default' : _m, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _o = _a.transitionProps, transitionProps = _o === void 0 ? {} : _o, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _p = _a.swipeable, swipeable = _p === void 0 ? true : _p, _q = _a.swipeableContent, swipeableContent = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 5 : _r, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _s = _a.scrollableContainerRef, scrollableContainerRef = _s === void 0 ? function () { return null; } : _s, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _t = _a.sheetContainerRef, sheetContainerRef = _t === void 0 ? function () { return null; } : _t, _u = _a.headerOffset, headerOffset = _u === void 0 ? 24 : _u, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _v = _a.iOSLock, iOSLock = _v === void 0 ? false : _v, _w = _a.virtualKeyboard, virtualKeyboard = _w === void 0 ? false : _w;
+    var windowHeight = (_g = use100vh()) !== null && _g !== void 0 ? _g : 0;
+    var visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
+    var fullHeight = virtualKeyboard ? (_h = visibleViewportSize === null || visibleViewportSize === void 0 ? void 0 : visibleViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
     var initialIndexRef = useRef(initialActiveAreaIndex);
@@ -36,14 +40,14 @@ var BottomSheet = forwardRef(function (_a, ref) {
         var iOSViewHeight = isClient()
             ? ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight)
             : 0;
-        var viewHeight = os.isIOS() ? iOSViewHeight : fullHeight;
+        var viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    var _u = useState(0), sheetOffset = _u[0], setSheetOffset = _u[1];
-    var _v = useState(1), backdropOpacity = _v[0], setBackdropOpacity = _v[1];
-    var _w = useState(-1), activeAreaIdx = _w[0], setActiveAreaIdx = _w[1];
-    var _x = useState(null), swipingInProgress = _x[0], setSwipingInProgress = _x[1];
+    var _x = useState(0), sheetOffset = _x[0], setSheetOffset = _x[1];
+    var _y = useState(1), backdropOpacity = _y[0], setBackdropOpacity = _y[1];
+    var _z = useState(-1), activeAreaIdx = _z[0], setActiveAreaIdx = _z[1];
+    var _0 = useState(null), swipingInProgress = _0[0], setSwipingInProgress = _0[1];
     var scrollOccurred = useRef(false);
     var headerRef = useRef(null);
     var contentRef = useRef(null);
@@ -346,6 +350,9 @@ var BottomSheet = forwardRef(function (_a, ref) {
             ? "".concat(lastMagneticArea, "px")
             : 'unset',
         maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
+            : undefined,
     }); };
     var renderMarker = function () {
         if (swipeable) {

package/bottom-sheet/esm/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/esm/hooks/index.js

@@ -0,0 +1,3 @@
+export { useVisibleViewportSize } from './use-visualviewport-size.js';
+import 'react';
+import '../../../shared/esm';

package/bottom-sheet/esm/hooks/use-visualviewport-size.d.ts

@@ -0,0 +1,3 @@
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
+declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
+export { useVisibleViewportSize };

package/bottom-sheet/esm/hooks/use-visualviewport-size.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { isClient, fnUtils } from '../../../shared/esm';
+
+var measureVisualViewport = function (visualViewport) {
+    if (!visualViewport)
+        return null;
+    var height = visualViewport.height, offsetTop = visualViewport.offsetTop;
+    return { height: height, offsetTop: offsetTop };
+};
+function useVisibleViewportSize(enabled) {
+    if (enabled === void 0) { enabled = false; }
+    var _a = useState(function () {
+        return isClient() ? measureVisualViewport(window.visualViewport) : null;
+    }), size = _a[0], setSize = _a[1];
+    useEffect(function () {
+        var visualViewport = window.visualViewport;
+        if (!isClient() || !enabled || !visualViewport)
+            return fnUtils.noop;
+        var listener = function (event) {
+            return setSize(measureVisualViewport(event.target));
+        };
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return function () {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
+}
+
+export { useVisibleViewportSize };

package/bottom-sheet/esm/index.js

@@ -15,3 +15,4 @@ import './components/swipeable-backdrop/Component.js';
 import '../../backdrop/esm';
 import './consts/swipeConsts.js';
 import './enums/swipeEnums.js';
+import './hooks/use-visualviewport-size.js';

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

@@ -281,5 +281,9 @@ type BottomSheetProps = {
      * Блокирует скролл когда модальное окно открыто. Работает только на iOS
      */
     iOSLock?: boolean;
+    /**
+     * Учитывать высоту виртуальной клавиатуры
+     */
+    virtualKeyboard?: boolean;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/hooks/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hooks_useVisualviewportSize = require('./use-visualviewport-size.js');
+
+
+
+exports.useVisibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize;

package/bottom-sheet/hooks/use-visualviewport-size.d.ts

@@ -0,0 +1,3 @@
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
+declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
+export { useVisibleViewportSize };

package/bottom-sheet/hooks/use-visualviewport-size.js

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsShared = require('../../shared');
+
+var measureVisualViewport = function (visualViewport) {
+    if (!visualViewport)
+        return null;
+    var height = visualViewport.height, offsetTop = visualViewport.offsetTop;
+    return { height: height, offsetTop: offsetTop };
+};
+function useVisibleViewportSize(enabled) {
+    if (enabled === void 0) { enabled = false; }
+    var _a = React.useState(function () {
+        return coreComponentsShared.isClient() ? measureVisualViewport(window.visualViewport) : null;
+    }), size = _a[0], setSize = _a[1];
+    React.useEffect(function () {
+        var visualViewport = window.visualViewport;
+        if (!coreComponentsShared.isClient() || !enabled || !visualViewport)
+            return coreComponentsShared.fnUtils.noop;
+        var listener = function (event) {
+            return setSize(measureVisualViewport(event.target));
+        };
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return function () {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
+}
+
+exports.useVisibleViewportSize = useVisibleViewportSize;

package/bottom-sheet/modern/component.js

@@ -9,6 +9,7 @@ import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 import { horizontalDirections } from './consts/swipeConsts.js';
+import { useVisibleViewportSize } from './hooks/use-visualviewport-size.js';
 import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
 import '../../navigation-bar-private/modern';
 import '../../backdrop/modern';
@@ -18,8 +19,10 @@ const styles = {"modal":"bottom-sheet__modal_90r42","wrapper":"bottom-sheet__wra
 require('./index.css');
 
 const { isNil } = fnUtils;
-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, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, }, ref) => {
-    const fullHeight = use100vh() || 0;
+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, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
+    const windowHeight = use100vh() ?? 0;
+    const visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
+    const fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
     const initialIndexRef = useRef(initialActiveAreaIndex);
@@ -30,9 +33,9 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         const iOSViewHeight = isClient()
             ? document?.documentElement?.clientHeight || window?.innerHeight
             : 0;
-        const viewHeight = os.isIOS() ? iOSViewHeight : fullHeight;
+        const viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
     const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
     const [sheetOffset, setSheetOffset] = useState(0);
     const [backdropOpacity, setBackdropOpacity] = useState(1);
@@ -356,6 +359,9 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
             ? `${lastMagneticArea}px`
             : 'unset',
         maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
+            : undefined,
     });
     const renderMarker = () => {
         if (swipeable) {

package/bottom-sheet/modern/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/modern/hooks/index.js

@@ -0,0 +1,3 @@
+export { useVisibleViewportSize } from './use-visualviewport-size.js';
+import 'react';
+import '../../../shared/modern';

package/bottom-sheet/modern/hooks/use-visualviewport-size.d.ts

@@ -0,0 +1,3 @@
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
+declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
+export { useVisibleViewportSize };

package/bottom-sheet/modern/hooks/use-visualviewport-size.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { isClient, fnUtils } from '../../../shared/modern';
+
+const measureVisualViewport = (visualViewport) => {
+    if (!visualViewport)
+        return null;
+    const { height, offsetTop } = visualViewport;
+    return { height, offsetTop };
+};
+function useVisibleViewportSize(enabled = false) {
+    const [size, setSize] = useState(() => isClient() ? measureVisualViewport(window.visualViewport) : null);
+    useEffect(() => {
+        const { visualViewport } = window;
+        if (!isClient() || !enabled || !visualViewport)
+            return fnUtils.noop;
+        const listener = (event) => setSize(measureVisualViewport(event.target));
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return () => {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
+}
+
+export { useVisibleViewportSize };

package/bottom-sheet/modern/index.js

@@ -14,3 +14,4 @@ import './components/swipeable-backdrop/Component.js';
 import '../../backdrop/modern';
 import './consts/swipeConsts.js';
 import './enums/swipeEnums.js';
+import './hooks/use-visualviewport-size.js';

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

@@ -281,5 +281,9 @@ type BottomSheetProps = {
      * Блокирует скролл когда модальное окно открыто. Работает только на iOS
      */
     iOSLock?: boolean;
+    /**
+     * Учитывать высоту виртуальной клавиатуры
+     */
+    virtualKeyboard?: boolean;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/types.d.ts

@@ -281,5 +281,9 @@ type BottomSheetProps = {
      * Блокирует скролл когда модальное окно открыто. Работает только на iOS
      */
     iOSLock?: boolean;
+    /**
+     * Учитывать высоту виртуальной клавиатуры
+     */
+    virtualKeyboard?: boolean;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/calendar/Component.responsive.d.ts

@@ -8,6 +8,10 @@ type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDesktopProps & {
     title?: string | undefined;
@@ -26,5 +30,9 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ResponsiveCalendarProps, CalendarResponsive };

package/calendar/Component.responsive.js

@@ -11,8 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var CalendarResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
-    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(components_calendarMobile_Component.CalendarMobile, tslib.__assign({}, restProps, { ref: ref })));
 });
 CalendarResponsive.displayName = 'CalendarResponsive';

package/calendar/cssm/Component.responsive.d.ts

@@ -8,6 +8,10 @@ type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDesktopProps & {
     title?: string | undefined;
@@ -26,5 +30,9 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ResponsiveCalendarProps, CalendarResponsive };

package/calendar/cssm/Component.responsive.js

@@ -11,8 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var CalendarResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
-    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(components_calendarMobile_Component.CalendarMobile, tslib.__assign({}, restProps, { ref: ref })));
 });
 CalendarResponsive.displayName = 'CalendarResponsive';

package/calendar/esm/Component.responsive.d.ts

@@ -8,6 +8,10 @@ type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDesktopProps & {
     title?: string | undefined;
@@ -26,5 +30,9 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ResponsiveCalendarProps, CalendarResponsive };

package/calendar/esm/Component.responsive.js

@@ -72,8 +72,8 @@ import './components/years-table/Component.js';
 import 'date-fns/isThisYear';
 
 var CalendarResponsive = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
-    var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React.createElement(CalendarDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(CalendarMobile, __assign({}, restProps, { ref: ref })));
 });
 CalendarResponsive.displayName = 'CalendarResponsive';

package/calendar/modern/Component.responsive.d.ts

@@ -8,6 +8,10 @@ type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDesktopProps & {
     title?: string | undefined;
@@ -26,5 +30,9 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ResponsiveCalendarProps, CalendarResponsive };