@alfalab/core-components-base-modal 5.7.2 → 5.7.4

package/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 "@alfalab/core-components-backdrop";
 import { PortalProps } from "@alfalab/core-components-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/Component.js

@@ -13,9 +13,9 @@ var coreComponentsBackdrop = require('@alfalab/core-components-backdrop');
 var coreComponentsPortal = require('@alfalab/core-components-portal');
 var coreComponentsShared = require('@alfalab/core-components-shared');
 var coreComponentsStack = require('@alfalab/core-components-stack');
+var helpers_lockScroll = require('./helpers/lockScroll.js');
 var utils = require('./utils.js');
 require('./matches-polyfill.js');
-require('@alfalab/core-components-global-store');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -24,7 +24,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_1b68o","wrapper":"base-modal__wrapper_1b68o","content":"base-modal__content_1b68o","hidden":"base-modal__hidden_1b68o","backdrop":"base-modal__backdrop_1b68o","appear":"base-modal__appear_1b68o","enter":"base-modal__enter_1b68o","appearActive":"base-modal__appearActive_1b68o","enterActive":"base-modal__enterActive_1b68o","exit":"base-modal__exit_1b68o","exitActive":"base-modal__exitActive_1b68o","exitDone":"base-modal__exitDone_1b68o"};
+var styles = {"component":"base-modal__component_1apcq","wrapper":"base-modal__wrapper_1apcq","content":"base-modal__content_1apcq","hidden":"base-modal__hidden_1apcq","backdrop":"base-modal__backdrop_1apcq","appear":"base-modal__appear_1apcq","enter":"base-modal__enter_1apcq","appearActive":"base-modal__appearActive_1apcq","enterActive":"base-modal__enterActive_1apcq","exit":"base-modal__exit_1apcq","exitActive":"base-modal__exitActive_1apcq","exitDone":"base-modal__exitDone_1apcq"};
 require('./index.css')
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -44,14 +44,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 ? coreComponentsStack.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);
@@ -103,6 +103,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);
         }
@@ -113,7 +116,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;
@@ -188,7 +191,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);
@@ -196,7 +204,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);
@@ -209,6 +217,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,
@@ -237,7 +251,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,
                     } }))),
@@ -247,9 +261,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/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 "@alfalab/core-components-backdrop";
 import { PortalProps } from "@alfalab/core-components-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/cssm/Component.js

@@ -13,10 +13,10 @@ var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/cssm');
 var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
 var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
+var helpers_lockScroll = require('./helpers/lockScroll.js');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
 require('./matches-polyfill.js');
-require('@alfalab/core-components-global-store/cssm');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -43,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 ? coreComponentsStack.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);
@@ -102,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);
         }
@@ -112,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;
@@ -187,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);
@@ -195,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);
@@ -208,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,
@@ -236,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__default.default.backdrop), open: open, style: {
                         zIndex: computedZIndex,
                     } }))),
@@ -246,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__default.default, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/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/cssm/helpers/lockScroll.js

@@ -0,0 +1,20 @@
+'use strict';
+
+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/cssm/index.js

@@ -4,20 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
 var utils = require('./utils.js');
-require('tslib');
-require('react');
-require('react-focus-lock');
-require('react-merge-refs');
-require('react-transition-group');
-require('@juggle/resize-observer');
-require('classnames');
-require('@alfalab/core-components-backdrop/cssm');
-require('@alfalab/core-components-portal/cssm');
-require('@alfalab/core-components-shared/cssm');
-require('@alfalab/core-components-stack/cssm');
-require('./index.module.css');
-require('./matches-polyfill.js');
-require('@alfalab/core-components-global-store/cssm');
 
 
 

package/cssm/index.module.css

@@ -1,4 +1,4 @@
-:root {
+: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 */
 } :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 */
@@ -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/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/cssm/utils.js

@@ -43,7 +43,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();
@@ -81,7 +82,9 @@ var handleContainer = function (container) {
             el: scrollContainer,
         });
     }
-    scrollContainer.style.overflow = 'hidden';
+    if (!shouldIOSLock) {
+        scrollContainer.style.overflow = 'hidden';
+    }
     modalRestoreStyles.push({
         container: container,
         modals: 1,

package/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 "@alfalab/core-components-backdrop";
 import { PortalProps } from "@alfalab/core-components-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/esm/Component.js

@@ -7,13 +7,13 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { Backdrop } from '@alfalab/core-components-backdrop/esm';
 import { Portal } from '@alfalab/core-components-portal/esm';
-import { browser } from '@alfalab/core-components-shared/esm';
+import { os, browser } from '@alfalab/core-components-shared/esm';
 import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
+import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
 import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
 import './matches-polyfill.js';
-import '@alfalab/core-components-global-store/esm';
 
-var styles = {"component":"base-modal__component_1b68o","wrapper":"base-modal__wrapper_1b68o","content":"base-modal__content_1b68o","hidden":"base-modal__hidden_1b68o","backdrop":"base-modal__backdrop_1b68o","appear":"base-modal__appear_1b68o","enter":"base-modal__enter_1b68o","appearActive":"base-modal__appearActive_1b68o","enterActive":"base-modal__enterActive_1b68o","exit":"base-modal__exit_1b68o","exitActive":"base-modal__exitActive_1b68o","exitDone":"base-modal__exitDone_1b68o"};
+var styles = {"component":"base-modal__component_1apcq","wrapper":"base-modal__wrapper_1apcq","content":"base-modal__content_1apcq","hidden":"base-modal__hidden_1apcq","backdrop":"base-modal__backdrop_1apcq","appear":"base-modal__appear_1apcq","enter":"base-modal__enter_1apcq","appearActive":"base-modal__appearActive_1apcq","enterActive":"base-modal__enterActive_1apcq","exit":"base-modal__exit_1apcq","exitActive":"base-modal__exitActive_1apcq","exitDone":"base-modal__exitDone_1apcq"};
 require('./index.css')
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -33,14 +33,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 +92,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 +105,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 +180,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 +193,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 +206,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 +240,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 +250,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/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/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 };