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

package/esm/index.css

@@ -1,5 +1,5 @@
-/* hash: 1njhy */
-:root {
+/* hash: 4eqb1 */
+: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 */
@@ -15,13 +15,19 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_1b68o {
+} :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_1apcq {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-modal-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_1b68o {
+} .base-modal__wrapper_1apcq {
     position: fixed;
     top: 0;
     left: 0;
@@ -34,27 +40,27 @@
     align-items: center;
     outline: 0;
     overscroll-behavior: none;
-} .base-modal__content_1b68o {
+} .base-modal__content_1apcq {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_1b68o {
+} .base-modal__hidden_1apcq {
     display: none;
-} .base-modal__backdrop_1b68o {
+} .base-modal__backdrop_1apcq {
     z-index: 0;
-} .base-modal__appear_1b68o,
-.base-modal__enter_1b68o {
+} .base-modal__appear_1apcq,
+.base-modal__enter_1apcq {
     opacity: 0;
-} .base-modal__appearActive_1b68o,
-.base-modal__enterActive_1b68o {
+} .base-modal__appearActive_1apcq,
+.base-modal__enterActive_1apcq {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_1b68o {
+} .base-modal__exit_1apcq {
     opacity: 1;
-} .base-modal__exitActive_1b68o,
-.base-modal__exitDone_1b68o {
+} .base-modal__exitActive_1apcq,
+.base-modal__exitDone_1apcq {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/esm/index.js

@@ -1,15 +1,2 @@
 export { BaseModal, BaseModalContext } from './Component.js';
 export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
-import 'tslib';
-import 'react';
-import 'react-focus-lock';
-import 'react-merge-refs';
-import 'react-transition-group';
-import '@juggle/resize-observer';
-import 'classnames';
-import '@alfalab/core-components-backdrop/esm';
-import '@alfalab/core-components-portal/esm';
-import '@alfalab/core-components-shared/esm';
-import '@alfalab/core-components-stack/esm';
-import './matches-polyfill.js';
-import '@alfalab/core-components-global-store/esm';

package/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/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/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/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/index.css

@@ -1,5 +1,5 @@
-/* hash: 1njhy */
-:root {
+/* hash: 4eqb1 */
+: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 */
@@ -15,13 +15,19 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_1b68o {
+} :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_1apcq {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-modal-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_1b68o {
+} .base-modal__wrapper_1apcq {
     position: fixed;
     top: 0;
     left: 0;
@@ -34,27 +40,27 @@
     align-items: center;
     outline: 0;
     overscroll-behavior: none;
-} .base-modal__content_1b68o {
+} .base-modal__content_1apcq {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_1b68o {
+} .base-modal__hidden_1apcq {
     display: none;
-} .base-modal__backdrop_1b68o {
+} .base-modal__backdrop_1apcq {
     z-index: 0;
-} .base-modal__appear_1b68o,
-.base-modal__enter_1b68o {
+} .base-modal__appear_1apcq,
+.base-modal__enter_1apcq {
     opacity: 0;
-} .base-modal__appearActive_1b68o,
-.base-modal__enterActive_1b68o {
+} .base-modal__appearActive_1apcq,
+.base-modal__enterActive_1apcq {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_1b68o {
+} .base-modal__exit_1apcq {
     opacity: 1;
-} .base-modal__exitActive_1b68o,
-.base-modal__exitDone_1b68o {
+} .base-modal__exitActive_1apcq,
+.base-modal__exitDone_1apcq {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/index.js

@@ -4,19 +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');
-require('@alfalab/core-components-portal');
-require('@alfalab/core-components-shared');
-require('@alfalab/core-components-stack');
-require('./matches-polyfill.js');
-require('@alfalab/core-components-global-store');
 
 
 

package/modern/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/modern/Component.js

@@ -6,13 +6,13 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { Backdrop } from '@alfalab/core-components-backdrop/modern';
 import { Portal } from '@alfalab/core-components-portal/modern';
-import { browser } from '@alfalab/core-components-shared/modern';
+import { os, browser } from '@alfalab/core-components-shared/modern';
 import { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
+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/modern';
 
-const 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"};
+const 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 jsx-a11y/no-noninteractive-element-interactions */
@@ -32,7 +32,7 @@ const BaseModalContext = React.createContext({
     setHasFooter: () => null,
     onClose: () => null,
 });
-const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, }, ref) => {
+const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, iOSLock = false, }, ref) => {
     const [exited, setExited] = useState(null);
     const [hasScroll, setHasScroll] = useState(false);
     const [hasHeader, setHasHeader] = useState(false);
@@ -91,6 +91,9 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         }
     }, [hasFooter, hasHeader, headerOffset]);
     const handleClose = useCallback((event, reason) => {
+        if (iOSLock && os.isIOS()) {
+            unlockScroll();
+        }
         if (onClose) {
             onClose(event, reason);
         }
@@ -101,7 +104,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             onEscapeKeyDown(event);
         }
         return null;
-    }, [onBackdropClick, onClose, onEscapeKeyDown]);
+    }, [onBackdropClick, onClose, onEscapeKeyDown, iOSLock]);
     const handleBackdropMouseDown = (event) => {
         let clickedOnScrollbar = false;
         const clientWidth = event.target?.clientWidth;
@@ -175,7 +178,12 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         if (open && isExited) {
             if (!disableBlockingScroll) {
                 const el = getContainer();
-                handleContainer(el);
+                const shouldIOSLock = iOSLock && os.isIOS();
+                handleContainer(el, shouldIOSLock);
+                if (shouldIOSLock) {
+                    syncHeight();
+                    lockScroll();
+                }
                 restoreContainerStylesRef.current = () => {
                     restoreContainerStylesRef.current = null;
                     restoreContainerStyles(el);
@@ -183,7 +191,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             }
             setExited(false);
         }
-    }, [getContainer, open, disableBlockingScroll, isExited]);
+    }, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
     useEffect(() => {
         const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
         resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
@@ -196,6 +204,11 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             }
         };
     }, []);
