@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/Modal/components/CloseButton/CloseButton.tsx

@@ -0,0 +1,55 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { IconButton } from '../../../IconButton/IconButton';
+import { Close } from '../../../Icons';
+import { useWindowIsMobile } from '../../../providers';
+import { nodeEnv } from '../../../utils/nodeEnv';
+import { useCloseModal, useForceCloseModal } from '../../hooks/useCloseModal';
+
+type Props = {
+    /**
+     * @default 'Close'
+     */
+    'aria-label'?: string;
+    /**
+     * Optional class name for the component.
+     */
+    className?: string;
+};
+
+let useCloseModalHook = useCloseModal;
+
+if (nodeEnv === 'test') {
+    useCloseModalHook = useForceCloseModal as typeof useCloseModal;
+}
+
+/**
+ * Component used in modal windows to close them.
+ *
+ * You can access this same functionality (no need for the component to be a child of `Modal`)
+ * with `useCloseModal` (subpath `modal/useCloseModal`).
+ *
+ * If you need to add a callback, you likely want to modify `handleClose` on the `Modal` component.
+ */
+export const CloseButton = ({ 'aria-label': ariaLabel = 'Close', className }: Props) => {
+    const closeModal = useCloseModalHook('close');
+    const isMobile = useWindowIsMobile();
+
+    return (
+        <IconButton
+            aria-label={ariaLabel}
+            className={cn(
+                // GENERAL
+                'absolute right-sm top-sm z-[2] cursor-pointer',
+                // MOBILE
+                'xsMax:right-[12px] xsMax:top-[13px]',
+                className
+            )}
+            hideTooltip
+            icon={Close}
+            onClick={closeModal}
+            size={isMobile ? 'sm' : 'md'}
+            type="button"
+        />
+    );
+};

package/src/Modal/components/ModalActions/ModalActions.tsx

