@edifice.io/react 1.7.4-develop-pedago.20241211160712

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

@@ -0,0 +1,160 @@
+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({
+    id: node.id,
+    name: node.name,
+    parentId: parentId ?? null,
+    position: node.position ?? void 0,
+    depth: depth ?? 0,
+    children: node.children,
+    isVisible: node.isVisible
+  }), 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({
+      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.d.ts

@@ -0,0 +1,34 @@
+import { IFolder } from '@edifice.io/client';
+import { TreeItem } from '../types';
+export declare function findNodeById(data: TreeItem | TreeItem[], id: string): TreeItem | undefined;
+export declare function addNode(node: TreeItem, { parentId, newFolder }: {
+    parentId: string;
+    newFolder: IFolder;
+}): TreeItem;
+export declare function arrayUnique<T>(array: T[]): T[];
+export declare function deleteNode(node: TreeItem, { folders }: {
+    folders: string[];
+}): TreeItem;
+export declare const findParentNode: (parentNode: TreeItem, childId: string) => TreeItem | undefined;
+export declare function getAncestors(data: TreeItem, folderId: string): string[];
+export declare function hasChildren(folderId: string, data: TreeItem): boolean;
+export declare function modifyNode(data: TreeItem, callback: (node: TreeItem, parent?: TreeItem) => TreeItem | undefined): TreeItem;
+export declare function moveNode(node: TreeItem, { destinationId, folders }: {
+    destinationId: string;
+    folders: string[];
+}): TreeItem;
+export declare const wrapTreeNode: (node: TreeItem, folders: IFolder[] | undefined, parentId: string) => TreeItem;
+export declare function updateNode(node: TreeItem, { folderId, newFolder }: {
+    folderId: string;
+    newFolder: IFolder;
+}): TreeItem;
+export declare function findPathById(tree: TreeItem | TreeItem[], nodeId: string): string[];
+export declare class TreeNodeFolderWrapper implements TreeItem {
+    readonly folder: IFolder;
+    constructor(folder: IFolder);
+    readonly id: string;
+    readonly name: string;
+    readonly childNumber: number;
+    section: boolean;
+    readonly children: TreeItem[];
+}

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

@@ -0,0 +1,44 @@
+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.d.ts

@@ -0,0 +1,48 @@
+import { TreeData } from '../../types';
+export interface TreeNodeProps_V1 {
+    /**
+     * Data
+     */
+    node: TreeData;
+    /**
+     * Show or hide section icon (folder icon)
+     */
+    showIcon?: boolean;
+    /**
+     * Nodes expanded (opened)
+     */
+    expandedNodes: Set<string>;
+    /**
+     * Siblings nodes
+     */
+    siblingsNodes?: React.MutableRefObject<Set<string>>;
+    /**
+     * External node selected to sync Treeview
+     */
+    selectedNodeId?: string;
+    /**
+     * Is treeview is an array
+     */
+    isTreeviewArray?: boolean;
+    /**
+     * Is node over
+     */
+    focused?: boolean;
+    /**
+     * Id of draggable node
+     */
+    draggedNodeId?: string | undefined;
+    /**
+     * Function to select item
+     */
+    handleItemClick: (nodeId: string) => void;
+    /**
+     * Function to fold / unfold node
+     */
+    handleToggleNode?: (nodeId: string) => void;
+    /**
+     * Function to handle secondary action
+     */
+    handleItemAction?: (nodeId: string) => void;
+}
+export declare const TreeNode: ({ node, showIcon, selectedNodeId, expandedNodes, siblingsNodes, draggedNodeId, handleItemClick, handleToggleNode, handleItemAction, }: TreeNodeProps_V1) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TreeView/TreeNode.js

@@ -0,0 +1,69 @@
+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.d.ts

@@ -0,0 +1,56 @@
+import { TreeData } from '../../types';
+export interface TreeViewHandlers_V1 {
+    unselectAll: () => void;
+    select: (nodeId: string) => void;
+}
+export interface TreeViewProps {
+    /**
+     * TreeNode data
+     */
+    data: TreeData | TreeData[];
+    /**
+     * Node ID used for navigation folders
+     */
+    selectedNodeId?: string;
+    /**
+     * Show Section Icon Folder
+     */
+    showIcon?: boolean;
+    /**
+     * Open all treeview nodes
+     */
+    allExpandedNodes?: boolean;
+    /**
+     * Pass draggeNode when you drag an element from another context (resource / folder)
+     */
+    draggedNode?: {
+        isOver: boolean;
+        overId: string | undefined;
+        isTreeview: boolean;
+    };
+    /**
+     * Callback function to provide selected item to parent component
+     */
+    onTreeItemClick?: (nodeId: string) => void;
+    /**
+     * Callback function to provide folded item to parent component
+     */
+    onTreeItemFold?: (nodeId: string) => void;
+    /**
+     * Callback function to provide unfolded item to parent component
+     */
+    onTreeItemUnfold?: (nodeId: string) => void;
+    /**
+     * Callback function to secondary action
+     */
+    onTreeItemAction?: (nodeId: string) => void;
+}
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * Please use the Tree component instead.
+ */
+/**
+ * UI TreeView Component
+ */
+declare const TreeView: import('react').ForwardRefExoticComponent<TreeViewProps & import('react').RefAttributes<TreeViewHandlers_V1>>;
+export default TreeView;

package/dist/components/TreeView/TreeView.js

@@ -0,0 +1,37 @@
+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.d.ts

@@ -0,0 +1,33 @@
+import { Ref } from 'react';
+import { TreeData } from '../../../types';
+import { TreeViewHandlers_V1 } from '../TreeView';
+export declare const useTreeView: ({ data, ref, externalSelectedNodeId, draggedNode, allExpandedNodes, onTreeItemUnfold, onTreeItemFold, onTreeItemClick, }: {
+    data: TreeData | TreeData[];
+    ref: Ref<TreeViewHandlers_V1>;
+    externalSelectedNodeId: string | undefined;
+    draggedNode?: {
+        isOver: boolean;
+        overId: string | undefined;
+        isTreeview: boolean;
+    };
+    allExpandedNodes?: boolean;
+    /**
+     * Callback function to provide unfolded item to parent component
+     */
+    onTreeItemUnfold?: (nodeId: string) => void;
+    /**
+     * Callback function to provide folded item to parent component
+     */
+    onTreeItemFold?: (nodeId: string) => void;
+    /**
+     * Callback function to provide selected item to parent component
+     */
+    onTreeItemClick?: (nodeId: string) => void;
+}) => {
+    selectedNodeId: string | undefined;
+    expandedNodes: Set<string>;
+    siblingsNodes: import('react').MutableRefObject<Set<string>>;
+    draggedNodeId: string | undefined;
+    handleItemClick: (nodeId: string) => void;
+    handleFoldUnfold: (nodeId: string) => void;
+};

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

@@ -0,0 +1,105 @@
+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
+};

package/dist/components/TreeView/index.d.ts

@@ -0,0 +1,5 @@
+export * from './hooks/useTreeView';
+export * from './TreeNode';
+export * from './TreeView';
+export { default as TreeView } from './TreeView';
+export * from './utilities';

package/dist/components/TreeView/utilities/index.d.ts

@@ -0,0 +1 @@
+export * from './treeview';

package/dist/components/TreeView/utilities/treeview.d.ts

@@ -0,0 +1,35 @@
+import { IFolder } from '@edifice.io/client';
+import { TreeData } from '../../../types';
+export declare function findTreeNode(root: TreeData, predicate: (node: TreeData) => boolean): TreeData | undefined;
+export declare function findNodeById(data: TreeData | TreeData[], id: string): TreeData | undefined;
+export declare function addNode(node: TreeData, { parentId, newFolder }: {
+    parentId: string;
+    newFolder: IFolder;
+}): TreeData;
+export declare function arrayUnique<T>(array: T[]): T[];
+export declare function deleteNode(node: TreeData, { folders }: {
+    folders: string[];
+}): TreeData;
+export declare const findParentNode: (parentNode: TreeData, childId: string) => TreeData | undefined;
+export declare function getAncestors(data: TreeData, folderId: string): string[];
+export declare function hasChildren(folderId: string, data: TreeData): boolean;
+export declare function modifyNode(data: TreeData, callback: (node: TreeData, parent?: TreeData) => TreeData | undefined): TreeData;
+export declare function moveNode(node: TreeData, { destinationId, folders }: {
+    destinationId: string;
+    folders: string[];
+}): TreeData;
+export declare const wrapTreeNode: (node: TreeData, folders: IFolder[] | undefined, parentId: string) => TreeData;
+export declare function updateNode(node: TreeData, { folderId, newFolder }: {
+    folderId: string;
+    newFolder: IFolder;
+}): TreeData;
+export declare function findPathById(tree: TreeData | TreeData[], nodeId: string): string[];
+export declare class TreeNodeFolderWrapper implements TreeData {
+    readonly folder: IFolder;
+    constructor(folder: IFolder);
+    readonly id: string;
+    readonly name: string;
+    readonly childNumber: number;
+    section: boolean;
+    readonly children: TreeData[];
+}