@alfalab/core-components 46.0.0-beta.1 → 46.0.0-beta.3

package/base-modal/Component.js

@@ -11,6 +11,8 @@ var coreComponentsBackdrop = require('../backdrop');
 var coreComponentsPortal = require('../portal');
 var coreComponentsShared = require('../shared');
 var coreComponentsStack = require('../stack');
+var stackContext = require('@alfalab/stack-context');
+var helpers_lockScroll = require('./helpers/lockScroll.js');
 var utils = require('./utils.js');
 require('./matches-polyfill.js');
 
@@ -21,7 +23,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"base-modal__component_13am9","wrapper":"base-modal__wrapper_13am9","content":"base-modal__content_13am9","hidden":"base-modal__hidden_13am9","backdrop":"base-modal__backdrop_13am9","appear":"base-modal__appear_13am9","enter":"base-modal__enter_13am9","appearActive":"base-modal__appearActive_13am9","enterActive":"base-modal__enterActive_13am9","exit":"base-modal__exit_13am9","exitActive":"base-modal__exitActive_13am9","exitDone":"base-modal__exitDone_13am9"};
+var styles = {"component":"base-modal__component_pk9vg","wrapper":"base-modal__wrapper_pk9vg","content":"base-modal__content_pk9vg","hidden":"base-modal__hidden_pk9vg","backdrop":"base-modal__backdrop_pk9vg","appear":"base-modal__appear_pk9vg","enter":"base-modal__enter_pk9vg","appearActive":"base-modal__appearActive_pk9vg","enterActive":"base-modal__enterActive_pk9vg","exit":"base-modal__exit_pk9vg","exitActive":"base-modal__exitActive_pk9vg","exitDone":"base-modal__exitDone_pk9vg"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -41,14 +43,14 @@ var BaseModalContext = React__default.default.createContext({
     onClose: function () { return null; },
 });
 var BaseModal = React.forwardRef(function (_a, ref) {
-    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? coreComponentsStack.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
-    var _q = React.useState(null), exited = _q[0], setExited = _q[1];
-    var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
-    var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
-    var _t = React.useState(false), hasFooter = _t[0], setHasFooter = _t[1];
-    var _u = React.useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
-    var _v = React.useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
-    var _w = React.useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
+    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackContext.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p, _q = _a.iOSLock, iOSLock = _q === void 0 ? false : _q;
+    var _r = React.useState(null), exited = _r[0], setExited = _r[1];
+    var _s = React.useState(false), hasScroll = _s[0], setHasScroll = _s[1];
+    var _t = React.useState(false), hasHeader = _t[0], setHasHeader = _t[1];
+    var _u = React.useState(false), hasFooter = _u[0], setHasFooter = _u[1];
+    var _v = React.useState(false), headerHighlighted = _v[0], setHeaderHighlighted = _v[1];
+    var _w = React.useState(false), footerHighlighted = _w[0], setFooterHighlighted = _w[1];
+    var _x = React.useState(0), headerOffset = _x[0], setHeaderOffset = _x[1];
     var componentNodeRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -100,6 +102,9 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         }
     }, [hasFooter, hasHeader, headerOffset]);
     var handleClose = React.useCallback(function (event, reason) {
+        if (iOSLock && coreComponentsShared.os.isIOS()) {
+            helpers_lockScroll.unlockScroll();
+        }
         if (onClose) {
             onClose(event, reason);
         }
@@ -110,7 +115,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             onEscapeKeyDown(event);
         }
         return null;
-    }, [onBackdropClick, onClose, onEscapeKeyDown]);
+    }, [onBackdropClick, onClose, onEscapeKeyDown, iOSLock]);
     var handleBackdropMouseDown = function (event) {
         var _a;
         var clickedOnScrollbar = false;
@@ -185,7 +190,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         if (open && isExited) {
             if (!disableBlockingScroll) {
                 var el_1 = getContainer();
-                utils.handleContainer(el_1);
+                var shouldIOSLock = iOSLock && coreComponentsShared.os.isIOS();
+                utils.handleContainer(el_1, shouldIOSLock);
+                if (shouldIOSLock) {
+                    helpers_lockScroll.syncHeight();
+                    helpers_lockScroll.lockScroll();
+                }
                 restoreContainerStylesRef.current = function () {
                     restoreContainerStylesRef.current = null;
                     utils.restoreContainerStyles(el_1);
@@ -193,7 +203,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             }
             setExited(false);
         }
-    }, [getContainer, open, disableBlockingScroll, isExited]);
+    }, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
     React.useEffect(function () {
         var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
         resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
@@ -206,6 +216,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             }
         };
     }, []);
