chore: auto merge branches (#37173)

chore: next merge feature

components/config-provider/__tests__/components.test.js

@@ -510,7 +510,7 @@ describe('ConfigProvider', () => {
               ],
             },
           ],
-          filterDropdownVisible: true,
+          filterDropdownOpen: true,
           onFilter: (value, record) => record.name.indexOf(value) === 0,
           sorter: (a, b) => a.name.length - b.name.length,
         },

components/table/Table.tsx

@@ -146,6 +146,17 @@ function InternalTable<RecordType extends object = any>(
     '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
   );
 
+  [
+    ['filterDropdownVisible', 'filterDropdownOpen'],
+    ['onFilterDropdownVisibleChange', 'onFilterDropdownOpenChange'],
+  ].forEach(([deprecatedName, newName]) => {
+    warning(
+      !(deprecatedName in props),
+      'Table',
+      `\`${deprecatedName}\` is deprecated which will be removed in next major version.Please use \`${newName}\` instead. `,
+    );
+  });
+
   const baseColumns = React.useMemo(
     () => columns || (convertChildrenToColumns(children) as ColumnsType<RecordType>),
     [columns, children],

components/table/__tests__/Table.filter.test.js

@@ -242,32 +242,39 @@ describe('Table.filter', () => {
     expect(renderSelectedKeys).toEqual([43]);
   });
 
-  it('can be controlled by filterDropdownVisible', () => {
+  describe('filterDropdownOpen & filterDropdownVisible', () => {
-    const { container, rerender } = render(
+    function test(propName) {
-      createTable({
+      it(`can be controlled by ${propName}`, () => {
-        columns: [
+        const { container, rerender } = render(
-          {
+          createTable({
-            ...column,
+            columns: [
-            filterDropdownVisible: true,
+              {
-          },
+                ...column,
-        ],
+                filterDropdownOpen: true,
-      }),
+              },
-    );
+            ],
+          }),
+        );
 
-    expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
+        expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
 
-    rerender(
+        rerender(
-      createTable({
+          createTable({
-        columns: [
+            columns: [
-          {
+              {
-            ...column,
+                ...column,
-            filterDropdownVisible: false,
+                filterDropdownOpen: false,
-          },
+              },
-        ],
+            ],
-      }),
+          }),
-    );
+        );
 
-    expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
+        expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
+      });
+    }
+
+    test('filterDropdownOpen');
+    test('filterDropdownVisible');
   });
 
   it('if the filter is visible it should ignore the selectedKeys changes', () => {
@@ -282,7 +289,7 @@ describe('Table.filter', () => {
       columns: [
         {
           ...myColumn,
-          filterDropdownVisible: true,
+          filterDropdownOpen: true,
         },
       ],
     };
@@ -318,19 +325,22 @@ describe('Table.filter', () => {
   });
 
   it('fires change event when visible change', () => {
-    const handleChange = jest.fn();
+    const onFilterDropdownOpenChange = jest.fn();
+    const onFilterDropdownVisibleChange = jest.fn();
     const { container } = render(
       createTable({
         columns: [
           {
             ...column,
-            onFilterDropdownVisibleChange: handleChange,
+            onFilterDropdownOpenChange,
+            onFilterDropdownVisibleChange,
           },
         ],
       }),
     );
     fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    expect(handleChange).toHaveBeenCalledWith(true);
+    expect(onFilterDropdownOpenChange).toHaveBeenCalledWith(true);
+    expect(onFilterDropdownVisibleChange).toHaveBeenCalledWith(true);
   });
 
   it('can be controlled by filteredValue', () => {
@@ -1179,7 +1189,7 @@ describe('Table.filter', () => {
         columns: [
           {
             ...column,
-            filterDropdownVisible: true,
+            filterDropdownOpen: true,
           },
         ],
         getPopupContainer,
@@ -1197,7 +1207,7 @@ describe('Table.filter', () => {
           columns: [
             {
               ...column,
-              filterDropdownVisible: true,
+              filterDropdownOpen: true,
             },
           ],
         })}
@@ -1442,7 +1452,7 @@ describe('Table.filter', () => {
         columns: [
           {
             ...column,
-            filterDropdownVisible: true,
+            filterDropdownOpen: true,
             filterSearch: true,
             filterMode: 'tree',
           },
@@ -1690,8 +1700,8 @@ describe('Table.filter', () => {
   });
 
   // https://github.com/ant-design/ant-design/issues/30454
-  it('should not trigger onFilterDropdownVisibleChange when call confirm({ closeDropdown: false })', () => {
+  it('should not trigger onFilterDropdownOpenChange when call confirm({ closeDropdown: false })', () => {
-    const onFilterDropdownVisibleChange = jest.fn();
+    const onFilterDropdownOpenChange = jest.fn();
     const { container } = render(
       createTable({
         columns: [
@@ -1714,21 +1724,21 @@ describe('Table.filter', () => {
                 </button>
               </>
             ),
-            onFilterDropdownVisibleChange,
+            onFilterDropdownOpenChange,
           },
         ],
       }),
     );
 
     fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1);
+    expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
 
     fireEvent.click(container.querySelector('#confirm-only'));
-    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1);
+    expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
 
     fireEvent.click(container.querySelector('#confirm-and-close'));
-    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(2);
+    expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(2);
-    expect(onFilterDropdownVisibleChange).toHaveBeenLastCalledWith(false);
+    expect(onFilterDropdownOpenChange).toHaveBeenLastCalledWith(false);
   });
 
   // Warning: An update to Item ran an effect, but was not wrapped in act(...).

components/table/__tests__/Table.rowSelection.test.js

@@ -880,7 +880,7 @@ describe('Table.rowSelection', () => {
             value: 'Lucy',
           },
         ],
-        filterDropdownVisible: true,
+        filterDropdownOpen: true,
         onFilter: (value, record) => record.name.indexOf(value) === 0,
       },
     ];

components/table/demo/custom-filter-panel.md

@@ -132,7 +132,7 @@ const App: React.FC = () => {
         .toString()
         .toLowerCase()
         .includes((value as string).toLowerCase()),
-    onFilterDropdownVisibleChange: visible => {
+    onFilterDropdownOpenChange: visible => {
       if (visible) {
         setTimeout(() => searchInput.current?.select(), 100);
       }

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -137,6 +137,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   } = props;
 
   const {
+    filterDropdownOpen,
+    onFilterDropdownOpenChange,
     filterDropdownVisible,
     onFilterDropdownVisibleChange,
     filterResetToDefaultFilteredValue,
@@ -150,12 +152,16 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   );
   const triggerVisible = (newVisible: boolean) => {
     setVisible(newVisible);
+    onFilterDropdownOpenChange?.(newVisible);
     onFilterDropdownVisibleChange?.(newVisible);
   };
 
-  const mergedVisible =
+  let mergedVisible: boolean;
-    typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible;
+  if (typeof filterDropdownOpen === 'boolean') {
-
+    mergedVisible = filterDropdownOpen;
+  } else {
+    mergedVisible = typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible;
+  }
   // ===================== Select Keys =====================
   const propFilteredKeys = filterState?.filteredKeys;
   const [getFilteredKeysSync, setFilteredKeysSync] = useSyncState(propFilteredKeys || []);

components/table/index.en-US.md

@@ -130,7 +130,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - |  |
 | ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
 | filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - |  |
-| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |  |
+| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | 4.23.0 |
 | filtered | Whether the `dataSource` is filtered | boolean | false |  |
 | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |  |
 | filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - |  |
@@ -151,7 +151,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - |  |
 | onCell | Set props on per cell | function(record, rowIndex) | - |  |
 | onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - |  |
-| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |  |
+| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(open) {} | - | 4.23.0 |
 | onHeaderCell | Set props on per header cell | function(column) | - |  |
 
 ### ColumnGroup

components/table/index.zh-CN.md

@@ -131,7 +131,7 @@ const columns = [
 | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - |  |
 | ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
 | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - |  |
-| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |  |
+| filterDropdownOpen | 用于控制自定义筛选菜单是否可见 | boolean | - | 4.23.0 |
 | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |  |
 | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |  |
 | filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false |  |
@@ -152,7 +152,7 @@ const columns = [
 | width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - |  |
 | onCell | 设置单元格属性 | function(record, rowIndex) | - |  |
 | onFilter | 本地模式下，确定筛选的运行函数 | function | - |  |
-| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |  |
+| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(open) {} | - | 4.23.0 |
 | onHeaderCell | 设置头部单元格属性 | function(column) | - |  |
 
 ### ColumnGroup

components/table/interface.tsx

@@ -114,8 +114,18 @@ export interface ColumnType<RecordType> extends Omit<RcColumnType<RecordType>, '
   filterMode?: 'menu' | 'tree';
   filterSearch?: FilterSearchType;
   onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
+  /**
+   * @deprecated `filterDropdownVisible` is deprecated which will be removed in next major version.
+   *   Please use `filterDropdownOpen` instead.
+   */
   filterDropdownVisible?: boolean;
+  filterDropdownOpen?: boolean;
+  /**
+   * @deprecated `onFilterDropdownVisibleChange` is deprecated which will be removed in next major
+   *   version. Please use `onFilterDropdownOpenChange` instead.
+   */
   onFilterDropdownVisibleChange?: (visible: boolean) => void;
+  onFilterDropdownOpenChange?: (open: boolean) => void;
   filterResetToDefaultFilteredValue?: boolean;
 
   // Responsive