FlatTree useHeadlessFlatTree_unstable

[<ReactComponent>]
let FlatTreeTest() =
    let items = [
        [ headlessTreeItem.value "1" ]
        [ headlessTreeItem.value "1-1"; headlessTreeItem.parentValue "1" ]
        [ headlessTreeItem.value "1-2"; headlessTreeItem.parentValue "1" ]
        [ headlessTreeItem.value "2" ]
        [ headlessTreeItem.value "2-1"; headlessTreeItem.parentValue "2" ]
        [ headlessTreeItem.value "2-1-1"; headlessTreeItem.parentValue "2-1" ]
        [ headlessTreeItem.value "2-2"; headlessTreeItem.parentValue "2" ]
        [ headlessTreeItem.value "2-2-1"; headlessTreeItem.parentValue "2-2" ]
        [ headlessTreeItem.value "2-2-2"; headlessTreeItem.parentValue "2-2" ]
        [ headlessTreeItem.value "3" ]
    ]

    let getContent value =
        match value with
        | "1" -> Fui.text "Level 1, item 1"
        | "1-1" -> Fui.text "Level 2, item 1"
        | "1-2" -> Fui.text "Level 2, item 2"
        | "2" -> Fui.text "Level 1, item 2"
        | "2-1" -> Fui.text "Level 2, item 1"
        | "2-1-1" -> Fui.text "Level 3, item 1"
        | "2-2" -> Fui.text "Level 2, item 2"
        | "2-2-1" -> Fui.text "Level 3, item 1"
        | "2-2-2" -> Fui.text "Level 3, item 2"
        | "3" -> Fui.text "Level 1, item 3"
        | _ -> Html.none

    let testFlatTree = Fui.useHeadlessFlatTree_unstable(items, [
            headlessFlatTreeOptions.defaultOpenItems ["1"; "2"; "2-1"; "2-2"]
            headlessFlatTreeOptions.defaultCheckedItems ["1-2"]
            headlessFlatTreeOptions.selectionMode.multiselect
        ]
    )

    let renderItem flatTreeItem =
        let treeItemProps = flatTreeItem.getTreeItemProps()

        Fui.treeItem [
            yield! treeItemProps |> treeItem.getProps
            treeItem.key flatTreeItem.value
            treeItem.children [
                Fui.treeItemLayout [
                    getContent treeItemProps.value
                ]
            ]
        ]

    Fui.flatTree [
        flatTree.ariaLabel "Selection"
        yield! testFlatTree.getTreeProps() |> flatTree.getProps
        flatTree.children [
            for flatTree in testFlatTree.items() do
                yield renderItem flatTree
        ]
    ]