@oceanbase/design 1.0.0-alpha.2 → 1.0.0-alpha.20

package/es/filter/hooks/useFilterTooltip.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export interface UseFilterTooltipOptions {
+    /** 是否有选中的值 */
+    hasValue: boolean;
+    /** Tooltip 显示的内容 */
+    label?: ReactNode;
+    content: ReactNode;
+    /** 是否禁用 Tooltip，默认 false */
+    disabled?: boolean;
+    /** Popover 关闭后的延迟时间（毫秒），用于防止 Tooltip 立即显示，默认 100 */
+    closeDelay?: number;
+}
+export interface UseFilterTooltipReturn {
+    /** Popover 状态变化时调用，用于同步状态 */
+    onPopoverOpenChange: (open: boolean) => void;
+    /** 用 Tooltip 包裹 children */
+    wrapWithTooltip: (children: ReactNode) => ReactNode;
+}
+/**
+ * 用于管理 Filter 组件的 Tooltip 显示逻辑
+ *
+ * 功能：
+ * 1. 在有选中值时，hover 显示 Tooltip
+ * 2. 当 Popover 打开时，自动关闭 Tooltip
+ * 3. 当 Popover 关闭后，需要鼠标移出再移入才会显示 Tooltip
+ * 4. 没有值时不显示 Tooltip
+ */
+export declare function useFilterTooltip({ hasValue, label, content, disabled, closeDelay, }: UseFilterTooltipOptions): UseFilterTooltipReturn;
+export default useFilterTooltip;

package/es/filter/hooks/useFilterTooltip.js

