# All files / src/Overlay useOverlay.ts

100% Statements 14/14
100% Branches 0/0
100% Functions 1/1
100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    6659x

    59x

    59x
    193x
    193x

    193x
    193x
    193x
    193x
    193x
    193x
    193x
    193x

    193x

     import {
      autoUpdate,
      Middleware,
      MiddlewareData,
      offset,
      Placement as FloatingPlacement,
      ReferenceType,
      useFloating,
    } from '@floating-ui/react-dom'
    import { CSSProperties } from 'react'
    import { getPlacement, Placement } from '../_utils/placement'

    export type OverlayOffsetValue = Parameters<typeof offset>[0]

    export type OverlayRefType = (node: HTMLElement | null) => void

    export type ReferenceRefType = (node: ReferenceType | null) => void

    export type OverlayMiddleware = Middleware

    export type OverlayPlacement = FloatingPlacement

    export function useOverlay({
      placement,
      middleware,
    }: {
      placement: Placement
      middleware?: Middleware[]
    }): {
      overlayRef: (node: HTMLElement | null) => void
      referenceRef: (node: ReferenceType | null) => void
      /** Dimensions of the floating element should not change before and after being positioned
       * https://floating-ui.com/docs/computeposition#initial-layout
       * https://github.com/floating-ui/floating-ui/issues/1740 */
      overlayStyle: CSSProperties
      middlewareData: MiddlewareData
      placement: OverlayPlacement
    } {
      const {
        middlewareData,
        placement: currentPlacement,
        reference: referenceRef,
        floating: overlayRef,
        x,
        y,
        strategy,
      } = useFloating({
        strategy: 'fixed',
        whileElementsMounted: autoUpdate,
        placement: getPlacement(placement),
        middleware,
      })
      return {
        overlayStyle: {
          left: `${x}px`,
          top: `${y}px`,
          position: strategy,
          width: 'max-content',
        },
        overlayRef,
        referenceRef,
        middlewareData,
        placement: currentPlacement,
      }
    }