@edifice.io/react 2.6.9-develop-enabling.20261013152718 → 2.6.9-develop.20261013171251

package/dist/components/Tree/hooks/useTreeSortable.js

@@ -1 +1,198 @@
-import{buildTree,determineNewParentId,flattenTree,generateUpdateData,getActiveAndOverNodes,getIndicesToUpdate,getProjection,updateParentIds}from"../utilities/tree-sortable.js";import{useEffect,useMemo,useState}from"react";import{KeyboardSensor,MeasuringStrategy,PointerSensor,defaultDropAnimation,useSensor,useSensors}from"@dnd-kit/core";import{arrayMove,sortableKeyboardCoordinates}from"@dnd-kit/sortable";import{CSS}from"@dnd-kit/utilities";var useTreeSortable=({nodes,onSortable,handleCollapseNode})=>{let[items,setItems]=useState(()=>nodes),[activeId,setActiveId]=useState(null),[overId,setOverId]=useState(null),[offsetLeft,setOffsetLeft]=useState(0),[currentPosition,setCurrentPosition]=useState(null);useEffect(()=>{setItems(nodes)},[nodes]);let activationConstraint={delay:200,tolerance:5},flattenedTree=useMemo(()=>flattenTree(items,null),[items]),activeItem=activeId?flattenedTree.find(({id})=>id===activeId):null,projected=activeId&&overId?getProjection(flattenedTree,activeId,overId,offsetLeft,64):null;function handleDragStart(event){let{active}=event,{activeNode}=getActiveAndOverNodes(flattenedTree,active.id);activeNode.parentId||handleCollapseNode(activeNode.id),setActiveId(active.id),setOverId(active.id);let activeItem=flattenedTree.find(({id})=>id===activeId);activeItem&&setCurrentPosition({parentId:activeItem.parentId,overId:activeId})}function handleDragMove({delta}){setOffsetLeft(delta.x)}function handleDragOver(event){let{over}=event;setOverId(over?.id)}function handleDragEnd(event){let{active,over}=event,{activeNode,activeNodeIndex,overNode,overNodeIndex}=getActiveAndOverNodes(flattenedTree,active.id,over?.id),newParentId=determineNewParentId(active,over,activeNode,overNode,projected);updateParentIds(flattenedTree,getIndicesToUpdate(activeNode,activeNodeIndex,flattenedTree,projected),newParentId);let updatedFlattenedTree=arrayMove(flattenedTree,activeNodeIndex,overNodeIndex),updatedTree=buildTree(updatedFlattenedTree),{updateArray}=generateUpdateData(updatedFlattenedTree,updatedTree);setItems(updatedTree),setActiveId(null),setOverId(null),onSortable(updateArray)}let sortedIds=useMemo(()=>flattenedTree.map(({id})=>id),[flattenedTree]);function getMovementAnnouncement(eventName,activeId,overId){if(overId&&projected){if(eventName!==`onDragEnd`){if(currentPosition&&projected.parentId===currentPosition.parentId&&overId===currentPosition.overId)return;setCurrentPosition({parentId:projected.parentId,overId})}let clonedItems=JSON.parse(JSON.stringify(flattenTree(items,null,0))),overIndex=clonedItems.findIndex(({id})=>id===overId),sortedItems=arrayMove(clonedItems,clonedItems.findIndex(({id})=>id===activeId),overIndex),previousItem=sortedItems[overIndex-1],announcement,movedVerb=eventName===`onDragEnd`?`dropped`:`moved`,nestedVerb=eventName===`onDragEnd`?`dropped`:`nested`;if(!previousItem){let nextItem=sortedItems[overIndex+1];announcement=nextItem?`${activeId} was ${movedVerb} before ${nextItem.id}.`:`${activeId} was ${movedVerb} as the only item in the list.`}else if(projected.depth>previousItem.depth)announcement=`${activeId} was ${nestedVerb} under ${previousItem.id}.`;else{let previousSibling=previousItem;for(;previousSibling&&projected.depth<previousSibling.depth;){let parentId=previousSibling.parentId;previousSibling=sortedItems.find(({id})=>id===parentId)}previousSibling&&(announcement=`${activeId} was ${movedVerb} after ${previousSibling.id}.`)}return announcement}}return{handleDragStart,handleDragMove,handleDragOver,handleDragEnd,adjustTranslate:({transform})=>({...transform,y:transform.y-25}),sortedIds,indicator:!1,activationConstraint,projected,announcements:{onDragStart({active}){return`Picked up ${active.id}.`},onDragMove({active,over}){return getMovementAnnouncement(`onDragMove`,active.id,over?.id)},onDragOver({active,over}){return getMovementAnnouncement(`onDragOver`,active.id,over?.id)},onDragEnd({active,over}){return getMovementAnnouncement(`onDragEnd`,active.id,over?.id)},onDragCancel({active}){return`Moving was cancelled. ${active.id} was dropped in its original position.`}},activeId,indentationWidth:64,activeItem,dropAnimationConfig:{keyframes({transform}){return[{opacity:1,transform:CSS.Transform.toString(transform.initial)},{opacity:0,transform:CSS.Transform.toString({...transform.final,x:transform.final.x+5,y:transform.final.y+5})}]},easing:`ease-out`,sideEffects({active}){active.node.animate([{opacity:0},{opacity:1}],{duration:defaultDropAnimation.duration,easing:defaultDropAnimation.easing})}},measuring:{droppable:{strategy:MeasuringStrategy.Always}},sensors:useSensors(useSensor(PointerSensor,{activationConstraint}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),items,flattenedTree}};export{useTreeSortable};
+import { MeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor, defaultDropAnimation } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useState, useEffect, useMemo } from "react";
+import { flattenTree, getProjection, getActiveAndOverNodes, determineNewParentId, getIndicesToUpdate, updateParentIds, buildTree, generateUpdateData } from "../utilities/tree-sortable.js";
+const useTreeSortable = ({
+  nodes,
+  onSortable,
+  handleCollapseNode
+}) => {
+  const [items, setItems] = useState(() => nodes), [activeId, setActiveId] = useState(null), [overId, setOverId] = useState(null), [offsetLeft, setOffsetLeft] = useState(0), [currentPosition, setCurrentPosition] = useState(null);
+  useEffect(() => {
+    setItems(nodes);
+  }, [nodes]);
+  const activationConstraint = {
+    delay: 200,
+    tolerance: 5
+  }, indicator = !1, indentationWidth = 64, flattenedTree = useMemo(() => flattenTree(items, null), [items]), activeItem = activeId ? flattenedTree.find(({
+    id
+  }) => id === activeId) : null, projected = activeId && overId ? getProjection(flattenedTree, activeId, overId, offsetLeft, indentationWidth) : null;
+  function handleDragStart(event) {
+    const {
+      active
+    } = event, {
+      activeNode
+    } = getActiveAndOverNodes(flattenedTree, active.id);
+    activeNode.parentId || handleCollapseNode(activeNode.id), setActiveId(active.id), setOverId(active.id);
+    const activeItem2 = flattenedTree.find(({
+      id
+    }) => id === activeId);
+    activeItem2 && setCurrentPosition({
+      parentId: activeItem2.parentId,
+      overId: activeId
+    });
+  }
+  function handleDragMove({
+    delta
+  }) {
+    setOffsetLeft(delta.x);
+  }
+  function handleDragOver(event) {
+    const {
+      over
+    } = event;
+    setOverId(over == null ? void 0 : over.id);
+  }
+  function handleDragEnd(event) {
+    const {
+      active,
+      over
+    } = event, {
+      activeNode,
+      activeNodeIndex,
+      overNode,
+      overNodeIndex
+    } = getActiveAndOverNodes(flattenedTree, active.id, over == null ? void 0 : over.id), newParentId = determineNewParentId(active, over, activeNode, overNode, projected), indicesToUpdate = getIndicesToUpdate(activeNode, activeNodeIndex, flattenedTree, projected);
+    updateParentIds(flattenedTree, indicesToUpdate, newParentId);
+    const updatedFlattenedTree = arrayMove(flattenedTree, activeNodeIndex, overNodeIndex), updatedTree = buildTree(updatedFlattenedTree), {
+      updateArray
+    } = generateUpdateData(updatedFlattenedTree, updatedTree);
+    setItems(updatedTree), setActiveId(null), setOverId(null), onSortable(updateArray);
+  }
+  const sortedIds = useMemo(() => flattenedTree.map(({
+    id
+  }) => id), [flattenedTree]);
+  function getMovementAnnouncement(eventName, activeId2, overId2) {
+    if (overId2 && projected) {
+      if (eventName !== "onDragEnd") {
+        if (currentPosition && projected.parentId === currentPosition.parentId && overId2 === currentPosition.overId)
+          return;
+        setCurrentPosition({
+          parentId: projected.parentId,
+          overId: overId2
+        });
+      }
+      const clonedItems = JSON.parse(JSON.stringify(flattenTree(items, null, 0))), overIndex = clonedItems.findIndex(({
+        id
+      }) => id === overId2), activeIndex = clonedItems.findIndex(({
+        id
+      }) => id === activeId2), sortedItems = arrayMove(clonedItems, activeIndex, overIndex), previousItem = sortedItems[overIndex - 1];
+      let announcement;
+      const movedVerb = eventName === "onDragEnd" ? "dropped" : "moved", nestedVerb = eventName === "onDragEnd" ? "dropped" : "nested";
+      if (previousItem)
+        if (projected.depth > previousItem.depth)
+          announcement = `${activeId2} was ${nestedVerb} under ${previousItem.id}.`;
+        else {
+          let previousSibling = previousItem;
+          for (; previousSibling && projected.depth < previousSibling.depth; ) {
+            const parentId = previousSibling.parentId;
+            previousSibling = sortedItems.find(({
+              id
+            }) => id === parentId);
+          }
+          previousSibling && (announcement = `${activeId2} was ${movedVerb} after ${previousSibling.id}.`);
+        }
+      else {
+        const nextItem = sortedItems[overIndex + 1];
+        nextItem ? announcement = `${activeId2} was ${movedVerb} before ${nextItem.id}.` : announcement = `${activeId2} was ${movedVerb} as the only item in the list.`;
+      }
+      return announcement;
+    }
+  }
+  const announcements = {
+    onDragStart({
+      active
+    }) {
+      return `Picked up ${active.id}.`;
+    },
+    onDragMove({
+      active,
+      over
+    }) {
+      return getMovementAnnouncement("onDragMove", active.id, over == null ? void 0 : over.id);
+    },
+    onDragOver({
+      active,
+      over
+    }) {
+      return getMovementAnnouncement("onDragOver", active.id, over == null ? void 0 : over.id);
+    },
+    onDragEnd({
+      active,
+      over
+    }) {
+      return getMovementAnnouncement("onDragEnd", active.id, over == null ? void 0 : over.id);
+    },
+    onDragCancel({
+      active
+    }) {
+      return `Moving was cancelled. ${active.id} was dropped in its original position.`;
+    }
+  }, dropAnimationConfig = {
+    keyframes({
+      transform
+    }) {
+      return [{
+        opacity: 1,
+        transform: CSS.Transform.toString(transform.initial)
+      }, {
+        opacity: 0,
+        transform: CSS.Transform.toString({
+          ...transform.final,
+          x: transform.final.x + 5,
+          y: transform.final.y + 5
+        })
+      }];
+    },
+    easing: "ease-out",
+    sideEffects({
+      active
+    }) {
+      active.node.animate([{
+        opacity: 0
+      }, {
+        opacity: 1
+      }], {
+        duration: defaultDropAnimation.duration,
+        easing: defaultDropAnimation.easing
+      });
+    }
+  }, adjustTranslate = ({
+    transform
+  }) => ({
+    ...transform,
+    y: transform.y - 25
+  }), measuring = {
+    droppable: {
+      strategy: MeasuringStrategy.Always
+    }
+  }, sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint
+  }), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  return {
+    handleDragStart,
+    handleDragMove,
+    handleDragOver,
+    handleDragEnd,
+    adjustTranslate,
+    sortedIds,
+    indicator,
+    activationConstraint,
+    projected,
+    announcements,
+    activeId,
+    indentationWidth,
+    activeItem,
+    dropAnimationConfig,
+    measuring,
+    sensors,
+    items,
+    flattenedTree
+  };
+};
+export {
+  useTreeSortable
+};

