Portal

type Styles = { portalContainer: string; portal: string }

let useStyles: unit -> Styles = Fui.makeStyles [
    "portalContainer", [
        style.border(3, borderStyle.dashed, "gray")
        style.padding (length.px 5)
    ]
    "portal", [
        style.backgroundColor tokens.colorPaletteYellowBackground3
        style.border(3, borderStyle.dashed, "gray")
        style.padding (length.px 5)
    ]
]

[<ReactComponent>]
let Portal () =
    let styles = useStyles()
    let rootElement, setRootElement = React.useState(None)

    Html.div [
        Html.div [
            prop.className styles.portalContainer
            prop.style [ style.overflow.hidden ]
            prop.children [
                Fui.text "Clipping parent container"
                Fui.portal [
                    portal.mountNode rootElement
                    portal.children [
                        Html.div [
                            prop.className styles.portal
                            prop.text "Portal content"
                        ]
                    ]
                ]
            ]
        ]
        Html.div [
            prop.ref (fun e -> setRootElement (Some e))
        ]
    ]