@edifice.io/react 2.0.0-develop-rc.26 → 2.0.0-develop-pedago.0

package/dist/components/Tree/components/SortableTree.js

@@ -10,6 +10,7 @@ import SvgIconFolder from "../../../modules/icons/components/IconFolder.js";
 import SvgIconRafterRight from "../../../modules/icons/components/IconRafterRight.js";
 import { useTree } from "../hooks/useTree.js";
 import { useTreeSortable } from "../hooks/useTreeSortable.js";
+import { flattenNodes } from "../utilities/tree-sortable.js";
 const SortableTree = ({
   nodes,
   selectedNodeId: externalSelectedNodeId,
@@ -25,7 +26,7 @@ const SortableTree = ({
     expandedNodes,
     handleItemClick,
     handleFoldUnfold,
-    collapseAllNodes
+    handleCollapseNode
   } = useTree({
     data: nodes,
     externalSelectedNodeId,
@@ -51,12 +52,12 @@ const SortableTree = ({
   } = useTreeSortable({
     nodes,
     onSortable,
-    collapseAllNodes
-  });
-  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: /* @__PURE__ */ jsxs(DndContext, { accessibility: {
+    handleCollapseNode
+  }), newNodes = flattenNodes(items, expandedNodes);
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("div", { role: "tree", className: "m-0 p-0", children: /* @__PURE__ */ jsxs(DndContext, { accessibility: {
     announcements
   }, sensors, measuring, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragMove: handleDragMove, children: [
-    /* @__PURE__ */ jsx(SortableContext, { items: sortedIds, strategy: verticalListSortingStrategy, children: Array.isArray(items) && items.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, showIcon, expandedNodes, selectedNodeId, renderNode, disabled: isDisabled(node.id), onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, depth: node.id === activeId && projected ? projected.depth : 0, indentationWidth, projected }, node.id)) }),
+    /* @__PURE__ */ jsx(SortableContext, { items: sortedIds, strategy: verticalListSortingStrategy, children: Array.isArray(items) && newNodes.map((node) => node.parentExpanded ? /* @__PURE__ */ jsx(TreeNode, { node, showIcon, expandedNodes, selectedNodeId, renderNode, disabled: isDisabled(node.id), onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, depth: node.id === activeId && projected ? projected.depth : 0, isChild: node.isChild, indentationWidth, projected }, node.id) : null) }),
     /* @__PURE__ */ createPortal(/* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig, modifiers: indicator ? [adjustTranslate] : void 0, children: activeId && activeItem ? /* @__PURE__ */ jsx(DragOverlayItem, { activeItem }) : null }), document.body)
   ] }) }) });
 }, TreeNode = /* @__PURE__ */ forwardRef(({
@@ -69,12 +70,10 @@ const SortableTree = ({
   indentationWidth,
   depth,
   isChild,
-  projected,
   renderNode,
   onTreeItemClick,
   onToggleNode
-}, ref) => {
-  var _a;
+}) => {
   const {
     t
   } = useTranslation(), selected = selectedNodeId === node.id, expanded = expandedNodes.has(node.id), animateLayoutChanges = ({
@@ -96,37 +95,33 @@ const SortableTree = ({
   }, treeItemClasses = {
     action: clsx("action-container d-flex align-items-center gap-8 px-2", {
       "drag-focus": focused,
-      "border border-secondary rounded rounded-2 shadow bg-white": isDragging
-    }),
-    arrow: clsx({
-      invisible: !Array.isArray(node.children) || node.children.length === 0
+      "border border-secondary rounded rounded-2 shadow bg-white": isDragging,
+      display: expanded ? "block" : "none"
     }),
     button: clsx("flex-fill d-flex align-items-center text-truncate gap-8", {
       "py-8": depth === 0,
-      "py-4": depth === 1
+      "py-4": depth === 1,
+      "ps-8": isChild
     })
   }, handleItemKeyDown = (event) => {
     (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onTreeItemClick == null || onTreeItemClick(node.id));
   }, handleItemToggleKeyDown = (event) => {
     (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), event.stopPropagation(), onToggleNode == null || onToggleNode(node.id));
-  }, spaceGestion = () => isDragging ? isChild ? depth === 1 ? `${indentationWidth * depth}px` : "0px" : `${indentationWidth * depth}px` : null;
+  }, spaceGestion = () => isDragging ? isChild ? depth === 1 ? `${indentationWidth * depth}px` : "0px" : `${indentationWidth * depth}px` : isChild ? "20px" : null;
   return /* @__PURE__ */ jsx("li", { ref: setNodeRef, id: `treeitem-${node.id}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded, style: {
     ...style,
     marginLeft: spaceGestion()
-  }, ...listeners, children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: treeItemClasses.action, children: [
-      /* @__PURE__ */ jsx("div", { className: treeItemClasses.arrow, tabIndex: 0, role: "button", onClick: () => onToggleNode == null ? void 0 : onToggleNode(node.id), onKeyDown: handleItemToggleKeyDown, "aria-label": t("foldUnfold"), children: /* @__PURE__ */ jsx(SvgIconRafterRight, { width: 16, style: {
-        transform: expanded ? "rotate(90deg)" : ""
-      } }) }),
-      node.children && showIcon ? /* @__PURE__ */ jsx(SvgIconFolder, { title: "folder", width: 20, height: 20 }) : null,
-      /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "button", className: treeItemClasses.button, onClick: () => onTreeItemClick(node.id), onKeyDown: handleItemKeyDown, children: renderNode ? renderNode({
-        node,
-        hasChildren: Array.isArray(node.children) && !!node.children.length,
-        isChild
-      }) : /* @__PURE__ */ jsx("div", { className: "text-truncate", children: node.name }) })
-    ] }),
-    expanded && node.children && !!node.children.length && /* @__PURE__ */ jsx("ul", { role: "group", children: (_a = node.children) == null ? void 0 : _a.map((node2) => /* @__PURE__ */ jsx(TreeNode, { ref, node: node2, showIcon, selectedNodeId, expandedNodes, onTreeItemClick, onToggleNode, renderNode, indentationWidth, depth: node2.id === (projected == null ? void 0 : projected.activeId) && projected ? projected.depth : 0, isChild: !0, projected }, node2.id)) })
-  ] }) }, node.id);
+  }, ...listeners, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: treeItemClasses.action, children: [
+    node.haveChilds && /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "button", onClick: () => onToggleNode == null ? void 0 : onToggleNode(node.id), onKeyDown: handleItemToggleKeyDown, "aria-label": t("foldUnfold"), children: /* @__PURE__ */ jsx(SvgIconRafterRight, { width: 16, style: {
+      transform: expanded ? "rotate(90deg)" : ""
+    } }) }),
+    node.children && showIcon ? /* @__PURE__ */ jsx(SvgIconFolder, { title: "folder", width: 20, height: 20 }) : null,
+    /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "button", className: treeItemClasses.button, onClick: () => onTreeItemClick(node.id), onKeyDown: handleItemKeyDown, children: renderNode ? renderNode({
+      node,
+      hasChildren: Array.isArray(node.children) && !!node.children.length,
+      isChild
+    }) : /* @__PURE__ */ jsx("div", { className: "text-truncate", children: node.name }) })
+  ] }) }) }, node.id);
 }), DragOverlayItem = /* @__PURE__ */ forwardRef(({
   activeItem,
   ...props

package/dist/components/Tree/hooks/useTree.d.ts

@@ -27,5 +27,5 @@ export declare const useTree: ({ data, externalSelectedNodeId, draggedNode, shou
     draggedNodeId: string | undefined;
     handleItemClick: (nodeId: string) => void;
     handleFoldUnfold: (nodeId: string) => void;
-    collapseAllNodes: () => void;
+    handleCollapseNode: (nodeId: string) => void;
 };

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

@@ -77,9 +77,7 @@ const useTree = ({
     draggedNodeId,
     handleItemClick,
     handleFoldUnfold,
-    collapseAllNodes: () => {
-      setExpandedNodes(/* @__PURE__ */ new Set());
-    }
+    handleCollapseNode
   };
 };
 export {

package/dist/components/Tree/hooks/useTreeSortable.d.ts

@@ -1,9 +1,9 @@
 import { Announcements, DragEndEvent, DragMoveEvent, DragOverEvent, DragStartEvent, MeasuringStrategy, Modifier, UniqueIdentifier } from '@dnd-kit/core';
 import { FlattenedItem, TreeItem, UpdateTreeData } from '../types';
-export declare const useTreeSortable: ({ nodes, onSortable, collapseAllNodes, }: {
+export declare const useTreeSortable: ({ nodes, onSortable, handleCollapseNode, }: {
     nodes: TreeItem[];
     onSortable: (updateArray: UpdateTreeData[]) => void;
-    collapseAllNodes: () => void;
+    handleCollapseNode: (nodeId: string) => void;
 }) => {
     handleDragStart: (event: DragStartEvent) => void;
     handleDragMove: ({ delta }: DragMoveEvent) => void;

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

@@ -6,7 +6,7 @@ import { flattenTree, getProjection, getActiveAndOverNodes, determineNewParentId
 const useTreeSortable = ({
   nodes,
   onSortable,
-  collapseAllNodes
+  handleCollapseNode
 }) => {
   const [items, setItems] = useState(() => nodes), [activeId, setActiveId] = useState(null), [overId, setOverId] = useState(null), [offsetLeft, setOffsetLeft] = useState(0), [currentPosition, setCurrentPosition] = useState(null);
   useEffect(() => {
@@ -28,7 +28,7 @@ const useTreeSortable = ({
     } = event, {
       activeNode
     } = getActiveAndOverNodes(flattenedTree, active.id);
-    activeNode.parentId || collapseAllNodes(), setActiveId(active.id), setOverId(active.id);
+    activeNode.parentId || handleCollapseNode(activeNode.id), setActiveId(active.id), setOverId(active.id);
     const activeItem2 = flattenedTree.find(({
       id
     }) => id === activeId);

package/dist/components/Tree/types/index.d.ts

@@ -159,6 +159,10 @@ export interface FlattenedItem extends TreeItem {
     parentId: string | null;
     depth: number;
 }
+export interface FlattendedNodes extends TreeItem {
+    expandNode: boolean;
+    parentExpanded: boolean;
+}
 export interface TreeViewHandlers {
     unselect: () => void;
     select: (nodeId: string) => void;

package/dist/components/Tree/utilities/tree-sortable.d.ts

@@ -1,5 +1,5 @@
 import { Active, Over, UniqueIdentifier } from '@dnd-kit/core';
-import { FlattenedItem, Projected, TreeItem } from '../types';
+import { FlattendedNodes, FlattenedItem, Projected, TreeItem } from '../types';
 export declare function getDragDepth(offset: number, indentationWidth: number): number;
 export declare function determineNewParentId(active: Active, over: Over | null, activeNode: FlattenedItem, overNode: FlattenedItem | null, projected: Projected): string | null | undefined;
 export declare function getActiveAndOverNodes(tree: FlattenedItem[], activeId: UniqueIdentifier, overId?: UniqueIdentifier | undefined): {
@@ -10,6 +10,7 @@ export declare function getActiveAndOverNodes(tree: FlattenedItem[], activeId: U
 };
 export declare function getIndicesToUpdate(activeNode: FlattenedItem, activeNodeIndex: number, flattenedTree: FlattenedItem[], projected: Projected): number[];
 export declare function flattenTree(tree: TreeItem[], parentId: string | null, depth?: number): FlattenedItem[];
+export declare function flattenNodes(nodes: TreeItem[], expandedNodes: Set<string>): FlattendedNodes[];
 export declare function updateParentIds(flattenedTree: any[], indices: number[], newParentId: string | null | undefined): void;
 export declare function findItemIndexInTree(tree: any[], itemId: string): number | null;
 export declare function generateUpdateData(updatedFlattenedTree: FlattenedItem[], tree: TreeItem[]): {

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

@@ -43,6 +43,21 @@ function flattenTree(tree, parentId, depth = 0) {
     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] = {
@@ -134,6 +149,7 @@ export {
   buildTree,
   determineNewParentId,
   findItemIndexInTree,
+  flattenNodes,
   flattenTree,
   generateUpdateData,
   getActiveAndOverNodes,

package/dist/index.js

@@ -79,7 +79,7 @@ import { default as default70 } from "./components/TextArea/TextArea.js";
 import { Toolbar } from "./components/Toolbar/Toolbar.js";
 import { default as default71 } from "./components/Tooltip/Tooltip.js";
 import { useTreeSortable } from "./components/Tree/hooks/useTreeSortable.js";
-import { buildTree, determineNewParentId, findItemIndexInTree, flattenTree, generateUpdateData, getActiveAndOverNodes, getDragDepth, getIndicesToUpdate, getProjection, updateParentIds } from "./components/Tree/utilities/tree-sortable.js";
+import { buildTree, determineNewParentId, findItemIndexInTree, flattenNodes, flattenTree, generateUpdateData, getActiveAndOverNodes, getDragDepth, getIndicesToUpdate, getProjection, updateParentIds } from "./components/Tree/utilities/tree-sortable.js";
 import { useTreeView } from "./components/TreeView/hooks/useTreeView.js";
 import { TreeNode } from "./components/TreeView/TreeNode.js";
 import { TreeNodeFolderWrapper, addNode, arrayUnique, deleteNode, findNodeById, findParentNode, findPathById, findTreeNode, getAncestors, hasChildren, modifyNode, moveNode, updateNode, wrapTreeNode } from "./components/TreeView/utilities/treeview.js";
@@ -173,6 +173,7 @@ export {
   findParentNode,
   findPathById,
   findTreeNode,
+  flattenNodes,
   flattenTree,
   generateUpdateData,
   getActiveAndOverNodes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.0.0-develop-rc.26",
+  "version": "2.0.0-develop-pedago.0",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -119,9 +119,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/utilities": "2.0.0-develop-rc.26",
-    "@edifice.io/tiptap-extensions": "2.0.0-develop-rc.26",
-    "@edifice.io/bootstrap": "2.0.0-develop-rc.26"
+    "@edifice.io/bootstrap": "2.0.0-develop-pedago.0",
+    "@edifice.io/tiptap-extensions": "2.0.0-develop-pedago.0",
+    "@edifice.io/utilities": "2.0.0-develop-pedago.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -147,7 +147,7 @@
     "typescript-eslint": "^8.8.1",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
-    "@edifice.io/client": "2.0.0-develop-rc.26"
+    "@edifice.io/client": "2.0.0-develop-pedago.0"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",