Merge branch master into master-merge-feature

components/badge/Ribbon.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import type { PresetColorType } from '../_util/colors';
-import type { LiteralUnion } from '../_util/type';
-import useStyle from './style';
 import { isPresetColor } from '../_util/colors';
+import type { LiteralUnion } from '../_util/type';
+import { ConfigContext } from '../config-provider';
+import useStyle from './style';
 
 type RibbonPlacement = 'start' | 'end';
 
@@ -18,7 +18,8 @@ export interface RibbonProps {
   placement?: RibbonPlacement;
 }
 
-const Ribbon: React.FC<RibbonProps> = ({
+const Ribbon: React.FC<RibbonProps> = (props) => {
+  const {
     className,
     prefixCls: customizePrefixCls,
     style,
@@ -26,7 +27,7 @@ const Ribbon: React.FC<RibbonProps> = ({
     children,
     text,
     placement = 'end',
-}) => {
+  } = props;
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
   const colorInPreset = isPresetColor(color, false);

components/badge/ScrollNumber.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import { cloneElement } from '../_util/reactNode';
+import { ConfigContext } from '../config-provider';
 import SingleNumber from './SingleNumber';
 
 export interface ScrollNumberProps {
@@ -21,9 +21,8 @@ export interface ScrollNumberState {
   count?: string | number | null;
 }
 
-const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
+const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, ref) => {
-  (
+  const {
-    {
     prefixCls: customizePrefixCls,
     count,
     className,
@@ -34,9 +33,7 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
     component: Component = 'sup',
     children,
     ...restProps
-    },
+  } = props;
-    ref,
-  ) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
 
@@ -76,11 +73,7 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
   }
   if (children) {
     return cloneElement(children, (oriProps) => ({
-        className: classNames(
+      className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
-          `${prefixCls}-custom-component`,
-          oriProps?.className,
-          motionClassName,
-        ),
     }));
   }
 
@@ -89,7 +82,6 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
       {numberNodes}
     </Component>
   );
-  },
+});
-);
 
 export default ScrollNumber;

components/button/LoadingIcon.tsx