+    React.useEffect(function () {
+        var _a;
+        if (disableAutoFocus || !open)
+            return;
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [open, disableAutoFocus]);
     var contextValue = React.useMemo(function () { return ({
         parentRef: wrapperRef,
         componentRef: componentNodeRef,
@@ -234,7 +250,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
         var _a;
         return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
-            React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+            React__default.default.createElement(FocusLock__default.default, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
                 Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
                         zIndex: computedZIndex,
                     } }))),
@@ -244,9 +260,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
                         ref,
                         wrapperRef,
                         wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
-                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
-                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                    tabIndex: 0, "data-test-id": dataTestId, style: {
+                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
                         zIndex: computedZIndex,
                     } }),
                     React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/base-modal/cssm/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from 'react';
-import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
+import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BackdropProps } from "../../backdrop";
 import { PortalProps } from "../../portal";
@@ -13,7 +13,7 @@ type BaseModalProps = {
     /**
      * Компонент бэкдропа
      */
-    Backdrop?: FC<BackdropProps>;
+    Backdrop?: ComponentType<BackdropProps>;
     /**
      * Свойства для Бэкдропа
      */
@@ -134,6 +134,10 @@ type BaseModalProps = {
      * Реф, который должен быть установлен компонентной области
      */
     componentRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
 };
 type BaseModalContext = {
     parentRef: React.RefObject<HTMLDivElement>;

package/base-modal/cssm/Component.js

@@ -11,6 +11,8 @@ var coreComponentsBackdrop = require('../../backdrop/cssm');
 var coreComponentsPortal = require('../../portal/cssm');
 var coreComponentsShared = require('../../shared/cssm');
 var coreComponentsStack = require('../../stack/cssm');
+var stackContext = require('@alfalab/stack-context');
+var helpers_lockScroll = require('./helpers/lockScroll.js');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
 require('./matches-polyfill.js');
@@ -40,14 +42,14 @@ var BaseModalContext = React__default.default.createContext({
     onClose: function () { return null; },
 });
 var BaseModal = React.forwardRef(function (_a, ref) {
-    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? coreComponentsStack.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
-    var _q = React.useState(null), exited = _q[0], setExited = _q[1];
-    var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
-    var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
-    var _t = React.useState(false), hasFooter = _t[0], setHasFooter = _t[1];
-    var _u = React.useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
-    var _v = React.useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
-    var _w = React.useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
+    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackContext.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p, _q = _a.iOSLock, iOSLock = _q === void 0 ? false : _q;
+    var _r = React.useState(null), exited = _r[0], setExited = _r[1];
+    var _s = React.useState(false), hasScroll = _s[0], setHasScroll = _s[1];
+    var _t = React.useState(false), hasHeader = _t[0], setHasHeader = _t[1];
+    var _u = React.useState(false), hasFooter = _u[0], setHasFooter = _u[1];
+    var _v = React.useState(false), headerHighlighted = _v[0], setHeaderHighlighted = _v[1];
+    var _w = React.useState(false), footerHighlighted = _w[0], setFooterHighlighted = _w[1];
+    var _x = React.useState(0), headerOffset = _x[0], setHeaderOffset = _x[1];
     var componentNodeRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -99,6 +101,9 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         }
     }, [hasFooter, hasHeader, headerOffset]);
     var handleClose = React.useCallback(function (event, reason) {
+        if (iOSLock && coreComponentsShared.os.isIOS()) {
+            helpers_lockScroll.unlockScroll();
+        }
         if (onClose) {
             onClose(event, reason);
         }
@@ -109,7 +114,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             onEscapeKeyDown(event);
         }
         return null;
-    }, [onBackdropClick, onClose, onEscapeKeyDown]);
+    }, [onBackdropClick, onClose, onEscapeKeyDown, iOSLock]);
     var handleBackdropMouseDown = function (event) {
         var _a;
         var clickedOnScrollbar = false;
@@ -184,7 +189,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         if (open && isExited) {
             if (!disableBlockingScroll) {
                 var el_1 = getContainer();
-                utils.handleContainer(el_1);
+                var shouldIOSLock = iOSLock && coreComponentsShared.os.isIOS();
+                utils.handleContainer(el_1, shouldIOSLock);
+                if (shouldIOSLock) {
+                    helpers_lockScroll.syncHeight();
+                    helpers_lockScroll.lockScroll();
+                }
                 restoreContainerStylesRef.current = function () {
                     restoreContainerStylesRef.current = null;
                     utils.restoreContainerStyles(el_1);
@@ -192,7 +202,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             }
             setExited(false);
         }
-    }, [getContainer, open, disableBlockingScroll, isExited]);
+    }, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
     React.useEffect(function () {
         var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
         resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
@@ -205,6 +215,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             }
         };
     }, []);