@@ -0,0 +1,127 @@
+"use client";
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Flex } from 'antd';
+import theme from "../../theme";
+import Tooltip from "../../tooltip";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 用于管理 Filter 组件的 Tooltip 显示逻辑
+ *
+ * 功能：
+ * 1. 在有选中值时，hover 显示 Tooltip
+ * 2. 当 Popover 打开时，自动关闭 Tooltip
+ * 3. 当 Popover 关闭后，需要鼠标移出再移入才会显示 Tooltip
+ * 4. 没有值时不显示 Tooltip
+ */
+export function useFilterTooltip(_ref) {
+  var hasValue = _ref.hasValue,
+    label = _ref.label,
+    content = _ref.content,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$closeDelay = _ref.closeDelay,
+    closeDelay = _ref$closeDelay === void 0 ? 100 : _ref$closeDelay;
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
+  // Tooltip 是否可见
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipVisible = _useState2[0],
+    setTooltipVisible = _useState2[1];
+  // Popover 是否打开
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPopoverOpen = _useState4[0],
+    setIsPopoverOpen = _useState4[1];
+  // 标记 Popover 是否刚刚关闭
+  var justClosedRef = useRef(false);
+  // 标记 Popover 是否曾经打开过，用于区分初始状态和关闭状态
+  var hasEverOpenedRef = useRef(false);
+
+  // Popover 状态变化时处理
+  useEffect(function () {
+    if (isPopoverOpen) {
+      // Popover 打开时，记录已打开过，并关闭 Tooltip
+      hasEverOpenedRef.current = true;
+      setTooltipVisible(false);
+      justClosedRef.current = false;
+    } else if (hasEverOpenedRef.current) {
+      // 只有在 Popover 曾经打开过的情况下，才执行关闭逻辑
+      // 避免初始化时触发这个逻辑
+      justClosedRef.current = true;
+      setTooltipVisible(false);
+      var timer = setTimeout(function () {
+        justClosedRef.current = false;
+      }, closeDelay);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [isPopoverOpen, closeDelay]);
+
+  // 当没有值时，关闭 Tooltip
+  useEffect(function () {
+    if (!hasValue) {
+      setTooltipVisible(false);
+    }
+  }, [hasValue]);
+
+  // Popover 状态变化时调用
+  var onPopoverOpenChange = useCallback(function (open) {
+    setIsPopoverOpen(open);
+  }, []);
+
+  // Tooltip 状态变化时调用
+  var handleTooltipOpenChange = useCallback(function (open) {
+    // 如果禁用或没有值，不显示
+    if (disabled || !hasValue) {
+      setTooltipVisible(false);
+      return;
+    }
+
+    // 如果 Popover 打开或刚刚关闭，不显示
+    if (isPopoverOpen || justClosedRef.current) {
+      setTooltipVisible(false);
+      return;
+    }
+    setTooltipVisible(open);
+  }, [disabled, hasValue, isPopoverOpen]);
+
+  // 用 Tooltip 包裹 children
+  var wrapWithTooltip = useCallback(function (children) {
+    if (disabled) {
+      return children;
+    }
+    return /*#__PURE__*/_jsx(Tooltip, {
+      mouseEnterDelay: 0.8,
+      title: hasValue ? /*#__PURE__*/_jsxs(Flex, {
+        gap: 4,
+        children: [label && /*#__PURE__*/_jsxs("div", {
+          style: {
+            color: token.colorTextLabel,
+            whiteSpace: 'nowrap'
+          },
+          children: [label, ": "]
+        }), /*#__PURE__*/_jsx(Flex, {
+          wrap: "wrap",
+          children: content
+        })]
+      }) : null,
+      open: tooltipVisible,
+      onOpenChange: handleTooltipOpenChange,
+      children: children
+    });
+  }, [disabled, hasValue, label, content, tooltipVisible, handleTooltipOpenChange, token]);
+  return {
+    onPopoverOpenChange: onPopoverOpenChange,
+    wrapWithTooltip: wrapWithTooltip
+  };
+}
+export default useFilterTooltip;

package/es/filter/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export { FilterProvider, useFilterContext } from './FilterContext';
+export type { BaseFilterProps, InternalFilterProps } from './type';
+export type { FilterSelectProps, SelectOption } from './components/FilterSelect';
+export type { FilterCheckboxProps, CheckboxOption } from './components/FilterCheckbox';
+export type { FilterCascaderProps, CascaderOption } from './components/FilterCascader';
+export type { FilterSwitchProps } from './components/FilterSwitch';
+export type { FilterRangeProps, RangeOption } from './components/FilterRange';
+export type { FilterInputProps } from './components/FilterInput';
+export type { FilterSlotProps } from './components/FilterSlot';
+export type { FilterWrapProps } from './components/FilterWrap';
+export type { ResponsiveFilterGroupProps } from './components/ResponsiveFilterGroup';
+declare const Filter: {
+    Select: import("react").FC<import("./components/FilterSelect").FilterSelectProps>;
+    Checkbox: import("react").NamedExoticComponent<import("./components/FilterCheckbox").FilterCheckboxProps>;
+    Range: import("react").FC<import("./components/FilterRange").FilterRangeProps>;
+    Wrap: import("react").FC<import("./components/FilterWrap").FilterWrapProps>;
+    Cascader: import("react").FC<import("./components/FilterCascader/types").FilterCascaderProps>;
+    Switch: import("react").FC<import("./components/FilterSwitch").FilterSwitchProps>;
+    Input: import("react").FC<import("./components/FilterInput").FilterInputProps>;
+    Slot: import("react").FC<import("./components/FilterSlot").FilterSlotProps>;
+    ResponsiveGroup: import("react").FC<import("./components/ResponsiveFilterGroup").ResponsiveFilterGroupProps>;
+};
+export default Filter;

package/es/filter/index.js

@@ -0,0 +1,27 @@
+"use client";
+import Cascader from "./components/FilterCascader/index";
+import Checkbox from "./components/FilterCheckbox";
+import Range from "./components/FilterRange";
+import Input from "./components/FilterInput";
+import Select from "./components/FilterSelect";
+import Slot from "./components/FilterSlot";
+import Switch from "./components/FilterSwitch";
+import Wrap from "./components/FilterWrap";
+import ResponsiveGroup from "./components/ResponsiveFilterGroup";
+export { FilterProvider, useFilterContext } from "./FilterContext";
+function markAsFilterComponent(component) {
+  component.__isFilterComponent = true;
+  return component;
+}
+var Filter = {
+  Select: markAsFilterComponent(Select),
+  Checkbox: markAsFilterComponent(Checkbox),
+  Range: markAsFilterComponent(Range),
+  Wrap: markAsFilterComponent(Wrap),
+  Cascader: markAsFilterComponent(Cascader),
+  Switch: markAsFilterComponent(Switch),
+  Input: markAsFilterComponent(Input),
+  Slot: markAsFilterComponent(Slot),
+  ResponsiveGroup: ResponsiveGroup
+};
+export default Filter;

package/es/filter/style/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { GlobalToken } from '../../theme/interface';
+export interface FilterToken extends GlobalToken {
+    antCls: string;
+    componentCls: string;
+    iconCls: string;
+    prefixCls: string;
+}
+export interface UseFilterStyleResult {
+    wrapSSR: (node: React.ReactElement) => React.ReactElement;
+    hashId: string;
+    prefixCls: string;
+}
+export default function useFilterStyle(prefixCls?: string): UseFilterStyleResult;
+export declare const getFilterCls: (prefixCls: string, className: string) => string;

package/es/filter/style/index.js

@@ -0,0 +1,245 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 { useContext } from 'react';
+import { unit, useStyleRegister } from '@ant-design/cssinjs';
+import themeConfig from "../../theme";
+import ConfigProvider from "../../config-provider";
+var genSelectOptionStyle = function genSelectOptionStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, "".concat(componentCls, "-select-option"), _defineProperty(_defineProperty({
+    paddingBlock: token.paddingXXS,
+    paddingInline: token.paddingXS,
+    cursor: 'pointer',
+    borderRadius: token.borderRadius,
+    transition: "background-color ".concat(token.motionDurationMid, " ease-in-out"),
+    '&:hover': _defineProperty(_defineProperty({
+      backgroundColor: token.colorBgTextHover
+    }, "".concat(componentCls, "-arrow-icon"), {
+      opacity: 0,
+      visibility: 'hidden'
+    }), "".concat(componentCls, "-clear-icon"), {
+      opacity: 1,
+      visibility: 'visible'
+    })
+  }, "&".concat(componentCls, "-has-selected"), {
+    backgroundColor: token.colorBgTextHover
+  }), "&".concat(componentCls, "-flat-active"), {
+    backgroundColor: token.colorBgTextHover,
+    '&:hover': {
+      backgroundColor: token.colorBgTextHover
+    }
+  }));
+};
+var genCheckboxOptionStyle = function genCheckboxOptionStyle(token) {
+  var antCls = token.antCls,
+    componentCls = token.componentCls;
+  return _defineProperty({}, "".concat(componentCls, "-checkbox-option"), _defineProperty({
+    paddingBlock: token.paddingXXS,
+    paddingInline: token.paddingXS,
+    cursor: 'pointer',
+    borderRadius: token.borderRadius,
+    '&:hover': {
+      backgroundColor: token.colorBgTextHover
+    }
+  }, "&".concat(antCls, "-checkbox-wrapper-disabled"), {
+    cursor: 'not-allowed',
+    color: token.colorTextDisabled,
+    '&:hover': {
+      backgroundColor: 'transparent'
+    }
+  }));
+};
+var genSwitchOptionStyle = function genSwitchOptionStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, "".concat(componentCls, "-switch-option"), {
+    cursor: 'default'
+  });
+};
+
+// 通用图标样式
+var genIconStyle = function genIconStyle(token) {
+  var componentCls = token.componentCls;
+
+  // 基础计数样式（复用）
+  var baseCountStyle = {
+    opacity: 1,
+    fontSize: token.fontSizeSM,
+    color: token.colorIcon,
+    borderRadius: 8,
+    width: '18px',
+    height: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // 基础清除图标样式（复用）
+  var baseClearIconStyle = {
+    opacity: 0,
+    cursor: 'pointer',
+    visibility: 'hidden',
+    position: 'absolute',
+    color: token.colorIcon,
+    fontSize: token.fontSizeSM,
+    transform: 'translateY(-50%)',
+    transition: "opacity ".concat(token.motionDurationMid, " ease-in-out, visibility ").concat(token.motionDurationMid, " ease-in-out")
+  };
+
+  // 基础图标容器样式（复用）
+  var baseIconWrapperStyle = {
+    position: 'relative',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: token.paddingXS,
+    color: token.colorIcon
+  };
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-button-prefix-icon"), {
+    marginRight: token.paddingXXS,
+    color: token.colorIcon
+  }), "".concat(componentCls, "-icon-wrapper"), _objectSpread({}, baseIconWrapperStyle)), "".concat(componentCls, "-count"), _objectSpread(_objectSpread({}, baseCountStyle), {}, {
+    backgroundColor: 'var(--ob-color-border-container)',
+    padding: '0px 2px'
+  })), "".concat(componentCls, "-arrow-icon"), {
+    opacity: 1,
+    fontSize: token.fontSizeSM,
+    color: token.colorIcon,
+    visibility: 'visible',
+    transition: "opacity ".concat(token.motionDurationMid, " ease-in-out, visibility ").concat(token.motionDurationMid, " ease-in-out")
+  }), "".concat(componentCls, "-clear-icon"), _objectSpread(_objectSpread({}, baseClearIconStyle), {}, {
+    left: 0,
+    top: '60%'
+  })), "".concat(componentCls, "-wrap-icon-wrapper"), _objectSpread(_objectSpread({}, baseIconWrapperStyle), {}, {
+    '&:hover': _defineProperty(_defineProperty({}, "".concat(componentCls, "-wrap-count"), {
+      opacity: 0,
+      visibility: 'hidden'
+    }), "".concat(componentCls, "-wrap-clear-icon"), {
+      opacity: 1,
+      visibility: 'visible'
+    })
+  })), "".concat(componentCls, "-wrap-count"), _objectSpread(_objectSpread({}, baseCountStyle), {}, {
+    backgroundColor: 'var(--ob-color-border-container)',
+    visibility: 'visible',
+    transition: "opacity ".concat(token.motionDurationMid, " ease-in-out, visibility ").concat(token.motionDurationMid, " ease-in-out")
+  })), "".concat(componentCls, "-wrap-clear-icon"), _objectSpread(_objectSpread(_objectSpread({}, baseClearIconStyle), baseCountStyle), {}, {
+    opacity: 0,
+    cursor: 'pointer',
+    visibility: 'hidden',
+    position: 'absolute',
+    left: 0,
+    top: '50%'
+  }));
+};
+var genFilterButtonStyle = function genFilterButtonStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-button-wrapper"), {
+    display: 'inline-block'
+  }), "".concat(componentCls, "-button"), {
+    height: token.controlHeight,
+    paddingBlock: token.paddingXXS,
+    paddingInline: token.paddingSM,
+    borderRadius: token.borderRadius,
+    backgroundColor: token.white,
+    cursor: 'pointer',
+    display: 'flex',
+    gap: token.paddingXS,
+    alignItems: 'center',
+    justifyContent: 'right',
+    color: token.colorText,
+    whiteSpace: 'nowrap',
+    maxWidth: '268px',
+    '&:hover': _defineProperty(_defineProperty({}, "".concat(componentCls, "-arrow-icon"), {
+      opacity: 0,
+      visibility: 'hidden'
+    }), "".concat(componentCls, "-clear-icon"), {
+      opacity: 1,
+      visibility: 'visible'
+    })
+  }), "".concat(componentCls, "-button-label-wrapper"), {
+    width: '100%',
+    paddingBlock: token.paddingXS,
+    paddingInline: token.paddingSM,
+    borderBottom: "1px solid ".concat(token.colorFillSecondary),
+    color: token.colorTextSecondary,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }), "".concat(componentCls, "-button-label-wrapper-no-border"), {
+    borderBottom: 'none',
+    padding: "".concat(unit(token.paddingXS), " ").concat(unit(token.paddingSM), " 0px")
+  }), "".concat(componentCls, "-border"), {
+    border: "".concat(token.lineWidth, "px solid ").concat(token.colorBorder),
+    transition: "background-color ".concat(token.motionDurationSlow, " ease-in-out, border-color ").concat(token.motionDurationSlow, " ease-in-out"),
+    '&:hover, &:active, &:focus, &:focus-within': {
+      borderColor: token.colorTextTertiary
+    }
+  }), "".concat(componentCls, "-active"), {
+    borderColor: token.colorBorder,
+    color: token.colorTextLabel
+  }), "".concat(componentCls, "-disabled"), {
+    backgroundColor: token.colorBgContainerDisabled,
+    borderColor: token.colorBorder,
+    color: token.colorTextQuaternary,
+    cursor: 'not-allowed',
+    '&:hover, &:active, &:focus, &:focus-within': _defineProperty(_defineProperty({
+      borderColor: token.colorBorder
+    }, "".concat(componentCls, "-arrow-icon"), {
+      opacity: 1,
+      visibility: 'visible'
+    }), "".concat(componentCls, "-clear-icon"), {
+      opacity: 0,
+      visibility: 'hidden'
+    })
+  }), "".concat(componentCls, "-selected"), {
+    backgroundColor: 'var(--ob-color-bg-hover)'
+  });
+};
+var genFilterTextEllipsisStyle = function genFilterTextEllipsisStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, "".concat(componentCls, "-text-ellipsis"), {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  });
+};
+var genFilterStyle = function genFilterStyle(token) {
+  return [genIconStyle(token), genSelectOptionStyle(token), genCheckboxOptionStyle(token), genSwitchOptionStyle(token), genFilterButtonStyle(token), genFilterTextEllipsisStyle(token)];
+};
+export default function useFilterStyle() {
+  var prefixCls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'ant-filter';
+  var _themeConfig$useToken = themeConfig.useToken(),
+    theme = _themeConfig$useToken.theme,
+    token = _themeConfig$useToken.token;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    iconPrefixCls = _useContext.iconPrefixCls;
+  var filterToken = _objectSpread(_objectSpread({}, token), {}, {
+    antCls: getPrefixCls(),
+    componentCls: ".".concat(prefixCls),
+    iconCls: ".".concat(iconPrefixCls),
+    prefixCls: prefixCls
+  });
+  var wrapSSR = useStyleRegister({
+    theme: theme,
+    token: token,
+    path: ['filter', prefixCls],
+    hashId: '',
+    order: -900
+  }, function () {
+    return genFilterStyle(filterToken);
+  });
+  return {
+    wrapSSR: wrapSSR,
+    hashId: '',
+    prefixCls: prefixCls
+  };
+}
+
+// 导出样式类名生成器，方便组件使用
+export var getFilterCls = function getFilterCls(prefixCls, className) {
+  return "".concat(prefixCls, "-").concat(className);
+};

