@react-fabric/data 1.0.0-beta.0

package/dist/cjs/table/useVirtualTable.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var reactVirtual = require('@tanstack/react-virtual');
+var react = require('react');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var useVirtualTable = function useVirtualTable(data) {
+  // TODO: refactor data into item list, apply grouping if groupColumn provided
+  // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
+
+  var scrollerRef = react.useRef(null);
+  var virtualizer = reactVirtual.useVirtualizer({
+    count: data.length,
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return 24;
+    }
+  });
+  var virtualItems = virtualizer.getVirtualItems();
+  var getData = react.useCallback(function (index) {
+    return data[index];
+  }, [data]);
+  return {
+    scrollerRef: scrollerRef,
+    items: virtualItems,
+    getData: getData,
+    totalSize: virtualizer.getTotalSize,
+    measureElement: virtualizer.measureElement
+  };
+};
+
+exports.useVirtualTable = useVirtualTable;

package/dist/cjs/tree/TreeNode.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var core = require('@react-fabric/core');
+var classNames = require('classnames');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 TreeNode = function TreeNode(_ref) {
+  var node = _ref.node,
+    noLines = _ref.noLines,
+    expanders = _ref.expanders,
+    checkable = _ref.checkable,
+    selectable = _ref.selectable,
+    defaultLeafIcon = _ref.defaultLeafIcon,
+    defaultNodeIcon = _ref.defaultNodeIcon,
+    onToggle = _ref.onToggle,
+    onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked,
+    children = _ref.children;
+  var badgeProps = react.useMemo(function () {
+    return core.getBadgeProps(node.badge);
+  }, [node.badge]);
+  var filler = react.useMemo(function () {
+    return node.lines.slice(noLines ? 1 : 0).map(function (line, idx) {
+      return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+        viewBox: "0 0 24 24",
+        className: "flex-initial w-6 fill-tint-200",
+        children: [line === 0 && /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: ""
+        }), !noLines && line === 1 && /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M7.45 26.1v-28.2h1.1v28.2h-1.1z"
+        }), !noLines && line === 2 && /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z"
+        }), !noLines && line === 3 && /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z"
+        })]
+      }, idx);
+    });
+  }, [noLines, node.lines]);
+  var nodeIcon = react.useMemo(function () {
+    if (node.icon) return node.icon;
+    return node.leaf ? defaultLeafIcon : defaultNodeIcon;
+  }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
+  var canCheck = react.useMemo(function () {
+    return checkable === true || checkable === "leafOnly" && node.leaf;
+  }, [node.leaf, checkable]);
+  var canSelect = react.useMemo(function () {
+    return !node.disabled && (selectable === true || selectable === "leafOnly" && node.leaf);
+  }, [node.leaf, node.disabled, selectable]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    role: "treeitem",
+    "aria-selected": node.selected,
+    className: "flex flex-nowrap",
+    "data-testid": node["data-testid"],
+    "data-test-value": node["data-test-value"],
+    children: [filler, !node.leaf && !node.childFiltered && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        rtlFlip: true,
+        onClick: function onClick() {
+          return !node.leaf && onToggle(node.id);
+        },
+        icon: node.open ? expanders[1] : expanders[0],
+        className: "text-tint-600 hover:text-primary-600"
+      })
+    }), canCheck && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        onClick: function onClick() {
+          return !node.disabled && onChecked(node.id);
+        },
+        icon: node.checked === 2 ? core.CoreIcons.checkboxInt : node.checked === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
+        className: classNames(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      role: "none",
+      className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 items-center overflow-hidden select-none", node.childSelected && "font-medium", canSelect && "hover:bg-primary-50 cursor-pointer"),
+      "data-selected": node.selected,
+      onClick: function onClick() {
+        return canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
+      },
+      children: [nodeIcon && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-content w-6",
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          icon: nodeIcon,
+          bg: node.iconBg,
+          color: node.iconColor,
+          rtlFlip: node.rtlFlip
+        })
+      }), node.childSelected && !node.open && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: " flex-content text-primary-500",
+        children: "\u2022"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        role: "none",
+        className: "flex-1 truncate",
+        children: children
+      }), node.badge && /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+        className: classNames("me-1 self-center flex-content bg-opacity-50", badgeProps.className)
+      }))]
+    })]
+  });
+};
+
+exports.TreeNode = TreeNode;

