@amboss/design-system 3.0.2 → 3.0.3

package/build/cjs/components/EntityTree/BaseEntityTree.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityTree",{enumerable:!0,get:function(){return BaseEntityTree}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_Button=require("../Button/Button"),_Box=require("../Box/Box"),_styledcomponents=require("../EntityList/styled-components"),_EntityListItem=require("../EntityList/EntityListItem"),_Text=require("../Typography/Text/Text"),_Checkbox=require("../Form/Checkbox/Checkbox"),_tree=require("./tree"),getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&&currentLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=(0,_react.useState)(chunkSize),{result,hasMoreNodes}=(0,_react.useMemo)(()=>(0,_tree.trimDataByMaxSize)(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:(0,_react.useCallback)(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},makeRenderTreeBranches=({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId})=>({data,level,renderFn,isParentsLastOfLvl})=>data.map(node=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=(0,_tree.getLeafNodeIds)(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl}),lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState;return /*#__PURE__*/_react.default.createElement(_EntityListItem.EntityListItem,{key:node.id,role:"treeitem",hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),size:size,isClickable:!0,lSpaceStep:level,"aria-label":node.label,description:node.description,renderLabel:({textSize})=>/*#__PURE__*/_react.default.createElement(_react.default.Fragment,null,node.label,showItemsCount&&!lastLeaf&&/*#__PURE__*/_react.default.createElement(_Text.Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:node.id===activeId,isExpanded:isExpanded,isDisabledExpand:expandAll,onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},onClick:readOnly?()=>handleToggle(node.id):()=>handleSelectionChange(node.id),renderLeft:readOnly?void 0:()=>/*#__PURE__*/_react.default.createElement(_Checkbox.CheckboxRaw,{size:"s",name:node.label,checked:"checked"===nodeCheckboxState[node.id],indeterminate:"indeterminate"===nodeCheckboxState[node.id],onChange:()=>handleSelectionChange(node.id)}),renderRight:renderRightContent?sizeProps=>renderRightContent({...sizeProps,...node}):void 0},hasChildren&&/*#__PURE__*/_react.default.createElement("ul",null,renderFn({data:node.children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})))}),BaseEntityTree=({data,selectedIds,onSelectionChange,expandedIds=[],onToggle,activeId,chunkSize=50,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,"data-e2e-test-id":dataE2eTestId})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>(0,_tree.getNodeChildrenMap)(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>(0,_tree.getTreeCheckboxState)(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),dataShown=filterFn?data.map(tree=>(0,_tree.filterTree)(tree,filterFn)).filter(Boolean):data;(0,_react.useEffect)(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>(0,_tree.mapTree)(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=(0,_tree.getLeafNodeIds)(nodeChildrenMap,targetId);updatedSelectedIds="checked"===nodeCheckboxState[targetId]?selectedIds.filter(id=>!affectedLeafNodeIds.includes(id)):selectedIds.concat(affectedLeafNodeIds)}onSelectionChange(updatedSelectedIds)}},handleToggle:targetId=>{onToggle&&onToggle(expandedIds.includes(targetId)?expandedIds.filter(id=>id!==targetId):expandedIds.concat([targetId]))},expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId});return /*#__PURE__*/_react.default.createElement(_styledcomponents.StyledList,{role:"tree","data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityTree",size:size},renderTreeBranches({data:result,level:0,renderFn:renderTreeBranches}),hasMoreNodes&&/*#__PURE__*/_react.default.createElement(_styledcomponents.StyledShowMore,null,/*#__PURE__*/_react.default.createElement(_Box.Box,{alignText:"center",space:"xs"},/*#__PURE__*/_react.default.createElement(_Button.Button,{fullWidth:!0,size:"s",variant:"tertiary",onClick:handleIncreaseMaxNodeCount},showMoreButtonLabel))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityTree",{enumerable:!0,get:function(){return BaseEntityTree}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_Button=require("../Button/Button"),_Box=require("../Box/Box"),_styledcomponents=require("../EntityList/styled-components"),_EntityListItem=require("../EntityList/EntityListItem"),_Text=require("../Typography/Text/Text"),_Checkbox=require("../Form/Checkbox/Checkbox"),_tree=require("./tree"),getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&&currentLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=(0,_react.useState)(chunkSize),{result,hasMoreNodes}=(0,_react.useMemo)(()=>(0,_tree.trimDataByMaxSize)(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:(0,_react.useCallback)(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},makeRenderTreeBranches=({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId})=>({data,level,renderFn,isParentsLastOfLvl})=>data.map(node=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=(0,_tree.getLeafNodeIds)(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl}),lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState;return /*#__PURE__*/_react.default.createElement(_EntityListItem.EntityListItem,{key:node.id,role:"treeitem",hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),size:size,isClickable:!0,lSpaceStep:level,"aria-label":node.label,description:node.description,renderLabel:({textSize})=>/*#__PURE__*/_react.default.createElement(_react.default.Fragment,null,node.label,showItemsCount&&!lastLeaf&&/*#__PURE__*/_react.default.createElement(_Text.Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:node.id===activeId,isExpanded:isExpanded,isDisabledExpand:expandAll,onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},onClick:readOnly?()=>handleToggle(node.id):()=>handleSelectionChange(node.id),renderLeft:readOnly?void 0:()=>/*#__PURE__*/_react.default.createElement(_Checkbox.CheckboxRaw,{size:"s",name:node.label,checked:"checked"===nodeCheckboxState[node.id],indeterminate:"indeterminate"===nodeCheckboxState[node.id],onChange:()=>handleSelectionChange(node.id)}),renderRight:renderRightContent?sizeProps=>renderRightContent({...sizeProps,...node}):void 0},hasChildren&&/*#__PURE__*/_react.default.createElement("ul",null,renderFn({data:node.children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})))}),BaseEntityTree=({data,selectedIds,onSelectionChange,expandedIds=[],onToggle,activeId,chunkSize=50,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,"data-e2e-test-id":dataE2eTestId})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>(0,_tree.getNodeChildrenMap)(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>(0,_tree.getTreeCheckboxState)(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),visibleActiveNodeId=(0,_tree.getVisibleActiveNodeId)(nodeChildrenMap,nodeExpandedState,activeId),dataShown=filterFn?data.map(tree=>(0,_tree.filterTree)(tree,filterFn)).filter(Boolean):data;(0,_react.useEffect)(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>(0,_tree.mapTree)(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=(0,_tree.getLeafNodeIds)(nodeChildrenMap,targetId);updatedSelectedIds="checked"===nodeCheckboxState[targetId]?selectedIds.filter(id=>!affectedLeafNodeIds.includes(id)):selectedIds.concat(affectedLeafNodeIds)}onSelectionChange(updatedSelectedIds)}},handleToggle:targetId=>{onToggle&&onToggle(expandedIds.includes(targetId)?expandedIds.filter(id=>id!==targetId):expandedIds.concat([targetId]))},expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId:visibleActiveNodeId});return /*#__PURE__*/_react.default.createElement(_styledcomponents.StyledList,{role:"tree","data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityTree",size:size},renderTreeBranches({data:result,level:0,renderFn:renderTreeBranches}),hasMoreNodes&&/*#__PURE__*/_react.default.createElement(_styledcomponents.StyledShowMore,null,/*#__PURE__*/_react.default.createElement(_Box.Box,{alignText:"center",space:"xs"},/*#__PURE__*/_react.default.createElement(_Button.Button,{fullWidth:!0,size:"s",variant:"tertiary",onClick:handleIncreaseMaxNodeCount},showMoreButtonLabel))))};

