@alfalab/core-components-bottom-sheet - npm Package Compare versions

Comparing version 6.17.17 to 6.18.0

component.js

@@ -26,10 +26,11 @@ 'use strict';
 
-var styles = {"modal":"bottom-sheet__modal_tyvw6","wrapper":"bottom-sheet__wrapper_tyvw6","fullscreen":"bottom-sheet__fullscreen_tyvw6","component":"bottom-sheet__component_tyvw6","withTransition":"bottom-sheet__withTransition_tyvw6","scrollableContainer":"bottom-sheet__scrollableContainer_tyvw6","marker":"bottom-sheet__marker_tyvw6","defaultMarker":"bottom-sheet__defaultMarker_tyvw6","content":"bottom-sheet__content_tyvw6","noHeader":"bottom-sheet__noHeader_tyvw6","noFooter":"bottom-sheet__noFooter_tyvw6","scrollLocked":"bottom-sheet__scrollLocked_tyvw6","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_tyvw6","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_tyvw6","appear":"bottom-sheet__appear_tyvw6","enter":"bottom-sheet__enter_tyvw6","appearActive":"bottom-sheet__appearActive_tyvw6","enterActive":"bottom-sheet__enterActive_tyvw6","enterDone":"bottom-sheet__enterDone_tyvw6","appearDone":"bottom-sheet__appearDone_tyvw6","exit":"bottom-sheet__exit_tyvw6","exitActive":"bottom-sheet__exitActive_tyvw6","safeAreaBottom":"bottom-sheet__safeAreaBottom_tyvw6","background-accent":"bottom-sheet__background-accent_tyvw6","background-info":"bottom-sheet__background-info_tyvw6","background-attention-muted":"bottom-sheet__background-attention-muted_tyvw6","background-positive-muted":"bottom-sheet__background-positive-muted_tyvw6","background-negative-muted":"bottom-sheet__background-negative-muted_tyvw6","background-primary":"bottom-sheet__background-primary_tyvw6","background-primary-inverted":"bottom-sheet__background-primary-inverted_tyvw6","background-secondary":"bottom-sheet__background-secondary_tyvw6","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_tyvw6","background-tertiary":"bottom-sheet__background-tertiary_tyvw6","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_tyvw6","background-quaternary":"bottom-sheet__background-quaternary_tyvw6","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_tyvw6","background-specialbg-component":"bottom-sheet__background-specialbg-component_tyvw6","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_tyvw6","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_tyvw6","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_tyvw6","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_tyvw6","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_tyvw6","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_tyvw6","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_tyvw6","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_tyvw6"};
+var styles = {"modal":"bottom-sheet__modal_1w9iq","wrapper":"bottom-sheet__wrapper_1w9iq","fullscreen":"bottom-sheet__fullscreen_1w9iq","component":"bottom-sheet__component_1w9iq","withTransition":"bottom-sheet__withTransition_1w9iq","scrollableContainer":"bottom-sheet__scrollableContainer_1w9iq","marker":"bottom-sheet__marker_1w9iq","defaultMarker":"bottom-sheet__defaultMarker_1w9iq","content":"bottom-sheet__content_1w9iq","noHeader":"bottom-sheet__noHeader_1w9iq","noFooter":"bottom-sheet__noFooter_1w9iq","scrollLocked":"bottom-sheet__scrollLocked_1w9iq","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1w9iq","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1w9iq","appear":"bottom-sheet__appear_1w9iq","enter":"bottom-sheet__enter_1w9iq","appearActive":"bottom-sheet__appearActive_1w9iq","enterActive":"bottom-sheet__enterActive_1w9iq","enterDone":"bottom-sheet__enterDone_1w9iq","appearDone":"bottom-sheet__appearDone_1w9iq","exit":"bottom-sheet__exit_1w9iq","exitActive":"bottom-sheet__exitActive_1w9iq","safeAreaBottom":"bottom-sheet__safeAreaBottom_1w9iq","background-accent":"bottom-sheet__background-accent_1w9iq","background-info":"bottom-sheet__background-info_1w9iq","background-attention-muted":"bottom-sheet__background-attention-muted_1w9iq","background-positive-muted":"bottom-sheet__background-positive-muted_1w9iq","background-negative-muted":"bottom-sheet__background-negative-muted_1w9iq","background-primary":"bottom-sheet__background-primary_1w9iq","background-primary-inverted":"bottom-sheet__background-primary-inverted_1w9iq","background-secondary":"bottom-sheet__background-secondary_1w9iq","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1w9iq","background-tertiary":"bottom-sheet__background-tertiary_1w9iq","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1w9iq","background-quaternary":"bottom-sheet__background-quaternary_1w9iq","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1w9iq","background-specialbg-component":"bottom-sheet__background-specialbg-component_1w9iq","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1w9iq","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1w9iq","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1w9iq","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1w9iq","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1w9iq","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1w9iq","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1w9iq","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1w9iq"};
 require('./index.css')
 
 var isNil = coreComponentsShared.fnUtils.isNil;
