chore: auto merge branches (#45067)

chore: feature merge master

.dumi/theme/SiteThemeProvider.tsx

@@ -3,6 +3,7 @@ import { theme as antdTheme, ConfigProvider } from 'antd';
 import type { ThemeConfig } from 'antd';
 import type { ThemeProviderProps } from 'antd-style';
 import { ThemeProvider } from 'antd-style';
+import SiteContext from './slots/SiteContext';
 
 interface NewToken {
   bannerHeight: number;
@@ -17,13 +18,17 @@ interface NewToken {
   marginFar: number;
   codeFamily: string;
   contentMarginTop: number;
+  anchorTop: number;
 }
 
+const headerHeight = 64;
+const bannerHeight = 38;
+
 const SiteThemeProvider: React.FC<ThemeProviderProps<any>> = ({ children, theme, ...rest }) => {
   const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const rootPrefixCls = getPrefixCls();
   const { token } = antdTheme.useToken();
-
+  const { bannerVisible } = useContext(SiteContext);
   React.useEffect(() => {
     ConfigProvider.config({ theme: theme as ThemeConfig });
   }, [theme]);
@@ -33,8 +38,8 @@ const SiteThemeProvider: React.FC<ThemeProviderProps<any>> = ({ children, theme,
       {...rest}
       theme={theme}
       customToken={{
-        headerHeight: 64,
+        headerHeight,
-        bannerHeight: 38,
+        bannerHeight,
         menuItemBorder: 2,
         mobileMaxWidth: 767.99,
         siteMarkdownCodeBg: token.colorFillTertiary,
@@ -48,6 +53,7 @@ const SiteThemeProvider: React.FC<ThemeProviderProps<any>> = ({ children, theme,
         marginFar: token.marginXXL * 2,
         codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
         contentMarginTop: 40,
+        anchorTop: headerHeight + token.margin + (bannerVisible ? bannerHeight : 0),
       }}
     >
       {children}

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -80,13 +80,13 @@ const { Title } = Typography;
 
 const Overview: React.FC = () => {
   const { styles } = useStyle();
-  const { theme, bannerVisible } = useContext(SiteContext);
+  const { theme } = useContext(SiteContext);
 
   const data = useSidebarData();
   const [searchBarAffixed, setSearchBarAffixed] = useState<boolean>(false);
 
   const token = useTheme();
-  const { borderRadius, colorBgContainer, fontSizeXL } = token;
+  const { borderRadius, colorBgContainer, fontSizeXL, anchorTop } = token;
 
   const affixedStyle: CSSProperties = {
     boxShadow: 'rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px',
@@ -143,10 +143,7 @@ const Overview: React.FC = () => {
   return (
     <section className="markdown" ref={sectionRef}>
       <Divider />
-      <Affix
+      <Affix offsetTop={anchorTop} onChange={setSearchBarAffixed}>
-        offsetTop={24 + token.headerHeight + (bannerVisible ? token.bannerHeight : 0)}
-        onChange={setSearchBarAffixed}
-      >
         <div
           className={styles.componentsOverviewAffix}
           style={searchBarAffixed ? affixedStyle : {}}

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -1,17 +1,16 @@
-import React, { useCallback, useContext, useMemo, useState } from 'react';
 import type { CSSProperties } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import Icon, * as AntdIcons from '@ant-design/icons';
 import type { IntlShape } from 'react-intl';
 import { createStyles, useTheme } from 'antd-style';
 import { useIntl } from 'dumi';
 import debounce from 'lodash/debounce';
-import { Segmented, Input, Empty, Affix } from 'antd';
 import type { SegmentedProps } from 'antd';
+import { Affix, Empty, Input, Segmented } from 'antd';
 import Category from './Category';
 import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
 import type { CategoriesKeys } from './fields';
 import { categories } from './fields';
-import SiteContext from '../../slots/SiteContext';
 
 export enum ThemeType {
   Filled = 'Filled',
@@ -60,7 +59,6 @@ const IconSearch: React.FC = () => {
     theme: ThemeType.Outlined,
   });
   const token = useTheme();
-  const { bannerVisible } = useContext(SiteContext);
 
   const newIconNames: string[] = [];
 
@@ -114,7 +112,7 @@ const IconSearch: React.FC = () => {
   }, [displayState.searchKey, displayState.theme]);
 
   const [searchBarAffixed, setSearchBarAffixed] = useState<boolean>(false);
-  const { borderRadius, colorBgContainer } = token;
+  const { borderRadius, colorBgContainer, anchorTop } = token;
 
   const affixedStyle: CSSProperties = {
     boxShadow: 'rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px',
@@ -126,10 +124,7 @@ const IconSearch: React.FC = () => {
 
   return (
     <div className="markdown">
-      <Affix
+      <Affix offsetTop={anchorTop} onChange={setSearchBarAffixed}>
-        offsetTop={24 + token.headerHeight + (bannerVisible ? token.bannerHeight : 0)}
-        onChange={setSearchBarAffixed}
-      >
         <div className={styles.iconSearchAffix} style={searchBarAffixed ? affixedStyle : {}}>
           <Segmented
             size="large"

.dumi/theme/common/styles/Common.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useTheme } from 'antd-style';
 
 export default () => {
-  const { headerHeight, margin } = useTheme();
+  const { anchorTop } = useTheme();
 
   return (
     <Global
@@ -60,8 +60,8 @@ export default () => {
         border-style: none;
       }
 
-      html {
+      [id] {
-        scroll-padding-top: ${headerHeight + margin}px;
+        scroll-margin-top: ${anchorTop}px;
       }
 
       [data-prefers-color='dark'] {

.dumi/theme/slots/Content/index.tsx

@@ -211,7 +211,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
             <Anchor
               className={styles.toc}
               affix={false}
-              targetOffset={token.marginXXL}
+              targetOffset={token.anchorTop}
               showInkInFixed
               items={anchorItems.map((item) => ({
                 href: `#${item.id}`,

.github/workflows/site-deploy.yml

@@ -105,7 +105,7 @@ jobs:
           npx surge --project ./_site --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}
 
       - name: Create Commit Comment
-        uses: peter-evans/commit-comment@v2
+        uses: peter-evans/commit-comment@v3
         with:
           body: |
             - Documentation site for this release: https://ant-design-${{ steps.publish-version.outputs.VERSION }}.surge.sh

CHANGELOG.en-US.md

@@ -16,6 +16,21 @@ tag: vVERSION
 
 ---
 
+## 5.9.3
+
+`2023-09-25`
+
+- 🔥 Tooltip delete the logic of wrap `span` on `disabled` element. It can always work as expect on disabled element now. [#44895](https://github.com/ant-design/ant-design/pull/44895) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Popover that should shift automaticly when overflowed. [#45015](https://github.com/ant-design/ant-design/pull/45015) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Tooltip / Popover position jump when content height changed. [#44976](https://github.com/ant-design/ant-design/pull/44976)
+- 🛠 ComponentToken remove `radiusBase` must less than `16` limitation. [#44980](https://github.com/ant-design/ant-design/pull/44980)
+- 🐞 Fix Dropdown can not give `ref` for the root children rendered by `dropdownRender`. [#44971](https://github.com/ant-design/ant-design/pull/44971)
+- 🐞 Fix Table `cellPaddingBlock` not working. [#45040](https://github.com/ant-design/ant-design/pull/45040)
+- 🐞 Fix Input wrong height with small `controlHeight`. [#45048](https://github.com/ant-design/ant-design/pull/45048)
+- 🐞 Fix Typography style issue when `fontSize` is odd. [#45031](https://github.com/ant-design/ant-design/pull/45031)
+- TypeScript
+  - 🤖 MISC: Fix `@types/react@18.2.22` React.Key type errors. [#44938](https://github.com/ant-design/ant-design/pull/44938)
+
 ## 5.9.2
 
 `2023-09-19`

CHANGELOG.zh-CN.md

@@ -16,6 +16,21 @@ tag: vVERSION
 
 ---
 
+## 5.9.3
+
+`2023-09-25`
+
+- 🔥 Tooltip 删除对 `disabled` 子元素额外包括 `span` 的逻辑，现在始终能够正确触发。[#44895](https://github.com/ant-design/ant-design/pull/44895) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Popover 超出屏幕时不会自动调整偏移的问题。[#45015](https://github.com/ant-design/ant-design/pull/45015) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Tooltip / Popover 在内容高度变化时，位置会闪动的问题。[#44976](https://github.com/ant-design/ant-design/pull/44976)
+- 🛠 ComponentToken 移除 `radiusBase` 必须小于 `16` 的限制。[#44980](https://github.com/ant-design/ant-design/pull/44980)
+- 🐞 修复 Dropdown 通过 `dropdownRender` 渲染的子节点配置 `ref` 不生效的问题。[#44971](https://github.com/ant-design/ant-design/pull/44971)
+- 🐞 修复 Table `cellPaddingBlock` 不生效的问题。[#45040](https://github.com/ant-design/ant-design/pull/45040)
+- 🐞 修复 Input 组件在小尺寸 `controlHeight` 下高度不正确的问题。[#45048](https://github.com/ant-design/ant-design/pull/45048)
+- 🐞 修复 Typography 在设置 `fontSize` 为奇数时的样式问题。[#45031](https://github.com/ant-design/ant-design/pull/45031)
+- TypeScript
+  - 🤖 MISC: 修复 `@types/react@18.2.22` React.Key 定义更新引发的问题。[#44938](https://github.com/ant-design/ant-design/pull/44938)
+
 ## 5.9.2
 
 `2023-09-19`

components/input/__tests__/demo-extend.test.ts

@@ -1,3 +1,5 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('input');
+extendTest('input', {
+  skip: ['component-token.tsx'],
+});

components/input/__tests__/demo.test.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
-demoTest('input');
+demoTest('input', {
+  skip: ['component-token.tsx'],
+});
 
 rootPropsTest(
   'input',

components/input/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+token debug
+
+## en-US
+
+token debug

components/input/demo/component-token.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ConfigProvider, Input } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider theme={{ token: { controlHeight: 28 } }}>
+    <Input placeholder="Basic usage" />
+  </ConfigProvider>
+);
+
+export default App;

components/input/index.en-US.md

@@ -40,6 +40,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 <code src="./demo/align.tsx" debug>Text Align</code>
 <code src="./demo/textarea-resize.tsx" debug>TextArea</code>
 <code src="./demo/debug-addon.tsx" debug>debug Pre / Post tab</code>
+<code src="./demo/component-token.tsx" debug>debug token</code>
 
 ## API
 

components/input/index.zh-CN.md

@@ -41,6 +41,7 @@ demo:
 <code src="./demo/align.tsx" debug>文本对齐</code>
 <code src="./demo/textarea-resize.tsx" debug>文本域</code>
 <code src="./demo/debug-addon.tsx" debug>debug 前置/后置标签</code>
+<code src="./demo/component-token.tsx" debug>debug token</code>
 
 ## API
 

components/input/style/index.ts

@@ -1044,7 +1044,7 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
   return {
     paddingBlock: Math.max(
       Math.round(((controlHeight - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
-      3,
+      0,
     ),
     paddingBlockSM: Math.max(
       Math.round(((controlHeightSM - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth,

components/select/demo/search.tsx

@@ -10,7 +10,7 @@ const onSearch = (value: string) => {
 };
 
 // Filter `option.label` match the user type `input`
-const filterOption = (input: string, option: { label: string; value: string }) =>
+const filterOption = (input: string, option?: { label: string; value: string }) =>
   (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
 
 const App: React.FC = () => (

components/select/index.zh-CN.md

@@ -56,11 +56,11 @@ demo:
 ### Select props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
 | autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效 | boolean | true |  |
 | autoFocus | 默认获取焦点 | boolean | false |  |
-| bordered | 是否有边框 | boolean | true |  |  |
+| bordered | 是否有边框 | boolean | true |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true |  |
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | defaultValue | 指定默认选中的条目 | string \| string\[] \|<br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - |  |

components/typography/Base/Ellipsis.tsx

@@ -1,6 +1,6 @@
+import * as React from 'react';
 import toArray from 'rc-util/lib/Children/toArray';
 import useIsomorphicLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import * as React from 'react';
 
 export interface EllipsisProps {
   enabledMeasure?: boolean;
@@ -190,7 +190,7 @@ const Ellipsis: React.FC<EllipsisProps> = ({
         zIndex: -9999,
         visibility: 'hidden',
         pointerEvents: 'none',
-        fontSize: Math.floor(fontSize / 2) * 2,
+        fontSize: Math.ceil(fontSize / 2) * 2,
         ...style,
       }}
     >

components/upload/demo/directory.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-支持上传一个文件夹里的所有文件。
+支持上传一个文件夹里的所有文件。 [Safari 里仍然能选择文件?]('#/%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8A%E4%BC%A0%E5%9C%A8%20Safari%20%E4%BB%8D%E7%84%B6%E5%8F%AF%E4%BB%A5%E9%80%89%E4%B8%AD%E6%96%87%E4%BB%B6')
 
 ## en-US
 
-You can select and upload a whole directory.
+You can select and upload a whole directory. [Can still select files when uploading a folder in Safari?]('#/Can%20still%20select%20files%20when%20uploading%20a%20folder%20in%20Safari')

components/upload/index.en-US.md

@@ -159,3 +159,11 @@ Ref:
 - [#32672](https://github.com/ant-design/ant-design/issues/32672)
 - [#32913](https://github.com/ant-design/ant-design/issues/32913)
 - [#33988](https://github.com/ant-design/ant-design/issues/33988)
+
+### Can still select files when uploading a folder in Safari?
+
+Inside the upload component, we use the `directory` and `webkitdirectory` properties to control only directories can be selected. However, in Safari's implementation it doesn't seem to work. See [here](https://stackoverflow.com/q/55649945/3040605). Please try passing an additional `accept` attribute that cannot match any files. For example:
+
+```jsx
+accept: `.${'n'.repeat(100)}`;
+```

components/upload/index.zh-CN.md

@@ -159,3 +159,11 @@ demo:
 - [#32672](https://github.com/ant-design/ant-design/issues/32672)
 - [#32913](https://github.com/ant-design/ant-design/issues/32913)
 - [#33988](https://github.com/ant-design/ant-design/issues/33988)
+
+### 文件夹上传在 Safari 仍然可以选中文件?
+
+组件内部是以 `directory`、`webkitdirectory` 属性控制 input 来实现文件夹选择的, 但似乎在 Safari 的实现中，[并不会阻止用户选择文件](https://stackoverflow.com/q/55649945/3040605)，请尝试额外传递无法匹配文件的 `accept` 属性来规避此问题 例如:
+
+```jsx
+accept: `.${'n'.repeat(100)}`;
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.9.2",
+  "version": "5.9.3",
   "packageManager": "^npm@9.0.0",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",