package/build/cjs/components/EntityTree/tree.d.ts

@@ -1,10 +1,12 @@
 import type { NodeID, TreeNode, NodeChildrenMap, NodeCheckboxState, NodeExpandedState } from "./types";
 export declare function getNodeChildrenMap(tree: Partial<TreeNode>): NodeChildrenMap;
+export declare function findPathToNode(nodeChildrenMap: NodeChildrenMap, targetNodeID: NodeID): NodeID[];
 export declare function trimDataByMaxSize(data: TreeNode[], expandedIds: NodeExpandedState, expandAll: boolean, maxNodesSize: number): {
     result: TreeNode[];
     hasMoreNodes: boolean;
 };
 export declare function getTreeCheckboxState(nodeChildrenMap: NodeChildrenMap, rootID: NodeID, selectedLeafNodeIds: NodeID[]): NodeCheckboxState;
+export declare function getVisibleActiveNodeId(nodeChildrenMap: NodeChildrenMap, nodeExpandState: NodeExpandedState, activeId: NodeID): NodeID;
 export declare function getLeafNodeIds(nodeChildrenMap: NodeChildrenMap, rootID: NodeID): NodeID[];
 export declare function filterTree(tree: TreeNode, filterFn: (node: TreeNode) => boolean): TreeNode | null;
 export declare function mapTree(tree: TreeNode, mapFn: (node: TreeNode) => TreeNode): TreeNode;

