chore: merge master into feature

.dumi/theme/common/styles/Demo.tsx

@@ -22,7 +22,7 @@ const GlobalDemoStyles: React.FC = () => {
         .code-box {
           position: relative;
           display: inline-block;
-          width: 100%;
+          width: calc(100% - ${token.lineWidth * 2}px);
           margin: 0 0 16px;
           background-color: ${token.colorBgContainer};
           border: 1px solid ${token.colorSplit};

.dumi/theme/layouts/GlobalLayout.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, Suspense } from 'react';
-import dayjs from 'dayjs';
 import {
   createCache,
   extractStyle,
@@ -18,11 +17,12 @@ import { DarkContext } from '../../hooks/useDark';
 import useLayoutState from '../../hooks/useLayoutState';
 import useLocation from '../../hooks/useLocation';
 import type { ThemeName } from '../common/ThemeSwitch';
-import ThemeSwitch from '../common/ThemeSwitch';
 import SiteThemeProvider from '../SiteThemeProvider';
 import type { SiteContextProps } from '../slots/SiteContext';
 import SiteContext from '../slots/SiteContext';
 
+const ThemeSwitch = React.lazy(() => import('../common/ThemeSwitch'));
+
 type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];
 type SiteState = Partial<Omit<SiteContextProps, 'updateSiteContext'>>;
 
@@ -101,15 +101,15 @@ const GlobalLayout: React.FC = () => {
   useEffect(() => {
     const _theme = searchParams.getAll('theme') as ThemeName[];
     const _direction = searchParams.get('direction') as DirectionType;
-    const storedBannerVisibleLastTime =
+    // const storedBannerVisibleLastTime =
-      localStorage && localStorage.getItem(ANT_DESIGN_NOT_SHOW_BANNER);
+    //   localStorage && localStorage.getItem(ANT_DESIGN_NOT_SHOW_BANNER);
-    const storedBannerVisible =
+    // const storedBannerVisible =
-      storedBannerVisibleLastTime && dayjs().diff(dayjs(storedBannerVisibleLastTime), 'day') >= 1;
+    //   storedBannerVisibleLastTime && dayjs().diff(dayjs(storedBannerVisibleLastTime), 'day') >= 1;
 
     setSiteState({
       theme: _theme,
       direction: _direction === 'rtl' ? 'rtl' : 'ltr',
-      bannerVisible: storedBannerVisibleLastTime ? !!storedBannerVisible : true,
+      // bannerVisible: storedBannerVisibleLastTime ? !!storedBannerVisible : true,
     });
     // Handle isMobile
     updateMobileMode();
@@ -174,10 +174,12 @@ const GlobalLayout: React.FC = () => {
     content = (
       <App>
         {outlet}
-        <ThemeSwitch
+        <Suspense>
-          value={theme}
+          <ThemeSwitch
-          onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
+            value={theme}
-        />
+            onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
+          />
+        </Suspense>
       </App>
     );
   }

.dumi/theme/slots/SiteContext.ts

@@ -12,7 +12,7 @@ export interface SiteContextProps {
 
 const SiteContext = React.createContext<SiteContextProps>({
   isMobile: false,
-  bannerVisible: true,
+  bannerVisible: false,
   direction: 'ltr',
   theme: ['light'],
   updateSiteConfig: () => {},

CHANGELOG.en-US.md

@@ -16,6 +16,13 @@ tag: vVERSION
 
 ---
 
+## 5.12.7
+
+`2024-01-02`
+
+- 🐞 MISC: Fix error caused by upgrading `@ctrl/tinycolor@4.0.2`. [#46744](https://github.com/ant-design/ant-design/pull/46744) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Mentions item height bug. [#46737](https://github.com/ant-design/ant-design/pull/46737)
+
 ## 5.12.6
 
 `2023-12-30`

CHANGELOG.zh-CN.md

@@ -16,6 +16,13 @@ tag: vVERSION
 
 ---
 
+## 5.12.7
+
+`2024-01-02`
+
+- 🐞 MISC: 修复升级 `@ctrl/tinycolor@4.0.2` 导致的错误。[#46744](https://github.com/ant-design/ant-design/pull/46744) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Mentions 选项高度偏大的问题。[#46737](https://github.com/ant-design/ant-design/pull/46737)
+
 ## 5.12.6
 
 `2023-12-30`

components/cascader/Panel.tsx

@@ -16,7 +16,7 @@ export type PanelPickType = Exclude<PickType, 'checkable'> | 'multiple' | 'rootC
 
 export type CascaderPanelProps = Pick<CascaderProps, PanelPickType>;
 
-export default function CascaderPanel(props: CascaderPanelProps) {
+const CascaderPanel: React.FC<CascaderPanelProps> = (props) => {
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -63,4 +63,6 @@ export default function CascaderPanel(props: CascaderPanelProps) {
       loadingIcon={loadingIcon}
     />,
   );
-}
+};
+
+export default CascaderPanel;

components/cascader/index.tsx

@@ -5,8 +5,8 @@ import type {
   DefaultOptionType,
   FieldNames,
   MultipleCascaderProps as RcMultipleCascaderProps,
-  ShowSearchType,
   SingleCascaderProps as RcSingleCascaderProps,
+  ShowSearchType,
 } from 'rc-cascader';
 import RcCascader from 'rc-cascader';
 import type { Placement } from 'rc-select/lib/BaseSelect';
@@ -26,6 +26,8 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
+import type { Variant } from '../form/hooks/useVariants';
+import useVariant from '../form/hooks/useVariants';
 import mergedBuiltinPlacements from '../select/mergedBuiltinPlacements';
 import useSelectStyle from '../select/style';
 import useIcons from '../select/useIcons';
@@ -36,8 +38,6 @@ import useCheckable from './hooks/useCheckable';
 import useColumnIcons from './hooks/useColumnIcons';
 import CascaderPanel from './Panel';
 import useStyle from './style';
-import type { Variant } from '../form/hooks/useVariants';
-import useVariant from '../form/hooks/useVariants';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -348,10 +348,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
       checkable={checkable}
       dropdownClassName={mergedDropdownClassName}
       dropdownPrefixCls={customizePrefixCls || cascaderPrefixCls}
-      dropdownStyle={{
+      dropdownStyle={{ ...restProps.dropdownStyle, zIndex }}
-        ...restProps.dropdownStyle,
-        zIndex,
-      }}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
       transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
       getPopupContainer={getPopupContainer || getContextPopupContainer}

components/popover/PurePanel.tsx

@@ -1,18 +1,20 @@
+import * as React from 'react';
 import classNames from 'classnames';
 import { Popup } from 'rc-tooltip';
-import * as React from 'react';
-import type { PopoverProps } from '.';
-import { ConfigContext } from '../config-provider';
 
+import type { PopoverProps } from '.';
 import { getRenderPropValue } from '../_util/getRenderPropValue';
+import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
 export const getOverlay = (
-  prefixCls: string,
+  prefixCls?: string,
   title?: PopoverProps['title'],
   content?: PopoverProps['content'],
 ) => {
-  if (!title && !content) return undefined;
+  if (!title && !content) {
+    return null;
+  }
   return (
     <>
       {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
@@ -54,7 +56,7 @@ export const RawPurePanel: React.FC<RawPurePanelProps> = (props) => {
     >
       <div className={`${prefixCls}-arrow`} />
       <Popup {...props} className={hashId} prefixCls={prefixCls}>
-        {children || getOverlay(prefixCls!, title, content)}
+        {children || getOverlay(prefixCls, title, content)}
       </Popup>
     </div>
   );

components/popover/__tests__/demo.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
 demoTest('popover', {
@@ -12,7 +13,5 @@ rootPropsTest(
       <span />
     </Popover>
   ),
-  {
+  { findRootElements: () => document.querySelector('.ant-popover')! },
-    findRootElements: () => document.querySelector('.ant-popover')!,
-  },
 );

components/popover/__tests__/index.test.tsx

@@ -1,39 +1,38 @@
 import React from 'react';
+
 import Popover from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import { fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
+import type { TooltipRef } from '../../tooltip';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanelDoNotUseOrYouWillBeFired } = Popover;
 
 describe('Popover', () => {
   mountTest(Popover);
 
   it('should show overlay when trigger is clicked', () => {
-    const ref = React.createRef<any>();
+    const ref = React.createRef<TooltipRef>();
-
+    const { container } = render(
-    const popover = render(
       <Popover ref={ref} content="console.log('hello world')" title="code" trigger="click">
         <span>show me your code</span>
       </Popover>,
     );
-
+    expect(container.querySelector('.ant-popover-inner-content')).toBeFalsy();
-    expect(popover.container.querySelector('.ant-popover-inner-content')).toBeFalsy();
+    fireEvent.click(container.querySelector('span')!);
-    fireEvent.click(popover.container.querySelector('span')!);
+    expect(container.querySelector('.ant-popover-inner-content')).toBeTruthy();
-    expect(popover.container.querySelector('.ant-popover-inner-content')).toBeTruthy();
   });
 
   it('shows content for render functions', () => {
     const renderTitle = () => 'some-title';
     const renderContent = () => 'some-content';
-    const ref = React.createRef<any>();
+    const ref = React.createRef<TooltipRef>();
-
+    const { container } = render(
-    const popover = render(
       <Popover ref={ref} content={renderContent} title={renderTitle} trigger="click">
         <span>show me your code </span>
       </Popover>,
     );
-
+    fireEvent.click(container.querySelector('span')!);
-    fireEvent.click(popover.container.querySelector('span')!);
-
     const popup = document.querySelector('.ant-popover')!;
     expect(popup).not.toBe(null);
     expect(popup.innerHTML).toContain('some-title');
@@ -80,13 +79,19 @@ describe('Popover', () => {
   });
 
   it(`should be rendered correctly in RTL direction`, () => {
-    const wrapper = render(
+    const { container } = render(
       <ConfigProvider direction="rtl">
         <Popover title="RTL" open>
           <span>show me your Rtl demo</span>
         </Popover>
       </ConfigProvider>,
     );
-    expect(Array.from(wrapper.container.children)).toMatchSnapshot();
+    expect(Array.from<Element>(container.children)).toMatchSnapshot();
+  });
+
+  it('should right work when content is null & title is null', () => {
+    expect(() => {
+      render(<InternalPanelDoNotUseOrYouWillBeFired content={null} title={null} trigger="click" />);
+    }).not.toThrow();
   });
 });

components/select/index.tsx

@@ -289,7 +289,6 @@ const InternalSelect = <
       listHeight={listHeight}
       listItemHeight={listItemHeight}
       mode={mode}
-      maxCount={isMultiple ? maxCount : undefined}
       prefixCls={prefixCls}
       placement={memoPlacement}
       direction={direction}
@@ -303,6 +302,7 @@ const InternalSelect = <
       dropdownClassName={mergedPopupClassName}
       disabled={mergedDisabled}
       dropdownStyle={{ ...dropdownStyle, zIndex }}
+      maxCount={isMultiple ? maxCount : undefined}
       tagRender={isMultiple ? tagRender : undefined}
     />,
   );

components/statistic/index.ts

@@ -13,4 +13,4 @@ export type CompoundedStatistic = typeof Statistic & CompoundedComponent;
 
 (Statistic as CompoundedStatistic).Countdown = Countdown;
 
-export default Statistic as CompoundedStatistic;
+export default (Statistic as CompoundedStatistic);

components/tag/CheckableTag.tsx

@@ -56,10 +56,7 @@ const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>((props
     <span
       {...restProps}
       ref={ref}
-      style={{
+      style={{ ...style, ...tag?.style }}
-        ...style,
-        ...tag?.style,
-      }}
       className={cls}
       onClick={handleClick}
     />,

components/timeline/useItems.ts

@@ -1,10 +1,12 @@
 import type * as React from 'react';
 import toArray from 'rc-util/lib/Children/toArray';
+
 import type { TimelineItemProps } from './TimelineItem';
 
 function useItems(items?: TimelineItemProps[], children?: React.ReactNode): TimelineItemProps[] {
-  if (items && Array.isArray(items)) return items;
+  if (items && Array.isArray(items)) {
-
+    return items;
+  }
   return toArray(children).map((ele: React.ReactElement<any>) => ({
     children: ele?.props?.children ?? '',
     ...ele.props,

components/typography/Base/index.tsx

@@ -451,7 +451,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
 
   // Copy
   const renderCopy = () => {
-    if (!enableCopy) return;
+    if (!enableCopy) {
+      return null;
+    }
 
     const { tooltips, icon } = copyConfig;
 
@@ -467,7 +469,10 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     return (
       <Tooltip key="copy" title={copyTitle}>
         <TransButton
-          className={classNames(`${prefixCls}-copy`, copied && `${prefixCls}-copy-success`)}
+          className={classNames(`${prefixCls}-copy`, {
+            [`${prefixCls}-copy-success`]: copied,
+            [`${prefixCls}-copy-icon-only`]: children === null || children === undefined,
+          })}
           onClick={onCopyClick}
           aria-label={ariaLabel}
         >

components/typography/demo/copyable.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+提供可复制的交互能力。
+
+## en-US
+
+Make Typography copyable.

components/typography/demo/copyable.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { SmileFilled, SmileOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+
+const { Paragraph, Text } = Typography;
+
+const App: React.FC = () => (
+  <>
+    <Paragraph copyable>This is a copyable text.</Paragraph>
+    <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
+    <Paragraph
+      copyable={{
+        icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />],
+        tooltips: ['click here', 'you clicked!!'],
+      }}
+    >
+      Custom Copy icon and replace tooltips text.
+    </Paragraph>
+    <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
+    <Text copyable />
+  </>
+);
+
+export default App;

components/typography/demo/editable.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+提供可编辑的交互能力。
+
+## en-US
+
+Make Typography editable.

components/typography/demo/editable.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
-import { CheckOutlined, HighlightOutlined, SmileFilled, SmileOutlined } from '@ant-design/icons';
+import { CheckOutlined, HighlightOutlined } from '@ant-design/icons';
-import { Divider, Radio, Typography } from 'antd';
+import { Radio, Typography } from 'antd';
 
 const { Paragraph } = Typography;
 
@@ -136,18 +136,6 @@ const App: React.FC = () => {
       <Typography.Title editable level={5} style={{ margin: 0 }}>
         h5. Ant Design
       </Typography.Title>
-      <Divider />
-      <Paragraph copyable>This is a copyable text.</Paragraph>
-      <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
-      <Paragraph
-        copyable={{
-          icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />],
-          tooltips: ['click here', 'you clicked!!'],
-        }}
-      >
-        Custom Copy icon and replace tooltips text.
-      </Paragraph>
-      <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
     </>
   );
 };

components/typography/demo/interactive.md

@@ -1,7 +0,0 @@
-## zh-CN
-
-提供可编辑和可复制等额外的交互能力。
-
-## en-US
-
-Provide additional interactive capacity of editable and copyable.

components/typography/index.en-US.md

@@ -20,7 +20,8 @@ Basic text writing, including headings, body text, lists, and more.
 <code src="./demo/title.tsx">Title Component</code>
 <code src="./demo/paragraph-debug.tsx" debug>Title and Paragraph</code>
 <code src="./demo/text.tsx">Text and Link Component</code>
-<code src="./demo/interactive.tsx">Interactive</code>
+<code src="./demo/editable.tsx">Editable</code>
+<code src="./demo/copyable.tsx">Copyable</code>
 <code src="./demo/ellipsis.tsx">Ellipsis</code>
 <code src="./demo/ellipsis-middle.tsx">Ellipsis from middle</code>
 <code src="./demo/ellipsis-debug.tsx" debug>Ellipsis Debug</code>

components/typography/index.zh-CN.md

@@ -21,7 +21,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 <code src="./demo/title.tsx">标题组件</code>
 <code src="./demo/paragraph-debug.tsx" debug>标题与段落</code>
 <code src="./demo/text.tsx">文本与超链接组件</code>
-<code src="./demo/interactive.tsx">可交互</code>
+<code src="./demo/editable.tsx">可编辑</code>
+<code src="./demo/copyable.tsx">可复制</code>
 <code src="./demo/ellipsis.tsx">省略号</code>
 <code src="./demo/ellipsis-middle.tsx">省略中间</code>
 <code src="./demo/ellipsis-debug.tsx" debug>省略号 Debug</code>

components/typography/style/mixins.ts

@@ -222,7 +222,7 @@ export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = (tok
 };
 
 export const getCopyableStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => ({
-  '&-copy-success': {
+  [`${token.componentCls}-copy-success`]: {
     [`
     &,
     &:hover,
@@ -230,6 +230,9 @@ export const getCopyableStyles: GenerateStyle<TypographyToken, CSSObject> = (tok
       color: token.colorSuccess,
     },
   },
+  [`${token.componentCls}-copy-icon-only`]: {
+    marginInlineStart: 0,
+  },
 });
 
 export const getEllipsisStyles = (): CSSObject => ({

docs/react/css-variables.en-US.md

@@ -71,4 +71,4 @@ With CSS variable mode, the method of modifying the theme is the same as before,
 | Properties | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | prefix | Prefix of CSS Variables | string | `ant` | 5.12.0 |
-| key | The unique key of theme. Automaticly set by `useId` in React 18, but need to be set manually in React 17 or 16 | string | `useId` in React 18 | 5.12.0 |
+| key | The unique key of theme. Automatically set by `useId` in React 18, but need to be set manually in React 17 or 16 | string | `useId` in React 18 | 5.12.0 |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.12.6",
+  "version": "5.12.7",
   "description": "An enterprise-class UI design language and React components implementation",
   "keywords": [
     "ant",
@@ -113,17 +113,16 @@
     "not dead"
   ],
   "dependencies": {
-    "@ant-design/colors": "^7.0.1",
+    "@ant-design/colors": "^7.0.2",
     "@ant-design/cssinjs": "^1.18.2",
     "@ant-design/icons": "^5.2.6",
     "@ant-design/react-slick": "~1.0.2",
-    "@babel/runtime": "^7.23.6",
+    "@ctrl/tinycolor": "^3.6.1",
-    "@ctrl/tinycolor": "^4.0.2",
+    "@rc-component/color-picker": "~1.5.1",
-    "@rc-component/color-picker": "~1.5.0",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/tour": "~1.12.0",
     "@rc-component/trigger": "^1.18.2",
-    "classnames": "^2.5.0",
+    "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
     "qrcode.react": "^3.1.0",
@@ -184,7 +183,7 @@
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/ali-oss": "^6.16.11",
     "@types/fs-extra": "^11.0.4",
     "@types/gtag.js": "^0.0.18",
@@ -199,7 +198,7 @@
     "@types/jsdom": "^21.1.6",
     "@types/lodash": "^4.14.202",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.10.6",
     "@types/nprogress": "^0.2.3",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
@@ -215,10 +214,10 @@
     "@types/tar": "^6.1.10",
     "@types/throttle-debounce": "^5.0.2",
     "@types/warning": "^3.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "ali-oss": "^6.19.0",
-    "antd-img-crop": "^4.18.0",
+    "antd-img-crop": "^4.21.0",
     "antd-style": "^3.6.1",
     "antd-token-previewer": "^2.0.5",
     "chalk": "^4.1.0",
@@ -237,7 +236,7 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-compat": "^4.2.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jest": "^27.6.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.1",
@@ -324,7 +323,7 @@
     "tar-fs": "^3.0.4",
     "terser": "^5.26.0",
     "tsx": "^4.7.0",
-    "typedoc": "^0.25.4",
+    "typedoc": "^0.25.6",
     "typescript": "~5.3.3",
     "vanilla-jsoneditor": "^0.21.1",
     "vanilla-tilt": "^1.8.1",

scripts/post-script.ts

@@ -53,6 +53,7 @@ const DEPRECIATED_VERSION = {
   '5.11.2': ['https://github.com/ant-design/ant-design/issues/46005'],
   '5.11.4': ['https://github.com/ant-design/ant-design/pull/46103'],
   '5.12.3': ['https://github.com/ant-design/ant-design/issues/46525'],
+  '5.12.6': ['https://github.com/ant-design/ant-design/issues/46719'],
 } as const;
 
 function matchDeprecated(v: string) {