@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.61

package/dist/cjs/tree/TreePanel.js

@@ -7,11 +7,10 @@ var form = require('@react-fabric/form');
 var reactVirtual = require('@tanstack/react-virtual');
 var react = require('react');
 var TreeNode = require('./TreeNode.js');
-var types = require('./types.js');
 var useTree = require('./useTree.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "searchable", "selectable", "multiple", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TreePanel = function TreePanel(_ref) {
@@ -22,33 +21,51 @@ var TreePanel = function TreePanel(_ref) {
     checked = _ref.checked,
     checkable = _ref.checkable,
     noLines = _ref.noLines,
-    renderer = _ref.renderer,
     searchable = _ref.searchable,
     selectable = _ref.selectable,
+    multiple = _ref.multiple,
     matcher = _ref.matcher,
     filterPlaceholder = _ref.filterPlaceholder,
     defaultLeafIcon = _ref.defaultLeafIcon,
     defaultNodeIcon = _ref.defaultNodeIcon,
     _ref$expander = _ref.expander,
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
-    onChecked = _ref.onChecked;
-    _ref.onLoad;
-    var onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked,
+    onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
+    onSelect = _ref.onSelect,
+    onClick = _ref.onClick,
+    sorter = _ref.sorter,
+    makeLabel = _ref.makeLabel,
+    makeIcon = _ref.makeIcon,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle,
+    leafClassName = _ref.leafClassName,
+    nodeClassName = _ref.nodeClassName,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useTree = useTree.useTree({
       items: items,
       checked: checked,
       selected: selected,
+      multiple: multiple,
       matcher: matcher,
+      sorter: sorter,
+      onLoad: onLoad,
+      onQuery: onQuery,
       onSelect: onSelect,
-      onChecked: onChecked
+      onChecked: onChecked,
+      defaultExpanded: defaultExpanded,
+      onExpandToggle: onExpandToggle
     }),
     tree = _useTree.tree,
+    query = _useTree.query,
+    currentSelected = _useTree.selected,
     toggleExpand = _useTree.toggleExpand,
     toggleCheck = _useTree.toggleCheck,
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
-    select = _useTree.select,
+    expandAndLoad = _useTree.expandAndLoad,
+    _select = _useTree.select,
     expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = react.useRef(null);
@@ -63,32 +80,44 @@ var TreePanel = function TreePanel(_ref) {
   });
   var virtualItems = virtualizer.getVirtualItems();
   var expanders = react.useMemo(function () {
-    if (expander === "caret") return [core.CoreIcons.caretRight, core.CoreIcons.caretDown];
-    if (expander === "chevron") return [core.CoreIcons.chevronRight, core.CoreIcons.chevronDown];
-    if (expander === "folder") return [core.CoreIcons.folderClosed, core.CoreIcons.folderOpen];
-    return [core.CoreIcons.expand, core.CoreIcons.collapse];
+    if (expander === "caret") return ["icon-[mdi--menu-right]", "icon-[mdi--menu-down]"];
+    if (expander === "chevron") return ["icon-[mdi--chevron-right]", "icon-[mdi--chevron-down]"];
+    if (expander === "folder") return ["icon-[mdi--folder-outline]", "icon-[mdi--folder-open-outline]"];
+    return ["icon-[mdi--plus-box-outline]", "icon-[mdi--minus-box-outline]"];
   }, [expander]);
   react.useImperativeHandle(ref, function () {
     return {
       open: function open(id) {
         return expand(id);
       },
+      openAndLoad: function openAndLoad(list) {
+        return expandAndLoad(list);
+      },
       select: function select(id) {
-        return expand(id);
+        return _select(id);
       }
     };
   }, []);
+  react.useEffect(function () {
+    var index = tree.findIndex(function (n) {
+      return n.id === currentSelected;
+    });
+    virtualizer.scrollToIndex(index, {
+      align: "auto"
+    });
+  }, [currentSelected]);
   return /*#__PURE__*/jsxRuntime.jsxs(core.Section, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(core.Header, {
       flex: true,
       className: "items-center p-px justify-end overflow-hidden border-b",
       children: [searchable && /*#__PURE__*/jsxRuntime.jsx(form.Search, {
+        value: query,
         onSearch: onFilter,
         allowClear: true,
         placeholder: filterPlaceholder,
         noBorder: true,
         decorateStart: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-          icon: core.CoreIcons.filter,
+          icon: "icon-[mdi--filter-variant]",
           className: "p-1"
         })
       }), /*#__PURE__*/jsxRuntime.jsxs(core.ButtonGroup, {
@@ -97,12 +126,12 @@ var TreePanel = function TreePanel(_ref) {
         children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
           size: "sm",
           "aria-label": "expand all",
-          icon: types.iconExpandAll,
+          icon: "icon-[mdi--arrow-expand-vertical]",
           onClick: expandAll
         }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
           size: "sm",
           "aria-label": "collapse all",
-          icon: types.iconCollapseAll,
+          icon: "icon-[mdi--arrow-collapse-vertical]",
           onClick: collapseAll
         })]
       })]
