add tooltip wrapper

Author: gabrieljablonski

src/App.tsx

@@ -1,9 +1,32 @@
 import { TooltipController as Tooltip } from 'components/TooltipController'
-import { TooltipProvider, useTooltip } from 'components/TooltipProvider'
+import { TooltipProvider, TooltipWrapper, useTooltip } from 'components/TooltipProvider'
 import { useEffect, useRef, useState } from 'react'
 import styles from './styles.module.css'
 
-function WithProvider() {
+function WithProviderMinimal() {
+  const ref = useRef<HTMLButtonElement>(null)
+
+  return (
+    <section style={{ marginTop: '100px' }}>
+      <p>
+        <TooltipWrapper forwardRef={ref} place="bottom" content="Shared Global Tooltip">
+          <button
+            // this will not work, must use wrapper `forwardRef`
+            ref={ref}
+          >
+            Minimal 1
+          </button>
+        </TooltipWrapper>
+        <TooltipWrapper place="right" content="Shared Global Tooltip">
+          <button>Minimal 2</button>
+        </TooltipWrapper>
+      </p>
+      <Tooltip />
+    </section>
+  )
+}
+
+function WithProviderFullControl() {
   const { attach, detach } = useTooltip()
   const { attach: attach1, detach: detach1 } = useTooltip()('tooltip-1')
   const { attach: attach2, detach: detach2 } = useTooltip()('tooltip-2')
@@ -51,39 +74,13 @@ function WithProvider() {
           Provider 6
         </button>
       </p>
+      <Tooltip />
       <Tooltip id="tooltip-1" />
       <Tooltip id="tooltip-2" />
     </section>
   )
 }
 
-function WithProviderMinimal() {
-  const { attach, detach } = useTooltip()
-  const buttonRef1 = useRef<HTMLButtonElement>(null)
-  const buttonRef2 = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    attach(buttonRef1, buttonRef2)
-    return () => {
-      detach(buttonRef1, buttonRef2)
-    }
-  }, [])
-
-  return (
-    <section style={{ marginTop: '100px' }}>
-      <p>
-        <button ref={buttonRef1} data-tooltip-content="Shared Global Tooltip">
-          Minimal 1
-        </button>
-        <button ref={buttonRef2} data-tooltip-content="Shared Global Tooltip">
-          Minimal 2
-        </button>
-      </p>
-      <Tooltip />
-    </section>
-  )
-}
-
 function App() {
   const [anchorId, setAnchorId] = useState('button')
   const [isDarkOpen, setIsDarkOpen] = useState(false)
@@ -155,10 +152,10 @@ function App() {
         </p>
       </section>
       <TooltipProvider>
-        <WithProvider />
+        <WithProviderMinimal />
       </TooltipProvider>
       <TooltipProvider>
-        <WithProviderMinimal />
+        <WithProviderFullControl />
       </TooltipProvider>
     </main>
   )

src/components/TooltipProvider/TooltipProvider.tsx

@@ -8,20 +8,11 @@ import React, {
   useState,
 } from 'react'
 
-type AnchorRef = React.RefObject<HTMLElement>
-
-interface TooltipContextData {
-  anchorRefs: Set<AnchorRef>
-  activeAnchor: AnchorRef
-  attach: (...refs: AnchorRef[]) => void
-  detach: (...refs: AnchorRef[]) => void
-  setActiveAnchor: (ref: AnchorRef) => void
-}
-
-type TooltipContextDataWrapper = TooltipContextData & {
-  // This means the context is a callable object
-  (tooltipId?: string): TooltipContextData
-}
+import type {
+  AnchorRef,
+  TooltipContextData,
+  TooltipContextDataWrapper,
+} from './TooltipProviderTypes'
 
 const defaultContextData: TooltipContextData = {
   anchorRefs: new Set(),
@@ -54,7 +45,7 @@ const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
       const tooltipRefs = oldMap[tooltipId] ?? new Set()
       refs.forEach((ref) => tooltipRefs.add(ref))
       // create new object to trigger re-render
-      return { ...oldMap, [tooltipId]: tooltipRefs }
+      return { ...oldMap, [tooltipId]: new Set(tooltipRefs) }
     })
   }
 
@@ -113,4 +104,4 @@ export function useTooltip() {
   return useContext(TooltipContext)
 }
 
-export { TooltipProvider }
+export default TooltipProvider

src/components/TooltipProvider/TooltipProviderTypes.d.ts

@@ -0,0 +1,34 @@
+import type { MutableRefObject, ReactElement, RefObject } from 'react'
+import type { ITooltipController } from '../TooltipController/TooltipControllerTypes'
+
+export type AnchorRef = RefObject<HTMLElement>
+
+export interface TooltipContextData {
+  anchorRefs: Set<AnchorRef>
+  activeAnchor: AnchorRef
+  attach: (...refs: AnchorRef[]) => void
+  detach: (...refs: AnchorRef[]) => void
+  setActiveAnchor: (ref: AnchorRef) => void
+}
+
+export type TooltipContextDataWrapper = TooltipContextData & {
+  // This means the context is a callable object
+  (tooltipId?: string): TooltipContextData
+}
+
+export interface ITooltipWrapper {
+  tooltipId?: string
+  forwardRef?: MutableRefObject<HTMLElement | null>
+  children: ReactElement
+
+  place?: ITooltipController['place']
+  content?: ITooltipController['content']
+  html?: ITooltipController['html']
+  variant?: ITooltipController['variant']
+  offset?: ITooltipController['offset']
+  wrapper?: ITooltipController['wrapper']
+  events?: ITooltipController['events']
+  positionStrategy?: ITooltipController['positionStrategy']
+  delayShow?: ITooltipController['delayShow']
+  delayHide?: ITooltipController['delayHide']
+}

src/components/TooltipProvider/TooltipWrapper.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef } from 'react'
+import { useTooltip } from './TooltipProvider'
+import type { ITooltipWrapper } from './TooltipProviderTypes'
+
+const TooltipWrapper = ({
+  tooltipId,
+  forwardRef,
+  children,
+  place,
+  content,
+  html,
+  variant,
+  offset,
+  wrapper,
+  events,
+  positionStrategy,
+  delayShow,
+  delayHide,
+}: ITooltipWrapper) => {
+  const { attach, detach } = useTooltip()(tooltipId)
+  const anchorRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    attach(anchorRef)
+    return () => {
+      detach(anchorRef)
+    }
+  }, [])
+
+  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,
+  })
+}
+
+export default TooltipWrapper

src/components/TooltipProvider/index.ts

@@ -1 +1,2 @@
-export { TooltipProvider, useTooltip } from './TooltipProvider'
+export { default as TooltipProvider, useTooltip } from './TooltipProvider'
+export { default as TooltipWrapper } from './TooltipWrapper'

src/index.tsx

@@ -1,3 +1,4 @@
 import './tokens.css'
 
 export { TooltipController as Tooltip } from './components/TooltipController'
+export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider'