@kne/react-filter 1.0.2 → 1.0.3

package/dist/index.js

@@ -4,6 +4,7 @@ var antd = require('antd');
 var reactIntl = require('@kne/react-intl');
 var get = require('lodash/get');
 var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@ant-design/icons');
 var clone = require('lodash/clone');
 var reactDom = require('react-dom');
 var isNumber = require('lodash/isNumber');
@@ -45,12 +46,84 @@ 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-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-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","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","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
+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-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-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"};
 
 const context = /*#__PURE__*/react.createContext({});
 const Provider = context.Provider;
 const useContext = () => react.useContext(context);
 
+const useMobile = () => {
+  const [isMobile, setIsMobile] = react.useState(false);
+  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);
+    };
+  }, []);
+  return isMobile;
+};
+
+const useHorizontalScrollShadows = ({
+  enabled,
+  suspend = false,
+  preserveOverflowOnSuspend = false,
+  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 update = react.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el || !enabled) {
+      setShowScrollPrev(false);
+      setShowScrollNext(false);
+      setIsOverflow(false);
+      return;
+    }
+    if (suspend) {
+      setShowScrollPrev(false);
+      setShowScrollNext(false);
+      if (!preserveOverflowOnSuspend) {
+        setIsOverflow(false);
+      }
+      return;
+    }
+    setIsOverflow(el.scrollWidth > el.clientWidth);
+    setShowScrollPrev(el.scrollLeft > 1);
+    setShowScrollNext(el.scrollWidth > el.clientWidth && el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, [enabled, preserveOverflowOnSuspend, suspend]);
+  react.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !enabled || suspend) {
+      update();
+      return;
+    }
+    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]);
+  return {
+    scrollRef,
+    isOverflow,
+    showScrollPrev,
+    showScrollNext,
+    updateScrollShadowVisible: update
+  };
+};
+
 const Line$1 = _ref => {
   let list = _ref.list,
     children = _ref.children;
@@ -101,57 +174,18 @@ const FilterLines = _ref2 => {
   const _useState = react.useState(false),
     isExpand = _useState[0],
     setIsExpand = _useState[1];
-  const _useState2 = react.useState(false),
-    isMobile = _useState2[0],
-    setIsMobile = _useState2[1];
-  const _useState3 = react.useState(false),
-    showScrollNext = _useState3[0],
-    setShowScrollNext = _useState3[1];
-  const scrollRef = react.useRef(null);
+  const isMobile = useMobile();
+  const _useHorizontalScrollS = useHorizontalScrollShadows({
+      enabled: isMobile,
+      refreshKey: list
+    }),
+    scrollRef = _useHorizontalScrollS.scrollRef,
+    showScrollPrev = _useHorizontalScrollS.showScrollPrev,
+    showScrollNext = _useHorizontalScrollS.showScrollNext;
   const _useIntl = reactIntl.useIntl({
       moduleName: 'Filter'
     }),
     formatMessage = _useIntl.formatMessage;
-  const updateScrollNextVisible = react.useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) {
-      setShowScrollNext(false);
-      return;
-    }
-    setShowScrollNext(el.scrollWidth > el.clientWidth && el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
-  }, []);
-  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 (!isMobile) {
-      setShowScrollNext(false);
-      return;
-    }
-    const el = scrollRef.current;
-    if (!el) return;
-    updateScrollNextVisible();
-    const update = () => {
-      updateScrollNextVisible();
-    };
-    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);
-    };
-  }, [isMobile, list, updateScrollNextVisible]);
   const scrollToNext = react.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -159,7 +193,7 @@ const FilterLines = _ref2 => {
       left: el.scrollLeft + el.clientWidth * 0.8,
       behavior: 'smooth'
     });
-  }, []);
+  }, [scrollRef]);
   const scrollItemIntoView = react.useCallback(e => {
     if (!isMobile) return;
     const container = scrollRef.current;
@@ -170,7 +204,7 @@ const FilterLines = _ref2 => {
       block: 'nearest',
       inline: 'center'
     });
-  }, [isMobile]);
+  }, [isMobile, scrollRef]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
       className: classnames__default["default"](style$1['filter-title'], 'filter-title', className),
@@ -190,7 +224,9 @@ const FilterLines = _ref2 => {
           flex: 1,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: style$1['filter-list-scroll-wrap'],
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            children: [isMobile && showScrollPrev ? /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: style$1['filter-scroll-prev-shadow']
+            }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
               className: style$1['filter-list-scroll'],
               ref: scrollRef,
               onClick: scrollItemIntoView,
@@ -358,6 +394,42 @@ const FilterValueDisplay = withLocale(_ref => {
       moduleName: 'Filter'
     }),
     formatMessage = _useIntl.formatMessage;
+  const _useState = react.useState(false),
+    isExpand = _useState[0],
+    setIsExpand = _useState[1];
+  const isMobile = useMobile();
+  const _useHorizontalScrollS = useHorizontalScrollShadows({
+      enabled: isMobile,
+      suspend: isExpand,
+      preserveOverflowOnSuspend: true,
+      refreshKey: filterValue
+    }),
+    scrollRef = _useHorizontalScrollS.scrollRef,
+    isOverflow = _useHorizontalScrollS.isOverflow,
+    showScrollPrev = _useHorizontalScrollS.showScrollPrev,
+    showScrollNext = _useHorizontalScrollS.showScrollNext;
+  const tags = filterValue.map((_ref2, index) => {
+    let name = _ref2.name,
+      label = _ref2.label,
+      value = _ref2.value;
+    const valueLabel = Array.isArray(value) ? value.map(item => item.label).join('，') : value == null ? void 0 : value.label;
+    return /*#__PURE__*/jsxRuntime.jsxs(antd.Tag, {
+      closable: true,
+      className: style$1['filter-value-tag'],
+      onClose: () => {
+        const newValue = filterValue.slice(0);
+        newValue.splice(index, 1);
+        onChange(newValue);
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: style$1['filter-value-tag-label'],
+        children: [label, ":"]
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: style$1['filter-value-tag-content'],
+        children: valueLabel
+      })]
+    }, name);
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
     className: classnames__default["default"](style$1['filter-title'], style$1['filter-value-display']),
     align: "top",
@@ -367,30 +439,57 @@ const FilterValueDisplay = withLocale(_ref => {
       children: formatMessage({
         id: 'selectedText'
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: style$1['filter-line'],
-      children: [filterValue.map((_ref2, index) => {
-        let name = _ref2.name,
-          label = _ref2.label,
-          value = _ref2.value;
-        const valueLabel = Array.isArray(value) ? value.map(item => item.label).join('，') : value == null ? void 0 : value.label;
-        return /*#__PURE__*/jsxRuntime.jsxs(antd.Tag, {
-          closable: true,
-          className: style$1['filter-value-tag'],
-          onClose: () => {
-            const newValue = filterValue.slice(0);
-            newValue.splice(index, 1);
-            onChange(newValue);
+    }), isMobile ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames__default["default"](style$1['filter-value-display-content'], !isOverflow && style$1['is-not-overflow']),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classnames__default["default"](style$1['filter-value-tags-wrap'], isExpand && style$1['is-expand']),
+        children: [showScrollPrev ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classnames__default["default"](style$1['filter-scroll-prev-shadow'], style$1['filter-value-scroll-prev-shadow'])
+        }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: scrollRef,
+          className: classnames__default["default"](style$1['filter-line'], style$1['filter-value-tags'], isExpand && style$1['is-expand']),
+          children: tags
+        }), showScrollNext ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classnames__default["default"](style$1['filter-value-scroll-next-shadow'])
+        }) : null]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classnames__default["default"](style$1['filter-value-actions'], isOverflow && style$1['is-overflow']),
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: style$1['filter-value-action-right'],
+          children: /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
+            size: 4,
+            children: [extraExpand, /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+              size: "small",
+              onClick: () => {
+                onChange([]);
+              },
+              children: formatMessage({
+                id: 'clearAllText'
+              })
+            })]
+          })
+        }), isOverflow ? /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+          type: "link",
+          size: "small",
+          className: style$1['filter-value-toggle'],
+          icon: isExpand ? /*#__PURE__*/jsxRuntime.jsx(icons.UpOutlined, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.DownOutlined, {}),
+          onClick: () => {
+            setIsExpand(value => !value);
           },
-          children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: style$1['filter-value-tag-label'],
-            children: [label, ":"]
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: style$1['filter-value-tag-content'],
-            children: valueLabel
+          children: isExpand ? '收起' : '展开'
+        }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: style$1['filter-value-action-placeholder'],
+          children: [extraExpand, /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            size: "small",
+            children: formatMessage({
+              id: 'clearAllText'
+            })
           })]
-        }, name);
-      }), /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
+        })]
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: style$1['filter-line'],
+      children: [tags, /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
         size: 4,
         className: classnames__default["default"](style$1['un-expand-shadow']),
         children: [extraExpand, /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
@@ -566,7 +665,7 @@ const withFieldItem = function (WrappedComponent, options) {
       if (typeof document === 'undefined') return;
       document.body.style.setProperty('--react-filter-field-mobile-height', metrics.height + "px");
       document.body.style.setProperty('--react-filter-popover-mobile-height', metrics.height + "px");
-      document.body.style.setProperty('--react-filter-field-mobile-top', metrics.pageTop + "px");
+      document.body.style.setProperty('--react-filter-field-mobile-top', metrics.top + "px");
     }, []);
     const updatePopupMetrics = react.useCallback(() => {
       if (typeof window === 'undefined' || !triggerRef.current) return;
@@ -574,7 +673,6 @@ const withFieldItem = function (WrappedComponent, options) {
       const top = Math.max(rect.bottom + MOBILE_POPUP_OFFSET$1, 0);
       const metrics = {
         top,
-        pageTop: top + window.scrollY,
         height: Math.max(window.innerHeight - top, 0)
       };
       setPopupMetrics(metrics);
@@ -643,8 +741,8 @@ const withFieldItem = function (WrappedComponent, options) {
     const mobilePopupStyle = isMobile ? {
       '--react-filter-field-mobile-height': popupMetrics.height + "px",
       '--react-filter-popover-mobile-height': popupMetrics.height + "px",
-      '--react-filter-field-mobile-top': popupMetrics.pageTop + "px",
-      top: popupMetrics.pageTop,
+      '--react-filter-field-mobile-top': popupMetrics.top + "px",
+      top: popupMetrics.top,
       left: 0
     } : undefined;
     const mergePopupClassNames = classNames => {
@@ -665,33 +763,37 @@ const withFieldItem = function (WrappedComponent, options) {
         })
       });
     };
-    const renderChildren = otherProps => /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, _extends({
-      allowClear: false
-    }, Object.assign({}, props, otherProps), {
-      className: style$1['filter-item-inner'],
-      value: typeof (interceptor == null ? void 0 : interceptor.input) === 'function' ? interceptor.input(value) : value,
-      onChange: typeof (interceptor == null ? void 0 : interceptor.output) === 'function' ? function () {
-        return onChange(interceptor.output(...[].slice.call(arguments)));
-      } : onChange,
-      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),
-      overlayStyle: Object.assign({}, props.overlayStyle, mobilePopupStyle),
-      popupStyle: Object.assign({}, props.popupStyle, mobilePopupStyle),
-      dropdownStyle: Object.assign({}, props.dropdownStyle, mobilePopupStyle),
-      classNames: mergePopupClassNames(props.classNames),
-      styles: mergePopupStyles(props.styles),
-      transitionName: isMobile ? '' : props.transitionName,
-      autoAdjustOverflow: isMobile ? false : props.autoAdjustOverflow,
-      align: isMobile ? {
-        offset: [0, 0]
-      } : props.align,
-      isPopup: options.forcePopup ? true : props.isPopup,
-      overlayWidth: isMobile && options.forcePopup ? typeof window === 'undefined' ? props.overlayWidth : window.innerWidth : props.overlayWidth
-    }));
+    const renderChildren = otherProps => {
+      const inputValue = typeof (interceptor == null ? void 0 : interceptor.input) === 'function' ? interceptor.input(value) : value;
+      const fieldValue = options.forcePopup && inputValue == null ? props.single ? null : [] : inputValue;
+      return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, _extends({
+        allowClear: false
+      }, Object.assign({}, props, otherProps), {
+        className: style$1['filter-item-inner'],
+        value: fieldValue,
+        onChange: typeof (interceptor == null ? void 0 : interceptor.output) === 'function' ? function () {
+          return onChange(interceptor.output(...[].slice.call(arguments)));
+        } : onChange,
+        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),
+        overlayStyle: Object.assign({}, props.overlayStyle, mobilePopupStyle),
+        popupStyle: Object.assign({}, props.popupStyle, mobilePopupStyle),
+        dropdownStyle: Object.assign({}, props.dropdownStyle, mobilePopupStyle),
+        classNames: mergePopupClassNames(props.classNames),
+        styles: mergePopupStyles(props.styles),
+        transitionName: isMobile ? '' : props.transitionName,
+        autoAdjustOverflow: isMobile ? false : props.autoAdjustOverflow,
+        align: isMobile ? {
+          offset: [0, 0]
+        } : props.align,
+        isPopup: options.forcePopup ? true : props.isPopup,
+        overlayWidth: isMobile && options.forcePopup ? typeof window === 'undefined' ? props.overlayWidth : 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']),
@@ -699,7 +801,10 @@ const withFieldItem = function (WrappedComponent, options) {
           top: popupMetrics.top,
           height: popupMetrics.height
         },
-        onClick: closeFieldItem
+        onClick: closeFieldItem,
+        onTouchMove: e => {
+          e.preventDefault();
+        }
       }), document.body), /*#__PURE__*/jsxRuntime.jsx("span", {
         ref: triggerRef,
         children: /*#__PURE__*/jsxRuntime.jsx(FilterItem, {
@@ -781,7 +886,6 @@ const PopoverItem = withLocale(_ref => {
     const top = Math.max(rect.bottom + MOBILE_POPUP_OFFSET, 0);
     setPopupMetrics({
       top,
-      pageTop: top + window.scrollY,
       height: Math.max(window.innerHeight - top, 0)
     });
   }, []);
@@ -825,7 +929,7 @@ const PopoverItem = withLocale(_ref => {
   }, [isMobile, onOpenChange, updatePopupMetrics, value]);
   const mobileOverlayStyle = isMobile ? {
     '--react-filter-popover-mobile-height': popupMetrics.height + "px",
-    top: popupMetrics.pageTop,
+    top: popupMetrics.top,
     left: 0
   } : undefined;
   const overlayContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -845,7 +949,7 @@ const PopoverItem = withLocale(_ref => {
       gutter: 8,
       children: [/*#__PURE__*/jsxRuntime.jsx(antd.Col, {
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-          size: "small",
+          size: isMobile ? undefined : 'small',
           onClick: closeDropdown,
           children: formatMessage({
             id: 'cancelText'
@@ -853,7 +957,7 @@ const PopoverItem = withLocale(_ref => {
         })
       }), /*#__PURE__*/jsxRuntime.jsx(antd.Col, {
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-          size: "small",
+          size: isMobile ? undefined : 'small',
           type: "primary",
           disabled: disabled,
           onClick: () => {
@@ -874,7 +978,10 @@ const PopoverItem = withLocale(_ref => {
         top: popupMetrics.top,
         height: popupMetrics.height
       },
-      onClick: closeDropdown
+      onClick: closeDropdown,
+      onTouchMove: e => {
+        e.preventDefault();
+      }
     }), document.body), /*#__PURE__*/jsxRuntime.jsx(antd.Dropdown, {
       open: open,
       trigger: ['click'],