+var adjustContainerHeightDefault = function (value) { return value; };
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f;
     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 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, _v = _a.adjustContainerHeight, adjustContainerHeight = _v === void 0 ? adjustContainerHeightDefault : _v, 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, _w = _a.iOSLock, iOSLock = _w === void 0 ? false : _w, _x = _a.virtualKeyboard, virtualKeyboard = _x === void 0 ? false : _x;
     var windowHeight = (_g = reactDiv100vh.use100vh()) !== null && _g !== void 0 ? _g : 0;
@@ -40,2 +41,3 @@ var visibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize(virtualKeyboard);
     var isFirstRender = fullHeight === 0;
+    fullHeight = adjustContainerHeight(fullHeight);
     var initialIndexRef = React.useRef(initialActiveAreaIndex);
@@ -49,13 +51,19 @@ var magneticAreas = React.useMemo(function () {
         }
-        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 iOSViewHeight = 0;
+        if (coreComponentsShared.isClient()) {
+            if ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) {
+                iOSViewHeight = adjustContainerHeight(document.documentElement.clientHeight);
+            }
+            else {
+                iOSViewHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+            }
+        }
         var viewHeight = coreComponentsShared.os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard, adjustContainerHeight]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 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 _y = React.useState(0), sheetOffset = _y[0], setSheetOffset = _y[1];
+    var _z = React.useState(1), backdropOpacity = _z[0], setBackdropOpacity = _z[1];
+    var _0 = React.useState(-1), activeAreaIdx = _0[0], setActiveAreaIdx = _0[1];
+    var _1 = React.useState(null), swipingInProgress = _1[0], setSwipingInProgress = _1[1];
     var scrollOccurred = React.useRef(false);
@@ -62,0 +70,0 @@ var headerRef = React.useRef(null);

components/footer/Component.js

@@ -14,3 +14,3 @@ 'use strict';
 
-var styles = {"footer":"bottom-sheet__footer_gws6o","sticky":"bottom-sheet__sticky_gws6o","highlighted":"bottom-sheet__highlighted_gws6o","background-accent":"bottom-sheet__background-accent_gws6o","background-info":"bottom-sheet__background-info_gws6o","background-attention-muted":"bottom-sheet__background-attention-muted_gws6o","background-positive-muted":"bottom-sheet__background-positive-muted_gws6o","background-negative-muted":"bottom-sheet__background-negative-muted_gws6o","background-primary":"bottom-sheet__background-primary_gws6o","background-primary-inverted":"bottom-sheet__background-primary-inverted_gws6o","background-secondary":"bottom-sheet__background-secondary_gws6o","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_gws6o","background-tertiary":"bottom-sheet__background-tertiary_gws6o","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_gws6o","background-quaternary":"bottom-sheet__background-quaternary_gws6o","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_gws6o","background-specialbg-component":"bottom-sheet__background-specialbg-component_gws6o","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_gws6o","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_gws6o","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_gws6o","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_gws6o","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_gws6o","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_gws6o","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_gws6o","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_gws6o"};
+var styles = {"footer":"bottom-sheet__footer_1577p","sticky":"bottom-sheet__sticky_1577p","highlighted":"bottom-sheet__highlighted_1577p","background-accent":"bottom-sheet__background-accent_1577p","background-info":"bottom-sheet__background-info_1577p","background-attention-muted":"bottom-sheet__background-attention-muted_1577p","background-positive-muted":"bottom-sheet__background-positive-muted_1577p","background-negative-muted":"bottom-sheet__background-negative-muted_1577p","background-primary":"bottom-sheet__background-primary_1577p","background-primary-inverted":"bottom-sheet__background-primary-inverted_1577p","background-secondary":"bottom-sheet__background-secondary_1577p","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1577p","background-tertiary":"bottom-sheet__background-tertiary_1577p","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1577p","background-quaternary":"bottom-sheet__background-quaternary_1577p","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1577p","background-specialbg-component":"bottom-sheet__background-specialbg-component_1577p","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1577p","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1577p","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1577p","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1577p","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1577p","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1577p","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1577p","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1577p"};
 require('./index.css')
