@kne/react-filter 1.0.5 → 1.0.7

package/dist/index.js

@@ -10,6 +10,7 @@ var reactDom = require('react-dom');
 var isNumber = require('lodash/isNumber');
 var SuperSelect = require('@kne/super-select');
 var superSelectPlus = require('@kne/super-select-plus');
+require('@kne/super-select/dist/index.css');
 require('@kne/super-select-plus/dist/index.css');
 var dayjs = require('dayjs');
 var transform = require('lodash/transform');
@@ -46,7 +47,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","filter-value-display-content":"kne-react-filter_v2dnw","filter-value-tags-wrap":"kne-react-filter_J1wBU","filter-value-tags":"kne-react-filter_rRhFE","filter-value-actions":"kne-react-filter_-Brt9","filter-value-toggle":"kne-react-filter_WuL0c","pop-util-content":"kne-react-filter_g-hXk","pop-util-body":"kne-react-filter_4n4MP","date-range-picker-popup":"kne-react-filter_6Zx60","pop-util-overlay":"kne-react-filter_m7Csi","pop-util-mask":"kne-react-filter_o2B3k","pop-util-mask-fade-in":"kne-react-filter_oCXiX","pop-util-mask-leave":"kne-react-filter_qGnRO","pop-util-mask-fade-out":"kne-react-filter_cDx1y","field-item-mobile-popup":"kne-react-filter_wq5nf","pop-util-mobile-expand-down":"kne-react-filter_6RxjE","date-picker-popup":"kne-react-filter_iwLs2","pop-util-mobile-collapse-up":"kne-react-filter_009r-","pop-util-footer":"kne-react-filter_iqe8W","pop-util-text":"kne-react-filter_72gGQ","filter-item-inner":"kne-react-filter_cYX12","filter-item-text":"kne-react-filter_cnMY-","filter-item-number-range":"kne-react-filter_Cv2Bw","filter-item-custom":"kne-react-filter_CBczA","filter-item-custom-active":"kne-react-filter_ldxUR","filter-item-number-range-split":"kne-react-filter_4p3C9","filter-item-number-input":"kne-react-filter_yy1y1","range-picker":"kne-react-filter_81zQn","cascader-select-wrap":"kne-react-filter_UHBfi","cascader-dropdown-menu":"kne-react-filter_bY8JQ","filter-advanced":"kne-react-filter_rg45N","filter-advanced-item-other":"kne-react-filter_HcsA8","filter-advanced-item-other-inner":"kne-react-filter_4Bqtz","filter-advanced-more":"kne-react-filter_jVH7z","filter-value-display":"kne-react-filter_8-R34","is-not-overflow":"kne-react-filter_TM1E2","is-expand":"kne-react-filter_7aclr","filter-value-scroll-prev-shadow":"kne-react-filter_C1t-q","filter-value-scroll-next-shadow":"kne-react-filter_ZFoeL","is-overflow":"kne-react-filter_GhFCl","filter-value-action-placeholder":"kne-react-filter_wGZp6","filter-value-action-right":"kne-react-filter_vyPwo","filter-scroll-prev-shadow":"kne-react-filter_fyhz3","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
+var style$1 = {"filter":"kne-react-filter_b3gMw","filter-item-icon":"kne-react-filter_e3V6h","filter-item-option-icon":"kne-react-filter_dLoYj","filter-title":"kne-react-filter_khFt2","filter-title-hidden":"kne-react-filter_j2mP1","ad-filter-title":"kne-react-filter_HptIY","ad-filter-line":"kne-react-filter_7Ob6-","filter-line":"kne-react-filter_Y9XTa","clean-btn":"kne-react-filter_CJ935","filter-item":"kne-react-filter_JpaMr","un-expand":"kne-react-filter_LfQME","ad-filter-selected":"kne-react-filter_pBsaE","filter-label":"kne-react-filter_Bx3s8","filter-line-nowrap":"kne-react-filter_Ccx24","filter-line-measure":"kne-react-filter_uMXzo","filter-item-wrap":"kne-react-filter_Co4Pg","option":"kne-react-filter_G1cRp","is-active":"kne-react-filter_Aab98","is-visited":"kne-react-filter_Ww12R","un-expand-shadow":"kne-react-filter_2ExqW","filter-item-label":"kne-react-filter_JAmeE","filter-item-field":"kne-react-filter_WvRvl","filter-drop-tag":"kne-react-filter_dG8rq","filter-list":"kne-react-filter_qlWu6","filter-list-scroll-wrap":"kne-react-filter_oaIF4","filter-list-constrained":"kne-react-filter_3gXxO","filter-list-scroll":"kne-react-filter_Jq43Q","filter-scroll-next":"kne-react-filter_BdfSI","filter-list-tag":"kne-react-filter_LV2VI","filter-tag":"kne-react-filter_yyR3u","filter-tag-value":"kne-react-filter_8nm8n","filter-value-tag":"kne-react-filter_tWyCr","filter-value-tag-label":"kne-react-filter_XPzrL","filter-value-tag-content":"kne-react-filter_6e79l","filter-value-display-content":"kne-react-filter_v2dnw","filter-value-tags-wrap":"kne-react-filter_J1wBU","filter-value-tags":"kne-react-filter_rRhFE","filter-value-actions":"kne-react-filter_-Brt9","filter-value-toggle":"kne-react-filter_WuL0c","pop-util-content":"kne-react-filter_g-hXk","pop-util-body":"kne-react-filter_4n4MP","date-range-picker-popup":"kne-react-filter_6Zx60","pop-util-overlay":"kne-react-filter_m7Csi","pop-util-mask":"kne-react-filter_o2B3k","pop-util-mask-fade-in":"kne-react-filter_oCXiX","pop-util-mask-leave":"kne-react-filter_qGnRO","pop-util-mask-fade-out":"kne-react-filter_cDx1y","field-item-mobile-popup":"kne-react-filter_wq5nf","pop-util-mobile-expand-down":"kne-react-filter_6RxjE","date-picker-popup":"kne-react-filter_iwLs2","pop-util-mobile-collapse-up":"kne-react-filter_009r-","pop-util-footer":"kne-react-filter_iqe8W","pop-util-text":"kne-react-filter_72gGQ","filter-item-inner":"kne-react-filter_cYX12","filter-item-text":"kne-react-filter_cnMY-","filter-item-number-range":"kne-react-filter_Cv2Bw","filter-item-custom":"kne-react-filter_CBczA","filter-item-custom-active":"kne-react-filter_ldxUR","filter-item-number-range-split":"kne-react-filter_4p3C9","filter-item-number-input":"kne-react-filter_yy1y1","range-picker":"kne-react-filter_81zQn","cascader-select-wrap":"kne-react-filter_UHBfi","cascader-dropdown-menu":"kne-react-filter_bY8JQ","filter-advanced":"kne-react-filter_rg45N","filter-advanced-item-other":"kne-react-filter_HcsA8","filter-advanced-item-other-inner":"kne-react-filter_4Bqtz","filter-advanced-more":"kne-react-filter_jVH7z","filter-value-display":"kne-react-filter_8-R34","is-not-overflow":"kne-react-filter_TM1E2","is-expand":"kne-react-filter_7aclr","filter-value-scroll-prev-shadow":"kne-react-filter_C1t-q","filter-value-scroll-next-shadow":"kne-react-filter_ZFoeL","is-overflow":"kne-react-filter_GhFCl","filter-value-action-placeholder":"kne-react-filter_wGZp6","filter-value-action-right":"kne-react-filter_vyPwo","filter-scroll-prev-shadow":"kne-react-filter_fyhz3","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
 
 const context = /*#__PURE__*/react.createContext({});
 const Provider = context.Provider;
@@ -124,53 +125,291 @@ const useHorizontalScrollShadows = ({
   };
 };
 
-const Line$1 = _ref => {
-  let list = _ref.list,
-    children = _ref.children;
+const GAP = 8;
+const SAFETY_GAP = 2;
+const useVisibleItemCount = ({
+  items,
+  enabled,
+  strategy = 'asc'
+}) => {
+  const safeItems = Array.isArray(items) ? items : [];
+  const containerRef = react.useRef(null);
+  const measureRef = react.useRef(null);
+  const moreMeasureRef = react.useRef(null);
+  const rafRef = react.useRef(null);
+  const lastWidthRef = react.useRef(0);
+  const [containerEl, setContainerEl] = react.useState(null);
+  const [visibleCount, setVisibleCount] = react.useState(() => safeItems.length > 0 ? 1 : 0);
+  const setContainerRef = react.useCallback(node => {
+    containerRef.current = node;
+    setContainerEl(node || null);
+  }, []);
+  const setMeasureRef = react.useCallback(node => {
+    measureRef.current = node;
+  }, []);
+  const setMoreMeasureRef = react.useCallback(node => {
+    moreMeasureRef.current = node;
+  }, []);
+  const getWidths = react.useCallback(() => {
+    const container = containerRef.current;
+    const measureEl = measureRef.current;
+    if (!container || !measureEl) {
+      return null;
+    }
+    const containerWidth = container.clientWidth;
+    if (containerWidth <= 0) {
+      return null;
+    }
+    const itemNodes = measureEl.querySelectorAll('[data-filter-measure-item]');
+    if (!itemNodes.length) {
+      return null;
+    }
+    const moreButtonWidth = moreMeasureRef.current?.getBoundingClientRect().width || 0;
+    if (safeItems.length > 1 && moreButtonWidth <= 0) {
+      return null;
+    }
+    const itemWidths = Array.from(itemNodes, node => node.getBoundingClientRect().width);
+    return {
+      containerWidth,
+      itemWidths,
+      moreButtonWidth
+    };
+  }, [safeItems.length]);
+  const getWidthForCount = react.useCallback((itemWidths, moreButtonWidth, count) => {
+    let usedWidth = 0;
+    for (let i = 0; i < count; i++) {
+      usedWidth += itemWidths[i] + (i > 0 ? GAP : 0);
+    }
+    if (count < safeItems.length) {
+      usedWidth += GAP + moreButtonWidth;
+    }
+    return usedWidth;
+  }, [safeItems.length]);
+  const resolveVisibleCount = react.useCallback(widths => {
+    const {
+      containerWidth,
+      itemWidths,
+      moreButtonWidth
+    } = widths;
+    const maxCount = Math.min(safeItems.length, itemWidths.length);
+    let count = 1;
+    if (strategy === 'desc') {
+      count = maxCount;
+      while (count > 1) {
+        const usedWidth = getWidthForCount(itemWidths, moreButtonWidth, count);
+        if (usedWidth + SAFETY_GAP <= containerWidth) {
+          break;
+        }
+        count -= 1;
+      }
+    } else {
+      count = 1;
+      while (count < maxCount) {
+        const nextCount = count + 1;
+        const usedWidth = getWidthForCount(itemWidths, moreButtonWidth, nextCount);
+        if (usedWidth + SAFETY_GAP > containerWidth) {
+          break;
+        }
+        count = nextCount;
+      }
+    }
+    return Math.max(1, count);
+  }, [getWidthForCount, safeItems.length, strategy]);
+  const calculateByWidth = react.useCallback(() => {
+    if (!enabled || !safeItems.length) {
+      setVisibleCount(prev => prev === safeItems.length ? prev : safeItems.length);
+      return;
+    }
+    const widths = getWidths();
+    if (!widths) {
+      return;
+    }
+    const nextCount = resolveVisibleCount(widths);
+    setVisibleCount(prev => prev === nextCount ? prev : nextCount);
+  }, [enabled, getWidths, safeItems.length, resolveVisibleCount]);
+  const scheduleCalculate = react.useCallback(() => {
+    if (rafRef.current) {
+      window.cancelAnimationFrame(rafRef.current);
+    }
+    rafRef.current = window.requestAnimationFrame(() => {
+      rafRef.current = null;
+      calculateByWidth();
+    });
+  }, [calculateByWidth]);
+  react.useLayoutEffect(() => {
+    scheduleCalculate();
+    return () => {
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [safeItems, scheduleCalculate]);
+  react.useEffect(() => {
+    if (!enabled || !containerEl) {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries.find(item => item.target === containerEl);
+      const nextWidth = entry?.contentRect.width ?? containerEl.clientWidth;
+      if (Math.abs(nextWidth - lastWidthRef.current) < 1) {
+        return;
+      }
+      lastWidthRef.current = nextWidth;
+      scheduleCalculate();
+    });
+    lastWidthRef.current = containerEl.clientWidth;
+    observer.observe(containerEl);
+    window.addEventListener('resize', scheduleCalculate);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', scheduleCalculate);
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [containerEl, enabled, scheduleCalculate]);
+  return {
+    setContainerRef,
+    setMeasureRef,
+    setMoreMeasureRef,
+    visibleCount
+  };
+};
+
+const isFilterListItem = item => {
+  if (!item) return false;
+  if (typeof item === 'function') return true;
+  return !!item.type;
+};
+const isNestedFilterList = list => {
+  if (!Array.isArray(list) || list.length === 0) return false;
+  return Array.isArray(list[0]) && !isFilterListItem(list[0]);
+};
+const normalizeFilterList = list => {
+  const safeList = Array.isArray(list) ? list : [];
+  if (!safeList.length) {
+    return {
+      mode: 'flat',
+      items: [],
+      lines: []
+    };
+  }
+  if (isNestedFilterList(safeList)) {
+    return {
+      mode: 'nested',
+      items: [],
+      lines: safeList
+    };
+  }
+  return {
+    mode: 'flat',
+    items: safeList,
+    lines: []
+  };
+};
+const getMobileFilterList = list => {
+  const {
+    mode,
+    items,
+    lines
+  } = normalizeFilterList(list);
+  if (mode === 'flat') return items;
+  return lines.reduce((result, line) => result.concat(line), []);
+};
+
+const isValidFilterItem = item => !!item && (item.type || typeof item === 'function');
+const useFilterItemRenderer = () => {
   const _useContext = useContext(),
     value = _useContext.value,
     onChange = _useContext.onChange;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: style$1['filter-line'],
-    children: [list.filter(item => !!item.type).map((item, index) => {
-      if (typeof item === 'function') {
-        return item(props => {
-          return {
-            index,
-            value: value ? get__default["default"](value.get(props == null ? void 0 : props.name), 'value') : props == null ? void 0 : props.value,
-            onChange: onChange ? value => onChange({
-              name: props == null ? void 0 : props.name,
-              label: props == null ? void 0 : props.label,
-              value
-            }) : props == null ? void 0 : props.onChange
-          };
-        });
-      }
-      const ComponentItem = item.type;
-      return /*#__PURE__*/react.createElement(ComponentItem, _extends({}, Object.assign({}, item.props, {
-        value: value ? get__default["default"](value.get(item.props.name), 'value') : item.props.value,
-        onChange: onChange ? value => onChange({
-          name: item.props.name,
-          label: item.props.label,
-          value
-        }) : item.props.onChange
-      }), {
-        key: item.key || item.props.name || index
+  return react.useCallback((item, index) => {
+    if (typeof item === 'function') {
+      return item(props => ({
+        index,
+        value: value ? get__default["default"](value.get(props == null ? void 0 : props.name), 'value') : props == null ? void 0 : props.value,
+        onChange: onChange ? nextValue => onChange({
+          name: props == null ? void 0 : props.name,
+          label: props == null ? void 0 : props.label,
+          value: nextValue
+        }) : props == null ? void 0 : props.onChange
       }));
-    }), children]
+    }
+    const ComponentItem = item.type;
+    return /*#__PURE__*/react.createElement(ComponentItem, _extends({}, Object.assign({}, item.props, {
+      value: value ? get__default["default"](value.get(item.props.name), 'value') : item.props.value,
+      onChange: onChange ? nextValue => onChange({
+        name: item.props.name,
+        label: item.props.label,
+        value: nextValue
+      }) : item.props.onChange
+    }), {
+      key: item.key || item.props.name || index
+    }));
+  }, [onChange, value]);
+};
+const Line$1 = _ref => {
+  let list = _ref.list,
+    children = _ref.children,
+    innerRef = _ref.innerRef,
+    nowrap = _ref.nowrap;
+  const renderItem = useFilterItemRenderer();
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: innerRef,
+    className: classnames__default["default"](style$1['filter-line'], {
+      [style$1['filter-line-nowrap']]: nowrap
+    }),
+    children: [list.filter(isValidFilterItem).map((item, index) => renderItem(item, index)), children]
   });
 };
-const FilterLines = _ref2 => {
-  let className = _ref2.className,
-    _ref2$list = _ref2.list,
-    list = _ref2$list === void 0 ? [] : _ref2$list,
-    _ref2$displayLine = _ref2.displayLine,
-    displayLine = _ref2$displayLine === void 0 ? 1 : _ref2$displayLine,
-    label = _ref2.label,
-    extra = _ref2.extra,
-    children = _ref2.children;
-  const hasMore = list.length > displayLine;
-  const mobileList = list.reduce((result, item) => result.concat(Array.isArray(item) ? item : [item]), []);
+const CollapseButtons = _ref2 => {
+  let onClick = _ref2.onClick,
+    toggleUpText = _ref2.toggleUpText;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(antd.Space, {
+      size: 4,
+      className: classnames__default["default"](style$1['un-expand-shadow']),
+      children: /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
+        size: 4,
+        className: classnames__default["default"](style$1['option'], style$1['filter-item']),
+        children: [toggleUpText, /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: style$1['filter-item-option-icon'],
+          children: "\u25B2"
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(antd.Space, {
+      size: 4,
+      className: classnames__default["default"](style$1['un-expand']),
+      onClick: onClick,
+      children: /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
+        size: 4,
+        className: classnames__default["default"](style$1['option'], style$1['filter-item']),
+        children: [toggleUpText, /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: style$1['filter-item-option-icon'],
+          children: "\u25B2"
+        })]
+      })
+    })]
+  });
+};
+const FilterLines = _ref3 => {
+  let className = _ref3.className,
+    _ref3$list = _ref3.list,
+    list = _ref3$list === void 0 ? [] : _ref3$list,
+    _ref3$displayLine = _ref3.displayLine,
+    displayLine = _ref3$displayLine === void 0 ? 1 : _ref3$displayLine,
+    label = _ref3.label,
+    extra = _ref3.extra,
+    children = _ref3.children,
+    _ref3$visibleCountStr = _ref3.visibleCountStrategy,
+    visibleCountStrategy = _ref3$visibleCountStr === void 0 ? 'asc' : _ref3$visibleCountStr;
+  const _useMemo = react.useMemo(() => normalizeFilterList(list), [list]),
+    mode = _useMemo.mode,
+    flatItems = _useMemo.items,
+    lines = _useMemo.lines;
+  const mobileList = react.useMemo(() => getMobileFilterList(list), [list]);
+  const isFlatMode = mode === 'flat';
   const _useState = react.useState(false),
     isExpand = _useState[0],
     setIsExpand = _useState[1];
@@ -182,10 +421,38 @@ const FilterLines = _ref2 => {
     scrollRef = _useHorizontalScrollS.scrollRef,
     showScrollPrev = _useHorizontalScrollS.showScrollPrev,
     showScrollNext = _useHorizontalScrollS.showScrollNext;
+  const _useVisibleItemCount = useVisibleItemCount({
+      items: flatItems,
+      enabled: !isMobile && isFlatMode,
+      strategy: visibleCountStrategy
+    }),
+    setContainerRef = _useVisibleItemCount.setContainerRef,
+    setMeasureRef = _useVisibleItemCount.setMeasureRef,
+    setMoreMeasureRef = _useVisibleItemCount.setMoreMeasureRef,
+    visibleCount = _useVisibleItemCount.visibleCount;
+  const renderItem = useFilterItemRenderer();
   const _useIntl = reactIntl.useIntl({
       moduleName: 'Filter'
     }),
     formatMessage = _useIntl.formatMessage;
+  const visibleFlatItems = isFlatMode ? flatItems.slice(0, visibleCount) : [];
+  const hiddenFlatItems = isFlatMode ? flatItems.slice(visibleCount) : [];
+  const hasMoreFlat = hiddenFlatItems.length > 0;
+  const hasMoreNested = !isFlatMode && lines.length > displayLine;
+  const hasMore = isFlatMode ? hasMoreFlat : hasMoreNested;
+  const visibleLines = !isFlatMode ? lines.slice(0, displayLine) : [];
+  const hiddenLines = !isFlatMode ? lines.slice(displayLine) : [];
+  const showLabel = isFlatMode ? flatItems.length > 0 : lines.length > 0;
+  const setScrollContainerRef = react.useCallback(node => {
+    scrollRef.current = node;
+  }, [scrollRef]);
+  const setMeasureContainerRef = react.useCallback(node => {
+    if (!isMobile && isFlatMode) {
+      setContainerRef(node);
+    } else {
+      setContainerRef(null);
+    }
+  }, [isFlatMode, isMobile, setContainerRef]);
   const scrollToNext = react.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -205,6 +472,62 @@ const FilterLines = _ref2 => {
       inline: 'center'
     });
   }, [isMobile, scrollRef]);
+  const toggleExpand = react.useCallback(() => {
+    setIsExpand(value => !value);
+  }, []);
+  const moreButtonLabel = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [formatMessage({
+      id: 'moreText'
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: style$1['filter-item-option-icon'],
+      children: "\u25BC"
+    })]
+  });
+  const moreButton = /*#__PURE__*/jsxRuntime.jsx(antd.Space, {
+    size: 4,
+    className: classnames__default["default"](style$1['filter-item'], style$1['option']),
+    onClick: toggleExpand,
+    children: moreButtonLabel
+  });
+  const renderDesktopContent = () => {
+    if (isFlatMode) {
+      return /*#__PURE__*/jsxRuntime.jsx(Line$1, {
+        list: visibleFlatItems,
+        nowrap: hasMoreFlat && !isExpand,
+        children: hasMoreFlat && !isExpand ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          "data-filter-more": true,
+          children: moreButton
+        }) : null
+      });
+    }
+    return visibleLines.map((line, index) => /*#__PURE__*/jsxRuntime.jsx(Line$1, {
+      list: line,
+      children: hasMoreNested && !isExpand && index === displayLine - 1 ? moreButton : null
+    }, index));
+  };
+  const renderExpandedContent = () => {
+    if (isFlatMode) {
+      if (!hiddenFlatItems.length) return null;
+      return /*#__PURE__*/jsxRuntime.jsx(Line$1, {
+        list: hiddenFlatItems,
+        children: /*#__PURE__*/jsxRuntime.jsx(CollapseButtons, {
+          onClick: toggleExpand,
+          toggleUpText: formatMessage({
+            id: 'toggleUpText'
+          })
+        })
+      });
+    }
+    return hiddenLines.map((line, index) => /*#__PURE__*/jsxRuntime.jsx(Line$1, {
+      list: line,
+      children: index === hiddenLines.length - 1 ? /*#__PURE__*/jsxRuntime.jsx(CollapseButtons, {
+        onClick: toggleExpand,
+        toggleUpText: formatMessage({
+          id: 'toggleUpText'
+        })
+      }) : null
+    }, index));
+  };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
       className: classnames__default["default"](style$1['filter-title'], 'filter-title', className),
