Create AnchoredOverlay Component

[scurker]

An overlay is a layered element that temporarily covers other content on the page. This component should be anchored to a target element that is positionally displayed along the target element according to a specified anchor position.

Props

interface AnchoredOverlayProps<T extend HTMLElement = HTMLElement> 
  extends PolymorphicComponent<T> {

  /** A target element or element ref to render the as the overlay anchor target. */
  target: ElementOrRef<T>

  /** How to anchor the overlay element relative to the target. */
  placement?: { ... }

  /** Determines if the overlay is currently shown */
  open?: boolean

  /** An optional offset number to position the anchor element from its anchored target. */
  offset?: number

  /** A callback function that is called when the overlay state changes. */
  onOpenChange?: (open: boolean) => void

}

Implementation

The AnchoredOverlay is a primitive component that primarily contains behaviors to position an overlay element relative to its target and does not contain any default styles or classnames and is intended to be used in composition with other components. The style attributes to position the popover should be implement using floating-ui and placement arguments:

import { useFloating } from '@floating-ui/react-dom'

function AnchoredOverlay({
  as = 'div',
  open,
  target,
  placement,
  children
}: AnchoredOverlayProps): JSX.Element {
  const overlayRef = useRef<HTMLElement>()
  useFloating({
    placement,
    open,
    elements: {
      reference: resolveElement(target),
      floating: overlayRef
    }
  }
  const Component = as

  return (
    <Component ref={overlayRef}>
      {children}
    </Component>
  )
}

Note

Cauldron is currently using popperjs to manage tooltips. floatingui is the rebranding of popperjs with a new api, part of the work involved here will be making any necessary changes to accommodate tooltip and popover to use the updated library.

Escape behaviors should happen automatically as part of this component. When escape is detected, the onOpenChange callback should be invoked.