Popover Positioning

[<ReactComponent>]
let PopoverTest () =
    let visible, setVisible = React.useState false
    let target, setTarget = React.useState None

    Fui.stack [
        stack.horizontal true
        stack.tokens [ stack.tokens.childrenGap 16 ]
        stack.children [
            // trigger button
            Fui.popover [
                popover.appearance.brand
                popover.positioning [
                    positioning.position.above
                    positioning.align.start
                    positioning.target target
                    positioning.coverTarget true
                    positioning.offset [
                        offset.crossAxis 25
                    ]
                ]
                popover.onOpenChange (fun (data: OpenProp) -> if data.``open`` = false then setVisible false)
                popover.children [
                    Fui.popoverTrigger [
                        popoverTrigger.disableButtonEnhancement true
                        popoverTrigger.children (
                            Fui.button [
                                button.text "Toggle Popover"
                            ]
                        )
                    ]
                    Fui.popoverSurface [
                        popoverSurface.style [ style.display.flex; style.flexDirection.column; style.height 100; style.alignContent.center; style.justifyContent.center ]
                        popoverSurface.children [
                            Fui.text "This is example content"
                            if visible then
                                Fui.text "This is the more stuff LOL"
                            else
                                Fui.button [
                                    button.text "Show more stuff"
                                    button.onClick (fun _ -> setVisible true)
                                ]
                        ]
                    ]
                ]
            ]
            // target button
            Fui.button [
                button.ref (fun t -> setTarget (Some t))
                button.text "Custom target"
            ]
        ]
    ]