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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 1x 1x 1x 5x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* WalkMe Positioning Module
*
* Wrapper around @floating-ui/react for smart element positioning.
* Handles auto-flip, scroll tracking, viewport containment, and arrow placement.
*/
'use client'
import { useRef } from 'react'
import {
useFloating,
autoUpdate,
offset,
flip,
shift,
arrow,
type Placement,
} from '@floating-ui/react'
import type { StepPosition } from '../types/walkme.types'
// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------
export interface PositionConfig {
placement: Placement
offset?: number
padding?: number
fallbackPlacements?: Placement[]
}
export interface StepPositioningResult {
refs: {
setReference: (el: HTMLElement | null) => void
setFloating: (el: HTMLElement | null) => void
}
floatingStyles: React.CSSProperties
placement: Placement
isPositioned: boolean
arrowRef: React.RefObject<HTMLDivElement | null>
middlewareData: Record<string, unknown>
}
// ---------------------------------------------------------------------------
// Utilities
// ---------------------------------------------------------------------------
/** Map StepPosition to @floating-ui Placement */
export function getPlacementFromPosition(position: StepPosition): Placement {
switch (position) {
case 'top':
return 'top'
case 'bottom':
return 'bottom'
case 'left':
return 'left'
case 'right':
return 'right'
case 'auto':
default:
return 'bottom'
}
}
/** Get current viewport information */
export function getViewportInfo(): {
width: number
height: number
scrollX: number
scrollY: number
} {
Iif (typeof window === 'undefined') {
return { width: 0, height: 0, scrollX: 0, scrollY: 0 }
}
return {
width: window.innerWidth,
height: window.innerHeight,
scrollX: window.scrollX,
scrollY: window.scrollY,
}
}
// ---------------------------------------------------------------------------
// Hook
// ---------------------------------------------------------------------------
/**
* Hook for positioning a floating step element relative to a target.
* Wraps @floating-ui/react with sensible defaults for WalkMe steps.
*/
export function useStepPositioning(
targetElement: HTMLElement | null,
config: PositionConfig,
): StepPositioningResult {
const arrowRef = useRef<HTMLDivElement>(null)
const { refs, floatingStyles, placement, isPositioned, middlewareData } =
useFloating({
placement: config.placement,
elements: {
reference: targetElement,
},
whileElementsMounted: autoUpdate,
middleware: [
offset(config.offset ?? 8),
flip({
fallbackPlacements: config.fallbackPlacements,
padding: config.padding ?? 8,
}),
shift({ padding: config.padding ?? 8 }),
arrow({ element: arrowRef }),
],
})
return {
refs: {
setReference: refs.setReference,
setFloating: refs.setFloating,
},
floatingStyles,
placement,
isPositioned,
arrowRef,
middlewareData,
}
}
|