@@ -212,7 +535,7 @@ const FilterLines = _ref2 => {
       size: 16,
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: style$1['filter-label'],
-        children: list && list.length > 0 && (label || formatMessage({
+        children: showLabel && (label || formatMessage({
           id: 'filterText'
         }))
       }), /*#__PURE__*/jsxRuntime.jsxs(antd.Row, {
@@ -223,29 +546,38 @@ const FilterLines = _ref2 => {
           className: style$1['filter-list'],
           flex: 1,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: style$1['filter-list-scroll-wrap'],
-            children: [isMobile && showScrollPrev ? /*#__PURE__*/jsxRuntime.jsx("div", {
+            ref: setMeasureContainerRef,
+            className: classnames__default["default"](style$1['filter-list-scroll-wrap'], {
+              [style$1['filter-list-constrained']]: !isMobile && isFlatMode
+            }),
+            children: [!isMobile && isFlatMode ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+              ref: setMeasureRef,
+              className: classnames__default["default"](style$1['filter-line'], style$1['filter-line-measure']),
+              "aria-hidden": true,
+              children: [flatItems.filter(isValidFilterItem).map((item, index) => {
+                var _item$props;
+                return /*#__PURE__*/jsxRuntime.jsx("div", {
+                  "data-filter-measure-item": true,
+                  children: renderItem(item, index)
+                }, item.key || ((_item$props = item.props) == null ? void 0 : _item$props.name) || index);
+              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                ref: setMoreMeasureRef,
+                "data-filter-measure-more": true,
+                children: /*#__PURE__*/jsxRuntime.jsx(antd.Space, {
+                  size: 4,
+                  className: classnames__default["default"](style$1['filter-item'], style$1['option']),
+                  children: moreButtonLabel
+                })
+              })]
+            }) : null, 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,
+              ref: setScrollContainerRef,
               onClick: scrollItemIntoView,
-              children: (isMobile ? mobileList : list.slice(0, displayLine)).map((item, index) => /*#__PURE__*/jsxRuntime.jsx(Line$1, {
-                list: isMobile ? [item] : item,
-                children: !isMobile && hasMore && isExpand === false && index === displayLine - 1 ? /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
-                  size: 4,
-                  className: classnames__default["default"](style$1['filter-item'], style$1['option']),
-                  onClick: () => {
-                    setIsExpand(value => !value);
-                  },
-                  children: [formatMessage({
-                    id: 'moreText'
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: style$1['filter-item-option-icon'],
-                    children: "\u25BC"
-                  })]
-                }) : null
-              }, index))
+              children: isMobile ? mobileList.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(Line$1, {
+                list: [item]
+              }, index)) : renderDesktopContent()
             }), isMobile && showScrollNext ? /*#__PURE__*/jsxRuntime.jsx("button", {
               type: "button",
               className: style$1['filter-scroll-next'],
@@ -279,41 +611,7 @@ const FilterLines = _ref2 => {
         })
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: style$1['filter-list'],
-        children: list.slice(displayLine).map((item, index) => /*#__PURE__*/jsxRuntime.jsx(Line$1, {
-          list: item,
-          children: index === list.length - displayLine - 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/jsxRuntime.jsx(antd.Space, {
-              size: 4,
-              className: classnames__default["default"](style$1['un-expand-shadow']),
-              children: /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
-                size: 4,
-                className: classnames__default["default"](style$1['option'], style$1['filter-item']),
-                children: [formatMessage({
-                  id: 'toggleUpText'
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: style$1['filter-item-option-icon'],
-                  children: "\u25B2"
-                })]
-              })
-            }), /*#__PURE__*/jsxRuntime.jsx(antd.Space, {
-              size: 4,
-              className: classnames__default["default"](style$1['un-expand']),
-              onClick: () => {
-                setIsExpand(value => !value);
-              },
-              children: /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
-                size: 4,
-                className: classnames__default["default"](style$1['option'], style$1['filter-item']),
-                children: [formatMessage({
-                  id: 'toggleUpText'
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: style$1['filter-item-option-icon'],
-                  children: "\u25B2"
-                })]
-              })
-            })]
-          })
-        }, index))
+        children: renderExpandedContent()
       })]
     })]
   });
