chore: Compatible for @types/react@18 (#34937)

* chore: bump types def

* chore: part ts def

* chore: part ts def

* chore: part ts def

* chore: part ts def

* chore: part ts def

* chore: part ts def

* chore: part ts def

* chore: part ts def

* chore: part ts def

* chore: part ts def

* chore: free --legacy-peer-deps

* chore: ignore peer

* chore: fix ts logic

* chore: use fork docsearch

* chore: fix demo ts

.github/workflows/test.yml

@@ -40,7 +40,7 @@ jobs:
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci --force
+        run: npm ci
 
   lint:
     runs-on: ubuntu-latest

components/_util/ActionButton.tsx

@@ -12,6 +12,7 @@ export interface ActionButtonProps {
   buttonProps?: ButtonProps;
   emitEvent?: boolean;
   quitOnNullishReturnValue?: boolean;
+  children?: React.ReactNode;
 }
 
 function isThenable(thing?: PromiseLike<any>): boolean {

components/_util/wave.tsx

@@ -27,6 +27,7 @@ function isNotGrey(color: string) {
 export interface WaveProps {
   insertExtraNode?: boolean;
   disabled?: boolean;
+  children?: React.ReactNode;
 }
 
 export default class Wave extends React.Component<WaveProps> {

components/alert/ErrorBoundary.tsx

@@ -4,6 +4,7 @@ import Alert from '.';
 interface ErrorBoundaryProps {
   message?: React.ReactNode;
   description?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export default class ErrorBoundary extends React.Component<

components/anchor/Anchor.tsx

@@ -98,7 +98,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
     activeLink: null,
   };
 
-  content: ConfigConsumerProps;
+  context: ConfigConsumerProps;
 
   private wrapperRef = React.createRef<HTMLDivElement>();
 

components/avatar/SizeContext.tsx

@@ -7,6 +7,7 @@ const SizeContext = React.createContext<AvatarSize>('default');
 
 export interface SizeContextProps {
   size?: AvatarSize;
+  children?: React.ReactNode;
 }
 
 export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (

components/badge/index.tsx

@@ -34,6 +34,7 @@ export interface BadgeProps {
   size?: 'default' | 'small';
   offset?: [number | string, number | string];
   title?: string;
+  children?: React.ReactNode;
 }
 
 const Badge: CompoundedComponent = ({

components/breadcrumb/Breadcrumb.tsx

@@ -27,6 +27,7 @@ export interface BreadcrumbProps {
   ) => React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
+  children?: React.ReactNode;
 }
 
 function getBreadcrumbName(route: Route, params: any) {

components/breadcrumb/BreadcrumbItem.tsx

@@ -12,6 +12,7 @@ export interface BreadcrumbItemProps {
   dropdownProps?: DropDownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
   className?: string;
+  children?: React.ReactNode;
 }
 interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
   __ANT_BREADCRUMB_ITEM: boolean;

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 
-interface BreadcrumbSeparatorInterface extends React.FC {
+interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
   __ANT_BREADCRUMB_SEPARATOR: boolean;
 }
 

components/button/button-group.tsx

@@ -9,6 +9,7 @@ export interface ButtonGroupProps {
   style?: React.CSSProperties;
   className?: string;
   prefixCls?: string;
+  children?: React.ReactNode;
 }
 
 const ButtonGroup: React.FC<ButtonGroupProps> = props => (

components/collapse/Collapse.tsx

@@ -28,6 +28,7 @@ export interface CollapseProps {
   expandIconPosition?: ExpandIconPosition;
   ghost?: boolean;
   collapsible?: CollapsibleType;
+  children?: React.ReactNode;
 }
 
 interface PanelProps {

components/config-provider/SizeContext.tsx

@@ -6,6 +6,7 @@ const SizeContext = React.createContext<SizeType>(undefined);
 
 export interface SizeContextProps {
   size?: SizeType;
+  children?: React.ReactNode;
 }
 
 export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (

components/dropdown/dropdown.tsx

@@ -61,6 +61,7 @@ export interface DropDownProps {
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
   openClassName?: string;
+  children?: React.ReactNode;
 }
 
 interface DropdownInterface extends React.FC<DropDownProps> {

components/form/FormItem.tsx

@@ -427,7 +427,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
             'Form.Item',
             '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.',
           );
-          childNode = children;
+          childNode = children as React.ReactNode;
         }
 
         return renderLayout(childNode, fieldId, isRequired);

components/list/index.tsx

@@ -53,7 +53,7 @@ export interface ListProps<T> {
 }
 
 export interface ListLocale {
-  emptyText: React.ReactNode | (() => React.ReactNode);
+  emptyText: React.ReactNode;
 }
 
 export interface ListConsumerProps {

components/locale-provider/LocaleReceiver.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import defaultLocaleData from './default';
 import LocaleContext from './context';
+import type { LocaleContextProps } from './context';
 import { Locale } from '.';
 
 export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;
@@ -8,11 +9,7 @@ export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;
 export interface LocaleReceiverProps<C extends LocaleComponentName = LocaleComponentName> {
   componentName: C;
   defaultLocale?: Locale[C] | (() => Locale[C]);
-  children: (
+  children: (locale: Locale[C], localeCode?: string, fullLocale?: object) => React.ReactNode;
-    locale: Exclude<Locale[C], undefined>,
-    localeCode?: string,
-    fullLocale?: object,
-  ) => React.ReactNode;
 }
 
 export default class LocaleReceiver<
@@ -24,7 +21,9 @@ export default class LocaleReceiver<
 
   static contextType = LocaleContext;
 
-  getLocale(): Exclude<Locale[C], undefined> {
+  context: LocaleContextProps;
+
+  getLocale(): Locale[C] {
     const { componentName, defaultLocale } = this.props;
     const locale = defaultLocale || defaultLocaleData[componentName ?? 'global'];
     const antLocale = this.context;

components/locale-provider/context.ts

@@ -1,6 +1,8 @@
 import { createContext } from 'react';
 import { Locale } from '.';
 
-const LocaleContext = createContext<(Partial<Locale> & { exist?: boolean }) | undefined>(undefined);
+export type LocaleContextProps = Partial<Locale> & { exist?: boolean };
+
+const LocaleContext = createContext<LocaleContextProps | undefined>(undefined);
 
 export default LocaleContext;

components/menu/index.tsx

@@ -111,9 +111,13 @@ function InternalMenu(props: InternalMenuProps) {
         prefixCls={prefixCls}
         direction={direction}
         defaultMotions={defaultMotions}
-        expandIcon={cloneElement(expandIcon, {
+        expandIcon={
-          className: `${prefixCls}-submenu-expand-icon`,
+          typeof expandIcon === 'function'
-        })}
+            ? expandIcon
+            : cloneElement(expandIcon, {
+                className: `${prefixCls}-submenu-expand-icon`,
+              })
+        }
       />
     </MenuContext.Provider>
   );

components/message/index.tsx

@@ -132,9 +132,9 @@ export type NoticeType = keyof typeof typeToIcon;
 export const typeList = Object.keys(typeToIcon) as NoticeType[];
 
 export interface ArgsProps {
-  content: React.ReactNode;
+  content: any;
   duration?: number;
-  type: NoticeType;
+  type?: NoticeType;
   prefixCls?: string;
   rootPrefixCls?: string;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
@@ -152,7 +152,7 @@ function getRCNoticeProps(
   iconPrefixCls?: string,
 ): NoticeContent {
   const duration = args.duration !== undefined ? args.duration : defaultDuration;
-  const IconComponent = typeToIcon[args.type];
+  const IconComponent = typeToIcon[args.type!];
   const messageClass = classNames(`${prefixCls}-custom-content`, {
     [`${prefixCls}-${args.type}`]: args.type,
     [`${prefixCls}-rtl`]: rtl === true,

components/modal/Modal.tsx

@@ -81,6 +81,7 @@ export interface ModalProps {
   closeIcon?: React.ReactNode;
   modalRender?: (node: React.ReactNode) => React.ReactNode;
   focusTriggerAfterClose?: boolean;
+  children?: React.ReactNode;
 }
 
 type getContainerFunc = () => HTMLElement;

components/page-header/index.tsx

@@ -27,6 +27,7 @@ export interface PageHeaderProps {
   onBack?: (e?: React.MouseEvent<HTMLDivElement>) => void;
   className?: string;
   ghost?: boolean;
+  children?: React.ReactNode;
 }
 
 const renderBack = (

components/progress/progress.tsx

@@ -49,6 +49,7 @@ export interface ProgressProps {
   steps?: number;
   /** @deprecated Use `success` instead */
   successPercent?: number;
+  children?: React.ReactNode;
 }
 
 export default class Progress extends React.Component<ProgressProps> {

components/result/index.tsx

@@ -37,6 +37,7 @@ export interface ResultProps {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
+  children?: React.ReactNode;
 }
 
 // ExceptionImageMap keys
@@ -76,9 +77,9 @@ const renderExtra = (prefixCls: string, { extra }: ResultProps) =>
   extra && <div className={`${prefixCls}-extra`}>{extra}</div>;
 
 export interface ResultType extends React.FC<ResultProps> {
-  PRESENTED_IMAGE_404: React.ReactNode;
+  PRESENTED_IMAGE_404: React.FC;
-  PRESENTED_IMAGE_403: React.ReactNode;
+  PRESENTED_IMAGE_403: React.FC;
-  PRESENTED_IMAGE_500: React.ReactNode;
+  PRESENTED_IMAGE_500: React.FC;
 }
 
 const Result: ResultType = ({

components/select/utils/iconUtil.tsx

@@ -9,6 +9,8 @@ import SearchOutlined from '@ant-design/icons/SearchOutlined';
 import { ValidateStatus } from '../../form/FormItem';
 import { getFeedbackIcon } from '../../_util/statusUtils';
 
+type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
+
 export default function getIcons({
   suffixIcon,
   clearIcon,
@@ -22,9 +24,9 @@ export default function getIcons({
   showArrow,
 }: {
   suffixIcon?: React.ReactNode;
-  clearIcon?: React.ReactNode;
+  clearIcon?: RenderNode;
-  menuItemSelectedIcon?: React.ReactNode;
+  menuItemSelectedIcon?: RenderNode;
-  removeIcon?: React.ReactNode;
+  removeIcon?: RenderNode;
   loading?: boolean;
   multiple?: boolean;
   hasFeedback?: boolean;

components/spin/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 A simple loading status.
 
-```jsx
+```tsx
 import { Spin } from 'antd';
 
 export default () => <Spin />;

components/spin/demo/inside.md

@@ -13,7 +13,7 @@ title:
 
 Spin in a container.
 
-```jsx
+```tsx
 import { Spin } from 'antd';
 
 export default () => (

components/spin/demo/nested.md

@@ -13,13 +13,13 @@ title:
 
 Embedding content into `Spin` will set it into loading state.
 
-```jsx
+```tsx
 import { Spin, Switch, Alert } from 'antd';
 
 class Card extends React.Component {
   state = { loading: false };
 
-  toggle = value => {
+  toggle = (value: boolean) => {
     this.setState({ loading: value });
   };
 

components/spin/index.tsx

@@ -20,6 +20,7 @@ export interface SpinProps {
   delay?: number;
   wrapperClassName?: string;
   indicator?: SpinIndicator;
+  children?: React.ReactNode;
 }
 
 export interface SpinState {

components/table/Table.tsx

@@ -140,7 +140,7 @@ function InternalTable<RecordType extends object = any>(
   );
 
   const baseColumns = React.useMemo(
-    () => columns || convertChildrenToColumns(children),
+    () => columns || (convertChildrenToColumns(children) as ColumnsType<RecordType>),
     [columns, children],
   );
   const needResponsive = React.useMemo(
@@ -154,8 +154,7 @@ function InternalTable<RecordType extends object = any>(
     const matched = new Set(Object.keys(screens).filter((m: Breakpoint) => screens[m]));
 
     return baseColumns.filter(
-      (c: ColumnType<RecordType>) =>
+      c => !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
-        !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
     );
   }, [baseColumns, screens]);
 
@@ -501,7 +500,7 @@ function InternalTable<RecordType extends object = any>(
         {topPaginationNode}
         <RcTable<RecordType>
           {...tableProps}
-          columns={mergedColumns}
+          columns={mergedColumns as RcTableProps<RecordType>['columns']}
           direction={direction}
           expandable={mergedExpandable}
           prefixCls={prefixCls}
@@ -518,7 +517,7 @@ function InternalTable<RecordType extends object = any>(
           // Internal
           internalHooks={INTERNAL_HOOKS}
           internalRefs={internalRefs as any}
-          transformColumns={transformColumns}
+          transformColumns={transformColumns as RcTableProps<RecordType>['transformColumns']}
         />
         {bottomPaginationNode}
       </Spin>

components/table/interface.tsx

@@ -88,7 +88,7 @@ export interface FilterDropdownProps {
   visible: boolean;
 }
 
-export interface ColumnType<RecordType> extends RcColumnType<RecordType> {
+export interface ColumnType<RecordType> extends Omit<RcColumnType<RecordType>, 'title'> {
   title?: ColumnTitle<RecordType>;
   // Sorter
   sorter?:

components/timeline/Timeline.tsx

@@ -15,6 +15,7 @@ export interface TimelineProps {
   style?: React.CSSProperties;
   reverse?: boolean;
   mode?: 'left' | 'alternate' | 'right';
+  children?: React.ReactNode;
 }
 
 interface TimelineType extends React.FC<TimelineProps> {

components/timeline/TimelineItem.tsx

@@ -11,9 +11,10 @@ export interface TimelineItemProps {
   position?: string;
   style?: React.CSSProperties;
   label?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
-// for compatibililty
+// for compatibility
 // https://github.com/ant-design/ant-design/pull/26832
 export interface TimeLineItemProps extends TimelineItemProps {
   __deprecated_do_not_use_it__?: any; // eslint-disable-line camelcase

components/transfer/list.tsx

@@ -20,8 +20,8 @@ import { isValidElement } from '../_util/reactNode';
 
 const defaultRender = () => null;
 
-function isRenderResultPlainObject(result: RenderResult) {
+function isRenderResultPlainObject(result: RenderResult): result is RenderResultObject {
-  return (
+  return !!(
     result &&
     !isValidElement(result) &&
     Object.prototype.toString.call(result) === '[object Object]'
@@ -274,7 +274,7 @@ export default class TransferList<
 
   renderItem = (item: RecordType): RenderedItem<RecordType> => {
     const { render = defaultRender } = this.props;
-    const renderResult: RenderResult = render(item);
+    const renderResult = render(item);
     const isRenderResultPlain = isRenderResultPlainObject(renderResult);
     return {
       renderedText: isRenderResultPlain

components/tree/utils/iconUtil.tsx

@@ -10,10 +10,12 @@ import { isValidElement, cloneElement } from '../../_util/reactNode';
 
 export default function renderSwitcherIcon(
   prefixCls: string,
-  switcherIcon: React.ReactNode,
+  switcherIcon: React.ReactNode | ((props: any) => React.ReactNode),
   showLine: boolean | { showLeafIcon: boolean } | undefined,
-  { isLeaf, expanded, loading }: AntTreeNodeProps,
+  treeNodeProps: AntTreeNodeProps,
-) {
+): React.ReactNode {
+  const { isLeaf, expanded, loading } = treeNodeProps;
+
   if (loading) {
     return <LoadingOutlined className={`${prefixCls}-switcher-loading-icon`} />;
   }
@@ -38,7 +40,7 @@ export default function renderSwitcherIcon(
   }
 
   if (switcherIcon) {
-    return switcherIcon;
+    return typeof switcherIcon === 'function' ? switcherIcon(treeNodeProps) : switcherIcon;
   }
 
   if (showLine) {

components/upload/interface.tsx

@@ -129,6 +129,7 @@ export interface UploadProps<T = any> extends Pick<RcUploadProps, 'capture'> {
   itemRender?: ItemRender<T>;
   /** Config max count of `fileList`. Will replace current one when `maxCount` is 1 */
   maxCount?: number;
+  children?: React.ReactNode;
 }
 
 export interface UploadState<T = any> {

package.json

@@ -161,8 +161,8 @@
     "@ant-design/bisheng-plugin": "^3.0.1",
     "@ant-design/hitu": "^0.0.0-alpha.13",
     "@ant-design/tools": "^14.0.2",
-    "@docsearch/css": "^3.0.0-alpha.39",
+    "@docsearch/css": "^3.0.0",
-    "@docsearch/react": "^3.0.0-alpha.39",
+    "docsearch-react-fork": "^0.0.0-alpha.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
     "@testing-library/jest-dom": "^5.16.3",
@@ -175,7 +175,7 @@
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "^4.14.139",
     "@types/puppeteer": "^5.4.0",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.0",
     "@types/react-color": "^3.0.1",
     "@types/react-copy-to-clipboard": "^5.0.0",
     "@types/react-dom": "^18.0.0",

site/theme/template/Components/Helmet.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Helmet, HelmetProps } from 'react-helmet-async';
+
+export interface WrapHelmetProps extends HelmetProps {
+  children?: React.ReactNode;
+}
+
+export default function WrapHelmet(props: WrapHelmetProps) {
+  return <Helmet {...props} />;
+}

site/theme/template/Content/Article.tsx

@@ -1,10 +1,10 @@
 import React, { Children, cloneElement } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Helmet } from 'react-helmet-async';
 import { getChildren } from 'jsonml.js/lib/utils';
 import { Timeline, Alert, Affix } from 'antd';
 import EditButton from './EditButton';
 import { getMetaDescription } from '../utils';
+import WrapHelmet from '../Components/Helmet';
 
 interface LocaleString {
   [locale: string]: string;
@@ -111,11 +111,11 @@ class Article extends React.Component<ArticleProps> {
 
     return (
       <article className="markdown" onClick={this.onResourceClick}>
-        <Helmet encodeSpecialCharacters={false}>
+        <WrapHelmet encodeSpecialCharacters={false}>
           {helmetTitle && <title>{helmetTitle}</title>}
           {helmetTitle && <meta property="og:title" content={helmetTitle} />}
           {metaDesc && <meta name="description" content={metaDesc} />}
-        </Helmet>
+        </WrapHelmet>
         {isNotTranslated && (
           <Alert
             type="warning"
@@ -131,7 +131,7 @@ class Article extends React.Component<ArticleProps> {
         )}
         <div className={titleRegionClassName}>
           <h1>
-            {(title as LocaleString)[locale] || title}
+            {typeof title === 'object' && title ? title[locale] : title}
             {!subtitle || locale === 'en-US' ? null : <span className="subtitle">{subtitle}</span>}
             <EditButton
               title={<FormattedMessage id="app.content.edit-page" />}

site/theme/template/Home/index.tsx

@@ -29,6 +29,7 @@ function getStyle() {
 interface BlockContentProps {
   title: React.ReactNode;
   extra?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 const BlockContent: React.FC<BlockContentProps> = ({ title, children, extra }) => (

site/theme/template/Layout/Header/SearchBar.tsx

@@ -2,14 +2,18 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Link } from 'bisheng/router';
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet-async';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import { Input, Tooltip, Typography } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
-import { DocSearchProps, useDocSearchKeyboardEvents, DocSearchModalProps } from '@docsearch/react';
+import {
+  DocSearchProps,
+  useDocSearchKeyboardEvents,
+  DocSearchModalProps,
+} from 'docsearch-react-fork';
 import '@docsearch/css';
 import { SharedProps } from './interface';
 import { IAlgoliaConfig, transformHitUrl } from './algolia-config';
+import WrapHelmet from '../../Components/Helmet';
 
 import './SearchBar.less';
 
@@ -62,7 +66,7 @@ const SearchBar = ({
       return Promise.resolve();
     }
 
-    return import('@docsearch/react/modal').then(({ DocSearchModal }) => {
+    return import('docsearch-react-fork/modal').then(({ DocSearchModal }) => {
       SearchModal = DocSearchModal;
     });
   }, []);
@@ -127,14 +131,14 @@ const SearchBar = ({
         focused: isInputFocus,
       })}
     >
-      <Helmet>
+      <WrapHelmet>
         {/* pre-connect to algolia server */}
         <link
           rel="preconnect"
           href={`https://${algoliaConfig.appId}-dsn.algolia.net`}
           crossOrigin="anonymous"
         />
-      </Helmet>
+      </WrapHelmet>
 
       <Input
         placeholder={searchInputPlaceholder}

site/theme/template/Layout/Header/algolia-config.ts

@@ -1,4 +1,4 @@
-import { DocSearchHit } from '@docsearch/react/dist/esm/types';
+import { DocSearchHit } from 'docsearch-react-fork/dist/esm/types';
 
 let _internalATag: HTMLAnchorElement | null;
 

site/theme/template/Layout/Header/index.tsx

@@ -11,7 +11,7 @@ import SearchBar from './SearchBar';
 import More from './More';
 import Navigation from './Navigation';
 import Github from './Github';
-import SiteContext from '../SiteContext';
+import SiteContext, { SiteContextProps } from '../SiteContext';
 import { ping } from '../../utils';
 import { AlgoliaConfig } from './algolia-config';
 
@@ -89,6 +89,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     showTechUIButton: false,
   };
 
+  context: SiteContextProps;
+
   componentDidMount() {
     const { intl, router } = this.props;
     router.listen(this.handleHideMenu);

typings/custom-typings.d.ts

@@ -32,10 +32,10 @@ declare module '*.json' {
   export default value;
 }
 
-declare module '@docsearch/react/style/modal';
+declare module 'docsearch-react-fork/style/modal';
 
-declare module '@docsearch/react/modal' {
+declare module 'docsearch-react-fork/modal' {
-  import { DocSearchModal as value } from '@docsearch/react';
+  import { DocSearchModal as value } from 'docsearch-react-fork';
   export const DocSearchModal = value;
 }