Filter tree

A hierarchical facet: a nested, searchable tree whose active selection binds to /selected. Picking a node writes it back to the data model and a bound summary reflects the choice.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "tree",            "echo"          ],          "gap": "md"        },        {          "id": "tree",          "component": "FilterTree",          "nodes": {            "path": "/tree"          },          "selectedId": {            "path": "/selected"          },          "rootLabel": "All teams",          "rootCount": 20,          "searchPlaceholder": "Search teams"        },        {          "id": "echo",          "component": "Callout",          "tone": "info",          "text": {            "path": "/selected"          }        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "selected": "all",        "tree": [          {            "id": "eng",            "label": "Engineering",            "count": 12,            "children": [              {                "id": "fe",                "label": "Frontend",                "count": 5              },              {                "id": "be",                "label": "Backend",                "count": 7              }            ]          },          {            "id": "design",            "label": "Design",            "count": 4,            "children": [              {                "id": "product",                "label": "Product design",                "count": 3              },              {                "id": "brand",                "label": "Brand",                "count": 1              }            ]          },          {            "id": "ops",            "label": "Operations",            "count": 4          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "tree",
            "echo"
          ],
          "gap": "md"
        },
        {
          "id": "tree",
          "component": "FilterTree",
          "nodes": {
            "path": "/tree"
          },
          "selectedId": {
            "path": "/selected"
          },
          "rootLabel": "All teams",
          "rootCount": 20,
          "searchPlaceholder": "Search teams"
        },
        {
          "id": "echo",
          "component": "Callout",
          "tone": "info",
          "text": {
            "path": "/selected"
          }
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "selected": "all",
        "tree": [
          {
            "id": "eng",
            "label": "Engineering",
            "count": 12,
            "children": [
              {
                "id": "fe",
                "label": "Frontend",
                "count": 5
              },
              {
                "id": "be",
                "label": "Backend",
                "count": 7
              }
            ]
          },
          {
            "id": "design",
            "label": "Design",
            "count": 4,
            "children": [
              {
                "id": "product",
                "label": "Product design",
                "count": 3
              },
              {
                "id": "brand",
                "label": "Brand",
                "count": 1
              }
            ]
          },
          {
            "id": "ops",
            "label": "Operations",
            "count": 4
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

all