Package Exports

mui-tree-select
mui-tree-select/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mui-tree-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Basic Requirements

Given the following tree node interface.

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

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;

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

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

Implement a renderInput method required by Autocomplete.

const renderInput = (params) => <TextField {...params} />;

Pass to the MUI Tree Select.

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

Full documentation can be found here.

Notes

Autocomplete

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

FreeSoloNode

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.