package/dist/components/Tree/utilities/tree-sortable.js

@@ -1 +1,161 @@
-import{arrayMove}from"@dnd-kit/sortable";function getDragDepth(offset,indentationWidth){return Math.round(offset/indentationWidth)}function getSubtreeIndices(flattenedTree,activeIndex){let indices=[activeIndex],nodeIds=[flattenedTree[activeIndex].id];for(let i=activeIndex+1;i<flattenedTree.length;i++){let item=flattenedTree[i];item.parentId&&nodeIds.includes(item.parentId)&&(indices.push(i),nodeIds.push(item.id))}return indices}function determineNewParentId(active,over,activeNode,overNode,projected){if(projected&&(projected.depth===0||projected.depth===1))return projected.parentId;if(active.id!==over?.id&&overNode)return overNode.parentId===activeNode.parentId?activeNode.parentId:overNode.parentId}function getActiveAndOverNodes(tree,activeId,overId){let activeNodeIndex=tree.findIndex(({id})=>id===activeId),overNodeIndex=overId?tree.findIndex(({id})=>id===overId):-1;return{activeNode:tree[activeNodeIndex],activeNodeIndex,overNode:overNodeIndex===-1?null:tree[overNodeIndex],overNodeIndex}}function getIndicesToUpdate(activeNode,activeNodeIndex,flattenedTree,projected){return activeNode.children&&activeNode.children.length>0&&projected?.depth===1?getSubtreeIndices(flattenedTree,activeNodeIndex):[activeNodeIndex]}function flattenTree(tree,parentId,depth=0){return tree.reduce((acc,node)=>(acc.push({...node,id:node.id,name:node.name,parentId:parentId??null,position:node.position??void 0,depth:depth??0,children:node.children}),node.children&&node.children.length>0&&(acc=acc.concat(flattenTree(node.children,node.id,depth+1))),acc),[])}function flattenNodes(nodes,expandedNodes){let flatten=(nodes,isChild=!1,parentExpanded=!0)=>nodes.reduce((acc,node)=>{let isExpanded=expandedNodes.has(node.id)&&node.children&&node.children.length>0;return acc.push({...node,id:node.id,name:node.name,isChild,haveChilds:!!node.children?.length,expandNode:isExpanded??!1,parentExpanded}),node.children&&isExpanded&&(acc=acc.concat(flatten(node.children,!0,isExpanded))),acc},[]);return flatten(nodes)}function updateParentIds(flattenedTree,indices,newParentId){indices.forEach(index=>{flattenedTree[index]={...flattenedTree[index],parentId:newParentId}})}function findItemIndexInTree(tree,itemId){for(let i=0;i<tree.length;i++){let node=tree[i];if(node.id===itemId)return i;if(node.children&&node.children.length>0){let result=findItemIndexInTree(node.children,itemId);if(result!==null)return result}}return null}function generateUpdateData(updatedFlattenedTree,tree){let updateArray=[],positionCounter=0,itemMap=new Map;updatedFlattenedTree.forEach(item=>{itemMap.set(item.id,item)});function traverse(items,parentId){for(let item of items){let updateItem={_id:item.id,position:positionCounter,parentId:parentId??void 0,isVisible:item.isVisible};updateArray.push(updateItem);let flattenedItem=itemMap.get(item.id);flattenedItem&&(flattenedItem.position=positionCounter),positionCounter++,item.children&&item.children.length>0&&traverse(item.children,item.id)}}return traverse(tree,null),{updateArray,updatedTreeData:updatedFlattenedTree}}var buildTree=flatNodes=>{let nodeMap=new Map;flatNodes.forEach(node=>{nodeMap.set(node.id,{id:node.id,name:node.name,children:[],position:node.position,isVisible:node.isVisible})});let tree=[];return flatNodes.forEach(node=>{let treeNode=nodeMap.get(node.id);if(node.parentId===null||node.parentId===void 0)tree.push(treeNode);else{let parentNode=nodeMap.get(node.parentId);parentNode&&(parentNode.children=parentNode.children??void 0,parentNode.children?.push(treeNode))}}),tree};function getProjection(items,activeId,overId,dragOffset,indentationWidth){let overItemIndex=items.findIndex(({id})=>id===overId),activeItemIndex=items.findIndex(({id})=>id===activeId),activeItem=items[activeItemIndex],previousItem=arrayMove(items,activeItemIndex,overItemIndex)[overItemIndex-1],dragDepth=getDragDepth(dragOffset,indentationWidth),projectedDepth=activeItem.depth+dragDepth,depth=projectedDepth+activeItem.depth;return depth=previousItem?Math.max(0,Math.min(1,projectedDepth)):0,{depth,parentId:getParentId(),activeId,previousItem};function getParentId(){return depth===0||!previousItem?null:depth===previousItem.depth?previousItem.parentId:depth>previousItem.depth?previousItem.id:null}}export{buildTree,determineNewParentId,findItemIndexInTree,flattenNodes,flattenTree,generateUpdateData,getActiveAndOverNodes,getDragDepth,getIndicesToUpdate,getProjection,updateParentIds};
+import { arrayMove } from "@dnd-kit/sortable";
+function getDragDepth(offset, indentationWidth) {
+  return Math.round(offset / indentationWidth);
+}
+function getSubtreeIndices(flattenedTree, activeIndex) {
+  const indices = [activeIndex], nodeIds = [flattenedTree[activeIndex].id];
+  for (let i = activeIndex + 1; i < flattenedTree.length; i++) {
+    const item = flattenedTree[i];
+    item.parentId && nodeIds.includes(item.parentId) && (indices.push(i), nodeIds.push(item.id));
+  }
+  return indices;
+}
+function determineNewParentId(active, over, activeNode, overNode, projected) {
+  if (projected && (projected.depth === 0 || projected.depth === 1))
+    return projected.parentId;
+  if (active.id !== (over == null ? void 0 : over.id) && overNode)
+    return overNode.parentId === activeNode.parentId ? activeNode.parentId : overNode.parentId;
+}
+function getActiveAndOverNodes(tree, activeId, overId) {
+  const activeNodeIndex = tree.findIndex(({
+    id
+  }) => id === activeId), overNodeIndex = overId ? tree.findIndex(({
+    id
+  }) => id === overId) : -1, activeNode = tree[activeNodeIndex], overNode = overNodeIndex !== -1 ? tree[overNodeIndex] : null;
+  return {
+    activeNode,
+    activeNodeIndex,
+    overNode,
+    overNodeIndex
+  };
+}
+function getIndicesToUpdate(activeNode, activeNodeIndex, flattenedTree, projected) {
+  return activeNode.children && activeNode.children.length > 0 && (projected == null ? void 0 : projected.depth) === 1 ? getSubtreeIndices(flattenedTree, activeNodeIndex) : [activeNodeIndex];
+}
+function flattenTree(tree, parentId, depth = 0) {
+  return tree.reduce((acc, node) => (acc.push({
+    ...node,
+    id: node.id,
+    name: node.name,
+    parentId: parentId ?? null,
+    position: node.position ?? void 0,
+    depth: depth ?? 0,
+    children: node.children
+  }), node.children && node.children.length > 0 && (acc = acc.concat(flattenTree(node.children, node.id, depth + 1))), acc), []);
+}
+function flattenNodes(nodes, expandedNodes) {
+  const flatten = (nodes2, isChild = !1, parentExpanded = !0) => nodes2.reduce((acc, node) => {
+    var _a;
+    const isExpanded = expandedNodes.has(node.id) && node.children && node.children.length > 0;
+    return acc.push({
+      ...node,
+      id: node.id,
+      name: node.name,
+      isChild,
+      haveChilds: !!((_a = node.children) != null && _a.length),
+      expandNode: isExpanded ?? !1,
+      parentExpanded
+    }), node.children && isExpanded && (acc = acc.concat(flatten(node.children, !0, isExpanded))), acc;
+  }, []);
+  return flatten(nodes);
+}
+function updateParentIds(flattenedTree, indices, newParentId) {
+  indices.forEach((index) => {
+    flattenedTree[index] = {
+      ...flattenedTree[index],
+      parentId: newParentId
+    };
+  });
+}
+function findItemIndexInTree(tree, itemId) {
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.id === itemId)
+      return i;
+    if (node.children && node.children.length > 0) {
+      const result = findItemIndexInTree(node.children, itemId);
+      if (result)
+        return result;
+    }
+  }
+  return 0;
+}
+function generateUpdateData(updatedFlattenedTree, tree) {
+  const updateArray = [];
+  let positionCounter = 0;
+  const itemMap = /* @__PURE__ */ new Map();
+  updatedFlattenedTree.forEach((item) => {
+    itemMap.set(item.id, item);
+  });
+  function traverse(items, parentId) {
+    for (const item of items) {
+      const updateItem = {
+        _id: item.id,
+        position: positionCounter,
+        parentId: parentId ?? void 0,
+        isVisible: item.isVisible
+      };
+      updateArray.push(updateItem);
+      const flattenedItem = itemMap.get(item.id);
+      flattenedItem && (flattenedItem.position = positionCounter), positionCounter++, item.children && item.children.length > 0 && traverse(item.children, item.id);
+    }
+  }
+  return traverse(tree, null), {
+    updateArray,
+    updatedTreeData: updatedFlattenedTree
+  };
+}
+const buildTree = (flatNodes) => {
+  const nodeMap = /* @__PURE__ */ new Map();
+  flatNodes.forEach((node) => {
+    nodeMap.set(node.id, {
+      id: node.id,
+      name: node.name,
+      children: [],
+      position: node.position,
+      isVisible: node.isVisible
+    });
+  });
+  const tree = [];
+  return flatNodes.forEach((node) => {
+    var _a;
+    const treeNode = nodeMap.get(node.id);
+    if (node.parentId === null || node.parentId === void 0)
+      tree.push(treeNode);
+    else {
+      const parentNode = nodeMap.get(node.parentId);
+      parentNode && (parentNode.children = parentNode.children ?? void 0, (_a = parentNode.children) == null || _a.push(treeNode));
+    }
+  }), tree;
+};
+function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
+  const overItemIndex = items.findIndex(({
+    id
+  }) => id === overId), activeItemIndex = items.findIndex(({
+    id
+  }) => id === activeId), activeItem = items[activeItemIndex], newItems = arrayMove(items, activeItemIndex, overItemIndex), previousItem = newItems[overItemIndex - 1], dragDepth = getDragDepth(dragOffset, indentationWidth), projectedDepth = activeItem.depth + dragDepth;
+  let depth = projectedDepth + activeItem.depth;
+  return previousItem ? depth = Math.max(0, Math.min(1, projectedDepth)) : depth = 0, {
+    depth,
+    parentId: getParentId(),
+    activeId,
+    previousItem
+  };
+  function getParentId() {
+    var _a;
+    return depth === 0 || !previousItem ? null : depth === previousItem.depth ? previousItem.parentId : depth > previousItem.depth ? previousItem.id : ((_a = newItems.slice(0, overItemIndex).reverse().find((item) => item.depth === depth)) == null ? void 0 : _a.parentId) ?? null;
+  }
+}
+export {
+  buildTree,
+  determineNewParentId,
+  findItemIndexInTree,
+  flattenNodes,
+  flattenTree,
+  generateUpdateData,
+  getActiveAndOverNodes,
+  getDragDepth,
+  getIndicesToUpdate,
+  getProjection,
+  updateParentIds
+};

