@moneyforward/mfui-components 3.12.0 → 3.12.1

package/dist/src/Popover/Popover.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState, useRef, } from 'react';
+import { getOverflowAncestors } from '@floating-ui/react-dom';
 import { PopoverContextProvider, usePopoverContext } from './PopoverContext';
 import { usePopoverMenuPlacement } from '../utilities/dom/usePopoverMenuPlacement';
 import { useDisclosure } from '../utilities/state/useDisclosure';
@@ -222,6 +223,34 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
             targetElement.removeEventListener('animationend', update);
         };
     }, [targetElement, update]);
+    // Prevent scrolling of ancestor elements while the Popover is open.
+    useEffect(() => {
+        if (!isPopoverOpen)
+            return;
+        const referenceElement = refs.reference.current;
+        if (!referenceElement)
+            return;
+        // Filter to Element-only ancestors — getOverflowAncestors also returns Window and
+        // VisualViewport, but adding wheel/touchmove listeners to those would prevent ALL
+        // scroll in the document (e.g. navigation sidebars outside the component).
+        const scrollableAncestors = getOverflowAncestors(referenceElement).filter((ancestor) => ancestor instanceof Element);
+        const popoverElement = refs.floating.current;
+        const preventScroll = (event) => {
+            if (popoverElement?.contains(event.target))
+                return;
+            event.preventDefault();
+        };
+        scrollableAncestors.forEach((ancestor) => {
+            ancestor.addEventListener('wheel', preventScroll, { passive: false });
+            ancestor.addEventListener('touchmove', preventScroll, { passive: false });
+        });
+        return () => {
+            scrollableAncestors.forEach((ancestor) => {
+                ancestor.removeEventListener('wheel', preventScroll);
+                ancestor.removeEventListener('touchmove', preventScroll);
+            });
+        };
+    }, [isPopoverOpen, refs.reference, refs.floating]);
     return (_jsxs(_Fragment, { children: [renderTrigger(options), shouldRenderTheContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsx("div", { ref: refs.setFloating, tabIndex: contentProps.tabIndex ?? 0, "data-mfui-content": "popover-portal-content", "data-mfui-popover-depth": nestingDepth, className: cx(classes.root, 'mfui-Popover__root', contentProps.className), style: {
                         ...floatingStyles,
                         ...(!enableAutoUnmount && !isPopoverOpen && { display: 'none' }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.12.0",
+  "version": "3.12.1",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",