@@ -1438,6 +1736,15 @@ const NumberRangeFilterItem = withInputDefaultPlaceholder(NumberRangeFilterItem$
 const SuperSelectFilterItem = withFieldItem(SuperSelect__default["default"], {
   forcePopup: true
 });
+const SelectTableListFilterItem = withFieldItem(SuperSelect.SelectTableList, {
+  forcePopup: true
+});
+const SelectTreeFilterItem = withFieldItem(SuperSelect.SelectTree, {
+  forcePopup: true
+});
+const SelectCascaderFilterItem = withFieldItem(SuperSelect.SelectCascader, {
+  forcePopup: true
+});
 const SelectFunctionFilterItem = withFieldItem(superSelectPlus.SelectFunction, {
   forcePopup: true
 });
@@ -1453,6 +1760,9 @@ var fields$1 = {
   InputFilterItem: InputFilterItem$1,
   NumberRangeFilterItem: NumberRangeFilterItem,
   SuperSelectFilterItem: SuperSelectFilterItem,
+  SelectTableListFilterItem: SelectTableListFilterItem,
+  SelectTreeFilterItem: SelectTreeFilterItem,
+  SelectCascaderFilterItem: SelectCascaderFilterItem,
   SelectFunctionFilterItem: SelectFunctionFilterItem,
   SelectIndustryFilterItem: SelectIndustryFilterItem,
   SelectAddressFilterItem: SelectAddressFilterItem,
@@ -2509,8 +2819,11 @@ exports.NumberRangeFilterItem = NumberRangeFilterItem;
 exports.PopoverItem = PopoverItem;
 exports.SearchInput = SearchInput;
 exports.SelectAddressFilterItem = SelectAddressFilterItem;
+exports.SelectCascaderFilterItem = SelectCascaderFilterItem;
 exports.SelectFunctionFilterItem = SelectFunctionFilterItem;
 exports.SelectIndustryFilterItem = SelectIndustryFilterItem;
+exports.SelectTableListFilterItem = SelectTableListFilterItem;
+exports.SelectTreeFilterItem = SelectTreeFilterItem;
 exports.SuperSelectFilterItem = SuperSelectFilterItem;
 exports.TypeDateRangePickerField = TypeDateRangePickerField;
 exports.TypeDateRangePickerFilterItem = TypeDateRangePickerFilterItem;