@@ -17,0 +17,0 @@

components/header/Component.js

@@ -16,3 +16,3 @@ 'use strict';
 
-var styles = {"headerWrapper":"bottom-sheet__headerWrapper_1ejwk","hasContent":"bottom-sheet__hasContent_1ejwk","header":"bottom-sheet__header_1ejwk","sticky":"bottom-sheet__sticky_1ejwk","highlighted":"bottom-sheet__highlighted_1ejwk","justifyEnd":"bottom-sheet__justifyEnd_1ejwk","addon":"bottom-sheet__addon_1ejwk","addonFixed":"bottom-sheet__addonFixed_1ejwk","title":"bottom-sheet__title_1ejwk","titleCenter":"bottom-sheet__titleCenter_1ejwk","titleLeft":"bottom-sheet__titleLeft_1ejwk","trimTitle":"bottom-sheet__trimTitle_1ejwk"};
+var styles = {"headerWrapper":"bottom-sheet__headerWrapper_znpxe","hasContent":"bottom-sheet__hasContent_znpxe","header":"bottom-sheet__header_znpxe","sticky":"bottom-sheet__sticky_znpxe","highlighted":"bottom-sheet__highlighted_znpxe","justifyEnd":"bottom-sheet__justifyEnd_znpxe","addon":"bottom-sheet__addon_znpxe","addonFixed":"bottom-sheet__addonFixed_znpxe","title":"bottom-sheet__title_znpxe","titleCenter":"bottom-sheet__titleCenter_znpxe","titleLeft":"bottom-sheet__titleLeft_znpxe","trimTitle":"bottom-sheet__trimTitle_znpxe"};
 require('./index.css')
@@ -19,0 +19,0 @@

cssm/component.js

@@ -29,6 +29,7 @@ 'use strict';
 var isNil = coreComponentsShared.fnUtils.isNil;
+var adjustContainerHeightDefault = function (value) { return value; };
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f;
     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 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, _v = _a.adjustContainerHeight, adjustContainerHeight = _v === void 0 ? adjustContainerHeightDefault : _v, 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, _w = _a.iOSLock, iOSLock = _w === void 0 ? false : _w, _x = _a.virtualKeyboard, virtualKeyboard = _x === void 0 ? false : _x;
     var windowHeight = (_g = reactDiv100vh.use100vh()) !== null && _g !== void 0 ? _g : 0;
@@ -39,2 +40,3 @@ var visibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize(virtualKeyboard);
     var isFirstRender = fullHeight === 0;
+    fullHeight = adjustContainerHeight(fullHeight);
     var initialIndexRef = React.useRef(initialActiveAreaIndex);
@@ -48,13 +50,19 @@ var magneticAreas = React.useMemo(function () {
         }
-        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 iOSViewHeight = 0;
+        if (coreComponentsShared.isClient()) {
+            if ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) {
+                iOSViewHeight = adjustContainerHeight(document.documentElement.clientHeight);
+            }
+            else {
+                iOSViewHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+            }
+        }
         var viewHeight = coreComponentsShared.os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard, adjustContainerHeight]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 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 _y = React.useState(0), sheetOffset = _y[0], setSheetOffset = _y[1];
+    var _z = React.useState(1), backdropOpacity = _z[0], setBackdropOpacity = _z[1];
+    var _0 = React.useState(-1), activeAreaIdx = _0[0], setActiveAreaIdx = _0[1];
+    var _1 = React.useState(null), swipingInProgress = _1[0], setSwipingInProgress = _1[1];
     var scrollOccurred = React.useRef(false);
@@ -61,0 +69,0 @@ var headerRef = React.useRef(null);

cssm/types.d.ts

@@ -11,2 +11,6 @@ /// <reference types="react-transition-group" />
     /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number;
+    /**
      * Контент
@@ -13,0 +17,0 @@ */

esm/component.js

@@ -16,10 +16,11 @@ import { __assign } from 'tslib';
 
