From 5b8e4e51e95c91efe4d57aa08b57fa6401d54111 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 8 Apr 2022 22:55:42 +0800
Subject: [PATCH] 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                         |  2 +-
 components/_util/ActionButton.tsx                  |  1 +
 components/_util/wave.tsx                          |  1 +
 components/alert/ErrorBoundary.tsx                 |  1 +
 components/anchor/Anchor.tsx                       |  2 +-
 components/avatar/SizeContext.tsx                  |  1 +
 components/badge/index.tsx                         |  1 +
 components/breadcrumb/Breadcrumb.tsx               |  1 +
 components/breadcrumb/BreadcrumbItem.tsx           |  1 +
 components/breadcrumb/BreadcrumbSeparator.tsx      |  2 +-
 components/button/button-group.tsx                 |  1 +
 components/collapse/Collapse.tsx                   |  1 +
 components/config-provider/SizeContext.tsx         |  1 +
 components/dropdown/dropdown.tsx                   |  1 +
 components/form/FormItem.tsx                       |  2 +-
 components/list/index.tsx                          |  2 +-
 components/locale-provider/LocaleReceiver.tsx      | 11 +++++------
 components/locale-provider/context.ts              |  4 +++-
 components/menu/index.tsx                          | 10 +++++++---
 components/message/index.tsx                       |  6 +++---
 components/modal/Modal.tsx                         |  1 +
 components/page-header/index.tsx                   |  1 +
 components/progress/progress.tsx                   |  1 +
 components/result/index.tsx                        |  7 ++++---
 components/select/utils/iconUtil.tsx               |  8 +++++---
 components/spin/demo/basic.md                      |  2 +-
 components/spin/demo/inside.md                     |  2 +-
 components/spin/demo/nested.md                     |  4 ++--
 components/spin/index.tsx                          |  1 +
 components/table/Table.tsx                         |  9 ++++-----
 components/table/interface.tsx                     |  2 +-
 components/timeline/Timeline.tsx                   |  1 +
 components/timeline/TimelineItem.tsx               |  3 ++-
 components/transfer/list.tsx                       |  6 +++---
 components/tree/utils/iconUtil.tsx                 | 10 ++++++----
 components/upload/interface.tsx                    |  1 +
 package.json                                       |  6 +++---
 site/theme/template/Components/Helmet.tsx          | 10 ++++++++++
 site/theme/template/Content/Article.tsx            |  8 ++++----
 site/theme/template/Home/index.tsx                 |  1 +
 site/theme/template/Layout/Header/SearchBar.tsx    | 14 +++++++++-----
 .../theme/template/Layout/Header/algolia-config.ts |  2 +-
 site/theme/template/Layout/Header/index.tsx        |  4 +++-
 typings/custom-typings.d.ts                        |  6 +++---
 44 files changed, 103 insertions(+), 59 deletions(-)
 create mode 100644 site/theme/template/Components/Helmet.tsx

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 60a2a8ffda..b2884363ad 100644
--- a/.github/workflows/test.yml
+++ b/.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
diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx
index 45f209602c..0600ceeac4 100644
--- a/components/_util/ActionButton.tsx
+++ b/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 {
diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 4cd8c49ea1..bf06f49573 100644
--- a/components/_util/wave.tsx
+++ b/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> {
diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx
index ac1b4aa7ce..b3b42da520 100644
--- a/components/alert/ErrorBoundary.tsx
+++ b/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<
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 851a2b9653..a37be7e78d 100644
--- a/components/anchor/Anchor.tsx
+++ b/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>();
 
diff --git a/components/avatar/SizeContext.tsx b/components/avatar/SizeContext.tsx
index 50e90345b0..bb763a4a60 100644
--- a/components/avatar/SizeContext.tsx
+++ b/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 }) => (
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index 99ff056346..284c4f089e 100644
--- a/components/badge/index.tsx
+++ b/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 = ({
diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
index c5f35ba3f0..374e6821e7 100755
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/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) {
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index 860971e847..780f1f9ed8 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/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;
diff --git a/components/breadcrumb/BreadcrumbSeparator.tsx b/components/breadcrumb/BreadcrumbSeparator.tsx
index ac966f8cbc..9b5f034a38 100644
--- a/components/breadcrumb/BreadcrumbSeparator.tsx
+++ b/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;
 }
 
diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
index bb0531ab81..3874c48e79 100644
--- a/components/button/button-group.tsx
+++ b/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 => (
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index 68d3dc8f57..7a96140566 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -28,6 +28,7 @@ export interface CollapseProps {
   expandIconPosition?: ExpandIconPosition;
   ghost?: boolean;
   collapsible?: CollapsibleType;
+  children?: React.ReactNode;
 }
 
 interface PanelProps {
diff --git a/components/config-provider/SizeContext.tsx b/components/config-provider/SizeContext.tsx
index 55c40be1d8..e6ab4ceb6f 100644
--- a/components/config-provider/SizeContext.tsx
+++ b/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 }) => (
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 20cf3a9356..15b555b84e 100644
--- a/components/dropdown/dropdown.tsx
+++ b/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> {
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 2e64434ece..fa405a57ac 100644
--- a/components/form/FormItem.tsx
+++ b/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);
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 0f4ba9718d..2ae2af1dc1 100644
--- a/components/list/index.tsx
+++ b/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 {
diff --git a/components/locale-provider/LocaleReceiver.tsx b/components/locale-provider/LocaleReceiver.tsx
index 0d75cf76a4..24370c6014 100644
--- a/components/locale-provider/LocaleReceiver.tsx
+++ b/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: (
-    locale: Exclude<Locale[C], undefined>,
-    localeCode?: string,
-    fullLocale?: object,
-  ) => React.ReactNode;
+  children: (locale: Locale[C], 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;
diff --git a/components/locale-provider/context.ts b/components/locale-provider/context.ts
index 68ade79b1f..897554637a 100644
--- a/components/locale-provider/context.ts
+++ b/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;
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index f02197a7ef..a368a5c50b 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -111,9 +111,13 @@ function InternalMenu(props: InternalMenuProps) {
         prefixCls={prefixCls}
         direction={direction}
         defaultMotions={defaultMotions}
-        expandIcon={cloneElement(expandIcon, {
-          className: `${prefixCls}-submenu-expand-icon`,
-        })}
+        expandIcon={
+          typeof expandIcon === 'function'
+            ? expandIcon
+            : cloneElement(expandIcon, {
+                className: `${prefixCls}-submenu-expand-icon`,
+              })
+        }
       />
     </MenuContext.Provider>
   );
diff --git a/components/message/index.tsx b/components/message/index.tsx
index 9f19058c4a..9cbc3360c2 100755
--- a/components/message/index.tsx
+++ b/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,
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index dba62ae8ec..ecd09f383e 100644
--- a/components/modal/Modal.tsx
+++ b/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;
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index b939003567..7545e7e219 100644
--- a/components/page-header/index.tsx
+++ b/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 = (
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index c3f356245a..c5c6e14450 100644
--- a/components/progress/progress.tsx
+++ b/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> {
diff --git a/components/result/index.tsx b/components/result/index.tsx
index 1965e3df14..433e5bf5c8 100644
--- a/components/result/index.tsx
+++ b/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_403: React.ReactNode;
-  PRESENTED_IMAGE_500: React.ReactNode;
+  PRESENTED_IMAGE_404: React.FC;
+  PRESENTED_IMAGE_403: React.FC;
+  PRESENTED_IMAGE_500: React.FC;
 }
 
 const Result: ResultType = ({
diff --git a/components/select/utils/iconUtil.tsx b/components/select/utils/iconUtil.tsx
index e6e8a7c094..2b6a8d6e34 100644
--- a/components/select/utils/iconUtil.tsx
+++ b/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;
-  menuItemSelectedIcon?: React.ReactNode;
-  removeIcon?: React.ReactNode;
+  clearIcon?: RenderNode;
+  menuItemSelectedIcon?: RenderNode;
+  removeIcon?: RenderNode;
   loading?: boolean;
   multiple?: boolean;
   hasFeedback?: boolean;
diff --git a/components/spin/demo/basic.md b/components/spin/demo/basic.md
index b4f4204616..bbc744542d 100644
--- a/components/spin/demo/basic.md
+++ b/components/spin/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 A simple loading status.
 
-```jsx
+```tsx
 import { Spin } from 'antd';
 
 export default () => <Spin />;
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
index 1a5b3ab41c..d5ddd5f517 100644
--- a/components/spin/demo/inside.md
+++ b/components/spin/demo/inside.md
@@ -13,7 +13,7 @@ title:
 
 Spin in a container.
 
-```jsx
+```tsx
 import { Spin } from 'antd';
 
 export default () => (
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index e549539ea5..638715a4ab 100644
--- a/components/spin/demo/nested.md
+++ b/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 });
   };
 
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index 10f25f2c7c..84e97bbba9 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -20,6 +20,7 @@ export interface SpinProps {
   delay?: number;
   wrapperClassName?: string;
   indicator?: SpinIndicator;
+  children?: React.ReactNode;
 }
 
 export interface SpinState {
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index aed6bb309e..e0c4707e0a 100644
--- a/components/table/Table.tsx
+++ b/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.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
+      c => !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>
diff --git a/components/table/interface.tsx b/components/table/interface.tsx
index 7525c5ca92..1017d69bec 100644
--- a/components/table/interface.tsx
+++ b/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?:
diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
index 4cfc617feb..e72913f486 100644
--- a/components/timeline/Timeline.tsx
+++ b/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> {
diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index de1e169cd1..8c082054f7 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/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
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index 9f05b620f0..cdb22ecd0a 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -20,8 +20,8 @@ import { isValidElement } from '../_util/reactNode';
 
 const defaultRender = () => null;
 
-function isRenderResultPlainObject(result: RenderResult) {
-  return (
+function isRenderResultPlainObject(result: RenderResult): result is RenderResultObject {
+  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
diff --git a/components/tree/utils/iconUtil.tsx b/components/tree/utils/iconUtil.tsx
index d479b7fd62..63ecfecb64 100644
--- a/components/tree/utils/iconUtil.tsx
+++ b/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) {
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index 0fac22efa0..e523884381 100755
--- a/components/upload/interface.tsx
+++ b/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> {
diff --git a/package.json b/package.json
index ff085b8590..b420716959 100644
--- a/package.json
+++ b/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/react": "^3.0.0-alpha.39",
+    "@docsearch/css": "^3.0.0",
+    "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",
diff --git a/site/theme/template/Components/Helmet.tsx b/site/theme/template/Components/Helmet.tsx
new file mode 100644
index 0000000000..22e278996f
--- /dev/null
+++ b/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} />;
+}
diff --git a/site/theme/template/Content/Article.tsx b/site/theme/template/Content/Article.tsx
index a8d059e3b3..0796ec2804 100644
--- a/site/theme/template/Content/Article.tsx
+++ b/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" />}
diff --git a/site/theme/template/Home/index.tsx b/site/theme/template/Home/index.tsx
index 1296a04a9c..6b7c199d29 100644
--- a/site/theme/template/Home/index.tsx
+++ b/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 }) => (
diff --git a/site/theme/template/Layout/Header/SearchBar.tsx b/site/theme/template/Layout/Header/SearchBar.tsx
index 9c71dd9021..08009170f6 100644
--- a/site/theme/template/Layout/Header/SearchBar.tsx
+++ b/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}
diff --git a/site/theme/template/Layout/Header/algolia-config.ts b/site/theme/template/Layout/Header/algolia-config.ts
index 659475ac61..5cb3807db5 100644
--- a/site/theme/template/Layout/Header/algolia-config.ts
+++ b/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;
 
diff --git a/site/theme/template/Layout/Header/index.tsx b/site/theme/template/Layout/Header/index.tsx
index 6b7fe8a183..b94c23d34f 100644
--- a/site/theme/template/Layout/Header/index.tsx
+++ b/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);
diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts
index d586d4e7b0..76112ff63a 100644
--- a/typings/custom-typings.d.ts
+++ b/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' {
-  import { DocSearchModal as value } from '@docsearch/react';
+declare module 'docsearch-react-fork/modal' {
+  import { DocSearchModal as value } from 'docsearch-react-fork';
   export const DocSearchModal = value;
 }