@routa/ui-vue 0.1.0

package/dist/tree/index.mjs

@@ -0,0 +1,548 @@
+import '../style/tree.css';
+import { w as X } from "../chunks/install-DJNxamQ0.mjs";
+import { computed as h, watch as T, defineComponent as I, inject as O, openBlock as r, createElementBlock as c, normalizeStyle as E, unref as n, normalizeClass as S, createElementVNode as u, withModifiers as M, createCommentVNode as K, renderSlot as B, createTextVNode as P, toDisplayString as H, Fragment as Y, renderList as ee, createBlock as U, withCtx as Z, provide as te } from "vue";
+import { a as de } from "../chunks/style-C-58-Hx4.mjs";
+import { u as q } from "../chunks/use-id-D3casveg.mjs";
+import { u as se } from "../chunks/use-signals-CE1T2jXK.mjs";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { c as ae } from "../chunks/controller-3cWaJJMW.mjs";
+const A = Symbol("TreeContextKey"), oe = {
+  data: {
+    type: Array,
+    default: () => []
+  },
+  nodes: {
+    type: Array,
+    default: void 0
+  },
+  fieldNames: {
+    type: Object,
+    default: void 0
+  },
+  nodeKey: {
+    type: String,
+    default: "id"
+  },
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  childrenKey: {
+    type: String,
+    default: "children"
+  },
+  currentNodeKey: {
+    type: [String, Number],
+    default: void 0
+  },
+  defaultCurrentNodeKey: {
+    type: [String, Number],
+    default: null
+  },
+  checkedKeys: {
+    type: Array,
+    default: void 0
+  },
+  defaultCheckedKeys: {
+    type: Array,
+    default: () => []
+  },
+  expandedKeys: {
+    type: Array,
+    default: void 0
+  },
+  defaultExpandedKeys: {
+    type: Array,
+    default: () => []
+  },
+  showCheckbox: Boolean,
+  checkStrictly: Boolean,
+  expandOnClickNode: Boolean,
+  accordion: Boolean,
+  filterable: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: !0
+  },
+  showLine: Boolean,
+  disabled: Boolean,
+  emptyText: {
+    type: String,
+    default: "No data"
+  },
+  height: {
+    type: [Number, String],
+    default: void 0
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  itemHeight: {
+    type: [Number, String],
+    default: void 0
+  }
+}, ie = {
+  "update:currentNodeKey": (e) => !0,
+  "update:checkedKeys": (e) => !0,
+  "update:expandedKeys": (e) => !0,
+  "current-change": (e, d) => !0,
+  check: (e) => !0,
+  "node-click": (e, d) => !0,
+  "node-expand": (e, d) => !0,
+  "node-collapse": (e, d) => !0
+}, j = (e = [], d = []) => e.length === d.length && e.every((a, i) => Object.is(a, d[i])), ne = (e, d) => {
+  var i, s;
+  if ((i = d.fieldNames) != null && i.key) return d.fieldNames.key;
+  if ((s = d.fieldNames) != null && s.id) return d.fieldNames.id;
+  if (d.nodeKey !== "id") return d.nodeKey;
+  const a = e[0];
+  return !a || typeof a != "object" || "id" in a ? "id" : "key" in a ? "key" : "value" in a ? "value" : "id";
+}, le = (e, d) => {
+  const a = h(() => e.nodes ?? e.data), i = h(() => {
+    var o, x, V;
+    const t = ne(a.value, e);
+    return {
+      key: t,
+      id: ((o = e.fieldNames) == null ? void 0 : o.id) ?? t,
+      label: ((x = e.fieldNames) == null ? void 0 : x.label) ?? e.labelKey,
+      children: ((V = e.fieldNames) == null ? void 0 : V.children) ?? e.childrenKey
+    };
+  }), s = ae({
+    data: a.value,
+    checkedKeys: e.checkedKeys ?? e.defaultCheckedKeys,
+    currentNodeKey: e.currentNodeKey ?? e.defaultCurrentNodeKey,
+    expandedKeys: e.expandedKeys ?? e.defaultExpandedKeys,
+    multiple: e.showCheckbox,
+    checkStrictly: e.checkStrictly,
+    accordion: e.accordion,
+    fieldNames: i.value,
+    onCurrentChange: (t, o) => {
+      d("update:currentNodeKey", t), d("current-change", o, t);
+    },
+    onCheck: (t, o) => {
+      d("update:checkedKeys", t), d("check", {
+        checkedKeys: t,
+        halfCheckedKeys: p.value,
+        checkedNodes: o,
+        halfCheckedNodes: s.actions.getHalfCheckedNodes()
+      });
+    }
+  }), {
+    checkedKeys: w,
+    currentNodeKey: N,
+    expandedKeys: b,
+    filterText: v,
+    focusedKey: f,
+    indeterminateKeys: p,
+    visibleRows: k
+  } = se(s), C = q("tree"), l = (t) => String(t[i.value.label] ?? ""), g = () => {
+    d("update:expandedKeys", b.value.slice());
+  };
+  T(
+    a,
+    (t) => {
+      s.state.data = t;
+    },
+    { deep: !0 }
+  ), T(
+    i,
+    (t) => {
+      const o = s.state.fieldNames;
+      (o.key !== t.key || o.id !== t.id || o.label !== t.label || o.children !== t.children) && (s.state.fieldNames = t);
+    },
+    { deep: !0 }
+  ), T(
+    () => e.currentNodeKey,
+    (t) => {
+      t !== void 0 && !Object.is(t, N.value) && (s.state.currentNodeKey = t);
+    }
+  ), T(
+    () => e.checkedKeys,
+    (t) => {
+      t !== void 0 && !j(t, w.value) && s.actions.setCheckedKeys(t);
+    },
+    { deep: !0 }
+  ), T(
+    () => e.expandedKeys,
+    (t) => {
+      t !== void 0 && !j(t, b.value) && s.actions.setExpandedKeys(t);
+    },
+    { deep: !0 }
+  );
+  const y = (t) => {
+    s.actions.setCurrentKey(t);
+  }, L = (t) => {
+    s.actions.setCheckedKeys(t), d("update:checkedKeys", s.actions.getCheckedKeys()), d("check", {
+      checkedKeys: s.actions.getCheckedKeys(),
+      halfCheckedKeys: s.actions.getHalfCheckedKeys(),
+      checkedNodes: s.actions.getCheckedNodes(),
+      halfCheckedNodes: s.actions.getHalfCheckedNodes()
+    });
+  }, m = (t) => {
+    s.actions.setExpandedKeys(t), g();
+  }, _ = () => {
+    s.actions.expandAll(), g();
+  }, G = () => {
+    s.actions.collapseAll(), g();
+  }, $ = (t) => {
+    s.actions.filter(t);
+  }, F = (t) => {
+    e.disabled || t.isDisabled || (s.actions.setFocusedKey(t.key), y(t.key), d("node-click", t.node, t.key), e.expandOnClickNode && !t.isLeaf && R(t));
+  }, R = (t) => {
+    if (e.disabled || t.isDisabled || t.isLeaf) return;
+    const o = b.value.includes(t.key);
+    s.actions.toggleExpand(t.key), g(), d(o ? "node-collapse" : "node-expand", t.node, t.key);
+  }, D = (t) => {
+    !e.showCheckbox || e.disabled || t.isDisabled || (s.actions.setFocusedKey(t.key), s.actions.select(t.key));
+  }, J = (t) => {
+    var o;
+    $(((o = t.target) == null ? void 0 : o.value) ?? "");
+  }, Q = () => k.value.find((t) => t.key === f.value), z = (t) => `${C}-row-${String(t)}`, W = h(() => {
+    if (f.value != null)
+      return z(f.value);
+  });
+  return {
+    context: {
+      props: e,
+      fieldNames: i,
+      visibleRows: k,
+      filterText: v,
+      focusedKey: f,
+      activeDescendantId: W,
+      getNodeLabel: l,
+      getRowId: z,
+      handleTreeFocus: () => {
+        e.disabled || f.value == null && s.actions.focusFirst();
+      },
+      handleTreeKeydown: (t) => {
+        if (e.disabled) return;
+        const o = Q();
+        let x = !0;
+        switch (t.key) {
+          case "ArrowDown":
+            s.actions.focusNext();
+            break;
+          case "ArrowUp":
+            s.actions.focusPrevious();
+            break;
+          case "Home":
+            s.actions.focusFirst();
+            break;
+          case "End":
+            s.actions.focusLast();
+            break;
+          case "ArrowRight":
+            o ? !o.isLeaf && !o.isExpanded ? R(o) : s.actions.focusFirstChild() : s.actions.focusFirst();
+            break;
+          case "ArrowLeft":
+            o ? !o.isLeaf && o.isExpanded ? R(o) : s.actions.focusParent() : s.actions.focusFirst();
+            break;
+          case "Enter":
+            o && F(o);
+            break;
+          case " ":
+          case "Spacebar":
+            o && (e.showCheckbox ? D(o) : F(o));
+            break;
+          default:
+            x = !1;
+        }
+        x && t.preventDefault();
+      },
+      handleRowClick: F,
+      handleRowToggle: R,
+      handleRowCheck: D
+    },
+    expose: {
+      setCurrentKey: y,
+      getCurrentNode: () => s.actions.getCurrentNode(),
+      setCheckedKeys: L,
+      getCheckedKeys: () => s.actions.getCheckedKeys(),
+      getCheckedNodes: () => s.actions.getCheckedNodes(),
+      getHalfCheckedKeys: () => s.actions.getHalfCheckedKeys(),
+      getHalfCheckedNodes: () => s.actions.getHalfCheckedNodes(),
+      setExpandedKeys: m,
+      expandAll: _,
+      collapseAll: G,
+      filter: $
+    },
+    visibleRows: k,
+    filterText: v,
+    getNodeLabel: l,
+    handleFilterInput: J,
+    hasRows: h(() => k.value.length > 0)
+  };
+}, re = ["id", "data-tree-key", "aria-level", "aria-expanded", "aria-selected", "aria-checked", "aria-disabled"], ce = ["disabled", "aria-label"], ue = ["disabled", "aria-checked"], he = {
+  key: 0,
+  viewBox: "0 0 16 16",
+  width: "12",
+  height: "12"
+}, ye = {
+  key: 1,
+  viewBox: "0 0 1024 1024",
+  width: "10",
+  height: "10"
+}, fe = {
+  key: 2,
+  class: "l-tree__icon"
+}, ke = {
+  key: 0,
+  viewBox: "0 0 1024 1024",
+  width: "16",
+  height: "16"
+}, we = {
+  key: 1,
+  viewBox: "0 0 1024 1024",
+  width: "16",
+  height: "16"
+}, be = { class: "l-tree__label" }, ve = {
+  key: 3,
+  class: "l-tree__check",
+  "aria-hidden": "true"
+}, Ce = /* @__PURE__ */ I({
+  name: "TreeRow",
+  __name: "TreeRow",
+  props: {
+    row: {}
+  },
+  setup(e) {
+    const d = e, a = O(A);
+    if (!a)
+      throw new Error("TreeRow must be used within LTree.");
+    const i = h(() => [
+      "l-tree__row",
+      {
+        "is-current": d.row.isCurrent,
+        "is-focused": d.row.isFocused,
+        "is-expanded": d.row.isExpanded,
+        "is-indeterminate": d.row.isIndeterminate,
+        "is-disabled": a.props.disabled || d.row.isDisabled
+      }
+    ]), s = h(() => ({
+      "--l-tree-row-offset": `${d.row.level * 22}px`,
+      "--l-tree-level": d.row.level
+    })), w = h(() => [
+      "l-tree__checkbox",
+      {
+        "is-checked": d.row.isChecked,
+        "is-indeterminate": d.row.isIndeterminate
+      }
+    ]), N = h(() => a.getNodeLabel(d.row.node)), b = h(
+      () => a.props.showCheckbox ? void 0 : d.row.isCurrent ? "true" : "false"
+    ), v = h(() => {
+      if (a.props.showCheckbox)
+        return d.row.isIndeterminate ? "mixed" : d.row.isChecked ? "true" : "false";
+    }), f = () => {
+      a.handleRowClick(d.row);
+    }, p = () => {
+      a.handleRowToggle(d.row);
+    }, k = () => {
+      a.handleRowCheck(d.row);
+    };
+    return (C, l) => (r(), c("div", {
+      id: n(a).getRowId(e.row.key),
+      class: S(i.value),
+      "data-tree-key": e.row.key,
+      role: "treeitem",
+      "aria-level": e.row.level + 1,
+      "aria-expanded": e.row.isLeaf ? void 0 : e.row.isExpanded ? "true" : "false",
+      "aria-selected": b.value,
+      "aria-checked": v.value,
+      "aria-disabled": n(a).props.disabled || e.row.isDisabled ? "true" : "false",
+      style: E({ "--l-tree-level": e.row.level })
+    }, [
+      u("div", {
+        class: "l-tree__row-main",
+        style: E(s.value),
+        onClick: f
+      }, [
+        e.row.isLeaf ? K("", !0) : (r(), c("button", {
+          key: 0,
+          type: "button",
+          class: S(["l-tree__expand", { "is-expanded": e.row.isExpanded }]),
+          disabled: n(a).props.disabled || e.row.isDisabled,
+          "aria-label": e.row.isExpanded ? "Collapse node" : "Expand node",
+          onClick: M(p, ["stop"])
+        }, [...l[0] || (l[0] = [
+          u("svg", {
+            viewBox: "0 0 1024 1024",
+            width: "10",
+            height: "10"
+          }, [
+            u("path", {
+              fill: "currentColor",
+              d: "M338.752 104.448l65.344-65.344L836.48 471.552l-432.384 432.384-65.344-65.344 367.04-367.04z"
+            })
+          ], -1)
+        ])], 10, ce)),
+        n(a).props.showCheckbox ? (r(), c("button", {
+          key: 1,
+          type: "button",
+          class: S(w.value),
+          disabled: n(a).props.disabled || e.row.isDisabled,
+          role: "checkbox",
+          "aria-checked": v.value,
+          onClick: M(k, ["stop"])
+        }, [
+          e.row.isChecked ? (r(), c("svg", he, [...l[1] || (l[1] = [
+            u("path", {
+              fill: "currentColor",
+              d: "M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
+            }, null, -1)
+          ])])) : e.row.isIndeterminate ? (r(), c("svg", ye, [...l[2] || (l[2] = [
+            u("path", {
+              fill: "currentColor",
+              d: "M128 448h768v128H128z"
+            }, null, -1)
+          ])])) : K("", !0)
+        ], 10, ue)) : K("", !0),
+        n(a).props.showIcon ? (r(), c("span", fe, [
+          e.row.isLeaf ? (r(), c("svg", we, [...l[4] || (l[4] = [
+            u("path", {
+              fill: "currentColor",
+              d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v222c0 17.7 14.3 32 32 32h226v498z"
+            }, null, -1)
+          ])])) : (r(), c("svg", ke, [...l[3] || (l[3] = [
+            u("path", {
+              fill: "currentColor",
+              d: "M880 298.4H521L437.3 151c-4.1-7.1-11.7-11.5-19.9-11.5H144c-17.7 0-32 14.3-32 32v685c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zm-40 530.5H184V211.4h216.7L484.4 353c4.1 7.1 11.7 11.5 19.9 11.5H840v464.4z"
+            }, null, -1)
+          ])]))
+        ])) : K("", !0),
+        u("span", be, [
+          B(C.$slots, "default", {
+            node: e.row.node,
+            row: e.row
+          }, () => [
+            P(H(N.value), 1)
+          ])
+        ]),
+        e.row.isCurrent && !n(a).props.showCheckbox ? (r(), c("span", ve, [...l[5] || (l[5] = [
+          u("svg", {
+            viewBox: "0 0 16 16",
+            width: "14",
+            height: "14"
+          }, [
+            u("path", {
+              fill: "currentColor",
+              d: "M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
+            })
+          ], -1)
+        ])])) : K("", !0)
+      ], 4)
+    ], 14, re));
+  }
+}), ge = ["aria-activedescendant", "aria-multiselectable", "aria-disabled"], me = /* @__PURE__ */ I({
+  name: "TreeView",
+  __name: "TreeView",
+  props: {
+    visibleRows: {}
+  },
+  setup(e) {
+    const d = O(A);
+    if (!d)
+      throw new Error("TreeView must be used within LTree.");
+    return (a, i) => (r(), c("div", {
+      class: "l-tree__view",
+      role: "tree",
+      tabindex: "0",
+      "aria-activedescendant": n(d).activeDescendantId.value,
+      "aria-multiselectable": n(d).props.showCheckbox ? "true" : void 0,
+      "aria-disabled": n(d).props.disabled ? "true" : "false",
+      onFocus: i[0] || (i[0] = //@ts-ignore
+      (...s) => n(d).handleTreeFocus && n(d).handleTreeFocus(...s)),
+      onKeydown: i[1] || (i[1] = //@ts-ignore
+      (...s) => n(d).handleTreeKeydown && n(d).handleTreeKeydown(...s))
+    }, [
+      (r(!0), c(Y, null, ee(e.visibleRows, (s) => (r(), U(Ce, {
+        key: s.key,
+        row: s
+      }, {
+        default: Z((w) => [
+          B(a.$slots, "default", {
+            node: w.node,
+            row: w.row
+          })
+        ]),
+        _: 2
+      }, 1032, ["row"]))), 128))
+    ], 40, ge));
+  }
+}), xe = {
+  key: 0,
+  class: "l-tree__filter"
+}, Ke = ["id", "value"], Ne = {
+  key: 1,
+  class: "l-tree__empty"
+}, pe = /* @__PURE__ */ I({
+  name: "LTree",
+  __name: "Tree",
+  props: oe,
+  emits: ie,
+  setup(e, { expose: d, emit: a }) {
+    const i = e, s = a, N = q("l-tree"), {
+      context: b,
+      expose: v,
+      visibleRows: f,
+      filterText: p,
+      getNodeLabel: k,
+      handleFilterInput: C,
+      hasRows: l
+    } = le(i, s);
+    te(A, b), d(v);
+    const g = h(() => {
+      if (i.height != null)
+        return {
+          maxHeight: typeof i.height == "number" ? `${i.height}px` : i.height,
+          overflow: "auto"
+        };
+    });
+    return (y, L) => (r(), c("div", {
+      class: S(["l-tree", [
+        `l-tree--${y.size}`,
+        {
+          "is-disabled": y.disabled,
+          "has-line": y.showLine
+        }
+      ]]),
+      style: E({ "--l-tree-item-height": n(de)(y.itemHeight) })
+    }, [
+      y.filterable ? (r(), c("div", xe, [
+        u("input", {
+          id: `${n(N)}-filter`,
+          class: "l-tree__filter-input",
+          type: "text",
+          value: n(p),
+          onInput: L[0] || (L[0] = //@ts-ignore
+          (...m) => n(C) && n(C)(...m))
+        }, null, 40, Ke)
+      ])) : K("", !0),
+      u("div", {
+        class: "l-tree__body",
+        style: E(g.value)
+      }, [
+        n(l) ? (r(), U(me, {
+          key: 0,
+          "visible-rows": n(f)
+        }, {
+          default: Z(({ node: m, row: _ }) => [
+            B(y.$slots, "default", {
+              node: m,
+              row: _
+            }, () => [
+              P(H(n(k)(m)), 1)
+            ])
+          ]),
+          _: 3
+        }, 8, ["visible-rows"])) : (r(), c("div", Ne, H(y.emptyText), 1))
+      ], 4)
+    ], 6));
+  }
+}), $e = X(pe);
+export {
+  $e as LTree,
+  $e as default,
+  ie as treeEmits,
+  oe as treeProps
+};

