feat: container context for tooltip, popout and overlay component (#92)

* feat: container context for tooltip, popout and overlay component

* fix: stop exporting container context

Author: ajbura

src/components/overlay/Overlay.tsx

@@ -1,26 +1,38 @@
-import React, { ReactNode } from "react";
+import React, { createContext, ReactNode, useContext } from "react";
 import classNames from "classnames";
 import * as css from "./Overlay.css";
 import { Portal } from "../portal";
 import { as } from "../as";
 
+const OverlayContainerContext = createContext<Element | DocumentFragment | undefined>(undefined);
+export const OverlayContainerProvider = OverlayContainerContext.Provider;
+export const useOverlayContainer = (): Element | DocumentFragment | undefined => {
+  const container = useContext(OverlayContainerContext);
+
+  return container;
+};
+
 export type OverlayProps = {
   open: boolean;
   container?: Element | DocumentFragment;
   backdrop?: ReactNode;
 };
 
 export const Overlay = as<"div", OverlayProps>(
-  ({ as: AsOverlay = "div", className, open, container, backdrop, children, ...props }, ref) => (
-    <Portal container={container}>
-      {open ? (
-        <AsOverlay className={classNames(css.Overlay, className)} {...props} ref={ref}>
-          {backdrop}
-          {children}
-        </AsOverlay>
-      ) : null}
-    </Portal>
-  )
+  ({ as: AsOverlay = "div", className, open, container, backdrop, children, ...props }, ref) => {
+    const contextContainer = useOverlayContainer();
+
+    return (
+      <Portal container={container ?? contextContainer}>
+        {open ? (
+          <AsOverlay className={classNames(css.Overlay, className)} {...props} ref={ref}>
+            {backdrop}
+            {children}
+          </AsOverlay>
+        ) : null}
+      </Portal>
+    );
+  }
 );
 
 export const OverlayBackdrop = as<"div">(

src/components/pop-out/PopOut.tsx

@@ -1,17 +1,34 @@
 import classNames from "classnames";
-import React, { ReactNode, useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from "react";
 import { as } from "../as";
 import { Portal } from "../portal";
 import { Align, getRelativeFixedPosition, Position, RectCords } from "../util";
 import * as css from "./PopOut.css";
 
+const PopOutContainerContext = createContext<Element | DocumentFragment | undefined>(undefined);
+export const PopOutContainerProvider = PopOutContainerContext.Provider;
+export const usePopOutContainer = (): Element | DocumentFragment | undefined => {
+  const container = useContext(PopOutContainerContext);
+
+  return container;
+};
+
 export interface PopOutProps {
   anchor?: RectCords;
   position?: Position;
   align?: Align;
   offset?: number;
   alignOffset?: number;
   content: ReactNode;
+  container?: Element | DocumentFragment;
 }
 export const PopOut = as<"div", PopOutProps>(
   (
@@ -25,11 +42,13 @@ export const PopOut = as<"div", PopOutProps>(
       alignOffset = 0,
       content,
       children,
+      container,
       ...props
     },
     ref
   ) => {
     const baseRef = useRef<HTMLDivElement>(null);
+    const contextContainer = usePopOutContainer();
 
     const positionPopOut = useCallback(() => {
       const baseEl = baseRef.current;
@@ -64,7 +83,7 @@ export const PopOut = as<"div", PopOutProps>(
       <>
         {children}
         {anchor && (
-          <Portal>
+          <Portal container={container ?? contextContainer}>
             <AsPopOut className={classNames(css.PopOut, className)} {...props} ref={ref}>
               <div ref={baseRef} className={css.PopOutContainer}>
                 {content}

src/components/tooltip/Tooltip.tsx

@@ -1,9 +1,11 @@
 import classNames from "classnames";
 import React, {
+  createContext,
   MutableRefObject,
   ReactNode,
   RefCallback,
   useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -14,6 +16,14 @@ import { Portal } from "../portal";
 import { Align, getRelativeFixedPosition, Position } from "../util";
 import * as css from "./Tooltip.css";
 
+const TooltipContainerContext = createContext<Element | DocumentFragment | undefined>(undefined);
+export const TooltipContainerProvider = TooltipContainerContext.Provider;
+export const useTooltipContainer = (): Element | DocumentFragment | undefined => {
+  const container = useContext(TooltipContainerContext);
+
+  return container;
+};
+
 export const Tooltip = as<"div", css.TooltipVariants>(
   ({ as: AsTooltip = "div", className, variant, radii, ...props }, ref) => (
     <AsTooltip
@@ -123,6 +133,7 @@ interface TooltipProviderProps {
   delay?: number;
   tooltip: ReactNode;
   children: (triggerRef: RefCallback<HTMLElement | SVGElement>) => ReactNode;
+  container?: Element | DocumentFragment;
 }
 export const TooltipProvider = as<"div", TooltipProviderProps>(
   (
@@ -136,17 +147,19 @@ export const TooltipProvider = as<"div", TooltipProviderProps>(
       delay = 200,
       tooltip,
       children,
+      container,
       ...props
     },
     ref
   ) => {
+    const contextContainer = useTooltipContainer();
     const { open, triggerRef, baseRef } = useTooltip(position, align, offset, alignOffset, delay);
 
     return (
       <>
         {children(triggerRef)}
         {open && (
-          <Portal>
+          <Portal container={container ?? contextContainer}>
             <AsTooltipProvider
               role="tooltip"
               className={classNames(css.TooltipProvider, className)}