chore: rename file .tsx => .ts (#46759)

* chore: rename file .tsx => .ts

* fix: fix

* test: add test case

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/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/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,