add provider context data wrapper

Author: gabrieljablonski

src/App.tsx

@@ -4,10 +4,9 @@ import { useEffect, useRef, useState } from 'react'
 import styles from './styles.module.css'
 
 function WithProvider() {
-  const tooltipper = useTooltip()
-  const { attach, detach } = tooltipper()
-  const { attach: attach1, detach: detach1 } = tooltipper('tooltip-1')
-  const { attach: attach2, detach: detach2 } = tooltipper('tooltip-2')
+  const { attach, detach } = useTooltip()
+  const { attach: attach1, detach: detach1 } = useTooltip()('tooltip-1')
+  const { attach: attach2, detach: detach2 } = useTooltip()('tooltip-2')
   const buttonRef1 = useRef<HTMLButtonElement>(null)
   const buttonRef2 = useRef<HTMLButtonElement>(null)
   const buttonRef3 = useRef<HTMLButtonElement>(null)
@@ -29,40 +28,62 @@ function WithProvider() {
   return (
     <section style={{ marginTop: '100px' }}>
       <p>
-        <button
-          ref={buttonRef1}
-          data-tooltip-place="right"
-          data-tooltip-content="Hello World from a Shared Global Tooltip"
-        >
-          Hover or focus me 5
+        <button ref={buttonRef1} data-tooltip-content="Shared Global Tooltip">
+          Provider 1
         </button>
-        <button ref={buttonRef2} data-tooltip-content="Hello World from a Shared Global Tooltip">
-          Hover or focus me 6
+        <button ref={buttonRef2} data-tooltip-content="Shared Global Tooltip">
+          Provider 2
         </button>
       </p>
       <p>
-        <button ref={buttonRef3} data-tooltip-content="Hello World from Shared Tooltip 1">
-          Hover or focus me 7
+        <button ref={buttonRef3} data-tooltip-content="Shared Tooltip 1">
+          Provider 3
         </button>
-        <button ref={buttonRef4} data-tooltip-content="Hello World from Shared Tooltip 1">
-          Hover or focus me 8
+        <button ref={buttonRef4} data-tooltip-content="Shared Tooltip 1">
+          Provider 4
         </button>
       </p>
       <p>
-        <button ref={buttonRef5} data-tooltip-content="Hello World from Shared Tooltip 2">
-          Hover or focus me 9
+        <button ref={buttonRef5} data-tooltip-content="Shared Tooltip 2">
+          Provider 5
         </button>
-        <button ref={buttonRef6} data-tooltip-content="Hello World from Shared Tooltip 2">
-          Hover or focus me 10
+        <button ref={buttonRef6} data-tooltip-content="Shared Tooltip 2">
+          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)
@@ -136,6 +157,9 @@ function App() {
       <TooltipProvider>
         <WithProvider />
       </TooltipProvider>
+      <TooltipProvider>
+        <WithProviderMinimal />
+      </TooltipProvider>
     </main>
   )
 }

src/components/TooltipProvider/TooltipProvider.tsx

@@ -4,23 +4,26 @@ import React, {
   useCallback,
   useContext,
   useId,
+  useMemo,
   useState,
 } from 'react'
 
 type AnchorRef = React.RefObject<HTMLElement>
 
 interface TooltipContextData {
-  // when using one tooltip
   anchorRefs: Set<AnchorRef>
   activeAnchor: AnchorRef
   attach: (...refs: AnchorRef[]) => void
   detach: (...refs: AnchorRef[]) => void
   setActiveAnchor: (ref: AnchorRef) => void
 }
 
-type TooltipContextDataBuilder = (tooltipId?: string) => TooltipContextData
+type TooltipContextDataWrapper = TooltipContextData & {
+  // This means the context is a callable object
+  (tooltipId?: string): TooltipContextData
+}
 
-const TooltipContext = createContext<TooltipContextDataBuilder>(() => ({
+const defaultContextData: TooltipContextData = {
   anchorRefs: new Set(),
   activeAnchor: { current: null },
   attach: () => {
@@ -32,7 +35,10 @@ const TooltipContext = createContext<TooltipContextDataBuilder>(() => ({
   setActiveAnchor: () => {
     /* set active anchor */
   },
-}))
+}
+
+const defaultContextWrapper = Object.assign(() => defaultContextData, defaultContextData)
+const TooltipContext = createContext<TooltipContextDataWrapper>(defaultContextWrapper)
 
 const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const defaultTooltipId = useId()
@@ -73,7 +79,7 @@ const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
     })
   }
 
-  const context = useCallback(
+  const getTooltipData = useCallback(
     (tooltipId?: string) => ({
       anchorRefs: anchorRefMap[tooltipId ?? defaultTooltipId] ?? new Set(),
       activeAnchor: activeAnchorMap[tooltipId ?? defaultTooltipId] ?? { current: null },
@@ -84,9 +90,25 @@ const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
     [defaultTooltipId, anchorRefMap, activeAnchorMap, attach, detach],
   )
 
+  const context = useMemo(() => {
+    const contextData: TooltipContextData = getTooltipData(defaultTooltipId)
+    const contextWrapper = Object.assign(
+      (tooltipId?: string) => getTooltipData(tooltipId),
+      contextData,
+    )
+    return contextWrapper
+  }, [getTooltipData])
+
   return <TooltipContext.Provider value={context}>{children}</TooltipContext.Provider>
 }
 
+/*
+  // this will use the "global" tooltip (same as `useTooltip()()`)
+  const { anchorRefs, attach, detach } = useTooltip()
+
+  // this will use the tooltip with id `tooltip-id`
+  const { anchorRefs, attach, detach } = useTooltip()('tooltip-id')
+*/
 export function useTooltip() {
   return useContext(TooltipContext)
 }