@kne/react-filter 1.0.1 → 1.0.3

package/dist/index.modern.js

@@ -1,9 +1,10 @@
 import classnames from 'classnames';
-import { useContext as useContext$1, createContext, useState, useRef, useCallback, useEffect, createElement, useMemo } from 'react';
+import { useContext as useContext$1, createContext, useState, useEffect, useRef, useCallback, createElement, useMemo } 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 { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { UpOutlined, DownOutlined } from '@ant-design/icons';
 import clone from 'lodash/clone';
 import { createPortal } from 'react-dom';
 import isNumber from 'lodash/isNumber';
@@ -34,7 +35,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-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-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__*/createContext({});
 const {
@@ -42,6 +43,78 @@ const {
 } = context;
 const useContext = () => useContext$1(context);
 
+const useMobile = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  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: _suspend = false,
+  preserveOverflowOnSuspend: _preserveOverflowOnSuspend = false,
+  refreshKey
+} = {}) => {
+  const scrollRef = useRef(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+  const [showScrollPrev, setShowScrollPrev] = useState(false);
+  const [showScrollNext, setShowScrollNext] = useState(false);
+  const update = 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]);
+  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 = ({
   list,
   children
@@ -91,54 +164,20 @@ const FilterLines = ({
   const hasMore = _list.length > _displayLine;
   const mobileList = _list.reduce((result, item) => result.concat(Array.isArray(item) ? item : [item]), []);
   const [isExpand, setIsExpand] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const [showScrollNext, setShowScrollNext] = useState(false);
-  const scrollRef = useRef(null);
+  const isMobile = useMobile();
+  const {
+    scrollRef,
+    showScrollPrev,
+    showScrollNext
+  } = useHorizontalScrollShadows({
+    enabled: isMobile,
+    refreshKey: _list
+  });
   const {
     formatMessage
   } = useIntl({
     moduleName: 'Filter'
   });
-  const updateScrollNextVisible = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) {
-      setShowScrollNext(false);
-      return;
-    }
-    setShowScrollNext(el.scrollWidth > el.clientWidth && el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
-  }, []);
-  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 (!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 = useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -146,7 +185,7 @@ const FilterLines = ({
       left: el.scrollLeft + el.clientWidth * 0.8,
       behavior: 'smooth'
     });
-  }, []);
+  }, [scrollRef]);
   const scrollItemIntoView = useCallback(e => {
     if (!isMobile) return;
     const container = scrollRef.current;
@@ -157,7 +196,7 @@ const FilterLines = ({
       block: 'nearest',
       inline: 'center'
     });
-  }, [isMobile]);
+  }, [isMobile, scrollRef]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs(Space, {
       className: classnames(style$1['filter-title'], 'filter-title', className),
@@ -177,7 +216,9 @@ const FilterLines = ({
           flex: 1,
           children: /*#__PURE__*/jsxs("div", {
             className: style$1['filter-list-scroll-wrap'],
-            children: [/*#__PURE__*/jsx("div", {
+            children: [isMobile && showScrollPrev ? /*#__PURE__*/jsx("div", {
+              className: style$1['filter-scroll-prev-shadow']
+            }) : null, /*#__PURE__*/jsx("div", {
               className: style$1['filter-list-scroll'],
               ref: scrollRef,
               onClick: scrollItemIntoView,
@@ -347,8 +388,44 @@ const FilterValueDisplay = withLocale(({
   } = useIntl({
     moduleName: 'Filter'
   });
+  const [isExpand, setIsExpand] = useState(false);
+  const isMobile = useMobile();
+  const {
+    scrollRef,
+    isOverflow,
+    showScrollPrev,
+    showScrollNext
+  } = useHorizontalScrollShadows({
+    enabled: isMobile,
+    suspend: isExpand,
+    preserveOverflowOnSuspend: true,
+    refreshKey: filterValue
+  });
+  const tags = filterValue.map(({
+    name,
+    label,
+    value
+  }, index) => {
+    const valueLabel = Array.isArray(value) ? value.map(item => item.label).join('，') : value == null ? void 0 : value.label;
+    return /*#__PURE__*/jsxs(Tag, {
+      closable: true,
+      className: style$1['filter-value-tag'],
+      onClose: () => {
+        const newValue = filterValue.slice(0);
+        newValue.splice(index, 1);
+        onChange(newValue);
+      },
+      children: [/*#__PURE__*/jsxs("span", {
+        className: style$1['filter-value-tag-label'],
+        children: [label, ":"]
+      }), /*#__PURE__*/jsx("span", {
+        className: style$1['filter-value-tag-content'],
+        children: valueLabel
+      })]
+    }, name);
+  });
   return /*#__PURE__*/jsxs(Space, {
-    className: style$1['filter-title'],
+    className: classnames(style$1['filter-title'], style$1['filter-value-display']),
     align: "top",
     size: 16,
     children: [/*#__PURE__*/jsx("span", {
@@ -356,31 +433,57 @@ const FilterValueDisplay = withLocale(({
       children: formatMessage({
         id: 'selectedText'
       })
-    }), /*#__PURE__*/jsxs("div", {
-      className: style$1['filter-line'],
-      children: [filterValue.map(({
-        name,
-        label,
-        value
-      }, index) => {
-        const valueLabel = Array.isArray(value) ? value.map(item => item.label).join('，') : value == null ? void 0 : value.label;
-        return /*#__PURE__*/jsxs(Tag, {
-          closable: true,
-          className: style$1['filter-value-tag'],
-          onClose: () => {
-            const newValue = filterValue.slice(0);
-            newValue.splice(index, 1);
-            onChange(newValue);
+    }), isMobile ? /*#__PURE__*/jsxs("div", {
+      className: classnames(style$1['filter-value-display-content'], !isOverflow && style$1['is-not-overflow']),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classnames(style$1['filter-value-tags-wrap'], isExpand && style$1['is-expand']),
+        children: [showScrollPrev ? /*#__PURE__*/jsx("div", {
+          className: classnames(style$1['filter-scroll-prev-shadow'], style$1['filter-value-scroll-prev-shadow'])
+        }) : null, /*#__PURE__*/jsx("div", {
+          ref: scrollRef,
+          className: classnames(style$1['filter-line'], style$1['filter-value-tags'], isExpand && style$1['is-expand']),
+          children: tags
+        }), showScrollNext ? /*#__PURE__*/jsx("div", {
+          className: classnames(style$1['filter-value-scroll-next-shadow'])
+        }) : null]
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(style$1['filter-value-actions'], isOverflow && style$1['is-overflow']),
+        children: [/*#__PURE__*/jsx("div", {
+          className: style$1['filter-value-action-right'],
+          children: /*#__PURE__*/jsxs(Space, {
+            size: 4,
+            children: [extraExpand, /*#__PURE__*/jsx(Button, {
+              size: "small",
+              onClick: () => {
+                onChange([]);
+              },
+              children: formatMessage({
+                id: 'clearAllText'
+              })
+            })]
+          })
+        }), isOverflow ? /*#__PURE__*/jsx(Button, {
+          type: "link",
+          size: "small",
+          className: style$1['filter-value-toggle'],
+          icon: isExpand ? /*#__PURE__*/jsx(UpOutlined, {}) : /*#__PURE__*/jsx(DownOutlined, {}),
+          onClick: () => {
+            setIsExpand(value => !value);
           },
-          children: [/*#__PURE__*/jsxs("span", {
-            className: style$1['filter-value-tag-label'],
-            children: [label, ":"]
-          }), /*#__PURE__*/jsx("span", {
-            className: style$1['filter-value-tag-content'],
-            children: valueLabel
+          children: isExpand ? '收起' : '展开'
+        }) : null, /*#__PURE__*/jsxs("div", {
+          className: style$1['filter-value-action-placeholder'],
+          children: [extraExpand, /*#__PURE__*/jsx(Button, {
+            size: "small",
+            children: formatMessage({
+              id: 'clearAllText'
+            })
           })]
-        }, name);
-      }), /*#__PURE__*/jsxs(Space, {
+        })]
+      })]
+    }) : /*#__PURE__*/jsxs("div", {
+      className: style$1['filter-line'],
+      children: [tags, /*#__PURE__*/jsxs(Space, {
         size: 4,
         className: classnames(style$1['un-expand-shadow']),
         children: [extraExpand, /*#__PURE__*/jsx(Button, {
@@ -548,7 +651,7 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     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 = useCallback(() => {
     if (typeof window === 'undefined' || !triggerRef.current) return;
@@ -556,7 +659,6 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     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);
@@ -625,8 +727,8 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
   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 => {
@@ -647,31 +749,35 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
       })
     });
   };
-  const renderChildren = otherProps => /*#__PURE__*/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' ? (...args) => onChange(interceptor.output(...args)) : onChange,
-    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),
-    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__*/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' ? (...args) => onChange(interceptor.output(...args)) : onChange,
+      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),
+      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__*/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']),
@@ -679,7 +785,10 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
         top: popupMetrics.top,
         height: popupMetrics.height
       },
-      onClick: closeFieldItem
+      onClick: closeFieldItem,
+      onTouchMove: e => {
+        e.preventDefault();
+      }
     }), document.body), /*#__PURE__*/jsx("span", {
       ref: triggerRef,
       children: /*#__PURE__*/jsx(FilterItem, {
@@ -749,7 +858,6 @@ const PopoverItem = withLocale(({
     const top = Math.max(rect.bottom + MOBILE_POPUP_OFFSET, 0);
     setPopupMetrics({
       top,
-      pageTop: top + window.scrollY,
       height: Math.max(window.innerHeight - top, 0)
     });
   }, []);
@@ -793,7 +901,7 @@ const PopoverItem = withLocale(({
   }, [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__*/jsxs("div", {
@@ -813,7 +921,7 @@ const PopoverItem = withLocale(({
       gutter: 8,
       children: [/*#__PURE__*/jsx(Col, {
         children: /*#__PURE__*/jsx(Button, {
-          size: "small",
+          size: isMobile ? undefined : 'small',
           onClick: closeDropdown,
           children: formatMessage({
             id: 'cancelText'
@@ -821,7 +929,7 @@ const PopoverItem = withLocale(({
         })
       }), /*#__PURE__*/jsx(Col, {
         children: /*#__PURE__*/jsx(Button, {
-          size: "small",
+          size: isMobile ? undefined : 'small',
           type: "primary",
           disabled: disabled,
           onClick: () => {
@@ -842,7 +950,10 @@ const PopoverItem = withLocale(({
         top: popupMetrics.top,
         height: popupMetrics.height
       },
-      onClick: closeDropdown
+      onClick: closeDropdown,
+      onTouchMove: e => {
+        e.preventDefault();
+      }
     }), document.body), /*#__PURE__*/jsx(Dropdown, {
       open: open,
       trigger: ['click'],
@@ -1022,6 +1133,7 @@ const DatePickerFilterItem = withLocale(withFieldItem(_ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/jsx(DatePicker, _extends({}, props, {
+    inputReadOnly: true,
     picker: picker,
     classNames: _extends({}, props.classNames, {
       popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
@@ -1058,6 +1170,7 @@ const DateRangePickerFilterItem = withLocale(withFieldItem(_ref => {
       value,
       onChange
     }) : header, /*#__PURE__*/jsx(DatePicker.RangePicker, _extends({}, props, {
+      inputReadOnly: true,
       allowEmpty: [false, false],
       classNames: _extends({}, props.classNames, {
         popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
@@ -1245,6 +1358,7 @@ const TypeDateRangePickerFilterItem = withLocale(_ref => {
       value,
       onChange
     }) => /*#__PURE__*/jsx(TypeDateRangePickerField, _extends({}, props, {
+      inputReadOnly: true,
       className: style$1['filter-item-text'],
       value: get(value, 'value'),
       onChange: pickerValue => {