package/dist/tree/types.d.ts

@@ -0,0 +1,127 @@
+import { ExtractPropTypes, PropType, Ref } from 'vue';
+import { TreeFieldNames, TreeNode, TreeVisibleRow } from '../../../headless/src/index.ts';
+export interface TreeResolvedFieldNames extends Required<Pick<TreeFieldNames, 'id' | 'label' | 'children'>> {
+    key: string;
+}
+export declare const treeProps: {
+    readonly data: {
+        readonly type: PropType<TreeNode[]>;
+        readonly default: () => never[];
+    };
+    readonly nodes: {
+        readonly type: PropType<TreeNode[] | undefined>;
+        readonly default: undefined;
+    };
+    readonly fieldNames: {
+        readonly type: PropType<TreeFieldNames>;
+        readonly default: undefined;
+    };
+    readonly nodeKey: {
+        readonly type: StringConstructor;
+        readonly default: "id";
+    };
+    readonly labelKey: {
+        readonly type: StringConstructor;
+        readonly default: "label";
+    };
+    readonly childrenKey: {
+        readonly type: StringConstructor;
+        readonly default: "children";
+    };
+    readonly currentNodeKey: {
+        readonly type: PropType<any>;
+        readonly default: undefined;
+    };
+    readonly defaultCurrentNodeKey: {
+        readonly type: PropType<any>;
+        readonly default: null;
+    };
+    readonly checkedKeys: {
+        readonly type: PropType<any[] | undefined>;
+        readonly default: undefined;
+    };
+    readonly defaultCheckedKeys: {
+        readonly type: PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly expandedKeys: {
+        readonly type: PropType<any[] | undefined>;
+        readonly default: undefined;
+    };
+    readonly defaultExpandedKeys: {
+        readonly type: PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly showCheckbox: BooleanConstructor;
+    readonly checkStrictly: BooleanConstructor;
+    readonly expandOnClickNode: BooleanConstructor;
+    readonly accordion: BooleanConstructor;
+    readonly filterable: BooleanConstructor;
+    readonly showIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly showLine: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly emptyText: {
+        readonly type: StringConstructor;
+        readonly default: "No data";
+    };
+    readonly height: {
+        readonly type: PropType<number | string | undefined>;
+        readonly default: undefined;
+    };
+    readonly size: {
+        readonly type: PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+    };
+    readonly itemHeight: {
+        readonly type: PropType<number | string | undefined>;
+        readonly default: undefined;
+    };
+};
+export declare const treeEmits: {
+    readonly 'update:currentNodeKey': (_key: any) => boolean;
+    readonly 'update:checkedKeys': (_keys: any[]) => boolean;
+    readonly 'update:expandedKeys': (_keys: any[]) => boolean;
+    readonly 'current-change': (_node: TreeNode | undefined, _key: any) => boolean;
+    readonly check: (_payload: {
+        checkedKeys: any[];
+        halfCheckedKeys: any[];
+        checkedNodes: TreeNode[];
+        halfCheckedNodes: TreeNode[];
+    }) => boolean;
+    readonly 'node-click': (_node: TreeNode, _key: any) => boolean;
+    readonly 'node-expand': (_node: TreeNode, _key: any) => boolean;
+    readonly 'node-collapse': (_node: TreeNode, _key: any) => boolean;
+};
+export type TreeProps = ExtractPropTypes<typeof treeProps>;
+export type TreeEmits = typeof treeEmits;
+export interface TreeExpose {
+    setCurrentKey: (key: any) => void;
+    getCurrentNode: () => TreeNode | undefined;
+    setCheckedKeys: (keys: any[]) => void;
+    getCheckedKeys: () => any[];
+    getCheckedNodes: () => TreeNode[];
+    getHalfCheckedKeys: () => any[];
+    getHalfCheckedNodes: () => TreeNode[];
+    setExpandedKeys: (keys: any[]) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    filter: (value: string) => void;
+}
+export interface TreeContextValue {
+    props: TreeProps;
+    fieldNames: Ref<TreeResolvedFieldNames>;
+    visibleRows: Ref<TreeVisibleRow[]>;
+    filterText: Ref<string>;
+    focusedKey: Ref<any>;
+    activeDescendantId: Ref<string | undefined>;
+    getNodeLabel: (node: TreeNode) => string;
+    getRowId: (key: any) => string;
+    handleTreeFocus: () => void;
+    handleTreeKeydown: (event: KeyboardEvent) => void;
+    handleRowClick: (row: TreeVisibleRow) => void;
+    handleRowToggle: (row: TreeVisibleRow) => void;
+    handleRowCheck: (row: TreeVisibleRow) => void;
+}