@kne/react-filter 1.0.5 → 1.0.7

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { useContext as useContext$1, createContext, useState, useEffect, useRef, useCallback, createElement, useMemo } from 'react';
+import { useContext as useContext$1, createContext, useState, useEffect, useRef, useCallback, useLayoutEffect, useMemo, createElement } 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';
@@ -8,8 +8,9 @@ import { UpOutlined, DownOutlined } from '@ant-design/icons';
 import clone from 'lodash/clone';
 import { createPortal } from 'react-dom';
 import isNumber from 'lodash/isNumber';
-import SuperSelect from '@kne/super-select';
+import SuperSelect, { SelectTableList, SelectTree, SelectCascader } from '@kne/super-select';
 import { SelectFunction, SelectIndustry, SelectAddress, createAddressApi } from '@kne/super-select-plus';
+import '@kne/super-select/dist/index.css';
 import '@kne/super-select-plus/dist/index.css';
 import dayjs from 'dayjs';
 import transform from 'lodash/transform';
@@ -35,7 +36,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__*/createContext({});
 const {
@@ -115,54 +116,293 @@ const useHorizontalScrollShadows = ({
   };
 };
 
-const Line$1 = ({
-  list,
-  children
+const GAP = 8;
+const SAFETY_GAP = 2;
+const useVisibleItemCount = ({
+  items,
+  enabled,
+  strategy: _strategy = 'asc'
 }) => {
+  const safeItems = Array.isArray(items) ? items : [];
+  const containerRef = useRef(null);
+  const measureRef = useRef(null);
+  const moreMeasureRef = useRef(null);
+  const rafRef = useRef(null);
+  const lastWidthRef = useRef(0);
+  const [containerEl, setContainerEl] = useState(null);
+  const [visibleCount, setVisibleCount] = useState(() => safeItems.length > 0 ? 1 : 0);
+  const setContainerRef = useCallback(node => {
+    containerRef.current = node;
+    setContainerEl(node || null);
+  }, []);
+  const setMeasureRef = useCallback(node => {
+    measureRef.current = node;
+  }, []);
+  const setMoreMeasureRef = useCallback(node => {
+    moreMeasureRef.current = node;
+  }, []);
+  const getWidths = useCallback(() => {
+    var _moreMeasureRef$curre;
+    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$curre = moreMeasureRef.current) == null ? void 0 : _moreMeasureRef$curre.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 = 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 = 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 = 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 = useCallback(() => {
+    if (rafRef.current) {
+      window.cancelAnimationFrame(rafRef.current);
+    }
+    rafRef.current = window.requestAnimationFrame(() => {
+      rafRef.current = null;
+      calculateByWidth();
+    });
+  }, [calculateByWidth]);
+  useLayoutEffect(() => {
+    scheduleCalculate();
+    return () => {
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [safeItems, scheduleCalculate]);
+  useEffect(() => {
+    if (!enabled || !containerEl) {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      var _entry$contentRect$wi;
+      const entry = entries.find(item => item.target === containerEl);
+      const nextWidth = (_entry$contentRect$wi = entry == null ? void 0 : entry.contentRect.width) != null ? _entry$contentRect$wi : 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 {
     value,
     onChange
   } = useContext();
-  return /*#__PURE__*/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(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__*/createElement(ComponentItem, _extends({}, Object.assign({}, item.props, {
-        value: value ? get(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 useCallback((item, index) => {
+    if (typeof item === 'function') {
+      return item(props => ({
+        index,
+        value: value ? get(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__*/createElement(ComponentItem, _extends({}, Object.assign({}, item.props, {
+      value: value ? get(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 = ({
+  list,
+  children,
+  innerRef,
+  nowrap
+}) => {
+  const renderItem = useFilterItemRenderer();
+  return /*#__PURE__*/jsxs("div", {
+    ref: innerRef,
+    className: classnames(style$1['filter-line'], {
+      [style$1['filter-line-nowrap']]: nowrap
+    }),
+    children: [list.filter(isValidFilterItem).map((item, index) => renderItem(item, index)), children]
   });
 };
+const CollapseButtons = ({
+  onClick,
+  toggleUpText
+}) => /*#__PURE__*/jsxs(Fragment, {
+  children: [/*#__PURE__*/jsx(Space, {
+    size: 4,
+    className: classnames(style$1['un-expand-shadow']),
+    children: /*#__PURE__*/jsxs(Space, {
+      size: 4,
+      className: classnames(style$1['option'], style$1['filter-item']),
+      children: [toggleUpText, /*#__PURE__*/jsx("span", {
+        className: style$1['filter-item-option-icon'],
+        children: "\u25B2"
+      })]
+    })
+  }), /*#__PURE__*/jsx(Space, {
+    size: 4,
+    className: classnames(style$1['un-expand']),
+    onClick: onClick,
+    children: /*#__PURE__*/jsxs(Space, {
+      size: 4,
+      className: classnames(style$1['option'], style$1['filter-item']),
+      children: [toggleUpText, /*#__PURE__*/jsx("span", {
+        className: style$1['filter-item-option-icon'],
+        children: "\u25B2"
+      })]
+    })
+  })]
+});
 const FilterLines = ({
   className,
   list: _list = [],
   displayLine: _displayLine = 1,
   label,
   extra,
-  children
+  children,
+  visibleCountStrategy: _visibleCountStrategy = 'asc'
 }) => {
-  const hasMore = _list.length > _displayLine;
-  const mobileList = _list.reduce((result, item) => result.concat(Array.isArray(item) ? item : [item]), []);
+  const {
+    mode,
+    items: flatItems,
+    lines
+  } = useMemo(() => normalizeFilterList(_list), [_list]);
+  const mobileList = useMemo(() => getMobileFilterList(_list), [_list]);
+  const isFlatMode = mode === 'flat';
   const [isExpand, setIsExpand] = useState(false);
   const isMobile = useMobile();
   const {
@@ -173,11 +413,40 @@ const FilterLines = ({
     enabled: isMobile,
     refreshKey: _list
   });
+  const {
+    setContainerRef,
+    setMeasureRef,
+    setMoreMeasureRef,
+    visibleCount
+  } = useVisibleItemCount({
+    items: flatItems,
+    enabled: !isMobile && isFlatMode,
+    strategy: _visibleCountStrategy
+  });
+  const renderItem = useFilterItemRenderer();
   const {
     formatMessage
   } = useIntl({
     moduleName: 'Filter'
   });
+  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 = useCallback(node => {
+    scrollRef.current = node;
+  }, [scrollRef]);
+  const setMeasureContainerRef = useCallback(node => {
+    if (!isMobile && isFlatMode) {
+      setContainerRef(node);
+    } else {
+      setContainerRef(null);
+    }
+  }, [isFlatMode, isMobile, setContainerRef]);
   const scrollToNext = useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -197,6 +466,62 @@ const FilterLines = ({
       inline: 'center'
     });
   }, [isMobile, scrollRef]);
+  const toggleExpand = useCallback(() => {
+    setIsExpand(value => !value);
+  }, []);
+  const moreButtonLabel = /*#__PURE__*/jsxs(Fragment, {
+    children: [formatMessage({
+      id: 'moreText'
+    }), /*#__PURE__*/jsx("span", {
+      className: style$1['filter-item-option-icon'],
+      children: "\u25BC"
+    })]
+  });
+  const moreButton = /*#__PURE__*/jsx(Space, {
+    size: 4,
+    className: classnames(style$1['filter-item'], style$1['option']),
+    onClick: toggleExpand,
+    children: moreButtonLabel
+  });
+  const renderDesktopContent = () => {
+    if (isFlatMode) {
+      return /*#__PURE__*/jsx(Line$1, {
+        list: visibleFlatItems,
+        nowrap: hasMoreFlat && !isExpand,
+        children: hasMoreFlat && !isExpand ? /*#__PURE__*/jsx("span", {
+          "data-filter-more": true,
+          children: moreButton
+        }) : null
+      });
+    }
+    return visibleLines.map((line, index) => /*#__PURE__*/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__*/jsx(Line$1, {
+        list: hiddenFlatItems,
+        children: /*#__PURE__*/jsx(CollapseButtons, {
+          onClick: toggleExpand,
+          toggleUpText: formatMessage({
+            id: 'toggleUpText'
+          })
+        })
+      });
+    }
+    return hiddenLines.map((line, index) => /*#__PURE__*/jsx(Line$1, {
+      list: line,
+      children: index === hiddenLines.length - 1 ? /*#__PURE__*/jsx(CollapseButtons, {
+        onClick: toggleExpand,
+        toggleUpText: formatMessage({
+          id: 'toggleUpText'
+        })
+      }) : null
+    }, index));
+  };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs(Space, {
       className: classnames(style$1['filter-title'], 'filter-title', className),
@@ -204,7 +529,7 @@ const FilterLines = ({
       size: 16,
       children: [/*#__PURE__*/jsx("span", {
         className: style$1['filter-label'],
-        children: _list && _list.length > 0 && (label || formatMessage({
+        children: showLabel && (label || formatMessage({
           id: 'filterText'
         }))
       }), /*#__PURE__*/jsxs(Row, {
@@ -215,29 +540,38 @@ const FilterLines = ({
           className: style$1['filter-list'],
           flex: 1,
           children: /*#__PURE__*/jsxs("div", {
-            className: style$1['filter-list-scroll-wrap'],
-            children: [isMobile && showScrollPrev ? /*#__PURE__*/jsx("div", {
+            ref: setMeasureContainerRef,
+            className: classnames(style$1['filter-list-scroll-wrap'], {
+              [style$1['filter-list-constrained']]: !isMobile && isFlatMode
+            }),
+            children: [!isMobile && isFlatMode ? /*#__PURE__*/jsxs("div", {
+              ref: setMeasureRef,
+              className: classnames(style$1['filter-line'], style$1['filter-line-measure']),
+              "aria-hidden": true,
+              children: [flatItems.filter(isValidFilterItem).map((item, index) => {
+                var _item$props;
+                return /*#__PURE__*/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__*/jsx("div", {
+                ref: setMoreMeasureRef,
+                "data-filter-measure-more": true,
+                children: /*#__PURE__*/jsx(Space, {
+                  size: 4,
+                  className: classnames(style$1['filter-item'], style$1['option']),
+                  children: moreButtonLabel
+                })
+              })]
+            }) : null, isMobile && showScrollPrev ? /*#__PURE__*/jsx("div", {
               className: style$1['filter-scroll-prev-shadow']
             }) : null, /*#__PURE__*/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__*/jsx(Line$1, {
-                list: isMobile ? [item] : item,
-                children: !isMobile && hasMore && isExpand === false && index === _displayLine - 1 ? /*#__PURE__*/jsxs(Space, {
-                  size: 4,
-                  className: classnames(style$1['filter-item'], style$1['option']),
-                  onClick: () => {
-                    setIsExpand(value => !value);
-                  },
-                  children: [formatMessage({
-                    id: 'moreText'
-                  }), /*#__PURE__*/jsx("span", {
-                    className: style$1['filter-item-option-icon'],
-                    children: "\u25BC"
-                  })]
-                }) : null
-              }, index))
+              children: isMobile ? mobileList.map((item, index) => /*#__PURE__*/jsx(Line$1, {
+                list: [item]
+              }, index)) : renderDesktopContent()
             }), isMobile && showScrollNext ? /*#__PURE__*/jsx("button", {
               type: "button",
               className: style$1['filter-scroll-next'],
@@ -271,41 +605,7 @@ const FilterLines = ({
         })
       }), /*#__PURE__*/jsx("div", {
         className: style$1['filter-list'],
-        children: _list.slice(_displayLine).map((item, index) => /*#__PURE__*/jsx(Line$1, {
-          list: item,
-          children: index === _list.length - _displayLine - 1 && /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(Space, {
-              size: 4,
-              className: classnames(style$1['un-expand-shadow']),
-              children: /*#__PURE__*/jsxs(Space, {
-                size: 4,
-                className: classnames(style$1['option'], style$1['filter-item']),
-                children: [formatMessage({
-                  id: 'toggleUpText'
-                }), /*#__PURE__*/jsx("span", {
-                  className: style$1['filter-item-option-icon'],
-                  children: "\u25B2"
-                })]
-              })
-            }), /*#__PURE__*/jsx(Space, {
-              size: 4,
-              className: classnames(style$1['un-expand']),
-              onClick: () => {
-                setIsExpand(value => !value);
-              },
-              children: /*#__PURE__*/jsxs(Space, {
-                size: 4,
-                className: classnames(style$1['option'], style$1['filter-item']),
-                children: [formatMessage({
-                  id: 'toggleUpText'
-                }), /*#__PURE__*/jsx("span", {
-                  className: style$1['filter-item-option-icon'],
-                  children: "\u25B2"
-                })]
-              })
-            })]
-          })
-        }, index))
+        children: renderExpandedContent()
       })]
     })]
   });
@@ -1409,6 +1709,15 @@ const NumberRangeFilterItem = withInputDefaultPlaceholder(NumberRangeFilterItem$
 const SuperSelectFilterItem = withFieldItem(SuperSelect, {
   forcePopup: true
 });
+const SelectTableListFilterItem = withFieldItem(SelectTableList, {
+  forcePopup: true
+});
+const SelectTreeFilterItem = withFieldItem(SelectTree, {
+  forcePopup: true
+});
+const SelectCascaderFilterItem = withFieldItem(SelectCascader, {
+  forcePopup: true
+});
 const SelectFunctionFilterItem = withFieldItem(SelectFunction, {
   forcePopup: true
 });
@@ -1424,6 +1733,9 @@ var fields$1 = {
   InputFilterItem: InputFilterItem$1,
   NumberRangeFilterItem: NumberRangeFilterItem,
   SuperSelectFilterItem: SuperSelectFilterItem,
+  SelectTableListFilterItem: SelectTableListFilterItem,
+  SelectTreeFilterItem: SelectTreeFilterItem,
+  SelectCascaderFilterItem: SelectCascaderFilterItem,
   SelectFunctionFilterItem: SelectFunctionFilterItem,
   SelectIndustryFilterItem: SelectIndustryFilterItem,
   SelectAddressFilterItem: SelectAddressFilterItem,
@@ -2470,5 +2782,5 @@ Filter.filterInterceptors = filterInterceptors;
 Filter.singleSelectInterceptor = singleSelectInterceptor;
 Filter.multiSelectInterceptor = multiSelectInterceptor;
 
-export { AdvancedFilter, DatePickerFilterItem, DateRangePickerFilterItem, FilterItem, FilterItemContainer, FilterLines, FilterProvider, FilterValueDisplay, InputFilterItem$1 as InputFilterItem, NumberRangeFilterItem, PopoverItem, SearchInput, SelectAddressFilterItem, SelectFunctionFilterItem, SelectIndustryFilterItem, SuperSelectFilterItem, TypeDateRangePickerField, TypeDateRangePickerFilterItem, createFilterValueMapper, createUrlFilterReader, createUrlParamsReader, Filter as default, fields$1 as fields, filterInterceptors, filterToUrlParams, getFilterValue, multiSelectInterceptor, parseFilterEntry, pickSelectValues, singleSelectInterceptor, stripConsumedUrlParams, takeFilterEntry, useContext as useFilter, useUrlFilter, useUrlFilterValue, withFieldItem, withFilterValue };
+export { AdvancedFilter, DatePickerFilterItem, DateRangePickerFilterItem, FilterItem, FilterItemContainer, FilterLines, FilterProvider, FilterValueDisplay, InputFilterItem$1 as InputFilterItem, NumberRangeFilterItem, PopoverItem, SearchInput, SelectAddressFilterItem, SelectCascaderFilterItem, SelectFunctionFilterItem, SelectIndustryFilterItem, SelectTableListFilterItem, SelectTreeFilterItem, SuperSelectFilterItem, TypeDateRangePickerField, TypeDateRangePickerFilterItem, createFilterValueMapper, createUrlFilterReader, createUrlParamsReader, Filter as default, fields$1 as fields, filterInterceptors, filterToUrlParams, getFilterValue, multiSelectInterceptor, parseFilterEntry, pickSelectValues, singleSelectInterceptor, stripConsumedUrlParams, takeFilterEntry, useContext as useFilter, useUrlFilter, useUrlFilterValue, withFieldItem, withFilterValue };
 //# sourceMappingURL=index.modern.js.map