@kne/react-filter 1.0.9 → 1.0.11

package/dist/index.modern.js

@@ -3,7 +3,7 @@ import { useContext as useContext$1, createContext, useEffect, useRef, useState,
 import { Space, Row, Col, Tag, Button, Dropdown, Input, InputNumber, DatePicker, Flex, Select, App } from 'antd';
 import { useIntl, createWithIntlProvider } from '@kne/react-intl';
 import get from 'lodash/get';
-import { useResponsiveContext, useMediaQuery, IS_MOBILE_QUERY, MOBILE_BREAKPOINT, useScrollElement, resetViewportCssVars, applyViewportCssVars, RESPONSIVE_BOUNDARY_CLASS, usePopupContainer } from '@kne/responsive-utils';
+import { useResponsiveContext, useMediaQuery, IS_MOBILE_QUERY, MOBILE_BREAKPOINT, useScrollElement, resetViewportCssVars, applyViewportCssVars, usePopupContainer } from '@kne/responsive-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { UpOutlined, DownOutlined } from '@ant-design/icons';
 import clone from 'lodash/clone';
@@ -37,7 +37,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-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"};
+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-prev":"kne-react-filter_Punga","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","is-viewport":"kne-react-filter_3Wr-x","is-boundary":"kne-react-filter_pPiQ8","pop-util-footer":"kne-react-filter_iqe8W","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-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-prev-icon":"kne-react-filter_B3jzr","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
 
 const context = /*#__PURE__*/createContext({});
 const {
@@ -485,6 +485,14 @@ const FilterLines = ({
       behavior: 'smooth'
     });
   }, [scrollRef]);
+  const scrollToPrev = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTo({
+      left: Math.max(el.scrollLeft - el.clientWidth * 0.8, 0),
+      behavior: 'smooth'
+    });
+  }, [scrollRef]);
   const scrollItemIntoView = useCallback(e => {
     if (!isMobile) return;
     const container = scrollRef.current;
@@ -593,8 +601,15 @@ const FilterLines = ({
                   children: moreButtonLabel
                 })
               })]
