@apia/tree 0.1.3 → 0.2.2

package/dist/index.js

@@ -1 +1,1450 @@
-import{jsx as f,jsxs as O,Fragment as k}from"react/jsx-runtime";import{useMount as D,useDebounceFn as ve,useUnmount as be}from"ahooks";import p,{useState as Ne,useEffect as Fe,memo as ye}from"react";import{shallowEqual as N}from"react-redux";import{Spinner as T,Box as m}from"theme-ui";import{EventEmitter as A,PropsStore as Pe,addBoundary as Ee,getSpecificParent as _,usePropsSelector as b,formatMessage as Oe,useLatest as we}from"@apia/util";import{IconButton as Ie}from"@apia/components";import{makeStyledComponent as _e,getVariant as x}from"@apia/theme";import{Icon as K}from"@apia/icons";import{uniqueId as xe}from"lodash-es";const $=(t,e,r)=>{const o=t.propsStore.getFieldProps(e);if(e!=="root"&&(o.isDisabled||!o.isExpanded)||o.children.length===0)return null;for(let l=o.children.length-1;l>=0;l--){const s=o.children[l],d=t.propsStore.getFieldProps(s);if(!r||!d.isFiltered){const i=$(t,s,r);return i!==null?i:s}}return null},$e=(t,e,r)=>{var o,l;const s=t.propsStore.getFieldProps(e),d=t.propsStore.getFieldProps(s.parentId);let i=(l=(o=d.children)==null?void 0:o.findIndex(n=>n===s.id))!=null?l:-1;for(;i>0;){const n=t.propsStore.getFieldProps(d.children[i-1]),a=$(t,n.id,r);if(a!==null)return a;if(!r||!n.isFiltered)return n.id;i--}return s.parentId==="root"?null:s.parentId},L=(t,e)=>{const r=t.propsStore.getFieldProps(e);for(const o of r.children)if(!t.propsStore.getFieldProps(o).isFiltered)return o;return null},y=(t,e,r,o)=>{var l,s;const d=t.propsStore.getFieldProps(e),i=t.propsStore.getFieldProps(d.parentId);let n=(s=(l=i.children)==null?void 0:l.findIndex(a=>a===d.id))!=null?s:1/0;if(!r&&d.isExpanded){if(!o&&d.children.length>0)return d.children[0];const a=L(t,d.id);if(a!==null)return a}for(;n<i.children.length-1;){const a=i.children[n+1];if(!o||!t.propsStore.getFieldProps(a).isFiltered)return a;n++}return d.parentId==="root"?null:y(t,i.id,!0,o)},Le=(t,e,r,o)=>{let l=e;do if(l=y(t,l,!1,o),l!==null){const i=t.propsStore.getFieldProps(l);if((!i.isFiltered||!o)&&i.label.toUpperCase().startsWith(r.toUpperCase()))return l}while(l!==null);const s=t.propsStore.getFieldProps(e),d=t.propsStore.getFieldProps(s.parentId).children.findIndex(i=>i===e);if(s.parentId!=="root"||d>0){const[i]=t.propsStore.getFieldProps("root").children,n=t.propsStore.getFieldProps(i);if(i&&(!o||!n.isFiltered)&&n.label.toUpperCase().startsWith(r.toUpperCase()))return i;l=i;do if(l=y(t,l,!1,o),l){const a=t.propsStore.getFieldProps(l);if((!o||!a.isFiltered)&&a.label.toUpperCase().startsWith(r.toUpperCase()))return l}while(l!==e&&l!==null)}return null},M=(t,e)=>{const r=[e];let o=e;do o=t.propsStore.getFieldProps(o).parentId,r.unshift(o);while(o!=="root");return r},je=(t,e,r)=>{const o=M(t,e),l=M(t,r);for(let s=o.length-1;s>=0;s--){const d=l.indexOf(o[s]);if(d!==-1)return{commonAncestor:o[s],oneNodeAncestorChild:o[s+1],anotherNodeAncestorChild:l[d+1]}}return console.warn("This point should have never been reached since the root node is common to all nodes",{oneNodeId:e,anotherNodeId:r,oneNodePath:o,anotherNodePath:l}),null},R=t=>{t.state.filteredNodes.forEach(r=>{t.propsStore.updateField(r,{isFiltered:!1},{noEmit:!0})});const e=t.propsStore.getFieldProps("root").children[0];e&&t.setFocusedNode(e),t.setState({filteredNodes:[]})},B=(t,e,r="root")=>{let o=!1,l=null;const s=t.propsStore.getFieldProps(r);r!=="root"&&s.label.match(new RegExp(e,"i"))&&(t.propsStore.updateField(r,{isFiltered:!1}),o=!0,l=s.id,t.setState({filteredNodes:t.state.filteredNodes.filter(i=>i!==r)}));let d=!1;return s.children.forEach(i=>{d=B(t,e,i)||o,o=d||o,o&&!l&&(l=i)}),d&&(t.propsStore.updateField(r,{isExpanded:!0}),o&&!l&&(l=r)),o||(t.propsStore.updateField(r,{isFiltered:!0},{noEmit:!0}),t.setState({filteredNodes:[...t.state.filteredNodes,r]})),l!==null&&t.setFocusedNode(l),o},j=(t,e,r,o)=>{const l=je(t,e,r);if(l){const{anotherNodeAncestorChild:s,commonAncestor:d,oneNodeAncestorChild:i}=l,n=t.propsStore.getFieldProps(d),a=n.children.findIndex(g=>g===i),c=n.children.findIndex(g=>g===s);let u=a>=c?r:e;const h=a<c?r:e;t.toggleNodeSelectedState(u,!0);do u=y(t,u,o),u!==null&&t.toggleNodeSelectedState(u,!0);while(u!==h&&u!==null)}};var Ce=Object.defineProperty,Ue=Object.defineProperties,ke=Object.getOwnPropertyDescriptors,z=Object.getOwnPropertySymbols,De=Object.prototype.hasOwnProperty,Te=Object.prototype.propertyIsEnumerable,G=(t,e,r)=>e in t?Ce(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,v=(t,e)=>{for(var r in e||(e={}))De.call(e,r)&&G(t,r,e[r]);if(z)for(var r of z(e))Te.call(e,r)&&G(t,r,e[r]);return t},H=(t,e)=>Ue(t,ke(e));const P={},W=new class extends A{emit(t,e){super.emit(t,e),P[e.name]=e.controller}};function q(t){const[e,r]=Ne(P[t]);return Fe(()=>(P[t]!==e&&r(P[t]),W.on("addController",o=>{o.name===t&&r(o.controller)})),[]),e}function Ae(t){return P[t]}class V extends A{constructor(e,r,o=new Pe({logCommands:{propsStore:`treeProps_${e}`,propsLog:`treeLog_${e}`,propsSuscriptors:`propsSuscriptors_${e}`,updateProp:`updateProp_${e}`}})){var l;super(),this.name=e,this.propsStore=o,this.hasApendedFirstChild=!1,this.missingParents=[],this.nonEmittedUpdates=[],this.stateKey="treeState",this.previousNodes=[],this._configuration=r??{current:{emitUpdates:!0}},this._configuration.current.emitUpdates=(l=this._configuration.current.emitUpdates)!=null?l:!0,this.setState(this.getInitialState()),W.emit("addController",{name:e,controller:this}),this.initRoot()}get configuration(){return v({},this._configuration)}get state(){return this.propsStore.getFieldProps(this.stateKey)}get stateStore(){return this.propsStore}destructor(){this.propsStore.destructor()}append(e){var r,o,l,s,d;const i=H(v({},e),{nodeProps:(r=e.nodeProps)!=null?r:{}});let n;i.parentId!==void 0&&(o=this.propsStore.getFieldProps(i.parentId))!=null&&o.children?n=i.parentId:(n="root",i.parentId&&this.missingParents.push(i.parentId),i.actualParentId=i.parentId,i.parentId="root"),this.propsStore.updateField(i.id,H(v({},i),{children:(l=i.children)!=null?l:[]}),{isUrgent:!0}),this.setState({length:this.state.length+1}),this.missingParents.includes(i.id)&&(this.propsStore.getFieldProps("root").children.forEach(a=>{this.propsStore.getFieldProps(a).actualParentId===i.id&&this.move(a,i.id)}),this.missingParents=this.missingParents.filter(a=>a!==i.id)),this.propsStore.updateField(n,{children:[...this.propsStore.getFieldProps(n).children,i.id]},{noEmit:!((s=this._configuration.current)!=null&&s.emitUpdates)}),(d=this._configuration.current)!=null&&d.emitUpdates||this.nonEmittedUpdates.push(n),this.hasApendedFirstChild||(this.hasApendedFirstChild=!0,this.setFocusedNode(i.id,!0)),i.isExpanded&&this.toggleNodeExpandedState(i.id,!0)}batchInit(){this.config({emitUpdates:!1}),this.setState({isLoading:!0},{isUrgent:!0})}batchFinish(){this.config({emitUpdates:!0}),setTimeout(()=>this.setState({isLoading:!1}),0);const e=[...this.getNodesIds()];this.previousNodes.filter(r=>!e.find(o=>o===r)).forEach(r=>this.remove(r)),this.config({emitUpdates:!0}),setTimeout(()=>this.setState({isLoading:!1}),0)}config(e){var r;!((r=this._configuration.current)!=null&&r.emitUpdates)&&e.emitUpdates&&(this.nonEmittedUpdates.forEach(o=>this.propsStore.updateField(o,{children:[...this.propsStore.getFieldProps(o).children]})),this.nonEmittedUpdates=[]),Object.assign(this._configuration.current,e)}deselectAll(){this.state.selectedNodes.forEach(e=>this.propsStore.updateField(e,{isSelected:!1})),this.setState({selectedNodes:[]})}forceEmitUpdate(){var e;this.propsStore.updateField("root",{forceUpdate:((e=this.propsStore.getFieldProps("root").forceUpdate)!=null?e:0)+1})}getInitialState(){return{expandedNodes:[],filteredNodes:[],focusedNode:null,isLoading:!1,length:0,selectedNodes:[]}}getNodesAsArray(){const e=v({},this.propsStore.fields);return delete e[this.stateKey],delete e.root,Object.values(e)}getNodesIds(){const e=v({},this.propsStore.fields);return delete e[this.stateKey],delete e.root,Object.keys(e)}getParentId(e){return this.propsStore.getFieldProps(e).parentId}handleKey(e){var r;const o=this.state.focusedNode,l=this.propsStore.getFieldProps(o);if(e.key==="*"){if(this.state.focusedNode===null)return;this.propsStore.getFieldProps(this.propsStore.getFieldProps(this.state.focusedNode).parentId).children.forEach(s=>this.toggleNodeExpandedState(s,!0))}else if(e.key.match(/^\w$/)){const s=Le(this,o,e.key,!0);s!==null&&(this.setFocusedNode(s),this.emit("mustFocus",s))}else switch(e.code){case"Home":{const s=L(this,"root");if(s===null)return;e.shiftKey&&e.ctrlKey&&this.state.focusedNode!==null&&j(this,s,this.state.focusedNode,!0),this.setFocusedNode(s),this.emit("mustFocus",s);break}case"End":{const s=$(this,"root",!0);s!==null&&(e.shiftKey&&e.ctrlKey&&this.state.focusedNode!==null&&j(this,s,this.state.focusedNode,!0),this.setFocusedNode(s),this.emit("mustFocus",s));break}case"ArrowRight":{if(l.isLeaf)return;if(e.preventDefault(),l.isExpanded){const s=L(this,l.id);s!==null&&(this.setFocusedNode(s),this.emit("mustFocus",s))}else this.toggleNodeExpandedState(l.id,!0);break}case"ArrowLeft":{e.preventDefault(),l.isLeaf||!l.isExpanded?l.parentId!=="root"&&l.parentId!==void 0&&(this.setFocusedNode(l.parentId),this.emit("mustFocus",l.parentId)):this.toggleNodeExpandedState(l.id,!1);break}case"ArrowUp":{e.preventDefault();const s=$e(this,l.id,!0);s!==null?(e.shiftKey&&this.toggleNodeSelectedState(s,!0),this.setFocusedNode(s),this.emit("mustFocus",s)):this.emit("onArrowUpOnFirstElement",!0);break}case"ArrowDown":{e.preventDefault();const s=y(this,l.id,!1,!0);s!==null&&(e.shiftKey&&this.toggleNodeSelectedState(s,!0),this.setFocusedNode(s),this.emit("mustFocus",s));break}case"Space":{if((r=this._configuration.current)!=null&&r.disableSelection)return;e.preventDefault(),this.toggleNodeSelectedState(l.id);break}}}isNode(e){return typeof e=="object"&&"parentId"in e}isNodeContainer(e){return typeof e=="object"&&!this.isNode(e)}includes(e){return!!this.propsStore.getFieldProps(e.id)}initRoot(){this.propsStore.updateField("root",{children:[],id:"root"},{isUrgent:!0})}move(e,r,o){var l,s;const d=this.propsStore.getFieldProps(this.propsStore.getFieldProps(e).parentId),i=this.propsStore.getFieldProps(r);if(!d){console.warn("The current node does not belong to the tree.",e);return}if(!i){console.warn("The destination node does not belong to the tree. No action will be made",r);return}if(d.children=(l=d.children)==null?void 0:l.filter(n=>n!==e),i.children||(i.children=[]),!o)i.children.push(e);else if(o.position)i.children.splice(o.position-1,0,e);else{const n=o.after?o.after:o.before,a=n&&this.isNode(n)?n.id:n,c=i.children.findIndex(h=>h===a),u=Ee(o.before!==void 0?c:c+1,0);u===-1||u===i.children.length?i.children.push(e):i.children.splice(u,0,e)}this.propsStore.updateField(d.id,{children:[...(s=d.children)!=null?s:[]]}),this.propsStore.updateField(i.id,{children:[...i.children]}),this.propsStore.updateField(e,{parentId:i.id})}remove(e,r=!0){var o,l;const s=this.isNode(e)?e.id:e,d=this.propsStore.getFieldProps(s);if(!d)return;const i=this.propsStore.getFieldProps(d.parentId);i&&this.propsStore.updateField(i.id,{children:(o=i.children)==null?void 0:o.filter(n=>n!==s)}),(l=d.children)==null||l.forEach(n=>{r?this.remove(n):this.move(n,"root")}),this.setState({selectedNodes:this.state.selectedNodes.filter(n=>n!==s),focusedNode:this.state.focusedNode===s?null:this.state.focusedNode,length:this.state.length-1}),this.propsStore.removeField(s)}removeMultiple(e,r=!0){e.forEach(o=>this.remove(o,r))}removeAll(){var e;((e=this.configuration.current)==null?void 0:e.emitUpdates)===!1?(this.previousNodes=this.getNodesIds(),this.propsStore.updateField("root",{children:[],id:"root"},{isUrgent:!0,noEmit:!0})):(this.hasApendedFirstChild=!1,this.setState({focusedNode:null},{isUrgent:!0}),this.setSelectedNodes([]),this.initRoot(),Object.keys(this.propsStore.fields).forEach(r=>{["root",this.stateKey].includes(r)||this.propsStore.removeField(r)}))}selectAll(){this.setState({selectedNodes:this.getNodesIds()}),this.state.selectedNodes.forEach(e=>this.propsStore.updateField(e,{isSelected:!0}))}setFocusedNode(e,r){var o,l;this.state.focusedNode!==null&&this.propsStore.updateField(this.state.focusedNode,{isFocused:!1}),this.setState({focusedNode:e}),!((o=this._configuration.current)!=null&&o.isMultiple)&&!r&&((l=this._configuration.current)==null?void 0:l.selectionMode)!=="explicit"&&this.setSelectedNodes([e]),this.propsStore.updateField(e,{isFocused:!0})}setSelectedNodes(e,r=!1){var o;(o=this._configuration.current)!=null&&o.disableSelection&&!r||(this.state.selectedNodes.forEach(l=>this.propsStore.updateField(l,{isSelected:!1})),this.setState({selectedNodes:e.filter(l=>{const{isSelectable:s}=this.propsStore.getFieldProps(l);return s!==!1&&this.propsStore.updateField(l,{isSelected:!0}),s!==!1})}))}setSelectedNodesByClickEvent(e){var r,o,l,s;if((r=this._configuration.current)!=null&&r.disableSelection)return;const d=(o=_(e.target,i=>i.getAttribute("role")==="treeitem"))==null?void 0:o.getAttribute("data-key");if(d){const i=this.propsStore.getFieldProps(d);if(i.isDisabled||i.isSelectable===!1)return;const n=[...this.state.selectedNodes],a=(l=this._configuration.current)!=null&&l.isMultiple?i.isSelected?n.filter(c=>c!==d):[...n,d]:[d];this.setState({selectedNodes:a}),n.forEach(c=>{a.includes(c)||this.propsStore.updateField(c,{isSelected:!1})}),this.propsStore.updateField(d,{isSelected:(s=this._configuration.current)!=null&&s.isMultiple?!i.isSelected:!0})}else console.warn("Cannot set selection, no treeitem found",e)}setState(e,r){this.propsStore.updateField(this.stateKey,v(v({},this.state),e),r)}toggleNodeExpandedState(e,r){var o,l,s,d,i;const n=this.propsStore.getFieldProps(e);if(!(n.isDisabled||n.isLeaf||n.isLoading))if((o=this._configuration.current)!=null&&o.onLoadData&&!n.hasLoaded)this.propsStore.updateField(e,{isLoading:!0}),(l=this._configuration.current)==null||l.onLoadData(n).finally(()=>{var a,c;this.propsStore.updateField(e,{isLoading:!1,isExpanded:!0,hasLoaded:!0}),this.setState({expandedNodes:[...this.state.expandedNodes,e]}),(c=(a=this._configuration.current)==null?void 0:a.onExpand)==null||c.call(a,this.propsStore.getFieldProps(e))});else{const{expandedNodes:a}=this.state,c=r!==void 0?r:!a.includes(e);if((s=this.propsStore.getFieldProps(e))!=null&&s.isDisabled)return;this.setState({expandedNodes:c?[...a,e]:a.filter(u=>u!==e)}),this.propsStore.updateField(e,{isExpanded:c}),(i=(d=this._configuration.current)==null?void 0:d.onExpand)==null||i.call(d,this.propsStore.getFieldProps(e))}}toggleNodeSelectedState(e,r){var o,l;if((o=this._configuration.current)!=null&&o.disableSelection)return;const s=this.propsStore.getFieldProps(e);if(s.isDisabled||s.isSelectable===!1)return;const d=r!==void 0?r:!this.state.selectedNodes.includes(e);d&&!((l=this._configuration.current)!=null&&l.isMultiple)&&this.state.selectedNodes[0]&&this.toggleNodeSelectedState(this.state.selectedNodes[0],!1),this.propsStore.updateField(e,{isSelected:d}),this.setState({selectedNodes:d?[...this.state.selectedNodes,e]:this.state.selectedNodes.filter(i=>i!==e)})}}function Y(t,e){var r;return b((r=t?.stateKey)!=null?r:"__NO__TREE__KEY__",v({propsStore:t?.propsStore},e))}function Ke(t,e){var r;const o=q(t);return{selection:b((r=o?.stateKey)!=null?r:"__NO__TREE__KEY__",v({propsStore:o?.propsStore},e)),handler:o}}var Me=Object.defineProperty,Re=Object.defineProperties,Be=Object.getOwnPropertyDescriptors,J=Object.getOwnPropertySymbols,ze=Object.prototype.hasOwnProperty,Ge=Object.prototype.propertyIsEnumerable,Q=(t,e,r)=>e in t?Me(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,He=(t,e)=>{for(var r in e||(e={}))ze.call(e,r)&&Q(t,r,e[r]);if(J)for(var r of J(e))Ge.call(e,r)&&Q(t,r,e[r]);return t},We=(t,e)=>Re(t,Be(e));function X(t,e){return`${t}__${e}`}function qe(t,e,r,o){var l;switch(r){case"node":{const s=o,d=Ae(e);return We(He({"aria-disabled":s.isDisabled,"aria-expanded":s.isLeaf?void 0:!!s.isExpanded,"aria-label":s.label},(l=d.configuration.current)!=null&&l.disableSelection?void 0:{"aria-selected":s.isSelectable!==!1&&!s.isDisabled?!!s.isSelected:void 0}),{className:s.className,color:s.color,"data-key":s.id,id:X(e,s.id),role:"treeitem",title:s.title})}default:return{role:"tree","aria-multiselectable":o.isMultiple}}}var Ve=Object.defineProperty,Ye=Object.defineProperties,Je=Object.getOwnPropertyDescriptors,Z=Object.getOwnPropertySymbols,Qe=Object.prototype.hasOwnProperty,Xe=Object.prototype.propertyIsEnumerable,ee=(t,e,r)=>e in t?Ve(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ze=(t,e)=>{for(var r in e||(e={}))Qe.call(e,r)&&ee(t,r,e[r]);if(Z)for(var r of Z(e))Xe.call(e,r)&&ee(t,r,e[r]);return t},et=(t,e)=>Ye(t,Je(e));const tt={height:"iconmd",width:"iconmd",background:"palette.background.paper"},rt=_e("LoaderSpinner","layout.common.components.loaderSpinner",tt,({className:t})=>f(T,et(Ze({},x("layout.common.components.loaderSpinner")),{className:t})));var ot=Object.defineProperty,te=Object.getOwnPropertySymbols,st=Object.prototype.hasOwnProperty,it=Object.prototype.propertyIsEnumerable,re=(t,e,r)=>e in t?ot(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,lt=(t,e)=>{for(var r in e||(e={}))st.call(e,r)&&re(t,r,e[r]);if(te)for(var r of te(e))it.call(e,r)&&re(t,r,e[r]);return t};const nt=({isLoading:t,onDelete:e,searchString:r})=>!r&&!t?null:f(m,{className:`tree__searchLabelBox ${t?"isLoading":""}`,children:t?f(rt,{className:"tree__loading"}):O(m,{as:"label",className:"tree__searchLabel",children:[Oe(window.LBL_FILTERING_BY,{TOK1:r}),f(Ie,lt({icon:"Close","aria-label":window.LBL_DELETE_FILTER,onClick:e,title:window.LBL_DELETE_FILTER,size:"Sm"},x("icon-inherit")))]})}),oe=p.createContext({});function w(){const t=p.useContext(oe);if(!t)throw new Error("There is no tree context");return t}const dt=({children:t,value:e})=>{const r=p.useMemo(()=>oe.Provider,[]);return f(r,{value:e,children:t})},at=t=>{var e;return f(K,{name:t.icon,title:"",size:(e=t.iconSize)!=null?e:"iconSm"})},ct=t=>f(m,{as:"span",children:t.label}),pt=({level:t})=>f(k,{children:Array(t).fill("").map((e,r)=>r).map(e=>f(m,{className:"spacer"},e))});var ut=Object.defineProperty,ht=Object.defineProperties,ft=Object.getOwnPropertyDescriptors,se=Object.getOwnPropertySymbols,gt=Object.prototype.hasOwnProperty,St=Object.prototype.propertyIsEnumerable,ie=(t,e,r)=>e in t?ut(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,le=(t,e)=>{for(var r in e||(e={}))gt.call(e,r)&&ie(t,r,e[r]);if(se)for(var r of se(e))St.call(e,r)&&ie(t,r,e[r]);return t},mt=(t,e)=>ht(t,ft(e));const vt=({level:t,treeKey:e})=>{var r,o,l;const{handler:s,treeProps:{toggleNodesOnLabelClick:d}}=w(),i=b(e,{selector:h=>h,comparator:(h,g)=>N(h,g)&&N(h?.children,g?.children),propsStore:s.propsStore}),n=p.useMemo(()=>{var h;return(h=i.labelRenderer)!=null?h:ct},[i.labelRenderer]),a=p.useCallback(()=>{s.toggleNodeExpandedState(e)},[s,e]),c=p.useMemo(()=>typeof i.icon=="string"?at:i.icon,[i.icon]),u=p.useCallback(()=>{i.allowToggleExpandedFromLabel!==!1&&s.toggleNodeExpandedState(e)},[s,i.allowToggleExpandedFromLabel,e]);return O(m,{as:"span",className:`tree__nodeItemLabel ${i.isFocused?"focus":""}`,children:[f(pt,{level:t}),(i.isLoading||i.isExpanded&&i.isLeaf!==!0||i.isLeaf===!1||((o=(r=i.children)==null?void 0:r.length)!=null?o:0)>0||i.isLeaf===void 0&&!i.hasLoaded&&((l=s.configuration.current)==null?void 0:l.onLoadData))&&f(m,{className:"tree__expanderWrapper",children:i.isLoading?f(T,{sx:{width:"iconSm",height:"iconSm"}}):f(K,{className:"tree__expandIcon",onClick:a,name:i.isExpanded?"MinusFilled":"PlusFilled",title:"",size:"iconSm"})}),i.icon&&c&&f(c,le({},i)),f(m,{as:"span",className:"tree__nodeItemLabelRenderer",onClick:d!==!1?u:void 0,children:f(n,mt(le({},i),{level:t}))})]})};var bt=p.memo(vt),Nt=Object.defineProperty,Ft=Object.defineProperties,yt=Object.getOwnPropertyDescriptors,ne=Object.getOwnPropertySymbols,Pt=Object.prototype.hasOwnProperty,Et=Object.prototype.propertyIsEnumerable,de=(t,e,r)=>e in t?Nt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ot=(t,e)=>{for(var r in e||(e={}))Pt.call(e,r)&&de(t,r,e[r]);if(ne)for(var r of ne(e))Et.call(e,r)&&de(t,r,e[r]);return t},wt=(t,e)=>Ft(t,yt(e));const It=({level:t,treeKey:e})=>{const{handler:r,name:o,forceUpdate:l,treeProps:s}=w(),d=b(e,{selector:n=>n,comparator:(n,a)=>N(n,a)&&N(n?.children,a?.children),propsStore:r.propsStore}),i=p.useMemo(()=>{var n,a;return(a=(n=d.children)==null?void 0:n.map(c=>r.propsStore.getFieldProps(c)))!=null?a:[]},[d.children,r.propsStore]);return f(k,{children:O(m,wt(Ot({as:"li"},qe(s,o,"node",d)),{children:[f(bt,{level:t,treeKey:e}),f(he,{forceUpdate:l,role:"group",level:t,nodes:i})]}))})};var _t=p.memo(It),xt=Object.defineProperty,$t=Object.defineProperties,Lt=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,ae=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable,pe=(t,e,r)=>e in t?xt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,jt=(t,e)=>{for(var r in e||(e={}))ae.call(e,r)&&pe(t,r,e[r]);if(I)for(var r of I(e))ce.call(e,r)&&pe(t,r,e[r]);return t},Ct=(t,e)=>$t(t,Lt(e)),Ut=(t,e)=>{var r={};for(var o in t)ae.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&I)for(var o of I(t))e.indexOf(o)<0&&ce.call(t,o)&&(r[o]=t[o]);return r};const ue=p.forwardRef((t,e)=>{var r=t,{level:o,nodes:l,forceUpdate:s}=r,d=Ut(r,["level","nodes","forceUpdate"]);const{handler:i}=w();return f(m,Ct(jt({ref:e,as:"ul"},d),{children:l?.map(n=>{const a=i.propsStore.getFieldProps(n.id);return a?a.isFiltered?null:f(_t,{level:o+1,treeKey:n.id},n.id):null})}))});ue.displayName="TreeItemChildren";var he=p.memo(ue);function fe({name:t,treeProps:e}){const r=we(e),o=p.useMemo(()=>new V(t,r),[]);D(()=>{var n;(n=e?.initialNodes)==null||n.forEach(a=>o.append(a))});const l=b("root",{comparator:N,propsStore:o.propsStore,selector:n=>{var a;return{children:(a=n.children)!=null?a:[],forceUpdate:n.forceUpdate}}}),s=p.useMemo(()=>`keyHandler${xe()}`,[]),d=p.useRef(null),i=p.useCallback((n,a=3)=>{var c,u;if(d.current){const h=d.current.querySelector(`[data-key="${n}"]`);if((c=d.current)==null||c.focus(),h){const g=((u=e.focusGetter)!=null?u:S=>S.querySelector(":scope > .tree__nodeItemLabel"))(h),F=o.propsStore.getFieldProps(n);(!e.focusGetter||!F.labelRenderer)&&g.classList.add("focused"),g.scrollIntoView({inline:"nearest",block:"nearest"})}else a>0&&setTimeout(()=>i(n,a-1),30)}},[o.propsStore,e.focusGetter]);return p.useEffect(()=>{const n=o.on("mustFocus",c=>i(c)),a=o.on("onArrowUpOnFirstElement",()=>{var c;return(c=e.onArrowUpOnFirstElement)==null?void 0:c.call(e)});return()=>{n(),a()}},[i,o,e]),{data:l,handler:o,keyHandler:{id:s,onKeyDown:p.useCallback(n=>{var a;if(n.key==="Enter"){const c=o.state.focusedNode;if(c){const u=o.propsStore.getFieldProps(c);(a=e.onNodeClick)==null||a.call(e,n,u)}}else o.handleKey(n)},[o,e]),onMouseDown:p.useCallback(n=>{var a;o.state.focusedNode!==null&&n.shiftKey&&(a=o.configuration.current)!=null&&a.isMultiple&&n.preventDefault()},[o.configuration,o.state.focusedNode]),onClick:p.useCallback(n=>{var a,c;if(_(n.target,h=>h.classList.contains("tree__expandIcon")))return;const u=_(n.target,h=>!!h.getAttribute("data-key"));if(u){const h=o.state.focusedNode,g=u.getAttribute("data-key"),F=o.propsStore.getFieldProps(g);(a=e.onNodeClick)==null||a.call(e,n,F),h!==null&&n.shiftKey&&(c=o.configuration.current)!=null&&c.isMultiple?j(o,h,g,!0):(o.setFocusedNode(g),o.setSelectedNodesByClickEvent(n)),g&&i(g)}},[i,o,e]),ref:d}}}var kt=Object.defineProperty,Dt=Object.defineProperties,Tt=Object.getOwnPropertyDescriptors,ge=Object.getOwnPropertySymbols,At=Object.prototype.hasOwnProperty,Kt=Object.prototype.propertyIsEnumerable,Se=(t,e,r)=>e in t?kt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,C=(t,e)=>{for(var r in e||(e={}))At.call(e,r)&&Se(t,r,e[r]);if(ge)for(var r of ge(e))Kt.call(e,r)&&Se(t,r,e[r]);return t},Mt=(t,e)=>Dt(t,Tt(e));const Rt=t=>{var e,r,o;const{data:l,handler:s,keyHandler:d}=fe({name:t.name,treeProps:C({},t)}),[i,n]=p.useState(!1),[a,c]=p.useState(""),u=Y(s,{selector:S=>S.isLoading});p.useEffect(()=>{n(u)},[u]);const h=ve(()=>{t.filterString!==void 0&&(n(!0),p.startTransition(()=>{c(t.filterString)}),t.filterString!==void 0&&t.filterString!==""?(R(s),B(s,t.filterString),s.forceEmitUpdate()):(R(s),s.forceEmitUpdate()),setTimeout(()=>n(!1),0))},{wait:200});p.useEffect(()=>{h.run(),t.filterString||h.flush()},[t.filterString]),b(s.stateKey,{propsStore:s.propsStore,selector:S=>S,comparator:(S,E)=>{var U;return t.onSelect&&!N(S?.selectedNodes,E?.selectedNodes)&&t.onSelect(((U=E?.selectedNodes)!=null?U:[]).map(me=>s.propsStore.getFieldProps(me))),!0}});const{focusedNode:g}=b(s.stateKey,{propsStore:s.propsStore,selector:S=>({focusedNode:S.focusedNode})});D(()=>{t.getHandler&&t.getHandler(s)}),be(()=>s.destructor());const F=p.useMemo(()=>({handler:s,name:t.name,forceUpdate:l.forceUpdate,focusGetter:t.focusGetter,treeProps:t}),[s,t,l.forceUpdate]);return f(dt,{value:F,children:O(m,Mt(C({className:`tree ${(e=t.className)!=null?e:""}`},x((r=t.variant)!=null?r:"layout.common.trees.primary")),{children:[f(nt,{isLoading:(o=t.isLoading)!=null?o:i,onDelete:t.onDeleteFilterString,searchString:t.hideSearchLabel?"":a}),f(he,C({"aria-activedescendant":g!==null?X(t.name,g):void 0,"aria-label":t.label,as:"ul",forceUpdate:l.forceUpdate,level:-1,nodes:p.useMemo(()=>l.children.map(S=>s.propsStore.getFieldProps(S)),[l.children,s.propsStore]),role:"tree",tabIndex:0},d))]}))})};var Bt=ye(Rt);export{Bt as Tree,V as TreeDataController,w as useTreeContext,fe as useTreeData,q as useTreeDataController,Y as useTreeSelector,Ke as useTreeSelectorByName};
+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 { makeStyledComponent, Spinner, getVariant, Box } from '@apia/theme';
+import { EventEmitter, PropsStore, addBoundary, getSpecificParent, usePropsSelector, formatMessage, useLatest } from '@apia/util';
+import { IconButton } from '@apia/components';
+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$7 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(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.previousNodes = [];
+    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$7({}, 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;
+    const newNode = __spreadProps$6(__spreadValues$7({}, node), { nodeProps: (_a = node.nodeProps) != null ? _a : {} });
+    let father;
+    if (newNode.parentId !== void 0 && ((_b = this.propsStore.getFieldProps(newNode.parentId)) == null ? void 0 : _b.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$6(__spreadValues$7({}, newNode), {
+        children: (_c = newNode.children) != null ? _c : []
+      }),
+      { 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: !((_d = this._configuration.current) == null ? void 0 : _d.emitUpdates) }
+    );
+    if (!((_e = this._configuration.current) == null ? void 0 : _e.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);
+    const children = [...this.getNodesIds()];
+    const deleteNodes = this.previousNodes.filter(
+      (current) => !children.find((search) => search === current)
+    );
+    deleteNodes.forEach((current) => this.remove(current));
+    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$7({}, 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$7({}, 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() {
+    var _a;
+    if (((_a = this.configuration.current) == null ? void 0 : _a.emitUpdates) === false) {
+      this.previousNodes = this.getNodesIds();
+      this.propsStore.updateField(
+        "root",
+        { children: [], id: "root" },
+        { isUrgent: true, noEmit: true }
+      );
+    } else {
+      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$7(__spreadValues$7({}, 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$7({
+      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$7({
+      propsStore: handler == null ? void 0 : handler.propsStore
+    }, configuration)
+  );
+  return { selection, handler };
+}
+
+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));
+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$5(__spreadValues$6({
+        "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$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));
+const styles = {
+  height: "iconmd",
+  width: "iconmd",
+  background: "palette.background.paper"
+};
+const LoaderSpinner = makeStyledComponent(
+  "LoaderSpinner",
+  "layout.common.components.loaderSpinner",
+  styles,
+  ({ className }) => {
+    return /* @__PURE__ */ jsx(
+      Spinner,
+      __spreadProps$4(__spreadValues$5({}, getVariant("layout.common.components.loaderSpinner")), {
+        className
+      })
+    );
+  }
+);
+
+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(LoaderSpinner, { 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 };