@ant-design/pro-components 3.1.5-0 → 3.1.6-0

package/es/field/components/ColorPicker/index.d.ts

@@ -3,5 +3,5 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
     text: string;
     mode?: "update" | "read" | "edit" | undefined;
-} & Partial<Omit<ColorPickerProps, "mode" | "value">> & React.RefAttributes<any>>;
+} & Partial<Omit<ColorPickerProps, "value" | "mode">> & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/DatePicker/index.d.ts

@@ -5,6 +5,6 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     format?: string | undefined;
     showTime?: boolean | undefined;
     variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
-    picker?: "time" | "date" | "month" | "week" | "quarter" | "year" | undefined;
+    picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/RangePicker/index.d.ts

@@ -5,6 +5,6 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     format?: string | undefined;
     variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
     showTime?: boolean | undefined;
-    picker?: "time" | "date" | "month" | "week" | "quarter" | "year" | undefined;
+    picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Select/SearchSelect/index.js

@@ -1,6 +1,7 @@
+import { useControlledState } from '@rc-component/util';
 import { ConfigProvider, Select } from 'antd';
 import { clsx } from 'clsx';
-import React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';
 import { nanoid } from "../../../../utils";
 
 // 支持 key, value, label，兼容 UserSearch 中只填写了 key 的情况。
@@ -41,7 +42,7 @@ const SearchSelect = (props, ref) => {
     value: valuePropsName = 'value',
     options: optionsPropsName = 'options'
   } = fieldNames || {};
-  const [searchValue, setSearchValue] = useState(propsSearchValue ?? defaultSearchValue);
+  const [searchValue, setSearchValue] = useControlledState(defaultSearchValue, propsSearchValue);
   const selectRef = useRef();
   useImperativeHandle(ref, () => selectRef.current);
   useEffect(() => {
@@ -49,9 +50,6 @@ const SearchSelect = (props, ref) => {
       selectRef?.current?.focus();
     }
   }, [restProps.autoFocus]);
-  useEffect(() => {
-    setSearchValue(propsSearchValue);
-  }, [propsSearchValue]);
   const {
     getPrefixCls
   } = useContext(ConfigProvider.ConfigContext);

package/es/form/components/FormItem/Group/index.js

@@ -117,7 +117,7 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
         display: 'none'
       },
       children: hiddenChildren