-            }) : null, isMobile && showScrollPrev ? /*#__PURE__*/jsx("div", {
-              className: style$1['filter-scroll-prev-shadow']
+            }) : null, isMobile && showScrollPrev ? /*#__PURE__*/jsx("button", {
+              type: "button",
+              className: style$1['filter-scroll-prev'],
+              onClick: scrollToPrev,
+              "aria-label": "scroll prev",
+              children: /*#__PURE__*/jsx("span", {
+                className: style$1['filter-scroll-prev-icon'],
+                children: "\u2039"
+              })
             }) : null, /*#__PURE__*/jsx("div", {
               className: style$1['filter-list-scroll'],
               ref: setScrollContainerRef,
@@ -919,7 +934,7 @@ const FilterOuter = _ref => {
   return /*#__PURE__*/jsx(FilterProvider, _extends({}, props, {
     children: context => /*#__PURE__*/jsx("div", {
       ref: boundaryRef,
-      className: classnames(style$1['filter'], 'filter', RESPONSIVE_BOUNDARY_CLASS, isMobile && style$1['is-mobile'], className),
+      className: classnames(style$1['filter'], 'filter', isMobile && style$1['is-mobile'], className),
       children: children(_extends({}, context, {
         props
       }))
@@ -975,6 +990,43 @@ const useMobileFixedMode = () => {
   };
 };
 
+/**
+ * Filter Item 弹窗挂载（不使用 RESPONSIVE_BOUNDARY_CLASS，避免劫持全局 pop）：
+ * - useBoundaryMount（example container / 手机预览）：ResponsiveProvider 的 boundary
+ * - 真实移动端 viewport：document.body
+ * - 桌面端：页面级 boundary（usePopupContainer）
+ */
+const resolveFilterPopupContainer = ({
+  isMobile,
+  useBoundaryMount,
+  getBoundaryElement
+}) => {
+  if (!isMobile || useBoundaryMount) {
+    return typeof getBoundaryElement === 'function' ? getBoundaryElement() : null;
+  }
+  return typeof document !== 'undefined' ? document.body : null;
+};
+
+const useFilterPopupContainer = () => {
+  const getBoundaryElement = usePopupContainer();
+  const {
+    isMobile,
+    useBoundaryMount
+  } = useMobileFixedMode();
+  const getMountNode = useCallback(() => resolveFilterPopupContainer({
+    isMobile,
+    useBoundaryMount,
+    getBoundaryElement
+  }), [getBoundaryElement, isMobile, useBoundaryMount]);
+  const getPopupContainer = useCallback(() => getMountNode(), [getMountNode]);
+  return {
+    isMobile,
+    useBoundaryMount,
+    getMountNode,
+    getPopupContainer
+  };
+};
+
 const FilterItem = withLocale(({
   open,
   active,
@@ -1069,8 +1121,10 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
   const [open, setOpen] = useState(false);
   const {
     isMobile,
-    useBoundaryMount
-  } = useMobileFixedMode();
+    useBoundaryMount,
+    getMountNode,
+    getPopupContainer
+  } = useFilterPopupContainer();
   const fixedModeClass = useBoundaryMount ? style$1['is-boundary'] : style$1['is-viewport'];
   const [renderMask, setRenderMask] = useState(false);
   const [maskClosing, setMaskClosing] = useState(false);
@@ -1080,7 +1134,6 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     height: 0
   });
   const triggerRef = useRef(null);
-  const getBoundaryElement = usePopupContainer();
   const getScrollElement = useScrollElement();
   const resolveGetPopupContainer = useCallback(triggerNode => {
     if (typeof props.getPopupContainer === 'function') {
@@ -1089,15 +1142,9 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
         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;
+    return getPopupContainer(triggerNode);
+  }, [getPopupContainer, props.getPopupContainer]);
+  const popupMountNode = typeof document !== 'undefined' ? getMountNode() || document.body : null;
   const setMobilePopupVariables = useCallback(metrics => {
     if (typeof document === 'undefined') return;
     document.body.style.setProperty('--react-filter-field-mobile-height', `${metrics.height}px`);
@@ -1108,13 +1155,13 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     if (typeof window === 'undefined' || !triggerRef.current) return;
     const metrics = getMobilePopupMetrics(triggerRef.current, {
       scrollEl: getScrollElement(),
-      boundaryEl: getBoundaryElement(),
+      boundaryEl: getMountNode(),
       useBoundaryMount,
       offset: MOBILE_POPUP_OFFSET$1
     });
     setPopupMetrics(metrics);
     setMobilePopupVariables(metrics);
-  }, [getBoundaryElement, getScrollElement, setMobilePopupVariables, useBoundaryMount]);
+  }, [getMountNode, getScrollElement, setMobilePopupVariables, useBoundaryMount]);
   useResponsiveScrollListener(updatePopupMetrics, open && isMobile);
   useEffect(() => {
     if (typeof document === 'undefined' || !isMobile || popupMetrics.height <= 0) return;
@@ -1210,7 +1257,7 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
       zIndex: isMobile ? MOBILE_POPUP_Z_INDEX : props.zIndex,
       overlayWidth: isMobile && options.forcePopup ? typeof window === 'undefined' ? props.overlayWidth : getMobilePopupMetrics(triggerRef.current, {
         scrollEl: getScrollElement(),
-        boundaryEl: getBoundaryElement(),
+        boundaryEl: getMountNode(),
         useBoundaryMount
       }).width || window.innerWidth : props.overlayWidth
     }));
@@ -1265,10 +1312,11 @@ const PopoverItem = withLocale(({
   const [open, setOpen] = useState(false);
   const {
     isMobile,
-    useBoundaryMount
-  } = useMobileFixedMode();
+    useBoundaryMount,
+    getMountNode,
+    getPopupContainer
+  } = useFilterPopupContainer();
   const fixedModeClass = useBoundaryMount ? style$1['is-boundary'] : style$1['is-viewport'];
-  const getBoundaryElement = usePopupContainer();
   const getScrollElement = useScrollElement();
   const resolveGetPopupContainer = useCallback(triggerNode => {
     if (typeof customGetPopupContainer === 'function') {
@@ -1277,15 +1325,8 @@ const PopoverItem = withLocale(({
         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;
+    return getPopupContainer(triggerNode);
+  }, [customGetPopupContainer, getPopupContainer]);
   const [renderMask, setRenderMask] = useState(false);
   const [maskClosing, setMaskClosing] = useState(false);
   const [popupMetrics, setPopupMetrics] = useState({
@@ -1294,6 +1335,7 @@ const PopoverItem = withLocale(({
     height: 0
   });
   const triggerRef = useRef(null);
+  const popupMountNode = typeof document !== 'undefined' ? getMountNode() || document.body : null;
   const disabled = useMemo(() => {
     return onValidate && !onValidate(state);
   }, [onValidate, state]);
@@ -1306,12 +1348,12 @@ const PopoverItem = withLocale(({
     if (typeof window === 'undefined' || !triggerRef.current) return;
     const metrics = getMobilePopupMetrics(triggerRef.current, {
       scrollEl: getScrollElement(),
-      boundaryEl: getBoundaryElement(),
+      boundaryEl: getMountNode(),
       useBoundaryMount,
       offset: MOBILE_POPUP_OFFSET
     });
     setPopupMetrics(metrics);
-  }, [getBoundaryElement, getScrollElement, useBoundaryMount]);
+  }, [getMountNode, getScrollElement, useBoundaryMount]);
   useResponsiveScrollListener(updatePopupMetrics, open && isMobile);
   useEffect(() => {
     if (open && isMobile) {
@@ -1658,11 +1700,11 @@ const TypeDateRangePickerField = _ref => {
   } = useIntl({
     moduleName: 'Filter'
   });
-  const getPopupContainer = usePopupContainer();
   const {
     isMobile,
-    useBoundaryMount
-  } = useMobileFixedMode();
+    useBoundaryMount,
+    getPopupContainer
+  } = useFilterPopupContainer();
   const fixedModeClass = useBoundaryMount ? style['is-boundary'] : style['is-viewport'];
   const nestedPopupClassName = classnames(style['field-item-mobile-popup'], FIELD_MOBILE_POPUP_CLASS, fixedModeClass);
   const nestedPopupStyle = isMobile ? {
@@ -2761,7 +2803,9 @@ const CityFilterItemInner = _ref => {
   const {
     message
   } = App.useApp();
-  const getPopupContainer = usePopupContainer();
+  const {
+    getPopupContainer
+  } = useFilterPopupContainer();
   const {
     locale
   } = useIntl();