@oceanbase/design 1.0.0-alpha.15 → 1.0.0-alpha.17

package/es/filter/components/ResponsiveFilterGroup.js

@@ -15,8 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { Children, cloneElement, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { Children, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Flex } from 'antd';
 import { FilterOutlined } from '@oceanbase/icons';
 import Button from "../../button";
@@ -26,33 +25,24 @@ import defaultLocale from "../../locale/en-US";
 import { FilterProvider } from "../FilterContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * ResponsiveFilterGroup 组件
- *
- * 响应式 Filter 容器，当宽度不足时自动将后面的 Filter 收起到 FilterWrap 中
- *
- * @example
- * ```tsx
- * <ResponsiveFilterGroup onApply={handleSearch} onClearAll={handleReset}>
- *   <Filter.Select label="操作者" ... />
- *   <Filter.Cascader label="事件操作" ... />
- *   <Filter.Select label="执行结果" ... />
- * </ResponsiveFilterGroup>
- * ```
- */
-// 检查子元素是否可以被收集
-var isCollapsible = function isCollapsible(child) {
-  // 检查子元素的 props 中是否有 collapsible 属性
-  // 如果子元素是 Form.Item，需要检查其子元素的 props
-  var childProps = child.props;
+// 检查元素是否是 Filter 组件（通过 __isFilterComponent 静态标记识别）
+var isFilterComponent = function isFilterComponent(child) {
+  var _child$props;
+  var type = child.type;
+  if (type !== null && type !== void 0 && type.__isFilterComponent) return true;
+  if ((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children && /*#__PURE__*/isValidElement(child.props.children)) {
+    var innerType = child.props.children.type;
+    if (innerType !== null && innerType !== void 0 && innerType.__isFilterComponent) return true;
+  }
+  return false;
+};
 
-  // 直接检查 collapsible 属性
+// 检查子元素是否可以被折叠（只有 Filter 组件默认可折叠，其他组件需要显式设置 collapsible）
+var isCollapsibleCheck = function isCollapsibleCheck(child) {
+  var childProps = child.props;
   if ((childProps === null || childProps === void 0 ? void 0 : childProps.collapsible) !== undefined) {
     return childProps.collapsible !== false;
   }
-
-  // 如果是 Form.Item 等包装组件，检查其 children 的 collapsible
   if (childProps !== null && childProps !== void 0 && childProps.children && /*#__PURE__*/isValidElement(childProps.children)) {
     var _innerChild$props;
     var innerChild = childProps.children;
@@ -60,21 +50,15 @@ var isCollapsible = function isCollapsible(child) {
       return innerChild.props.collapsible !== false;
     }
   }
-
-  // 默认可以被收集
-  return true;
+  return isFilterComponent(child);
 };
 
 // 检查子元素是否应该始终折叠
-var isAlwaysCollapse = function isAlwaysCollapse(child) {
+var isAlwaysCollapseCheck = function isAlwaysCollapseCheck(child) {
   var childProps = child.props;
-
-  // 直接检查 alwaysCollapse 属性
   if ((childProps === null || childProps === void 0 ? void 0 : childProps.alwaysCollapse) !== undefined) {
     return childProps.alwaysCollapse === true;
   }
-
-  // 如果是 Form.Item 等包装组件，检查其 children 的 alwaysCollapse
   if (childProps !== null && childProps !== void 0 && childProps.children && /*#__PURE__*/isValidElement(childProps.children)) {
     var _innerChild$props2;
     var innerChild = childProps.children;
@@ -82,8 +66,6 @@ var isAlwaysCollapse = function isAlwaysCollapse(child) {
       return innerChild.props.alwaysCollapse === true;
     }
   }
-
-  // 默认不始终折叠
   return false;
 };
 var ResponsiveFilterGroup = function ResponsiveFilterGroup(_ref) {
@@ -105,262 +87,182 @@ var ResponsiveFilterGroup = function ResponsiveFilterGroup(_ref) {
   var _useContext = useContext(ConfigProvider.ConfigContext),
     contextLocale = _useContext.locale;
   var filterLocale = _objectSpread(_objectSpread(_objectSpread({}, defaultLocale.Filter), contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.Filter), customLocale);
-  // 如果没有传入 label，使用国际化默认值
   var filterLabel = label !== null && label !== void 0 ? label : filterLocale === null || filterLocale === void 0 ? void 0 : filterLocale.filters;
   var containerRef = useRef(null);
-  var innerFlexRef = useRef(null);
-  var measureRef = useRef(null);
-  var unmeasureRef = useRef(null);
-  var moreButtonRef = useRef(null);
   var filterButtonRef = useRef(null);
-  var _useState = useState(-1),
+  var moreButtonMeasureRef = useRef(null);
+  var cachedWidths = useRef([]);
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     visibleCount = _useState2[0],
-    setVisibleCount = _useState2[1]; // -1 表示还未计算
+    setVisibleCount = _useState2[1];
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    childWidths = _useState4[0],
-    setChildWidths = _useState4[1];
-  // 不再依赖外部传入的预留宽度，初始为 0，后续通过真实 DOM 测量获得
-  var _useState5 = useState(0),
+    filterValues = _useState4[0],
+    setFilterValues = _useState4[1];
+  var childrenArray = useMemo(function () {
+    return Children.toArray(children).filter(isValidElement);
+  }, [children]);
+  var childInfo = useMemo(function () {
+    return childrenArray.map(function (child, index) {
+      return {
+        child: child,
+        index: index,
+        isCollapsible: isCollapsibleCheck(child),
+        isAlwaysCollapse: isAlwaysCollapseCheck(child)
+      };
+    });
+  }, [childrenArray]);
+  var collapsibleItems = useMemo(function () {
+    return childInfo.filter(function (item) {
+      return item.isCollapsible;
+    });
+  }, [childInfo]);
+  var alwaysCollapseItems = useMemo(function () {
+    return collapsibleItems.filter(function (item) {
+      return item.isAlwaysCollapse;
+    });
+  }, [collapsibleItems]);
+  var normalCollapsibleItems = useMemo(function () {
+    return collapsibleItems.filter(function (item) {
+      return !item.isAlwaysCollapse;
+    });
+  }, [collapsibleItems]);
+
+  // 当 children 结构变化（增删/重排）时才重置为测量模式
+  // 不能用 childrenArray 引用比较，因为 JSX 每次渲染都产生新引用
+  var childrenStructureKey = childrenArray.map(function (c) {
+    var _c$key;
+    return (_c$key = c.key) !== null && _c$key !== void 0 ? _c$key : c.type;
+  }).join(',');
+  var _useState5 = useState(childrenStructureKey),
     _useState6 = _slicedToArray(_useState5, 2),
-    actualMoreButtonWidth = _useState6[0],
-    setActualMoreButtonWidth = _useState6[1];
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    unCollapsibleWidth = _useState8[0],
-    setUnCollapsibleWidth = _useState8[1];
-  var _useState9 = useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    measureContainer = _useState10[0],
-    setMeasureContainer = _useState10[1];
-  // 维护筛选值的数组
-  var _useState11 = useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    filterValues = _useState12[0],
-    setFilterValues = _useState12[1];
-  var childrenArray = Children.toArray(children).filter(isValidElement);
-
-  // 分离不可收集和可收集的子元素
-  var unCollapsibleChildren = childrenArray.filter(function (child) {
-    return !isCollapsible(child);
-  });
-  var collapsibleChildren = childrenArray.filter(function (child) {
-    return isCollapsible(child);
-  });
-
-  // 分离始终折叠和普通可收集的子元素
-  var alwaysCollapseChildren = collapsibleChildren.filter(function (child) {
-    return isAlwaysCollapse(child);
-  });
-  var normalCollapsibleChildren = collapsibleChildren.filter(function (child) {
-    return !isAlwaysCollapse(child);
-  });
-
-  // 创建测量容器
-  useEffect(function () {
-    var container = document.createElement('div');
-    container.style.cssText = 'position: absolute; visibility: hidden; pointer-events: none; top: -9999px; left: -9999px;';
-    document.body.appendChild(container);
-    setMeasureContainer(container);
-    return function () {
-      document.body.removeChild(container);
-    };
-  }, []);
-
-  // 测量每个可收集子元素的宽度（只测量普通可收集的，不包括始终折叠的）
-  var measureChildren = useCallback(function () {
-    if (!measureRef.current) return;
-
-    // 测量普通可收集子元素宽度
-    var widths = [];
-    if (measureRef.current) {
-      var measureDiv = measureRef.current;
-      var measureItems = measureDiv.children;
-      for (var i = 0; i < measureItems.length; i++) {
-        var item = measureItems[i];
-        widths.push(item.offsetWidth);
-      }
-    }
-    setChildWidths(widths);
-
-    // 测量 more button 的宽度
-    if (moreButtonRef.current) {
-      setActualMoreButtonWidth(moreButtonRef.current.offsetWidth);
-    }
-
-    // 测量不可收集子元素的总宽度（使用隐藏测量容器，保证与普通可收集项的测量方式一致）
-    if (unmeasureRef.current) {
-      var sum = 0;
-      var items = unmeasureRef.current.children;
-      for (var _i = 0; _i < items.length; _i++) {
-        var it = items[_i];
-        sum += it.offsetWidth;
+    prevStructureKey = _useState6[0],
+    setPrevStructureKey = _useState6[1];
+  if (childrenStructureKey !== prevStructureKey) {
+    setPrevStructureKey(childrenStructureKey);
+    setVisibleCount(null);
+  }
+  var isMeasuring = visibleCount === null;
+
+  // 纯计算函数：根据容器宽度计算可显示的可折叠项数量
+  var calculateVisibleCount = useCallback(function (containerWidth) {
+    var _moreButtonMeasureRef;
+    if (normalCollapsibleItems.length === 0) return 0;
+    var widths = cachedWidths.current;
+    if (widths.length === 0) return normalCollapsibleItems.length;
+    var uncollapsibleTotalWidth = 0;
+    var uncollapsibleCount = 0;
+    childInfo.forEach(function (info) {
+      if (!info.isCollapsible) {
+        uncollapsibleTotalWidth += widths[info.index] || 0;
+        uncollapsibleCount++;
       }
-      setUnCollapsibleWidth(sum || 0);
-    } else {
-      setUnCollapsibleWidth(0);
-    }
-  }, [unCollapsibleChildren.length, normalCollapsibleChildren.length, gap]);
-
-  // 计算可见的可收集子元素数量（只计算普通可收集的，不包括始终折叠的）
-  var calculateVisibleCount = useCallback(function () {
-    if (!containerRef.current) return;
-    // 如果没有普通可收集的子元素，显示全部（0表示全部折叠）
-    if (normalCollapsibleChildren.length === 0) {
-      setVisibleCount(0);
-      return;
-    }
-    if (childWidths.length === 0) return;
-
-    // 可用宽度 = 容器宽度 - 不可收集子元素占用的宽度 - 可能存在的间隙
-    var containerWidth = containerRef.current.offsetWidth;
-    var gapBetweenUncollapsibleAndCollapsible = unCollapsibleChildren.length > 0 && normalCollapsibleChildren.length > 0 ? gap : 0;
-    var availableWidth = containerWidth - (unCollapsibleWidth || 0) - gapBetweenUncollapsibleAndCollapsible;
-    var totalWidth = 0;
+    });
+    var moreWidth = ((_moreButtonMeasureRef = moreButtonMeasureRef.current) === null || _moreButtonMeasureRef === void 0 ? void 0 : _moreButtonMeasureRef.offsetWidth) || 0;
+    var hasAlwaysCollapse = alwaysCollapseItems.length > 0;
+    var visibleWidth = 0;
     var count = 0;
-
-    // 如果有始终折叠的元素，需要预留 more button 的宽度
-    var hasAlwaysCollapse = alwaysCollapseChildren.length > 0;
-    var reservedForMoreButton = hasAlwaysCollapse ? actualMoreButtonWidth + gap : 0;
-    for (var i = 0; i < childWidths.length; i++) {
-      var itemWidth = childWidths[i] + (i > 0 ? gap : 0);
-      // 检查是否还有空间放置当前元素
-      // 如果不是最后一个元素，需要预留实际测量到的更多按钮宽度
-      var needMoreButton = i < childWidths.length - 1;
-      var reservedWidth = needMoreButton ? actualMoreButtonWidth + gap : reservedForMoreButton;
-      if (totalWidth + itemWidth + reservedWidth <= availableWidth) {
-        totalWidth += itemWidth;
+    for (var i = 0; i < normalCollapsibleItems.length; i++) {
+      var itemWidth = widths[normalCollapsibleItems[i].index] || 0;
+      var newWidth = visibleWidth + itemWidth;
+      var remaining = normalCollapsibleItems.length - i - 1;
+      var needMore = remaining > 0 || hasAlwaysCollapse;
+      var totalItems = uncollapsibleCount + count + 1 + (needMore ? 1 : 0);
+      var totalGaps = totalItems > 1 ? (totalItems - 1) * gap : 0;
+      var totalWidth = uncollapsibleTotalWidth + newWidth + (needMore ? moreWidth : 0) + totalGaps;
+      if (totalWidth <= containerWidth) {
+        visibleWidth = newWidth;
         count++;
       } else {
         break;
       }
     }
+    return count;
+  }, [childInfo, normalCollapsibleItems, alwaysCollapseItems, gap]);
 
-    // 如果所有元素都能显示，就显示全部
-    if (count === childWidths.length) {
-      setVisibleCount(childWidths.length);
-    } else if (count === 0) {
-      // 如果一个都放不下，只显示 more button
-      setVisibleCount(0);
-    } else {
-      setVisibleCount(count);
-    }
-  }, [childWidths, gap, actualMoreButtonWidth, normalCollapsibleChildren.length, alwaysCollapseChildren.length, unCollapsibleWidth, unCollapsibleChildren.length]);
+  // 使用 ref 保存最新的计算函数，避免 ResizeObserver 等 effect 频繁重建
+  var calculateRef = useRef(calculateVisibleCount);
+  calculateRef.current = calculateVisibleCount;
 
-  // 初始测量 - 使用 useLayoutEffect 确保在绘制前完成
+  // Effect 1: 测量模式下，读取所有子元素宽度并计算 visibleCount
   useLayoutEffect(function () {
-    if (measureContainer) {
-      // 延迟一帧确保 portal 已渲染
-      requestAnimationFrame(function () {
-        measureChildren();
-      });
-    }
-  }, [children, measureChildren, measureContainer, normalCollapsibleChildren]);
+    if (!containerRef.current || !isMeasuring) return;
+    var items = containerRef.current.querySelectorAll('[data-filter-item]');
+    var newWidths = [];
+    items.forEach(function (el) {
+      var idx = Number(el.dataset.filterItem);
+      if (!isNaN(idx)) {
+        newWidths[idx] = el.offsetWidth;
+      }
+    });
+    cachedWidths.current = newWidths;
+    var count = calculateRef.current(containerRef.current.offsetWidth);
+    setVisibleCount(count);
+  }, [isMeasuring]);
 
-  // 当 filterValues 改变时，more 按钮可能会显示 badge，导致宽度变化，需重新测量
+  // Effect 2: 监听容器大小变化，用缓存宽度重新计算（不需要重新测量）
   useEffect(function () {
-    if (measureContainer) {
-      requestAnimationFrame(function () {
-        measureChildren();
+    if (!containerRef.current) return;
+    var el = containerRef.current;
+    var ro = new ResizeObserver(function () {
+      if (cachedWidths.current.length === 0) return;
+      var count = calculateRef.current(el.offsetWidth);
+      setVisibleCount(function (prev) {
+        return prev === count ? prev : count;
       });
-    }
-  }, [filterValues, measureChildren, measureContainer]);
-
-  // 当 childWidths 更新后计算可见数量
-  useLayoutEffect(function () {
-    calculateVisibleCount();
-  }, [childWidths, unCollapsibleWidth, calculateVisibleCount]);
-
-  // 监听窗口大小变化
-  useEffect(function () {
-    var handleResize = function handleResize() {
-      calculateVisibleCount();
-    };
-    window.addEventListener('resize', handleResize);
+    });
+    ro.observe(el);
     return function () {
-      window.removeEventListener('resize', handleResize);
+      return ro.disconnect();
     };
-  }, [calculateVisibleCount]);
+  }, []);
 
-  // 监听容器大小变化
+  // Effect 3: filterValues 变化时，more 按钮 badge 可能变化，需要重新计算
   useEffect(function () {
-    if (!containerRef.current) return;
-    var resizeObserver = new ResizeObserver(function () {
-      calculateVisibleCount();
+    if (!containerRef.current || cachedWidths.current.length === 0) return;
+    var count = calculateRef.current(containerRef.current.offsetWidth);
+    setVisibleCount(function (prev) {
+      return prev === count ? prev : count;
     });
-    resizeObserver.observe(containerRef.current);
-    return function () {
-      resizeObserver.disconnect();
-    };
-  }, [calculateVisibleCount]);
-
-  // 分离可见和隐藏的普通可收集子元素（始终折叠的不参与计算）
-  var visibleCollapsibleChildren = visibleCount === -1 ? normalCollapsibleChildren : normalCollapsibleChildren.slice(0, visibleCount);
-  var hiddenCollapsibleChildren = visibleCount === -1 ? [] : normalCollapsibleChildren.slice(visibleCount);
-
-  // 合并始终折叠和隐藏的普通可收集子元素
-  var allHiddenChildren = [].concat(_toConsumableArray(alwaysCollapseChildren), _toConsumableArray(hiddenCollapsibleChildren));
-
-  // 递归地为子元素添加 _isCollapsed prop
-  var addIsInWrapProp = function addIsInWrapProp(element) {
-    var childProps = element.props;
-
-    // 对当前元素添加 _isCollapsed prop
-    var newProps = {
-      _isCollapsed: true
-    };
-
-    // 如果有 children，递归处理
-    if (childProps !== null && childProps !== void 0 && childProps.children) {
-      if ( /*#__PURE__*/isValidElement(childProps.children)) {
-        // 单个子元素
-        newProps.children = addIsInWrapProp(childProps.children);
-      } else if (Array.isArray(childProps.children)) {
-        // 多个子元素
-        newProps.children = childProps.children.map(function (child) {
-          if ( /*#__PURE__*/isValidElement(child)) {
-            return addIsInWrapProp(child);
-          }
-          return child;
-        });
-      }
-    }
-    return /*#__PURE__*/cloneElement(element, newProps);
-  };
+  }, [filterValues]);
+
+  // --- 派生状态 ---
+  var visibleIndexSet = useMemo(function () {
+    if (visibleCount === null) return null;
+    return new Set(normalCollapsibleItems.slice(0, visibleCount).map(function (item) {
+      return item.index;
+    }));
+  }, [visibleCount, normalCollapsibleItems]);
+  var hiddenCollapsibleItems = useMemo(function () {
+    if (!visibleIndexSet) return [];
+    return normalCollapsibleItems.filter(function (item) {
+      return !visibleIndexSet.has(item.index);
+    });
+  }, [visibleIndexSet, normalCollapsibleItems]);
+  var allHiddenItems = useMemo(function () {
+    return [].concat(_toConsumableArray(alwaysCollapseItems), _toConsumableArray(hiddenCollapsibleItems));
+  }, [alwaysCollapseItems, hiddenCollapsibleItems]);
 
-  // 更新筛选值的函数
+  // --- 值管理 ---
   var updateFilterValue = useCallback(function (id, _filterLabel, value, options, componentName) {
     setFilterValues(function (prev) {
-      // 如果值为空，移除该项
-      // 对于 switch 组件，false 被视为未选中状态，应该被视为空值
-      var isEmpty = value === undefined || value === null || value === '' || componentName === 'switch' && value === false ||
-      // switch 组件的 false 值视为空
-      Array.isArray(value) && value.length === 0;
+      var isEmpty = value === undefined || value === null || value === '' || componentName === 'switch' && value === false || Array.isArray(value) && value.length === 0;
       if (isEmpty) {
         var filtered = prev.filter(function (item) {
           return item.id !== id;
         });
-        // 如果数组长度没变化，说明该项本来就不存在，直接返回原数组
-        if (filtered.length === prev.length) {
-          return prev;
-        }
-        return filtered;
+        return filtered.length === prev.length ? prev : filtered;
       }
-      // 查找是否已存在
       var existingIndex = prev.findIndex(function (item) {
         return item.id === id;
       });
       if (existingIndex >= 0) {
-        var existingItem = prev[existingIndex];
-        // 深度比较 options 是否相等
-        var optionsEqual = existingItem.options === options || existingItem.options === undefined && options === undefined || existingItem.options !== undefined && options !== undefined && JSON.stringify(existingItem.options) === JSON.stringify(options);
-
-        // 如果值、选项和组件名都没变化，直接返回原数组
-        if (existingItem.value === value && optionsEqual && existingItem.componentName === componentName && existingItem.label === _filterLabel) {
+        var existing = prev[existingIndex];
+        var optionsEqual = existing.options === options || existing.options === undefined && options === undefined || existing.options !== undefined && options !== undefined && JSON.stringify(existing.options) === JSON.stringify(options);
+        if (existing.value === value && optionsEqual && existing.componentName === componentName && existing.label === _filterLabel) {
           return prev;
         }
-        // 更新已存在的项
         var newValues = _toConsumableArray(prev);
         newValues[existingIndex] = {
           id: id,
@@ -370,43 +272,37 @@ var ResponsiveFilterGroup = function ResponsiveFilterGroup(_ref) {
           componentName: componentName
         };
         return newValues;
-      } else {
-        // 添加新项
-        return [].concat(_toConsumableArray(prev), [{
-          id: id,
-          label: _filterLabel,
-          value: value,
-          options: options,
-          componentName: componentName
-        }]);
       }
+      return [].concat(_toConsumableArray(prev), [{
+        id: id,
+        label: _filterLabel,
+        value: value,
+        options: options,
+        componentName: componentName
+      }]);
     });
   }, []);
   var handleClearAll = function handleClearAll() {
-    // 先清除所有子组件的值
-    allHiddenChildren.forEach(function (child) {
-      if ( /*#__PURE__*/isValidElement(child)) {
-        var childProps = child.props;
-        // 如果是 Form.Item，需要访问其子组件
+    allHiddenItems.forEach(function (item) {
+      if ( /*#__PURE__*/isValidElement(item.child)) {
+        var childProps = item.child.props;
         if (childProps.children && /*#__PURE__*/isValidElement(childProps.children)) {
+          var _innerChildProps$onCh;
           var innerChildProps = childProps.children.props;
-          if (innerChildProps.onChange) {
-            innerChildProps.onChange(undefined);
-          }
-        } else if (childProps.onChange) {
-          childProps.onChange(undefined);
+          (_innerChildProps$onCh = innerChildProps.onChange) === null || _innerChildProps$onCh === void 0 || _innerChildProps$onCh.call(innerChildProps, undefined);
+        } else {
+          var _childProps$onChange;
+          (_childProps$onChange = childProps.onChange) === null || _childProps$onChange === void 0 || _childProps$onChange.call(childProps, undefined);
         }
       }
     });
-    // 然后清除 filterValues
     setFilterValues([]);
-    // 最后调用外部回调
-    onClearAll();
+    onClearAll === null || onClearAll === void 0 || onClearAll();
   };
 
-  // 渲染隐藏的可收集子元素到 FilterWrap 中（包括始终折叠和隐藏的普通可收集子元素）
+  // --- 渲染 FilterWrap（收起的筛选项） ---
   var renderHiddenChildren = function renderHiddenChildren() {
-    if (allHiddenChildren.length === 0) return null;
+    if (allHiddenItems.length === 0) return null;
     return /*#__PURE__*/_jsx(FilterProvider, {
       isCollapsed: true,
       filterValues: filterValues,
@@ -418,6 +314,7 @@ var ResponsiveFilterGroup = function ResponsiveFilterGroup(_ref) {
         label: filterLabel,
         extra: extra,
         onClearAll: handleClearAll,
+        showCount: showCount,
         footer: showActions && /*#__PURE__*/_jsxs(Flex, {
           justify: "space-between",
           children: [onApply && /*#__PURE__*/_jsx(Button, {
@@ -436,86 +333,94 @@ var ResponsiveFilterGroup = function ResponsiveFilterGroup(_ref) {
             children: filterLocale === null || filterLocale === void 0 ? void 0 : filterLocale.clearAll
           })]
         }),
-        children: allHiddenChildren.map(function (child, index) {
-          if ( /*#__PURE__*/isValidElement(child)) {
-            // 使用 child.key 或生成稳定的 key
-            var stableKey = child.key || "responsive-filter-child-".concat(index);
+        children: allHiddenItems.map(function (item, index) {
+          if ( /*#__PURE__*/isValidElement(item.child)) {
+            var stableKey = item.child.key || "responsive-filter-child-".concat(index);
             return /*#__PURE__*/_jsx(React.Fragment, {
-              children: addIsInWrapProp(child)
+              children: item.child
             }, stableKey);
           }
-          return child;
+          return item.child;
         })
       })
     });
   };
 
-  // 测量容器内容 - 使用 Portal 渲染到 body 外部，避免影响布局计算
-  // 只测量可收集的子元素
-  var measureContent = measureContainer ? /*#__PURE__*/createPortal( /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: unmeasureRef,
-      style: {
-        display: 'flex',
-        gap: gap,
-        whiteSpace: 'nowrap'
-      },
-      children: unCollapsibleChildren.map(function (child, index) {
-        var stableKey = /*#__PURE__*/isValidElement(child) && child.key ? child.key : "measure-unc-".concat(index);
-        return /*#__PURE__*/_jsx("div", {
+  // --- 渲染子元素 ---
+  // 所有子元素始终保持在 Flex 中的稳定位置（FilterProvider + div 包裹 + 稳定 key），
+  // 通过 CSS display 控制显隐，避免在可见/折叠间切换时卸载重挂载导致表单值丢失。
+  // FilterProvider 使隐藏的原始组件能直接感知 isCollapsed 并上报值，无需依赖 Popover 中的克隆。
+  var renderChildren = function renderChildren() {
+    var elements = [];
+    var filterWrapInserted = false;
+    var collapsibleIdx = 0;
+    childrenArray.forEach(function (child, index) {
+      var info = childInfo[index];
+      var stableKey = child.key || "filter-item-".concat(index);
+      var display;
+      var isHidden = false;
+      if (isMeasuring) {
+        display = 'inline-flex';
+      } else if (!info.isCollapsible) {
+        display = undefined;
+      } else if (info.isAlwaysCollapse) {
+        display = 'none';
+        isHidden = true;
+      } else {
+        var isVisible = collapsibleIdx < visibleCount;
+        display = isVisible ? undefined : 'none';
+        isHidden = !isVisible;
+        collapsibleIdx++;
+      }
+      elements.push( /*#__PURE__*/_jsx(FilterProvider, {
+        isCollapsed: !isMeasuring && isHidden,
+        filterValues: filterValues,
+        updateFilterValue: updateFilterValue,
+        children: /*#__PURE__*/_jsx("div", {
+          "data-filter-item": isMeasuring ? index : undefined,
           style: {
-            display: 'inline-flex'
+            display: display
           },
           children: child
-        }, stableKey);
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      ref: measureRef,
+        })
+      }, stableKey));
+      if (!isMeasuring && isHidden && !filterWrapInserted && allHiddenItems.length > 0) {
+        filterWrapInserted = true;
+        elements.push( /*#__PURE__*/_jsx(React.Fragment, {
+          children: renderHiddenChildren()
+        }, "filter-wrap"));
+      }
+    });
+    if (!isMeasuring && !filterWrapInserted && allHiddenItems.length > 0) {
+      elements.push( /*#__PURE__*/_jsx(React.Fragment, {
+        children: renderHiddenChildren()
+      }, "filter-wrap"));
+    }
+    return elements;
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: "responsive-filter-group",
+    style: _objectSpread({
+      flex: '1 1 auto',
+      minWidth: 0,
+      position: 'relative',
+      visibility: isMeasuring ? 'hidden' : undefined
+    }, style),
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: moreButtonMeasureRef,
       style: {
-        display: 'flex',
-        gap: gap,
-        whiteSpace: 'nowrap'
+        position: 'absolute',
+        visibility: 'hidden',
+        pointerEvents: 'none',
+        top: -9999,
+        left: -9999,
+        display: 'inline-flex'
       },
-      children: normalCollapsibleChildren.map(function (child, index) {
-        // 使用 child.key 或生成稳定的 key
-        var stableKey = /*#__PURE__*/isValidElement(child) && child.key ? child.key : "measure-child-".concat(index);
-        return /*#__PURE__*/_jsx("div", {
-          style: {
-            display: 'inline-flex'
-          },
-          children: child
-        }, stableKey);
-      })
-    }), /*#__PURE__*/_jsx(FilterProvider, {
-      isCollapsed: true,
-      filterValues: filterValues,
-      updateFilterValue: updateFilterValue,
-      children: /*#__PURE__*/_jsx("div", {
-        style: {
-          position: 'absolute',
-          visibility: 'hidden',
-          pointerEvents: 'none',
-          top: -9999,
-          left: -9999
-        },
-        children: allHiddenChildren.map(function (child, index) {
-          if ( /*#__PURE__*/isValidElement(child)) {
-            return /*#__PURE__*/_jsx(React.Fragment, {
-              children: addIsInWrapProp(child)
-            }, child.key || "hidden-clone-".concat(index));
-          }
-          return child;
-        })
-      })
-    }), /*#__PURE__*/_jsx(FilterProvider, {
-      isCollapsed: true,
-      filterValues: filterValues,
-      updateFilterValue: updateFilterValue,
-      children: /*#__PURE__*/_jsx("div", {
-        ref: moreButtonRef,
-        style: {
-          display: 'inline-flex'
-        },
+      children: /*#__PURE__*/_jsx(FilterProvider, {
+        isCollapsed: true,
+        filterValues: filterValues,
+        updateFilterValue: updateFilterValue,
         children: /*#__PURE__*/_jsx(FilterWrap, {
           collapsed: true,
           icon: icon,
@@ -525,23 +430,11 @@ var ResponsiveFilterGroup = function ResponsiveFilterGroup(_ref) {
           children: /*#__PURE__*/_jsx("div", {})
         })
       })
-    })]
-  }), measureContainer) : null;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [measureContent, /*#__PURE__*/_jsx("div", {
-      ref: containerRef,
-      style: _objectSpread({
-        flex: '1 1 auto',
-        minWidth: 0,
-        overflow: 'hidden'
-      }, style),
-      children: /*#__PURE__*/_jsxs(Flex, {
-        ref: innerFlexRef,
-        gap: gap,
-        align: "center",
-        wrap: "nowrap",
-        children: [unCollapsibleChildren, visibleCollapsibleChildren, renderHiddenChildren()]
-      })
+    }), /*#__PURE__*/_jsx(Flex, {
+      gap: gap,
+      align: "center",
+      wrap: "nowrap",
+      children: renderChildren()
     })]
   });
 };