package/dist/components/Tree/utilities/tree.js

@@ -1 +1,44 @@
-import"@edifice.io/client";function findNodeById(data,id){if(Array.isArray(data))for(let node of data){let result=findNodeById(node,id);if(result)return result}else{if(data.id===id)return data;if(data.children)for(let child of data.children){let result=findNodeById(child,id);if(result)return result}}}function findPathById(tree,nodeId){let path=[];function traverse(node,currentPath){if(node.id===nodeId)return path=currentPath.concat(node.id),!0;if(node.children){for(let child of node.children)if(traverse(child,currentPath.concat(node.id)))return!0}return!1}function startTraverse(nodes){if(Array.isArray(nodes)){for(let node of nodes)if(traverse(node,[]))break}else traverse(nodes,[])}return startTraverse(tree),path}export{findNodeById,findPathById};
+import "@edifice.io/client";
+function findNodeById(data, id) {
+  if (Array.isArray(data))
+    for (const node of data) {
+      const result = findNodeById(node, id);
+      if (result)
+        return result;
+    }
+  else {
+    if (data.id === id) return data;
+    if (data.children)
+      for (const child of data.children) {
+        const result = findNodeById(child, id);
+        if (result)
+          return result;
+      }
+  }
+}
+function findPathById(tree, nodeId) {
+  let path = [];
+  function traverse(node, currentPath) {
+    if (node.id === nodeId)
+      return path = currentPath.concat(node.id), !0;
+    if (node.children) {
+      for (const child of node.children)
+        if (traverse(child, currentPath.concat(node.id)))
+          return !0;
+    }
+    return !1;
+  }
+  function startTraverse(nodes) {
+    if (Array.isArray(nodes)) {
+      for (const node of nodes)
+        if (traverse(node, []))
+          break;
+    } else
+      traverse(nodes, []);
+  }
+  return startTraverse(tree), path;
+}
+export {
+  findNodeById,
+  findPathById
+};

