Merge branch 'master' into feature-merge-master

.github/workflows/issue-open-check.yml

@@ -59,7 +59,8 @@ jobs:
             * Ant Motion: https://motion.ant.design
 
             ## 国内镜像
-            * Ant Design: http://ant-design.gitee.io
+            * 官方镜像: https://ant-design.antgroup.com/
+            * Gitee 镜像: http://ant-design.gitee.io
             * Ant Design 3.x: http://ant-design-3x.gitee.io
             * Ant Design 2.x: http://ant-design-2x.gitee.io
             * Ant Design 1.x: http://ant-design-1x.gitee.io

.github/workflows/pr-check-ci.yml

@@ -3,7 +3,7 @@ name: PR Check CI
 
 on:
   schedule:
-    - cron: "*/10 * * * *"
+    - cron: "*/5 * * * *"
 
 permissions:
   contents: read

components/collapse/index.en-US.md

@@ -36,7 +36,7 @@ A content area which can be collapsed and expanded.
 | --- | --- | --- | --- | --- |
 | collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 |
 | extra | The extra element in the corner | ReactNode | - |  |
-| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | false |  |
+| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false |  |
 | header | Title of the panel | ReactNode | - |  |
 | key | Unique key identifying the panel from among its siblings | string \| number | - |  |
 | showArrow | If false, panel will not show arrow icon | boolean | true |  |

components/drawer/__tests__/DrawerEvent.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Drawer from '..';
-import { render, fireEvent } from '../../../tests/utils';
+import { fireEvent, render } from '../../../tests/utils';
 
 describe('Drawer', () => {
   const getDrawer = props => (
@@ -77,4 +77,35 @@ describe('Drawer', () => {
     fireEvent(document.querySelector('.ant-drawer-content-wrapper'), ev);
     expect(afterVisibleChange).toBeCalledTimes(1);
   });
+  it('should support children ref', () => {
+    const fn = jest.fn();
+
+    const refCallback = ref => {
+      expect(typeof ref).toBe('object');
+      fn();
+    };
+
+    const RefDemo = () => {
+      const ref = React.useRef();
+      const [visible, setVisible] = React.useState(false);
+
+      React.useEffect(() => {
+        if (visible) {
+          refCallback(ref.current);
+        }
+      }, [visible]);
+
+      return (
+        <>
+          <a onClick={() => setVisible(true)}>open</a>
+          <Drawer visible={visible}>
+            <div ref={ref} />
+          </Drawer>
+        </>
+      );
+    };
+    const { container } = render(<RefDemo />);
+    fireEvent.click(container.querySelector('a'));
+    expect(fn).toBeCalled();
+  });
 });

components/drawer/index.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import RcDrawer from 'rc-drawer';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
+import RcDrawer from 'rc-drawer';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
 
@@ -266,7 +266,7 @@ const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
     // render drawer body dom
     const renderBody = () => {
       // destroyCloseRef.current =false Load the body only once by default
-      if (destroyCloseRef.current && !forceRender && !load) {
+      if (destroyCloseRef.current && !forceRender && !propsVisible) {
         return null;
       }
 
@@ -306,7 +306,7 @@ const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
             ...rest,
           }}
           {...offsetStyle}
-          open={visible}
+          open={visible || propsVisible}
           showMask={mask}
           style={getRcDrawerStyle()}
           className={drawerClassName}

components/segmented/style/index.less

@@ -67,7 +67,7 @@
 
     // syntactic sugar to add `icon` for Segmented Item
     &-icon + * {
-      margin-left: @margin-sm / 2;
+      margin-left: (@margin-sm / 2);
     }
 
     &-input {

package.json

@@ -305,7 +305,7 @@
   "bundlesize": [
     {
       "path": "./dist/antd.min.js",
-      "maxSize": "281 kB"
+      "maxSize": "282 kB"
     },
     {
       "path": "./dist/antd.min.css",

site/theme/template/Content/Demo/index.jsx

@@ -1,18 +1,18 @@
 /* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import CopyToClipboard from 'react-copy-to-clipboard';
+import { CheckOutlined, SnippetsOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import stackblitzSdk from '@stackblitz/sdk';
+import { Alert, Badge, Tooltip } from 'antd';
 import classNames from 'classnames';
 import LZString from 'lz-string';
-import { Tooltip, Alert, Badge } from 'antd';
-import { SnippetsOutlined, CheckOutlined, ThunderboltOutlined } from '@ant-design/icons';
-import stackblitzSdk from '@stackblitz/sdk';
-import CodePreview from './CodePreview';
-import EditButton from '../EditButton';
+import React from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import ReactDOM from 'react-dom';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import BrowserFrame from '../../BrowserFrame';
-import CodeSandboxIcon from './CodeSandboxIcon';
+import EditButton from '../EditButton';
 import CodePenIcon from './CodePenIcon';
+import CodePreview from './CodePreview';
+import CodeSandboxIcon from './CodeSandboxIcon';
 import RiddleIcon from './RiddleIcon';
 
 const { ErrorBoundary } = Alert;
@@ -275,7 +275,7 @@ class Demo extends React.Component {
     let parsedSourceCode = sourceCode;
     let importReactContent = "import React from 'react';";
 
-    const importReactReg = /import(\D*)from 'react';/;
+    const importReactReg = /import React(\D*)from 'react';/;
     const matchImportReact = parsedSourceCode.match(importReactReg);
     if (matchImportReact) {
       [importReactContent] = matchImportReact;
@@ -296,14 +296,14 @@ ${parsedSourceCode}
 
     const indexJsContent = react18
       ? `
-${importReactContent}
+import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Demo from './demo';
 
 createRoot(document.getElementById('container')).render(<Demo />);
 `
       : `
-${importReactContent}
+import React from 'react';
 import ReactDOM from 'react-dom';
 import Demo from './demo';