@apia/tree 0.1.0

package/dist/index.js

@@ -0,0 +1,1397 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMount, useDebounceFn, useUnmount } from 'ahooks';
+import React, { useState, useEffect, memo } from 'react';
+import { shallowEqual } from 'react-redux';
+import { Box, Spinner } from 'theme-ui';
+import { EventEmitter, PropsStore, addBoundary, getSpecificParent, usePropsSelector, formatMessage, useLatest } from '@apia/util';
+import { IconButton } from '@apia/components';
+import { getVariant } from '@apia/theme';
+import { Icon } from '@apia/icons';
+import { uniqueId } from 'lodash-es';
+
+const getLastVisibleChild = (handler, id, avoidFiltered) => {
+  const nodeProps = handler.propsStore.getFieldProps(id);
+  if (id !== "root" && (nodeProps.isDisabled || !nodeProps.isExpanded) || nodeProps.children.length === 0)
+    return null;
+  for (let i = nodeProps.children.length - 1; i >= 0; i--) {
+    const currentId = nodeProps.children[i];
+    const currentProps = handler.propsStore.getFieldProps(currentId);
+    if (!avoidFiltered || !currentProps.isFiltered) {
+      const lastChildrenLastChildren = getLastVisibleChild(
+        handler,
+        currentId,
+        avoidFiltered
+      );
+      return lastChildrenLastChildren !== null ? lastChildrenLastChildren : currentId;
+    }
+  }
+  return null;
+};
+const getPreviousChild = (handler, id, avoidFiltered) => {
+  var _a, _b;
+  const nodeProps = handler.propsStore.getFieldProps(id);
+  const fatherProps = handler.propsStore.getFieldProps(nodeProps.parentId);
+  let childPosition = (_b = (_a = fatherProps.children) == null ? void 0 : _a.findIndex((current) => current === nodeProps.id)) != null ? _b : -1;
+  while (childPosition > 0) {
+    const prevSibling = handler.propsStore.getFieldProps(
+      fatherProps.children[childPosition - 1]
+    );
+    const prevSiblingLastChild = getLastVisibleChild(
+      handler,
+      prevSibling.id,
+      avoidFiltered
+    );
+    if (prevSiblingLastChild !== null)
+      return prevSiblingLastChild;
+    if (!avoidFiltered || !prevSibling.isFiltered)
+      return prevSibling.id;
+    childPosition--;
+  }
+  if (nodeProps.parentId === "root")
+    return null;
+  return nodeProps.parentId;
+};
+const getFirstNonFilteredChild = (handler, id) => {
+  const nodeProps = handler.propsStore.getFieldProps(id);
+  for (const child of nodeProps.children) {
+    if (!handler.propsStore.getFieldProps(child).isFiltered)
+      return child;
+  }
+  return null;
+};
+const getNextChild = (handler, id, avoidChildren, avoidFiltered) => {
+  var _a, _b;
+  const nodeProps = handler.propsStore.getFieldProps(id);
+  const fatherProps = handler.propsStore.getFieldProps(nodeProps.parentId);
+  let childPosition = (_b = (_a = fatherProps.children) == null ? void 0 : _a.findIndex((current) => current === nodeProps.id)) != null ? _b : Infinity;
+  if (!avoidChildren && nodeProps.isExpanded) {
+    if (!avoidFiltered && nodeProps.children.length > 0)
+      return nodeProps.children[0];
+    const firstNonFilteredChild = getFirstNonFilteredChild(
+      handler,
+      nodeProps.id
+    );
+    if (firstNonFilteredChild !== null)
+      return firstNonFilteredChild;
+  }
+  while (childPosition < fatherProps.children.length - 1) {
+    const nextSibling = fatherProps.children[childPosition + 1];
+    if (!avoidFiltered || !handler.propsStore.getFieldProps(nextSibling).isFiltered)
+      return nextSibling;
+    childPosition++;
+  }
+  if (nodeProps.parentId === "root")
+    return null;
+  return getNextChild(handler, fatherProps.id, true, avoidFiltered);
+};
+const getNextNodeWithKey = (handler, id, firstKey, avoidFiltered) => {
+  let nextChildWithKey = id;
+  do {
+    nextChildWithKey = getNextChild(
+      handler,
+      nextChildWithKey,
+      false,
+      avoidFiltered
+    );
+    if (nextChildWithKey !== null) {
+      const nodeProps2 = handler.propsStore.getFieldProps(nextChildWithKey);
+      if ((!nodeProps2.isFiltered || !avoidFiltered) && nodeProps2.label.toUpperCase().startsWith(firstKey.toUpperCase()))
+        return nextChildWithKey;
+    }
+  } while (nextChildWithKey !== null);
+  const nodeProps = handler.propsStore.getFieldProps(id);
+  const positionInParent = handler.propsStore.getFieldProps(nodeProps.parentId).children.findIndex((current) => current === id);
+  if (nodeProps.parentId !== "root" || positionInParent > 0) {
+    const [firstChildOfTree] = handler.propsStore.getFieldProps("root").children;
+    const firstChildProps = handler.propsStore.getFieldProps(firstChildOfTree);
+    if (firstChildOfTree && (!avoidFiltered || !firstChildProps.isFiltered) && firstChildProps.label.toUpperCase().startsWith(firstKey.toUpperCase()))
+      return firstChildOfTree;
+    nextChildWithKey = firstChildOfTree;
+    do {
+      nextChildWithKey = getNextChild(
+        handler,
+        nextChildWithKey,
+        false,
+        avoidFiltered
+      );
+      if (nextChildWithKey) {
+        const currentNodeProps = handler.propsStore.getFieldProps(nextChildWithKey);
+        if ((!avoidFiltered || !currentNodeProps.isFiltered) && currentNodeProps.label.toUpperCase().startsWith(firstKey.toUpperCase()))
+          return nextChildWithKey;
+      }
+    } while (nextChildWithKey !== id && nextChildWithKey !== null);
+  }
+  return null;
+};
+const getNodePath = (handler, nodeId) => {
+  const path = [nodeId];
+  let currentStep = nodeId;
+  do {
+    currentStep = handler.propsStore.getFieldProps(currentStep).parentId;
+    path.unshift(currentStep);
+  } while (currentStep !== "root");
+  return path;
+};
+const getCommonAncestor = (handler, oneNodeId, anotherNodeId) => {
+  const oneNodePath = getNodePath(handler, oneNodeId);
+  const anotherNodePath = getNodePath(handler, anotherNodeId);
+  for (let i = oneNodePath.length - 1; i >= 0; i--) {
+    const anotherNodeIndex = anotherNodePath.indexOf(oneNodePath[i]);
+    if (anotherNodeIndex !== -1)
+      return {
+        commonAncestor: oneNodePath[i],
+        oneNodeAncestorChild: oneNodePath[i + 1],
+        anotherNodeAncestorChild: anotherNodePath[anotherNodeIndex + 1]
+      };
+  }
+  console.warn(
+    "This point should have never been reached since the root node is common to all nodes",
+    { oneNodeId, anotherNodeId, oneNodePath, anotherNodePath }
+  );
+  return null;
+};
+const unfilterNodes = (handler) => {
+  handler.state.filteredNodes.forEach((current) => {
+    handler.propsStore.updateField(
+      current,
+      { isFiltered: false },
+      { noEmit: true }
+    );
+  });
+  const firstChild = handler.propsStore.getFieldProps("root").children[0];
+  if (firstChild)
+    handler.setFocusedNode(firstChild);
+  handler.setState({ filteredNodes: [] });
+};
+const matchNodesAgainstString = (handler, searchString, nodeId = "root") => {
+  let hasMatched = false;
+  let matchNode = null;
+  const nodeProps = handler.propsStore.getFieldProps(nodeId);
+  if (nodeId !== "root" && nodeProps.label.match(new RegExp(searchString, "i"))) {
+    handler.propsStore.updateField(nodeId, { isFiltered: false });
+    hasMatched = true;
+    matchNode = nodeProps.id;
+    handler.setState({
+      filteredNodes: handler.state.filteredNodes.filter(
+        (current) => current !== nodeId
+      )
+    });
+  }
+  let hasChildrenMatched = false;
+  nodeProps.children.forEach((current) => {
+    hasChildrenMatched = matchNodesAgainstString(handler, searchString, current) || hasMatched;
+    hasMatched = hasChildrenMatched || hasMatched;
+    if (hasMatched && !matchNode)
+      matchNode = current;
+  });
+  if (hasChildrenMatched) {
+    handler.propsStore.updateField(nodeId, { isExpanded: true });
+    if (hasMatched && !matchNode)
+      matchNode = nodeId;
+  }
+  if (!hasMatched) {
+    handler.propsStore.updateField(
+      nodeId,
+      { isFiltered: true },
+      { noEmit: true }
+    );
+    handler.setState({
+      filteredNodes: [...handler.state.filteredNodes, nodeId]
+    });
+  }
+  if (matchNode !== null)
+    handler.setFocusedNode(matchNode);
+  return hasMatched;
+};
+const selectAllNodesBetweenTwoNodes = (handler, oneNodeId, anotherNodeId, avoidFiltered) => {
+  const commonAncestorData = getCommonAncestor(
+    handler,
+    oneNodeId,
+    anotherNodeId
+  );
+  if (commonAncestorData) {
+    const { anotherNodeAncestorChild, commonAncestor, oneNodeAncestorChild } = commonAncestorData;
+    const ancestorProps = handler.propsStore.getFieldProps(commonAncestor);
+    const oneNodePosition = ancestorProps.children.findIndex(
+      (current) => current === oneNodeAncestorChild
+    );
+    const anotherNodePosition = ancestorProps.children.findIndex(
+      (current) => current === anotherNodeAncestorChild
+    );
+    let currentId = oneNodePosition >= anotherNodePosition ? anotherNodeId : oneNodeId;
+    const lastNodeId = oneNodePosition < anotherNodePosition ? anotherNodeId : oneNodeId;
+    handler.toggleNodeSelectedState(currentId, true);
+    do {
+      currentId = getNextChild(handler, currentId, avoidFiltered);
+      if (currentId !== null)
+        handler.toggleNodeSelectedState(currentId, true);
+    } while (currentId !== lastNodeId && currentId !== null);
+  }
+};
+
+var __defProp$6 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+const trees = {};
+const treesRecordEmitter = new class TreesRecordEmitter extends EventEmitter {
+  emit(eventName, params) {
+    super.emit(eventName, params);
+    trees[params.name] = params.controller;
+  }
+}();
+function useTreeDataController(name) {
+  const [controller, setDataController] = useState(
+    trees[name]
+  );
+  useEffect(() => {
+    if (trees[name] !== controller)
+      setDataController(trees[name]);
+    return treesRecordEmitter.on("addController", (ev) => {
+      if (ev.name === name)
+        setDataController(ev.controller);
+    });
+  }, []);
+  return controller;
+}
+function getTreeDataController(name) {
+  return trees[name];
+}
+class TreeDataController extends EventEmitter {
+  constructor(name, configuration, propsStore = new PropsStore({
+    logCommands: {
+      propsStore: `treeProps_${name}`,
+      propsLog: `treeLog_${name}`,
+      propsSuscriptors: `propsSuscriptors_${name}`,
+      updateProp: `updateProp_${name}`
+    }
+  })) {
+    var _a;
+    super();
+    this.name = name;
+    this.propsStore = propsStore;
+    this.hasApendedFirstChild = false;
+    /**
+     * Este array se usa para conocer los padres faltantes al momento de la
+     * construcción del árbol, de forma de optimizar el proceso
+     */
+    this.missingParents = [];
+    this.nonEmittedUpdates = [];
+    this.stateKey = "treeState";
+    this._configuration = configuration != null ? configuration : {
+      current: { emitUpdates: true }
+    };
+    this._configuration.current.emitUpdates = (_a = this._configuration.current.emitUpdates) != null ? _a : true;
+    this.setState(this.getInitialState());
+    treesRecordEmitter.emit("addController", {
+      name,
+      controller: this
+    });
+    this.initRoot();
+  }
+  get configuration() {
+    return __spreadValues$6({}, this._configuration);
+  }
+  get state() {
+    return this.propsStore.getFieldProps(
+      this.stateKey
+    );
+  }
+  get stateStore() {
+    return this.propsStore;
+  }
+  destructor() {
+    this.propsStore.destructor();
+  }
+  append(node) {
+    var _a, _b, _c, _d, _e, _f;
+    const newNode = __spreadProps$5(__spreadValues$6({}, node), { nodeProps: (_a = node.nodeProps) != null ? _a : {} });
+    if ((_b = this.propsStore.getFieldProps(newNode.id)) == null ? void 0 : _b.children) {
+      console.error("DUPLICATED NODE: The conflict origin is ", newNode, this);
+      return;
+    }
+    let father;
+    if (newNode.parentId !== void 0 && ((_c = this.propsStore.getFieldProps(newNode.parentId)) == null ? void 0 : _c.children)) {
+      father = newNode.parentId;
+    } else {
+      father = "root";
+      if (newNode.parentId)
+        this.missingParents.push(newNode.parentId);
+      newNode.actualParentId = newNode.parentId;
+      newNode.parentId = "root";
+    }
+    this.propsStore.updateField(
+      newNode.id,
+      __spreadProps$5(__spreadValues$6({}, newNode), {
+        children: (_d = newNode.children) != null ? _d : []
+      }),
+      { isUrgent: true }
+    );
+    this.setState({ length: this.state.length + 1 });
+    if (this.missingParents.includes(newNode.id)) {
+      this.propsStore.getFieldProps("root").children.forEach((currentChild) => {
+        if (this.propsStore.getFieldProps(currentChild).actualParentId === newNode.id) {
+          this.move(currentChild, newNode.id);
+        }
+      });
+      this.missingParents = this.missingParents.filter(
+        (current) => current !== newNode.id
+      );
+    }
+    this.propsStore.updateField(
+      father,
+      {
+        children: [
+          ...this.propsStore.getFieldProps(father).children,
+          newNode.id
+        ]
+      },
+      { noEmit: !((_e = this._configuration.current) == null ? void 0 : _e.emitUpdates) }
+    );
+    if (!((_f = this._configuration.current) == null ? void 0 : _f.emitUpdates))
+      this.nonEmittedUpdates.push(father);
+    if (!this.hasApendedFirstChild) {
+      this.hasApendedFirstChild = true;
+      this.setFocusedNode(newNode.id, true);
+    }
+    if (newNode.isExpanded)
+      this.toggleNodeExpandedState(newNode.id, true);
+  }
+  /**
+   * Cuando se quieren agregar muchos nodos, es conveniente llamar primero al
+   * método batchInit y luego de finalizar, al método batchFinish()
+   */
+  batchInit() {
+    this.config({ emitUpdates: false });
+    this.setState({ isLoading: true }, { isUrgent: true });
+  }
+  /**
+   * Cuando se quieren agregar muchos nodos, es conveniente llamar primero al
+   * método batchInit y luego de finalizar, al método batchFinish()
+   */
+  batchFinish() {
+    this.config({ emitUpdates: true });
+    setTimeout(() => this.setState({ isLoading: false }), 0);
+  }
+  config(newConf) {
+    var _a;
+    if (!((_a = this._configuration.current) == null ? void 0 : _a.emitUpdates) && newConf.emitUpdates) {
+      this.nonEmittedUpdates.forEach(
+        (current) => this.propsStore.updateField(current, {
+          children: [...this.propsStore.getFieldProps(current).children]
+        })
+      );
+      this.nonEmittedUpdates = [];
+    }
+    Object.assign(
+      this._configuration.current,
+      newConf
+    );
+  }
+  deselectAll() {
+    this.state.selectedNodes.forEach(
+      (currentId) => this.propsStore.updateField(currentId, { isSelected: false })
+    );
+    this.setState({ selectedNodes: [] });
+  }
+  forceEmitUpdate() {
+    var _a;
+    this.propsStore.updateField("root", {
+      forceUpdate: ((_a = this.propsStore.getFieldProps("root").forceUpdate) != null ? _a : 0) + 1
+    });
+  }
+  getInitialState() {
+    return {
+      expandedNodes: [],
+      filteredNodes: [],
+      focusedNode: null,
+      isLoading: false,
+      length: 0,
+      selectedNodes: []
+    };
+  }
+  getNodesAsArray() {
+    const allFields = __spreadValues$6({}, this.propsStore.fields);
+    delete allFields[this.stateKey];
+    delete allFields.root;
+    return Object.values(allFields);
+  }
+  /**
+   * Devuelve un array que contiene el id de todos los nodos pertenecientes al
+   * árbol
+   */
+  getNodesIds() {
+    const allFields = __spreadValues$6({}, this.propsStore.fields);
+    delete allFields[this.stateKey];
+    delete allFields.root;
+    return Object.keys(allFields);
+  }
+  getParentId(parentId) {
+    return this.propsStore.getFieldProps(parentId).parentId;
+  }
+  /**
+   * Este método permite controlar el comportamiento con el teclado desde fuera
+   * del componente.
+   */
+  handleKey(ev) {
+    var _a;
+    const focusedId = this.state.focusedNode;
+    const nodeProps = this.propsStore.getFieldProps(focusedId);
+    if (ev.key === "*") {
+      if (this.state.focusedNode === null)
+        return;
+      const parent = this.propsStore.getFieldProps(
+        this.propsStore.getFieldProps(this.state.focusedNode).parentId
+      );
+      parent.children.forEach(
+        (current) => this.toggleNodeExpandedState(current, true)
+      );
+    } else if (ev.key.match(/^\w$/)) {
+      const nextChildWithKey = getNextNodeWithKey(
+        this,
+        focusedId,
+        ev.key,
+        true
+      );
+      if (nextChildWithKey !== null) {
+        this.setFocusedNode(nextChildWithKey);
+        this.emit("mustFocus", nextChildWithKey);
+      }
+    } else
+      switch (ev.code) {
+        case "Home": {
+          const firstChild = getFirstNonFilteredChild(this, "root");
+          if (firstChild === null)
+            return;
+          if (ev.shiftKey && ev.ctrlKey && this.state.focusedNode !== null) {
+            selectAllNodesBetweenTwoNodes(
+              this,
+              firstChild,
+              this.state.focusedNode,
+              true
+            );
+          }
+          this.setFocusedNode(firstChild);
+          this.emit("mustFocus", firstChild);
+          break;
+        }
+        case "End": {
+          const lastVisibleChild = getLastVisibleChild(this, "root", true);
+          if (lastVisibleChild !== null) {
+            if (ev.shiftKey && ev.ctrlKey && this.state.focusedNode !== null) {
+              selectAllNodesBetweenTwoNodes(
+                this,
+                lastVisibleChild,
+                this.state.focusedNode,
+                true
+              );
+            }
+            this.setFocusedNode(lastVisibleChild);
+            this.emit("mustFocus", lastVisibleChild);
+          }
+          break;
+        }
+        case "ArrowRight": {
+          if (nodeProps.isLeaf)
+            return;
+          ev.preventDefault();
+          if (nodeProps.isExpanded) {
+            const firstChild = getFirstNonFilteredChild(this, nodeProps.id);
+            if (firstChild !== null) {
+              this.setFocusedNode(firstChild);
+              this.emit("mustFocus", firstChild);
+            }
+          } else
+            this.toggleNodeExpandedState(nodeProps.id, true);
+          break;
+        }
+        case "ArrowLeft": {
+          ev.preventDefault();
+          if (nodeProps.isLeaf || !nodeProps.isExpanded) {
+            if (nodeProps.parentId !== "root" && nodeProps.parentId !== void 0) {
+              this.setFocusedNode(nodeProps.parentId);
+              this.emit("mustFocus", nodeProps.parentId);
+            }
+          } else
+            this.toggleNodeExpandedState(nodeProps.id, false);
+          break;
+        }
+        case "ArrowUp": {
+          ev.preventDefault();
+          const prevChild = getPreviousChild(this, nodeProps.id, true);
+          if (prevChild !== null) {
+            if (ev.shiftKey)
+              this.toggleNodeSelectedState(prevChild, true);
+            this.setFocusedNode(prevChild);
+            this.emit("mustFocus", prevChild);
+          } else
+            this.emit("onArrowUpOnFirstElement", true);
+          break;
+        }
+        case "ArrowDown": {
+          ev.preventDefault();
+          const nextChild = getNextChild(this, nodeProps.id, false, true);
+          if (nextChild !== null) {
+            if (ev.shiftKey)
+              this.toggleNodeSelectedState(nextChild, true);
+            this.setFocusedNode(nextChild);
+            this.emit("mustFocus", nextChild);
+          }
+          break;
+        }
+        case "Space": {
+          if ((_a = this._configuration.current) == null ? void 0 : _a.disableSelection)
+            return;
+          ev.preventDefault();
+          this.toggleNodeSelectedState(nodeProps.id);
+          break;
+        }
+      }
+  }
+  isNode(node) {
+    return typeof node === "object" && "parentId" in node;
+  }
+  isNodeContainer(node) {
+    return typeof node === "object" && !this.isNode(node);
+  }
+  includes(searchNode) {
+    return !!this.propsStore.getFieldProps(searchNode.id);
+  }
+  initRoot() {
+    this.propsStore.updateField(
+      "root",
+      { children: [], id: "root" },
+      { isUrgent: true }
+    );
+  }
+  move(moveNode, destinationNode, afterOrBefore) {
+    var _a, _b;
+    const currentFather = this.propsStore.getFieldProps(
+      this.propsStore.getFieldProps(moveNode).parentId
+    );
+    const newFather = this.propsStore.getFieldProps(destinationNode);
+    if (!currentFather) {
+      console.warn("The current node does not belong to the tree.", moveNode);
+      return;
+    }
+    if (!newFather) {
+      console.warn(
+        "The destination node does not belong to the tree. No action will be made",
+        destinationNode
+      );
+      return;
+    }
+    currentFather.children = (_a = currentFather.children) == null ? void 0 : _a.filter(
+      (search) => search !== moveNode
+    );
+    if (!newFather.children)
+      newFather.children = [];
+    if (!afterOrBefore)
+      newFather.children.push(moveNode);
+    else if (afterOrBefore.position) {
+      newFather.children.splice(afterOrBefore.position - 1, 0, moveNode);
+    } else {
+      const key = afterOrBefore.after ? afterOrBefore.after : afterOrBefore.before;
+      const relatedNodeKey = key && this.isNode(key) ? key.id : key;
+      const relatedNodeIndex = newFather.children.findIndex(
+        (search) => search === relatedNodeKey
+      );
+      const actualIndex = addBoundary(
+        afterOrBefore.before !== void 0 ? relatedNodeIndex : relatedNodeIndex + 1,
+        0
+      );
+      if (actualIndex === -1 || actualIndex === newFather.children.length)
+        newFather.children.push(moveNode);
+      else
+        newFather.children.splice(actualIndex, 0, moveNode);
+    }
+    this.propsStore.updateField(currentFather.id, {
+      children: [...(_b = currentFather.children) != null ? _b : []]
+    });
+    this.propsStore.updateField(newFather.id, {
+      children: [...newFather.children]
+    });
+    this.propsStore.updateField(moveNode, {
+      parentId: newFather.id
+    });
+  }
+  /**
+   * Borra el nodo del árbol, y dependiendo del parámetro removeChildren, borra
+   * también sus hijos.
+   *
+   * @param removeChildren - Si se pasa en false, los nodos hijos son movidos al root
+   */
+  remove(removeNode, removeChildren = true) {
+    var _a, _b;
+    const removeNodeId = this.isNode(removeNode) ? removeNode.id : removeNode;
+    const removingNode = this.propsStore.getFieldProps(removeNodeId);
+    if (!removingNode)
+      return;
+    const father = this.propsStore.getFieldProps(removingNode.parentId);
+    if (father) {
+      this.propsStore.updateField(father.id, {
+        children: (_a = father.children) == null ? void 0 : _a.filter((search) => search !== removeNodeId)
+      });
+    }
+    (_b = removingNode.children) == null ? void 0 : _b.forEach((current) => {
+      if (removeChildren) {
+        this.remove(current);
+      } else {
+        this.move(current, "root");
+      }
+    });
+    this.setState({
+      selectedNodes: this.state.selectedNodes.filter(
+        (current) => current !== removeNodeId
+      ),
+      focusedNode: this.state.focusedNode === removeNodeId ? null : this.state.focusedNode,
+      length: this.state.length - 1
+    });
+    this.propsStore.removeField(removeNodeId);
+  }
+  removeMultiple(nodes, removeChildren = true) {
+    nodes.forEach((current) => this.remove(current, removeChildren));
+  }
+  /**
+   * Borra todos los nodos del árbol.
+   */
+  removeAll() {
+    this.hasApendedFirstChild = false;
+    this.setState({ focusedNode: null }, { isUrgent: true });
+    this.setSelectedNodes([]);
+    this.initRoot();
+    Object.keys(this.propsStore.fields).forEach((current) => {
+      if (!["root", this.stateKey].includes(current))
+        this.propsStore.removeField(current);
+    });
+  }
+  selectAll() {
+    this.setState({
+      selectedNodes: this.getNodesIds()
+    });
+    this.state.selectedNodes.forEach(
+      (currentId) => this.propsStore.updateField(currentId, { isSelected: true })
+    );
+  }
+  setFocusedNode(key, avoidSelection) {
+    var _a, _b;
+    if (this.state.focusedNode !== null)
+      this.propsStore.updateField(this.state.focusedNode, { isFocused: false });
+    this.setState({
+      focusedNode: key
+    });
+    if (!((_a = this._configuration.current) == null ? void 0 : _a.isMultiple) && !avoidSelection && ((_b = this._configuration.current) == null ? void 0 : _b.selectionMode) !== "explicit")
+      this.setSelectedNodes([key]);
+    this.propsStore.updateField(key, { isFocused: true });
+  }
+  setSelectedNodes(nodes, force = false) {
+    var _a;
+    if (((_a = this._configuration.current) == null ? void 0 : _a.disableSelection) && !force)
+      return;
+    this.state.selectedNodes.forEach(
+      (current) => this.propsStore.updateField(current, { isSelected: false })
+    );
+    this.setState({
+      selectedNodes: nodes.filter((current) => {
+        const { isSelectable } = this.propsStore.getFieldProps(current);
+        if (isSelectable !== false)
+          this.propsStore.updateField(current, { isSelected: true });
+        return isSelectable !== false;
+      })
+    });
+  }
+  setSelectedNodesByClickEvent(ev) {
+    var _a, _b, _c, _d;
+    if ((_a = this._configuration.current) == null ? void 0 : _a.disableSelection)
+      return;
+    const nodeKey = (_b = getSpecificParent(
+      ev.target,
+      (current) => current.getAttribute("role") === "treeitem"
+    )) == null ? void 0 : _b.getAttribute("data-key");
+    if (nodeKey) {
+      const nodeProps = this.propsStore.getFieldProps(nodeKey);
+      if (nodeProps.isDisabled || nodeProps.isSelectable === false)
+        return;
+      const previousSelectionKeys = [...this.state.selectedNodes];
+      const newSelection = ((_c = this._configuration.current) == null ? void 0 : _c.isMultiple) ? nodeProps.isSelected ? previousSelectionKeys.filter((current) => current !== nodeKey) : [...previousSelectionKeys, nodeKey] : [nodeKey];
+      this.setState({
+        selectedNodes: newSelection
+      });
+      previousSelectionKeys.forEach((current) => {
+        if (!newSelection.includes(current))
+          this.propsStore.updateField(current, { isSelected: false });
+      });
+      this.propsStore.updateField(nodeKey, {
+        isSelected: ((_d = this._configuration.current) == null ? void 0 : _d.isMultiple) ? !nodeProps.isSelected : true
+      });
+    } else
+      console.warn("Cannot set selection, no treeitem found", ev);
+  }
+  setState(updateProps, conf) {
+    this.propsStore.updateField(
+      this.stateKey,
+      __spreadValues$6(__spreadValues$6({}, this.state), updateProps),
+      conf
+    );
+  }
+  toggleNodeExpandedState(key, shouldExpand) {
+    var _a, _b, _c, _d, _e;
+    const nodeProps = this.propsStore.getFieldProps(key);
+    if (nodeProps.isDisabled || nodeProps.isLeaf || nodeProps.isLoading)
+      return;
+    if (((_a = this._configuration.current) == null ? void 0 : _a.onLoadData) && !nodeProps.hasLoaded) {
+      this.propsStore.updateField(key, { isLoading: true });
+      (_b = this._configuration.current) == null ? void 0 : _b.onLoadData(nodeProps).finally(() => {
+        var _a2, _b2;
+        this.propsStore.updateField(key, {
+          isLoading: false,
+          isExpanded: true,
+          hasLoaded: true
+        });
+        this.setState({
+          expandedNodes: [...this.state.expandedNodes, key]
+        });
+        (_b2 = (_a2 = this._configuration.current) == null ? void 0 : _a2.onExpand) == null ? void 0 : _b2.call(
+          _a2,
+          this.propsStore.getFieldProps(key)
+        );
+      });
+    } else {
+      const { expandedNodes } = this.state;
+      const shouldExpandInner = shouldExpand !== void 0 ? shouldExpand : !expandedNodes.includes(key);
+      if ((_c = this.propsStore.getFieldProps(key)) == null ? void 0 : _c.isDisabled)
+        return;
+      this.setState({
+        expandedNodes: shouldExpandInner ? [...expandedNodes, key] : expandedNodes.filter((current) => current !== key)
+      });
+      this.propsStore.updateField(key, { isExpanded: shouldExpandInner });
+      (_e = (_d = this._configuration.current) == null ? void 0 : _d.onExpand) == null ? void 0 : _e.call(
+        _d,
+        this.propsStore.getFieldProps(key)
+      );
+    }
+  }
+  toggleNodeSelectedState(key, isSelected) {
+    var _a, _b;
+    if ((_a = this._configuration.current) == null ? void 0 : _a.disableSelection)
+      return;
+    const nodeProps = this.propsStore.getFieldProps(key);
+    if (nodeProps.isDisabled || nodeProps.isSelectable === false)
+      return;
+    const shouldSelect = isSelected !== void 0 ? isSelected : !this.state.selectedNodes.includes(key);
+    if (shouldSelect && !((_b = this._configuration.current) == null ? void 0 : _b.isMultiple) && this.state.selectedNodes[0])
+      this.toggleNodeSelectedState(this.state.selectedNodes[0], false);
+    this.propsStore.updateField(key, { isSelected: shouldSelect });
+    this.setState({
+      selectedNodes: shouldSelect ? [...this.state.selectedNodes, key] : this.state.selectedNodes.filter((current) => current !== key)
+    });
+  }
+}
+function useTreeSelector(handler, configuration) {
+  var _a;
+  return usePropsSelector(
+    (_a = handler == null ? void 0 : handler.stateKey) != null ? _a : "__NO__TREE__KEY__",
+    __spreadValues$6({
+      propsStore: handler == null ? void 0 : handler.propsStore
+    }, configuration)
+  );
+}
+function useTreeSelectorByName(treeName, configuration) {
+  var _a;
+  const handler = useTreeDataController(treeName);
+  const selection = usePropsSelector(
+    (_a = handler == null ? void 0 : handler.stateKey) != null ? _a : "__NO__TREE__KEY__",
+    __spreadValues$6({
+      propsStore: handler == null ? void 0 : handler.propsStore
+    }, configuration)
+  );
+  return { selection, handler };
+}
+
+var __defProp$5 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+function getActiveDescendantName(treeName, nodeId) {
+  return `${treeName}__${nodeId}`;
+}
+function getDomProps(_, treeName, type, par) {
+  var _a;
+  switch (type) {
+    case "node": {
+      const node = par;
+      const tree = getTreeDataController(treeName);
+      return __spreadProps$4(__spreadValues$5({
+        "aria-disabled": node.isDisabled,
+        "aria-expanded": node.isLeaf ? void 0 : !!node.isExpanded,
+        "aria-label": node.label
+      }, ((_a = tree.configuration.current) == null ? void 0 : _a.disableSelection) ? void 0 : {
+        "aria-selected": node.isSelectable !== false && !node.isDisabled ? !!node.isSelected : void 0
+      }), {
+        className: node.className,
+        color: node.color,
+        "data-key": node.id,
+        id: getActiveDescendantName(treeName, node.id),
+        role: "treeitem",
+        title: node.title
+      });
+    }
+    default: {
+      const tree = par;
+      return {
+        role: "tree",
+        "aria-multiselectable": tree.isMultiple
+      };
+    }
+  }
+}
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+const SearchLabel = ({
+  isLoading: isSearching,
+  onDelete,
+  searchString
+}) => {
+  if (!searchString && !isSearching)
+    return null;
+  return /* @__PURE__ */ jsx(Box, { className: `tree__searchLabelBox ${isSearching ? "isLoading" : ""}`, children: isSearching ? /* @__PURE__ */ jsx(Spinner, { className: "tree__loading" }) : /* @__PURE__ */ jsxs(Box, { as: "label", className: "tree__searchLabel", children: [
+    formatMessage(window.LBL_FILTERING_BY, { TOK1: searchString }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadValues$4({
+        icon: "Close",
+        "aria-label": window.LBL_DELETE_FILTER,
+        onClick: onDelete,
+        title: window.LBL_DELETE_FILTER,
+        size: "sm"
+      }, getVariant("icon-inherit"))
+    )
+  ] }) });
+};
+
+const TreeContext = React.createContext({});
+function useTreeContext() {
+  const context = React.useContext(TreeContext);
+  if (!context)
+    throw new Error("There is no tree context");
+  return context;
+}
+const TreeContextProvider = ({
+  children,
+  value
+}) => {
+  const Provider = React.useMemo(() => {
+    return TreeContext.Provider;
+  }, []);
+  return /* @__PURE__ */ jsx(Provider, { value, children });
+};
+
+const DefaultIconRenderer = (props) => {
+  var _a;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: props.icon,
+      title: "",
+      size: (_a = props.iconSize) != null ? _a : "iconsm"
+    }
+  );
+};
+
+const DefaultLabelRenderer = (props) => {
+  return /* @__PURE__ */ jsx(Box, { as: "span", children: props.label });
+};
+
+const Spacer = ({ level }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array(level).fill("").map((_, i) => i).map((current) => /* @__PURE__ */ jsx(Box, { className: "spacer" }, current)) });
+};
+
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+const TreeItemLabel = ({ level, treeKey }) => {
+  var _a, _b, _c;
+  const {
+    handler,
+    treeProps: { toggleNodesOnLabelClick }
+  } = useTreeContext();
+  const props = usePropsSelector(treeKey, {
+    selector: (current) => current,
+    comparator: (prevProps, newProps) => {
+      return shallowEqual(prevProps, newProps) && shallowEqual(prevProps == null ? void 0 : prevProps.children, newProps == null ? void 0 : newProps.children);
+    },
+    propsStore: handler.propsStore
+  });
+  const Renderer = React.useMemo(
+    () => {
+      var _a2;
+      return (_a2 = props.labelRenderer) != null ? _a2 : DefaultLabelRenderer;
+    },
+    [props.labelRenderer]
+  );
+  const handleToggle = React.useCallback(() => {
+    handler.toggleNodeExpandedState(treeKey);
+  }, [handler, treeKey]);
+  const IconRenderer = React.useMemo(() => {
+    return typeof props.icon === "string" ? DefaultIconRenderer : props.icon;
+  }, [props.icon]);
+  const onClick = React.useCallback(() => {
+    if (props.allowToggleExpandedFromLabel !== false)
+      handler.toggleNodeExpandedState(treeKey);
+  }, [handler, props.allowToggleExpandedFromLabel, treeKey]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "span",
+      className: `tree__nodeItemLabel ${props.isFocused ? "focus" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(Spacer, { level }),
+        (props.isLoading || props.isExpanded && props.isLeaf !== true || props.isLeaf === false || ((_b = (_a = props.children) == null ? void 0 : _a.length) != null ? _b : 0) > 0 || props.isLeaf === void 0 && !props.hasLoaded && ((_c = handler.configuration.current) == null ? void 0 : _c.onLoadData)) && /* @__PURE__ */ jsx(Box, { className: "tree__expanderWrapper", children: props.isLoading ? /* @__PURE__ */ jsx(Spinner, { sx: { width: "iconSm", height: "iconSm" } }) : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "tree__expandIcon",
+            onClick: handleToggle,
+            name: props.isExpanded ? "MinusFilled" : "PlusFilled",
+            title: "",
+            size: "iconSm"
+          }
+        ) }),
+        props.icon && IconRenderer && /* @__PURE__ */ jsx(IconRenderer, __spreadValues$3({}, props)),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            className: "tree__nodeItemLabelRenderer",
+            onClick: toggleNodesOnLabelClick !== false ? onClick : void 0,
+            children: /* @__PURE__ */ jsx(Renderer, __spreadProps$3(__spreadValues$3({}, props), { level }))
+          }
+        )
+      ]
+    }
+  );
+};
+var TreeItemLabel$1 = React.memo(TreeItemLabel);
+
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const TreeItem = ({ level, treeKey }) => {
+  const { handler, name, forceUpdate, treeProps } = useTreeContext();
+  const props = usePropsSelector(treeKey, {
+    selector: (current) => current,
+    comparator: (prevProps, newProps) => {
+      return shallowEqual(prevProps, newProps) && shallowEqual(prevProps == null ? void 0 : prevProps.children, newProps == null ? void 0 : newProps.children);
+    },
+    propsStore: handler.propsStore
+  });
+  const nodes = React.useMemo(
+    () => {
+      var _a, _b;
+      return (_b = (_a = props.children) == null ? void 0 : _a.map(
+        (current) => handler.propsStore.getFieldProps(current)
+      )) != null ? _b : [];
+    },
+    [props.children, handler.propsStore]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, __spreadProps$2(__spreadValues$2({ as: "li" }, getDomProps(treeProps, name, "node", props)), { children: [
+    /* @__PURE__ */ jsx(TreeItemLabel$1, { level, treeKey }),
+    /* @__PURE__ */ jsx(
+      TreeItemChildren$1,
+      {
+        forceUpdate,
+        role: "group",
+        level,
+        nodes
+      }
+    )
+  ] })) });
+};
+var TreeItem$1 = React.memo(TreeItem);
+
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const TreeItemChildren = React.forwardRef((_a, ref) => {
+  var _b = _a, { level, nodes, forceUpdate } = _b, props = __objRest(_b, ["level", "nodes", "forceUpdate"]);
+  const { handler } = useTreeContext();
+  return /* @__PURE__ */ jsx(Box, __spreadProps$1(__spreadValues$1({ ref, as: "ul" }, props), { children: nodes == null ? void 0 : nodes.map((current) => {
+    const currentProps = handler.propsStore.getFieldProps(current.id);
+    if (!currentProps)
+      return null;
+    return currentProps.isFiltered ? null : /* @__PURE__ */ jsx(TreeItem$1, { level: level + 1, treeKey: current.id }, current.id);
+  }) }));
+});
+TreeItemChildren.displayName = "TreeItemChildren";
+var TreeItemChildren$1 = React.memo(TreeItemChildren);
+
+function useTreeData({ name, treeProps }) {
+  const props = useLatest(treeProps);
+  const handler = React.useMemo(
+    () => new TreeDataController(name, props),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  useMount(() => {
+    var _a;
+    (_a = treeProps == null ? void 0 : treeProps.initialNodes) == null ? void 0 : _a.forEach((current) => handler.append(current));
+  });
+  const data = usePropsSelector("root", {
+    comparator: shallowEqual,
+    propsStore: handler.propsStore,
+    selector: (current) => {
+      var _a;
+      return {
+        children: (_a = current.children) != null ? _a : [],
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+        forceUpdate: current.forceUpdate
+      };
+    }
+  });
+  const keyHandlerId = React.useMemo(() => `keyHandler${uniqueId()}`, []);
+  const keyHandlerRef = React.useRef(null);
+  const focusOnNode = React.useCallback(
+    (key, retry = 3) => {
+      var _a, _b;
+      if (keyHandlerRef.current) {
+        const focusElement = keyHandlerRef.current.querySelector(
+          `[data-key="${key}"]`
+        );
+        (_a = keyHandlerRef.current) == null ? void 0 : _a.focus();
+        if (focusElement) {
+          const actualFocusElement = ((_b = treeProps.focusGetter) != null ? _b : (liElement) => liElement.querySelector(
+            ":scope > .tree__nodeItemLabel"
+          ))(focusElement);
+          const nodeProps = handler.propsStore.getFieldProps(key);
+          if (!treeProps.focusGetter || !nodeProps.labelRenderer)
+            actualFocusElement.classList.add("focused");
+          actualFocusElement.scrollIntoView({
+            inline: "nearest",
+            block: "nearest"
+          });
+        } else if (retry > 0)
+          setTimeout(() => focusOnNode(key, retry - 1), 30);
+      }
+    },
+    [handler.propsStore, treeProps.focusGetter]
+  );
+  React.useEffect(() => {
+    const unsuscribe1 = handler.on("mustFocus", (node) => focusOnNode(node));
+    const unsuscribe2 = handler.on(
+      "onArrowUpOnFirstElement",
+      () => {
+        var _a;
+        return (_a = treeProps.onArrowUpOnFirstElement) == null ? void 0 : _a.call(treeProps);
+      }
+    );
+    return () => {
+      unsuscribe1();
+      unsuscribe2();
+    };
+  }, [focusOnNode, handler, treeProps]);
+  return {
+    data,
+    handler,
+    keyHandler: {
+      id: keyHandlerId,
+      onKeyDown: React.useCallback(
+        (ev) => {
+          var _a;
+          if (ev.key === "Enter") {
+            const key = handler.state.focusedNode;
+            if (key) {
+              const nodeProps = handler.propsStore.getFieldProps(key);
+              (_a = treeProps.onNodeClick) == null ? void 0 : _a.call(treeProps, ev, nodeProps);
+            }
+          } else {
+            handler.handleKey(ev);
+          }
+        },
+        [handler, treeProps]
+      ),
+      onMouseDown: React.useCallback(
+        (ev) => {
+          var _a;
+          const previousFocused = handler.state.focusedNode;
+          if (previousFocused !== null && ev.shiftKey && ((_a = handler.configuration.current) == null ? void 0 : _a.isMultiple))
+            ev.preventDefault();
+        },
+        [handler.configuration, handler.state.focusedNode]
+      ),
+      onClick: React.useCallback(
+        (ev) => {
+          var _a, _b;
+          if (getSpecificParent(ev.target, (current) => current.classList.contains("tree__expandIcon")))
+            return;
+          const node = getSpecificParent(
+            ev.target,
+            (current) => !!current.getAttribute("data-key")
+          );
+          if (node) {
+            const previousFocused = handler.state.focusedNode;
+            const key = node.getAttribute("data-key");
+            const nodeProps = handler.propsStore.getFieldProps(key);
+            (_a = treeProps.onNodeClick) == null ? void 0 : _a.call(treeProps, ev, nodeProps);
+            if (previousFocused !== null && ev.shiftKey && ((_b = handler.configuration.current) == null ? void 0 : _b.isMultiple)) {
+              selectAllNodesBetweenTwoNodes(
+                handler,
+                previousFocused,
+                key,
+                true
+              );
+            } else {
+              handler.setFocusedNode(key);
+              handler.setSelectedNodesByClickEvent(ev);
+            }
+            if (key)
+              focusOnNode(key);
+          }
+        },
+        [focusOnNode, handler, treeProps]
+      ),
+      ref: keyHandlerRef
+    }
+  };
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const Tree = (props) => {
+  var _a, _b, _c;
+  const { data, handler, keyHandler } = useTreeData({
+    name: props.name,
+    treeProps: __spreadValues({}, props)
+  });
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [currentSearchString, setCurrentSearchString] = React.useState("");
+  const isTreeLoading = useTreeSelector(handler, {
+    selector: (current) => current.isLoading
+  });
+  React.useEffect(() => {
+    setIsLoading(isTreeLoading);
+  }, [isTreeLoading]);
+  const search = useDebounceFn(
+    () => {
+      if (props.filterString === void 0)
+        return;
+      setIsLoading(true);
+      React.startTransition(() => {
+        setCurrentSearchString(props.filterString);
+      });
+      if (props.filterString !== void 0 && props.filterString !== "") {
+        unfilterNodes(handler);
+        matchNodesAgainstString(handler, props.filterString);
+        handler.forceEmitUpdate();
+      } else {
+        unfilterNodes(handler);
+        handler.forceEmitUpdate();
+      }
+      setTimeout(() => setIsLoading(false), 0);
+    },
+    { wait: 200 }
+  );
+  React.useEffect(() => {
+    search.run();
+    if (!props.filterString)
+      search.flush();
+  }, [props.filterString]);
+  usePropsSelector(
+    handler.stateKey,
+    {
+      propsStore: handler.propsStore,
+      selector: (current) => current,
+      comparator: (prevProps, newProps) => {
+        var _a2;
+        if (props.onSelect && !shallowEqual(prevProps == null ? void 0 : prevProps.selectedNodes, newProps == null ? void 0 : newProps.selectedNodes)) {
+          props.onSelect(
+            ((_a2 = newProps == null ? void 0 : newProps.selectedNodes) != null ? _a2 : []).map(
+              (currentId) => handler.propsStore.getFieldProps(currentId)
+            )
+          );
+        }
+        return true;
+      }
+    }
+  );
+  const { focusedNode } = usePropsSelector(handler.stateKey, {
+    propsStore: handler.propsStore,
+    selector: (current) => ({
+      focusedNode: current.focusedNode
+    })
+  });
+  useMount(() => {
+    if (props.getHandler)
+      props.getHandler(handler);
+  });
+  useUnmount(() => handler.destructor());
+  const contextValue = React.useMemo(() => {
+    const actualValue = {
+      handler,
+      name: props.name,
+      forceUpdate: data.forceUpdate,
+      focusGetter: props.focusGetter,
+      treeProps: props
+    };
+    return actualValue;
+  }, [handler, props, data.forceUpdate]);
+  return /* @__PURE__ */ jsx(TreeContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    Box,
+    __spreadProps(__spreadValues({
+      className: `tree ${(_a = props.className) != null ? _a : ""}`
+    }, getVariant((_b = props.variant) != null ? _b : "layout.common.trees.primary")), {
+      children: [
+        /* @__PURE__ */ jsx(
+          SearchLabel,
+          {
+            isLoading: (_c = props.isLoading) != null ? _c : isLoading,
+            onDelete: props.onDeleteFilterString,
+            searchString: props.hideSearchLabel ? "" : currentSearchString
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TreeItemChildren$1,
+          __spreadValues({
+            "aria-activedescendant": focusedNode !== null ? getActiveDescendantName(props.name, focusedNode) : void 0,
+            "aria-label": props.label,
+            as: "ul",
+            forceUpdate: data.forceUpdate,
+            level: -1,
+            nodes: React.useMemo(
+              () => data.children.map(
+                (current) => handler.propsStore.getFieldProps(current)
+              ),
+              [data.children, handler.propsStore]
+            ),
+            role: "tree",
+            tabIndex: 0
+          }, keyHandler)
+        )
+      ]
+    })
+  ) });
+};
+var Tree$1 = memo(Tree);
+
+export { Tree$1 as Tree, TreeDataController, useTreeContext, useTreeData, useTreeDataController, useTreeSelector, useTreeSelectorByName };
+//# sourceMappingURL=index.js.map