package/es/filter/type.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { PopoverProps } from 'antd';
+export interface BaseFilterProps extends Omit<PopoverProps, 'title' | 'content' | 'children'> {
+    /** 前缀图标 */
+    icon?: ReactNode;
+    /** 筛选器标签 */
+    label?: ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示边框，默认 true */
+    bordered?: boolean;
+    /** 底部操作区域 */
+    footer?: ReactNode;
+    /** 额外内容，显示在筛选器弹框的标签旁边 */
+    extra?: ReactNode;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 是否可以被 ResponsiveGroup 收集到折叠容器中，默认为 true */
+    collapsible?: boolean;
+    /** 是否始终折叠到"更多"按钮中，无论容器宽度是否充足，默认为 false */
+    alwaysCollapse?: boolean;
+    /** 是否显示后缀图标区域（包括下拉箭头和清除图标），默认 true */
+    showSuffixIcon?: boolean;
+    /** 是否显示清除按钮，默认 true */
+    allowClear?: boolean;
+}
+/** 内部属性，用于标记组件是否在折叠模式中 */
+export interface InternalFilterProps {
+    /** @internal 是否处于折叠模式 */
+    _isCollapsed?: boolean;
+    /**
+     * @internal
+     * 是否为 Wrap 组件透传，默认 false
+     */
+    _isInWrapComponent?: boolean;
+    /**
+     * @internal
+     * 是否为扁平化模式，默认 false
+     */
+    _isFlat?: boolean;
+}

