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

Live example here.

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) => <TextField {...params} />;

4. Pass to the MUI Tree Select.

return <TreeSelect
  getChildren={getChildren}
  getParent={getParent}
  renderInput={renderInput}
/>;

Full documentation can be found here.

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

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.