useArrowNavigationGroup

type Styles = { useArrowNavigationGroup: string }

let useStyles: unit -> Styles = Fui.makeStyles [
    "useArrowNavigationGroup", [
        style.display.flex
        style.columnGap 15
    ]
]

[<ReactComponent>]
let UseArrowNavigationGroup () =
    let keyboardNavAttr = Fui.useArrowNavigationGroup [
        useArrowNavigationGroupOptions.circular true
        useArrowNavigationGroupOptions.ignoreDefaultKeydown [
            ignoreKeyDown.arrowDown true
            ignoreKeyDown.end' false
        ]
    ]

    let styles = useStyles()

    Html.div [
        prop.ariaLabel "Editor toolbar example"
        prop.role "toolbar"
        prop.className styles.useArrowNavigationGroup
        keyboardNavAttr
        prop.children [
            Fui.button [
                button.icon (Fui.icon.textBoldRegular [])
                button.ariaLabel "Bold"
            ]
            Fui.button [
                button.icon (Fui.icon.textUnderlineRegular [])
                button.ariaLabel "Underline"
            ]
            Fui.button [
                button.icon (Fui.icon.textUnderlineRegular [])
                button.ariaLabel "Underline"
            ]
            Fui.button [
                button.icon (Fui.icon.textItalicRegular [])
                button.ariaLabel "Italic"
            ]
            Fui.button [
                button.icon (Fui.icon.textAlignLeftRegular [])
                button.ariaLabel "Align Left"
            ]
            Fui.button [
                button.icon (Fui.icon.textAlignCenterRegular [])
                button.ariaLabel "Align Center"
            ]
            Fui.button [
                button.icon (Fui.icon.textAlignRightRegular [])
                button.ariaLabel "Align Right"
            ]
            Fui.button [
                button.icon (Fui.icon.copyRegular [])
                button.ariaLabel "Copy"
            ]
            Fui.button [
                button.icon (Fui.icon.cutRegular [])
                button.ariaLabel "Cut"
            ]
            Fui.button [
                button.icon (Fui.icon.clipboardPasteRegular [])
                button.ariaLabel "Paste"
            ]
        ]
    ]