package/build/cjs/components/EntityTree/tree.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),function(target,all){for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:all[name]})}(exports,{filterTree:function(){return function filterTree(tree,filterFn){let filteredChildren=tree.children.map(child=>filterTree(child,filterFn)).filter(child=>child);return 0!==filteredChildren.length||filterFn(tree)?{...tree,isFiltered:tree.children.length!==filteredChildren.length,children:filteredChildren}:null}},getLeafNodeIds:function(){return getLeafNodeIds},getNodeChildrenMap:function(){return getNodeChildrenMap},getTreeCheckboxState:function(){return getTreeCheckboxState},mapTree:function(){return function mapTree(tree,mapFn){return{...mapFn(tree),children:tree.children.map(child=>mapTree(child,mapFn))}}},trimDataByMaxSize:function(){return trimDataByMaxSize}});const _types=require("./types");function foldTree(f,nodeChildrenMap,rootID){let go=nodeID=>f(nodeID,nodeChildrenMap[nodeID].map(go));return go(rootID)}function getNodeChildrenMap(tree){let nodeChildrenMap={};return!function traverse(node){let{children}=node;nodeChildrenMap[node.id]=children.map(child=>(traverse(child),child.id))}(tree),nodeChildrenMap}function trimDataByMaxSize(data,expandedIds,expandAll,maxNodesSize){let visibleNodesCount=0,hasMoreNodes=!1;return{result:function getVisibleNodes(nodes){return nodes.reduce((filteredNodes,node)=>{if(visibleNodesCount>=maxNodesSize)return hasMoreNodes=!0,filteredNodes;visibleNodesCount+=1;let newNode={...node};return(expandedIds[node.id]||expandAll)&&node.children.length>0&&(newNode.children=getVisibleNodes(node.children)),[...filteredNodes,newNode]},[])}(data),hasMoreNodes}}function getTreeCheckboxState(nodeChildrenMap,rootID,selectedLeafNodeIds){return foldTree((currId,childrenResults)=>{if(0===nodeChildrenMap[currId].length)return{[currId]:selectedLeafNodeIds.includes(currId)?_types.CheckboxState.Checked:_types.CheckboxState.Unchecked};let mergedChildrenResult=childrenResults.reduce((acc,result)=>Object.assign(acc,result)),childrenStates=new Set(nodeChildrenMap[currId].map(childId=>mergedChildrenResult[childId]));return{[currId]:1===childrenStates.size?childrenStates.values().next().value:_types.CheckboxState.Indeterminate,...mergedChildrenResult}},nodeChildrenMap,rootID)}function getLeafNodeIds(nodeChildrenMap,rootID){return foldTree((currId,childrenResults)=>0===nodeChildrenMap[currId].length?[currId]:childrenResults.flat(),nodeChildrenMap,rootID)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),function(target,all){for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:all[name]})}(exports,{filterTree:function(){return function filterTree(tree,filterFn){let filteredChildren=tree.children.map(child=>filterTree(child,filterFn)).filter(child=>child);return 0!==filteredChildren.length||filterFn(tree)?{...tree,isFiltered:tree.children.length!==filteredChildren.length,children:filteredChildren}:null}},findPathToNode:function(){return findPathToNode},getLeafNodeIds:function(){return getLeafNodeIds},getNodeChildrenMap:function(){return getNodeChildrenMap},getTreeCheckboxState:function(){return getTreeCheckboxState},getVisibleActiveNodeId:function(){return getVisibleActiveNodeId},mapTree:function(){return function mapTree(tree,mapFn){return{...mapFn(tree),children:tree.children.map(child=>mapTree(child,mapFn))}}},trimDataByMaxSize:function(){return trimDataByMaxSize}});const _types=require("./types");function foldTree(f,nodeChildrenMap,rootID){let go=nodeID=>f(nodeID,nodeChildrenMap[nodeID].map(go));return go(rootID)}function getNodeChildrenMap(tree){let nodeChildrenMap={};return!function traverse(node){let{children}=node;nodeChildrenMap[node.id]=children.map(child=>(traverse(child),child.id))}(tree),nodeChildrenMap}function findPathToNode(nodeChildrenMap,targetNodeID){let findParent=nodeId=>Object.keys(nodeChildrenMap).find(parentId=>nodeChildrenMap[parentId].includes(nodeId))||null,path=[],currNodeId=targetNodeID;for(;currNodeId;)path.push(currNodeId),currNodeId=findParent(currNodeId);return path.reverse()}function trimDataByMaxSize(data,expandedIds,expandAll,maxNodesSize){let visibleNodesCount=0,hasMoreNodes=!1;return{result:function getVisibleNodes(nodes){return nodes.reduce((filteredNodes,node)=>{if(visibleNodesCount>=maxNodesSize)return hasMoreNodes=!0,filteredNodes;visibleNodesCount+=1;let newNode={...node};return(expandedIds[node.id]||expandAll)&&node.children.length>0&&(newNode.children=getVisibleNodes(node.children)),[...filteredNodes,newNode]},[])}(data),hasMoreNodes}}function getTreeCheckboxState(nodeChildrenMap,rootID,selectedLeafNodeIds){return foldTree((currId,childrenResults)=>{if(0===nodeChildrenMap[currId].length)return{[currId]:selectedLeafNodeIds.includes(currId)?_types.CheckboxState.Checked:_types.CheckboxState.Unchecked};let mergedChildrenResult=childrenResults.reduce((acc,result)=>Object.assign(acc,result)),childrenStates=new Set(nodeChildrenMap[currId].map(childId=>mergedChildrenResult[childId]));return{[currId]:1===childrenStates.size?childrenStates.values().next().value:_types.CheckboxState.Indeterminate,...mergedChildrenResult}},nodeChildrenMap,rootID)}function getVisibleActiveNodeId(nodeChildrenMap,nodeExpandState,activeId){return findPathToNode(nodeChildrenMap,activeId).find(nodeId=>!nodeExpandState[nodeId])}function getLeafNodeIds(nodeChildrenMap,rootID){return foldTree((currId,childrenResults)=>0===nodeChildrenMap[currId].length?[currId]:childrenResults.flat(),nodeChildrenMap,rootID)}