package/dist/cjs/tree/TreePanel.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@react-fabric/core');
+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 = ["items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+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) {
+  var _virtualItems$;
+  var items = _ref.items,
+    selected = _ref.selected,
+    checked = _ref.checked,
+    checkable = _ref.checkable,
+    noLines = _ref.noLines,
+    renderer = _ref.renderer,
+    searchable = _ref.searchable,
+    selectable = _ref.selectable,
+    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,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useTree = useTree.useTree({
+      items: items,
+      checked: checked,
+      selected: selected,
+      matcher: matcher,
+      onSelect: onSelect,
+      onChecked: onChecked
+    }),
+    tree = _useTree.tree,
+    toggleExpand = _useTree.toggleExpand,
+    toggleCheck = _useTree.toggleCheck,
+    expandAll = _useTree.expandAll,
+    collapseAll = _useTree.collapseAll,
+    select = _useTree.select,
+    onFilter = _useTree.onFilter;
+  var scrollerRef = react.useRef(null);
+  var virtualizer = reactVirtual.useVirtualizer({
+    count: tree.length,
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return 24;
+    }
+  });
+  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];
+  }, [expander]);
+  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, {
+        onSearch: onFilter,
+        allowClear: true,
+        placeholder: filterPlaceholder,
+        noBorder: true,
+        decorateStart: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          icon: core.CoreIcons.filter,
+          className: "p-1"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.ButtonGroup, {
+        variant: "link",
+        className: "m-0",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          size: "sm",
+          "aria-label": "expand all",
+          icon: types.iconExpandAll,
+          onClick: expandAll
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          size: "sm",
+          "aria-label": "collapse all",
+          icon: types.iconCollapseAll,
+          onClick: collapseAll
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+      ref: scrollerRef,
+      role: "tree",
+      className: "area-content overflow-auto p-1"
+    }, aria), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          height: virtualizer.getTotalSize()
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            height: (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start
+          }
+        }), virtualItems.map(function (_ref2) {
+          var index = _ref2.index,
+            key = _ref2.key;
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            "data-index": index,
+            ref: virtualizer.measureElement,
+            children: /*#__PURE__*/jsxRuntime.jsx(TreeNode.TreeNode, {
+              node: tree[index],
+              noLines: noLines,
+              expanders: expanders,
+              checkable: checkable,
+              selectable: selectable,
+              defaultLeafIcon: defaultLeafIcon,
+              defaultNodeIcon: 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
+            })
+          }, key);
+        })]
+      })
+    }))]
+  });
+};
+
+exports.TreePanel = TreePanel;

package/dist/cjs/tree/types.js

@@ -0,0 +1,30 @@
+'use strict';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
+var iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
+
+exports.iconCollapseAll = iconCollapseAll;
+exports.iconExpandAll = iconExpandAll;

package/dist/cjs/tree/useTree.js