-    }) : null];
+    }, "hidden") : null];
   }, [children, RowWrapper, Wrapper, autoFocus]);
   return wrapSSR( /*#__PURE__*/_jsx(ColWrapper, {
     children: /*#__PURE__*/_jsxs("div", {
@@ -127,11 +127,19 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
       style: style,
       ref: ref,
       children: [hiddenDoms, (title || tooltip || extra) && /*#__PURE__*/_jsx("div", {
+        role: "button",
+        tabIndex: 0,
         className: clsx(`${className}-title`, hashId),
         style: titleStyle,
         onClick: () => {
           setCollapsed(!collapsed);
         },
+        onKeyDown: e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setCollapsed(!collapsed);
+          }
+        },
         children: extra ? /*#__PURE__*/_jsxs("div", {
           style: {
             display: 'flex',
@@ -140,7 +148,9 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
             justifyContent: 'space-between'
           },
           children: [titleDom, /*#__PURE__*/_jsx("span", {
+            role: "presentation",
             onClick: e => e.stopPropagation(),
+            onKeyDown: e => e.stopPropagation(),
             children: extra
           })]
         }) : titleDom

package/es/form/layouts/LightFilter/index.js

@@ -2,7 +2,7 @@ import { FilterOutlined } from '@ant-design/icons';
 import { omit } from '@rc-component/util';
 import { ConfigProvider } from 'antd';
 import { clsx } from 'clsx';
-import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useIntl } from "../../../provider";
 import { FieldLabel, FilterDropdown } from "../../../utils";
 import { BaseForm } from "../../BaseForm";
@@ -35,16 +35,22 @@ const LightFilterContainer = props => {
     hashId
   } = useStyle(lightFilterClassName);
   const [open, setOpen] = useState(false);
-  const [moreValues, setMoreValues] = useState(() => {
-    return {
-      ...values
-    };
-  });
-  useEffect(() => {
-    setMoreValues({
-      ...values
+  const [moreValues, setMoreValues] = useState(() => ({
+    ...values
+  }));
+  const collapseLabelNode = useMemo(() => {
+    if (collapseLabel) return collapseLabel;
+    if (collapse) {
+      return /*#__PURE__*/_jsx(FilterOutlined, {
+        className: clsx(`${lightFilterClassName}-collapse-icon`, hashId)
+      });
+    }
+    return /*#__PURE__*/_jsx(FieldLabel, {
+      variant: variant,
+      size: size,
+      label: intl.getMessage('form.lightFilter.more', '更多筛选')
     });
-  }, [values]);
+  }, [collapseLabel, collapse, lightFilterClassName, hashId, variant, size, intl]);
   const {
     collapseItems,
     outsideItems
@@ -66,21 +72,6 @@ const LightFilterContainer = props => {
       outsideItems: outsideItemsArr
     };
   }, [props.items]);
-  const renderCollapseLabelRender = () => {
-    if (collapseLabel) {
-      return collapseLabel;
-    }
-    if (collapse) {
-      return /*#__PURE__*/_jsx(FilterOutlined, {
-        className: clsx(`${lightFilterClassName}-collapse-icon`, hashId)
-      });
-    }
-    return /*#__PURE__*/_jsx(FieldLabel, {
-      variant: variant,
-      size: size,
-      label: intl.getMessage('form.lightFilter.more', '更多筛选')
-    });
-  };
   return wrapSSR( /*#__PURE__*/_jsx("div", {
     className: clsx(lightFilterClassName, hashId, `${lightFilterClassName}-${size}`, {
       [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => Array.isArray(values[key]) ? values[key].length > 0 : values[key])
@@ -126,7 +117,7 @@ const LightFilterContainer = props => {
           },
           placement: placement,
           popoverProps: popoverProps,
-          label: renderCollapseLabelRender(),
+          label: collapseLabelNode,
           footerRender: footerRender,
           footer: {
             onConfirm: () => {
@@ -244,7 +235,7 @@ function LightFilter(props) {
             onValuesChange(newValues, newAllValues);
           }
         }
-      });
+      }, JSON.stringify(values || {}));
     },
     formRef: formRef,
     formItemProps: {

package/es/form/layouts/LoginForm/index.js

@@ -53,7 +53,8 @@ function LoginForm(props) {
     if (!logo) return null;
     if (typeof logo === 'string') {
       return /*#__PURE__*/_jsx("img", {
-        src: logo
+        src: logo,
+        alt: ""
       });
     }
     return logo;

package/es/form/layouts/LoginFormPage/index.js

@@ -56,7 +56,8 @@ export function LoginFormPage(props) {
     if (!logo) return null;
     if (typeof logo === 'string') {
       return /*#__PURE__*/_jsx("img", {
-        src: logo
+        src: logo,
+        alt: ""
       });
     }
     return logo;

package/es/layout/ProLayout.d.ts

@@ -46,9 +46,9 @@ export type ProLayoutProps = GlobalTypes & {
      * @name logo 的配置，可以配置url，React 组件 和 false
      *
      * @example 设置 logo 为网络地址  logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
-     * @example 设置 logo 为组件  logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>}
+     * @example 设置 logo 为组件  logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4" alt="" />}
      * @example 设置 logo 为 false 不显示 logo  logo={false}
-     * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
+     * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4" alt="" /> }
      * */
     logo?: React.ReactNode | React.JSX.Element | WithFalse<() => React.ReactNode | React.JSX.Element>;
     /**

package/es/layout/ProLayout.js

@@ -164,7 +164,7 @@ const BaseProLayout = props => {
   }, [props.layout, propsSiderWidth]);
   const context = useContext(ConfigProvider.ConfigContext);
   const prefixCls = props.prefixCls ?? context.getPrefixCls('pro');
-  const [menuLoading, setMenuLoadingInner] = useControlledState(false, menu?.loading);
+  const [menuLoadingState, _setMenuLoadingInner] = useControlledState(false, menu?.loading);
 
   /**
    * 使用 useRefFunction 包装回调，确保引用稳定
@@ -173,20 +173,6 @@ const BaseProLayout = props => {
     menu?.onLoadingChange?.(loading);
   });
 
-  /**
-   * 包装 setMenuLoading，使用 queueMicrotask 延迟回调调用
-   * 避免在渲染阶段调用外部回调导致的 React 警告
-   */
-  const setMenuLoading = useCallback(updater => {
-    setMenuLoadingInner(prev => {
-      const next = typeof updater === 'function' ? updater(prev) : updater;
-      queueMicrotask(() => {
-        menuOnLoadingChange(next);
-      });
-      return next;
-    });
-  }, [menuOnLoadingChange]);
-
   // give a default key for swr
   const [defaultId] = useState(() => {
     layoutIndex += 1;
@@ -216,20 +202,21 @@ const BaseProLayout = props => {
   const {
     data,
     mutate,
-    isLoading
+    isValidating
   } = useSWR([defaultId, menu?.params], async ([, params]) => {
-    setMenuLoading(true);
-    const menuDataItems = await menu?.request?.(params || {}, route?.children || route?.routes || []);
-    setMenuLoading(false);
-    return menuDataItems;
+    menuOnLoadingChange(true);
+    try {
+      const menuDataItems = await menu?.request?.(params || {}, route?.children || route?.routes || []);
+      return menuDataItems;
+    } finally {
+      menuOnLoadingChange(false);
+    }
   }, {
     revalidateOnFocus: false,
     shouldRetryOnError: false,
     revalidateOnReconnect: false
   });
-  useEffect(() => {
-    setMenuLoading(isLoading);
-  }, [isLoading]);
+  const menuLoading = menu?.loading ?? (menu?.request ? isValidating : menuLoadingState);
   const {
     cache
   } = useSWRConfig();
@@ -414,11 +401,12 @@ const BaseProLayout = props => {
       return bgLayoutImgList?.map((item, index) => {
         return /*#__PURE__*/_jsx("img", {
           src: item.src,
+          alt: "",
           style: {
             position: 'absolute',
             ...item
           }
-        }, index);
+        }, item.src ?? `bg-layout-${index}`);
       });
     }
     return null;

package/es/list/ProListBase.js

@@ -2,7 +2,7 @@
  * 内部 List 容器与 List.Item / List.Item.Meta 实现，用于替代 antd List（antd List 已停止维护）
  * 保持与 antd List 相同的 DOM 结构及类名，以便复用 antd 的 list 样式
  */
-import { ConfigProvider, Empty, Grid, Pagination } from 'antd';
+import { ConfigProvider, Empty, Grid, Pagination, Spin } from 'antd';
 import { clsx } from 'clsx';
 import React, { useContext, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -286,20 +286,14 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
         children: child
       }, child?.key ?? idx))
     }) : items;
-  } else if (!children && !isLoading) {
+  } else if (!children) {
     const emptyContent = locale?.emptyText ?? (typeof renderEmpty === 'function' ? renderEmpty('List') : null) ?? /*#__PURE__*/_jsx(Empty, {
-      description: "\u6682\u65E0\u6570\u636E"
+      image: Empty.PRESENTED_IMAGE_SIMPLE
     });
     childrenContent = /*#__PURE__*/_jsx("div", {
       className: `${prefixCls}-empty-text`,
       children: emptyContent
     });
-  } else if (isLoading) {
-    childrenContent = /*#__PURE__*/_jsx("div", {
-      style: {
-        minHeight: 53
-      }
-    });
   } else {
     childrenContent = children;
   }
@@ -339,18 +333,22 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
   }, propHashId, className, rootClassName);
   return /*#__PURE__*/_jsx(ProListContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsx("div", {
       ref: ref,
       style: style,
       className: classString,
       ...rest,
-      children: [showPaginationTop && paginationNode, header && /*#__PURE__*/_jsx("div", {
-        className: `${prefixCls}-header`,
-        children: header
-      }), childrenContent, children, footer && /*#__PURE__*/_jsx("div", {
-        className: `${prefixCls}-footer`,
-        children: footer
-      }), loadMore, showPaginationBottom && paginationNode]
+      children: /*#__PURE__*/_jsxs(Spin, {
+        spinning: isLoading,
+        delay: 100,
+        children: [showPaginationTop && paginationNode, header && /*#__PURE__*/_jsx("div", {
+          className: `${prefixCls}-header`,
+          children: header
+        }), childrenContent, footer && /*#__PURE__*/_jsx("div", {
+          className: `${prefixCls}-footer`,
+          children: footer
+        }), loadMore, showPaginationBottom && paginationNode]
+      })
     })
   });
 });

package/es/table/components/EditableTable/index.js

@@ -5,7 +5,6 @@ import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo
 import ProForm, { ProFormDependency } from "../../../form";
 import { useIntl } from "../../../provider";
 import { isDeepEqualReact, runFunction, useDeepCompareEffect, useRefFunction } from "../../../utils";
-import { editableRowByKey, recordKeyToString } from "../../../utils/useEditableArray";
 import ProTable from "../../Table";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,69 +38,6 @@ function RecordCreator(props) {
   });
 }
 
