refactor: improve internal provider api

also no longer using `useId()`

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -45,7 +45,7 @@ const Tooltip = ({
   const wasShowing = useRef(false)
   const [calculatingPosition, setCalculatingPosition] = useState(false)
   const lastFloatPosition = useRef<IPosition | null>(null)
-  const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id)
+  const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id)
   const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
   const hoveringTooltip = useRef(false)
 

src/components/TooltipController/TooltipController.tsx

@@ -49,7 +49,7 @@ const TooltipController = ({
   const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
   const [tooltipEvents, setTooltipEvents] = useState(events)
   const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
-  const { anchorRefs, activeAnchor } = useTooltip()(id)
+  const { anchorRefs, activeAnchor } = useTooltip(id)
 
   const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
     const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => {

src/components/TooltipProvider/TooltipProvider.tsx

@@ -3,41 +3,38 @@ import React, {
   PropsWithChildren,
   useCallback,
   useContext,
-  useId,
   useMemo,
   useState,
 } from 'react'
 
-import type {
-  AnchorRef,
-  TooltipContextData,
-  TooltipContextDataWrapper,
-} from './TooltipProviderTypes'
+import type { AnchorRef, TooltipContextData } from './TooltipProviderTypes'
+
+const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID'
 
 const defaultContextData: TooltipContextData = {
-  anchorRefs: new Set(),
-  activeAnchor: { current: null },
-  attach: () => {
-    /* attach anchor element */
-  },
-  detach: () => {
-    /* detach anchor element */
-  },
-  setActiveAnchor: () => {
-    /* set active anchor */
-  },
+  getTooltipData: () => ({
+    anchorRefs: new Set(),
+    activeAnchor: { current: null },
+    attach: () => {
+      /* attach anchor element */
+    },
+    detach: () => {
+      /* detach anchor element */
+    },
+    setActiveAnchor: () => {
+      /* set active anchor */
+    },
+  }),
 }
 
-const defaultContextWrapper = Object.assign(() => defaultContextData, defaultContextData)
-const TooltipContext = createContext<TooltipContextDataWrapper>(defaultContextWrapper)
+const TooltipContext = createContext<TooltipContextData>(defaultContextData)
 
 const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
-  const defaultTooltipId = useId()
   const [anchorRefMap, setAnchorRefMap] = useState<Record<string, Set<AnchorRef>>>({
-    [defaultTooltipId]: new Set(),
+    [DEFAULT_TOOLTIP_ID]: new Set(),
   })
   const [activeAnchorMap, setActiveAnchorMap] = useState<Record<string, AnchorRef>>({
-    [defaultTooltipId]: { current: null },
+    [DEFAULT_TOOLTIP_ID]: { current: null },
   })
 
   const attach = (tooltipId: string, ...refs: AnchorRef[]) => {
@@ -74,37 +71,27 @@ const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
   }
 
   const getTooltipData = useCallback(
-    (tooltipId?: string) => ({
-      anchorRefs: anchorRefMap[tooltipId ?? defaultTooltipId] ?? new Set(),
-      activeAnchor: activeAnchorMap[tooltipId ?? defaultTooltipId] ?? { current: null },
-      attach: (...refs: AnchorRef[]) => attach(tooltipId ?? defaultTooltipId, ...refs),
-      detach: (...refs: AnchorRef[]) => detach(tooltipId ?? defaultTooltipId, ...refs),
-      setActiveAnchor: (ref: AnchorRef) => setActiveAnchor(tooltipId ?? defaultTooltipId, ref),
+    (tooltipId = DEFAULT_TOOLTIP_ID) => ({
+      anchorRefs: anchorRefMap[tooltipId] ?? new Set(),
+      activeAnchor: activeAnchorMap[tooltipId] ?? { current: null },
+      attach: (...refs: AnchorRef[]) => attach(tooltipId, ...refs),
+      detach: (...refs: AnchorRef[]) => detach(tooltipId, ...refs),
+      setActiveAnchor: (ref: AnchorRef) => setActiveAnchor(tooltipId, ref),
     }),
-    [defaultTooltipId, anchorRefMap, activeAnchorMap, attach, detach],
+    [anchorRefMap, activeAnchorMap, attach, detach],
   )
 
   const context = useMemo(() => {
-    const contextData: TooltipContextData = getTooltipData(defaultTooltipId)
-    const contextWrapper = Object.assign(
-      (tooltipId?: string) => getTooltipData(tooltipId),
-      contextData,
-    )
-    return contextWrapper
+    return {
+      getTooltipData,
+    }
   }, [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)
+export function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
+  return useContext(TooltipContext).getTooltipData(tooltipId)
 }
 
 export default TooltipProvider

src/components/TooltipProvider/TooltipProviderTypes.d.ts

@@ -4,16 +4,13 @@ import type { ITooltipController } from 'components/TooltipController/TooltipCon
 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
+  getTooltipData: (tooltipId?: string) => {
+    anchorRefs: Set<AnchorRef>
+    activeAnchor: AnchorRef
+    attach: (...refs: AnchorRef[]) => void
+    detach: (...refs: AnchorRef[]) => void
+    setActiveAnchor: (ref: AnchorRef) => void
+  }
 }
 
 export interface ITooltipWrapper {

src/components/TooltipProvider/TooltipWrapper.tsx

@@ -18,7 +18,7 @@ const TooltipWrapper = ({
   delayShow,
   delayHide,
 }: ITooltipWrapper) => {
-  const { attach, detach } = useTooltip()(tooltipId)
+  const { attach, detach } = useTooltip(tooltipId)
   const anchorRef = useRef<HTMLElement | null>(null)
 
   useEffect(() => {