useModalAttributes

[<ReactComponent>]
let UseModalAttributesOptionsTest() =
    let isOpen, setIsOpen = React.useState false
    let attributes = Fui.useModalAttributes [
        useModalAttributesOptions.trapFocus true
    ]
    let dialogClass = dialogClass()

    let triggerRef = React.useRef<HTMLButtonElement option>(None)
    let dialogRef = React.useRef<HTMLDivElement option>(None)

    Html.div [
        Fui.button [
            button.ref triggerRef
            (attributes.triggerAttributes |> unbox<IButtonProp>)
            button.onClick (fun _ -> setIsOpen true)
            button.text "Open dialog"
        ]
        if isOpen then
            Html.div [
                prop.ref dialogRef
                attributes.modalAttributes
                prop.role "dialog"
                prop.className dialogClass
                prop.ariaLabel "Example dialog"
                prop.children [
                    Fui.text.title2 [
                        text.as'.h2
                        text.text "Example dialog"
                    ]
                    Html.div [
                        Fui.text "This is a dialog for example purposes"
                    ]
                    Html.div [
                        Fui.button [
                            button.text "Action"
                        ]
                        Fui.button [
                            button.onClick (fun _ -> setIsOpen false)
                            button.text "Close"
                        ]
                    ]
                ]
            ]
    ]