-var styles = {"modal":"bottom-sheet__modal_tyvw6","wrapper":"bottom-sheet__wrapper_tyvw6","fullscreen":"bottom-sheet__fullscreen_tyvw6","component":"bottom-sheet__component_tyvw6","withTransition":"bottom-sheet__withTransition_tyvw6","scrollableContainer":"bottom-sheet__scrollableContainer_tyvw6","marker":"bottom-sheet__marker_tyvw6","defaultMarker":"bottom-sheet__defaultMarker_tyvw6","content":"bottom-sheet__content_tyvw6","noHeader":"bottom-sheet__noHeader_tyvw6","noFooter":"bottom-sheet__noFooter_tyvw6","scrollLocked":"bottom-sheet__scrollLocked_tyvw6","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_tyvw6","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_tyvw6","appear":"bottom-sheet__appear_tyvw6","enter":"bottom-sheet__enter_tyvw6","appearActive":"bottom-sheet__appearActive_tyvw6","enterActive":"bottom-sheet__enterActive_tyvw6","enterDone":"bottom-sheet__enterDone_tyvw6","appearDone":"bottom-sheet__appearDone_tyvw6","exit":"bottom-sheet__exit_tyvw6","exitActive":"bottom-sheet__exitActive_tyvw6","safeAreaBottom":"bottom-sheet__safeAreaBottom_tyvw6","background-accent":"bottom-sheet__background-accent_tyvw6","background-info":"bottom-sheet__background-info_tyvw6","background-attention-muted":"bottom-sheet__background-attention-muted_tyvw6","background-positive-muted":"bottom-sheet__background-positive-muted_tyvw6","background-negative-muted":"bottom-sheet__background-negative-muted_tyvw6","background-primary":"bottom-sheet__background-primary_tyvw6","background-primary-inverted":"bottom-sheet__background-primary-inverted_tyvw6","background-secondary":"bottom-sheet__background-secondary_tyvw6","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_tyvw6","background-tertiary":"bottom-sheet__background-tertiary_tyvw6","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_tyvw6","background-quaternary":"bottom-sheet__background-quaternary_tyvw6","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_tyvw6","background-specialbg-component":"bottom-sheet__background-specialbg-component_tyvw6","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_tyvw6","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_tyvw6","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_tyvw6","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_tyvw6","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_tyvw6","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_tyvw6","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_tyvw6","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_tyvw6"};
+var styles = {"modal":"bottom-sheet__modal_1w9iq","wrapper":"bottom-sheet__wrapper_1w9iq","fullscreen":"bottom-sheet__fullscreen_1w9iq","component":"bottom-sheet__component_1w9iq","withTransition":"bottom-sheet__withTransition_1w9iq","scrollableContainer":"bottom-sheet__scrollableContainer_1w9iq","marker":"bottom-sheet__marker_1w9iq","defaultMarker":"bottom-sheet__defaultMarker_1w9iq","content":"bottom-sheet__content_1w9iq","noHeader":"bottom-sheet__noHeader_1w9iq","noFooter":"bottom-sheet__noFooter_1w9iq","scrollLocked":"bottom-sheet__scrollLocked_1w9iq","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1w9iq","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1w9iq","appear":"bottom-sheet__appear_1w9iq","enter":"bottom-sheet__enter_1w9iq","appearActive":"bottom-sheet__appearActive_1w9iq","enterActive":"bottom-sheet__enterActive_1w9iq","enterDone":"bottom-sheet__enterDone_1w9iq","appearDone":"bottom-sheet__appearDone_1w9iq","exit":"bottom-sheet__exit_1w9iq","exitActive":"bottom-sheet__exitActive_1w9iq","safeAreaBottom":"bottom-sheet__safeAreaBottom_1w9iq","background-accent":"bottom-sheet__background-accent_1w9iq","background-info":"bottom-sheet__background-info_1w9iq","background-attention-muted":"bottom-sheet__background-attention-muted_1w9iq","background-positive-muted":"bottom-sheet__background-positive-muted_1w9iq","background-negative-muted":"bottom-sheet__background-negative-muted_1w9iq","background-primary":"bottom-sheet__background-primary_1w9iq","background-primary-inverted":"bottom-sheet__background-primary-inverted_1w9iq","background-secondary":"bottom-sheet__background-secondary_1w9iq","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1w9iq","background-tertiary":"bottom-sheet__background-tertiary_1w9iq","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1w9iq","background-quaternary":"bottom-sheet__background-quaternary_1w9iq","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1w9iq","background-specialbg-component":"bottom-sheet__background-specialbg-component_1w9iq","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1w9iq","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1w9iq","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1w9iq","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1w9iq","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1w9iq","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1w9iq","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1w9iq","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1w9iq"};
 require('./index.css')
 
 var isNil = fnUtils.isNil;