package/dist/components/TreeView/TreeNode.js

@@ -1 +1,69 @@
-import SvgIconFolder from"../../modules/icons/components/IconFolder.js";import SvgIconPlus from"../../modules/icons/components/IconPlus.js";import SvgIconRafterDown from"../../modules/icons/components/IconRafterDown.js";import SvgIconRafterRight from"../../modules/icons/components/IconRafterRight.js";import clsx$1 from"clsx";import{useId}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";import{useDroppable}from"@dnd-kit/core";var TreeNode=({node,showIcon,selectedNodeId,expandedNodes,siblingsNodes,draggedNodeId,handleItemClick,handleToggleNode,handleItemAction})=>{let expanded=expandedNodes.has(node.id),sibling=siblingsNodes?.current.has(node.id),selected=selectedNodeId===node.id,treeItemClasses={action:clsx$1(`action-container d-flex align-items-center gap-8 px-2`,{"drag-focus":draggedNodeId===node.id,"py-4":!node.section}),arrow:clsx$1({"py-4":!node.section,"py-8":node.section,invisible:!Array.isArray(node.children)||node.children.length===0}),button:clsx$1(`flex-fill d-flex align-items-center text-truncate gap-8`,{"py-8":node.section})},iconSize=node.section?16:12,{t}=useTranslation(),{setNodeRef}=useDroppable({id:useId(),data:{id:node.id,name:node.name,isTreeview:!0,accepts:[`folder`,`resource`]}}),handleOnItemClick=nodeId=>handleItemClick?.(nodeId),handleOnToggleNode=nodeId=>handleToggleNode?.(nodeId),handleOnCreateChildrenPage=nodeId=>handleItemAction?.(nodeId);return jsx(`li`,{ref:setNodeRef,id:`treeitem-${node.id}`,role:`treeitem`,"aria-selected":selected&&selected,"aria-expanded":expanded&&expanded,children:jsxs(`div`,{children:[jsxs(`div`,{className:treeItemClasses.action,children:[jsx(`div`,{className:treeItemClasses.arrow,tabIndex:0,role:`button`,onClick:()=>handleOnToggleNode(node.id),onKeyDown:event=>{(event.code===`Enter`||event.code===`Space`)&&(event.preventDefault(),event.stopPropagation(),handleToggleNode?.(node.id))},"aria-label":t(`foldUnfold`),children:(()=>{let hasNoSiblings=!siblingsNodes?.current?.has(node.id),hasChildren=Array.isArray(node.children)&&node.children.length>0;return sibling||hasNoSiblings&&hasChildren})()&&(expanded=>jsx(expanded?SvgIconRafterDown:SvgIconRafterRight,{title:t(`foldUnfold`),width:iconSize,height:iconSize}))(expanded)}),jsxs(`div`,{tabIndex:0,role:`button`,className:treeItemClasses.button,onClick:()=>handleOnItemClick(node.id),onKeyDown:event=>{(event.code===`Enter`||event.code===`Space`)&&(event.preventDefault(),event.stopPropagation(),handleItemClick?.(node.id))},children:[node.section&&showIcon&&jsx(SvgIconFolder,{title:t(`folder`),width:20,height:20}),jsx(`span`,{className:`text-truncate`,children:node.name})]}),node.section&&handleItemAction&&jsx(`button`,{className:`tree-btn mx-8`,onClick:()=>handleOnCreateChildrenPage(node.id),children:jsx(SvgIconPlus,{height:16,width:16})})]}),Array.isArray(node.children)&&!!node.children.length&&expanded&&jsx(`ul`,{role:`group`,children:node.children.map(child=>jsx(TreeNode,{node:child,selectedNodeId,expandedNodes,siblingsNodes,draggedNodeId,handleItemClick,handleToggleNode},child.id))})]})},node.id)};export{TreeNode};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDroppable } from "@dnd-kit/core";
+import clsx from "clsx";
+import { useId } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconFolder from "../../modules/icons/components/IconFolder.js";
+import SvgIconPlus from "../../modules/icons/components/IconPlus.js";
+import SvgIconRafterDown from "../../modules/icons/components/IconRafterDown.js";
+import SvgIconRafterRight from "../../modules/icons/components/IconRafterRight.js";
+const TreeNode = ({
+  node,
+  showIcon,
+  selectedNodeId,
+  expandedNodes,
+  siblingsNodes,
+  draggedNodeId,
+  handleItemClick,
+  handleToggleNode,
+  handleItemAction
+}) => {
+  const expanded = expandedNodes.has(node.id), sibling = siblingsNodes == null ? void 0 : siblingsNodes.current.has(node.id), selected = selectedNodeId === node.id, focused = draggedNodeId === node.id, treeItemClasses = {
+    action: clsx("action-container d-flex align-items-center gap-8 px-2", {
+      "drag-focus": focused,
+      "py-4": !node.section
+    }),
+    arrow: clsx({
+      "py-4": !node.section,
+      "py-8": node.section,
+      invisible: !Array.isArray(node.children) || node.children.length === 0
+    }),
+    button: clsx("flex-fill d-flex align-items-center text-truncate gap-8", {
+      "py-8": node.section
+    })
+  }, iconSize = node.section ? 16 : 12, {
+    t
+  } = useTranslation(), {
+    setNodeRef
+  } = useDroppable({
+    id: useId(),
+    data: {
+      id: node.id,
+      name: node.name,
+      isTreeview: !0,
+      accepts: ["folder", "resource"]
+    }
+  }), handleOnItemClick = (nodeId) => handleItemClick == null ? void 0 : handleItemClick(nodeId), handleOnToggleNode = (nodeId) => handleToggleNode == null ? void 0 : handleToggleNode(nodeId), handleOnCreateChildrenPage = (nodeId) => handleItemAction == null ? void 0 : handleItemAction(nodeId), handleItemKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), handleItemClick == null || handleItemClick(node.id));
+  }, handleItemToggleKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), handleToggleNode == null || handleToggleNode(node.id));
+  }, renderRafterIcon = (expanded2) => /* @__PURE__ */ jsx(expanded2 ? SvgIconRafterDown : SvgIconRafterRight, { title: t("foldUnfold"), width: iconSize, height: iconSize }), shouldRenderRafterIcon = () => {
+    var _a;
+    const hasNoSiblings = !((_a = siblingsNodes == null ? void 0 : siblingsNodes.current) != null && _a.has(node.id)), hasChildren = Array.isArray(node.children) && node.children.length > 0;
+    return sibling || hasNoSiblings && hasChildren;
+  };
+  return /* @__PURE__ */ jsx("li", { ref: setNodeRef, id: `treeitem-${node.id}`, role: "treeitem", "aria-selected": selected && selected, "aria-expanded": expanded && expanded, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: treeItemClasses.action, children: [
+      /* @__PURE__ */ jsx("div", { className: treeItemClasses.arrow, tabIndex: 0, role: "button", onClick: () => handleOnToggleNode(node.id), onKeyDown: handleItemToggleKeyDown, "aria-label": t("foldUnfold"), children: shouldRenderRafterIcon() && renderRafterIcon(expanded) }),
+      /* @__PURE__ */ jsxs("div", { tabIndex: 0, role: "button", className: treeItemClasses.button, onClick: () => handleOnItemClick(node.id), onKeyDown: handleItemKeyDown, children: [
+        node.section && showIcon && /* @__PURE__ */ jsx(SvgIconFolder, { title: t("folder"), width: 20, height: 20 }),
+        /* @__PURE__ */ jsx("span", { className: "text-truncate", children: node.name })
+      ] }),
+      node.section && handleItemAction && /* @__PURE__ */ jsx("button", { className: "tree-btn mx-8", onClick: () => handleOnCreateChildrenPage(node.id), children: /* @__PURE__ */ jsx(SvgIconPlus, { height: 16, width: 16 }) })
+    ] }),
+    Array.isArray(node.children) && !!node.children.length && expanded && /* @__PURE__ */ jsx("ul", { role: "group", children: node.children.map((child) => /* @__PURE__ */ jsx(TreeNode, { node: child, selectedNodeId, expandedNodes, siblingsNodes, draggedNodeId, handleItemClick, handleToggleNode }, child.id)) })
+  ] }) }, node.id);
+};
+export {
+  TreeNode
+};