@@ -1,7 +1,7 @@
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import React, { forwardRef } from 'react';
-import classNames from 'classnames';
 import IconWrapper from './IconWrapper';
 
 type InnerLoadingIconProps = {
@@ -43,13 +43,8 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({
   transform: 'scale(1)',
 });
 
-const LoadingIcon: React.FC<LoadingIconProps> = ({
+const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
-  prefixCls,
+  const { prefixCls, loading, existIcon, className, style } = props;
-  loading,
-  existIcon,
-  className,
-  style,
-}) => {
   const visible = !!loading;
 
   if (existIcon) {

components/date-picker/__tests__/DatePicker.test.tsx

@@ -21,7 +21,7 @@ jest.mock('@rc-component/trigger', () => {
   const h: typeof React = jest.requireActual('react');
 
   return {
-    default: h.forwardRef<unknown, TriggerProps>((props, ref) => {
+    default: h.forwardRef<HTMLElement, TriggerProps>((props, ref) => {
       triggerProps = props;
       return h.createElement(Trigger, { ref, ...props });
     }),

components/descriptions/Cell.tsx

@@ -19,7 +19,8 @@ export interface CellProps {
   colon?: boolean;
 }
 
-const Cell: React.FC<CellProps> = ({
+const Cell: React.FC<CellProps> = (props) => {
+  const {
     itemPrefixCls,
     component,
     span,
@@ -31,7 +32,7 @@ const Cell: React.FC<CellProps> = ({
     label,
     content,
     colon,
-}) => {
+  } = props;
   const Component = component as any;
 
   if (bordered) {

components/descriptions/index.tsx

@@ -92,6 +92,10 @@ function getRows(children: React.ReactNode, column: number) {
   return rows;
 }
 
+interface CompoundedComponent {
+  Item: typeof DescriptionsItem;
+}
+
 export interface DescriptionsProps {
   prefixCls?: string;
   className?: string;
@@ -109,7 +113,8 @@ export interface DescriptionsProps {
   contentStyle?: React.CSSProperties;
 }
 
-function Descriptions({
+const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props) => {
+  const {
     prefixCls: customizePrefixCls,
     title,
     extra,
@@ -125,7 +130,7 @@ function Descriptions({
     labelStyle,
     contentStyle,
     ...restProps
-}: DescriptionsProps) {
+  } = props;
   const { getPrefixCls, direction, descriptions } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
   const [screens, setScreens] = React.useState<ScreenMap>({});
@@ -202,7 +207,7 @@ function Descriptions({
       </div>
     </DescriptionsContext.Provider>,
   );
-}
+};
 
 if (process.env.NODE_ENV !== 'production') {
   Descriptions.displayName = 'Descriptions';

components/dropdown/__tests__/index.test.tsx

@@ -15,7 +15,7 @@ jest.mock('@rc-component/trigger', () => {
   const h: typeof React = jest.requireActual('react');
 
   return {
-    default: h.forwardRef<unknown, TriggerProps>((props, ref) => {
+    default: h.forwardRef<HTMLElement, TriggerProps>((props, ref) => {
       triggerProps = props;
       return h.createElement(Trigger, { ref, ...props });
     }),

components/input/TextArea.tsx

@@ -29,9 +29,8 @@ export interface TextAreaRef {
   resizableTextArea?: RcTextAreaRef['resizableTextArea'];
 }
 
-const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
+const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
-  (
+  const {
-    {
     prefixCls: customizePrefixCls,
     bordered = true,
     size: customizeSize,
@@ -41,9 +40,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
     showCount,
     classNames: classes,
     ...rest
-    },
+  } = props;
-    ref,
-  ) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
   // ===================== Size =====================
@@ -118,14 +115,11 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
         ),
       }}
       prefixCls={prefixCls}
-        suffix={
+      suffix={hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
-          hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>
-        }
       showCount={showCount}
       ref={innerRef}
     />,
   );
-  },
+});
-);
 
 export default TextArea;

components/modal/demo/modal-render.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, useState } from 'react';
 import { Button, Modal } from 'antd';
+import React, { useRef, useState } from 'react';
 import type { DraggableData, DraggableEvent } from 'react-draggable';
 import Draggable from 'react-draggable';
 
@@ -71,6 +71,7 @@ const App: React.FC = () => {
           <Draggable
             disabled={disabled}
             bounds={bounds}
+            nodeRef={draggleRef}
             onStart={(event, uiData) => onStart(event, uiData)}
           >
             <div ref={draggleRef}>{modal}</div>

components/popconfirm/index.tsx

@@ -9,7 +9,7 @@ import { cloneElement } from '../_util/reactNode';
 import type { ButtonProps, LegacyButtonType } from '../button/button';
 import { ConfigContext } from '../config-provider';
 import Popover from '../popover';
-import type { AbstractTooltipProps } from '../tooltip';
+import type { AbstractTooltipProps, TooltipRef } from '../tooltip';
 import PurePanel, { Overlay } from './PurePanel';
 import usePopconfirmStyle from './style';
 
@@ -37,7 +37,7 @@ export interface PopconfirmState {
   open?: boolean;
 }
 
-const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
+const Popconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
     placement = 'top',

components/popover/PurePanel.tsx

@@ -25,7 +25,11 @@ export interface PurePanelProps extends Omit<PopoverProps, 'children'> {
   children?: React.ReactNode;
 }
 
-export function RawPurePanel(props: any) {
+interface RawPurePanelProps extends PopoverProps {
+  hashId: string;
+}
+
+export const RawPurePanel: React.FC<RawPurePanelProps> = (props) => {
   const {
     hashId,
     prefixCls,
@@ -50,13 +54,13 @@ export function RawPurePanel(props: any) {
     >
       <div className={`${prefixCls}-arrow`} />
       <Popup {...props} className={hashId} prefixCls={prefixCls}>
-        {children || getOverlay(prefixCls, title, content)}
+        {children || getOverlay(prefixCls!, title, content)}
       </Popup>
     </div>
   );
-}
+};
 
-export default function PurePanel(props: any) {
+const PurePanel: React.FC<PurePanelProps> = (props) => {
   const { prefixCls: customizePrefixCls, ...restProps } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
 
@@ -64,4 +68,6 @@ export default function PurePanel(props: any) {
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   return wrapSSR(<RawPurePanel {...restProps} prefixCls={prefixCls} hashId={hashId} />);
-}
+};
+
+export default PurePanel;

components/popover/index.tsx

@@ -4,7 +4,7 @@ import type { RenderFunction } from '../_util/getRenderPropValue';
 import { getRenderPropValue } from '../_util/getRenderPropValue';
 import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
-import type { AbstractTooltipProps } from '../tooltip';
+import type { AbstractTooltipProps, TooltipRef } from '../tooltip';
 import Tooltip from '../tooltip';
 import PurePanel from './PurePanel';
 // CSSINJS
@@ -28,7 +28,7 @@ const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => (
   </>
 );
 
-const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
+const Popover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
     title,

components/tooltip/index.tsx

@@ -10,6 +10,7 @@ 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';
 import type { AdjustOverflow, PlacementsConfig } from '../_util/placements';
 import getPlacements from '../_util/placements';
@@ -110,8 +111,6 @@ export interface AbstractTooltipProps extends LegacyTooltipProps {
   destroyTooltipOnHide?: boolean | { keepParent?: boolean };
 }
 
-export type RenderFunction = () => React.ReactNode;
-
 export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
   title?: React.ReactNode | RenderFunction;
   overlay?: React.ReactNode | RenderFunction;

package.json

@@ -291,7 +291,7 @@
     "stylelint": "^15.1.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^34.0.0",
-    "stylelint-prettier": "^3.0.0",
+    "stylelint-prettier": "^4.0.0",
     "sylvanas": "^0.6.1",
     "terser": "^5.16.1",
     "ts-node": "^10.8.2",

tests/__mocks__/@rc-component/trigger.tsx

@@ -1,4 +1,4 @@
-import type { TriggerProps } from '@rc-component/trigger';
+import type { TriggerProps, TriggerRef } from '@rc-component/trigger';
 import MockTrigger from '@rc-component/trigger/lib/mock';
 import * as React from 'react';
 import { TriggerMockContext } from '../../shared/demoTestContext';
@@ -6,22 +6,21 @@ import { TriggerMockContext } from '../../shared/demoTestContext';
 let OriginTrigger = jest.requireActual('@rc-component/trigger');
 OriginTrigger = OriginTrigger.default ?? OriginTrigger;
 
-const ForwardTrigger = React.forwardRef<any, TriggerProps>((props, ref) => {
+const ForwardTrigger = React.forwardRef<TriggerRef, TriggerProps>((props, ref) => {
   const context = React.useContext(TriggerMockContext);
 
   const mergedPopupVisible = context?.popupVisible ?? props.popupVisible;
   (global as any).triggerProps = props;
 
-  const mergedProps = {
+  const mergedProps: TriggerProps = {
     ...props,
-    ref,
+    popupVisible: mergedPopupVisible,
-    popupVisible: mergedPopupVisible as boolean,
   };
 
   if (context?.mock === false) {
-    return <OriginTrigger {...mergedProps} />;
+    return <OriginTrigger ref={ref} {...mergedProps} />;
   }
-  return <MockTrigger {...mergedProps} />;
+  return <MockTrigger ref={ref} {...mergedProps} />;
 });
 
 export default ForwardTrigger;