-/**
- * 处理嵌套行的新增
- */
-function handleNestedRowInsert(baseData, defaultValue, newLineOptions, getRowKey, childrenColumnName) {
-  if (!newLineOptions.recordKey) {
-    return baseData;
-  }
-  const actionProps = {
-    data: baseData,
-    getRowKey,
-    row: {
-      ...defaultValue,
-      map_row_parentKey: recordKeyToString(newLineOptions.parentKey)?.toString()
-    },
-    key: newLineOptions.recordKey,
-    childrenColumnName
-  };
-  return editableRowByKey(actionProps, newLineOptions.position === 'top' ? 'top' : 'update');
-}
-
-/**
- * 处理分页场景下的新增
- */
-function handlePaginationInsert(baseData, defaultValue, pageConfig) {
-  if (pageConfig.pageSize > baseData.length) {
-    return [...baseData, defaultValue];
-  }
-  const insertIndex = pageConfig.current * pageConfig.pageSize - 1;
-  const result = [...baseData];
-  result.splice(insertIndex, 0, defaultValue);
-  return result;
-}
-function _useEditableDataSource({
-  actionDataSource,
-  editableUtils,
-  pagination,
-  getRowKey,
-  childrenColumnName
-}) {
-  return useMemo(() => {
-    const newLineConfig = editableUtils?.newLineRecord;
-    const baseData = Array.isArray(actionDataSource) ? [...actionDataSource] : [];
-    if (!newLineConfig?.defaultValue) {
-      return baseData;
-    }
-    const {
-      options: newLineOptions,
-      defaultValue
-    } = newLineConfig;
-    if (newLineOptions?.parentKey) {
-      return handleNestedRowInsert(baseData, defaultValue, newLineOptions, getRowKey, childrenColumnName || 'children');
-    }
-    if (newLineOptions?.position === 'top') {
-      return [defaultValue, ...baseData];
-    }
-    const pageConfig = pagination && typeof pagination === 'object' ? pagination : undefined;
-    if (pageConfig?.current && pageConfig?.pageSize) {
-      return handlePaginationInsert(baseData, defaultValue, pageConfig);
-    }
-    return [...baseData, defaultValue];
-  }, [actionDataSource, childrenColumnName, editableUtils?.newLineRecord, getRowKey, pagination]);
-}
-
 /**
  * 检查是否应该显示创建按钮
  */

