@edifice.io/react 2.2.3-develop-b2school.20250418102516 → 2.2.3-develop-b2school.20250418160001

package/dist/components/Button/Button.d.ts

@@ -25,7 +25,7 @@ export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
     /**
      * Does it has a text ?
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Display Icon Component to the left
      */

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

@@ -19,7 +19,6 @@ const Tree = ({
   const {
     selectedNodeId,
     expandedNodes,
-    siblingsNodes,
     handleItemClick,
     handleFoldUnfold
   } = useTree({
@@ -31,7 +30,7 @@ const Tree = ({
     onTreeItemFold,
     onTreeItemUnfold
   });
-  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: Array.isArray(nodes) ? nodes.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, showIcon, selectedNodeId, expandedNodes, siblingsNodes, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, renderNode }, node.id)) : /* @__PURE__ */ jsx(TreeNode, { node: nodes, selectedNodeId, expandedNodes, siblingsNodes, showIcon, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: Array.isArray(nodes) ? nodes.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, showIcon, selectedNodeId, expandedNodes, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, renderNode }, node.id)) : /* @__PURE__ */ jsx(TreeNode, { node: nodes, selectedNodeId, expandedNodes, showIcon, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold }) }) });
 }, TreeNode = /* @__PURE__ */ forwardRef(({
   node,
   selectedNodeId,

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

@@ -23,7 +23,6 @@ export declare const useTree: ({ data, externalSelectedNodeId, draggedNode, shou
 }) => {
     selectedNodeId: string | null | undefined;
     expandedNodes: Set<string>;
-    siblingsNodes: import('react').MutableRefObject<Set<string>>;
     draggedNodeId: string | undefined;
     handleItemClick: (nodeId: string) => void;
     handleFoldUnfold: (nodeId: string) => void;

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { findNodeById, findPathById } from "../utilities/tree.js";
 const useTree = ({
   data,
@@ -9,33 +9,11 @@ const useTree = ({
   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 expandAllNodes = (shouldExpandAllNodes2) => {
+  const [internalSelectedNodeId, setInternalSelectedNodeId] = useState(void 0), [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set()), [draggedNodeId, setDraggedNodeId] = useState(void 0), selectedNodeId = internalSelectedNodeId ?? externalSelectedNodeId, expandAllNodes = (shouldExpandAllNodes2) => {
     const initExpandedNodes = new Set("");
     data && Array.isArray(data) && shouldExpandAllNodes2 && (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]), useEffect(() => {
     shouldExpandAllNodes && expandAllNodes(shouldExpandAllNodes);
@@ -73,7 +51,6 @@ const useTree = ({
   return {
     selectedNodeId,
     expandedNodes,
-    siblingsNodes,
     draggedNodeId,
     handleItemClick,
     handleFoldUnfold,

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

@@ -115,10 +115,6 @@ export interface TreeNodeProps extends ComponentPropsWithRef<'li'>, SharedTreePr
      * Nodes expanded (opened)
      */
     expandedNodes: Set<string>;
-    /**
-     * Siblings nodes
-     */
-    siblingsNodes?: React.MutableRefObject<Set<string>>;
     /**
      * Node is a child
      */

package/dist/hooks/useWorkspaceFolders/useWorkspaceFolders.d.ts

@@ -24,5 +24,10 @@ declare function useWorkspaceFolders(): {
     })[];
     setSearchQuery: import('react').Dispatch<import('react').SetStateAction<string>>;
     user: IUserInfo | undefined;
+    createFolderMutation: import('../../node_modules/@tanstack/react-query').UseMutationResult<any, Error, {
+        folderName: string;
+        folderParentId?: string;
+    }, unknown>;
+    isLoading: boolean;
 };
 export default useWorkspaceFolders;

package/dist/hooks/useWorkspaceFolders/useWorkspaceFolders.js

@@ -1,5 +1,5 @@
 import { odeServices } from "@edifice.io/client";
-import { useQuery } from "@tanstack/react-query";
+import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useEdificeClient } from "../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
@@ -9,16 +9,28 @@ function useWorkspaceFolders() {
     t
   } = useTranslation(), {
     user
-  } = useEdificeClient(), {
-    data: ownerWorkspaceData = []
+  } = useEdificeClient(), queryClient = useQueryClient(), {
+    data: ownerWorkspaceData = [],
+    isLoading: isLoadingOwner
   } = useQuery({
-    queryKey: ["workspace-owner-folders"],
+    queryKey: ["workspace", "folders", "owner"],
     queryFn: () => odeServices.workspace().listOwnerFolders(!0)
   }), {
-    data: sharedWorkspaceData = []
+    data: sharedWorkspaceData = [],
+    isLoading: isLoadingShared
   } = useQuery({
-    queryKey: ["workspace-shared-folders"],
+    queryKey: ["workspace", "folders", "shared"],
     queryFn: () => odeServices.workspace().listSharedFolders(!0)
+  }), createFolderMutation = useMutation({
+    mutationFn: ({
+      folderName,
+      folderParentId
+    }) => odeServices.workspace().createFolder(folderName, folderParentId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["workspace", "folders"]
+      });
+    }
   }), [searchQuery, setSearchQuery] = useState("");
   return {
     folderTree: useMemo(() => {
@@ -37,7 +49,9 @@ function useWorkspaceFolders() {
       return buildWorkspaceTree(searchQuery ? filterTree(ownerFolders, searchQuery) : ownerFolders, searchQuery ? filterTree(sharedFolders, searchQuery) : sharedFolders);
     }, [ownerWorkspaceData, sharedWorkspaceData, searchQuery, user]),
     setSearchQuery,
-    user
+    user,
+    createFolderMutation,
+    isLoading: isLoadingOwner || isLoadingShared
   };
 }
 const buildTree = (workspaceData, user) => {
@@ -48,7 +62,8 @@ const buildTree = (workspaceData, user) => {
       id: item._id,
       name: item.name,
       children: [],
-      canCopyFileInto
+      canCopyFileInto,
+      expandedNodes: ["0576e0dd-129b-4244-b36a-49bda713d273", "50c1b81b-d8b7-4474-9d69-b5e441b31a8c", "a1aac5c0-6bfe-4308-8c43-812378e2d9bf"]
     });
   }), workspaceData.forEach((item) => {
     var _a;

package/dist/modules/multimedia/WorkspaceFolders/WorkspaceFolders.js

@@ -1,9 +1,13 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import useWorkspaceFolders, { WORKSPACE_OWNER_FOLDER_ID, WORKSPACE_SHARED_FOLDER_ID } from "../../../hooks/useWorkspaceFolders/useWorkspaceFolders.js";
+import SvgIconFolderAdd from "../../icons/components/IconFolderAdd.js";
+import NewFolderForm from "./components/NewFolderForm.js";
+import useWorkspaceFolders, { WORKSPACE_SHARED_FOLDER_ID, WORKSPACE_OWNER_FOLDER_ID } from "../../../hooks/useWorkspaceFolders/useWorkspaceFolders.js";
 import SearchBar from "../../../components/SearchBar/SearchBar.js";
+import Loading from "../../../components/Loading/Loading.js";
 import Tree from "../../../components/Tree/components/Tree.js";
+import Button from "../../../components/Button/Button.js";
 function WorkspaceFolders({
   onFolderSelected
 }) {
@@ -11,20 +15,29 @@ function WorkspaceFolders({
     t
   } = useTranslation(), {
     folderTree,
-    setSearchQuery
-  } = useWorkspaceFolders(), [shouldExpandAllNodes, setShouldExpandAllNodes] = useState(!1), [searchValue, setSearchValue] = useState(""), handleSearchChange = (e) => {
+    setSearchQuery,
+    isLoading
+  } = useWorkspaceFolders(), [shouldExpandAllNodes, setShouldExpandAllNodes] = useState(!1), [searchValue, setSearchValue] = useState(""), [selectedFolderId, setSelectedFolderId] = useState(void 0), [showNewFolderForm, setShowNewFolderForm] = useState(!1), handleSearchChange = (e) => {
     setSearchValue(e.target.value);
   }, handleSearchSubmit = () => {
     setSearchQuery(searchValue), setShouldExpandAllNodes(searchValue !== "");
   }, handleFolderSelected = (folderId) => {
-    const selectedFolderId = folderId === WORKSPACE_OWNER_FOLDER_ID ? "" : folderId, canCopyFileInto = folderId != WORKSPACE_SHARED_FOLDER_ID;
-    onFolderSelected(selectedFolderId, canCopyFileInto);
+    const newSelectedFolderId = folderId === WORKSPACE_OWNER_FOLDER_ID ? "" : folderId, canCopyFileInto = folderId != WORKSPACE_SHARED_FOLDER_ID;
+    onFolderSelected(newSelectedFolderId, canCopyFileInto), setSelectedFolderId(newSelectedFolderId);
+  }, handleNewFolderClick = () => {
+    setShowNewFolderForm(!0);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-12", children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-12", children: [
     /* @__PURE__ */ jsx("p", { children: t("attachments.add.to.folder.modal.description") }),
     /* @__PURE__ */ jsx(SearchBar, { onChange: handleSearchChange, isVariant: !1, placeholder: t("search"), onClick: handleSearchSubmit }),
-    /* @__PURE__ */ jsx("div", { className: "border border-gray-400 rounded", children: /* @__PURE__ */ jsx("div", { className: "p-12", children: /* @__PURE__ */ jsx(Tree, { nodes: folderTree, onTreeItemClick: handleFolderSelected, shouldExpandAllNodes }) }) })
-  ] });
+    /* @__PURE__ */ jsxs("div", { className: "border border-gray-400 rounded", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-12", children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, className: "justify-content-center" }) : /* @__PURE__ */ jsx(Tree, { nodes: folderTree, onTreeItemClick: handleFolderSelected, shouldExpandAllNodes }) }),
+      /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end border-top border-gray-400 px-8 py-4 ", children: [
+        !showNewFolderForm && /* @__PURE__ */ jsx(Button, { color: "primary", variant: "ghost", leftIcon: /* @__PURE__ */ jsx(SvgIconFolderAdd, {}), onClick: handleNewFolderClick, disabled: [WORKSPACE_SHARED_FOLDER_ID, void 0].includes(selectedFolderId), children: t("workspace.folder.create") }),
+        selectedFolderId != null && showNewFolderForm && /* @__PURE__ */ jsx(NewFolderForm, { onClose: () => setShowNewFolderForm(!1), folderParentId: selectedFolderId })
+      ] })
+    ] })
+  ] }) });
 }
 export {
   WorkspaceFolders as default

package/dist/modules/multimedia/WorkspaceFolders/components/NewFolderForm.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    /**
+     * Function called when the modal is closed
+     */
+    onClose: () => void;
+    /**
+     * Parent folder ID where the new folder will be created
+     */
+    folderParentId: string;
+};
+export default function NewFolderForm({ onClose, folderParentId }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/multimedia/WorkspaceFolders/components/NewFolderForm.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconSave from "../../../icons/components/IconSave.js";
+import useWorkspaceFolders from "../../../../hooks/useWorkspaceFolders/useWorkspaceFolders.js";
+import FormControl from "../../../../components/Form/FormControl.js";
+import Button from "../../../../components/Button/Button.js";
+function NewFolderForm({
+  onClose,
+  folderParentId
+}) {
+  const {
+    t
+  } = useTranslation(), refInputName = useRef(null), {
+    createFolderMutation
+  } = useWorkspaceFolders();
+  return useEffect(() => {
+    refInputName.current && refInputName.current.focus();
+  }, []), /* @__PURE__ */ jsx("form", { id: "modalWorkspaceNewFolderForm", onSubmit: async (event) => {
+    var _a;
+    event.preventDefault();
+    const folderName = (_a = refInputName.current) == null ? void 0 : _a.value;
+    folderName && createFolderMutation.mutate({
+      folderName,
+      folderParentId
+    }, {
+      onSuccess: () => {
+        onClose();
+      }
+    });
+  }, children: /* @__PURE__ */ jsxs("div", { className: "d-flex gap-4 flex-row", children: [
+    /* @__PURE__ */ jsx(FormControl, { id: "modalWorkspaceNewFolderForm", isRequired: !0, children: /* @__PURE__ */ jsx(FormControl.Input, { ref: refInputName, size: "md", type: "text", placeholder: t("folder.new.name.label") }) }),
+    /* @__PURE__ */ jsx(Button, { type: "submit", color: "primary", variant: "ghost", isLoading: createFolderMutation.isPending, leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}) })
+  ] }) });
+}
+export {
+  NewFolderForm as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.2.3-develop-b2school.20250418102516",
+  "version": "2.2.3-develop-b2school.20250418160001",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -118,9 +118,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.2.3-develop-b2school.20250418102516",
-    "@edifice.io/tiptap-extensions": "2.2.3-develop-b2school.20250418102516",
-    "@edifice.io/utilities": "2.2.3-develop-b2school.20250418102516"
+    "@edifice.io/bootstrap": "2.2.3-develop-b2school.20250418160001",
+    "@edifice.io/tiptap-extensions": "2.2.3-develop-b2school.20250418160001",
+    "@edifice.io/utilities": "2.2.3-develop-b2school.20250418160001"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -151,8 +151,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.2.3-develop-b2school.20250418102516",
-    "@edifice.io/config": "2.2.3-develop-b2school.20250418102516"
+    "@edifice.io/client": "2.2.3-develop-b2school.20250418160001",
+    "@edifice.io/config": "2.2.3-develop-b2school.20250418160001"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",