Merge pull request ant-design#44682 from ant-design/master

chore: merge master into feature

.dumi/pages/index/components/Theme/index.tsx

@@ -44,7 +44,7 @@ import ThemePicker from './ThemePicker';
 
 const { Header, Content, Sider } = Layout;
 
-const TokenChecker = () => {
+const TokenChecker: React.FC = () => {
   if (process.env.NODE_ENV !== 'production') {
     console.log('Demo Token:', theme.useToken());
   }

components/color-picker/ColorPicker.tsx

@@ -17,7 +17,7 @@ import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext, NoFormStyle } from '../form/context';
 import type { PopoverProps } from '../popover';
 import Popover from '../popover';
-import theme from '../theme';
+import { useToken } from '../theme/internal';
 import type { Color } from './color';
 import ColorPickerPanel from './ColorPickerPanel';
 import ColorTrigger from './components/ColorTrigger';
@@ -103,7 +103,7 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   const { getPrefixCls, direction, colorPicker } = useContext<ConfigConsumerProps>(ConfigContext);
 
-  const { token } = theme.useToken();
+  const [, token] = useToken();
 
   const [colorValue, setColorValue] = useColorState(token.colorPrimary, {
     value,

components/color-picker/components/ColorPresets.tsx

@@ -1,12 +1,13 @@
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
 import { ColorBlock, Color as RcColor } from '@rc-component/color-picker';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import type { FC } from 'react';
-import React, { useMemo } from 'react';
+
 import type { CollapseProps } from '../../collapse';
 import Collapse from '../../collapse';
 import { useLocale } from '../../locale';
-import theme from '../../theme';
+import { useToken } from '../../theme/internal';
 import type { Color } from '../color';
 import type { ColorPickerBaseProps, PresetsItem } from '../interface';
 import { generateColor } from '../util';
@@ -35,9 +36,7 @@ const isBright = (value: Color, bgColorToken: string) => {
 
 const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color, onChange }) => {
   const [locale] = useLocale('ColorPicker');
-  const {
-    token: { colorBgElevated },
-  } = theme.useToken();
+  const [, token] = useToken();
   const [presetsValue] = useMergedState(genPresetColor(presets), {
     value: genPresetColor(presets),
     postState: genPresetColor,
@@ -68,7 +67,10 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
               className={classNames(`${colorPresetsPrefixCls}-color`, {
                 [`${colorPresetsPrefixCls}-color-checked`]:
                   presetColor.toHexString() === color?.toHexString(),
-                [`${colorPresetsPrefixCls}-color-bright`]: isBright(presetColor, colorBgElevated),
+                [`${colorPresetsPrefixCls}-color-bright`]: isBright(
+                  presetColor,
+                  token.colorBgElevated,
+                ),
               })}
               onClick={() => handleClick(presetColor)}
             />

components/dropdown/dropdown.tsx

@@ -1,21 +1,22 @@
+import * as React from 'react';
 import RightOutlined from '@ant-design/icons/RightOutlined';
+import type { AlignType } from '@rc-component/trigger';
 import classNames from 'classnames';
 import RcDropdown from 'rc-dropdown';
 import { useEvent } from 'rc-util';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import omit from 'rc-util/lib/omit';
-import type { AlignType } from '@rc-component/trigger';
-import * as React from 'react';
-import genPurePanel from '../_util/PurePanel';
+
 import type { AdjustOverflow } from '../_util/placements';
 import getPlacements from '../_util/placements';
+import genPurePanel from '../_util/PurePanel';
 import { cloneElement } from '../_util/reactNode';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { MenuProps } from '../menu';
 import Menu from '../menu';
 import { OverrideProvider } from '../menu/OverrideContext';
-import theme from '../theme';
+import { useToken } from '../theme/internal';
 import useStyle from './style';
 
 const Placements = [
@@ -173,7 +174,7 @@ const Dropdown: CompoundedComponent = (props) => {
   const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
-  const { token } = theme.useToken();
+  const [, token] = useToken();
 
   const child = React.Children.only(children) as React.ReactElement<any>;
 

components/input/style/index.ts

@@ -843,6 +843,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
             borderStartEndRadius: token.borderRadius,
             borderEndEndRadius: token.borderRadius,
             borderEndStartRadius: 0,
+            boxShadow: 'none',
           },
 
           [`${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {

components/popconfirm/style/index.tsx

@@ -86,4 +86,7 @@ export default genComponentStyleHook(
       zIndexPopup: zIndexPopupBase + 60,
     };
   },
+  {
+    resetStyle: false,
+  },
 );

components/popover/style/index.tsx

@@ -200,6 +200,7 @@ export default genComponentStyleHook(
     zIndexPopup: token.zIndexPopupBase + 30,
   }),
   {
+    resetStyle: false,
     deprecatedTokens: [['width', 'minWidth']],
   },
 );

components/qr-code/index.tsx

@@ -1,21 +1,20 @@
+import React, { useContext } from 'react';
 import ReloadOutlined from '@ant-design/icons/ReloadOutlined';
 import classNames from 'classnames';
 import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
-import React, { useContext } from 'react';
+
 import warning from '../_util/warning';
 import Button from '../button';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import { useLocale } from '../locale';
 import Spin from '../spin';
-import theme from '../theme';
+import { useToken } from '../theme/internal';
 import type { QRCodeProps, QRProps } from './interface';
 import useStyle from './style/index';
 
-const { useToken } = theme;
-
 const QRCode: React.FC<QRCodeProps> = (props) => {
-  const { token } = useToken();
+  const [, token] = useToken();
   const {
     value,
     type = 'canvas',

components/tooltip/index.tsx

@@ -1,14 +1,15 @@
+import type { CSSProperties } from 'react';
+import * as React from 'react';
 import type { BuildInPlacements } from '@rc-component/trigger';
 import classNames from 'classnames';
 import RcTooltip from 'rc-tooltip';
+import type { placements as Placements } from 'rc-tooltip/lib/placements';
 import type {
   TooltipProps as RcTooltipProps,
   TooltipRef as RcTooltipRef,
 } from 'rc-tooltip/lib/Tooltip';
-import type { placements as Placements } from 'rc-tooltip/lib/placements';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import type { CSSProperties } from 'react';
-import * as React from 'react';
+
 import type { PresetColorType } from '../_util/colors';
 import type { RenderFunction } from '../_util/getRenderPropValue';
 import { getTransitionName } from '../_util/motion';
@@ -19,13 +20,11 @@ import type { LiteralUnion } from '../_util/type';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import { NoCompactStyle } from '../space/Compact';
-import theme from '../theme';
+import { useToken } from '../theme/internal';
 import PurePanel from './PurePanel';
 import useStyle from './style';
 import { parseColor } from './util';
 
-const { useToken } = theme;
-
 export type { AdjustOverflow, PlacementsConfig };
 
 export interface TooltipRef {
@@ -208,7 +207,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
 
   const mergedShowArrow = !!arrow;
 
-  const { token } = useToken();
+  const [, token] = useToken();
 
   const {
     getPopupContainer: getContextPopupContainer,

components/tour/index.tsx

@@ -1,13 +1,14 @@
+import React, { useContext } from 'react';
 import RCTour from '@rc-component/tour';
 import classNames from 'classnames';
-import React, { useContext } from 'react';
+
 import getPlacements from '../_util/placements';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
-import theme from '../theme';
-import PurePanel from './PurePanel';
+import { useToken } from '../theme/internal';
 import type { TourProps, TourStepProps } from './interface';
 import TourPanel from './panelRender';
+import PurePanel from './PurePanel';
 import useStyle from './style';
 import useMergedType from './useMergedType';
 
@@ -27,7 +28,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
   const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('tour', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const { token } = theme.useToken();
+  const [, token] = useToken();
 
   const { currentMergedType, updateInnerCurrent } = useMergedType({
     defaultType: type,

components/transfer/demo/tree-transfer.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Transfer, Tree, theme } from 'antd';
+import { theme, Transfer, Tree } from 'antd';
 import type { TransferDirection, TransferItem } from 'antd/es/transfer';
 import type { DataNode } from 'antd/es/tree';
 
@@ -20,7 +20,7 @@ const generateTree = (treeNodes: DataNode[] = [], checkedKeys: string[] = []): D
     children: generateTree(children, checkedKeys),
   }));
 
-const TreeTransfer = ({ dataSource, targetKeys, ...restProps }: TreeTransferProps) => {
+const TreeTransfer: React.FC<TreeTransferProps> = ({ dataSource, targetKeys, ...restProps }) => {
   const { token } = theme.useToken();
 
   const transferDataSource: TransferItem[] = [];

components/watermark/index.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react';
-
 import { useMutateObserver } from '@rc-component/mutate-observer';
 import classNames from 'classnames';
 
-import theme from '../theme';
+import { useToken } from '../theme/internal';
 import WatermarkContext from './context';
 import type { WatermarkContextProps } from './context';
 import useClips, { FontGap } from './useClips';
@@ -61,7 +60,7 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
     offset,
     children,
   } = props;
-  const { token } = theme.useToken();
+  const [, token] = useToken();
   const {
     color = token.colorFill,
     fontSize = token.fontSizeLG,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.8.6",
+  "version": "5.9.0",
   "packageManager": "^[email protected]",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
@@ -175,9 +175,9 @@
     "@emotion/server": "^11.4.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@qixian.cs/github-contributors-list": "^1.1.0",
-    "@size-limit/file": "^8.1.0",
+    "@size-limit/file": "^9.0.0",
     "@stackblitz/sdk": "^1.3.0",
-    "@swc/core": "^1.3.50",
+    "@swc/core": "1.3.82",
     "@swc/helpers": "^0.5.0",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^6.0.0",
@@ -292,7 +292,7 @@
     "remark-preset-lint-recommended": "^6.0.0",
     "semver": "^7.3.5",
     "simple-git": "^3.0.0",
-    "size-limit": "^8.1.0",
+    "size-limit": "^9.0.0",
     "stylelint": "^15.1.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^34.0.0",

scripts/pre-publish-notice.js

@@ -2,8 +2,8 @@ const { Notification } = require('node-notifier');
 
 new Notification().notify({
   title: '✅ 准备发布到 npm',
-  message: '测试用例执行完毕，马上就要输入 npm 校验码了！',
-  sound: true,
+  message: '测试用例执行完毕，快回来输入 npm 校验码了！',
+  sound: 'Crystal',
 });
 
 process.exit(0);