Popup Component

Props

The following table outlines the props for the Popup component:

NameTypeDefaultDescription
actionOnScroll
ActionOnScrollType
ActionOnScrollType.Reposition

Defines the behavior when the parent container is scrolled.

animation
PopupAnimationOptions
{ show: { name: 'FadeIn', duration: 0, timingFunction: 'ease-out' }, hide: { name: 'FadeOut', duration: 0, timingFunction: 'ease-out' } }

Specifies the animations that should happen when toast opens and closes.

autoReposition
boolean
false

Specifies whether the popup automatically adjusts its position when the content size changes.

collision
CollisionAxis
{ X: CollisionType.None, Y: CollisionType.None }

Object defining the collision handling on X and Y axis.

height
string | number
'auto'

Optional height of the popup.

offsetX
number
0

Horizontal offset for positioning the popup.

offsetY
number
0

Vertical offset for positioning the popup.

open
boolean
false

Controls whether the component is in open/expanded state. When true, the component will be displayed in its open state. When false, the component will be in its closed or collapsed state. If not provided, the component will use its default closed state.

position
PositionAxis
{X:'left', Y:'top'}

Defines the X and Y position of the popup relative to the target element.

relateTo
HTMLElement | string
'body'

Specifies the relative container element of the popup element.Based on the relative element, popup element will be positioned.

relativeElement
HTMLElement | null
null

Defines the popup relate's element when opening the popup.

targetRef
React.RefObject<HTMLElement>
-

Reference to the target element to which the popup is anchored.

targetType
TargetType
'relative'

Specifies how to interpret the anchor for positioning:

  • 'relative' => position relative to the anchor element's box (tooltip/dropdown)
  • 'container' => position relative to the container viewport (BODY or a panel)
viewPortElementRef
React.RefObject<HTMLElement | null>
null

Reference to an optional viewport element for collision detection.

width
string | number
'auto'

Optional width of the popup.

zIndex
number
1000

Z-index of the popup to manage stacking context.

Methods

The following table outlines the methods for the Popup component:

NameParametersReturnsDescription
getScrollableParent

  • element

    : HTMLElement
    • Element[]

    Identifies all scrollable parent elements of a given element.


    Params:
  • element: The element for which to find scrollable parents
    • refreshPosition
    -
    void

    Refreshes the popup's position based on the relative element and offset values.

    Events

    The following table outlines the events for the Popup component:

    NameTypeDescription
    onClose
    ( ) => void

    Callback invoked when the popup is closed.

    onOpen
    ( ) => void

    Callback invoked when the popup is opened.

    onTargetExitViewport
    ( ) => void

    Callback invoked when the target element exits the viewport.