+var adjustContainerHeightDefault = function (value) { return value; };
 var BottomSheet = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f;
     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 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, _v = _a.adjustContainerHeight, adjustContainerHeight = _v === void 0 ? adjustContainerHeightDefault : _v, 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, _w = _a.iOSLock, iOSLock = _w === void 0 ? false : _w, _x = _a.virtualKeyboard, virtualKeyboard = _x === void 0 ? false : _x;
     var windowHeight = (_g = use100vh()) !== null && _g !== void 0 ? _g : 0;
@@ -30,2 +31,3 @@ var visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
     var isFirstRender = fullHeight === 0;
+    fullHeight = adjustContainerHeight(fullHeight);
     var initialIndexRef = useRef(initialActiveAreaIndex);
@@ -39,13 +41,19 @@ var magneticAreas = useMemo(function () {
         }
-        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 iOSViewHeight = 0;
+        if (isClient()) {
+            if ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) {
+                iOSViewHeight = adjustContainerHeight(document.documentElement.clientHeight);
+            }
+            else {
+                iOSViewHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+            }
+        }
         var viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard, adjustContainerHeight]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 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 _y = useState(0), sheetOffset = _y[0], setSheetOffset = _y[1];
+    var _z = useState(1), backdropOpacity = _z[0], setBackdropOpacity = _z[1];
+    var _0 = useState(-1), activeAreaIdx = _0[0], setActiveAreaIdx = _0[1];
+    var _1 = useState(null), swipingInProgress = _1[0], setSwipingInProgress = _1[1];
     var scrollOccurred = useRef(false);
@@ -52,0 +60,0 @@ var headerRef = useRef(null);

esm/components/footer/Component.js

@@ -5,3 +5,3 @@ import React, { useContext, useEffect } from 'react';
 
-var styles = {"footer":"bottom-sheet__footer_gws6o","sticky":"bottom-sheet__sticky_gws6o","highlighted":"bottom-sheet__highlighted_gws6o","background-accent":"bottom-sheet__background-accent_gws6o","background-info":"bottom-sheet__background-info_gws6o","background-attention-muted":"bottom-sheet__background-attention-muted_gws6o","background-positive-muted":"bottom-sheet__background-positive-muted_gws6o","background-negative-muted":"bottom-sheet__background-negative-muted_gws6o","background-primary":"bottom-sheet__background-primary_gws6o","background-primary-inverted":"bottom-sheet__background-primary-inverted_gws6o","background-secondary":"bottom-sheet__background-secondary_gws6o","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_gws6o","background-tertiary":"bottom-sheet__background-tertiary_gws6o","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_gws6o","background-quaternary":"bottom-sheet__background-quaternary_gws6o","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_gws6o","background-specialbg-component":"bottom-sheet__background-specialbg-component_gws6o","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_gws6o","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_gws6o","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_gws6o","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_gws6o","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_gws6o","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_gws6o","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_gws6o","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_gws6o"};
+var styles = {"footer":"bottom-sheet__footer_1577p","sticky":"bottom-sheet__sticky_1577p","highlighted":"bottom-sheet__highlighted_1577p","background-accent":"bottom-sheet__background-accent_1577p","background-info":"bottom-sheet__background-info_1577p","background-attention-muted":"bottom-sheet__background-attention-muted_1577p","background-positive-muted":"bottom-sheet__background-positive-muted_1577p","background-negative-muted":"bottom-sheet__background-negative-muted_1577p","background-primary":"bottom-sheet__background-primary_1577p","background-primary-inverted":"bottom-sheet__background-primary-inverted_1577p","background-secondary":"bottom-sheet__background-secondary_1577p","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1577p","background-tertiary":"bottom-sheet__background-tertiary_1577p","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1577p","background-quaternary":"bottom-sheet__background-quaternary_1577p","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1577p","background-specialbg-component":"bottom-sheet__background-specialbg-component_1577p","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1577p","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1577p","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1577p","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1577p","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1577p","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1577p","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1577p","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1577p"};
 require('./index.css')
@@ -8,0 +8,0 @@

esm/components/header/Component.js

@@ -7,3 +7,3 @@ import { __rest, __assign } from 'tslib';
 