package/es/filter/type.js

@@ -0,0 +1 @@
+export {};

package/es/filter/utils.d.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties, ReactNode } from 'react';
+export declare const getIcon: (icon?: 'time' | 'filter') => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * 生成稳定的 filterId
+ * 基于 componentName 和 label 生成，确保 label 变化时 ID 也会更新
+ */
+export declare const generateFilterId: (componentName: string, label: ReactNode, fallbackIndex?: number) => string;
+/**
+ * 获取 Filter 组件的占位符文案
+ */
+export declare const getPlaceholder: () => string;
+/**
+ * Wrapped 模式下显示值的样式
+ */
+export declare const wrappedValueStyle: CSSProperties;
+/**
+ * 获取 Wrapped 模式下显示值的样式（包含颜色）
+ * @param hasValue 是否有值
+ */
+export declare const getWrappedValueStyle: (hasValue: boolean) => CSSProperties;
+/**
+ * 包装 Filter 内容的容器
+ * @param content 内容
+ * @param padding 内边距，默认为 8
+ * @param maxHeight 最大高度，默认为 300
+ */
+export declare const wrapContent: (content: ReactNode, padding?: number | string, maxHeight?: number) => ReactNode;
+/**
+ * 深度比较两个数组是否相等（用于 options 比较）
+ */
+export declare const areArraysEqual: (a: unknown[] | undefined, b: unknown[] | undefined) => boolean;
+/**
+ * 稳定化 options 数组的引用（使用 JSON.stringify 作为 key）
+ * 这是一个普通函数，不是 Hook
+ */
+export declare const getStableOptionsKey: (options: unknown[] | undefined) => string;
+/**
+ * 将 ReactNode 转换为可搜索的字符串
+ * 用于搜索功能中的文本匹配
+ */
+export declare const normalizeLabel: (label: ReactNode) => string;
+/**
+ * 根据关键词过滤选项列表
+ * @param options 选项列表
+ * @param keyword 搜索关键词
+ * @returns 过滤后的选项列表
+ */
+export declare const filterOptions: <T extends {
+    label?: ReactNode;
+}>(options: T[], keyword: string) => T[];