chore: auto merge branches (#52177)

chore: sync master to feature

CHANGELOG.en-US.md

@@ -15,6 +15,15 @@ tag: vVERSION
 
 ---
 
+## 5.22.7
+
+`2024-12-27`
+
+- 🐞 Fix Button text and icon not align. [#52132](https://github.com/ant-design/ant-design/pull/52132) [@afc163](https://github.com/afc163)
+- 🐞 Fix Button throws `reactRender is not a function` under React 19. [#52105](https://github.com/ant-design/ant-design/pull/52105) [@afc163](https://github.com/afc163)
+- TypeScript
+  - 🤖 Fix Menu interface type error from external module. [#51715](https://github.com/ant-design/ant-design/pull/51715) [@msyavuz](https://github.com/msyavuz)
+
 ## 5.22.6
 
 `2024-12-23`

CHANGELOG.zh-CN.md

@@ -15,6 +15,15 @@ tag: vVERSION
 
 ---
 
+## 5.22.7
+
+`2024-12-27`
+
+- 🐞 修复 Button 文字和图标不对齐的问题。[#52132](https://github.com/ant-design/ant-design/pull/52132) [@afc163](https://github.com/afc163)
+- 🐞 修复在 React 19 下点击 Button 时抛出 `reactRender is not a function` 错误的问题。[#52105](https://github.com/ant-design/ant-design/pull/52105) [@afc163](https://github.com/afc163)
+- TypeScript
+  - 🤖 修复 Menu `component` 属性类型抛错。[#51715](https://github.com/ant-design/ant-design/pull/51715) [@msyavuz](https://github.com/msyavuz)
+
 ## 5.22.6
 
 `2024-12-23`

components/_util/PurePanel.tsx

@@ -20,9 +20,10 @@ export interface BaseProps {
 /* istanbul ignore next */
 const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
   Component: any,
-  defaultPrefixCls?: string,
+  alignPropName?: 'align' | 'dropdownAlign' | 'popupAlign',
-  getDropdownCls?: null | ((prefixCls: string) => string),
   postProps?: (props: ComponentProps) => ComponentProps,
+  defaultPrefixCls?: string,
+  getDropdownCls?: (prefixCls: string) => string,
 ) => {
   type WrapProps = ComponentProps & AnyObject;
 
@@ -55,7 +56,6 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
             ? `.${getDropdownCls(prefixCls)}`
             : `.${prefixCls}-dropdown`;
           const popup = holderRef.current?.querySelector(dropdownCls);
-
           if (popup) {
             clearInterval(interval);
             resizeObserver.observe(popup);
@@ -83,6 +83,16 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
     if (postProps) {
       mergedProps = postProps(mergedProps);
     }
+    if (alignPropName) {
+      Object.assign(mergedProps, {
+        [alignPropName]: {
+          overflow: {
+            adjustX: false,
+            adjustY: false,
+          },
+        },
+      });
+    }
     const mergedStyle: React.CSSProperties = {
       paddingBottom: popupHeight,
       position: 'relative',

components/auto-complete/index.tsx

@@ -170,7 +170,7 @@ const RefAutoComplete = React.forwardRef<RefSelectProps, AutoCompleteProps>(
 
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(RefAutoComplete, undefined, undefined, (props: any) =>
+const PurePanel = genPurePanel(RefAutoComplete, 'dropdownAlign', (props: any) =>
   omit(props, ['visible']),
 );
 

components/cascader/index.tsx

@@ -370,9 +370,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(Cascader, undefined, undefined, (props: any) =>
+const PurePanel = genPurePanel(Cascader, 'dropdownAlign', (props: any) => omit(props, ['visible']));
-  omit(props, ['visible']),
-);
 
 Cascader.SHOW_PARENT = SHOW_PARENT;
 Cascader.SHOW_CHILD = SHOW_CHILD;

components/color-picker/ColorPicker.tsx

@@ -280,14 +280,15 @@ if (process.env.NODE_ENV !== 'production') {
 
 const PurePanel = genPurePanel(
   ColorPicker,
-  'color-picker',
+  undefined,
-  /* istanbul ignore next */
-  (prefixCls) => prefixCls,
   (props: ColorPickerProps) => ({
     ...props,
     placement: 'bottom' as TriggerPlacement,
     autoAdjustOverflow: false,
   }),
+  'color-picker',
+  /* istanbul ignore next */
+  (prefixCls) => prefixCls,
 );
 
 ColorPicker._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;

components/config-provider/UnstableContext.tsx

@@ -15,13 +15,10 @@ const defaultReactRender: RenderType = (node, container) => {
   // Warning for React 19
   if (process.env.NODE_ENV !== 'production') {
     const majorVersion = parseInt(React.version.split('.')[0], 10);
+    const fullKeys = Object.keys(ReactDOM);
+
     warning(
-      majorVersion < 19 ||
+      majorVersion < 19 || fullKeys.includes('createRoot'),
-        !!(
-          ReactDOM as typeof ReactDOM & {
-            createRoot: VoidFunction;
-          }
-        ).createRoot,
       'compatible',
       'antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.',
     );

components/date-picker/index.tsx

@@ -31,9 +31,9 @@ export type DatePickerType = typeof DatePicker & {
 
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(DatePicker, 'picker', null);
+const PurePanel = genPurePanel(DatePicker, 'popupAlign', undefined, 'picker');
 (DatePicker as DatePickerType)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
-const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker', null);
+const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'popupAlign', undefined, 'picker');
 (DatePicker as DatePickerType)._InternalRangePanelDoNotUseOrYouWillBeFired = PureRangePanel;
 (DatePicker as DatePickerType).generatePicker = generatePicker;
 

components/dropdown/dropdown.tsx

@@ -315,20 +315,8 @@ const Dropdown: CompoundedComponent = (props) => {
   return wrapCSSVar(renderNode);
 };
 
-function postPureProps(props: DropdownProps) {
-  return {
-    ...props,
-    align: {
-      overflow: {
-        adjustX: false,
-        adjustY: false,
-      },
-    },
-  };
-}
-
 // We don't care debug panel
-const PurePanel = genPurePanel(Dropdown, 'dropdown', (prefixCls) => prefixCls, postPureProps);
+const PurePanel = genPurePanel(Dropdown, 'align', undefined, 'dropdown', (prefixCls) => prefixCls);
 
 /* istanbul ignore next */
 const WrapPurePanel: React.FC<DropdownProps> = (props) => (

components/flex/style/index.ts

@@ -37,6 +37,8 @@ const genFlexStyle: GenerateStyle<FlexToken> = (token) => {
   return {
     [componentCls]: {
       display: 'flex',
+      margin: 0,
+      padding: 0,
       '&-vertical': {
         flexDirection: 'column',
       },

components/input/index.en-US.md

@@ -158,13 +158,13 @@ Added in `5.16.0`.
 | blur | Remove focus | - |  |
 | focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
 
-### Semantic DOM
+## Semantic DOM
 
-#### Input
+### Input
 
 <code src="./demo/_semantic_input.tsx" simplify="true"></code>
 
-#### Input.TextArea
+### Input.TextArea
 
 <code src="./demo/_semantic_textarea.tsx" simplify="true"></code>
 

components/input/index.zh-CN.md

@@ -159,13 +159,13 @@ interface CountConfig {
 | blur | 取消焦点 | - |  |
 | focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
 
-### Semantic DOM
+## Semantic DOM
 
-#### Input
+### Input
 
 <code src="./demo/_semantic_input.tsx" simplify="true"></code>
 
-#### Input.TextArea
+### Input.TextArea
 
 <code src="./demo/_semantic_textarea.tsx" simplify="true"></code>
 

components/mentions/index.tsx

@@ -232,7 +232,7 @@ Mentions.Option = Option;
 
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(Mentions, 'mentions');
+const PurePanel = genPurePanel(Mentions, undefined, undefined, 'mentions');
 Mentions._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
 Mentions.getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[] => {

components/select/index.tsx

@@ -331,7 +331,7 @@ const Select = React.forwardRef(InternalSelect) as unknown as (<
 
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(Select);
+const PurePanel = genPurePanel(Select, 'dropdownAlign');
 
 Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
 Select.Option = Option;

components/time-picker/index.tsx

@@ -85,7 +85,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(TimePicker, 'picker');
+const PurePanel = genPurePanel(TimePicker, 'popupAlign', undefined, 'picker');
 (TimePicker as MergedTimePicker)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
 type MergedTimePicker = typeof TimePicker & {

components/tree-select/index.tsx

@@ -354,7 +354,7 @@ const TreeSelect = TreeSelectRef as CompoundedComponent;
 
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(TreeSelect, undefined, undefined, (props: any) =>
+const PurePanel = genPurePanel(TreeSelect, 'dropdownAlign', (props: any) =>
   omit(props, ['visible']),
 );
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.22.6",
+  "version": "5.22.7",
   "description": "An enterprise-class UI design language and React components implementation",
   "license": "MIT",
   "funding": {
@@ -351,4 +351,4 @@
   "resolutions": {
     "nwsapi": "2.2.13"
   }
-}
+}