-var styles = {"headerWrapper":"bottom-sheet__headerWrapper_1ejwk","hasContent":"bottom-sheet__hasContent_1ejwk","header":"bottom-sheet__header_1ejwk","sticky":"bottom-sheet__sticky_1ejwk","highlighted":"bottom-sheet__highlighted_1ejwk","justifyEnd":"bottom-sheet__justifyEnd_1ejwk","addon":"bottom-sheet__addon_1ejwk","addonFixed":"bottom-sheet__addonFixed_1ejwk","title":"bottom-sheet__title_1ejwk","titleCenter":"bottom-sheet__titleCenter_1ejwk","titleLeft":"bottom-sheet__titleLeft_1ejwk","trimTitle":"bottom-sheet__trimTitle_1ejwk"};
+var styles = {"headerWrapper":"bottom-sheet__headerWrapper_znpxe","hasContent":"bottom-sheet__hasContent_znpxe","header":"bottom-sheet__header_znpxe","sticky":"bottom-sheet__sticky_znpxe","highlighted":"bottom-sheet__highlighted_znpxe","justifyEnd":"bottom-sheet__justifyEnd_znpxe","addon":"bottom-sheet__addon_znpxe","addonFixed":"bottom-sheet__addonFixed_znpxe","title":"bottom-sheet__title_znpxe","titleCenter":"bottom-sheet__titleCenter_znpxe","titleLeft":"bottom-sheet__titleLeft_znpxe","trimTitle":"bottom-sheet__trimTitle_znpxe"};
 require('./index.css')
@@ -10,0 +10,0 @@

esm/types.d.ts

@@ -11,2 +11,6 @@ /// <reference types="react-transition-group" />
     /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number;
+    /**
      * Контент
@@ -13,0 +17,0 @@ */

modern/component.js

@@ -15,12 +15,14 @@ import React, { forwardRef, useRef, useMemo, useState, useEffect, useImperativeHandle } from 'react';
 
-const styles = {"modal":"bottom-sheet__modal_tyvw6","wrapper":"bottom-sheet__wrapper_tyvw6","fullscreen":"bottom-sheet__fullscreen_tyvw6","component":"bottom-sheet__component_tyvw6","withTransition":"bottom-sheet__withTransition_tyvw6","scrollableContainer":"bottom-sheet__scrollableContainer_tyvw6","marker":"bottom-sheet__marker_tyvw6","defaultMarker":"bottom-sheet__defaultMarker_tyvw6","content":"bottom-sheet__content_tyvw6","noHeader":"bottom-sheet__noHeader_tyvw6","noFooter":"bottom-sheet__noFooter_tyvw6","scrollLocked":"bottom-sheet__scrollLocked_tyvw6","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_tyvw6","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_tyvw6","appear":"bottom-sheet__appear_tyvw6","enter":"bottom-sheet__enter_tyvw6","appearActive":"bottom-sheet__appearActive_tyvw6","enterActive":"bottom-sheet__enterActive_tyvw6","enterDone":"bottom-sheet__enterDone_tyvw6","appearDone":"bottom-sheet__appearDone_tyvw6","exit":"bottom-sheet__exit_tyvw6","exitActive":"bottom-sheet__exitActive_tyvw6","safeAreaBottom":"bottom-sheet__safeAreaBottom_tyvw6","background-accent":"bottom-sheet__background-accent_tyvw6","background-info":"bottom-sheet__background-info_tyvw6","background-attention-muted":"bottom-sheet__background-attention-muted_tyvw6","background-positive-muted":"bottom-sheet__background-positive-muted_tyvw6","background-negative-muted":"bottom-sheet__background-negative-muted_tyvw6","background-primary":"bottom-sheet__background-primary_tyvw6","background-primary-inverted":"bottom-sheet__background-primary-inverted_tyvw6","background-secondary":"bottom-sheet__background-secondary_tyvw6","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_tyvw6","background-tertiary":"bottom-sheet__background-tertiary_tyvw6","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_tyvw6","background-quaternary":"bottom-sheet__background-quaternary_tyvw6","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_tyvw6","background-specialbg-component":"bottom-sheet__background-specialbg-component_tyvw6","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_tyvw6","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_tyvw6","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_tyvw6","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_tyvw6","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_tyvw6","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_tyvw6","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_tyvw6","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_tyvw6"};
+const styles = {"modal":"bottom-sheet__modal_1w9iq","wrapper":"bottom-sheet__wrapper_1w9iq","fullscreen":"bottom-sheet__fullscreen_1w9iq","component":"bottom-sheet__component_1w9iq","withTransition":"bottom-sheet__withTransition_1w9iq","scrollableContainer":"bottom-sheet__scrollableContainer_1w9iq","marker":"bottom-sheet__marker_1w9iq","defaultMarker":"bottom-sheet__defaultMarker_1w9iq","content":"bottom-sheet__content_1w9iq","noHeader":"bottom-sheet__noHeader_1w9iq","noFooter":"bottom-sheet__noFooter_1w9iq","scrollLocked":"bottom-sheet__scrollLocked_1w9iq","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1w9iq","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1w9iq","appear":"bottom-sheet__appear_1w9iq","enter":"bottom-sheet__enter_1w9iq","appearActive":"bottom-sheet__appearActive_1w9iq","enterActive":"bottom-sheet__enterActive_1w9iq","enterDone":"bottom-sheet__enterDone_1w9iq","appearDone":"bottom-sheet__appearDone_1w9iq","exit":"bottom-sheet__exit_1w9iq","exitActive":"bottom-sheet__exitActive_1w9iq","safeAreaBottom":"bottom-sheet__safeAreaBottom_1w9iq","background-accent":"bottom-sheet__background-accent_1w9iq","background-info":"bottom-sheet__background-info_1w9iq","background-attention-muted":"bottom-sheet__background-attention-muted_1w9iq","background-positive-muted":"bottom-sheet__background-positive-muted_1w9iq","background-negative-muted":"bottom-sheet__background-negative-muted_1w9iq","background-primary":"bottom-sheet__background-primary_1w9iq","background-primary-inverted":"bottom-sheet__background-primary-inverted_1w9iq","background-secondary":"bottom-sheet__background-secondary_1w9iq","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1w9iq","background-tertiary":"bottom-sheet__background-tertiary_1w9iq","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1w9iq","background-quaternary":"bottom-sheet__background-quaternary_1w9iq","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1w9iq","background-specialbg-component":"bottom-sheet__background-specialbg-component_1w9iq","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1w9iq","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1w9iq","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1w9iq","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1w9iq","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1w9iq","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1w9iq","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1w9iq","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1w9iq"};
 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, virtualKeyboard = false, }, ref) => {
+const adjustContainerHeightDefault = (value) => value;
+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, adjustContainerHeight = adjustContainerHeightDefault, 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;
+    let fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
+    fullHeight = adjustContainerHeight(fullHeight);
     const initialIndexRef = useRef(initialActiveAreaIndex);
@@ -31,8 +33,14 @@ const magneticAreas = useMemo(() => {
         }
-        const iOSViewHeight = isClient()
-            ? document?.documentElement?.clientHeight || window?.innerHeight
-            : 0;
+        let iOSViewHeight = 0;
+        if (isClient()) {
+            if (document?.documentElement?.clientHeight) {
+                iOSViewHeight = adjustContainerHeight(document.documentElement.clientHeight);
+            }
+            else {
+                iOSViewHeight = window?.innerHeight;
+            }
+        }
         const viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard, adjustContainerHeight]);
     const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