+    React.useEffect(function () {
+        var _a;
+        if (disableAutoFocus || !open)
+            return;
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [open, disableAutoFocus]);
     var contextValue = React.useMemo(function () { return ({
         parentRef: wrapperRef,
         componentRef: componentNodeRef,
@@ -233,7 +249,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
         var _a;
         return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
-            React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+            React__default.default.createElement(FocusLock__default.default, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
                 Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
                         zIndex: computedZIndex,
                     } }))),
@@ -243,9 +259,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
                         ref,
                         wrapperRef,
                         wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
-                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
-                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                    tabIndex: 0, "data-test-id": dataTestId, style: {
+                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
                         zIndex: computedZIndex,
                     } }),
                     React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/base-modal/cssm/helpers/lockScroll.d.ts

@@ -0,0 +1,4 @@
+declare const lockScroll: () => void;
+declare const unlockScroll: () => void;
+declare const syncHeight: () => void;
+export { lockScroll, unlockScroll, syncHeight };

package/base-modal/cssm/helpers/lockScroll.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var scrollY;
+var lockScroll = function () {
+    scrollY = window.scrollY;
+    document.body.classList.add('is-locked');
+};
+var unlockScroll = function () {
+    document.body.classList.remove('is-locked');
+    window.scrollTo(0, scrollY);
+};
+var syncHeight = function () {
+    document.body.style.setProperty('--window-inner-scrollY', "".concat(window.scrollY, "px"));
+};
+
+exports.lockScroll = lockScroll;
+exports.syncHeight = syncHeight;
+exports.unlockScroll = unlockScroll;

package/base-modal/cssm/index.module.css

@@ -14,6 +14,12 @@
 } :root {
 } :root {
 } :root {
+} :root {
+    --window-inner-scrollY: 10px; /* fallback value to prevent ci error */
+} body:global(.is-locked) {
+    margin-top: calc(var(--window-inner-scrollY) * -1);
+    position: fixed;
+    overflow: hidden;
 } .component {
     position: relative;
     box-sizing: border-box;

package/base-modal/cssm/utils.d.ts

@@ -2,5 +2,5 @@ declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
 declare const restoreContainerStyles: (container: HTMLElement) => void;
-declare const handleContainer: (container?: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement, shouldIOSLock?: boolean) => void;
 export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/cssm/utils.js

@@ -41,7 +41,8 @@ var restoreContainerStyles = function (container) {
         });
     }
 };