@@ -120,6 +149,7 @@ var TreePanel = function TreePanel(_ref) {
             height: (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start
           }
         }), virtualItems.map(function (_ref2) {
+          var _makeIcon, _ref3;
           var index = _ref2.index,
             key = _ref2.key;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -132,11 +162,14 @@ var TreePanel = function TreePanel(_ref) {
               checkable: checkable,
               selectable: selectable,
               defaultLeafIcon: defaultLeafIcon,
-              defaultNodeIcon: defaultNodeIcon,
+              defaultNodeIcon: (_makeIcon = makeIcon === null || makeIcon === void 0 ? void 0 : makeIcon(tree[index].data)) !== null && _makeIcon !== void 0 ? _makeIcon : defaultNodeIcon,
               onToggle: toggleExpand,
               onChecked: toggleCheck,
-              onSelect: select,
-              children: tree[index].data && (renderer === null || renderer === void 0 ? void 0 : renderer(tree[index].data)) || tree[index].label
+              onSelect: _select,
+              onClick: onClick,
+              leafClassName: leafClassName,
+              nodeClassName: nodeClassName,
+              children: (_ref3 = tree[index].data && (makeLabel === null || makeLabel === void 0 ? void 0 : makeLabel(tree[index].data))) !== null && _ref3 !== void 0 ? _ref3 : tree[index].label
             })
           }, key);
         })]

package/dist/cjs/tree/useTree.js