package/build/esm/components/EntityTree/BaseEntityTree.js

@@ -1 +1 @@
-import React,{useMemo,useState,useEffect,useCallback}from"react";import{Button}from"../Button/Button";import{Box}from"../Box/Box";import{StyledList,StyledShowMore}from"../EntityList/styled-components";import{EntityListItem}from"../EntityList/EntityListItem";import{Text}from"../Typography/Text/Text";import{CheckboxRaw}from"../Form/Checkbox/Checkbox";import{getNodeChildrenMap,getTreeCheckboxState,getLeafNodeIds,filterTree,mapTree,trimDataByMaxSize}from"./tree";let getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&&currentLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=useState(chunkSize),{result,hasMoreNodes}=useMemo(()=>trimDataByMaxSize(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:useCallback(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},makeRenderTreeBranches=({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId})=>({data,level,renderFn,isParentsLastOfLvl})=>data.map(node=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=getLeafNodeIds(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl}),lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState;return /*#__PURE__*/React.createElement(EntityListItem,{key:node.id,role:"treeitem",hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),size:size,isClickable:!0,lSpaceStep:level,"aria-label":node.label,description:node.description,renderLabel:({textSize})=>/*#__PURE__*/React.createElement(React.Fragment,null,node.label,showItemsCount&&!lastLeaf&&/*#__PURE__*/React.createElement(Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:node.id===activeId,isExpanded:isExpanded,isDisabledExpand:expandAll,onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},onClick:readOnly?()=>handleToggle(node.id):()=>handleSelectionChange(node.id),renderLeft:readOnly?void 0:()=>/*#__PURE__*/React.createElement(CheckboxRaw,{size:"s",name:node.label,checked:"checked"===nodeCheckboxState[node.id],indeterminate:"indeterminate"===nodeCheckboxState[node.id],onChange:()=>handleSelectionChange(node.id)}),renderRight:renderRightContent?sizeProps=>renderRightContent({...sizeProps,...node}):void 0},hasChildren&&/*#__PURE__*/React.createElement("ul",null,renderFn({data:node.children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})))});export const BaseEntityTree=({data,selectedIds,onSelectionChange,expandedIds=[],onToggle,activeId,chunkSize=50,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,"data-e2e-test-id":dataE2eTestId})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>getNodeChildrenMap(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>getTreeCheckboxState(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),dataShown=filterFn?data.map(tree=>filterTree(tree,filterFn)).filter(Boolean):data;useEffect(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>mapTree(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=getLeafNodeIds(nodeChildrenMap,targetId);updatedSelectedIds="checked"===nodeCheckboxState[targetId]?selectedIds.filter(id=>!affectedLeafNodeIds.includes(id)):selectedIds.concat(affectedLeafNodeIds)}onSelectionChange(updatedSelectedIds)}},handleToggle:targetId=>{onToggle&&onToggle(expandedIds.includes(targetId)?expandedIds.filter(id=>id!==targetId):expandedIds.concat([targetId]))},expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId});return /*#__PURE__*/React.createElement(StyledList,{role:"tree","data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityTree",size:size},renderTreeBranches({data:result,level:0,renderFn:renderTreeBranches}),hasMoreNodes&&/*#__PURE__*/React.createElement(StyledShowMore,null,/*#__PURE__*/React.createElement(Box,{alignText:"center",space:"xs"},/*#__PURE__*/React.createElement(Button,{fullWidth:!0,size:"s",variant:"tertiary",onClick:handleIncreaseMaxNodeCount},showMoreButtonLabel))))};
+import React,{useMemo,useState,useEffect,useCallback}from"react";import{Button}from"../Button/Button";import{Box}from"../Box/Box";import{StyledList,StyledShowMore}from"../EntityList/styled-components";import{EntityListItem}from"../EntityList/EntityListItem";import{Text}from"../Typography/Text/Text";import{CheckboxRaw}from"../Form/Checkbox/Checkbox";import{getNodeChildrenMap,getTreeCheckboxState,getVisibleActiveNodeId,getLeafNodeIds,filterTree,mapTree,trimDataByMaxSize}from"./tree";let getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&&currentLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=useState(chunkSize),{result,hasMoreNodes}=useMemo(()=>trimDataByMaxSize(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:useCallback(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},makeRenderTreeBranches=({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId})=>({data,level,renderFn,isParentsLastOfLvl})=>data.map(node=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=getLeafNodeIds(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl}),lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState;return /*#__PURE__*/React.createElement(EntityListItem,{key:node.id,role:"treeitem",hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),size:size,isClickable:!0,lSpaceStep:level,"aria-label":node.label,description:node.description,renderLabel:({textSize})=>/*#__PURE__*/React.createElement(React.Fragment,null,node.label,showItemsCount&&!lastLeaf&&/*#__PURE__*/React.createElement(Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:node.id===activeId,isExpanded:isExpanded,isDisabledExpand:expandAll,onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},onClick:readOnly?()=>handleToggle(node.id):()=>handleSelectionChange(node.id),renderLeft:readOnly?void 0:()=>/*#__PURE__*/React.createElement(CheckboxRaw,{size:"s",name:node.label,checked:"checked"===nodeCheckboxState[node.id],indeterminate:"indeterminate"===nodeCheckboxState[node.id],onChange:()=>handleSelectionChange(node.id)}),renderRight:renderRightContent?sizeProps=>renderRightContent({...sizeProps,...node}):void 0},hasChildren&&/*#__PURE__*/React.createElement("ul",null,renderFn({data:node.children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})))});export const BaseEntityTree=({data,selectedIds,onSelectionChange,expandedIds=[],onToggle,activeId,chunkSize=50,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,"data-e2e-test-id":dataE2eTestId})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>getNodeChildrenMap(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>getTreeCheckboxState(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),visibleActiveNodeId=getVisibleActiveNodeId(nodeChildrenMap,nodeExpandedState,activeId),dataShown=filterFn?data.map(tree=>filterTree(tree,filterFn)).filter(Boolean):data;useEffect(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>mapTree(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=getLeafNodeIds(nodeChildrenMap,targetId);updatedSelectedIds="checked"===nodeCheckboxState[targetId]?selectedIds.filter(id=>!affectedLeafNodeIds.includes(id)):selectedIds.concat(affectedLeafNodeIds)}onSelectionChange(updatedSelectedIds)}},handleToggle:targetId=>{onToggle&&onToggle(expandedIds.includes(targetId)?expandedIds.filter(id=>id!==targetId):expandedIds.concat([targetId]))},expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId:visibleActiveNodeId});return /*#__PURE__*/React.createElement(StyledList,{role:"tree","data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityTree",size:size},renderTreeBranches({data:result,level:0,renderFn:renderTreeBranches}),hasMoreNodes&&/*#__PURE__*/React.createElement(StyledShowMore,null,/*#__PURE__*/React.createElement(Box,{alignText:"center",space:"xs"},/*#__PURE__*/React.createElement(Button,{fullWidth:!0,size:"s",variant:"tertiary",onClick:handleIncreaseMaxNodeCount},showMoreButtonLabel))))};