@@ -39,0 +47,0 @@ const [sheetOffset, setSheetOffset] = useState(0);

modern/components/footer/Component.js

@@ -5,3 +5,3 @@ import React, { useContext, useEffect } from 'react';
 
-const styles = {"footer":"bottom-sheet__footer_gws6o","sticky":"bottom-sheet__sticky_gws6o","highlighted":"bottom-sheet__highlighted_gws6o","background-accent":"bottom-sheet__background-accent_gws6o","background-info":"bottom-sheet__background-info_gws6o","background-attention-muted":"bottom-sheet__background-attention-muted_gws6o","background-positive-muted":"bottom-sheet__background-positive-muted_gws6o","background-negative-muted":"bottom-sheet__background-negative-muted_gws6o","background-primary":"bottom-sheet__background-primary_gws6o","background-primary-inverted":"bottom-sheet__background-primary-inverted_gws6o","background-secondary":"bottom-sheet__background-secondary_gws6o","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_gws6o","background-tertiary":"bottom-sheet__background-tertiary_gws6o","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_gws6o","background-quaternary":"bottom-sheet__background-quaternary_gws6o","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_gws6o","background-specialbg-component":"bottom-sheet__background-specialbg-component_gws6o","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_gws6o","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_gws6o","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_gws6o","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_gws6o","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_gws6o","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_gws6o","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_gws6o","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_gws6o"};
+const styles = {"footer":"bottom-sheet__footer_1577p","sticky":"bottom-sheet__sticky_1577p","highlighted":"bottom-sheet__highlighted_1577p","background-accent":"bottom-sheet__background-accent_1577p","background-info":"bottom-sheet__background-info_1577p","background-attention-muted":"bottom-sheet__background-attention-muted_1577p","background-positive-muted":"bottom-sheet__background-positive-muted_1577p","background-negative-muted":"bottom-sheet__background-negative-muted_1577p","background-primary":"bottom-sheet__background-primary_1577p","background-primary-inverted":"bottom-sheet__background-primary-inverted_1577p","background-secondary":"bottom-sheet__background-secondary_1577p","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1577p","background-tertiary":"bottom-sheet__background-tertiary_1577p","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1577p","background-quaternary":"bottom-sheet__background-quaternary_1577p","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1577p","background-specialbg-component":"bottom-sheet__background-specialbg-component_1577p","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1577p","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1577p","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1577p","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1577p","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1577p","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1577p","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1577p","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1577p"};
 require('./index.css')
