chore: auto merge branches (#47562)

chore: merge master into feature

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -435,6 +435,40 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 </Tooltip>
               </form>
             ) : null}
+            <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
+              <span
+                className="code-box-code-action"
+                onClick={() => {
+                  track({ type: 'stackblitz', demo: asset.id });
+                  stackblitzSdk.openProject(stackblitzPrefillConfig, {
+                    openFile: [`demo.${suffix}`],
+                  });
+                }}
+              >
+                <ThunderboltOutlined
+                  className="code-box-stackblitz"
+                  style={{ transform: 'scale(1.2)' }}
+                />
+              </span>
+            </Tooltip>
+            <form
+              className="code-box-code-action"
+              action="https://codepen.io/pen/define"
+              method="POST"
+              target="_blank"
+              ref={codepenIconRef}
+              onClick={() => {
+                track({ type: 'codepen', demo: asset.id });
+                codepenIconRef.current?.submit();
+              }}
+            >
+              <ClientOnly>
+                <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
+              </ClientOnly>
+              <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
+                <CodePenIcon className="code-box-codepen" />
+              </Tooltip>
+            </form>
             <form
               className="code-box-code-action"
               action="https://codesandbox.io/api/v1/sandboxes/define"
@@ -455,37 +489,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 <CodeSandboxIcon className="code-box-codesandbox" />
               </Tooltip>
             </form>
-            <form
-              className="code-box-code-action"
-              action="https://codepen.io/pen/define"
-              method="POST"
-              target="_blank"
-              ref={codepenIconRef}
-              onClick={() => {
-                track({ type: 'codepen', demo: asset.id });
-                codepenIconRef.current?.submit();
-              }}
-            >
-              <ClientOnly>
-                <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
-              </ClientOnly>
-              <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
-                <CodePenIcon className="code-box-codepen" />
-              </Tooltip>
-            </form>
-            <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
-              <span
-                className="code-box-code-action"
-                onClick={() => {
-                  track({ type: 'stackblitz', demo: asset.id });
-                  stackblitzSdk.openProject(stackblitzPrefillConfig, {
-                    openFile: [`demo.${suffix}`],
-                  });
-                }}
-              >
-                <ThunderboltOutlined className="code-box-stackblitz" />
-              </span>
-            </Tooltip>
             <Tooltip title={<FormattedMessage id="app.demo.separate" />}>
               <a
                 className="code-box-code-action"

.dumi/theme/slots/Header/index.tsx