package/es/table/components/ToolBar/DensityIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type DensitySize = 'middle' | 'small' | 'large' | undefined;
-declare const _default: React.MemoExoticComponent<(props: {
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     icon?: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element>;
+} & React.RefAttributes<HTMLSpanElement>>>;
 export default _default;

package/es/table/components/ToolBar/DensityIcon.js

@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import { useIntl } from "../../../provider";
 import { TableContext } from "../../Store/Provide";
 import { jsx as _jsx } from "react/jsx-runtime";
-const DensityIcon = props => {
+const DensityIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     icon = /*#__PURE__*/_jsx(ColumnHeightOutlined, {})
   } = props;
@@ -35,8 +35,11 @@ const DensityIcon = props => {
     trigger: ['click'],
     children: /*#__PURE__*/_jsx(Tooltip, {
       title: intl.getMessage('tableToolBar.density', '表格密度'),
-      children: icon
+      children: /*#__PURE__*/_jsx("span", {
+        ref: ref,
+        children: icon
+      })
     })
   });
-};
+});
 export default /*#__PURE__*/React.memo(DensityIcon);

package/es/table/components/ToolBar/FullscreenIcon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<HTMLSpanElement>>>;
 export default _default;

package/es/table/components/ToolBar/FullscreenIcon.js

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { useIntl } from "../../../provider";
 import { isBrowser } from "../../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-const FullScreenIcon = () => {
