@kne/react-filter 1.0.6 → 1.0.8

package/dist/index.modern.js

@@ -1,8 +1,9 @@
 import classnames from 'classnames';
-import { useContext as useContext$1, createContext, useState, useEffect, useRef, useCallback, useLayoutEffect, useMemo, createElement } from 'react';
+import { useContext as useContext$1, createContext, useEffect, useRef, useState, useCallback, useLayoutEffect, useMemo, createElement } from 'react';
 import { Space, Row, Col, Tag, Button, Dropdown, Input, InputNumber, DatePicker, Flex, Select, App } from 'antd';
 import { useIntl, createWithIntlProvider } from '@kne/react-intl';
 import get from 'lodash/get';
+import { useResponsiveContext, useMediaQuery, IS_MOBILE_QUERY, MOBILE_BREAKPOINT, useScrollElement, resetViewportCssVars, applyViewportCssVars, RESPONSIVE_BOUNDARY_CLASS, usePopupContainer } from '@kne/responsive-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { UpOutlined, DownOutlined } from '@ant-design/icons';
 import clone from 'lodash/clone';
@@ -36,7 +37,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var style$1 = {"filter":"kne-react-filter_b3gMw","filter-item-icon":"kne-react-filter_e3V6h","filter-item-option-icon":"kne-react-filter_dLoYj","filter-title":"kne-react-filter_khFt2","filter-title-hidden":"kne-react-filter_j2mP1","ad-filter-title":"kne-react-filter_HptIY","ad-filter-line":"kne-react-filter_7Ob6-","filter-line":"kne-react-filter_Y9XTa","clean-btn":"kne-react-filter_CJ935","filter-item":"kne-react-filter_JpaMr","un-expand":"kne-react-filter_LfQME","ad-filter-selected":"kne-react-filter_pBsaE","filter-label":"kne-react-filter_Bx3s8","filter-line-nowrap":"kne-react-filter_Ccx24","filter-line-measure":"kne-react-filter_uMXzo","filter-item-wrap":"kne-react-filter_Co4Pg","option":"kne-react-filter_G1cRp","is-active":"kne-react-filter_Aab98","is-visited":"kne-react-filter_Ww12R","un-expand-shadow":"kne-react-filter_2ExqW","filter-item-label":"kne-react-filter_JAmeE","filter-item-field":"kne-react-filter_WvRvl","filter-drop-tag":"kne-react-filter_dG8rq","filter-list":"kne-react-filter_qlWu6","filter-list-scroll-wrap":"kne-react-filter_oaIF4","filter-list-constrained":"kne-react-filter_3gXxO","filter-list-scroll":"kne-react-filter_Jq43Q","filter-scroll-next":"kne-react-filter_BdfSI","filter-list-tag":"kne-react-filter_LV2VI","filter-tag":"kne-react-filter_yyR3u","filter-tag-value":"kne-react-filter_8nm8n","filter-value-tag":"kne-react-filter_tWyCr","filter-value-tag-label":"kne-react-filter_XPzrL","filter-value-tag-content":"kne-react-filter_6e79l","filter-value-display-content":"kne-react-filter_v2dnw","filter-value-tags-wrap":"kne-react-filter_J1wBU","filter-value-tags":"kne-react-filter_rRhFE","filter-value-actions":"kne-react-filter_-Brt9","filter-value-toggle":"kne-react-filter_WuL0c","pop-util-content":"kne-react-filter_g-hXk","pop-util-body":"kne-react-filter_4n4MP","date-range-picker-popup":"kne-react-filter_6Zx60","pop-util-overlay":"kne-react-filter_m7Csi","pop-util-mask":"kne-react-filter_o2B3k","pop-util-mask-fade-in":"kne-react-filter_oCXiX","pop-util-mask-leave":"kne-react-filter_qGnRO","pop-util-mask-fade-out":"kne-react-filter_cDx1y","field-item-mobile-popup":"kne-react-filter_wq5nf","pop-util-mobile-expand-down":"kne-react-filter_6RxjE","date-picker-popup":"kne-react-filter_iwLs2","pop-util-mobile-collapse-up":"kne-react-filter_009r-","pop-util-footer":"kne-react-filter_iqe8W","pop-util-text":"kne-react-filter_72gGQ","filter-item-inner":"kne-react-filter_cYX12","filter-item-text":"kne-react-filter_cnMY-","filter-item-number-range":"kne-react-filter_Cv2Bw","filter-item-custom":"kne-react-filter_CBczA","filter-item-custom-active":"kne-react-filter_ldxUR","filter-item-number-range-split":"kne-react-filter_4p3C9","filter-item-number-input":"kne-react-filter_yy1y1","range-picker":"kne-react-filter_81zQn","cascader-select-wrap":"kne-react-filter_UHBfi","cascader-dropdown-menu":"kne-react-filter_bY8JQ","filter-advanced":"kne-react-filter_rg45N","filter-advanced-item-other":"kne-react-filter_HcsA8","filter-advanced-item-other-inner":"kne-react-filter_4Bqtz","filter-advanced-more":"kne-react-filter_jVH7z","filter-value-display":"kne-react-filter_8-R34","is-not-overflow":"kne-react-filter_TM1E2","is-expand":"kne-react-filter_7aclr","filter-value-scroll-prev-shadow":"kne-react-filter_C1t-q","filter-value-scroll-next-shadow":"kne-react-filter_ZFoeL","is-overflow":"kne-react-filter_GhFCl","filter-value-action-placeholder":"kne-react-filter_wGZp6","filter-value-action-right":"kne-react-filter_vyPwo","filter-scroll-prev-shadow":"kne-react-filter_fyhz3","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
+var style$1 = {"kne-responsive-boundary":"kne-react-filter_gh14z","kne-responsive-scroll":"kne-react-filter_Kfn6L","filter":"kne-react-filter_b3gMw","filter-item-icon":"kne-react-filter_e3V6h","filter-item-option-icon":"kne-react-filter_dLoYj","filter-title":"kne-react-filter_khFt2","filter-title-hidden":"kne-react-filter_j2mP1","ad-filter-title":"kne-react-filter_HptIY","ad-filter-line":"kne-react-filter_7Ob6-","filter-line":"kne-react-filter_Y9XTa","clean-btn":"kne-react-filter_CJ935","filter-item":"kne-react-filter_JpaMr","un-expand":"kne-react-filter_LfQME","ad-filter-selected":"kne-react-filter_pBsaE","filter-label":"kne-react-filter_Bx3s8","filter-line-nowrap":"kne-react-filter_Ccx24","filter-line-measure":"kne-react-filter_uMXzo","filter-item-wrap":"kne-react-filter_Co4Pg","option":"kne-react-filter_G1cRp","is-active":"kne-react-filter_Aab98","is-visited":"kne-react-filter_Ww12R","un-expand-shadow":"kne-react-filter_2ExqW","filter-item-label":"kne-react-filter_JAmeE","filter-item-field":"kne-react-filter_WvRvl","filter-drop-tag":"kne-react-filter_dG8rq","filter-list":"kne-react-filter_qlWu6","filter-list-scroll-wrap":"kne-react-filter_oaIF4","filter-list-constrained":"kne-react-filter_3gXxO","filter-list-scroll":"kne-react-filter_Jq43Q","filter-scroll-next":"kne-react-filter_BdfSI","filter-list-tag":"kne-react-filter_LV2VI","filter-tag":"kne-react-filter_yyR3u","filter-tag-value":"kne-react-filter_8nm8n","filter-value-tag":"kne-react-filter_tWyCr","filter-value-tag-label":"kne-react-filter_XPzrL","filter-value-tag-content":"kne-react-filter_6e79l","filter-value-display-content":"kne-react-filter_v2dnw","filter-value-display":"kne-react-filter_8-R34","is-hide-label":"kne-react-filter_zpGJE","is-flush":"kne-react-filter_z8bDM","filter-value-tags-wrap":"kne-react-filter_J1wBU","filter-value-tags":"kne-react-filter_rRhFE","filter-value-actions":"kne-react-filter_-Brt9","filter-value-toggle":"kne-react-filter_WuL0c","pop-util-content":"kne-react-filter_g-hXk","pop-util-body":"kne-react-filter_4n4MP","date-range-picker-popup":"kne-react-filter_6Zx60","pop-util-overlay":"kne-react-filter_m7Csi","pop-util-mask":"kne-react-filter_o2B3k","pop-util-mask-fade-in":"kne-react-filter_oCXiX","is-viewport":"kne-react-filter_3Wr-x","is-boundary":"kne-react-filter_pPiQ8","pop-util-mask-leave":"kne-react-filter_qGnRO","pop-util-mask-fade-out":"kne-react-filter_cDx1y","field-item-mobile-popup":"kne-react-filter_wq5nf","pop-util-mobile-expand-down":"kne-react-filter_6RxjE","date-picker-popup":"kne-react-filter_iwLs2","pop-util-mobile-collapse-up":"kne-react-filter_009r-","pop-util-footer":"kne-react-filter_iqe8W","pop-util-text":"kne-react-filter_72gGQ","filter-item-inner":"kne-react-filter_cYX12","filter-item-text":"kne-react-filter_cnMY-","filter-item-number-range":"kne-react-filter_Cv2Bw","filter-item-custom":"kne-react-filter_CBczA","filter-item-custom-active":"kne-react-filter_ldxUR","filter-item-number-range-split":"kne-react-filter_4p3C9","filter-item-number-input":"kne-react-filter_yy1y1","range-picker":"kne-react-filter_81zQn","cascader-select-wrap":"kne-react-filter_UHBfi","cascader-dropdown-menu":"kne-react-filter_bY8JQ","filter-advanced":"kne-react-filter_rg45N","filter-advanced-item-other":"kne-react-filter_HcsA8","filter-advanced-item-other-inner":"kne-react-filter_4Bqtz","filter-advanced-more":"kne-react-filter_jVH7z","is-mobile":"kne-react-filter_LtgJz","is-not-overflow":"kne-react-filter_TM1E2","is-expand":"kne-react-filter_7aclr","filter-value-scroll-prev-shadow":"kne-react-filter_C1t-q","filter-value-scroll-next-shadow":"kne-react-filter_ZFoeL","is-overflow":"kne-react-filter_GhFCl","filter-value-action-placeholder":"kne-react-filter_wGZp6","filter-value-action-right":"kne-react-filter_vyPwo","filter-scroll-prev-shadow":"kne-react-filter_fyhz3","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
 
 const context = /*#__PURE__*/createContext({});
 const {
@@ -44,21 +45,52 @@ const {
 } = context;
 const useContext = () => useContext$1(context);
 
-const useMobile = () => {
-  const [isMobile, setIsMobile] = useState(false);
+/**
+ * Filter 移动端判定：默认按视口宽度，仅在 ResponsiveProvider container 模式下按预览容器宽度。
+ * 避免 Filter 嵌入窄列时误用移动端布局。
+ */
+const useFilterIsMobile = () => {
+  const {
+    mode,
+    containerWidth
+  } = useResponsiveContext();
+  const viewportIsMobile = useMediaQuery(IS_MOBILE_QUERY);
+  if (mode === 'container' && typeof containerWidth === 'number') {
+    return containerWidth < MOBILE_BREAKPOINT;
+  }
+  return viewportIsMobile;
+};
+
+const useResponsiveScrollListener = (callback, enabled = true) => {
+  const getScrollElement = useScrollElement();
   useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const mediaQuery = window.matchMedia('(max-width: 768px)');
-    const updateIsMobile = () => {
-      setIsMobile(mediaQuery.matches);
+    if (!enabled || typeof callback !== 'function') {
+      return undefined;
+    }
+    const scrollEl = getScrollElement();
+    if (!scrollEl) {
+      return undefined;
+    }
+    callback();
+    const handleChange = () => {
+      callback();
     };
-    updateIsMobile();
-    mediaQuery.addEventListener ? mediaQuery.addEventListener('change', updateIsMobile) : mediaQuery.addListener(updateIsMobile);
+    scrollEl.addEventListener('scroll', handleChange, {
+      passive: true
+    });
+    window.addEventListener('resize', handleChange);
+    let resizeObserver;
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(handleChange);
+      resizeObserver.observe(scrollEl);
+    }
     return () => {
-      mediaQuery.removeEventListener ? mediaQuery.removeEventListener('change', updateIsMobile) : mediaQuery.removeListener(updateIsMobile);
+      var _resizeObserver;
+      scrollEl.removeEventListener('scroll', handleChange);
+      window.removeEventListener('resize', handleChange);
+      (_resizeObserver = resizeObserver) == null || _resizeObserver.disconnect();
     };
-  }, []);
-  return isMobile;
+  }, [callback, enabled, getScrollElement]);
 };
 
 const useHorizontalScrollShadows = ({
@@ -99,14 +131,13 @@ const useHorizontalScrollShadows = ({
     }
     update();
     el.addEventListener('scroll', update);
-    window.addEventListener('resize', update);
     const rafId = window.requestAnimationFrame(update);
     return () => {
       el.removeEventListener('scroll', update);
-      window.removeEventListener('resize', update);
       window.cancelAnimationFrame(rafId);
     };
   }, [enabled, refreshKey, _suspend, update]);
+  useResponsiveScrollListener(update, enabled && !_suspend);
   return {
     scrollRef,
     isOverflow,
@@ -123,13 +154,14 @@ const useVisibleItemCount = ({
   enabled,
   strategy: _strategy = 'asc'
 }) => {
+  const safeItems = Array.isArray(items) ? items : [];
   const containerRef = useRef(null);
   const measureRef = useRef(null);
   const moreMeasureRef = useRef(null);
   const rafRef = useRef(null);
   const lastWidthRef = useRef(0);
   const [containerEl, setContainerEl] = useState(null);
-  const [visibleCount, setVisibleCount] = useState(() => items.length > 0 ? 1 : 0);
+  const [visibleCount, setVisibleCount] = useState(() => safeItems.length > 0 ? 1 : 0);
   const setContainerRef = useCallback(node => {
     containerRef.current = node;
     setContainerEl(node || null);
@@ -156,7 +188,7 @@ const useVisibleItemCount = ({
       return null;
     }
     const moreButtonWidth = ((_moreMeasureRef$curre = moreMeasureRef.current) == null ? void 0 : _moreMeasureRef$curre.getBoundingClientRect().width) || 0;
-    if (items.length > 1 && moreButtonWidth <= 0) {
+    if (safeItems.length > 1 && moreButtonWidth <= 0) {
       return null;
     }
     const itemWidths = Array.from(itemNodes, node => node.getBoundingClientRect().width);
@@ -165,24 +197,24 @@ const useVisibleItemCount = ({
       itemWidths,
       moreButtonWidth
     };
-  }, [items.length]);
+  }, [safeItems.length]);
   const getWidthForCount = useCallback((itemWidths, moreButtonWidth, count) => {
     let usedWidth = 0;
     for (let i = 0; i < count; i++) {
       usedWidth += itemWidths[i] + (i > 0 ? GAP : 0);
     }
-    if (count < items.length) {
+    if (count < safeItems.length) {
       usedWidth += GAP + moreButtonWidth;
     }
     return usedWidth;
-  }, [items.length]);
+  }, [safeItems.length]);
   const resolveVisibleCount = useCallback(widths => {
     const {
       containerWidth,
       itemWidths,
       moreButtonWidth
     } = widths;
-    const maxCount = Math.min(items.length, itemWidths.length);
+    const maxCount = Math.min(safeItems.length, itemWidths.length);
     let count = 1;
     if (_strategy === 'desc') {
       count = maxCount;
@@ -205,10 +237,10 @@ const useVisibleItemCount = ({
       }
     }
     return Math.max(1, count);
-  }, [getWidthForCount, items.length, _strategy]);
+  }, [getWidthForCount, safeItems.length, _strategy]);
   const calculateByWidth = useCallback(() => {
-    if (!enabled || !items.length) {
-      setVisibleCount(prev => prev === items.length ? prev : items.length);
+    if (!enabled || !safeItems.length) {
+      setVisibleCount(prev => prev === safeItems.length ? prev : safeItems.length);
       return;
     }
     const widths = getWidths();
@@ -217,7 +249,7 @@ const useVisibleItemCount = ({
     }
     const nextCount = resolveVisibleCount(widths);
     setVisibleCount(prev => prev === nextCount ? prev : nextCount);
-  }, [enabled, getWidths, items.length, resolveVisibleCount]);
+  }, [enabled, getWidths, safeItems.length, resolveVisibleCount]);
   const scheduleCalculate = useCallback(() => {
     if (rafRef.current) {
       window.cancelAnimationFrame(rafRef.current);
@@ -235,7 +267,7 @@ const useVisibleItemCount = ({
         rafRef.current = null;
       }
     };
-  }, [items, scheduleCalculate]);
+  }, [safeItems, scheduleCalculate]);
   useEffect(() => {
     if (!enabled || !containerEl) {
       return undefined;
@@ -252,16 +284,15 @@ const useVisibleItemCount = ({
     });
     lastWidthRef.current = containerEl.clientWidth;
     observer.observe(containerEl);
-    window.addEventListener('resize', scheduleCalculate);
     return () => {
       observer.disconnect();
-      window.removeEventListener('resize', scheduleCalculate);
       if (rafRef.current) {
         window.cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
       }
     };
   }, [containerEl, enabled, scheduleCalculate]);
+  useResponsiveScrollListener(scheduleCalculate, enabled && !!containerEl);
   return {
     setContainerRef,
     setMeasureRef,
@@ -291,14 +322,14 @@ const normalizeFilterList = list => {
   if (isNestedFilterList(safeList)) {
     return {
       mode: 'nested',
-      items: null,
+      items: [],
       lines: safeList
     };
   }
   return {
     mode: 'flat',
     items: safeList,
-    lines: null
+    lines: []
   };
 };
 const getMobileFilterList = list => {
@@ -403,7 +434,7 @@ const FilterLines = ({
   const mobileList = useMemo(() => getMobileFilterList(_list), [_list]);
   const isFlatMode = mode === 'flat';
   const [isExpand, setIsExpand] = useState(false);
-  const isMobile = useMobile();
+  const isMobile = useFilterIsMobile();
   const {
     scrollRef,
     showScrollPrev,
@@ -680,7 +711,10 @@ const withLocale = createWithIntlProvider({
 const FilterValueDisplay = withLocale(({
   value: filterValue,
   extraExpand,
-  onChange
+  onChange,
+  className,
+  hideLabel,
+  flush
 }) => {
   const {
     formatMessage
@@ -688,7 +722,7 @@ const FilterValueDisplay = withLocale(({
     moduleName: 'Filter'
   });
   const [isExpand, setIsExpand] = useState(false);
-  const isMobile = useMobile();
+  const isMobile = useFilterIsMobile();
   const {
     scrollRef,
     isOverflow,
@@ -724,10 +758,13 @@ const FilterValueDisplay = withLocale(({
     }, name);
   });
   return /*#__PURE__*/jsxs(Space, {
-    className: classnames(style$1['filter-title'], style$1['filter-value-display']),
+    className: classnames(style$1['filter-title'], style$1['filter-value-display'], 'filter-value-display-root', {
+      [style$1['is-hide-label']]: hideLabel,
+      [style$1['is-flush']]: flush
+    }, className),
     align: "top",
-    size: 16,
-    children: [/*#__PURE__*/jsx("span", {
+    size: hideLabel ? 0 : 16,
+    children: [hideLabel ? null : /*#__PURE__*/jsx("span", {
       className: style$1['filter-label'],
       children: formatMessage({
         id: 'selectedText'
@@ -842,6 +879,34 @@ const FilterProvider = ({
   });
 };
 
+const useFilterViewportVars = () => {
+  const boundaryRef = useRef(null);
+  const {
+    mode
+  } = useResponsiveContext();
+  useEffect(() => {
+    const el = boundaryRef.current;
+    if (!el || typeof window === 'undefined' || mode === 'container') {
+      return undefined;
+    }
+    const update = () => {
+      applyViewportCssVars(el, {
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    update();
+    window.addEventListener('resize', update, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener('resize', update);
+      resetViewportCssVars(el);
+    };
+  }, [mode]);
+  return boundaryRef;
+};
+
 const _excluded$f = ["children", "className"];
 const FilterOuter = _ref => {
   let {
@@ -849,9 +914,12 @@ const FilterOuter = _ref => {
       className
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  const isMobile = useFilterIsMobile();
+  const boundaryRef = useFilterViewportVars();
   return /*#__PURE__*/jsx(FilterProvider, _extends({}, props, {
     children: context => /*#__PURE__*/jsx("div", {
-      className: classnames(style$1['filter'], 'filter', className),
+      ref: boundaryRef,
+      className: classnames(style$1['filter'], 'filter', RESPONSIVE_BOUNDARY_CLASS, isMobile && style$1['is-mobile'], className),
       children: children(_extends({}, context, {
         props
       }))
@@ -888,6 +956,25 @@ const Filter = withLocale(_ref => {
   }));
 });
 
+/**
+ * 与 system-layout Toolbar 一致：
+ * - container 模式（example 手机预览）：absolute + boundary 挂载
+ * - viewport 模式（真实移动端）：fixed + 视口坐标
+ */
+const useMobileFixedMode = () => {
+  const isMobile = useFilterIsMobile();
+  const {
+    mode
+  } = useResponsiveContext();
+  const useBoundaryMount = isMobile && mode === 'container';
+  const useViewportFixed = isMobile && mode !== 'container';
+  return {
+    isMobile,
+    useBoundaryMount,
+    useViewportFixed
+  };
+};
+
 const FilterItem = withLocale(({
   open,
   active,
@@ -918,6 +1005,48 @@ const FilterItem = withLocale(({
   });
 });
 
+const getMobilePopupMetrics = (triggerEl, {
+  scrollEl,
+  boundaryEl,
+  useBoundaryMount,
+  offset: _offset = 4
+} = {}) => {
+  var _scrollRect$top, _scrollRect$bottom, _scrollRect$width;
+  if (typeof window === 'undefined' || !triggerEl) {
+    return {
+      top: 0,
+      left: 0,
+      height: 0,
+      width: 0
+    };
+  }
+  const rect = triggerEl.getBoundingClientRect();
+  if (useBoundaryMount && boundaryEl) {
+    const boundaryRect = boundaryEl.getBoundingClientRect();
+    const _top = Math.max(rect.bottom - boundaryRect.top + _offset, 0);
+    return {
+      top: _top,
+      left: 0,
+      height: Math.max(boundaryRect.height - _top, 0),
+      width: boundaryRect.width
+    };
+  }
+  const scrollRect = scrollEl == null || scrollEl.getBoundingClientRect == null ? void 0 : scrollEl.getBoundingClientRect();
+  const visibleTop = (_scrollRect$top = scrollRect == null ? void 0 : scrollRect.top) != null ? _scrollRect$top : 0;
+  const visibleBottom = (_scrollRect$bottom = scrollRect == null ? void 0 : scrollRect.bottom) != null ? _scrollRect$bottom : window.innerHeight;
+  const width = (_scrollRect$width = scrollRect == null ? void 0 : scrollRect.width) != null ? _scrollRect$width : window.innerWidth;
+  const top = Math.max(rect.bottom + _offset, visibleTop);
+  return {
+    top,
+    left: 0,
+    height: Math.max(visibleBottom - top, 0),
+    width
+  };
+};
+
+const MOBILE_MASK_Z_INDEX = 1000;
+const MOBILE_POPUP_Z_INDEX = 1050;
+
 const _excluded$d = ["value", "onChange", "interceptor", "label", "render"];
 const isNotEmpty$1 = value => {
   if (value === null || value === undefined) return false;
@@ -925,9 +1054,10 @@ const isNotEmpty$1 = value => {
   return !(Array.isArray(value) && value.length === 0);
 };
 const MASK_ANIMATION_DURATION$1 = 180;
-const FIELD_MOBILE_POPUP_CLASS = 'react-filter-field-mobile-popup';
+const FIELD_MOBILE_POPUP_CLASS$1 = 'react-filter-field-mobile-popup';
 const MOBILE_POPUP_OFFSET$1 = 4;
 const withFieldItem = (WrappedComponent, options = {}) => _ref => {
+  var _popupMetrics$left;
   let {
       value,
       onChange,
@@ -937,7 +1067,11 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const [open, setOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
+  const {
+    isMobile,
+    useBoundaryMount
+  } = useMobileFixedMode();
+  const fixedModeClass = useBoundaryMount ? style$1['is-boundary'] : style$1['is-viewport'];
   const [renderMask, setRenderMask] = useState(false);
   const [maskClosing, setMaskClosing] = useState(false);
   const [popupMetrics, setPopupMetrics] = useState({
@@ -946,6 +1080,24 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     height: 0
   });
   const triggerRef = useRef(null);
+  const getBoundaryElement = usePopupContainer();
+  const getScrollElement = useScrollElement();
+  const resolveGetPopupContainer = useCallback(triggerNode => {
+    if (typeof props.getPopupContainer === 'function') {
+      const customContainer = props.getPopupContainer(triggerNode);
+      if (customContainer) {
+        return customContainer;
+      }
+    }
+    if (!isMobile) {
+      return getBoundaryElement();
+    }
+    if (useBoundaryMount) {
+      return getBoundaryElement();
+    }
+    return typeof document !== 'undefined' ? document.body : null;
+  }, [getBoundaryElement, isMobile, props.getPopupContainer, useBoundaryMount]);
+  const popupMountNode = typeof document !== 'undefined' ? isMobile ? useBoundaryMount ? getBoundaryElement() || document.body : document.body : getBoundaryElement() || document.body : null;
   const setMobilePopupVariables = useCallback(metrics => {
     if (typeof document === 'undefined') return;
     document.body.style.setProperty('--react-filter-field-mobile-height', `${metrics.height}px`);
@@ -954,37 +1106,16 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
   }, []);
   const updatePopupMetrics = useCallback(() => {
     if (typeof window === 'undefined' || !triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const top = Math.max(rect.bottom + MOBILE_POPUP_OFFSET$1, 0);
-    const metrics = {
-      top,
-      height: Math.max(window.innerHeight - top, 0)
-    };
+    const metrics = getMobilePopupMetrics(triggerRef.current, {
+      scrollEl: getScrollElement(),
+      boundaryEl: getBoundaryElement(),
+      useBoundaryMount,
+      offset: MOBILE_POPUP_OFFSET$1
+    });
     setPopupMetrics(metrics);
     setMobilePopupVariables(metrics);
-  }, [setMobilePopupVariables]);
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const mediaQuery = window.matchMedia('(max-width: 768px)');
-    const updateIsMobile = () => {
-      setIsMobile(mediaQuery.matches);
-    };
-    updateIsMobile();
-    mediaQuery.addEventListener ? mediaQuery.addEventListener('change', updateIsMobile) : mediaQuery.addListener(updateIsMobile);
-    return () => {
-      mediaQuery.removeEventListener ? mediaQuery.removeEventListener('change', updateIsMobile) : mediaQuery.removeListener(updateIsMobile);
-    };
-  }, []);
-  useEffect(() => {
-    if (!open || !isMobile) return;
-    updatePopupMetrics();
-    window.addEventListener('resize', updatePopupMetrics);
-    window.addEventListener('scroll', updatePopupMetrics, true);
-    return () => {
-      window.removeEventListener('resize', updatePopupMetrics);
-      window.removeEventListener('scroll', updatePopupMetrics, true);
-    };
-  }, [isMobile, open, updatePopupMetrics]);
+  }, [getBoundaryElement, getScrollElement, setMobilePopupVariables, useBoundaryMount]);
+  useResponsiveScrollListener(updatePopupMetrics, open && isMobile);
   useEffect(() => {
     if (typeof document === 'undefined' || !isMobile || popupMetrics.height <= 0) return;
     setMobilePopupVariables(popupMetrics);
@@ -1028,14 +1159,15 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     '--react-filter-popover-mobile-height': `${popupMetrics.height}px`,
     '--react-filter-field-mobile-top': `${popupMetrics.top}px`,
     top: popupMetrics.top,
-    left: 0
+    left: (_popupMetrics$left = popupMetrics.left) != null ? _popupMetrics$left : 0,
+    zIndex: MOBILE_POPUP_Z_INDEX
   } : undefined;
   const mergePopupClassNames = classNames => {
     var _classNames$popup;
     if (!isMobile) return classNames;
     return Object.assign({}, classNames, {
       popup: Object.assign({}, classNames == null ? void 0 : classNames.popup, {
-        root: classnames(classNames == null || (_classNames$popup = classNames.popup) == null ? void 0 : _classNames$popup.root, style$1['field-item-mobile-popup'], FIELD_MOBILE_POPUP_CLASS)
+        root: classnames(classNames == null || (_classNames$popup = classNames.popup) == null ? void 0 : _classNames$popup.root, style$1['field-item-mobile-popup'], FIELD_MOBILE_POPUP_CLASS$1, fixedModeClass)
       })
     });
   };
@@ -1060,9 +1192,10 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
       valueType: "all",
       onOpenChange: handleOpenChange,
       onDropdownVisibleChange: handleOpenChange,
-      popupClassName: classnames(props.popupClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
-      dropdownClassName: classnames(props.dropdownClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
-      overlayClassName: classnames(props.overlayClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
+      getPopupContainer: resolveGetPopupContainer,
+      popupClassName: classnames(props.popupClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS$1, isMobile && fixedModeClass),
+      dropdownClassName: classnames(props.dropdownClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS$1, isMobile && fixedModeClass),
+      overlayClassName: classnames(props.overlayClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS$1, isMobile && fixedModeClass),
       overlayStyle: Object.assign({}, props.overlayStyle, mobilePopupStyle),
       popupStyle: Object.assign({}, props.popupStyle, mobilePopupStyle),
       dropdownStyle: Object.assign({}, props.dropdownStyle, mobilePopupStyle),
@@ -1074,21 +1207,27 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
         offset: [0, 0]
       } : props.align,
       isPopup: options.forcePopup ? true : props.isPopup,
-      overlayWidth: isMobile && options.forcePopup ? typeof window === 'undefined' ? props.overlayWidth : window.innerWidth : props.overlayWidth
+      zIndex: isMobile ? MOBILE_POPUP_Z_INDEX : props.zIndex,
+      overlayWidth: isMobile && options.forcePopup ? typeof window === 'undefined' ? props.overlayWidth : getMobilePopupMetrics(triggerRef.current, {
+        scrollEl: getScrollElement(),
+        boundaryEl: getBoundaryElement(),
+        useBoundaryMount
+      }).width || window.innerWidth : props.overlayWidth
     }));
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [renderMask && typeof document !== 'undefined' && /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
-      className: classnames(style$1['pop-util-mask'], maskClosing && style$1['pop-util-mask-leave']),
+    children: [renderMask && popupMountNode && /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+      className: classnames(style$1['pop-util-mask'], maskClosing && style$1['pop-util-mask-leave'], fixedModeClass),
       style: {
         top: popupMetrics.top,
-        height: popupMetrics.height
+        height: popupMetrics.height,
+        zIndex: MOBILE_MASK_Z_INDEX
       },
       onClick: closeFieldItem,
       onTouchMove: e => {
         e.preventDefault();
       }
-    }), document.body), /*#__PURE__*/jsx("span", {
+    }), popupMountNode), /*#__PURE__*/jsx("span", {
       ref: triggerRef,
       children: /*#__PURE__*/jsx(FilterItem, {
         label: label,
@@ -1118,11 +1257,35 @@ const PopoverItem = withLocale(({
   placement: _placement = 'bottomLeft',
   onOpenChange,
   onChange,
+  getPopupContainer: customGetPopupContainer,
   children
 }) => {
+  var _popupMetrics$left;
   const [state, setState] = useState(value);
   const [open, setOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
+  const {
+    isMobile,
+    useBoundaryMount
+  } = useMobileFixedMode();
+  const fixedModeClass = useBoundaryMount ? style$1['is-boundary'] : style$1['is-viewport'];
+  const getBoundaryElement = usePopupContainer();
+  const getScrollElement = useScrollElement();
+  const resolveGetPopupContainer = useCallback(triggerNode => {
+    if (typeof customGetPopupContainer === 'function') {
+      const customContainer = customGetPopupContainer(triggerNode);
+      if (customContainer) {
+        return customContainer;
+      }
+    }
+    if (!isMobile) {
+      return getBoundaryElement();
+    }
+    if (useBoundaryMount) {
+      return getBoundaryElement();
+    }
+    return typeof document !== 'undefined' ? document.body : null;
+  }, [customGetPopupContainer, getBoundaryElement, isMobile, useBoundaryMount]);
+  const popupMountNode = typeof document !== 'undefined' ? isMobile ? useBoundaryMount ? getBoundaryElement() || document.body : document.body : getBoundaryElement() || document.body : null;
   const [renderMask, setRenderMask] = useState(false);
   const [maskClosing, setMaskClosing] = useState(false);
   const [popupMetrics, setPopupMetrics] = useState({
@@ -1139,37 +1302,17 @@ const PopoverItem = withLocale(({
   } = useIntl({
     moduleName: 'Filter'
   });
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const mediaQuery = window.matchMedia('(max-width: 768px)');
-    const updateIsMobile = () => {
-      setIsMobile(mediaQuery.matches);
-    };
-    updateIsMobile();
-    mediaQuery.addEventListener ? mediaQuery.addEventListener('change', updateIsMobile) : mediaQuery.addListener(updateIsMobile);
-    return () => {
-      mediaQuery.removeEventListener ? mediaQuery.removeEventListener('change', updateIsMobile) : mediaQuery.removeListener(updateIsMobile);
-    };
-  }, []);
   const updatePopupMetrics = useCallback(() => {
     if (typeof window === 'undefined' || !triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const top = Math.max(rect.bottom + MOBILE_POPUP_OFFSET, 0);
-    setPopupMetrics({
-      top,
-      height: Math.max(window.innerHeight - top, 0)
+    const metrics = getMobilePopupMetrics(triggerRef.current, {
+      scrollEl: getScrollElement(),
+      boundaryEl: getBoundaryElement(),
+      useBoundaryMount,
+      offset: MOBILE_POPUP_OFFSET
     });
-  }, []);
-  useEffect(() => {
-    if (!open || !isMobile) return;
-    updatePopupMetrics();
-    window.addEventListener('resize', updatePopupMetrics);
-    window.addEventListener('scroll', updatePopupMetrics, true);
-    return () => {
-      window.removeEventListener('resize', updatePopupMetrics);
-      window.removeEventListener('scroll', updatePopupMetrics, true);
-    };
-  }, [isMobile, open, updatePopupMetrics]);
+    setPopupMetrics(metrics);
+  }, [getBoundaryElement, getScrollElement, useBoundaryMount]);
+  useResponsiveScrollListener(updatePopupMetrics, open && isMobile);
   useEffect(() => {
     if (open && isMobile) {
       setRenderMask(true);
@@ -1201,7 +1344,8 @@ const PopoverItem = withLocale(({
   const mobileOverlayStyle = isMobile ? {
     '--react-filter-popover-mobile-height': `${popupMetrics.height}px`,
     top: popupMetrics.top,
-    left: 0
+    left: (_popupMetrics$left = popupMetrics.left) != null ? _popupMetrics$left : 0,
+    zIndex: MOBILE_POPUP_Z_INDEX
   } : undefined;
   const overlayContent = /*#__PURE__*/jsxs("div", {
     className: style$1['pop-util-body'],
@@ -1243,17 +1387,18 @@ const PopoverItem = withLocale(({
     })]
   });
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [renderMask && typeof document !== 'undefined' && /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
-      className: classnames(style$1['pop-util-mask'], maskClosing && style$1['pop-util-mask-leave']),
+    children: [renderMask && popupMountNode && /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+      className: classnames(style$1['pop-util-mask'], maskClosing && style$1['pop-util-mask-leave'], fixedModeClass),
       style: {
         top: popupMetrics.top,
-        height: popupMetrics.height
+        height: popupMetrics.height,
+        zIndex: MOBILE_MASK_Z_INDEX
       },
       onClick: closeDropdown,
       onTouchMove: e => {
         e.preventDefault();
       }
-    }), document.body), /*#__PURE__*/jsx(Dropdown, {
+    }), popupMountNode), /*#__PURE__*/jsx(Dropdown, {
       open: open,
       trigger: ['click'],
       placement: isMobile ? 'bottomLeft' : _placement,
@@ -1261,7 +1406,9 @@ const PopoverItem = withLocale(({
       align: isMobile ? {
         offset: [0, 0]
       } : undefined,
-      overlayClassName: classnames(style$1['pop-util-overlay'], overlayClassName),
+      getPopupContainer: resolveGetPopupContainer,
+      zIndex: isMobile ? MOBILE_POPUP_Z_INDEX : undefined,
+      overlayClassName: classnames(style$1['pop-util-overlay'], overlayClassName, isMobile && fixedModeClass),
       overlayStyle: mobileOverlayStyle,
       onOpenChange: handleOpenChange,
       menu: {
@@ -1495,7 +1642,9 @@ const DateRangePickerFilterItem = withLocale(withFieldItem(_ref => {
 var style = {"shortcuts-container":"kne-react-filter_3w4Bb","shortcut-item":"kne-react-filter_myRhG","is-active":"kne-react-filter_FowoG"};
 
 const _excluded$8 = ["value", "onChange", "defaultValue", "shortcuts", "shortcutOptions"];
+const FIELD_MOBILE_POPUP_CLASS = 'react-filter-field-mobile-popup';
 const TypeDateRangePickerField = _ref => {
+  var _props$classNames, _props$classNames2, _props$styles, _props$styles2;
   let {
       value: valueProp,
       onChange: onChangeProp,
@@ -1509,6 +1658,16 @@ const TypeDateRangePickerField = _ref => {
   } = useIntl({
     moduleName: 'Filter'
   });
+  const getPopupContainer = usePopupContainer();
+  const {
+    isMobile,
+    useBoundaryMount
+  } = useMobileFixedMode();
+  const fixedModeClass = useBoundaryMount ? style['is-boundary'] : style['is-viewport'];
+  const nestedPopupClassName = classnames(style['field-item-mobile-popup'], FIELD_MOBILE_POPUP_CLASS, fixedModeClass);
+  const nestedPopupStyle = isMobile ? {
+    zIndex: MOBILE_POPUP_Z_INDEX
+  } : undefined;
   const typeList = new Map([['date', formatMessage({
     id: 'customTime'
   })], ['month', formatMessage({
@@ -1598,6 +1757,19 @@ const TypeDateRangePickerField = _ref => {
         style: {
           width: '120px'
         },
+        getPopupContainer: getPopupContainer,
+        popupClassName: isMobile ? nestedPopupClassName : undefined,
+        classNames: isMobile ? {
+          popup: {
+            root: nestedPopupClassName
+          }
+        } : undefined,
+        popupStyle: nestedPopupStyle,
+        styles: isMobile ? {
+          popup: {
+            root: nestedPopupStyle
+          }
+        } : undefined,
         value: (value == null ? void 0 : value.type) || 'date',
         onChange: typeValue => {
           onChange(currentValue => {
@@ -1621,6 +1793,18 @@ const TypeDateRangePickerField = _ref => {
           value: val
         }))
       }), /*#__PURE__*/jsx(DatePicker.RangePicker, _extends({}, props, {
+        getPopupContainer: getPopupContainer,
+        classNames: isMobile ? _extends({}, props.classNames, {
+          popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
+            root: classnames((_props$classNames2 = props.classNames) == null || (_props$classNames2 = _props$classNames2.popup) == null ? void 0 : _props$classNames2.root, nestedPopupClassName)
+          })
+        }) : props.classNames,
+        styles: isMobile ? _extends({}, props.styles, {
+          popup: _extends({}, (_props$styles = props.styles) == null ? void 0 : _props$styles.popup, {
+            root: Object.assign({}, (_props$styles2 = props.styles) == null || (_props$styles2 = _props$styles2.popup) == null ? void 0 : _props$styles2.root, nestedPopupStyle)
+          })
+        }) : props.styles,
+        popupStyle: nestedPopupStyle,
         picker: (value == null ? void 0 : value.type) || 'date',
         value: Array.isArray(value == null ? void 0 : value.value) && value.value.length === 2 ? value.value.map(item => item && dayjs(item)) : null,
         onChange: dateValue => {
@@ -2577,6 +2761,7 @@ const CityFilterItemInner = _ref => {
   const {
     message
   } = App.useApp();
+  const getPopupContainer = usePopupContainer();
   const {
     locale
   } = useIntl();
@@ -2649,6 +2834,7 @@ const CityFilterItemInner = _ref => {
       children: [formatMessage({
         id: 'otherText'
       }), /*#__PURE__*/jsx(SelectAddress, _extends({}, props, {
+        getPopupContainer: getPopupContainer,
         className: style$1['filter-advanced-item-other-inner'],
         maxLength: maxLength,
         allowClear: false,