@@ -0,0 +1,181 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var memoizeOne = require('memoize-one');
+var react = require('react');
+var utils = require('./utils.js');
+
+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 createItemList = memoizeOne(function (items) {
+  return items;
+});
+var useTree = function useTree(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? utilities.EMPTY_ARRAY : _ref$items,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? utilities.EMPTY_ARRAY : _ref$checked,
+    selected = _ref.selected,
+    matcher = _ref.matcher,
+    onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked;
+  var componentEvents = react.useRef({
+    onSelect: onSelect,
+    onChecked: onChecked
+  });
+  var itemList = createItemList(items);
+  var _useReducer = react.useReducer(function (state, action) {
+      if (action.type === "load") {
+        state.items = utils.refactorTree(action.items);
+        state.itemMap = utils.makeTreeMap(state.items);
+        state.tree = utils.flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "toggleExpand") {
+        var node = state.itemMap.get(action.id);
+        node && (node.open = !node.open);
+        state.tree = utils.flattenTree(state.items);
+        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 (action.type === "expandAll") {
+        // TODO: prevent opening dynamic nodes that dont have children
+        state.itemMap.forEach(function (node) {
+          !node.leaf && (node.open = true);
+        });
+        state.tree = utils.flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "collapseAll") {
+        state.itemMap.forEach(function (node) {
+          !node.leaf && (node.open = false);
+        });
+        state.tree = utils.flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "filter") {
+        utils.filterTree(state.itemMap, action.query, matcher);
+        state.tree = utils.flattenTree(state.items);
+        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), {}, {
+          selected: action.id
+        });
+      }
+      if (action.type === "toggleCheck") {
+        var _componentEvents$curr3, _componentEvents$curr4;
+        utils.updateChecked(state.itemMap, action.id);
+        var checkList = [[], []];
+        Array.from(state.itemMap.values()).filter(function (node) {
+          return node.checked === 1;
+        }).forEach(function (node) {
+          return checkList[node.leaf ? 0 : 1].push(node.id);
+        });
+        (_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") {
+        action.id.forEach(function (id) {
+          return utils.updateChecked(state.itemMap, id);
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          checked: action.id
+        });
+      }
+      return state;
+    }, {
+      itemMap: new Map(),
+      items: [],
+      tree: [],
+      checked: []
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  react.useEffect(function () {
+    componentEvents.current = {
+      onSelect: onSelect,
+      onChecked: onChecked
+    };
+  }, [onSelect, onChecked]);
+  react.useEffect(function () {
+    dispatch({
+      type: "load",
+      items: itemList
+    });
+  }, [itemList]);
+  react.useEffect(function () {
+    selected && dispatch({
+      type: "select",
+      id: selected
+    });
+  }, [selected]);
+  react.useEffect(function () {
+    checked && dispatch({
+      type: "checked",
+      id: checked
+    });
+  }, [checked]);
+  var toggleExpand = react.useCallback(function (id) {
+    dispatch({
+      type: "toggleExpand",
+      id: id
+    });
+  }, []);
+  var toggleCheck = react.useCallback(function (id) {
+    dispatch({
+      type: "toggleCheck",
+      id: id
+    });
+  }, []);
+  var select = react.useCallback(function (id) {
+    dispatch({
+      type: "select",
+      id: id
+    });
+  }, []);
+  var expandAll = react.useCallback(function () {
+    dispatch({
+      type: "expandAll"
+    });
+  }, []);
+  var collapseAll = react.useCallback(function () {
+    dispatch({
+      type: "collapseAll"
+    });
+  }, []);
+  var onFilter = core.useDebounce(function (query) {
+    dispatch({
+      type: "filter",
+      query: query
+    });
+  }, []);
+  return {
+    tree: state.tree,
+    toggleExpand: toggleExpand,
+    expandAll: expandAll,
+    collapseAll: collapseAll,
+    toggleCheck: toggleCheck,
+    select: select,
+    onFilter: onFilter
+  };
+};
+
+exports.useTree = useTree;

package/dist/cjs/tree/utils.js

@@ -0,0 +1,145 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+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) {
+  if (!!a.leaf !== !!b.leaf) return a.leaf ? 1 : -1;
+  return utilities.compareValues()(a.label, b.label);
+};
+var getChildren = function getChildren() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return list.map(function (item) {
+    return [item].concat(_toConsumableArray(getChildren(item.children)));
+  }).flat(99).filter(Boolean);
+};
+var getIntermediate = function getIntermediate() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var checks = list.map(function (item) {
+    return item.checked;
+  });
+  var someOff = checks.includes(0);
+  var someInt = checks.includes(2);
+  var someOn = checks.includes(1);
+  return someOff && someOn || someInt ? 2 : someOn ? 1 : 0;
+};
+
+// 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] : {
+    level: 0,
+    parent: undefined
+  };
+  var list = [];
+  nodes.sort(sorter).forEach(function (node) {
+    list.push(_objectSpread(_objectSpread({
+      open: false,
+      level: options.level,
+      parent: options.parent,
+      checked: 0,
+      loaded: false,
+      loading: false,
+      filtered: false,
+      lines: []
+    }, node), {}, {
+      leaf: !!node.leaf,
+      children: node.children && refactorTree(node.children, {
+        level: options.level + 1,
+        parent: node.id
+      })
+    }));
+  });
+  return list;
+};
+var makeTreeMap = function makeTreeMap(nodes) {
+  var map = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Map();
+  nodes.forEach(function (node) {
+    if (map.has(node.id)) throw new Error("Node with id [".concat(node.id, "] already exists, please make sure all ids are unique"));
+    map.set(node.id, node);
+    node.children && makeTreeMap(node.children, map);
+  });
+  return map;
+};
+
+// make flat list to be rendered by virtual list
+var flattenTree = function flattenTree(nodes) {
+  var lines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var list = [];
+  var filtered = nodes.filter(function (node) {
+    return !node.filtered;
+  });
+  filtered.forEach(function (node, idx) {
+    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]))));
+  });
+  return list;
+};
+var updateSelection = function updateSelection(nodes, id, selected) {
+  var node = nodes.get(id);
+  if (node) {
+    // change selection
+    node.selected = selected;
+    // 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);
+      parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
+    }
+  }
+};
+var updateChecked = function updateChecked(list, id) {
+  var node = list.get(id);
+  if (node) {
+    node.checked = node.checked === 1 ? 0 : 1;
+    // check all children
+    node.children && getChildren(node.children).forEach(function (child) {
+      return child.checked = node.checked;
+    });
+    var parent = node.parent;
+    while (parent) {
+      var parentNode = list.get(parent);
+      parentNode && (parentNode.checked = getIntermediate(parentNode.children));
+      parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
+    }
+  }
+};
+var filterTree = function filterTree(nodes, query, matcher) {
+  nodes.forEach(function (node) {
+    if (query) {
+      if (node.parentFiltered) return;
+      node.filtered = !(matcher ? matcher(node.data, query) : utilities.isString(node.queryable) ? utilities.matchString(node.queryable, query) : utilities.isString(node.label) && utilities.matchString(node.label, query));
+      if (!node.filtered) {
+        var parent = node.parent;
+        while (parent) {
+          var parentNode = nodes.get(parent);
+          parentNode && (parentNode.filtered = false);
+          parentNode && (parentNode.childFiltered = true);
+          parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
+        }
+        node.children && getChildren(node.children).forEach(function (child) {
+          child.parentFiltered = true;
+          child.filtered = false;
+        });
+      }
+    } else {
+      node.filtered = false;
+      node.childFiltered = undefined;
+      node.parentFiltered = undefined;
+    }
+  });
+};
+
+exports.filterTree = filterTree;
+exports.flattenTree = flattenTree;
+exports.makeTreeMap = makeTreeMap;
+exports.refactorTree = refactorTree;
+exports.updateChecked = updateChecked;
+exports.updateSelection = updateSelection;