+const FullScreenIcon = /*#__PURE__*/React.forwardRef((_, ref) => {
   const intl = useIntl();
   const [fullscreen, setFullscreen] = useState(false);
   useEffect(() => {
@@ -16,11 +16,17 @@ const FullScreenIcon = () => {
     };
   }, []);
   return fullscreen ? /*#__PURE__*/_jsx(Tooltip, {
-    title: intl.getMessage('tableToolBar.exitFullScreen', '全屏'),
-    children: /*#__PURE__*/_jsx(FullscreenExitOutlined, {})
+    title: intl.getMessage('tableToolBar.exitFullScreen', '退出全屏'),
+    children: /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      children: /*#__PURE__*/_jsx(FullscreenExitOutlined, {})
+    })
   }) : /*#__PURE__*/_jsx(Tooltip, {
     title: intl.getMessage('tableToolBar.fullScreen', '全屏'),
-    children: /*#__PURE__*/_jsx(FullscreenOutlined, {})
+    children: /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      children: /*#__PURE__*/_jsx(FullscreenOutlined, {})
+    })
   });
-};
+});
 export default /*#__PURE__*/React.memo(FullScreenIcon);

package/lib/field/components/ColorPicker/index.d.ts

@@ -3,5 +3,5 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
     text: string;
     mode?: "update" | "read" | "edit" | undefined;
-} & Partial<Omit<ColorPickerProps, "mode" | "value">> & React.RefAttributes<any>>;
+} & Partial<Omit<ColorPickerProps, "value" | "mode">> & React.RefAttributes<any>>;
 export default _default;

package/lib/field/components/DatePicker/index.d.ts

@@ -5,6 +5,6 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     format?: string | undefined;
     showTime?: boolean | undefined;
     variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
-    picker?: "time" | "date" | "month" | "week" | "quarter" | "year" | undefined;
+    picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/lib/field/components/RangePicker/index.d.ts

@@ -5,6 +5,6 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     format?: string | undefined;
     variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
     showTime?: boolean | undefined;
-    picker?: "time" | "date" | "month" | "week" | "quarter" | "year" | undefined;
+    picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/lib/field/components/Select/SearchSelect/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _util = require("@rc-component/util");
 var _antd = require("antd");
 var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
@@ -48,7 +49,7 @@ const SearchSelect = (props, ref) => {
     value: valuePropsName = 'value',
     options: optionsPropsName = 'options'
   } = fieldNames || {};
