MUI Tree Select

Description

A MUI v5 compatible select that provides a compact user interface for navigating a tree structures.



!Navigate the Tree
!See Current Path
!Select Leaf Nodes
!See Value Path
!Supports Multiple Values

Usage

Live example here.

$3

Given the following tree node interface.

``
class Node {
constructor(value, parent = null, children = null) {
this.value = value;
this.parent = parent;
this.children = children;
}
}
`

1. Implement a getChildren method to tell Tree Select how to retrieve child nodes.

`
const rootNodes = [...] // Array of Nodes;
const getChildren = (node) => node === null ? rootNodes : node.children;
`

2. Implement a getParent method to tell Tree Select how to retrieve parent nodes.

`
const getParent = (node) => node.parent;
`

3. Implement a renderInput method required by Autocomplete.

`
const renderInput = (params) => ;
`

4. Pass to the MUI Tree Select.

`
return getChildren={getChildren}
getParent={getParent}
renderInput={renderInput}
/>;
`

Full documentation can be found here.

Notes

$3

This package wraps the MUI Autocomplete component. Many of props from this component are passed from TreeSelect.

$3

freeSolo values are wrapped in the class FreeSoloNode to provided a reference to the parent node under which the free solo value was created.

FreeSoloNode extends the native String object. This disallows "es5" as a target based on the way the typescript transpiler converts class semantics to function`.