diff --git a/packages/base-modal/src/Component.test.tsx b/packages/base-modal/src/Component.test.tsx index 30aee4ce6c..9de9cef873 100644 --- a/packages/base-modal/src/Component.test.tsx +++ b/packages/base-modal/src/Component.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, cleanup, fireEvent, RenderResult, waitFor } from '@testing-library/react'; +import { render, cleanup, fireEvent, RenderResult } from '@testing-library/react'; import { BaseModal, BaseModalProps } from './Component'; @@ -230,7 +230,7 @@ describe('BaseModal', () => { }); describe('two modal at the same time', () => { - it('should open and close with legacy scroll lock', async () => { + it('should not set overflow hidden by default', () => { const TestCase = (props?: Partial) => { const defaultProps = { open: false, ...props }; return ( @@ -248,11 +248,9 @@ describe('BaseModal', () => { const { rerender } = render(); expect(document.body.style.overflow).toBe(''); rerender(); - expect(document.body.style.overflow).toBe('hidden'); + expect(document.body.style.overflow).toBe(''); rerender(); - await waitFor(() => { - expect(document.body.style.overflow).toBe(''); - }); + expect(document.body.style.overflow).toBe(''); }); it('should not set overflow hidden when scrollLock is true', async () => { @@ -305,48 +303,19 @@ describe('BaseModal', () => { expect(container2).toContainElement(getByTestId('BaseModal')); }); - describe('Body styles restore (legacy scrollLock={false})', () => { - it('should restore styles after close', async () => { - const { rerender } = render(); - expect(document.body.style.overflow).toBe(''); - - rerender(); - expect(document.body.style.overflow).toBe('hidden'); - - rerender(); - await waitFor(() => { + describe('Body styles with scrollLock', () => { + it.each([false, true])( + 'should not set overflow hidden directly when scrollLock=%s', + (scrollLock) => { + const { rerender } = render(); expect(document.body.style.overflow).toBe(''); - }); - }); - - it('should restore styles after unmount', async () => { - const { rerender, unmount } = render(); - expect(document.body.style.overflow).toBe(''); - - rerender(); - expect(document.body.style.overflow).toBe('hidden'); - unmount(); - - await waitFor(() => { + rerender(); expect(document.body.style.overflow).toBe(''); - }); - }); - }); - - describe('Body styles with scrollLock={true}', () => { - it('should not set overflow hidden directly - react-remove-scroll handles scroll lock', async () => { - const { rerender } = render(); - expect(document.body.style.overflow).toBe(''); - rerender(); - // react-remove-scroll не устанавливает overflow: hidden напрямую на body - expect(document.body.style.overflow).toBe(''); - - rerender(); - await waitFor(() => { + rerender(); expect(document.body.style.overflow).toBe(''); - }); - }); + }, + ); }); }); diff --git a/packages/base-modal/src/Component.tsx b/packages/base-modal/src/Component.tsx index 25276e0108..137c28a30e 100644 --- a/packages/base-modal/src/Component.tsx +++ b/packages/base-modal/src/Component.tsx @@ -24,17 +24,14 @@ import cn from 'classnames'; import { Backdrop as DefaultBackdrop, type BackdropProps } from '@alfalab/core-components-backdrop'; import { Portal, type PortalProps } from '@alfalab/core-components-portal'; -import { getScrollbarSize, isIOS } from '@alfalab/core-components-shared'; +import { getScrollbarSize } from '@alfalab/core-components-shared'; import { Stack } from '@alfalab/core-components-stack'; import { stackingOrder } from '@alfalab/core-components-stack-context'; -import { lockScroll, syncHeight, unlockScroll } from './helpers/lockScroll'; import { - handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, - restoreContainerStyles, } from './utils'; import styles from './index.module.css'; @@ -92,13 +89,6 @@ export type BaseModalProps = { */ disableBackdropClick?: boolean; - /** - * Отключает блокировку скролла при открытии модального окна - * @default false - * @deprecated Используйте `scrollLock={true}`. - */ - disableBlockingScroll?: boolean; - /** * Управляет блокировкой скролла/overscroll фона при открытой модалке. * @default false @@ -215,12 +205,6 @@ export type BaseModalProps = { */ contentElementRef?: MutableRefObject; - /** - * Блокирует скролл когда модальное окно открыто. Работает только на iOS. - * @deprecated Используйте `scrollLock={true}`. - */ - iOSLock?: boolean; - /** * Хэндлер события прокрутки колесиком */ @@ -279,7 +263,6 @@ export const BaseModal = forwardRef( disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, - disableBlockingScroll = false, scrollLock = false, keepMounted = false, className, @@ -298,7 +281,6 @@ export const BaseModal = forwardRef( componentRef = null, contentElementRef = null, usePortal = true, - iOSLock = false, onWheel, }, ref, @@ -315,7 +297,6 @@ export const BaseModal = forwardRef( const wrapperRef = useRef(null); const scrollableNodeRef = useRef(null); const contentNodeRef = useRef(null); - const restoreContainerStylesRef = useRef void)>(null); const mouseDownTarget = useRef(); const resizeObserverRef = useRef(); @@ -331,11 +312,6 @@ export const BaseModal = forwardRef( const isExited = exited || exited === null; const shouldRender = keepMounted || open || !isExited; - const getContainer = useCallback( - () => (container ? container() : document.body) as HTMLElement, - [container], - ); - const addResizeHandle = useCallback(() => { if (!resizeObserverRef.current) return; @@ -380,10 +356,6 @@ export const BaseModal = forwardRef( const handleClose = useCallback['onClose']>( (event, reason) => { - if (!scrollLock && iOSLock && isIOS()) { - unlockScroll(); - } - if (onClose) { onClose(event, reason); } @@ -398,7 +370,7 @@ export const BaseModal = forwardRef( return null; }, - [onBackdropClick, onClose, onEscapeKeyDown, iOSLock, scrollLock], + [onBackdropClick, onClose, onEscapeKeyDown], ); const handleBackdropMouseDown = (event: MouseEvent) => { @@ -492,45 +464,15 @@ export const BaseModal = forwardRef( if (onUnmount) onUnmount(); - if (restoreContainerStylesRef.current) { - restoreContainerStylesRef.current(); - } }, [handleScroll, onUnmount, removeResizeHandle, transitionProps], ); useEffect(() => { if (open && isExited) { - /* - * При scrollLock={true} блокировка обрабатывается через react-remove-scroll, - * старая логика нужна только для обратной совместимости (deprecated пропсы) - */ - const shouldUseLegacyScrollLock = !scrollLock && !disableBlockingScroll; - - if (shouldUseLegacyScrollLock) { - const el = getContainer(); - - const shouldIOSLock = iOSLock && isIOS(); - - handleContainer(el, shouldIOSLock); - if (shouldIOSLock) { - syncHeight(); - lockScroll(); - } - - restoreContainerStylesRef.current = () => { - restoreContainerStylesRef.current = null; - restoreContainerStyles(el); - }; - } - setExited(false); } - - if (!open) { - unlockScroll(); - } - }, [getContainer, open, disableBlockingScroll, scrollLock, isExited, iOSLock]); + }, [open, isExited]); useEffect(() => { const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill; @@ -538,10 +480,6 @@ export const BaseModal = forwardRef( resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar); return () => { - if (restoreContainerStylesRef.current) { - restoreContainerStylesRef.current(); - } - if (resizeObserverRef.current) { resizeObserverRef.current.disconnect(); } diff --git a/packages/bottom-sheet/src/component.tsx b/packages/bottom-sheet/src/component.tsx index b3ed3ac463..b8718b5e9b 100644 --- a/packages/bottom-sheet/src/component.tsx +++ b/packages/bottom-sheet/src/component.tsx @@ -18,7 +18,7 @@ import { import { type HandledEvents } from 'react-swipeable/es/types'; import cn from 'classnames'; -import { BaseModal, unlockScroll } from '@alfalab/core-components-base-modal'; +import { BaseModal } from '@alfalab/core-components-base-modal'; import { fnUtils, getDataTestId, isClient, isIOS } from '@alfalab/core-components-shared'; import { Footer } from './components/footer/Component'; @@ -91,7 +91,6 @@ export const BottomSheet = forwardRef( hideScrollbar, hideHeader, disableOverlayClick, - disableBlockingScroll, scrollLock = true, disableFocusLock, children, @@ -125,7 +124,6 @@ export const BottomSheet = forwardRef( swipeableMarker, swipeableMarkerClassName, backButtonProps, - iOSLock = false, virtualKeyboard = false, colors = 'default', preventScrollOnSwipe, @@ -286,9 +284,6 @@ export const BottomSheet = forwardRef( const nextAreaIdx = getActiveAreaIndex(nextArea); if (nextArea === 0) { - if (iOSLock) { - unlockScroll(); - } onClose(); return; @@ -327,10 +322,6 @@ export const BottomSheet = forwardRef( .find((area) => area < activeArea); if (nextArea === 0) { - if (iOSLock) { - unlockScroll(); - } - onClose(); return; @@ -365,10 +356,6 @@ export const BottomSheet = forwardRef( isSecondArea && canClose && 1 - currentSheetHeight / activeArea > CLOSE_OFFSET; if (shouldCloseByOffset) { - if (iOSLock) { - unlockScroll(); - } - onClose(); return; @@ -390,10 +377,6 @@ export const BottomSheet = forwardRef( ); if (nearestArea === 0) { - if (iOSLock) { - unlockScroll(); - } - onClose(); } else { const nextOffset = lastMagneticArea - nearestArea; @@ -661,7 +644,6 @@ export const BottomSheet = forwardRef( wrapperClassName={cn(modalWrapperClassName, { [styles.disabledPointerEvents]: hideOverlay, })} - disableBlockingScroll={disableBlockingScroll} disableFocusLock={disableFocusLock} transitionProps={{ appear: true, @@ -677,7 +659,6 @@ export const BottomSheet = forwardRef( disableEscapeKeyDown={disableEscapeKeyDown} disableRestoreFocus={disableRestoreFocus} keepMounted={keepMounted} - iOSLock={iOSLock} scrollLock={scrollLock} >
void; - /** - * Блокирует скролл когда модальное окно открыто. Работает только на iOS - * @deprecated Используйте `scrollLock={true}`. - */ - iOSLock?: boolean; - /** * Учитывать высоту виртуальной клавиатуры */ diff --git a/packages/modal/src/typings.ts b/packages/modal/src/typings.ts index c94d59e230..2cc8a82c6d 100644 --- a/packages/modal/src/typings.ts +++ b/packages/modal/src/typings.ts @@ -21,10 +21,6 @@ export type ModalDesktopProps = BaseModalProps & { */ hasCloser?: boolean; - /** - * Блокирует скролл когда модальное окно открыто. Работает только на iOS. - */ - iOSLock?: boolean; }; export type ModalMobileProps = Omit; diff --git a/packages/popup-sheet/src/__snapshots__/Component.test.tsx.snap b/packages/popup-sheet/src/__snapshots__/Component.test.tsx.snap index 9544b68880..00d157997d 100644 --- a/packages/popup-sheet/src/__snapshots__/Component.test.tsx.snap +++ b/packages/popup-sheet/src/__snapshots__/Component.test.tsx.snap @@ -3,9 +3,7 @@ exports[`PopupSheet Snapshot tests should match snapshot 1`] = ` { "asFragment": [Function], - "baseElement": + "baseElement":
( margin, scrollableContainerRef: scrollableContainerRefProp, onClose, + scrollLock = false, ...restProps } = props; const componentRef = useRef(null); @@ -55,7 +56,7 @@ export const SideModal = forwardRef( componentRef={componentRef} contentElementRef={contentRef} scrollHandler='content' - disableBlockingScroll={withoutOverlay} + scrollLock={scrollLock} wrapperClassName={cn(styles.wrapper, styles.baseModalContainer, { [styles.wrapperAlignStart]: horizontalAlign === 'start', [styles.wrapperAlignEnd]: horizontalAlign === 'end', diff --git a/packages/universal-modal/src/desktop/types/props.ts b/packages/universal-modal/src/desktop/types/props.ts index 25296dd3ea..f289c0648b 100644 --- a/packages/universal-modal/src/desktop/types/props.ts +++ b/packages/universal-modal/src/desktop/types/props.ts @@ -62,6 +62,7 @@ export interface UniversalModalDesktopProps | 'onClose' | 'disableFocusLock' | 'container' + | 'scrollLock' > > { /**