-  const [searchValue, setSearchValue] = (0, _react.useState)(propsSearchValue ?? defaultSearchValue);
+  const [searchValue, setSearchValue] = (0, _util.useControlledState)(defaultSearchValue, propsSearchValue);
   const selectRef = (0, _react.useRef)();
   (0, _react.useImperativeHandle)(ref, () => selectRef.current);
   (0, _react.useEffect)(() => {
@@ -56,9 +57,6 @@ const SearchSelect = (props, ref) => {
       selectRef?.current?.focus();
     }
   }, [restProps.autoFocus]);
-  (0, _react.useEffect)(() => {
-    setSearchValue(propsSearchValue);
-  }, [propsSearchValue]);
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);

package/lib/form/components/FormItem/Group/index.js

@@ -124,7 +124,7 @@ const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         display: 'none'
       },
       children: hiddenChildren
-    }) : null];
+    }, "hidden") : null];
   }, [children, RowWrapper, Wrapper, autoFocus]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(ColWrapper, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -134,11 +134,19 @@ const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       style: style,
       ref: ref,
       children: [hiddenDoms, (title || tooltip || extra) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "button",
+        tabIndex: 0,
         className: (0, _clsx.clsx)(`${className}-title`, hashId),
         style: titleStyle,
         onClick: () => {
           setCollapsed(!collapsed);
         },
+        onKeyDown: e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setCollapsed(!collapsed);
+          }
+        },
         children: extra ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: {
             display: 'flex',
@@ -147,7 +155,9 @@ const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
             justifyContent: 'space-between'
           },
           children: [titleDom, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            role: "presentation",
             onClick: e => e.stopPropagation(),
+            onKeyDown: e => e.stopPropagation(),
             children: extra
           })]
         }) : titleDom

package/lib/form/layouts/LightFilter/index.js

@@ -41,16 +41,22 @@ const LightFilterContainer = props => {
     hashId
   } = (0, _style.useStyle)(lightFilterClassName);
   const [open, setOpen] = (0, _react.useState)(false);
-  const [moreValues, setMoreValues] = (0, _react.useState)(() => {
-    return {
-      ...values
-    };
-  });
-  (0, _react.useEffect)(() => {
-    setMoreValues({
-      ...values
+  const [moreValues, setMoreValues] = (0, _react.useState)(() => ({
+    ...values
+  }));
+  const collapseLabelNode = (0, _react.useMemo)(() => {
+    if (collapseLabel) return collapseLabel;
+    if (collapse) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FilterOutlined, {
+        className: (0, _clsx.clsx)(`${lightFilterClassName}-collapse-icon`, hashId)
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FieldLabel, {
+      variant: variant,
+      size: size,
+      label: intl.getMessage('form.lightFilter.more', '更多筛选')
     });
-  }, [values]);
+  }, [collapseLabel, collapse, lightFilterClassName, hashId, variant, size, intl]);
   const {
     collapseItems,
     outsideItems
@@ -72,21 +78,6 @@ const LightFilterContainer = props => {
       outsideItems: outsideItemsArr
     };
   }, [props.items]);
-  const renderCollapseLabelRender = () => {
-    if (collapseLabel) {
-      return collapseLabel;
-    }
-    if (collapse) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FilterOutlined, {
-        className: (0, _clsx.clsx)(`${lightFilterClassName}-collapse-icon`, hashId)
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FieldLabel, {
-      variant: variant,
-      size: size,
-      label: intl.getMessage('form.lightFilter.more', '更多筛选')
-    });
-  };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _clsx.clsx)(lightFilterClassName, hashId, `${lightFilterClassName}-${size}`, {
       [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => Array.isArray(values[key]) ? values[key].length > 0 : values[key])
@@ -132,7 +123,7 @@ const LightFilterContainer = props => {
           },
           placement: placement,
           popoverProps: popoverProps,
-          label: renderCollapseLabelRender(),
+          label: collapseLabelNode,
           footerRender: footerRender,
           footer: {
             onConfirm: () => {
@@ -250,7 +241,7 @@ function LightFilter(props) {
             onValuesChange(newValues, newAllValues);
           }
         }
-      });
+      }, JSON.stringify(values || {}));
     },
     formRef: formRef,
     formItemProps: {