useFocusFinders

[<ReactComponent>]
let UseFocusFindersTest() =
    let focusFinders = Fui.useFocusFinders()
    let findAllFocusable = focusFinders.findAllFocusable
    let count, setCount = React.useState 0
    let toolbarRef = React.useRef<HTMLDivElement option>(None)
    let attributes = Fui.useArrowNavigationGroup [
        useArrowNavigationGroupOptions.axis.horizontal
    ]

    let tokens = Theme.tokens

    React.useEffect((fun _ ->
        match toolbarRef.current with
        | Some ref ->
            let count = findAllFocusable ref None |> Seq.length
            setCount(count)
        | None -> ()

    ), [| unbox findAllFocusable |])

    Html.div [
        Html.div [
            prop.style [
                style.display.block
                style.backgroundColor tokens.colorBrandStroke1
                style.color tokens.colorNeutralForegroundOnBrand
                style.padding 4
                style.borderRadius 5
            ]
            prop.children [
                Fui.text.body1Stronger $"{count} focusable elements below"
            ]
        ]
        Html.div [
            prop.ref toolbarRef
            prop.ariaLabel "Editor toolbar example"
            prop.role "toolbar"
            attributes
            prop.style [
                style.display.flex
                style.gap 5
                style.padding 10
                style.border (2, borderStyle.solid, tokens.colorBrandStroke1)
                style.borderRadius 5
            ]
            prop.children [
                Fui.button [
                    button.ariaLabel "Bold"
                    button.icon (
                        Fui.icon.textBoldRegular []
                    )
                ]
                Fui.button [
                    button.ariaLabel "Underline"
                    button.icon (
                        Fui.icon.textUnderlineRegular []
                    )
                ]
                Fui.button [
                    button.ariaLabel "Italic"
                    button.icon (
                        Fui.icon.textItalicRegular []
                    )
                ]
                Fui.button [
                    button.ariaLabel "Align Left"
                    button.icon (
                        Fui.icon.textAlignLeftRegular []
                    )
                ]
                Fui.button [
                    button.ariaLabel "Align Right"
                    button.icon (
                        Fui.icon.textAlignRightRegular []
                    )
                ]
                Fui.button [
                    button.ariaLabel "Copy"
                    button.disabled true
                    button.icon (
                        Fui.icon.copyRegular []
                    )
                ]
                Fui.button [
                    button.ariaLabel "Cut"
                    button.disabled true
                    button.icon (
                        Fui.icon.cutRegular []
                    )
                ]
                Fui.button [
                    button.ariaLabel "Paste"
                    button.disabled true
                    button.icon (
                        Fui.icon.clipboardPasteRegular []
                    )
                ]
            ]
        ]
    ]