package/build/esm/components/EntityTree/tree.d.ts

@@ -1,10 +1,12 @@
 import type { NodeID, TreeNode, NodeChildrenMap, NodeCheckboxState, NodeExpandedState } from "./types";
 export declare function getNodeChildrenMap(tree: Partial<TreeNode>): NodeChildrenMap;
+export declare function findPathToNode(nodeChildrenMap: NodeChildrenMap, targetNodeID: NodeID): NodeID[];
 export declare function trimDataByMaxSize(data: TreeNode[], expandedIds: NodeExpandedState, expandAll: boolean, maxNodesSize: number): {
     result: TreeNode[];
     hasMoreNodes: boolean;
 };
 export declare function getTreeCheckboxState(nodeChildrenMap: NodeChildrenMap, rootID: NodeID, selectedLeafNodeIds: NodeID[]): NodeCheckboxState;
+export declare function getVisibleActiveNodeId(nodeChildrenMap: NodeChildrenMap, nodeExpandState: NodeExpandedState, activeId: NodeID): NodeID;
 export declare function getLeafNodeIds(nodeChildrenMap: NodeChildrenMap, rootID: NodeID): NodeID[];
 export declare function filterTree(tree: TreeNode, filterFn: (node: TreeNode) => boolean): TreeNode | null;
 export declare function mapTree(tree: TreeNode, mapFn: (node: TreeNode) => TreeNode): TreeNode;