@@ -360,7 +360,7 @@ const Header: React.FC = () => {
           content={menu}
           trigger="click"
           open={menuVisible}
-          arrow={{ arrowPointAtCenter: true }}
+          arrow={{ pointAtCenter: true }}
           onOpenChange={onMenuVisibleChange}
         >
           <MenuOutlined className="nav-phone-icon" onClick={handleShowMenu} />

CHANGELOG.en-US.md

@@ -16,6 +16,18 @@ tag: vVERSION
 
 ---
 
+## 5.14.2
+
+`2024-02-23`
+
+- 🐞 Fix DatePicker.RangePicker time column sometime not scroll to the target time value. [#47542](https://github.com/ant-design/ant-design/pull/47542)
+- 🐞 Fix Modal that pointer events will triggered during openning animation. [#47508](https://github.com/ant-design/ant-design/pull/47508) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Avatar.Group unnecessary dom since tooltip. [#47478](https://github.com/ant-design/ant-design/pull/47478)
+- 💄 Fix Progress unexpected margin style. [#47493](https://github.com/ant-design/ant-design/pull/47493) [@li-jia-nan](https://github.com/li-jia-nan)
+- 💄 Fix Table scrollbar color in darkmode. [#47487](https://github.com/ant-design/ant-design/pull/47487) [@wkmyws](https://github.com/wkmyws)
+- 💄 Fix Layout content font color in dark mode. [#47441](https://github.com/ant-design/ant-design/pull/47441) [@nova1751](https://github.com/nova1751)
+- 💄 Fix Menu cannot customize `darkItemSelectedColor` and `darkItemSelectedBg` token in horizontal dark mode. [#47463](https://github.com/ant-design/ant-design/pull/47463) [@gandavarapurajasekhar](https://github.com/gandavarapurajasekhar)
+
 ## 5.14.1
 
 `2024-02-13`

CHANGELOG.zh-CN.md

@@ -16,6 +16,18 @@ tag: vVERSION
 
 ---
 
+## 5.14.2
+
+`2024-02-23`
+
+- 🐞 修复 DatePicker.RangePicker 的时间列有时不会滚动到正确位置的问题。[#47542](https://github.com/ant-design/ant-design/pull/47542)
+- 🐞 修复 Modal 在打开期间会触发其他鼠标事件的问题。[#47508](https://github.com/ant-design/ant-design/pull/47508) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Avatar.Group 的 tooltip 存在多余 dom 残留的问题。[#47478](https://github.com/ant-design/ant-design/pull/47478)
+- 💄 修复 Progress 组件多余的 `margin` 样式。[#47493](https://github.com/ant-design/ant-design/pull/47493) [@li-jia-nan](https://github.com/li-jia-nan)
+- 💄 修复 Table 滚动条在暗黑模式下的颜色。[#47487](https://github.com/ant-design/ant-design/pull/47487) [@wkmyws](https://github.com/wkmyws)
+- 💄 修复 Layout 内容字体在暗黑模式下的颜色。[#47441](https://github.com/ant-design/ant-design/pull/47441) [@nova1751](https://github.com/nova1751)
+- 💄 修复 Menu 组件在水平暗黑模式下自定义 `darkItemSelectedColor` 和 `darkItemSelectedBg` token 不生效的问题。[#47463](https://github.com/ant-design/ant-design/pull/47463) [@gandavarapurajasekhar](https://github.com/gandavarapurajasekhar)
+
 ## 5.14.1
 
 `2024-02-13`

components/date-picker/demo/variant.md

@@ -4,4 +4,4 @@
 
 ## en-US
 
-There are `outlined` `fille` and `borderless`, totally three variants to choose from.
+There are `outlined` `filled` and `borderless`, totally three variants to choose from.

components/date-picker/style/panel.ts

@@ -571,7 +571,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
 
           '&::after': {
             display: 'block',
-            height: token.calc(timeColumnHeight).sub(timeCellHeight).equal(),
+            height: token.calc('100%').sub(timeCellHeight).equal(),
             content: '""',
           },
 
@@ -629,14 +629,6 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           },
         },
       },
-      // https://github.com/ant-design/ant-design/issues/39227
-      [`&-datetime-panel ${componentCls}-time-panel-column:after`]: {
-        height: token
-          .calc(timeColumnHeight)
-          .sub(timeCellHeight)
-          .add(token.calc(paddingXXS).mul(2))
-          .equal(),
-      },
     },
   };
 };

components/form/__tests__/index.test.tsx

@@ -127,7 +127,7 @@ describe('Form', () => {
 
           try {
             await form.validateFields();
-          } catch (err) {
+          } catch {
             // do nothing
           }
         };
@@ -1777,7 +1777,9 @@ describe('Form', () => {
       const form = useRef<FormInstance<any>>(null);
 
       useEffect(() => {
-        if (!trigger) return;
+        if (!trigger) {
+          return;
+        }
         form.current?.validateFields();
       }, [trigger]);
 
@@ -1885,7 +1887,9 @@ describe('Form', () => {
       const form = useRef<FormInstance<any>>(null);
 
       useEffect(() => {
-        if (!trigger) return;
+        if (!trigger) {
+          return;
+        }
         form.current?.validateFields();
       }, [trigger]);
 

components/form/demo/validate-only.tsx

@@ -2,33 +2,32 @@ import React from 'react';
 import type { FormInstance } from 'antd';
 import { Button, Form, Input, Space } from 'antd';
 
-const SubmitButton = ({ form }: { form: FormInstance }) => {
+interface SubmitButtonProps {
-  const [submittable, setSubmittable] = React.useState(false);
+  form: FormInstance;
+}
+
+const SubmitButton: React.FC<React.PropsWithChildren<SubmitButtonProps>> = ({ form, children }) => {
+  const [submittable, setSubmittable] = React.useState<boolean>(false);
 
   // Watch all values
   const values = Form.useWatch([], form);
 
   React.useEffect(() => {
-    form.validateFields({ validateOnly: true }).then(
+    form
-      () => {
+      .validateFields({ validateOnly: true })
-        setSubmittable(true);
+      .then(() => setSubmittable(true))
-      },
+      .catch(() => setSubmittable(false));
-      () => {
+  }, [form, values]);
-        setSubmittable(false);
-      },
-    );
-  }, [values]);
 
   return (
     <Button type="primary" htmlType="submit" disabled={!submittable}>
-      Submit
+      {children}
     </Button>
   );
 };
 
 const App: React.FC = () => {
   const [form] = Form.useForm();
-
   return (
     <Form form={form} name="validateOnly" layout="vertical" autoComplete="off">
       <Form.Item name="name" label="Name" rules={[{ required: true }]}>
@@ -39,7 +38,7 @@ const App: React.FC = () => {
       </Form.Item>
       <Form.Item>
         <Space>
-          <SubmitButton form={form} />
+          <SubmitButton form={form}>Submit</SubmitButton>
           <Button htmlType="reset">Reset</Button>
         </Space>
       </Form.Item>

components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -508,11 +508,7 @@ exports[`renders components/tooltip/demo/arrow-point-at-center.tsx extend contex
 </div>
 `;
 
-exports[`renders components/tooltip/demo/arrow-point-at-center.tsx extend context correctly 2`] = `
+exports[`renders components/tooltip/demo/arrow-point-at-center.tsx extend context correctly 2`] = `[]`;
-[
-  "Warning: [antd: Tooltip] \`arrowPointAtCenter\` is deprecated. Please use \`arrow={{ pointAtCenter: true }}\` instead.",
-]
-`;
 
 exports[`renders components/tooltip/demo/auto-adjust-overflow.tsx extend context correctly 1`] = `
 <div

components/tooltip/demo/arrow-point-at-center.tsx

@@ -6,7 +6,7 @@ const App: React.FC = () => (
     <Tooltip placement="topLeft" title="Prompt Text">
       <Button>Align edge / 边缘对齐</Button>
     </Tooltip>
-    <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
+    <Tooltip placement="topLeft" title="Prompt Text" arrow={{ pointAtCenter: true }}>
       <Button>Arrow points to center / 箭头指向中心</Button>
     </Tooltip>
   </Space>

docs/react/customize-theme.en-US.md

@@ -17,7 +17,7 @@ In version 5.0, we provide a new way to customize themes. Different from the les
 
 ## Basic Usage
 
-In version 5.0 we call the smallest element that affects the theme **Design Token**. By modifying the Design Token, we can present various themes or components. You can pass `theme` to `ConfigProvider`` to customize theme. After migrate to V5, theme of V5 will be applied by default.
+In version 5.0 we call the smallest element that affects the theme **Design Token**. By modifying the Design Token, we can present various themes or components. You can pass `theme` to `ConfigProvider` to customize theme. After migrate to V5, theme of V5 will be applied by default.
 
 <!-- prettier-ignore -->
 :::warning

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.14.1",
+  "version": "5.14.2",
   "description": "An enterprise-class UI design language and React components implementation",
   "keywords": [
     "ant",
@@ -143,7 +143,7 @@
     "rc-motion": "^2.9.0",
     "rc-notification": "~5.3.0",
     "rc-pagination": "~4.0.4",
-    "rc-picker": "~4.1.2",
+    "rc-picker": "~4.1.4",
     "rc-progress": "~3.5.1",
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.4.0",
@@ -170,7 +170,7 @@
     "@antv/g6": "^4.8.24",
     "@babel/eslint-plugin": "^7.23.5",
     "@biomejs/biome": "^1.5.3",
-    "@codesandbox/sandpack-react": "^2.12.1",
+    "@codesandbox/sandpack-react": "^2.13.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -200,14 +200,14 @@
     "@types/jsdom": "^21.1.6",
     "@types/lodash": "^4.14.202",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.20",
     "@types/nprogress": "^0.2.3",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
     "@types/prismjs": "^1.26.3",
     "@types/progress": "^2.0.7",
     "@types/qs": "^6.9.11",
-    "@types/react": "^18.2.57",
+    "@types/react": "^18.2.58",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.19",
     "@types/react-highlight-words": "^0.16.7",
@@ -286,7 +286,7 @@
     "pretty-format": "^29.7.0",
     "prismjs": "^1.29.0",
     "progress": "^2.0.3",
-    "puppeteer": "^22.1.0",
+    "puppeteer": "^22.2.0",
     "qs": "^6.11.2",
     "rc-footer": "^0.6.8",
     "rc-tween-one": "^3.0.6",
@@ -299,7 +299,7 @@
     "react-fast-marquee": "^1.6.4",
     "react-highlight-words": "^0.20.0",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-intersection-observer": "^9.8.0",
+    "react-intersection-observer": "^9.8.1",
     "react-resizable": "^3.0.5",
     "react-router-dom": "^6.22.1",
     "react-sticky-box": "^2.0.5",
@@ -323,7 +323,7 @@
     "sylvanas": "^0.6.1",
     "tar": "^6.2.0",
     "tar-fs": "^3.0.5",
-    "terser": "^5.27.2",
+    "terser": "^5.28.0",
     "tsx": "^4.7.1",
     "typedoc": "^0.25.8",
     "typescript": "~5.3.3",