package/dist/components/TreeView/TreeView.js

@@ -1 +1,37 @@
-import{useTreeView}from"./hooks/useTreeView.js";import{TreeNode}from"./TreeNode.js";import{forwardRef}from"react";import{jsx}from"react/jsx-runtime";var TreeView=forwardRef((props,ref)=>{let{data,onTreeItemClick,onTreeItemUnfold,onTreeItemFold,onTreeItemAction,draggedNode,showIcon=!0,allExpandedNodes=!1,selectedNodeId:externalSelectedNodeId}=props,{selectedNodeId,expandedNodes,siblingsNodes,draggedNodeId,handleItemClick,handleFoldUnfold}=useTreeView({data,ref,externalSelectedNodeId,draggedNode,allExpandedNodes,onTreeItemClick,onTreeItemFold,onTreeItemUnfold});return jsx(`div`,{className:`treeview`,children:jsx(`ul`,{role:`tree`,className:`m-0 p-0`,children:Array.isArray(data)?data.map(node=>jsx(TreeNode,{node,showIcon,selectedNodeId,expandedNodes,siblingsNodes,draggedNodeId,handleItemClick,handleToggleNode:handleFoldUnfold,handleItemAction:onTreeItemAction},node.id)):jsx(TreeNode,{node:data,selectedNodeId,expandedNodes,siblingsNodes,showIcon,draggedNodeId,handleItemClick,handleToggleNode:handleFoldUnfold})})})});export{TreeView as default};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TreeNode } from "./TreeNode.js";
+import { useTreeView } from "./hooks/useTreeView.js";
+const TreeView = /* @__PURE__ */ forwardRef((props, ref) => {
+  const {
+    data,
+    onTreeItemClick,
+    onTreeItemUnfold,
+    onTreeItemFold,
+    onTreeItemAction,
+    draggedNode,
+    showIcon = !0,
+    allExpandedNodes = !1,
+    selectedNodeId: externalSelectedNodeId
+  } = props, {
+    selectedNodeId,
+    expandedNodes,
+    siblingsNodes,
+    draggedNodeId,
+    handleItemClick,
+    handleFoldUnfold
+  } = useTreeView({
+    data,
+    ref,
+    externalSelectedNodeId,
+    draggedNode,
+    allExpandedNodes,
+    onTreeItemClick,
+    onTreeItemFold,
+    onTreeItemUnfold
+  });
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: Array.isArray(data) ? data.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, showIcon, selectedNodeId, expandedNodes, siblingsNodes, draggedNodeId, handleItemClick, handleToggleNode: handleFoldUnfold, handleItemAction: onTreeItemAction }, node.id)) : /* @__PURE__ */ jsx(TreeNode, { node: data, selectedNodeId, expandedNodes, siblingsNodes, showIcon, draggedNodeId, handleItemClick, handleToggleNode: handleFoldUnfold }) }) });
+});
+export {
+  TreeView as default
+};

