Popover

A positioning component that displays content adjacent to a trigger element with intelligent boundary detection and arrangement options.

import { Popover, Button, T } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div style={{
      position: 'relative',
    }}>
      <Button onClick={() => setIsOpen(!isOpen)}>
        <T>Toggle</T>
      </Button>
      <Popover isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <div style={{
          padding: '40px',
          width: '200px',
          textAlign: 'center',
        }}>
          <T>Popover content</T>
        </div>
      </Popover>
    </div>
  )
}

The arrangement prop controls whether the popover extends vertically below or horizontally to the right of the trigger.

import { Popover, Button, T } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [isOpen1, setIsOpen1] = useState(false)
  const [isOpen2, setIsOpen2] = useState(false)

  return (
    <div style={{
      display: 'flex',
      gap: '40px',
    }}>
      <div style={{ position: 'relative' }}>
        <Button onClick={() => setIsOpen1(!isOpen1)}>
          <T>Vertical</T>
        </Button>
        <Popover isOpen={isOpen1} onClose={() => setIsOpen1(false)} arrangement='vertical'>
          <div style={{
            padding: '40px',
            width: '250px',
            textAlign: 'center',
          }}>
            <T>Vertical popover</T>
          </div>
        </Popover>
      </div>

      <div style={{ position: 'relative' }}>
        <Button onClick={() => setIsOpen2(!isOpen2)}>
          <T>Horizontal</T>
        </Button>
        <Popover isOpen={isOpen2} onClose={() => setIsOpen2(false)} arrangement='horizontal'>
          <div style={{
            padding: '40px',
            width: '250px',
            textAlign: 'center',
          }}>
            <T>Horizontal popover</T>
          </div>
        </Popover>
      </div>
    </div>
  )
}

<Popover />

ReactElement | ReactElement[]

boolean

(e: MouseEvent | KeyboardEvent) => void

'vertical' | 'horizontal'

{
  root: HTMLDivElementProps
}