-var handleContainer = function (container) {
+var handleContainer = function (container, shouldIOSLock) {
+    if (shouldIOSLock === void 0) { shouldIOSLock = false; }
     if (!container)
         return;
     var modalRestoreStyles = coreComponentsGlobalStore.getModalStore().getRestoreStyles();
@@ -79,7 +80,9 @@ var handleContainer = function (container) {
             el: scrollContainer,
         });
     }
-    scrollContainer.style.overflow = 'hidden';
+    if (!shouldIOSLock) {
+        scrollContainer.style.overflow = 'hidden';
+    }
     modalRestoreStyles.push({
         container: container,
         modals: 1,

package/base-modal/esm/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from 'react';
-import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
+import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BackdropProps } from "../../backdrop";
 import { PortalProps } from "../../portal";
@@ -13,7 +13,7 @@ type BaseModalProps = {
     /**
      * Компонент бэкдропа
      */
-    Backdrop?: FC<BackdropProps>;
+    Backdrop?: ComponentType<BackdropProps>;
     /**
      * Свойства для Бэкдропа
      */
@@ -134,6 +134,10 @@ type BaseModalProps = {
      * Реф, который должен быть установлен компонентной области
      */
     componentRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
 };
 type BaseModalContext = {
     parentRef: React.RefObject<HTMLDivElement>;

package/base-modal/esm/Component.js

@@ -7,13 +7,15 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { Backdrop } from '../../backdrop/esm';
 import { Portal } from '../../portal/esm';
-import { browser } from '../../shared/esm';
-import { stackingOrder, Stack } from '../../stack/esm';
+import { os, browser } from '../../shared/esm';
+import { Stack } from '../../stack/esm';
+import { stackingOrder } from '@alfalab/stack-context';
+import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
 import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
 import './matches-polyfill.js';
 import '../../global-store/esm';
 
-var styles = {"component":"base-modal__component_13am9","wrapper":"base-modal__wrapper_13am9","content":"base-modal__content_13am9","hidden":"base-modal__hidden_13am9","backdrop":"base-modal__backdrop_13am9","appear":"base-modal__appear_13am9","enter":"base-modal__enter_13am9","appearActive":"base-modal__appearActive_13am9","enterActive":"base-modal__enterActive_13am9","exit":"base-modal__exit_13am9","exitActive":"base-modal__exitActive_13am9","exitDone":"base-modal__exitDone_13am9"};
+var styles = {"component":"base-modal__component_pk9vg","wrapper":"base-modal__wrapper_pk9vg","content":"base-modal__content_pk9vg","hidden":"base-modal__hidden_pk9vg","backdrop":"base-modal__backdrop_pk9vg","appear":"base-modal__appear_pk9vg","enter":"base-modal__enter_pk9vg","appearActive":"base-modal__appearActive_pk9vg","enterActive":"base-modal__enterActive_pk9vg","exit":"base-modal__exit_pk9vg","exitActive":"base-modal__exitActive_pk9vg","exitDone":"base-modal__exitDone_pk9vg"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -33,14 +35,14 @@ var BaseModalContext = React.createContext({
     onClose: function () { return null; },
 });
 var BaseModal = forwardRef(function (_a, ref) {
-    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop$1 = _c === void 0 ? Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
-    var _q = useState(null), exited = _q[0], setExited = _q[1];
-    var _r = useState(false), hasScroll = _r[0], setHasScroll = _r[1];
-    var _s = useState(false), hasHeader = _s[0], setHasHeader = _s[1];
-    var _t = useState(false), hasFooter = _t[0], setHasFooter = _t[1];
-    var _u = useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
-    var _v = useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
-    var _w = useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
+    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop$1 = _c === void 0 ? Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p, _q = _a.iOSLock, iOSLock = _q === void 0 ? false : _q;
+    var _r = useState(null), exited = _r[0], setExited = _r[1];
+    var _s = useState(false), hasScroll = _s[0], setHasScroll = _s[1];
+    var _t = useState(false), hasHeader = _t[0], setHasHeader = _t[1];
+    var _u = useState(false), hasFooter = _u[0], setHasFooter = _u[1];
+    var _v = useState(false), headerHighlighted = _v[0], setHeaderHighlighted = _v[1];
+    var _w = useState(false), footerHighlighted = _w[0], setFooterHighlighted = _w[1];
+    var _x = useState(0), headerOffset = _x[0], setHeaderOffset = _x[1];
     var componentNodeRef = useRef(null);
     var wrapperRef = useRef(null);
     var scrollableNodeRef = useRef(null);
@@ -92,6 +94,9 @@ var BaseModal = forwardRef(function (_a, ref) {
         }
     }, [hasFooter, hasHeader, headerOffset]);
     var handleClose = useCallback(function (event, reason) {
+        if (iOSLock && os.isIOS()) {
+            unlockScroll();
+        }
         if (onClose) {
             onClose(event, reason);
         }
@@ -102,7 +107,7 @@ var BaseModal = forwardRef(function (_a, ref) {
             onEscapeKeyDown(event);
         }
         return null;
-    }, [onBackdropClick, onClose, onEscapeKeyDown]);
+    }, [onBackdropClick, onClose, onEscapeKeyDown, iOSLock]);
     var handleBackdropMouseDown = function (event) {
         var _a;
         var clickedOnScrollbar = false;
@@ -177,7 +182,12 @@ var BaseModal = forwardRef(function (_a, ref) {
         if (open && isExited) {
             if (!disableBlockingScroll) {
                 var el_1 = getContainer();
-                handleContainer(el_1);
+                var shouldIOSLock = iOSLock && os.isIOS();
+                handleContainer(el_1, shouldIOSLock);
+                if (shouldIOSLock) {
+                    syncHeight();
+                    lockScroll();
+                }
                 restoreContainerStylesRef.current = function () {
                     restoreContainerStylesRef.current = null;
                     restoreContainerStyles(el_1);
@@ -185,7 +195,7 @@ var BaseModal = forwardRef(function (_a, ref) {
             }
             setExited(false);
         }
-    }, [getContainer, open, disableBlockingScroll, isExited]);
+    }, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
     useEffect(function () {
         var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
         resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
@@ -198,6 +208,12 @@ var BaseModal = forwardRef(function (_a, ref) {
             }
         };
     }, []);
+    useEffect(function () {
+        var _a;
+        if (disableAutoFocus || !open)
+            return;
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [open, disableAutoFocus]);
     var contextValue = useMemo(function () { return ({
         parentRef: wrapperRef,
         componentRef: componentNodeRef,
@@ -226,7 +242,7 @@ var BaseModal = forwardRef(function (_a, ref) {
     var renderContent = function () { return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) {
         var _a;
         return (React.createElement(BaseModalContext.Provider, { value: contextValue },
-            React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+            React.createElement(FocusLock, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
                 Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
                         zIndex: computedZIndex,
                     } }))),
@@ -236,9 +252,7 @@ var BaseModal = forwardRef(function (_a, ref) {
                         ref,
                         wrapperRef,
                         wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
-                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
-                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                    tabIndex: 0, "data-test-id": dataTestId, style: {
+                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
                         zIndex: computedZIndex,
                     } }),
                     React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/base-modal/esm/helpers/lockScroll.d.ts

@@ -0,0 +1,4 @@
+declare const lockScroll: () => void;
+declare const unlockScroll: () => void;
+declare const syncHeight: () => void;
+export { lockScroll, unlockScroll, syncHeight };

package/base-modal/esm/helpers/lockScroll.js

@@ -0,0 +1,14 @@
+var scrollY;
+var lockScroll = function () {
+    scrollY = window.scrollY;
+    document.body.classList.add('is-locked');
+};
+var unlockScroll = function () {
+    document.body.classList.remove('is-locked');
+    window.scrollTo(0, scrollY);
+};
+var syncHeight = function () {
+    document.body.style.setProperty('--window-inner-scrollY', "".concat(window.scrollY, "px"));
+};
+
+export { lockScroll, syncHeight, unlockScroll };

package/base-modal/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1npo2 */
+/* hash: 11mvx */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,19 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_13am9 {
+} :root {
+    --window-inner-scrollY: 10px; /* fallback value to prevent ci error */
+} body.is-locked {
+    margin-top: calc(var(--window-inner-scrollY) * -1);
+    position: fixed;
+    overflow: hidden;
+} .base-modal__component_pk9vg {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-modal-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_13am9 {
+} .base-modal__wrapper_pk9vg {
     position: fixed;
     top: 0;
     left: 0;
@@ -34,27 +40,27 @@
     align-items: center;
     outline: 0;
     overscroll-behavior: none;
-} .base-modal__content_13am9 {
+} .base-modal__content_pk9vg {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_13am9 {
+} .base-modal__hidden_pk9vg {
     display: none;
-} .base-modal__backdrop_13am9 {
+} .base-modal__backdrop_pk9vg {
     z-index: 0;
-} .base-modal__appear_13am9,
-.base-modal__enter_13am9 {
+} .base-modal__appear_pk9vg,
+.base-modal__enter_pk9vg {
     opacity: 0;
-} .base-modal__appearActive_13am9,
-.base-modal__enterActive_13am9 {
+} .base-modal__appearActive_pk9vg,
+.base-modal__enterActive_pk9vg {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_13am9 {
+} .base-modal__exit_pk9vg {
     opacity: 1;
-} .base-modal__exitActive_13am9,
-.base-modal__exitDone_13am9 {
+} .base-modal__exitActive_pk9vg,
+.base-modal__exitDone_pk9vg {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/esm/index.js

@@ -11,5 +11,7 @@ import '../../backdrop/esm';
 import '../../portal/esm';
 import '../../shared/esm';
 import '../../stack/esm';
+import '@alfalab/stack-context';
+import './helpers/lockScroll.js';
 import './matches-polyfill.js';
 import '../../global-store/esm';

package/base-modal/esm/utils.d.ts

@@ -2,5 +2,5 @@ declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
 declare const restoreContainerStyles: (container: HTMLElement) => void;
-declare const handleContainer: (container?: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement, shouldIOSLock?: boolean) => void;
 export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/esm/utils.js

@@ -39,7 +39,8 @@ var restoreContainerStyles = function (container) {
         });
     }
 };
-var handleContainer = function (container) {
+var handleContainer = function (container, shouldIOSLock) {
+    if (shouldIOSLock === void 0) { shouldIOSLock = false; }
     if (!container)
         return;
     var modalRestoreStyles = getModalStore().getRestoreStyles();
@@ -77,7 +78,9 @@ var handleContainer = function (container) {
             el: scrollContainer,
         });
     }
-    scrollContainer.style.overflow = 'hidden';
+    if (!shouldIOSLock) {
+        scrollContainer.style.overflow = 'hidden';
+    }
     modalRestoreStyles.push({
         container: container,
         modals: 1,

package/base-modal/helpers/lockScroll.d.ts

@@ -0,0 +1,4 @@
+declare const lockScroll: () => void;
+declare const unlockScroll: () => void;
+declare const syncHeight: () => void;
+export { lockScroll, unlockScroll, syncHeight };

package/base-modal/helpers/lockScroll.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var scrollY;
+var lockScroll = function () {
+    scrollY = window.scrollY;
+    document.body.classList.add('is-locked');
+};
+var unlockScroll = function () {
+    document.body.classList.remove('is-locked');
+    window.scrollTo(0, scrollY);
+};
+var syncHeight = function () {
+    document.body.style.setProperty('--window-inner-scrollY', "".concat(window.scrollY, "px"));
+};
+
+exports.lockScroll = lockScroll;
+exports.syncHeight = syncHeight;
+exports.unlockScroll = unlockScroll;