@@ -0,0 +1,135 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { Children, ReactNode, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { currentPageAtom } from '../../../ContentPager/ContentPager';
+import { ModalContext } from '../../context';
+
+type Props = {
+    children: ReactNode;
+    className?: string;
+    usePortalActions?: boolean;
+};
+
+/**
+ * A styled container for buttons or other actions.
+ *
+ * Automatically adds scroll hint above when `ModalContent` is scrollable.
+ * During page transitions, only the first set of portal actions are shown.
+ */
+export const ModalActions = ({ children, className, usePortalActions }: Props) => {
+    const { modalHasFooterAtom, showBottomScrollHintAtom } = useContext(ModalContext);
+    const showBottomScrollHint = useAtomValue(showBottomScrollHintAtom);
+    const setModalHasFooter = useSetAtom(modalHasFooterAtom);
+    const modalActionsRef = useRef<HTMLDivElement | null>(null);
+
+    const modalPortalKey = useId();
+    const amountOfChildren = useMemo(() => Children.toArray(children).length, [children]);
+    const currentPage = useAtomValue(currentPageAtom);
+
+    // Track which page this ModalActions belongs to
+    const [modalActionsPageName, setModalActionsPageName] = useState<string | null>(null);
+
+    // Find the page name by checking the DOM when the ref is available
+    useEffect(() => {
+        if (modalActionsRef.current && modalActionsPageName === null) {
+            // For non-portal actions, traverse up the DOM to find the page
+            if (!usePortalActions) {
+                const pageElement = modalActionsRef.current.closest('[data-page-name]');
+                if (pageElement) {
+                    const pageName = pageElement.getAttribute('data-page-name');
+                    if (pageName) {
+                        setModalActionsPageName(pageName);
+                        return;
+                    }
+                }
+            }
+
+            // For portal actions, find which page is currently active in the DOM
+            // Since portal actions are rendered outside the page structure, we check
+            // which page element exists and use the last one (most recently rendered)
+            const pageElements = document.querySelectorAll('[data-page-name]');
+            if (pageElements.length > 0) {
+                const lastPageElement = pageElements[pageElements.length - 1];
+                const pageName = lastPageElement.getAttribute('data-page-name');
+                if (pageName) {
+                    setModalActionsPageName(pageName);
+                }
+            }
+        }
+    }, [modalActionsPageName, usePortalActions]);
+
+    const isModalActionsInCurrentPage = useMemo(() => {
+        return modalActionsPageName === currentPage;
+    }, [modalActionsPageName, currentPage]);
+
+    // Update modalHasFooter based on visibility
+    useEffect(() => {
+        if (modalActionsPageName !== null) {
+            // If this ModalActions is visible, set modalHasFooter to true
+            if (isModalActionsInCurrentPage) {
+                setModalHasFooter(true);
+            } else {
+                // If this ModalActions is hidden, only set modalHasFooter to false
+                // if there are no other visible ModalActions (i.e., we're on a page without actions)
+                const hasVisibleModalActions = document.querySelector('[data-testid="modal-footer"]:not(.hidden)');
+                if (!hasVisibleModalActions) {
+                    setModalHasFooter(false);
+                }
+            }
+        }
+    }, [isModalActionsInCurrentPage, modalActionsPageName, setModalHasFooter]);
+
+    const modalActionsContent = (
+        <div
+            className={cn(
+                // GENERAL
+                'relative z-[1] flex items-center justify-center gap-sm p-[32px_64px_64px_64px] [&>button]:min-w-[158px]',
+                // ANIMATION
+                'transition-all duration-200 ease-in [animation-play-state:paused] [scrollbar-gutter:stable-both-edges]',
+                // SHADOW
+                { 'shadow-04': showBottomScrollHint },
+                // If there are 2 buttons, make them take up the full width
+                { '[&>button]:flex-1': amountOfChildren === 2 },
+                // PORTAL ACTIONS - absolute on desktop and mobile fullscreen, relative on tablet
+                {
+                    'mobile:group-only/fullscreen:absolute mobile:group-only/fullscreen:bottom-0 mobile:group-only/fullscreen:h-[74px] mobile:group-only/fullscreen:w-full':
+                        usePortalActions,
+                    'smMin:absolute smMin:bottom-0 smMin:h-[138px] smMin:w-full': usePortalActions,
+                },
+                // MOBILE
+                'xsMax:p-[24px_32px_32px_32px] xsMax:[&>button]:min-w-fit xsMax:[&>button]:flex-1',
+                // MOBILE FULLSCREEN
+                'mobile:group-only/fullscreen:gap-sm mobile:group-only/fullscreen:p-sm',
+                // HIDE MODAL ACTIONS: Hide if this ModalActions belongs to a page that's NOT the current page
+                {
+                    'hidden duration-0':
+                        usePortalActions && !isModalActionsInCurrentPage && modalActionsPageName !== null,
+                },
+                className
+            )}
+            data-testid="modal-footer"
+            id="modal-footer"
+            ref={(ref) => {
+                // Only set modalHasFooter based on ref existence, not visibility
+                // Visibility is handled by the useEffect above
+                modalActionsRef.current = ref;
+            }}
+        >
+            {children}
+        </div>
+    );
+
+    if (usePortalActions && typeof window !== 'undefined') {
+        const portalTarget = document.getElementById('modal-actions-portal');
+
+        if (!portalTarget) {
+            return modalActionsContent;
+        }
+
+        return createPortal(modalActionsContent, portalTarget, modalPortalKey.toString());
+    }
+
+    return modalActionsContent;
+};

package/src/Modal/components/ModalContent/ModalContent.tsx

@@ -0,0 +1,163 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+import { currentPageAtom } from '../../../ContentPager/ContentPager';
+import { effectEventListener } from '../../../utils/effectEventListener';
+import { ModalContext } from '../../context';
+
+type Props = {
+    children: ReactNode;
+    className?: string;
+};
+
+/**
+ * The main content area of the modal.
+ *
+ * It automatically adds scroll hints to `ModalHeader` (above) and `ModalActions` (below).
+ * It automatically moves the `ModalTitle` farther into the header if scrolled.
+ */
+export const ModalContent = ({ children, className }: Props) => {
+    const { scrollTopAtom, showBottomScrollHintAtom, showTopScrollHintAtom } = useContext(ModalContext);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const currentPage = useAtomValue(currentPageAtom);
+
+    const setScrollTop = useSetAtom(scrollTopAtom);
+    const setShowBottomScrollHint = useSetAtom(showBottomScrollHintAtom);
+    const setShowTopScrollHint = useSetAtom(showTopScrollHintAtom);
+    const [hasModalSubTitle, setHasModalSubTitle] = useState(
+        Boolean(contentRef.current?.querySelector('#modal-sub-title'))
+    );
+
+    /* istanbul ignore next */
+    const handleScroll = useCallback(
+        (contentRef: HTMLDivElement) => () => {
+            if (contentRef.scrollHeight > contentRef.clientHeight + 32) {
+                const atTheBottom =
+                    Math.round(contentRef.scrollHeight - contentRef.scrollTop) - 5 < contentRef.clientHeight;
+                const atTheTop = contentRef.scrollTop < 10;
+
+                setShowBottomScrollHint(!atTheBottom);
+                setShowTopScrollHint(!atTheTop);
+                setScrollTop(contentRef.scrollTop);
+            } else if (contentRef.scrollTop === 0) {
+                setShowBottomScrollHint(false);
+                setShowTopScrollHint(false);
+                setScrollTop(0);
+            }
+        },
+        [setShowBottomScrollHint, setShowTopScrollHint, setScrollTop]
+    );
+
+    const onScrollRef = useRef<ReturnType<typeof handleScroll>>(null);
+
+    // Trigger handleScroll on window resize
+    useEffect(() => {
+        return effectEventListener(window, 'resize', () => onScrollRef.current?.());
+    }, [handleScroll]);
+
+    /**
+     * Effect to detect presence of modal subtitle and adjust padding accordingly.
+     * Uses MutationObserver to handle dynamic content changes, particularly when
+     * content is loaded through a ContentPager component.
+     * Also triggers scroll hint updates when content changes.
+     */
+    useEffect(() => {
+        if (!contentRef.current) {
+            return;
+        }
+
+        // Initial check for subtitle in the current content
+        const subTitle = contentRef.current.querySelector('#modal-sub-title');
+
+        setHasModalSubTitle(Boolean(subTitle));
+
+        // Set up MutationObserver to watch for changes in the modal content
+        const observer = new MutationObserver(() => {
+            // Get all content pager pages
+            const allPages = contentRef.current?.querySelectorAll('[data-page-name]');
+
+            // During transition, check the second page (incoming page)
+            // Otherwise check the first/only page
+            const targetPage = allPages && allPages.length > 1 ? allPages[1] : allPages?.[0];
+            const modalSubtitle = targetPage?.querySelector('#modal-sub-title');
+
+            setHasModalSubTitle(Boolean(modalSubtitle));
+
+            // Trigger scroll check when content changes (e.g., page navigation)
+            // This ensures scroll hints update immediately when switching to a page with different scroll state
+            onScrollRef.current?.();
+        });
+
+        // Observe changes to the modal content structure
+        observer.observe(contentRef.current, {
+            childList: true,
+            subtree: true,
+        });
+
+        return () => observer.disconnect();
+    }, []);
+
+    // Reset scroll position when page changes in ContentPager
+    useEffect(() => {
+        if (Boolean(currentPage) && contentRef.current && contentRef.current.scrollTop !== 0) {
+            contentRef.current.scrollTo({ behavior: 'smooth', top: 0 });
+        }
+    }, [currentPage]);
+
+    return (
+        <div
+            className={cn(
+                // GENERAL
+                'relative mb-2xl flex justify-center overflow-y-auto px-xl py-sm pt-md [scrollbar-gutter:stable-both-edges]',
+
+                // GROUP CLASSES FOR CONDITIONAL MARGIN BASED OFF FOOTER
+                'group-has-[#modal-footer.flex]:mb-0',
+                // ANIMATION
+                'transition-all duration-200 ease-in',
+                // MOBILE
+                'xsMax:px-sm xsMax:pb-xs',
+                // WITH SUBTITLE
+                { '!pt-0': hasModalSubTitle },
+                // FULLSCREEN
+                'mobile:group-only/fullscreen:h-full',
+                // MOBILE FULLSCREEN
+                'mobile:group-only/fullscreen:mb-0 mobile:group-only/fullscreen:px-sm',
+                className
+            )}
+            data-testid="modal-content"
+            id="modal-content"
+            onTransitionEnd={() => {
+                // Check scroll hints after transitions complete (accordion animations, etc.)
+                onScrollRef.current?.();
+            }}
+            ref={(ref) => {
+                if (!ref) {
+                    return;
+                }
+                contentRef.current = ref;
+
+                const onScroll = handleScroll(ref);
+                onScrollRef.current = onScroll;
+
+                ref.addEventListener('scroll', onScroll);
+
+                // Initial scroll hint check
+                requestAnimationFrame(() => {
+                    onScroll();
+                });
+            }}
+            style={{ scrollbarGutter: 'stable both-edges' }}
+        >
+            <div
+                className={cn(
+                    'w-[460px] xsMax:w-[311px]',
+                    // MOBILE FULLSCREEN
+                    'mobile:group-only/fullscreen:w-full'
+                )}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/Modal/components/ModalHeader/ModalHeader.tsx

@@ -0,0 +1,84 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useAtomValue } from 'jotai';
+import { ReactNode, useContext, useEffect, useMemo } from 'react';
+
+import { useWindowIsMobile } from '../../../providers';
+import { effectEventListener } from '../../../utils/effectEventListener';
+import { ModalContext } from '../../context';
+import { useCloseModal } from '../../hooks/useCloseModal';
+import { useHeaderAnimation } from './hooks/useHeaderAnimation';
+
+type Props = {
+    children: ReactNode;
+    className?: string;
+};
+
+/**
+ * A styled container for the header of the modal.
+ *
+ * Automatically moves the `ModalTitle` farther into the header if scrolled.
+ * Automatically adds scroll hint below when `ModalContent` is scrollable.
+ */
+export const ModalHeader = ({ children, className }: Props) => {
+    const { scrollTopAtom, showTopScrollHintAtom } = useContext(ModalContext);
+    const scrollTop = useAtomValue(scrollTopAtom);
+    const showTopScrollHint = useAtomValue(showTopScrollHintAtom);
+    const { headerAnimations, setAnimationPercentage, storedAnimation } = useHeaderAnimation();
+
+    const isMobile = useWindowIsMobile();
+    const closeModal = useCloseModal('escape');
+
+    useMemo(() => {
+        if (Boolean(isMobile)) {
+            setAnimationPercentage(Math.max(1 - (Math.max(scrollTop, 32) - scrollTop) / 32, 0));
+        } else {
+            setAnimationPercentage(Math.max(1 - (Math.max(scrollTop, 48) - scrollTop) / 48, 0));
+        }
+    }, [isMobile, scrollTop, setAnimationPercentage]);
+
+    useEffect(() => {
+        const handleEsc = (event: Event) => {
+            if ((event as KeyboardEvent).key === 'Escape') {
+                closeModal();
+            }
+        };
+
+        return effectEventListener(window, 'keydown', handleEsc);
+    }, [closeModal]);
+
+    return (
+        <div
+            className={cn(
+                // GENERAL
+                'relative z-[1] mb-xs flex flex-col items-center justify-center px-2xl',
+                // ANIMATION
+                'transition-all duration-200 ease-in [animation-play-state:paused] [scrollbar-gutter:stable-both-edges]',
+                // SHADOW
+                { 'shadow-01': showTopScrollHint },
+                // MOBILE
+                'xsMax:px-xs',
+                // MOBILE FULLSCREEN
+                'mobile:group-only/fullscreen:px-sm',
+                className
+            )}
+            ref={(ref) => {
+                if (!ref) {
+                    return;
+                }
+
+                // Needed for tests to pass
+                if (ref.getAnimations?.().length === 0) {
+                    const animation = ref.animate(headerAnimations, {
+                        duration: 1000,
+                        fill: 'both',
+                        iterations: Infinity,
+                    });
+                    animation.pause();
+                    storedAnimation.current = animation;
+                }
+            }}
+        >
+            {children}
+        </div>
+    );
+};

package/src/Modal/components/ModalHeader/hooks/useHeaderAnimation.tsx

@@ -0,0 +1,49 @@
+import { useAtomValue } from 'jotai';
+import { useContext, useRef } from 'react';
+
+import { useWindowIsMobile } from '../../../../providers';
+import { useTheme } from '../../../../providers/themeContext';
+import { ModalContext } from '../../../context';
+
+export const useHeaderAnimation = () => {
+    const storedAnimation = useRef<Animation | undefined>(undefined);
+    const theme = useTheme();
+    const isMobile = useWindowIsMobile();
+    const { modalHasProgressStepsAtom } = useContext(ModalContext);
+    const modalHasProgressSteps = useAtomValue(modalHasProgressStepsAtom);
+
+    const headerAnimations = [
+        {
+            color: theme.color.text.standard,
+            fontFamily: theme.typography.heading['200'].family,
+            fontSize: theme.typography.heading['200'].size,
+            fontStyle: theme.typography.heading['200'].style,
+            fontWeight: theme.typography.heading['200'].weight,
+            letterSpacing: theme.typography.heading['200'].spacing,
+            lineHeight: theme.typography.heading['200'].height,
+            marginTop: isMobile ? '38px' : '48px',
+            paddingBottom: '0px',
+        },
+        {
+            color: theme.color.text.standard,
+            fontFamily: theme.typography.heading['300'].family,
+            fontSize: theme.typography.heading['300'].size,
+            fontStyle: theme.typography.heading['300'].style,
+            fontWeight: theme.typography.heading['300'].weight,
+            letterSpacing: theme.typography.heading['300'].spacing,
+            lineHeight: theme.typography.heading['300'].height,
+            marginTop: isMobile ? '14px' : '22px',
+            paddingBottom: modalHasProgressSteps ? '8px' : isMobile ? '14px' : '22px',
+        },
+    ];
+
+    const setAnimationPercentage = (percentage: number) => {
+        if (!storedAnimation.current) {
+            return;
+        }
+
+        storedAnimation.current.currentTime = percentage * 999;
+    };
+
+    return { headerAnimations, setAnimationPercentage, storedAnimation };
+};

package/src/Modal/components/ModalProgressSteps/ModalProgressSteps.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useSetAtom } from 'jotai';
+import { ComponentProps, useContext, useEffect } from 'react';
+
+import { ProgressSteps } from '../../../ProgressSteps/ProgressSteps';
+import { ModalContext } from '../../context';
+
+type Props = {
+    className?: string;
+} & ComponentProps<typeof ProgressSteps>;
+
+export const ModalProgressSteps = ({ className, ...props }: Props) => {
+    const { modalHasProgressStepsAtom } = useContext(ModalContext);
+    const setModalHasProgressSteps = useSetAtom(modalHasProgressStepsAtom);
+
+    useEffect(() => {
+        setModalHasProgressSteps(true);
+    }, [setModalHasProgressSteps]);
+
+    return (
+        <ProgressSteps
+            className={cn('pb-0 pt-xs', className)}
+            {...props}
+        />
+    );
+};

package/src/Modal/components/ModalSubTitle/ModalSubTitle.tsx

@@ -0,0 +1,29 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { BodyPrimary } from '../../../Typography/Text/Text';
+
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    ['data-testid']?: string;
+};
+
+/**
+ * Styled subtitle for modal.
+ */
+export const ModalSubTitle = ({ children, className, 'data-testid': dataTestId = 'modalSubTitle' }: Props) => {
+    return (
+        <div className={cn('-pt-sm mb-lg block w-full text-center', className)}>
+            <BodyPrimary
+                className={className}
+                color="secondary"
+                data-testid={dataTestId}
+                // `id` used in ModalContent
+                id="modal-sub-title"
+            >
+                {children}
+            </BodyPrimary>
+        </div>
+    );
+};
+ModalSubTitle.displayName = 'ModalSubTitle';

