@kne/react-filter 1.0.6 → 1.0.8

package/dist/index.js

@@ -3,6 +3,7 @@ var react = require('react');
 var antd = require('antd');
 var reactIntl = require('@kne/react-intl');
 var get = require('lodash/get');
+var responsiveUtils = require('@kne/responsive-utils');
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@ant-design/icons');
 var clone = require('lodash/clone');
@@ -47,39 +48,80 @@ 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__*/react.createContext({});
 const Provider = context.Provider;
 const useContext = () => react.useContext(context);
 
-const useMobile = () => {
-  const [isMobile, setIsMobile] = react.useState(false);
+/**
+ * Filter 移动端判定：默认按视口宽度，仅在 ResponsiveProvider container 模式下按预览容器宽度。
+ * 避免 Filter 嵌入窄列时误用移动端布局。
+ */
+const useFilterIsMobile = () => {
+  const _useResponsiveContext = responsiveUtils.useResponsiveContext(),
+    mode = _useResponsiveContext.mode,
+    containerWidth = _useResponsiveContext.containerWidth;
+  const viewportIsMobile = responsiveUtils.useMediaQuery(responsiveUtils.IS_MOBILE_QUERY);
+  if (mode === 'container' && typeof containerWidth === 'number') {
+    return containerWidth < responsiveUtils.MOBILE_BREAKPOINT;
+  }
+  return viewportIsMobile;
+};
+
+const useResponsiveScrollListener = function (callback, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+  const getScrollElement = responsiveUtils.useScrollElement();
   react.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 = ({
-  enabled,
-  suspend = false,
-  preserveOverflowOnSuspend = false,
-  refreshKey
-} = {}) => {
+const useHorizontalScrollShadows = function (_temp) {
+  let _ref = _temp === void 0 ? {} : _temp,
+    enabled = _ref.enabled,
+    _ref$suspend = _ref.suspend,
+    suspend = _ref$suspend === void 0 ? false : _ref$suspend,
+    _ref$preserveOverflow = _ref.preserveOverflowOnSuspend,
+    preserveOverflowOnSuspend = _ref$preserveOverflow === void 0 ? false : _ref$preserveOverflow,
+    refreshKey = _ref.refreshKey;
   const scrollRef = react.useRef(null);
-  const [isOverflow, setIsOverflow] = react.useState(false);
-  const [showScrollPrev, setShowScrollPrev] = react.useState(false);
-  const [showScrollNext, setShowScrollNext] = react.useState(false);
+  const _useState = react.useState(false),
+    isOverflow = _useState[0],
+    setIsOverflow = _useState[1];
+  const _useState2 = react.useState(false),
+    showScrollPrev = _useState2[0],
+    setShowScrollPrev = _useState2[1];
+  const _useState3 = react.useState(false),
+    showScrollNext = _useState3[0],
+    setShowScrollNext = _useState3[1];
   const update = react.useCallback(() => {
     const el = scrollRef.current;
     if (!el || !enabled) {
@@ -108,14 +150,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,
@@ -127,18 +168,23 @@ const useHorizontalScrollShadows = ({
 
 const GAP = 8;
 const SAFETY_GAP = 2;
-const useVisibleItemCount = ({
-  items,
-  enabled,
-  strategy = 'asc'
-}) => {
+const useVisibleItemCount = _ref => {
+  let items = _ref.items,
+    enabled = _ref.enabled,
+    _ref$strategy = _ref.strategy,
+    strategy = _ref$strategy === void 0 ? 'asc' : _ref$strategy;
+  const safeItems = Array.isArray(items) ? items : [];
   const containerRef = react.useRef(null);
   const measureRef = react.useRef(null);
   const moreMeasureRef = react.useRef(null);
   const rafRef = react.useRef(null);
   const lastWidthRef = react.useRef(0);
-  const [containerEl, setContainerEl] = react.useState(null);
-  const [visibleCount, setVisibleCount] = react.useState(() => items.length > 0 ? 1 : 0);
+  const _useState = react.useState(null),
+    containerEl = _useState[0],
+    setContainerEl = _useState[1];
+  const _useState2 = react.useState(() => safeItems.length > 0 ? 1 : 0),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
   const setContainerRef = react.useCallback(node => {
     containerRef.current = node;
     setContainerEl(node || null);
@@ -150,6 +196,7 @@ const useVisibleItemCount = ({
     moreMeasureRef.current = node;
   }, []);
   const getWidths = react.useCallback(() => {
+    var _moreMeasureRef$curre;
     const container = containerRef.current;
     const measureEl = measureRef.current;
     if (!container || !measureEl) {
@@ -163,8 +210,8 @@ const useVisibleItemCount = ({
     if (!itemNodes.length) {
       return null;
     }
-    const moreButtonWidth = moreMeasureRef.current?.getBoundingClientRect().width || 0;
-    if (items.length > 1 && moreButtonWidth <= 0) {
+    const moreButtonWidth = ((_moreMeasureRef$curre = moreMeasureRef.current) == null ? void 0 : _moreMeasureRef$curre.getBoundingClientRect().width) || 0;
+    if (safeItems.length > 1 && moreButtonWidth <= 0) {
       return null;
     }
     const itemWidths = Array.from(itemNodes, node => node.getBoundingClientRect().width);
@@ -173,24 +220,22 @@ const useVisibleItemCount = ({
       itemWidths,
       moreButtonWidth
     };
-  }, [items.length]);
+  }, [safeItems.length]);
   const getWidthForCount = react.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 = react.useCallback(widths => {
-    const {
-      containerWidth,
-      itemWidths,
-      moreButtonWidth
-    } = widths;
-    const maxCount = Math.min(items.length, itemWidths.length);
+    const containerWidth = widths.containerWidth,
+      itemWidths = widths.itemWidths,
+      moreButtonWidth = widths.moreButtonWidth;
+    const maxCount = Math.min(safeItems.length, itemWidths.length);
     let count = 1;
     if (strategy === 'desc') {
       count = maxCount;
@@ -213,10 +258,10 @@ const useVisibleItemCount = ({
       }
     }
     return Math.max(1, count);
-  }, [getWidthForCount, items.length, strategy]);
+  }, [getWidthForCount, safeItems.length, strategy]);
   const calculateByWidth = react.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();
@@ -225,7 +270,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 = react.useCallback(() => {
     if (rafRef.current) {
       window.cancelAnimationFrame(rafRef.current);
@@ -243,14 +288,15 @@ const useVisibleItemCount = ({
         rafRef.current = null;
       }
     };
-  }, [items, scheduleCalculate]);
+  }, [safeItems, scheduleCalculate]);
   react.useEffect(() => {
     if (!enabled || !containerEl) {
       return undefined;
     }
     const observer = new ResizeObserver(entries => {
+      var _entry$contentRect$wi;
       const entry = entries.find(item => item.target === containerEl);
-      const nextWidth = entry?.contentRect.width ?? containerEl.clientWidth;
+      const nextWidth = (_entry$contentRect$wi = entry == null ? void 0 : entry.contentRect.width) != null ? _entry$contentRect$wi : containerEl.clientWidth;
       if (Math.abs(nextWidth - lastWidthRef.current) < 1) {
         return;
       }
@@ -259,16 +305,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,
@@ -298,22 +343,21 @@ 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 => {
-  const {
-    mode,
-    items,
-    lines
-  } = normalizeFilterList(list);
+  const _normalizeFilterList = normalizeFilterList(list),
+    mode = _normalizeFilterList.mode,
+    items = _normalizeFilterList.items,
+    lines = _normalizeFilterList.lines;
   if (mode === 'flat') return items;
   return lines.reduce((result, line) => result.concat(line), []);
 };
@@ -412,7 +456,7 @@ const FilterLines = _ref3 => {
   const _useState = react.useState(false),
     isExpand = _useState[0],
     setIsExpand = _useState[1];
-  const isMobile = useMobile();
+  const isMobile = useFilterIsMobile();
   const _useHorizontalScrollS = useHorizontalScrollShadows({
       enabled: isMobile,
       refreshKey: list
@@ -686,7 +730,10 @@ const withLocale = reactIntl.createWithIntlProvider({
 const FilterValueDisplay = withLocale(_ref => {
   let filterValue = _ref.value,
     extraExpand = _ref.extraExpand,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    className = _ref.className,
+    hideLabel = _ref.hideLabel,
+    flush = _ref.flush;
   const _useIntl = reactIntl.useIntl({
       moduleName: 'Filter'
     }),
@@ -694,7 +741,7 @@ const FilterValueDisplay = withLocale(_ref => {
   const _useState = react.useState(false),
     isExpand = _useState[0],
     setIsExpand = _useState[1];
-  const isMobile = useMobile();
+  const isMobile = useFilterIsMobile();
   const _useHorizontalScrollS = useHorizontalScrollShadows({
       enabled: isMobile,
       suspend: isExpand,
@@ -728,10 +775,13 @@ const FilterValueDisplay = withLocale(_ref => {
     }, name);
   });
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
-    className: classnames__default["default"](style$1['filter-title'], style$1['filter-value-display']),
+    className: classnames__default["default"](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__*/jsxRuntime.jsx("span", {
+    size: hideLabel ? 0 : 16,
+    children: [hideLabel ? null : /*#__PURE__*/jsxRuntime.jsx("span", {
       className: style$1['filter-label'],
       children: formatMessage({
         id: 'selectedText'
@@ -846,29 +896,58 @@ const FilterProvider = _ref => {
   });
 };
 
-const FilterOuter = ({
-  children,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx(FilterProvider, {
-    ...props,
+const useFilterViewportVars = () => {
+  const boundaryRef = react.useRef(null);
+  const {
+    mode
+  } = responsiveUtils.useResponsiveContext();
+  react.useEffect(() => {
+    const el = boundaryRef.current;
+    if (!el || typeof window === 'undefined' || mode === 'container') {
+      return undefined;
+    }
+    const update = () => {
+      responsiveUtils.applyViewportCssVars(el, {
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    update();
+    window.addEventListener('resize', update, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener('resize', update);
+      responsiveUtils.resetViewportCssVars(el);
+    };
+  }, [mode]);
+  return boundaryRef;
+};
+
+const _excluded$d = ["children", "className"];
+const FilterOuter = _ref => {
+  let children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  const isMobile = useFilterIsMobile();
+  const boundaryRef = useFilterViewportVars();
+  return /*#__PURE__*/jsxRuntime.jsx(FilterProvider, _extends({}, props, {
     children: context => /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"](style$1['filter'], 'filter', className),
-      children: children({
-        ...context,
+      ref: boundaryRef,
+      className: classnames__default["default"](style$1['filter'], 'filter', responsiveUtils.RESPONSIVE_BOUNDARY_CLASS, isMobile && style$1['is-mobile'], className),
+      children: children(_extends({}, context, {
         props
-      })
+      }))
     })
-  });
+  }));
 };
 
-const _excluded$7 = ["defaultValue"],
+const _excluded$c = ["defaultValue"],
   _excluded2 = ["extraExpand"];
 const Filter = withLocale(_ref => {
   let _ref$defaultValue = _ref.defaultValue,
     defaultValue = _ref$defaultValue === void 0 ? [] : _ref$defaultValue,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return /*#__PURE__*/jsxRuntime.jsx(FilterOuter, _extends({}, props, {
     defaultValue: defaultValue,
     children: _ref2 => {
@@ -889,6 +968,24 @@ const Filter = withLocale(_ref => {
   }));
 });
 
+/**
+ * 与 system-layout Toolbar 一致：
+ * - container 模式（example 手机预览）：absolute + boundary 挂载
+ * - viewport 模式（真实移动端）：fixed + 视口坐标
+ */
+const useMobileFixedMode = () => {
+  const isMobile = useFilterIsMobile();
+  const _useResponsiveContext = responsiveUtils.useResponsiveContext(),
+    mode = _useResponsiveContext.mode;
+  const useBoundaryMount = isMobile && mode === 'container';
+  const useViewportFixed = isMobile && mode !== 'container';
+  return {
+    isMobile,
+    useBoundaryMount,
+    useViewportFixed
+  };
+};
+
 const FilterItem = withLocale(_ref => {
   let open = _ref.open,
     active = _ref.active,
@@ -918,46 +1015,109 @@ const FilterItem = withLocale(_ref => {
   });
 });
 
-const _excluded$6 = ["value", "onChange", "interceptor", "label", "render"];
+const getMobilePopupMetrics = function (triggerEl, _temp) {
+  var _scrollRect$top, _scrollRect$bottom, _scrollRect$width;
+  let _ref = _temp === void 0 ? {} : _temp,
+    scrollEl = _ref.scrollEl,
+    boundaryEl = _ref.boundaryEl,
+    useBoundaryMount = _ref.useBoundaryMount,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 4 : _ref$offset;
+  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,
+      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$b = ["value", "onChange", "interceptor", "label", "render"];
 const isNotEmpty$1 = value => {
   if (value === null || value === undefined) return false;
   if (typeof value === 'string' && value.trim() === '') return false;
   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 = function (WrappedComponent, options) {
   if (options === void 0) {
     options = {};
   }
   return _ref => {
+    var _popupMetrics$left;
     let value = _ref.value,
       onChange = _ref.onChange,
       interceptor = _ref.interceptor,
       label = _ref.label,
       render = _ref.render,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
     const _useState = react.useState(false),
       open = _useState[0],
       setOpen = _useState[1];
+    const _useMobileFixedMode = useMobileFixedMode(),
+      isMobile = _useMobileFixedMode.isMobile,
+      useBoundaryMount = _useMobileFixedMode.useBoundaryMount;
+    const fixedModeClass = useBoundaryMount ? style$1['is-boundary'] : style$1['is-viewport'];
     const _useState2 = react.useState(false),
-      isMobile = _useState2[0],
-      setIsMobile = _useState2[1];
+      renderMask = _useState2[0],
+      setRenderMask = _useState2[1];
     const _useState3 = react.useState(false),
-      renderMask = _useState3[0],
-      setRenderMask = _useState3[1];
-    const _useState4 = react.useState(false),
-      maskClosing = _useState4[0],
-      setMaskClosing = _useState4[1];
-    const _useState5 = react.useState({
+      maskClosing = _useState3[0],
+      setMaskClosing = _useState3[1];
+    const _useState4 = react.useState({
         top: 0,
         pageTop: 0,
         height: 0
       }),
-      popupMetrics = _useState5[0],
-      setPopupMetrics = _useState5[1];
+      popupMetrics = _useState4[0],
+      setPopupMetrics = _useState4[1];
     const triggerRef = react.useRef(null);
+    const getBoundaryElement = responsiveUtils.usePopupContainer();
+    const getScrollElement = responsiveUtils.useScrollElement();
+    const resolveGetPopupContainer = react.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 = react.useCallback(metrics => {
       if (typeof document === 'undefined') return;
       document.body.style.setProperty('--react-filter-field-mobile-height', metrics.height + "px");
@@ -966,37 +1126,16 @@ const withFieldItem = function (WrappedComponent, options) {
     }, []);
     const updatePopupMetrics = react.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]);
-    react.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);
-      };
-    }, []);
-    react.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);
     react.useEffect(() => {
       if (typeof document === 'undefined' || !isMobile || popupMetrics.height <= 0) return;
       setMobilePopupVariables(popupMetrics);
@@ -1040,14 +1179,15 @@ const withFieldItem = function (WrappedComponent, options) {
       '--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__default["default"](classNames == null || (_classNames$popup = classNames.popup) == null ? void 0 : _classNames$popup.root, style$1['field-item-mobile-popup'], FIELD_MOBILE_POPUP_CLASS)
+          root: classnames__default["default"](classNames == null || (_classNames$popup = classNames.popup) == null ? void 0 : _classNames$popup.root, style$1['field-item-mobile-popup'], FIELD_MOBILE_POPUP_CLASS$1, fixedModeClass)
         })
       });
     };
@@ -1074,9 +1214,10 @@ const withFieldItem = function (WrappedComponent, options) {
         valueType: "all",
         onOpenChange: handleOpenChange,
         onDropdownVisibleChange: handleOpenChange,
-        popupClassName: classnames__default["default"](props.popupClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
-        dropdownClassName: classnames__default["default"](props.dropdownClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
-        overlayClassName: classnames__default["default"](props.overlayClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
+        getPopupContainer: resolveGetPopupContainer,
+        popupClassName: classnames__default["default"](props.popupClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS$1, isMobile && fixedModeClass),
+        dropdownClassName: classnames__default["default"](props.dropdownClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS$1, isMobile && fixedModeClass),
+        overlayClassName: classnames__default["default"](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),
@@ -1088,21 +1229,27 @@ const withFieldItem = function (WrappedComponent, options) {
           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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [renderMask && typeof document !== 'undefined' && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classnames__default["default"](style$1['pop-util-mask'], maskClosing && style$1['pop-util-mask-leave']),
+      children: [renderMask && popupMountNode && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"](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__*/jsxRuntime.jsx("span", {
+      }), popupMountNode), /*#__PURE__*/jsxRuntime.jsx("span", {
         ref: triggerRef,
         children: /*#__PURE__*/jsxRuntime.jsx(FilterItem, {
           label: label,
@@ -1126,6 +1273,7 @@ const isNotEmpty = value => {
 const MASK_ANIMATION_DURATION = 180;
 const MOBILE_POPUP_OFFSET = 4;
 const PopoverItem = withLocale(_ref => {
+  var _popupMetrics$left;
   let value = _ref.value,
     label = _ref.label,
     onValidate = _ref.onValidate,
@@ -1134,6 +1282,7 @@ const PopoverItem = withLocale(_ref => {
     placement = _ref$placement === void 0 ? 'bottomLeft' : _ref$placement,
     onOpenChange = _ref.onOpenChange,
     onChange = _ref.onChange,
+    customGetPopupContainer = _ref.getPopupContainer,
     children = _ref.children;
   const _useState = react.useState(value),
     state = _useState[0],
@@ -1141,22 +1290,41 @@ const PopoverItem = withLocale(_ref => {
   const _useState2 = react.useState(false),
     open = _useState2[0],
     setOpen = _useState2[1];
+  const _useMobileFixedMode = useMobileFixedMode(),
+    isMobile = _useMobileFixedMode.isMobile,
+    useBoundaryMount = _useMobileFixedMode.useBoundaryMount;
+  const fixedModeClass = useBoundaryMount ? style$1['is-boundary'] : style$1['is-viewport'];
+  const getBoundaryElement = responsiveUtils.usePopupContainer();
+  const getScrollElement = responsiveUtils.useScrollElement();
+  const resolveGetPopupContainer = react.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 _useState3 = react.useState(false),
-    isMobile = _useState3[0],
-    setIsMobile = _useState3[1];
+    renderMask = _useState3[0],
+    setRenderMask = _useState3[1];
   const _useState4 = react.useState(false),
-    renderMask = _useState4[0],
-    setRenderMask = _useState4[1];
-  const _useState5 = react.useState(false),
-    maskClosing = _useState5[0],
-    setMaskClosing = _useState5[1];
-  const _useState6 = react.useState({
+    maskClosing = _useState4[0],
+    setMaskClosing = _useState4[1];
+  const _useState5 = react.useState({
       top: 0,
       pageTop: 0,
       height: 0
     }),
-    popupMetrics = _useState6[0],
-    setPopupMetrics = _useState6[1];
+    popupMetrics = _useState5[0],
+    setPopupMetrics = _useState5[1];
   const triggerRef = react.useRef(null);
   const disabled = react.useMemo(() => {
     return onValidate && !onValidate(state);
@@ -1165,37 +1333,17 @@ const PopoverItem = withLocale(_ref => {
       moduleName: 'Filter'
     }),
     formatMessage = _useIntl.formatMessage;
-  react.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 = react.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
     });
-  }, []);
-  react.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);
   react.useEffect(() => {
     if (open && isMobile) {
       setRenderMask(true);
@@ -1227,7 +1375,8 @@ const PopoverItem = withLocale(_ref => {
   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__*/jsxRuntime.jsxs("div", {
     className: style$1['pop-util-body'],
@@ -1269,17 +1418,18 @@ const PopoverItem = withLocale(_ref => {
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [renderMask && typeof document !== 'undefined' && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"](style$1['pop-util-mask'], maskClosing && style$1['pop-util-mask-leave']),
+    children: [renderMask && popupMountNode && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"](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__*/jsxRuntime.jsx(antd.Dropdown, {
+    }), popupMountNode), /*#__PURE__*/jsxRuntime.jsx(antd.Dropdown, {
       open: open,
       trigger: ['click'],
       placement: isMobile ? 'bottomLeft' : placement,
@@ -1287,7 +1437,9 @@ const PopoverItem = withLocale(_ref => {
       align: isMobile ? {
         offset: [0, 0]
       } : undefined,
-      overlayClassName: classnames__default["default"](style$1['pop-util-overlay'], overlayClassName),
+      getPopupContainer: resolveGetPopupContainer,
+      zIndex: isMobile ? MOBILE_POPUP_Z_INDEX : undefined,
+      overlayClassName: classnames__default["default"](style$1['pop-util-overlay'], overlayClassName, isMobile && fixedModeClass),
       overlayStyle: mobileOverlayStyle,
       onOpenChange: handleOpenChange,
       menu: {
@@ -1309,17 +1461,17 @@ const PopoverItem = withLocale(_ref => {
   });
 });
 
-const InputFilterItem$2 = withLocale(({
-  label,
-  value,
-  onChange,
-  placeholder,
-  onValidate,
-  overlayClassName,
-  placement,
-  onOpenChange,
-  ...props
-}) => {
+const _excluded$a = ["label", "value", "onChange", "placeholder", "onValidate", "overlayClassName", "placement", "onOpenChange"];
+const InputFilterItem$2 = withLocale(_ref => {
+  let label = _ref.label,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    onValidate = _ref.onValidate,
+    overlayClassName = _ref.overlayClassName,
+    placement = _ref.placement,
+    onOpenChange = _ref.onOpenChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/jsxRuntime.jsx(PopoverItem, {
     label: label,
     value: value,
@@ -1328,22 +1480,23 @@ const InputFilterItem$2 = withLocale(({
     overlayClassName,
     placement,
     onOpenChange,
-    children: ({
-      value,
-      onChange
-    }) => /*#__PURE__*/jsxRuntime.jsx(antd.Input, {
-      ...props,
-      placeholder: placeholder || `请输入${label}`,
-      className: style$1['filter-item-text'],
-      value: get__default["default"](value, 'value', ''),
-      onChange: e => onChange(e.target.value ? {
-        label: e.target.value,
-        value: e.target.value
-      } : null)
-    })
+    children: _ref2 => {
+      let value = _ref2.value,
+        onChange = _ref2.onChange;
+      return /*#__PURE__*/jsxRuntime.jsx(antd.Input, _extends({}, props, {
+        placeholder: placeholder || "\u8BF7\u8F93\u5165" + label,
+        className: style$1['filter-item-text'],
+        value: get__default["default"](value, 'value', ''),
+        onChange: e => onChange(e.target.value ? {
+          label: e.target.value,
+          value: e.target.value
+        } : null)
+      }));
+    }
   });
 });
 
+const _excluded$9 = ["label", "value", "onChange", "placeholder", "onValidate", "overlayClassName", "placement", "onOpenChange", "unit"];
 const computedFilterValue = (range, unit, formatMessage) => {
   if (!isNumber__default["default"](range[0]) && !isNumber__default["default"](range[1])) {
     return null;
@@ -1351,7 +1504,7 @@ const computedFilterValue = (range, unit, formatMessage) => {
   return {
     label: (range => {
       if (isNumber__default["default"](range[0]) && isNumber__default["default"](range[1])) {
-        return `${range[0]}-${range[1]}${unit || ''}`;
+        return range[0] + "-" + range[1] + (unit || '');
       }
       if (isNumber__default["default"](range[0])) {
         return formatMessage({
@@ -1377,23 +1530,22 @@ const defaultPropsOnValidate = value => {
   const range = get__default["default"](value, 'value');
   return !(range && isNumber__default["default"](range[0]) && isNumber__default["default"](range[1]) && range[1] < range[0]);
 };
-const NumberRangeFilterItem$1 = withLocale(({
-  label,
-  value,
-  onChange,
-  placeholder,
-  onValidate = defaultPropsOnValidate,
-  overlayClassName,
-  placement,
-  onOpenChange,
-  unit,
-  ...props
-}) => {
-  const {
-    formatMessage
-  } = reactIntl.useIntl({
-    moduleName: 'Filter'
-  });
+const NumberRangeFilterItem$1 = withLocale(_ref => {
+  let label = _ref.label,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    _ref$onValidate = _ref.onValidate,
+    onValidate = _ref$onValidate === void 0 ? defaultPropsOnValidate : _ref$onValidate,
+    overlayClassName = _ref.overlayClassName,
+    placement = _ref.placement,
+    onOpenChange = _ref.onOpenChange,
+    unit = _ref.unit,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  const _useIntl = reactIntl.useIntl({
+      moduleName: 'Filter'
+    }),
+    formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/jsxRuntime.jsx(PopoverItem, {
     label: label,
     value: value,
@@ -1402,136 +1554,141 @@ const NumberRangeFilterItem$1 = withLocale(({
     overlayClassName,
     placement,
     onOpenChange,
-    children: ({
-      value,
-      onChange
-    }) => /*#__PURE__*/jsxRuntime.jsxs(antd.Space.Compact, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(antd.InputNumber, {
-        ...props,
-        placeholder: placeholder || `${formatMessage({
-          id: 'pleaseInput'
-        })}${label}`,
-        className: style$1['filter-item-number-range'],
-        value: get__default["default"](value, 'value[0]', ''),
-        onChange: target => {
-          onChange(computedFilterValue([target, get__default["default"](value, 'value[1]')], unit, formatMessage));
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(antd.Input, {
-        style: {
-          width: 30,
-          borderLeft: 0,
-          borderRight: 0,
-          pointerEvents: 'none'
-        },
-        placeholder: "~",
-        disabled: true
-      }), /*#__PURE__*/jsxRuntime.jsx(antd.InputNumber, {
-        ...props,
-        placeholder: placeholder || `${formatMessage({
-          id: 'pleaseInput'
-        })}${label}`,
-        className: style$1['filter-item-number-range'],
-        value: get__default["default"](value, 'value[1]', ''),
-        onChange: target => {
-          onChange(computedFilterValue([get__default["default"](value, 'value[0]'), target], unit, formatMessage));
-        }
-      }), unit && /*#__PURE__*/jsxRuntime.jsx(antd.Input, {
-        style: {
-          width: 50,
-          borderLeft: 0
-        },
-        value: unit,
-        disabled: true
-      })]
-    })
+    children: _ref2 => {
+      let value = _ref2.value,
+        onChange = _ref2.onChange;
+      return /*#__PURE__*/jsxRuntime.jsxs(antd.Space.Compact, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(antd.InputNumber, _extends({}, props, {
+          placeholder: placeholder || "" + formatMessage({
+            id: 'pleaseInput'
+          }) + label,
+          className: style$1['filter-item-number-range'],
+          value: get__default["default"](value, 'value[0]', ''),
+          onChange: target => {
+            onChange(computedFilterValue([target, get__default["default"](value, 'value[1]')], unit, formatMessage));
+          }
+        })), /*#__PURE__*/jsxRuntime.jsx(antd.Input, {
+          style: {
+            width: 30,
+            borderLeft: 0,
+            borderRight: 0,
+            pointerEvents: 'none'
+          },
+          placeholder: "~",
+          disabled: true
+        }), /*#__PURE__*/jsxRuntime.jsx(antd.InputNumber, _extends({}, props, {
+          placeholder: placeholder || "" + formatMessage({
+            id: 'pleaseInput'
+          }) + label,
+          className: style$1['filter-item-number-range'],
+          value: get__default["default"](value, 'value[1]', ''),
+          onChange: target => {
+            onChange(computedFilterValue([get__default["default"](value, 'value[0]'), target], unit, formatMessage));
+          }
+        })), unit && /*#__PURE__*/jsxRuntime.jsx(antd.Input, {
+          style: {
+            width: 50,
+            borderLeft: 0
+          },
+          value: unit,
+          disabled: true
+        })]
+      });
+    }
   });
 });
 
-const DatePickerFilterItem = withLocale(withFieldItem(({
-  value,
-  onChange,
-  picker = 'date',
-  ...props
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx(antd.DatePicker, {
-    ...props,
+const _excluded$8 = ["value", "onChange", "picker"];
+const DatePickerFilterItem = withLocale(withFieldItem(_ref => {
+  var _props$classNames, _props$classNames2;
+  let value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$picker = _ref.picker,
+    picker = _ref$picker === void 0 ? 'date' : _ref$picker,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  return /*#__PURE__*/jsxRuntime.jsx(antd.DatePicker, _extends({}, props, {
     inputReadOnly: true,
     picker: picker,
-    classNames: {
-      ...props.classNames,
-      popup: {
-        ...props.classNames?.popup,
-        root: classnames__default["default"](props.classNames?.popup?.root, style$1['date-picker-popup'])
-      }
-    },
+    classNames: _extends({}, props.classNames, {
+      popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
+        root: classnames__default["default"]((_props$classNames2 = props.classNames) == null || (_props$classNames2 = _props$classNames2.popup) == null ? void 0 : _props$classNames2.root, style$1['date-picker-popup'])
+      })
+    }),
     value: value && dayjs__default["default"](value.value),
     onChange: value => {
-      const {
-        format
-      } = Object.assign({
-        format: 'YYYY-MM-DD'
-      }, props);
+      const _Object$assign = Object.assign({
+          format: 'YYYY-MM-DD'
+        }, props),
+        format = _Object$assign.format;
       value && onChange({
-        label: picker !== 'date' ? `${value.startOf(picker).format(format)}~${value.endOf(picker).format(format)}` : value.format(format),
+        label: picker !== 'date' ? value.startOf(picker).format(format) + "~" + value.endOf(picker).format(format) : value.format(format),
         value: new Date(value.startOf(picker).valueOf())
       });
     }
-  });
+  }));
 }));
 
-const DateRangePickerFilterItem = withLocale(withFieldItem(({
-  value,
-  onChange,
-  header,
-  ...props
-}) => {
+const _excluded$7 = ["value", "onChange", "header"];
+const DateRangePickerFilterItem = withLocale(withFieldItem(_ref => {
+  var _props$classNames, _props$classNames2;
+  let value = _ref.value,
+    onChange = _ref.onChange,
+    header = _ref.header,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
     vertical: true,
     children: [typeof header === 'function' ? header({
       value,
       onChange
-    }) : header, /*#__PURE__*/jsxRuntime.jsx(antd.DatePicker.RangePicker, {
-      ...props,
+    }) : header, /*#__PURE__*/jsxRuntime.jsx(antd.DatePicker.RangePicker, _extends({}, props, {
       inputReadOnly: true,
       allowEmpty: [false, false],
-      classNames: {
-        ...props.classNames,
-        popup: {
-          ...props.classNames?.popup,
-          root: classnames__default["default"](props.classNames?.popup?.root, style$1['date-range-picker-popup'])
-        }
-      },
+      classNames: _extends({}, props.classNames, {
+        popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
+          root: classnames__default["default"]((_props$classNames2 = props.classNames) == null || (_props$classNames2 = _props$classNames2.popup) == null ? void 0 : _props$classNames2.root, style$1['date-range-picker-popup'])
+        })
+      }),
       value: value && Array.isArray(value.value) && value.value.length === 2 && value.value.map(item => dayjs__default["default"](item)),
       onChange: value => {
-        const {
-          format
-        } = Object.assign({
-          format: 'YYYY-MM-DD'
-        }, props);
+        const _Object$assign = Object.assign({
+            format: 'YYYY-MM-DD'
+          }, props),
+          format = _Object$assign.format;
         onChange({
           label: value.map(item => item.format(format)).join('~'),
           value: value.map(item => new Date(item.valueOf()))
         });
       }
-    })]
+    }))]
   });
 }));
 
 var style = {"shortcuts-container":"kne-react-filter_3w4Bb","shortcut-item":"kne-react-filter_myRhG","is-active":"kne-react-filter_FowoG"};
 
-const _excluded$5 = ["value", "onChange", "defaultValue", "shortcuts", "shortcutOptions"];
+const _excluded$6 = ["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 valueProp = _ref.value,
     onChangeProp = _ref.onChange,
     defaultValue = _ref.defaultValue,
     _ref$shortcuts = _ref.shortcuts,
     shortcuts = _ref$shortcuts === void 0 ? true : _ref$shortcuts,
     shortcutOptions = _ref.shortcutOptions,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const _useIntl = reactIntl.useIntl({
       moduleName: 'Filter'
     }),
     formatMessage = _useIntl.formatMessage;
+  const getPopupContainer = responsiveUtils.usePopupContainer();
+  const _useMobileFixedMode = useMobileFixedMode(),
+    isMobile = _useMobileFixedMode.isMobile,
+    useBoundaryMount = _useMobileFixedMode.useBoundaryMount;
+  const fixedModeClass = useBoundaryMount ? style['is-boundary'] : style['is-viewport'];
+  const nestedPopupClassName = classnames__default["default"](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({
@@ -1625,6 +1782,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 => {
@@ -1652,6 +1822,18 @@ const TypeDateRangePickerField = _ref => {
           };
         })
       }), /*#__PURE__*/jsxRuntime.jsx(antd.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__default["default"]((_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__default["default"](item)) : null,
         onChange: dateValue => {
@@ -1668,47 +1850,46 @@ const TypeDateRangePickerField = _ref => {
   });
 };
 
-const TypeDateRangePickerFilterItem = withLocale(({
-  label,
-  value,
-  onChange,
-  ...props
-}) => {
+const _excluded$5 = ["label", "value", "onChange"];
+const TypeDateRangePickerFilterItem = withLocale(_ref => {
+  let label = _ref.label,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return /*#__PURE__*/jsxRuntime.jsx(PopoverItem, {
     label: label,
     value: value,
     onChange: onChange,
     onValidate: item => {
-      const itemValue = item?.value;
-      return itemValue?.type && Array.isArray(itemValue?.value) && itemValue.value.length === 2;
+      const itemValue = item == null ? void 0 : item.value;
+      return (itemValue == null ? void 0 : itemValue.type) && Array.isArray(itemValue == null ? void 0 : itemValue.value) && itemValue.value.length === 2;
     },
-    children: ({
-      value,
-      onChange
-    }) => /*#__PURE__*/jsxRuntime.jsx(TypeDateRangePickerField, {
-      ...props,
-      inputReadOnly: true,
-      className: style$1['filter-item-text'],
-      value: get__default["default"](value, 'value'),
-      onChange: pickerValue => {
-        const {
-          format = 'YYYY-MM-DD'
-        } = props;
-        const val = pickerValue?.value || [];
-        let displayLabel = '';
-        if (val[0] && !val[1]) {
-          displayLabel = `${dayjs__default["default"](val[0]).format(format)}以后`;
-        } else if (!val[0] && val[1]) {
-          displayLabel = `${dayjs__default["default"](val[1]).format(format)}以前`;
-        } else if (val[0] && val[1]) {
-          displayLabel = `${dayjs__default["default"](val[0]).format(format)}~${dayjs__default["default"](val[1]).format(format)}`;
+    children: _ref2 => {
+      let value = _ref2.value,
+        onChange = _ref2.onChange;
+      return /*#__PURE__*/jsxRuntime.jsx(TypeDateRangePickerField, _extends({}, props, {
+        inputReadOnly: true,
+        className: style$1['filter-item-text'],
+        value: get__default["default"](value, 'value'),
+        onChange: pickerValue => {
+          const _props$format = props.format,
+            format = _props$format === void 0 ? 'YYYY-MM-DD' : _props$format;
+          const val = (pickerValue == null ? void 0 : pickerValue.value) || [];
+          let displayLabel = '';
+          if (val[0] && !val[1]) {
+            displayLabel = dayjs__default["default"](val[0]).format(format) + "\u4EE5\u540E";
+          } else if (!val[0] && val[1]) {
+            displayLabel = dayjs__default["default"](val[1]).format(format) + "\u4EE5\u524D";
+          } else if (val[0] && val[1]) {
+            displayLabel = dayjs__default["default"](val[0]).format(format) + "~" + dayjs__default["default"](val[1]).format(format);
+          }
+          onChange({
+            label: displayLabel,
+            value: pickerValue
+          });
         }
-        onChange({
-          label: displayLabel,
-          value: pickerValue
-        });
-      }
-    })
+      }));
+    }
   });
 });
 
@@ -2607,6 +2788,7 @@ const CityFilterItemInner = ({
   const {
     message
   } = antd.App.useApp();
+  const getPopupContainer = responsiveUtils.usePopupContainer();
   const {
     locale
   } = reactIntl.useIntl();
@@ -2680,6 +2862,7 @@ const CityFilterItemInner = ({
         id: 'otherText'
       }), /*#__PURE__*/jsxRuntime.jsx(superSelectPlus.SelectAddress, {
         ...props,
+        getPopupContainer: getPopupContainer,
         className: style$1['filter-advanced-item-other-inner'],
         maxLength: maxLength,
         allowClear: false,