@@ -2,6 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var memoizeOne = require('memoize-one');
@@ -19,39 +20,137 @@ var useTree = function useTree(_ref) {
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? utilities.EMPTY_ARRAY : _ref$checked,
     selected = _ref.selected,
+    multiple = _ref.multiple,
+    sorter = _ref.sorter,
     matcher = _ref.matcher,
+    onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
-    onChecked = _ref.onChecked;
-  var componentEvents = react.useRef({
-    onSelect: onSelect,
-    onChecked: onChecked
+    onChecked = _ref.onChecked,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle;
+  var eventSelect = react.useEffectEvent(onSelect !== null && onSelect !== void 0 ? onSelect : function () {
+    return undefined;
   });
+  var eventChecked = react.useEffectEvent(onChecked !== null && onChecked !== void 0 ? onChecked : function () {
+    return undefined;
+  });
+  var intialExpand = react.useRef(_toConsumableArray(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : utilities.EMPTY_ARRAY));
   var itemList = createItemList(items);
+  var fireExpandToggle = react.useCallback(function (itemMap) {
+    var expandedList = itemMap.filter(function (node) {
+      return node.open;
+    }).map(function (node) {
+      return node.id;
+    });
+    setTimeout(function () {
+      return onExpandToggle === null || onExpandToggle === void 0 ? void 0 : onExpandToggle(expandedList);
+    }, 100);
+  }, [onExpandToggle]);
+  var loadChildren = react.useCallback(function (node) {
+    var _node$children;
+    if (node.open && !node.leaf && !((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length)) {
+      node.loading = true;
+      // delay onload callback to avoid state issues
+      setTimeout(function () {
+        void Promise.resolve(onLoad === null || onLoad === void 0 ? void 0 : onLoad(node.id)).then(function () {
+          var resp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : utilities.EMPTY_ARRAY;
+          node.children = utils.refactorTree(resp, {
+            sorter: sorter,
+            defaultExpanded: defaultExpanded
+          }, {
+            level: node.level + 1,
+            parent: node.id
+          });
+        })["finally"](function () {
+          var _intialExpand$current;
+          node.loading = false;
+          dispatch({
+            type: "loaded"
+          });
+          ((_intialExpand$current = intialExpand.current) === null || _intialExpand$current === void 0 ? void 0 : _intialExpand$current.length) > 0 && dispatch({
+            type: "expand",
+            id: intialExpand.current.shift()
+          });
+        });
+      }, 100);
+    } else {
+      var _intialExpand$current2;
+      dispatch({
+        type: "loaded"
+      });
+      ((_intialExpand$current2 = intialExpand.current) === null || _intialExpand$current2 === void 0 ? void 0 : _intialExpand$current2.length) > 0 && dispatch({
+        type: "expand",
+        id: intialExpand.current.shift()
+      });
+    }
+  }, [onLoad]);
+  var fireSelected = core.useDebounce(function (nodeId, data) {
+    eventSelect(nodeId, data);
+  }, []);
+  var fireChecked = core.useDebounce(function (leafs, nodes, partials) {
+    eventChecked(leafs, nodes, partials);
+  }, []);
+  var fireQuery = core.useDebounce(function (query) {
+    onQuery === null || onQuery === void 0 || onQuery(query);
+  }, [onQuery]);
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "load") {
-        state.items = utils.refactorTree(action.items);
+        state.items = utils.refactorTree(action.items, {
+          sorter: sorter,
+          defaultExpanded: defaultExpanded
+        });
         state.itemMap = utils.makeTreeMap(state.items);
         state.tree = utils.flattenTree(state.items);
+        state.selected = undefined;
+        state.checked = undefined;
+        state.query = "";
         return _objectSpread({}, state);
       }
       if (action.type === "toggleExpand") {
         var node = state.itemMap.get(action.id);
-        node && (node.open = !node.open);
+        if (node && !node.leaf) {
+          node && (node.open = !node.open);
+          loadChildren(node);
+          return _objectSpread({}, state);
+        }
+      }
+      if (action.type === "loaded") {
+        var _state$checked;
+        state.itemMap = utils.makeTreeMap(state.items);
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
+        state.selected = selected;
+        utils.updateSelection({
+          nodes: state.itemMap,
+          multiple: multiple,
+          selected: selected
+        });
+        (_state$checked = state.checked) === null || _state$checked === void 0 || _state$checked.forEach(function (id) {
+          return utils.updateChecked(state.itemMap, id, 1);
+        });
         return _objectSpread({}, state);
       }
       if (action.type === "expand") {
-        // TODO: check if children available, if not call onLoad to fetch node children
         var _node = state.itemMap.get(action.id);
-        _node && (_node.open = true);
-        state.tree = utils.flattenTree(state.items);
-        return _objectSpread({}, state);
+        if (_node && !_node.leaf) {
+          _node.open = true;
+          var parentId = _node.parent;
+          while (parentId) {
+            var _node2 = state.itemMap.get(parentId);
+            _node2 && (_node2.open = true);
+            parentId = _node2 === null || _node2 === void 0 ? void 0 : _node2.parent;
+          }
+          loadChildren(_node);
+          return _objectSpread({}, state);
+        }
       }
       if (action.type === "expandAll") {
-        // TODO: prevent opening dynamic nodes that dont have children
         state.itemMap.forEach(function (node) {
-          !node.leaf && (node.open = true);
+          var _node$children2;
+          !node.leaf && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) && (node.open = true);
         });
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -59,41 +158,81 @@ var useTree = function useTree(_ref) {
         state.itemMap.forEach(function (node) {
           !node.leaf && (node.open = false);
         });
+        fireExpandToggle([]);
         state.tree = utils.flattenTree(state.items);
         return _objectSpread({}, state);
       }
       if (action.type === "filter") {
-        utils.filterTree(state.itemMap, action.query, matcher);
+        if (onQuery) {
+          // TODO: onQuery should provide new tree listing
+          // save current tree state as preQueryState
+          // on clearing filter restore preQueryState
+          if (!utilities.isEmpty(action.query)) {
+            // state.prevItems = state.items;
+            fireQuery(action.query);
+          }
+        } else {
+          utils.filterTree(state.itemMap, action.query, matcher);
+          state.tree = utils.flattenTree(state.items);
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          query: action.query
+        });
+      }
+      if (action.type === "toggleSelect") {
+        var _state$itemMap$get;
+        if (multiple) {
+          var _state$selected, _state$selected$filte, _state$selected2, _state$selected3;
+          var isSelected = (_state$selected = state.selected) === null || _state$selected === void 0 ? void 0 : _state$selected.includes(action.id);
+          if (action.shiftKey && isSelected) state.selected = (_state$selected$filte = (_state$selected2 = state.selected) === null || _state$selected2 === void 0 ? void 0 : _state$selected2.filter(function (id) {
+            return id !== action.id;
+          })) !== null && _state$selected$filte !== void 0 ? _state$selected$filte : [];else if (action.shiftKey && !isSelected) state.selected = [].concat(_toConsumableArray((_state$selected3 = state.selected) !== null && _state$selected3 !== void 0 ? _state$selected3 : []), [action.id]);else state.selected = [action.id];
+        } else {
+          state.selected = action.id;
+        }
+        utils.updateSelection({
+          nodes: state.itemMap,
+          selected: state.selected,
+          multiple: multiple
+        });
         state.tree = utils.flattenTree(state.items);
+        fireSelected(state.selected, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
         return _objectSpread({}, state);
       }
       if (action.type === "select") {
-        var _componentEvents$curr, _componentEvents$curr2;
-        if (state.selected) {
-          utils.updateSelection(state.itemMap, state.selected);
-        }
-        utils.updateSelection(state.itemMap, action.id, true);
-        state.tree = utils.flattenTree(state.items);
-        (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, action.id);
-        return _objectSpread(_objectSpread({}, state), {}, {
+        state.selected = action.id;
+        utils.updateSelection({
+          nodes: state.itemMap,
+          multiple: multiple,
           selected: action.id
         });
+        state.tree = utils.flattenTree(state.items);
+        return _objectSpread({}, state);
       }
       if (action.type === "toggleCheck") {
-        var _componentEvents$curr3, _componentEvents$curr4;
         utils.updateChecked(state.itemMap, action.id);
-        var checkList = [[], []];
+        var checkList = [[], [], []];
         Array.from(state.itemMap.values()).filter(function (node) {
-          return node.checked === 1;
+          return node.checked !== 0;
         }).forEach(function (node) {
-          return checkList[node.leaf ? 0 : 1].push(node.id);
+          return checkList[node.leaf ? 0 : node.checked].push(node.id);
+        });
+        fireChecked(checkList[0],
+        // leafs
+        checkList[1],
+        // nodes
+        checkList[2] // partials
+        );
+        return _objectSpread(_objectSpread({}, state), {}, {
+          checked: checkList[0]
         });
-        (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, checkList[0], checkList[1]);
-        return _objectSpread({}, state);
       }
       if (action.type === "checked") {
+        state.itemMap.forEach(function (item) {
+          return item.checked = 0;
+        });
         action.id.forEach(function (id) {
-          return utils.updateChecked(state.itemMap, id);
+          return utils.updateChecked(state.itemMap, id, 1);
         });
         return _objectSpread(_objectSpread({}, state), {}, {
           checked: action.id
@@ -104,22 +243,30 @@ var useTree = function useTree(_ref) {
       itemMap: new Map(),
       items: [],
       tree: [],
-      checked: []
+      checked: [],
+      query: ""
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
   react.useEffect(function () {
-    componentEvents.current = {
-      onSelect: onSelect,
-      onChecked: onChecked
-    };
-  }, [onSelect, onChecked]);
-  react.useEffect(function () {
+    var _intialExpand$current3;
     dispatch({
       type: "load",
       items: itemList
     });
+    itemList.length && ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
+      type: "expand",
+      id: intialExpand.current.shift()
+    });
+    selected && dispatch({
+      type: "select",
+      id: selected
+    });
+    checked && dispatch({
+      type: "checked",
+      id: checked
+    });
   }, [itemList]);
   react.useEffect(function () {
     selected && dispatch({
@@ -146,9 +293,11 @@ var useTree = function useTree(_ref) {
     });
   }, []);
   var select = react.useCallback(function (id) {
+    var shiftKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     dispatch({
-      type: "select",
-      id: id
+      type: "toggleSelect",
+      id: id,
+      shiftKey: shiftKey
     });
   }, []);
   var expand = react.useCallback(function (id) {
@@ -157,6 +306,15 @@ var useTree = function useTree(_ref) {
       id: id
     });
   }, []);
+  var expandAndLoad = react.useCallback(function (expandList) {
+    if (expandList.length > 0) {
+      intialExpand.current = _toConsumableArray(expandList);
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift()
+      });
+    }
+  }, []);
   var expandAll = react.useCallback(function () {
     dispatch({
       type: "expandAll"
@@ -172,13 +330,16 @@ var useTree = function useTree(_ref) {
       type: "filter",
       query: query
     });
-  }, []);
+  }, [], 300);
   return {
     tree: state.tree,
+    query: state.query,
+    selected: state.selected,
     toggleExpand: toggleExpand,
     expandAll: expandAll,
     collapseAll: collapseAll,
     toggleCheck: toggleCheck,
+    expandAndLoad: expandAndLoad,
     select: select,
     expand: expand,
     onFilter: onFilter

package/dist/cjs/tree/utils.js

@@ -6,7 +6,7 @@ var utilities = require('@react-fabric/utilities');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var sorter = function sorter(a, b) {
+var defaultSorter = function defaultSorter(a, b) {
   if (!!a.leaf !== !!b.leaf) return a.leaf ? 1 : -1;
   return utilities.compareValues()(a.label, b.label);
 };
@@ -28,15 +28,21 @@ var getIntermediate = function getIntermediate() {
 };
 
 // convert node item to internal node used by the tree
-var refactorTree = function refactorTree(nodes) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+var refactorTree = function refactorTree(nodes, _ref) {
+  var _ref$sorter = _ref.sorter,
+    sorter = _ref$sorter === void 0 ? defaultSorter : _ref$sorter,
+    _ref$defaultExpanded = _ref.defaultExpanded,
+    defaultExpanded = _ref$defaultExpanded === void 0 ? [] : _ref$defaultExpanded;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     level: 0,
     parent: undefined
   };
   var list = [];
-  nodes.sort(sorter).forEach(function (node) {
+  if (sorter !== false) nodes = nodes.sort(sorter);
+  nodes.forEach(function (node) {
+    var _node$children;
     list.push(_objectSpread(_objectSpread({
-      open: false,
+      open: defaultExpanded.includes(node.id) && !!((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -47,6 +53,9 @@ var refactorTree = function refactorTree(nodes) {
     }, node), {}, {
       leaf: !!node.leaf,
       children: node.children && refactorTree(node.children, {
+        sorter: sorter,
+        defaultExpanded: defaultExpanded
+      }, {
         level: options.level + 1,
         parent: node.id
       })
@@ -72,33 +81,51 @@ var flattenTree = function flattenTree(nodes) {
     return !node.filtered;
   });
   filtered.forEach(function (node, idx) {
+    var _node$children2;
     node.lines = [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 2 : 3]);
     list.push(node);
     (node.open || node.childFiltered) && node.children && list.push.apply(list, _toConsumableArray(flattenTree(node.children.filter(function (child) {
       return !child.filtered;
     }), [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1]))));
+    node.open && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) === 0 && list.push({
+      empty: true,
+      leaf: true,
+      lines: [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1, 2])
+    });
   });
   return list;
 };
-var updateSelection = function updateSelection(nodes, id, selected) {
-  var node = nodes.get(id);
+var selectNode = function selectNode(nodes, id) {
+  var node = nodes.get(id !== null && id !== void 0 ? id : "");
   if (node) {
     // change selection
-    node.selected = selected;
+    node.selected = true;
     // update all parent childSelected flag
     var parent = node.parent;
     while (parent) {
       var parentNode = nodes.get(parent);
-      parentNode && (parentNode.childSelected = selected);
-      selected && parentNode && (parentNode.open = true);
+      parentNode && (parentNode.childSelected = true);
+      // selected && parentNode && (parentNode.open = true);
       parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
     }
   }
 };
-var updateChecked = function updateChecked(list, id) {
+var updateSelection = function updateSelection(_ref2) {
+  var nodes = _ref2.nodes,
+    multiple = _ref2.multiple,
+    selected = _ref2.selected;
+  nodes.forEach(function (node) {
+    node.selected = undefined;
+    node.childSelected = undefined;
+  });
+  multiple && utilities.isArray(selected) ? selected === null || selected === void 0 ? void 0 : selected.forEach(function (id) {
+    return selectNode(nodes, id);
+  }) : selectNode(nodes, selected);
+};
+var updateChecked = function updateChecked(list, id, checked) {
   var node = list.get(id);
   if (node) {
-    node.checked = node.checked === 1 ? 0 : 1;
+    node.checked = (checked !== null && checked !== void 0 ? checked : node.checked === 0) ? 1 : 0;
     // check all children
     node.children && getChildren(node.children).forEach(function (child) {
       return child.checked = node.checked;