package/src/Modal/components/ModalTitle/ModalTitle.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+/**
+ * Styled title for modal.
+ *
+ * Automatically moves the `ModalTitle` farther into the header if `ModalContent` scrolled.
+ */
+
+export const ModalTitle = ({
+    children,
+    'data-testid': dataTestId = 'modalTitle',
+}: {
+    children: ReactNode;
+    'data-testid'?: string;
+}) => (
+    <span
+        className="px-md text-center xsMax:pt-[1px]"
+        data-testid={dataTestId}
+    >
+        {children}
+    </span>
+);

package/src/Modal/components/PreventModalScroll/PreventModalScroll.tsx

@@ -0,0 +1,106 @@
+import { useEffect } from 'react';
+
+// Open modals share a single body scroll-lock. Module-scoped and ref-counted
+// (local deviation from hammer — mirrors Drawer's lock): hammer's per-instance
+// save/restore leaves the body locked forever when two instances overlap
+// (docs pages embedding multiple open modals, auto-reopening stories), because
+// the later instance saves the earlier one's `overflow: hidden` as "original".
+// The first instance to mount captures the body's real styles + scroll
+// position; the last to unmount restores them.
+let openLockCount = 0;
+let previousBodyStyles: {
+    overflow: string;
+    paddingRight: string;
+    position: string;
+    top: string;
+    width: string;
+} | null = null;
+let savedScrollPosition = 0;
+let iosTouchCleanup: (() => void) | undefined;
+
+/**
+ * Prevents scrolling of the page while the modal is open.
+ * Uses a unified approach with additional touch event handling for iOS Safari.
+ *
+ * Can be disabled with `preventScrollWhileOpen={false}` on the `Modal`.
+ */
+export const PreventModalScroll = () => {
+    useEffect(() => {
+        const body = document.body;
+
+        if (openLockCount === 0) {
+            const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+
+            // Store current scroll position and original styles
+            savedScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+            previousBodyStyles = {
+                overflow: body.style.overflow,
+                paddingRight: body.style.paddingRight,
+                position: body.style.position,
+                top: body.style.top,
+                width: body.style.width,
+            };
+
+            // Calculate scrollbar width and add padding to prevent content shift
+            const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+            if (scrollBarWidth > 0) {
+                body.style.paddingRight = `${scrollBarWidth}px`;
+            }
+
+            // Apply scroll prevention
+            body.style.overflow = 'hidden';
+            body.style.position = 'fixed';
+            body.style.top = `-${savedScrollPosition}px`;
+            body.style.width = '100%';
+
+            // iOS-specific touch event handling
+            if (isIOS) {
+                const preventDefault = (e: TouchEvent) => {
+                    // Allow touch events on modal content but prevent on backdrop
+                    const target = e.target as Element;
+                    const isModalContent =
+                        target.closest('[data-testid="modal-content"]') || target.closest('.hui-modal-container');
+
+                    if (!isModalContent) {
+                        e.preventDefault();
+                    }
+                };
+
+                // Add touch event listeners for iOS
+                document.addEventListener('touchstart', preventDefault, { passive: false });
+                document.addEventListener('touchmove', preventDefault, { passive: false });
+
+                iosTouchCleanup = () => {
+                    document.removeEventListener('touchstart', preventDefault);
+                    document.removeEventListener('touchmove', preventDefault);
+                };
+            }
+        }
+
+        openLockCount += 1;
+
+        // Cleanup function
+        return () => {
+            openLockCount -= 1;
+
+            if (openLockCount === 0) {
+                // Remove iOS touch event listeners if they exist
+                iosTouchCleanup?.();
+                iosTouchCleanup = undefined;
+
+                // Restore original styles
+                body.style.overflow = previousBodyStyles?.overflow ?? '';
+                body.style.position = previousBodyStyles?.position ?? '';
+                body.style.top = previousBodyStyles?.top ?? '';
+                body.style.width = previousBodyStyles?.width ?? '';
+                body.style.paddingRight = previousBodyStyles?.paddingRight ?? '';
+                previousBodyStyles = null;
+
+                // Restore scroll position
+                window.scrollTo(0, savedScrollPosition);
+            }
+        };
+    }, []);
+
+    return null;
+};