package/dist/components/TreeView/hooks/useTreeView.js

@@ -1 +1,105 @@
-import{findNodeById,findPathById}from"../utilities/treeview.js";import{useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";var useTreeView=({data,ref,externalSelectedNodeId,draggedNode,allExpandedNodes,onTreeItemUnfold,onTreeItemFold,onTreeItemClick})=>{let[internalSelectedNodeId,setInternalSelectedNodeId]=useState(void 0),[expandedNodes,setExpandedNodes]=useState(new Set),siblingsNodes=useRef(new Set),[draggedNodeId,setDraggedNodeId]=useState(void 0),selectedNodeId=internalSelectedNodeId??externalSelectedNodeId;function addNodesWithSiblingHavingChildren(data){Array.isArray(data)?data.forEach(node=>{let resultSet=new Set(siblingsNodes.current);data.filter(({id})=>id!==node.id).some(sibling=>sibling.children&&sibling.children.length>0)&&resultSet.add(node.id),node.children&&node.children.length>0&&node.children.forEach(child=>{(node.children?.filter(({id})=>id!==child.id))?.some(sibling=>sibling.children&&sibling.children.length>0)&&resultSet.add(child.id),addNodesWithSiblingHavingChildren(child)})}):data.children?.forEach(child=>{let resultSet=new Set(siblingsNodes.current);(data.children?.filter(c=>c.id!==child.id))?.some(sibling=>sibling.children&&sibling.children.length>0)&&(resultSet.add(child.id),siblingsNodes.current=resultSet),addNodesWithSiblingHavingChildren(child)})}let expandedAllNodes=allExpandedNodes=>{let initExpandedNodes=new Set(``);data&&Array.isArray(data)&&allExpandedNodes&&(data.forEach(node=>{initExpandedNodes.add(node.id)}),setExpandedNodes(initExpandedNodes))};useEffect(()=>{data&&addNodesWithSiblingHavingChildren(data)},[data]),useEffect(()=>{draggedNode?.isOver&&draggedNode.isTreeview?(draggedNode.overId&&handleItemDrag(draggedNode.overId),setDraggedNodeId(draggedNode.overId)):setDraggedNodeId(void 0)},[draggedNode]);let handlers=useMemo(()=>({unselectAll(){setInternalSelectedNodeId(void 0)},select(nodeId){handleItemClick(nodeId)},allExpandedNodes(){expandedAllNodes(allExpandedNodes)}}),[]);useImperativeHandle(ref,()=>handlers,[handlers]),useEffect(()=>{expandedAllNodes(allExpandedNodes)},[]),useEffect(()=>{externalSelectedNodeId&&!allExpandedNodes?(handleExternalSelectedNodeId(externalSelectedNodeId),setInternalSelectedNodeId(externalSelectedNodeId)):setInternalSelectedNodeId(void 0)},[externalSelectedNodeId]);let handleExternalSelectedNodeId=nodeId=>{if(!findNodeById(data,selectedNodeId)){setInternalSelectedNodeId(void 0);return}if(externalSelectedNodeId===`default`){expandedNodes.forEach(node=>onTreeItemUnfold?.(node));return}handleExpandNode(nodeId)},handleExpandNode=nodeId=>{let updatedExpandedNodes=new Set(expandedNodes),parents=findPathById(data,nodeId),arrayOrder=Array.from(updatedExpandedNodes);parents.forEach(parent=>{let index=arrayOrder.indexOf(parent);index>-1&&arrayOrder.splice(index,1),arrayOrder.push(parent)}),updatedExpandedNodes.clear(),arrayOrder.forEach(node=>updatedExpandedNodes.add(node)),updatedExpandedNodes.forEach(node=>onTreeItemUnfold?.(node)),setExpandedNodes(updatedExpandedNodes)},handleCollapseNode=nodeId=>{let updatedExpandedNodes=new Set(expandedNodes);updatedExpandedNodes.delete(nodeId),updatedExpandedNodes.forEach(node=>onTreeItemFold?.(node)),setExpandedNodes(updatedExpandedNodes)},handleToggleNode=nodeId=>{expandedNodes.has(nodeId)?handleCollapseNode(nodeId):handleExpandNode(nodeId)},handleSelectedItem=nodeId=>{selectedNodeId!==nodeId&&setInternalSelectedNodeId(nodeId)},handleItemClick=nodeId=>{handleSelectedItem(nodeId),handleExpandNode(nodeId),onTreeItemClick?.(nodeId)},handleFoldUnfold=nodeId=>{handleToggleNode(nodeId)},handleItemDrag=nodeId=>{findNodeById(data,externalSelectedNodeId)&&handleExpandNode(nodeId)};return{selectedNodeId,expandedNodes,siblingsNodes,draggedNodeId,handleItemClick,handleFoldUnfold}};export{useTreeView};
+import { useState, useRef, useEffect, useMemo, useImperativeHandle } from "react";
+import { findNodeById, findPathById } from "../utilities/treeview.js";
+const useTreeView = ({
+  data,
+  ref,
+  externalSelectedNodeId,
+  draggedNode,
+  allExpandedNodes,
+  onTreeItemUnfold,
+  onTreeItemFold,
+  onTreeItemClick
+}) => {
+  const [internalSelectedNodeId, setInternalSelectedNodeId] = useState(void 0), [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set()), siblingsNodes = useRef(/* @__PURE__ */ new Set()), [draggedNodeId, setDraggedNodeId] = useState(void 0), selectedNodeId = internalSelectedNodeId ?? externalSelectedNodeId;
+  function addNodesWithSiblingHavingChildren(data2) {
+    var _a;
+    Array.isArray(data2) ? data2.forEach((node) => {
+      const resultSet = new Set(siblingsNodes.current);
+      data2.filter(({
+        id
+      }) => id !== node.id).some((sibling) => sibling.children && sibling.children.length > 0) && resultSet.add(node.id), node.children && node.children.length > 0 && node.children.forEach((child) => {
+        var _a2;
+        const childSiblings = (_a2 = node.children) == null ? void 0 : _a2.filter(({
+          id
+        }) => id !== child.id);
+        (childSiblings == null ? void 0 : childSiblings.some((sibling) => sibling.children && sibling.children.length > 0)) && resultSet.add(child.id), addNodesWithSiblingHavingChildren(child);
+      });
+    }) : (_a = data2.children) == null || _a.forEach((child) => {
+      var _a2;
+      const resultSet = new Set(siblingsNodes.current), siblings = (_a2 = data2.children) == null ? void 0 : _a2.filter((c) => c.id !== child.id);
+      (siblings == null ? void 0 : siblings.some((sibling) => sibling.children && sibling.children.length > 0)) && (resultSet.add(child.id), siblingsNodes.current = resultSet), addNodesWithSiblingHavingChildren(child);
+    });
+  }
+  const expandedAllNodes = (allExpandedNodes2) => {
+    const initExpandedNodes = new Set("");
+    data && Array.isArray(data) && allExpandedNodes2 && (data.forEach((node) => {
+      initExpandedNodes.add(node.id);
+    }), setExpandedNodes(initExpandedNodes));
+  };
+  useEffect(() => {
+    data && addNodesWithSiblingHavingChildren(data);
+  }, [data]), useEffect(() => {
+    draggedNode != null && draggedNode.isOver && draggedNode.isTreeview ? (draggedNode.overId && handleItemDrag(draggedNode.overId), setDraggedNodeId(draggedNode.overId)) : setDraggedNodeId(void 0);
+  }, [draggedNode]);
+  const handlers = useMemo(
+    () => ({
+      unselectAll() {
+        setInternalSelectedNodeId(void 0);
+      },
+      select(nodeId) {
+        handleItemClick(nodeId);
+      },
+      allExpandedNodes() {
+        expandedAllNodes(allExpandedNodes);
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  useImperativeHandle(ref, () => handlers, [handlers]), useEffect(() => {
+    expandedAllNodes(allExpandedNodes);
+  }, []), useEffect(() => {
+    externalSelectedNodeId && !allExpandedNodes ? (handleExternalSelectedNodeId(externalSelectedNodeId), setInternalSelectedNodeId(externalSelectedNodeId)) : setInternalSelectedNodeId(void 0);
+  }, [externalSelectedNodeId]);
+  const handleExternalSelectedNodeId = (nodeId) => {
+    if (!findNodeById(data, selectedNodeId)) {
+      setInternalSelectedNodeId(void 0);
+      return;
+    }
+    if (externalSelectedNodeId === "default") {
+      expandedNodes.forEach((node) => onTreeItemUnfold == null ? void 0 : onTreeItemUnfold(node));
+      return;
+    }
+    handleExpandNode(nodeId);
+  }, handleExpandNode = (nodeId) => {
+    const updatedExpandedNodes = new Set(expandedNodes), parents = findPathById(data, nodeId), arrayOrder = Array.from(updatedExpandedNodes);
+    parents.forEach((parent) => {
+      const index = arrayOrder.indexOf(parent);
+      index > -1 && arrayOrder.splice(index, 1), arrayOrder.push(parent);
+    }), updatedExpandedNodes.clear(), arrayOrder.forEach((node) => updatedExpandedNodes.add(node)), updatedExpandedNodes.forEach((node) => onTreeItemUnfold == null ? void 0 : onTreeItemUnfold(node)), setExpandedNodes(updatedExpandedNodes);
+  }, handleCollapseNode = (nodeId) => {
+    const updatedExpandedNodes = new Set(expandedNodes);
+    updatedExpandedNodes.delete(nodeId), updatedExpandedNodes.forEach((node) => onTreeItemFold == null ? void 0 : onTreeItemFold(node)), setExpandedNodes(updatedExpandedNodes);
+  }, handleToggleNode = (nodeId) => {
+    expandedNodes.has(nodeId) ? handleCollapseNode(nodeId) : handleExpandNode(nodeId);
+  }, handleSelectedItem = (nodeId) => {
+    selectedNodeId !== nodeId && setInternalSelectedNodeId(nodeId);
+  }, handleItemClick = (nodeId) => {
+    handleSelectedItem(nodeId), handleExpandNode(nodeId), onTreeItemClick == null || onTreeItemClick(nodeId);
+  }, handleFoldUnfold = (nodeId) => {
+    handleToggleNode(nodeId);
+  }, handleItemDrag = (nodeId) => {
+    findNodeById(data, externalSelectedNodeId) && handleExpandNode(nodeId);
+  };
+  return {
+    selectedNodeId,
+    expandedNodes,
+    siblingsNodes,
+    draggedNodeId,
+    handleItemClick,
+    handleFoldUnfold
+  };
+};
+export {
+  useTreeView
+};