package/build/esm/components/EntityTree/tree.js

@@ -1 +1 @@
-import{CheckboxState}from"./types";function foldTree(f,nodeChildrenMap,rootID){let go=nodeID=>f(nodeID,nodeChildrenMap[nodeID].map(go));return go(rootID)}export function getNodeChildrenMap(tree){let nodeChildrenMap={};return!function traverse(node){let{children}=node;nodeChildrenMap[node.id]=children.map(child=>(traverse(child),child.id))}(tree),nodeChildrenMap}export function trimDataByMaxSize(data,expandedIds,expandAll,maxNodesSize){let visibleNodesCount=0,hasMoreNodes=!1;return{result:function getVisibleNodes(nodes){return nodes.reduce((filteredNodes,node)=>{if(visibleNodesCount>=maxNodesSize)return hasMoreNodes=!0,filteredNodes;visibleNodesCount+=1;let newNode={...node};return(expandedIds[node.id]||expandAll)&&node.children.length>0&&(newNode.children=getVisibleNodes(node.children)),[...filteredNodes,newNode]},[])}(data),hasMoreNodes}}export function getTreeCheckboxState(nodeChildrenMap,rootID,selectedLeafNodeIds){return foldTree((currId,childrenResults)=>{if(0===nodeChildrenMap[currId].length)return{[currId]:selectedLeafNodeIds.includes(currId)?CheckboxState.Checked:CheckboxState.Unchecked};let mergedChildrenResult=childrenResults.reduce((acc,result)=>Object.assign(acc,result)),childrenStates=new Set(nodeChildrenMap[currId].map(childId=>mergedChildrenResult[childId]));return{[currId]:1===childrenStates.size?childrenStates.values().next().value:CheckboxState.Indeterminate,...mergedChildrenResult}},nodeChildrenMap,rootID)}export function getLeafNodeIds(nodeChildrenMap,rootID){return foldTree((currId,childrenResults)=>0===nodeChildrenMap[currId].length?[currId]:childrenResults.flat(),nodeChildrenMap,rootID)}export function filterTree(tree,filterFn){let filteredChildren=tree.children.map(child=>filterTree(child,filterFn)).filter(child=>child);return 0!==filteredChildren.length||filterFn(tree)?{...tree,isFiltered:tree.children.length!==filteredChildren.length,children:filteredChildren}:null}export function mapTree(tree,mapFn){return{...mapFn(tree),children:tree.children.map(child=>mapTree(child,mapFn))}}
+import{CheckboxState}from"./types";function foldTree(f,nodeChildrenMap,rootID){let go=nodeID=>f(nodeID,nodeChildrenMap[nodeID].map(go));return go(rootID)}export function getNodeChildrenMap(tree){let nodeChildrenMap={};return!function traverse(node){let{children}=node;nodeChildrenMap[node.id]=children.map(child=>(traverse(child),child.id))}(tree),nodeChildrenMap}export function findPathToNode(nodeChildrenMap,targetNodeID){let findParent=nodeId=>Object.keys(nodeChildrenMap).find(parentId=>nodeChildrenMap[parentId].includes(nodeId))||null,path=[],currNodeId=targetNodeID;for(;currNodeId;)path.push(currNodeId),currNodeId=findParent(currNodeId);return path.reverse()}export function trimDataByMaxSize(data,expandedIds,expandAll,maxNodesSize){let visibleNodesCount=0,hasMoreNodes=!1;return{result:function getVisibleNodes(nodes){return nodes.reduce((filteredNodes,node)=>{if(visibleNodesCount>=maxNodesSize)return hasMoreNodes=!0,filteredNodes;visibleNodesCount+=1;let newNode={...node};return(expandedIds[node.id]||expandAll)&&node.children.length>0&&(newNode.children=getVisibleNodes(node.children)),[...filteredNodes,newNode]},[])}(data),hasMoreNodes}}export function getTreeCheckboxState(nodeChildrenMap,rootID,selectedLeafNodeIds){return foldTree((currId,childrenResults)=>{if(0===nodeChildrenMap[currId].length)return{[currId]:selectedLeafNodeIds.includes(currId)?CheckboxState.Checked:CheckboxState.Unchecked};let mergedChildrenResult=childrenResults.reduce((acc,result)=>Object.assign(acc,result)),childrenStates=new Set(nodeChildrenMap[currId].map(childId=>mergedChildrenResult[childId]));return{[currId]:1===childrenStates.size?childrenStates.values().next().value:CheckboxState.Indeterminate,...mergedChildrenResult}},nodeChildrenMap,rootID)}export function getVisibleActiveNodeId(nodeChildrenMap,nodeExpandState,activeId){return findPathToNode(nodeChildrenMap,activeId).find(nodeId=>!nodeExpandState[nodeId])}export function getLeafNodeIds(nodeChildrenMap,rootID){return foldTree((currId,childrenResults)=>0===nodeChildrenMap[currId].length?[currId]:childrenResults.flat(),nodeChildrenMap,rootID)}export function filterTree(tree,filterFn){let filteredChildren=tree.children.map(child=>filterTree(child,filterFn)).filter(child=>child);return 0!==filteredChildren.length||filterFn(tree)?{...tree,isFiltered:tree.children.length!==filteredChildren.length,children:filteredChildren}:null}export function mapTree(tree,mapFn){return{...mapFn(tree),children:tree.children.map(child=>mapTree(child,mapFn))}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",