chore: adjust layer

components/_util/wave/WaveEffect.tsx

@@ -133,12 +133,11 @@ export interface WaveWrapperProps {
    */
   target: HTMLElement;
   token: ReturnType<typeof useToken>;
-  wave: ConfigProviderProps['wave'];
   holder: HTMLElement;
 }
 
 function WaveWrapper(props: WaveWrapperProps) {
-  const { token, target, currentTarget, wave, holder } = props;
+  const { holder } = props;
 
   function onFinish() {
     unmount(holder).then(() => {
@@ -146,10 +145,6 @@ function WaveWrapper(props: WaveWrapperProps) {
     });
   }
 
-  if (wave?.render) {
-    return wave?.render({ target, currentTarget, token, onFinish }) as React.ReactElement;
-  }
-
   return <WaveEffect {...props} onFinish={onFinish} />;
 }
 
@@ -159,6 +154,14 @@ export default function showWaveEffect(
   token: ReturnType<typeof useToken>,
   wave: ConfigProviderProps['wave'],
 ) {
+  // Target
+  const target = node.querySelector<HTMLElement>('.antd-wave-target') || node;
+
+  if (wave?.render) {
+    wave?.render({ target, currentTarget: node, token });
+    return;
+  }
+
   // Create holder
   const holder = document.createElement('div');
   holder.style.position = 'absolute';
@@ -166,16 +169,12 @@ export default function showWaveEffect(
   holder.style.top = `0px`;
   node?.insertBefore(holder, node?.firstChild);
 
-  // Target
-  const target = node.querySelector<HTMLElement>('.antd-wave-target') || node;
-
   render(
     <WaveWrapper
       currentTarget={node}
       target={target}
       className={className}
       token={token}
-      wave={wave}
       holder={holder}
     />,
     holder,

components/config-provider/index.tsx

@@ -84,11 +84,7 @@ export interface ConfigProviderProps {
     showSizeChanger?: boolean;
   };
   wave?: {
-    render?: (
-      props: Omit<WaveWrapperProps, 'className' | 'wave' | 'holder'> & {
-        onFinish: VoidFunction;
-      },
-    ) => React.ReactNode;
+    render?: (props: Omit<WaveWrapperProps, 'className' | 'wave' | 'holder'>) => void;
   };
   locale?: Locale;
   pageHeader?: {

components/theme/themesToken/happy/wave.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { CSSMotionList } from 'rc-motion';
 import raf from 'rc-util/lib/raf';
+import { render, unmount } from 'rc-util/lib/React/render';
 import * as React from 'react';
 import type { ConfigProviderProps } from '../../../config-provider';
 import useWaveStyle, { TARGET_ATTR } from './style/wave';
@@ -214,7 +215,26 @@ function HappyWave({ target, token, onFinish }: HappyWaveProps) {
   );
 }
 
-const renderWave: WaveRender = (props: HappyWaveProps) => <HappyWave {...props} />;
+const renderWave: WaveRender = (props) => {
+  // Create holder
+  const holder = document.createElement('div');
+  holder.style.position = 'absolute';
+  holder.style.left = `0px`;
+  holder.style.top = `0px`;
+  document.body.appendChild(holder);
+
+  render(
+    <HappyWave
+      {...props}
+      onFinish={() => {
+        unmount(holder).then(() => {
+          holder.parentElement?.removeChild(holder);
+        });
+      }}
+    />,
+    holder,
+  );
+};
 
 const Wave: ConfigProviderProps['wave'] = {
   render: renderWave,