+    useEffect(() => {
+        if (disableAutoFocus || !open)
+            return;
+        wrapperRef.current?.focus();
+    }, [open, disableAutoFocus]);
     const contextValue = useMemo(() => ({
         parentRef: wrapperRef,
         componentRef: componentNodeRef,
@@ -222,7 +235,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         handleClose,
     ]);
     const renderContent = () => (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (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, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
                     zIndex: computedZIndex,
                 } })),
@@ -232,9 +245,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
                     ref,
                     wrapperRef,
                     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, { appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },

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

@@ -0,0 +1,14 @@
+let scrollY;
+const lockScroll = () => {
+    scrollY = window.scrollY;
+    document.body.classList.add('is-locked');
+};
+const unlockScroll = () => {
+    document.body.classList.remove('is-locked');
+    window.scrollTo(0, scrollY);
+};
+const syncHeight = () => {
+    document.body.style.setProperty('--window-inner-scrollY', `${window.scrollY}px`);
+};
+
+export { lockScroll, syncHeight, unlockScroll };

package/modern/index.css

@@ -1,5 +1,5 @@
-/* hash: 1njhy */
-:root {
+/* hash: 4eqb1 */
+: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 */
@@ -15,13 +15,19 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_1b68o {
+} :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_1apcq {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-modal-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_1b68o {
+} .base-modal__wrapper_1apcq {
     position: fixed;
     top: 0;
     left: 0;
@@ -34,27 +40,27 @@
     align-items: center;
     outline: 0;
     overscroll-behavior: none;
-} .base-modal__content_1b68o {
+} .base-modal__content_1apcq {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_1b68o {
+} .base-modal__hidden_1apcq {
     display: none;
-} .base-modal__backdrop_1b68o {
+} .base-modal__backdrop_1apcq {
     z-index: 0;
-} .base-modal__appear_1b68o,
-.base-modal__enter_1b68o {
+} .base-modal__appear_1apcq,
+.base-modal__enter_1apcq {
     opacity: 0;
-} .base-modal__appearActive_1b68o,
-.base-modal__enterActive_1b68o {
+} .base-modal__appearActive_1apcq,
+.base-modal__enterActive_1apcq {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_1b68o {
+} .base-modal__exit_1apcq {
     opacity: 1;
-} .base-modal__exitActive_1b68o,
-.base-modal__exitDone_1b68o {
+} .base-modal__exitActive_1apcq,
+.base-modal__exitDone_1apcq {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/modern/index.js

@@ -1,14 +1,2 @@
 export { BaseModal, BaseModalContext } from './Component.js';
 export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
-import 'react';
-import 'react-focus-lock';
-import 'react-merge-refs';
-import 'react-transition-group';
-import '@juggle/resize-observer';
-import 'classnames';
-import '@alfalab/core-components-backdrop/modern';
-import '@alfalab/core-components-portal/modern';
-import '@alfalab/core-components-shared/modern';
-import '@alfalab/core-components-stack/modern';
-import './matches-polyfill.js';
-import '@alfalab/core-components-global-store/modern';

package/modern/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/modern/utils.js

@@ -36,7 +36,7 @@ const restoreContainerStyles = (container) => {
         });
     }
 };
-const handleContainer = (container) => {
+const handleContainer = (container, shouldIOSLock = false) => {
     if (!container)
         return;
     const modalRestoreStyles = getModalStore().getRestoreStyles();
@@ -74,7 +74,9 @@ const handleContainer = (container) => {
             el: scrollContainer,
         });
     }
-    scrollContainer.style.overflow = 'hidden';
+    if (!shouldIOSLock) {
+        scrollContainer.style.overflow = 'hidden';
+    }
     modalRestoreStyles.push({
         container,
         modals: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-base-modal",
-    "version": "5.7.2",
+    "version": "5.7.4",
     "description": "BaseModal component",
     "keywords": [],
     "license": "MIT",
@@ -18,7 +18,7 @@
         "@alfalab/core-components-shared": "^0.9.1",
         "@juggle/resize-observer": "^3.3.1",
         "classnames": "^2.3.1",
-        "react-focus-lock": "^2.9.3",
+        "react-focus-lock": "^2.12.1",
         "react-merge-refs": "^1.1.0",
         "react-transition-group": "^4.4.5",
         "tslib": "^2.4.0"

package/src/Component.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, {
-    FC,
+    ComponentType,
     forwardRef,
     KeyboardEvent,
     MouseEvent,
@@ -22,9 +22,10 @@ import cn from 'classnames';
 
 import { Backdrop as DefaultBackdrop, BackdropProps } from '@alfalab/core-components-backdrop';
 import { Portal, PortalProps } from '@alfalab/core-components-portal';
-import { browser } from '@alfalab/core-components-shared';
+import { browser, os } from '@alfalab/core-components-shared';
 import { Stack, stackingOrder } from '@alfalab/core-components-stack';
 
+import { lockScroll, syncHeight, unlockScroll } from './helpers/lockScroll';
 import {
     handleContainer,
     hasScrollbar,
@@ -47,7 +48,7 @@ export type BaseModalProps = {
     /**
      * Компонент бэкдропа
      */
-    Backdrop?: FC<BackdropProps>;
+    Backdrop?: ComponentType<BackdropProps>;
 
     /**
      * Свойства для Бэкдропа
@@ -201,6 +202,11 @@ export type BaseModalProps = {
      * Реф, который должен быть установлен компонентной области
      */
     componentRef?: MutableRefObject<HTMLDivElement | null>;
+
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
 };
 
 export type BaseModalContext = {
@@ -268,6 +274,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
             zIndex = stackingOrder.MODAL,
             componentRef = null,
             usePortal = true,
+            iOSLock = false,
         },
         ref,
     ) => {
@@ -348,6 +355,10 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
 
         const handleClose = useCallback<Required<BaseModalProps>['onClose']>(
             (event, reason) => {
+                if (iOSLock && os.isIOS()) {
+                    unlockScroll();
+                }
+
                 if (onClose) {
                     onClose(event, reason);
                 }
@@ -362,7 +373,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
 
                 return null;
             },
-            [onBackdropClick, onClose, onEscapeKeyDown],
+            [onBackdropClick, onClose, onEscapeKeyDown, iOSLock],
         );
 
         const handleBackdropMouseDown = (event: MouseEvent<HTMLElement>) => {
@@ -468,7 +479,13 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
                 if (!disableBlockingScroll) {
                     const el = getContainer();
 
-                    handleContainer(el);
+                    const shouldIOSLock = iOSLock && os.isIOS();
+
+                    handleContainer(el, shouldIOSLock);
+                    if (shouldIOSLock) {
+                        syncHeight();
+                        lockScroll();
+                    }
 
                     restoreContainerStylesRef.current = () => {
                         restoreContainerStylesRef.current = null;
@@ -478,7 +495,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
 
                 setExited(false);
             }
-        }, [getContainer, open, disableBlockingScroll, isExited]);
+        }, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
 
         useEffect(() => {
             const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
@@ -496,6 +513,12 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
             };
         }, []);
 
+        useEffect(() => {
+            if (disableAutoFocus || !open) return;
+
+            wrapperRef.current?.focus();
+        }, [open, disableAutoFocus]);
+
         const contextValue = useMemo<BaseModalContext>(
             () => ({
                 parentRef: wrapperRef,
@@ -530,7 +553,6 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
                 {(computedZIndex) => (
                     <BaseModalContext.Provider value={contextValue}>
                         <FocusLock
-                            autoFocus={!disableAutoFocus}
                             disabled={disableFocusLock || !open}
                             returnFocus={!disableRestoreFocus}
                         >
@@ -563,8 +585,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
                                 onKeyDown={handleKeyDown}
                                 onMouseDown={handleBackdropMouseDown}
                                 onMouseUp={handleBackdropMouseUp}
-                                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                                tabIndex={0}
+                                tabIndex={-1}
                                 data-test-id={dataTestId}
                                 style={{
                                     zIndex: computedZIndex,