@@ -8,0 +8,0 @@

modern/components/header/Component.js

@@ -6,3 +6,3 @@ import React, { useContext, useEffect } from 'react';
 
-const styles = {"headerWrapper":"bottom-sheet__headerWrapper_1ejwk","hasContent":"bottom-sheet__hasContent_1ejwk","header":"bottom-sheet__header_1ejwk","sticky":"bottom-sheet__sticky_1ejwk","highlighted":"bottom-sheet__highlighted_1ejwk","justifyEnd":"bottom-sheet__justifyEnd_1ejwk","addon":"bottom-sheet__addon_1ejwk","addonFixed":"bottom-sheet__addonFixed_1ejwk","title":"bottom-sheet__title_1ejwk","titleCenter":"bottom-sheet__titleCenter_1ejwk","titleLeft":"bottom-sheet__titleLeft_1ejwk","trimTitle":"bottom-sheet__trimTitle_1ejwk"};
+const styles = {"headerWrapper":"bottom-sheet__headerWrapper_znpxe","hasContent":"bottom-sheet__hasContent_znpxe","header":"bottom-sheet__header_znpxe","sticky":"bottom-sheet__sticky_znpxe","highlighted":"bottom-sheet__highlighted_znpxe","justifyEnd":"bottom-sheet__justifyEnd_znpxe","addon":"bottom-sheet__addon_znpxe","addonFixed":"bottom-sheet__addonFixed_znpxe","title":"bottom-sheet__title_znpxe","titleCenter":"bottom-sheet__titleCenter_znpxe","titleLeft":"bottom-sheet__titleLeft_znpxe","trimTitle":"bottom-sheet__trimTitle_znpxe"};
 require('./index.css')
@@ -9,0 +9,0 @@

modern/types.d.ts

@@ -11,2 +11,6 @@ /// <reference types="react-transition-group" />
     /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number;
+    /**
      * Контент
@@ -13,0 +17,0 @@ */

moderncssm/component.js

@@ -17,8 +17,10 @@ import React, { forwardRef, useRef, useMemo, useState, useEffect, useImperativeHandle } from 'react';
 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, virtualKeyboard = false, }, ref) => {
+const adjustContainerHeightDefault = (value) => value;
+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, adjustContainerHeight = adjustContainerHeightDefault, 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;
+    let fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
+    fullHeight = adjustContainerHeight(fullHeight);
     const initialIndexRef = useRef(initialActiveAreaIndex);
@@ -29,8 +31,14 @@ const magneticAreas = useMemo(() => {
         }
-        const iOSViewHeight = isClient()
-            ? document?.documentElement?.clientHeight || window?.innerHeight
-            : 0;
+        let iOSViewHeight = 0;
+        if (isClient()) {
+            if (document?.documentElement?.clientHeight) {
+                iOSViewHeight = adjustContainerHeight(document.documentElement.clientHeight);
+            }
+            else {
+                iOSViewHeight = window?.innerHeight;
+            }
+        }
         const viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard, adjustContainerHeight]);
     const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
@@ -37,0 +45,0 @@ const [sheetOffset, setSheetOffset] = useState(0);

moderncssm/types.d.ts

@@ -11,2 +11,6 @@ /// <reference types="react-transition-group" />
     /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number;
+    /**
      * Контент
@@ -13,0 +17,0 @@ */

package.json

 {
     "name": "@alfalab/core-components-bottom-sheet",
-    "version": "6.17.17",
+    "version": "6.18.0",
     "description": "Bottom sheet mobile component",
@@ -30,4 +30,4 @@ "keywords": [],
     },
-    "themesVersion": "13.7.0",
+    "themesVersion": "13.7.1",
     "varsVersion": "9.18.0"
 }

src/types.ts

@@ -14,2 +14,6 @@ import type { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
     /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number
+    /**
      * Контент
@@ -16,0 +20,0 @@ */

types.d.ts

@@ -11,2 +11,6 @@ /// <reference types="react-transition-group" />
     /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number;
+    /**
      * Контент
@@ -13,0 +17,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

523542

increased by0.74%

Lines of code

8416

increased by0.86%

No dependency changes