feat: switch filterDropdownVisible to filterDropdownOpen for Table (#36747)

* feat: change filterDropdownVisible to filterDropdownOpen for Table

* docs: resolve conflict

Co-authored-by: 二货机器人 <smith3816@gmail.com>

components/table/Table.tsx

@@ -145,6 +145,12 @@ function InternalTable<RecordType extends object = any>(
     'Table',
     '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
   );
+  warning(
+    !('filterDropdownVisible' in props || 'onFilterDropdownVisibleChange' in props),
+    'Table',
+    '`filterDropdownVisible` and `onFilterDropdownVisibleChange` is deprecated, ' +
+      'please use `filterDropdownOpen` and `onFilterDropdownOpenChange` instead.',
+  );
 
   [
     ['filterDropdownVisible', 'filterDropdownOpen'],

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

@@ -274,7 +274,6 @@ describe('Table.filter', () => {
     }
 
     test('filterDropdownOpen');
-    test('filterDropdownVisible');
   });
 
   it('if the filter is visible it should ignore the selectedKeys changes', () => {
@@ -326,21 +325,18 @@ describe('Table.filter', () => {
 
   it('fires change event when visible change', () => {
     const onFilterDropdownOpenChange = jest.fn();
-    const onFilterDropdownVisibleChange = jest.fn();
     const { container } = render(
       createTable({
         columns: [
           {
             ...column,
             onFilterDropdownOpenChange,
-            onFilterDropdownVisibleChange,
           },
         ],
       }),
     );
     fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
     expect(onFilterDropdownOpenChange).toHaveBeenCalledWith(true);
-    expect(onFilterDropdownVisibleChange).toHaveBeenCalledWith(true);
   });
 
   it('can be controlled by filteredValue', () => {

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -139,8 +139,6 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   const {
     filterDropdownOpen,
     onFilterDropdownOpenChange,
-    filterDropdownVisible,
-    onFilterDropdownVisibleChange,
     filterResetToDefaultFilteredValue,
     defaultFilteredValue,
   } = column;
@@ -153,15 +151,10 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   const triggerVisible = (newVisible: boolean) => {
     setVisible(newVisible);
     onFilterDropdownOpenChange?.(newVisible);
-    onFilterDropdownVisibleChange?.(newVisible);
   };
 
-  let mergedVisible: boolean;
+  const mergedVisible = typeof filterDropdownOpen === 'boolean' ? filterDropdownOpen : 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 | - |  |
-| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | 4.23.0 |
+| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - |  |
 | 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 | - |  |
-| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(open) {} | - | 4.23.0 |
+| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(visible) {} | - |  |
 | onHeaderCell | Set props on per header cell | function(column) | - |  |
 
 ### ColumnGroup

components/table/index.zh-CN.md

@@ -121,7 +121,7 @@ const columns = [
 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
 | align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` |  |
 | className | 列样式类名 | string | - |  |
 | colSpan | 表头列合并,设置为 0 时，不渲染 | number | - |  |
@@ -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 | - |  |
-| filterDropdownOpen | 用于控制自定义筛选菜单是否可见 | boolean | - | 4.23.0 |
+| filterDropdownOpen | 用于控制自定义筛选菜单是否可见 | boolean | - |  |
 | 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 | - |  |
-| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(open) {} | - | 4.23.0 |
+| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |  |  |
 | onHeaderCell | 设置头部单元格属性 | function(column) | - |  |
 
 ### ColumnGroup

components/table/interface.tsx

@@ -114,18 +114,8 @@ 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;
-  /**
+  onFilterDropdownOpenChange?: (visible: boolean) => void;
-   * @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