chore: auto merge branches (ant-design#45444)

chore: merge master into feature
ammar-knowledge · Oct 20, 2023 · f25fd3c · f25fd3c
2 parents cc223a1 + 029641a
commit f25fd3c
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 45 deletions.
diff --git a/components/form/style/index.ts b/components/form/style/index.ts
@@ -472,7 +472,8 @@ const makeVerticalLayout = (token: FormToken): CSSObject => {
 
   return {
     [`${formItemCls} ${formItemCls}-label`]: makeVerticalLayoutLabel(token),
-    [componentCls]: {
+    // ref: https://github.com/ant-design/ant-design/issues/45122
+    [`${componentCls}:not(${componentCls}-inline)`]: {
       [formItemCls]: {
         flexWrap: 'wrap',
 

diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts
@@ -181,7 +181,10 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 
         position: 'fixed',
         zIndex: token.zIndexPopup,
-        marginInlineEnd: notificationMarginEdge,
+        marginRight: {
+          value: notificationMarginEdge,
+          _skip_check_: true,
+        },
 
         [`${componentCls}-hook-holder`]: {
           position: 'relative',

diff --git a/components/notification/style/placement.ts b/components/notification/style/placement.ts
@@ -87,8 +87,14 @@ const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject>
       },
 
       [`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
-        marginInlineEnd: 0,
-        marginInlineStart: notificationMarginEdge,
+        marginRight: {
+          value: 0,
+          _skip_check_: true,
+        },
+        marginLeft: {
+          value: notificationMarginEdge,
+          _skip_check_: true,
+        },
 
         [noticeCls]: {
           marginInlineEnd: 'auto',
@@ -103,4 +109,5 @@ const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject>
     },
   };
 };
+
 export default genNotificationPlacementStyle;
diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx
@@ -321,6 +321,21 @@ describe('Table.sorter', () => {
     expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
     fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')!);
 
+    // should merge original title into showSorterTooltip object
+    rerender(
+      createTable({
+        showSorterTooltip: {
+          overlayClassName: 'custom-tooltip',
+        },
+      }),
+    );
+    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')!);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
+    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')!);
+
     // Root to false
     rerender(createTable({ showSorterTooltip: false }));
     act(() => {

diff --git a/components/table/__tests__/type.test.tsx b/components/table/__tests__/type.test.tsx
@@ -37,9 +37,7 @@ describe('Table.typescript', () => {
     const table = <Table<RecordType> dataSource={[{ key: 'Bamboo' }]} />;
     expect(table).toBeTruthy();
   });
-});
 
-describe('Table.typescript types', () => {
   it('ColumnProps', () => {
     interface User {
       name: string;
@@ -56,4 +54,9 @@ describe('Table.typescript types', () => {
 
     expect(columns).toBeTruthy();
   });
+
+  it('table pagination position support none', () => {
+    const table = <Table pagination={{ position: ['none', 'none'] }} />;
+    expect(table).toBeTruthy();
+  });
 });
diff --git a/components/table/demo/component-token.tsx b/components/table/demo/component-token.tsx
@@ -3,7 +3,7 @@ import { DownOutlined } from '@ant-design/icons';
 import type { RadioChangeEvent } from 'antd';
 import { Form, Radio, Space, Switch, Table, ConfigProvider } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { ColumnsType, TableProps, TablePaginationConfig } from 'antd/es/table';
 import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
 
 interface DataType {
@@ -14,14 +14,6 @@ interface DataType {
   description: string;
 }
 
-type TablePaginationPosition =
-  | 'topLeft'
-  | 'topCenter'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomCenter'
-  | 'bottomRight';
-
 const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
@@ -76,6 +68,8 @@ for (let i = 1; i <= 10; i++) {
   });
 }
 
+type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
+
 const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
 const defaultTitle = () => 'Here is title';
 const defaultFooter = () => 'Here is footer';
@@ -89,11 +83,11 @@ const App: React.FC = () => {
   );
   const [showTitle, setShowTitle] = useState(false);
   const [showHeader, setShowHeader] = useState(true);
-  const [showfooter, setShowFooter] = useState(true);
+  const [showFooter, setShowFooter] = useState(true);
   const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});
   const [hasData, setHasData] = useState(true);
   const [tableLayout, setTableLayout] = useState();
-  const [top, setTop] = useState<TablePaginationPosition | 'none'>('none');
+  const [top, setTop] = useState<TablePaginationPosition>('none');
   const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
   const [ellipsis, setEllipsis] = useState(false);
   const [yScroll, setYScroll] = useState(false);
@@ -172,7 +166,7 @@ const App: React.FC = () => {
     expandable,
     title: showTitle ? defaultTitle : undefined,
     showHeader,
-    footer: showfooter ? defaultFooter : undefined,
+    footer: showFooter ? defaultFooter : undefined,
     rowSelection,
     scroll,
     tableLayout,
@@ -198,7 +192,7 @@ const App: React.FC = () => {
           <Switch checked={showHeader} onChange={handleHeaderChange} />
         </Form.Item>
         <Form.Item label="Footer">
-          <Switch checked={showfooter} onChange={handleFooterChange} />
+          <Switch checked={showFooter} onChange={handleFooterChange} />
         </Form.Item>
         <Form.Item label="Expandable">
           <Switch checked={!!expandable} onChange={handleExpandChange} />
@@ -300,7 +294,7 @@ const App: React.FC = () => {
       >
         <Table
           {...tableProps}
-          pagination={{ position: [top as TablePaginationPosition, bottom] }}
+          pagination={{ position: [top, bottom] }}
           columns={tableColumns}
           dataSource={hasData ? data : []}
           scroll={scroll}

diff --git a/components/table/demo/dynamic-settings.tsx b/components/table/demo/dynamic-settings.tsx
@@ -3,7 +3,7 @@ import { DownOutlined } from '@ant-design/icons';
 import type { RadioChangeEvent } from 'antd';
 import { Form, Radio, Space, Switch, Table } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { ColumnsType, TableProps, TablePaginationConfig } from 'antd/es/table';
 import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
 
 interface DataType {
@@ -14,13 +14,7 @@ interface DataType {
   description: string;
 }
 
-type TablePaginationPosition =
-  | 'topLeft'
-  | 'topCenter'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomCenter'
-  | 'bottomRight';
+type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
 
 const columns: ColumnsType<DataType> = [
   {
@@ -89,11 +83,11 @@ const App: React.FC = () => {
   );
   const [showTitle, setShowTitle] = useState(false);
   const [showHeader, setShowHeader] = useState(true);
-  const [showfooter, setShowFooter] = useState(true);
+  const [showFooter, setShowFooter] = useState(true);
   const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});
   const [hasData, setHasData] = useState(true);
   const [tableLayout, setTableLayout] = useState();
-  const [top, setTop] = useState<TablePaginationPosition | 'none'>('none');
+  const [top, setTop] = useState<TablePaginationPosition>('none');
   const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
   const [ellipsis, setEllipsis] = useState(false);
   const [yScroll, setYScroll] = useState(false);
@@ -172,7 +166,7 @@ const App: React.FC = () => {
     expandable,
     title: showTitle ? defaultTitle : undefined,
     showHeader,
-    footer: showfooter ? defaultFooter : undefined,
+    footer: showFooter ? defaultFooter : undefined,
     rowSelection,
     scroll,
     tableLayout,
@@ -198,7 +192,7 @@ const App: React.FC = () => {
           <Switch checked={showHeader} onChange={handleHeaderChange} />
         </Form.Item>
         <Form.Item label="Footer">
-          <Switch checked={showfooter} onChange={handleFooterChange} />
+          <Switch checked={showFooter} onChange={handleFooterChange} />
         </Form.Item>
         <Form.Item label="Expandable">
           <Switch checked={!!expandable} onChange={handleExpandChange} />
@@ -264,7 +258,7 @@ const App: React.FC = () => {
       </Form>
       <Table
         {...tableProps}
-        pagination={{ position: [top as TablePaginationPosition, bottom] }}
+        pagination={{ position: [top, bottom] }}
         columns={tableColumns}
         dataSource={hasData ? data : []}
         scroll={scroll}

diff --git a/components/table/demo/pagination.tsx b/components/table/demo/pagination.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Radio, Space, Table, Tag } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
 
 interface DataType {
   key: string;
@@ -10,13 +10,7 @@ interface DataType {
   tags: string[];
 }
 
-type TablePaginationPosition =
-  | 'topLeft'
-  | 'topCenter'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomCenter'
-  | 'bottomRight';
+type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
 
 const topOptions = [
   { label: 'topLeft', value: 'topLeft' },

diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx
@@ -168,7 +168,12 @@ function injectSorter<RecordType>(
         sortTip = triggerAsc;
       }
       const tooltipProps: TooltipProps =
-        typeof showSorterTooltip === 'object' ? showSorterTooltip : { title: sortTip };
+        typeof showSorterTooltip === 'object'
+          ? {
+              title: sortTip,
+              ...showSorterTooltip,
+            }
+          : { title: sortTip };
       newColumn = {
         ...newColumn,
         className: classNames(newColumn.className, { [`${prefixCls}-column-sort`]: sortOrder }),

diff --git a/components/table/interface.ts b/components/table/interface.ts
@@ -232,7 +232,8 @@ type TablePaginationPosition =
   | 'topRight'
   | 'bottomLeft'
   | 'bottomCenter'
-  | 'bottomRight';
+  | 'bottomRight'
+  | 'none';
 
 export interface TablePaginationConfig extends PaginationProps {
   position?: TablePaginationPosition[];

diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
@@ -42,7 +42,7 @@ export default App;
 
 ## 组件变量
 
-## Alert 警告提示
+### Alert 警告提示
 
 <!-- prettier-ignore -->
 | Less 变量 | Component Token | 备注 |

diff --git a/package.json b/package.json
@@ -199,7 +199,7 @@
     "@types/prismjs": "^1.26.0",
     "@types/progress": "^2.0.5",
     "@types/qs": "^6.9.7",
-    "@types/react": "^18.0.0",
+    "@types/react": "18.2.29",
     "@types/react-copy-to-clipboard": "^5.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-highlight-words": "^0.16.4",