use span as wrapper instead of cloning anchor

Author: gabrieljablonski

src/App.tsx

@@ -1,6 +1,6 @@
 import { TooltipController as Tooltip } from 'components/TooltipController'
 import { TooltipProvider, TooltipWrapper } from 'components/TooltipProvider'
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import styles from './styles.module.css'
 
 function WithProviderMinimal() {
@@ -36,35 +36,6 @@ function WithProviderMultiple() {
   )
 }
 
-function WithProviderForwardRef() {
-  // if access to the element's ref is needed, `TooltipWrapper.forwardRef` must be used
-  const ref = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log('Ref can still be accessed: ', ref.current)
-  })
-
-  return (
-    <section style={{ marginTop: '100px' }}>
-      <p>
-        <TooltipWrapper forwardRef={ref} place="bottom" content="Shared Global Tooltip">
-          <button
-            // this will not work, must use `forwardRef` from wrapper
-            ref={ref}
-          >
-            Forward ref 1
-          </button>
-        </TooltipWrapper>
-        <TooltipWrapper place="right" content="Shared Global Tooltip">
-          <button>Forward ref 2</button>
-        </TooltipWrapper>
-      </p>
-      <Tooltip />
-    </section>
-  )
-}
-
 function App() {
   const [anchorId, setAnchorId] = useState('button')
   const [isDarkOpen, setIsDarkOpen] = useState(false)
@@ -141,9 +112,6 @@ function App() {
       <TooltipProvider>
         <WithProviderMultiple />
       </TooltipProvider>
-      <TooltipProvider>
-        <WithProviderForwardRef />
-      </TooltipProvider>
     </main>
   )
 }

src/components/TooltipProvider/TooltipWrapper.tsx

@@ -1,10 +1,9 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useTooltip } from './TooltipProvider'
 import type { ITooltipWrapper } from './TooltipProviderTypes'
 
 const TooltipWrapper = ({
   tooltipId,
-  forwardRef,
   children,
   place,
   content,
@@ -27,25 +26,23 @@ const TooltipWrapper = ({
     }
   }, [])
 
-  return React.cloneElement(children, {
-    ref: (ref: HTMLElement) => {
-      anchorRef.current = ref
-      if (forwardRef) {
-        // eslint-disable-next-line no-param-reassign
-        forwardRef.current = ref
-      }
-    },
-    'data-tooltip-place': place,
-    'data-tooltip-content': content,
-    'data-tooltip-html': html,
-    'data-tooltip-variant': variant,
-    'data-tooltip-offset': offset,
-    'data-tooltip-wrapper': wrapper,
-    'data-tooltip-events': events,
-    'data-tooltip-position-strategy': positionStrategy,
-    'data-tooltip-delay-show': delayShow,
-    'data-tooltip-delay-hide': delayHide,
-  })
+  return (
+    <span
+      ref={anchorRef}
+      data-tooltip-place={place}
+      data-tooltip-content={content}
+      data-tooltip-html={html}
+      data-tooltip-variant={variant}
+      data-tooltip-offset={offset}
+      data-tooltip-wrapper={wrapper}
+      data-tooltip-events={events}
+      data-tooltip-position-strategy={positionStrategy}
+      data-tooltip-delay-show={delayShow}
+      data-tooltip-delay-hide={delayHide}
+    >
+      {children}
+    </span>
+  )
 }
 
 export default TooltipWrapper