@webiny/app-aco 6.0.0-beta.0 → 6.0.0-rc.1

package/components/FolderTree/List/List.js

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Tree } from "@webiny/admin-ui";
+import { useSnackbar } from "@webiny/app-admin";
+import { useGetFolderLevelPermission } from "../../../features/folders/getFolderLevelPermission/index.js";
+import { useListFoldersByParentIds } from "../../../features/folders/listFoldersByParentIds/index.js";
+import { useGetFolderAncestors } from "../../../features/folders/getFolderAncestors/index.js";
+import { useUpdateFolder } from "../../../features/folders/updateFolder/index.js";
+import { Node } from "../Node/index.js";
+import { createInitialOpenList, createTreeData } from "./utils.js";
+import { ROOT_FOLDER } from "../../../constants.js";
+import { FolderProvider } from "../../../contexts/folder.js";
+import { useConfirmMoveFolderDialog } from "../../../dialogs/index.js";
+export const List = ({
+  folders,
+  folderActions,
+  onFolderClick,
+  focusedFolderId,
+  hiddenFolderIds,
+  enableActions,
+  dropConfirmation = false
+}) => {
+  const {
+    listFoldersByParentIds,
+    loading
+  } = useListFoldersByParentIds();
+  const {
+    updateFolder
+  } = useUpdateFolder();
+  const {
+    getFolderLevelPermission: canManageStructure
+  } = useGetFolderLevelPermission("canManageStructure");
+  const {
+    getFolderAncestors
+  } = useGetFolderAncestors();
+  const {
+    showSnackbar
+  } = useSnackbar();
+  const [treeData, setTreeData] = useState([]);
+  const [openFolderIds, setOpenFolderIds] = useState([ROOT_FOLDER]);
+  const {
+    showDialog: showConfirmMoveFolderDialog
+  } = useConfirmMoveFolderDialog();
+  useEffect(() => {
+    setTreeData(createTreeData(folders, focusedFolderId, hiddenFolderIds));
+  }, [folders, focusedFolderId, hiddenFolderIds]);
+  useEffect(() => {
+    setOpenFolderIds(prev => {
+      const expanded = createInitialOpenList(folders, prev, focusedFolderId);
+      return [...new Set([ROOT_FOLDER, ...expanded])];
+    });
+  }, [focusedFolderId, folders, setOpenFolderIds]);
+  const handleChangeOpen = async nodes => {
+    const folderIds = nodes.map(node => node.id);
+    const updatedOpenIds = [...new Set([ROOT_FOLDER, ...folderIds])];
+    setOpenFolderIds(updatedOpenIds);
+    const fetchableIds = folderIds.filter(id => id !== ROOT_FOLDER && id !== "0");
+    await listFoldersByParentIds(fetchableIds);
+  };
+  const handleDrop = async (_, {
+    dragSourceId,
+    dropTargetId
+  }) => {
+    try {
+      const item = folders.find(folder => folder.id === dragSourceId);
+      if (!item) {
+        throw new Error("Folder not found!");
+      }
+      await updateFolder({
+        ...item,
+        parentId: dropTargetId !== ROOT_FOLDER ? dropTargetId : null
+      });
+    } catch (error) {
+      showSnackbar(error.message);
+    }
+  };
+  const onDrop = useCallback(async (newTree, options) => {
+    // Function to execute the drop logic
+    const runDrop = async () => handleDrop(newTree, options);
+
+    // If drop confirmation is enabled, show dialog before proceeding
+    if (dropConfirmation) {
+      const {
+        dragSourceId,
+        dropTargetId
+      } = options;
+      const folder = folders.find(f => f.id === dragSourceId);
+      const targetFolder = folders.find(f => f.id === dropTargetId);
+
+      // Abort if either folder is not found
+      if (!folder || !targetFolder) {
+        return;
+      }
+      showConfirmMoveFolderDialog({
+        folder,
+        targetFolder,
+        onAccept: runDrop
+      });
+    } else {
+      // Otherwise, perform the drop immediately
+      await runDrop();
+    }
+  }, [folders, dropConfirmation, showConfirmMoveFolderDialog]);
+  const sort = useMemo(() => (a, b) => {
+    if (a.id === ROOT_FOLDER || b.id === ROOT_FOLDER) {
+      return 1;
+    }
+    return a.label.localeCompare(b.label, undefined, {
+      numeric: true
+    });
+  }, []);
+  const canDrag = useCallback(node => node.id !== ROOT_FOLDER && canManageStructure(node.id), [canManageStructure]);
+  const canDrop = (_, options) => {
+    const {
+      dragSourceId,
+      dropTargetId
+    } = options;
+    const dropTagetAncestorIds = getFolderAncestors(dropTargetId).map(item => item.id);
+
+    // Prevent dropping a folder into itself or its descendants
+    return !(dragSourceId && dropTagetAncestorIds.includes(dragSourceId));
+  };
+  const nodeRenderer = node => {
+    const folder = folders.find(folder => folder.id === node.id);
+    return /*#__PURE__*/React.createElement(FolderProvider, {
+      folder: folder
+    }, /*#__PURE__*/React.createElement(Node, {
+      enableActions: enableActions,
+      folderActions: folderActions
+    }));
+  };
+  const handleNodeClick = useCallback(node => {
+    onFolderClick(node);
+  }, [onFolderClick]);
+  return /*#__PURE__*/React.createElement(Tree, {
+    nodes: treeData,
+    rootId: "0",
+    defaultOpenNodeIds: openFolderIds,
+    onChangeOpen: handleChangeOpen,
+    onDrop: onDrop,
+    onNodeClick: handleNodeClick,
+    sort: sort,
+    canDrag: canDrag,
+    canDrop: canDrop,
+    renderer: nodeRenderer,
+    defaultLockedOpenNodeIds: [ROOT_FOLDER],
+    loadingNodeIds: loading
+  });
+};
+
+//# sourceMappingURL=List.js.map

package/components/FolderTree/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","Tree","useSnackbar","useGetFolderLevelPermission","useListFoldersByParentIds","useGetFolderAncestors","useUpdateFolder","Node","createInitialOpenList","createTreeData","ROOT_FOLDER","FolderProvider","useConfirmMoveFolderDialog","List","folders","folderActions","onFolderClick","focusedFolderId","hiddenFolderIds","enableActions","dropConfirmation","listFoldersByParentIds","loading","updateFolder","getFolderLevelPermission","canManageStructure","getFolderAncestors","showSnackbar","treeData","setTreeData","openFolderIds","setOpenFolderIds","showDialog","showConfirmMoveFolderDialog","prev","expanded","Set","handleChangeOpen","nodes","folderIds","map","node","id","updatedOpenIds","fetchableIds","filter","handleDrop","_","dragSourceId","dropTargetId","item","find","folder","Error","parentId","error","message","onDrop","newTree","options","runDrop","f","targetFolder","onAccept","sort","a","b","label","localeCompare","undefined","numeric","canDrag","canDrop","dropTagetAncestorIds","includes","nodeRenderer","createElement","handleNodeClick","rootId","defaultOpenNodeIds","onChangeOpen","onNodeClick","renderer","defaultLockedOpenNodeIds","loadingNodeIds"],"sources":["List.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n    Tree,\n    type NodeDto,\n    type TreeProps,\n    type WithDefaultNodeData,\n    type DropOptions\n} from \"@webiny/admin-ui\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport type { FolderDto } from \"~/domain/folder/FolderDto.js\";\nimport { useGetFolderLevelPermission } from \"~/features/folders/getFolderLevelPermission/index.js\";\nimport { useListFoldersByParentIds } from \"~/features/folders/listFoldersByParentIds/index.js\";\nimport { useGetFolderAncestors } from \"~/features/folders/getFolderAncestors/index.js\";\nimport { useUpdateFolder } from \"~/features/folders/updateFolder/index.js\";\nimport { Node } from \"../Node/index.js\";\nimport { createInitialOpenList, createTreeData } from \"./utils.js\";\nimport { ROOT_FOLDER } from \"~/constants.js\";\nimport { FolderProvider } from \"~/contexts/folder.js\";\nimport { useConfirmMoveFolderDialog } from \"~/dialogs/index.js\";\nimport type { FolderActionConfig } from \"~/config/AcoConfig.js\";\n\ninterface ListProps {\n    folders: FolderDto[];\n    folderActions: FolderActionConfig[];\n    dropConfirmation?: boolean;\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n    enableActions?: boolean;\n    onFolderClick: (data: FolderDto) => void;\n}\n\nexport const List = ({\n    folders,\n    folderActions,\n    onFolderClick,\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    dropConfirmation = false\n}: ListProps) => {\n    const { listFoldersByParentIds, loading } = useListFoldersByParentIds();\n    const { updateFolder } = useUpdateFolder();\n    const { getFolderLevelPermission: canManageStructure } =\n        useGetFolderLevelPermission(\"canManageStructure\");\n    const { getFolderAncestors } = useGetFolderAncestors();\n    const { showSnackbar } = useSnackbar();\n\n    const [treeData, setTreeData] = useState<NodeDto<FolderDto>[]>([]);\n    const [openFolderIds, setOpenFolderIds] = useState<string[]>([ROOT_FOLDER]);\n    const { showDialog: showConfirmMoveFolderDialog } = useConfirmMoveFolderDialog();\n\n    useEffect(() => {\n        setTreeData(createTreeData(folders, focusedFolderId, hiddenFolderIds));\n    }, [folders, focusedFolderId, hiddenFolderIds]);\n\n    useEffect(() => {\n        setOpenFolderIds(prev => {\n            const expanded = createInitialOpenList(folders, prev, focusedFolderId);\n            return [...new Set([ROOT_FOLDER, ...expanded])];\n        });\n    }, [focusedFolderId, folders, setOpenFolderIds]);\n\n    const handleChangeOpen: TreeProps[\"onChangeOpen\"] = async nodes => {\n        const folderIds = nodes.map(node => node.id);\n        const updatedOpenIds = [...new Set([ROOT_FOLDER, ...folderIds])];\n        setOpenFolderIds(updatedOpenIds);\n\n        const fetchableIds = folderIds.filter(id => id !== ROOT_FOLDER && id !== \"0\");\n        await listFoldersByParentIds(fetchableIds);\n    };\n\n    const handleDrop: TreeProps[\"onDrop\"] = async (_, { dragSourceId, dropTargetId }) => {\n        try {\n            const item = folders.find(folder => folder.id === dragSourceId);\n            if (!item) {\n                throw new Error(\"Folder not found!\");\n            }\n\n            await updateFolder({\n                ...item,\n                parentId: dropTargetId !== ROOT_FOLDER ? (dropTargetId as string) : null\n            });\n        } catch (error) {\n            showSnackbar(error.message);\n        }\n    };\n\n    const onDrop = useCallback<NonNullable<TreeProps[\"onDrop\"]>>(\n        async (newTree, options: DropOptions) => {\n            // Function to execute the drop logic\n            const runDrop = async () => handleDrop(newTree, options);\n\n            // If drop confirmation is enabled, show dialog before proceeding\n            if (dropConfirmation) {\n                const { dragSourceId, dropTargetId } = options;\n                const folder = folders.find(f => f.id === dragSourceId);\n                const targetFolder = folders.find(f => f.id === dropTargetId);\n\n                // Abort if either folder is not found\n                if (!folder || !targetFolder) {\n                    return;\n                }\n\n                showConfirmMoveFolderDialog({\n                    folder,\n                    targetFolder,\n                    onAccept: runDrop\n                });\n            } else {\n                // Otherwise, perform the drop immediately\n                await runDrop();\n            }\n        },\n        [folders, dropConfirmation, showConfirmMoveFolderDialog]\n    );\n\n    const sort = useMemo(\n        () => (a: NodeDto<any>, b: NodeDto<any>) => {\n            if (a.id === ROOT_FOLDER || b.id === ROOT_FOLDER) {\n                return 1;\n            }\n            return a.label.localeCompare(b.label, undefined, { numeric: true });\n        },\n        []\n    );\n\n    const canDrag: TreeProps<FolderDto>[\"canDrag\"] = useCallback(\n        (node: NodeDto<FolderDto>) => node.id !== ROOT_FOLDER && canManageStructure(node.id),\n        [canManageStructure]\n    );\n\n    const canDrop: TreeProps<FolderDto>[\"canDrop\"] = (_, options: DropOptions<FolderDto>) => {\n        const { dragSourceId, dropTargetId } = options;\n        const dropTagetAncestorIds = getFolderAncestors(dropTargetId).map(item => item.id);\n\n        // Prevent dropping a folder into itself or its descendants\n        return !(dragSourceId && dropTagetAncestorIds.includes(dragSourceId));\n    };\n\n    const nodeRenderer: TreeProps<FolderDto>[\"renderer\"] = node => {\n        const folder = folders.find(folder => folder.id === node.id);\n        return (\n            <FolderProvider folder={folder}>\n                <Node enableActions={enableActions} folderActions={folderActions} />\n            </FolderProvider>\n        );\n    };\n\n    const handleNodeClick = useCallback(\n        (node: WithDefaultNodeData<FolderDto>) => {\n            onFolderClick(node);\n        },\n        [onFolderClick]\n    );\n\n    return (\n        <Tree<FolderDto>\n            nodes={treeData}\n            rootId={\"0\"}\n            defaultOpenNodeIds={openFolderIds}\n            onChangeOpen={handleChangeOpen}\n            onDrop={onDrop}\n            onNodeClick={handleNodeClick}\n            sort={sort}\n            canDrag={canDrag}\n            canDrop={canDrop}\n            renderer={nodeRenderer}\n            defaultLockedOpenNodeIds={[ROOT_FOLDER]}\n            loadingNodeIds={loading}\n        />\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/FolderTree/List/index.d.ts

@@ -1,11 +1 @@
-import React from "react";
-import { FolderItem } from "../../../types";
-interface ListProps {
-    folders: FolderItem[];
-    focusedFolderId?: string;
-    hiddenFolderIds?: string[];
-    enableActions?: boolean;
-    onFolderClick: (data: FolderItem) => void;
-}
-export declare const List: ({ folders, onFolderClick, focusedFolderId, hiddenFolderIds, enableActions }: ListProps) => React.JSX.Element;
-export {};
+export * from "./List.js";

package/components/FolderTree/List/index.js

@@ -1,149 +1,3 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.List = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactDndTreeview = require("@minoru/react-dnd-treeview");
-var _appAdmin = require("@webiny/app-admin");
-var _reactDnd = require("react-dnd");
-var _Node = require("../Node");
-var _NodePreview = require("../NodePreview");
-var _Placeholder = require("../Placeholder");
-var _utils = require("./utils");
-var _hooks = require("../../../hooks");
-var _constants = require("../../../constants");
-var _folder = require("../../../contexts/folder");
-var List = exports.List = function List(_ref) {
-  var folders = _ref.folders,
-    onFolderClick = _ref.onFolderClick,
-    focusedFolderId = _ref.focusedFolderId,
-    hiddenFolderIds = _ref.hiddenFolderIds,
-    enableActions = _ref.enableActions;
-  var _useFolders = (0, _hooks.useFolders)(),
-    updateFolder = _useFolders.updateFolder,
-    flp = _useFolders.folderLevelPermissions;
-  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    treeData = _useState2[0],
-    setTreeData = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    initialOpenList = _useState4[0],
-    setInitialOpenList = _useState4[1];
-  var _useState5 = (0, _react.useState)([_constants.ROOT_FOLDER]),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    openFolderIds = _useState6[0],
-    setOpenFolderIds = _useState6[1];
-  (0, _react.useEffect)(function () {
-    if (folders) {
-      setTreeData((0, _utils.createTreeData)(folders, focusedFolderId, hiddenFolderIds));
-    }
-  }, [folders, focusedFolderId]);
-  (0, _react.useEffect)(function () {
-    if (!folders) {
-      return;
-    }
-    setInitialOpenList((0, _utils.createInitialOpenList)(folders, openFolderIds, focusedFolderId));
-  }, [focusedFolderId]);
-  var handleDrop = async function handleDrop(newTree, _ref2) {
-    var dragSourceId = _ref2.dragSourceId,
-      dropTargetId = _ref2.dropTargetId;
-    try {
-      var item = folders.find(function (folder) {
-        return folder.id === dragSourceId;
-      });
-      if (!item) {
-        throw new Error("Folder not found!");
-      }
-      setTreeData(newTree);
-      await updateFolder((0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-        parentId: dropTargetId !== _constants.ROOT_FOLDER ? dropTargetId : null
-      }), {
-        refetchFoldersList: true
-      });
-    } catch (error) {
-      return showSnackbar(error.message);
-    }
-  };
-  var sort = (0, _react.useMemo)(function () {
-    return function (a, b) {
-      if (a.id === _constants.ROOT_FOLDER || b.id === _constants.ROOT_FOLDER) {
-        return 1;
-      }
-      return a.text.localeCompare(b.text, undefined, {
-        numeric: true
-      });
-    };
-  }, []);
-  var handleChangeOpen = function handleChangeOpen(folderIds) {
-    setOpenFolderIds([_constants.ROOT_FOLDER].concat((0, _toConsumableArray2.default)(folderIds)));
-  };
-  var _canDrag = (0, _react.useCallback)(function (folderId) {
-    var isRootFolder = folderId === _constants.ROOT_FOLDER;
-    return !isRootFolder && flp.canManageStructure(folderId);
-  }, [flp.canManageStructure]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
-    backend: _reactDndTreeview.MultiBackend,
-    options: (0, _reactDndTreeview.getBackendOptions)(),
-    context: window
-  }, /*#__PURE__*/_react.default.createElement(_reactDndTreeview.Tree, {
-    tree: treeData,
-    rootId: "0",
-    onDrop: handleDrop,
-    onChangeOpen: function onChangeOpen(ids) {
-      return handleChangeOpen(ids);
-    },
-    sort: sort,
-    canDrag: function canDrag(item) {
-      return _canDrag(item.id);
-    },
-    render: function render(node, _ref3) {
-      var depth = _ref3.depth,
-        isOpen = _ref3.isOpen,
-        onToggle = _ref3.onToggle;
-      var folder = folders.find(function (folder) {
-        return folder.id === node.id;
-      });
-      return /*#__PURE__*/_react.default.createElement(_folder.FolderProvider, {
-        folder: folder
-      }, /*#__PURE__*/_react.default.createElement(_Node.Node, {
-        node: node,
-        depth: depth,
-        isOpen: isOpen,
-        enableActions: enableActions,
-        onToggle: onToggle,
-        onClick: function onClick(data) {
-          return onFolderClick(data);
-        }
-      }));
-    },
-    dragPreviewRender: function dragPreviewRender(monitorProps) {
-      return /*#__PURE__*/_react.default.createElement(_NodePreview.NodePreview, {
-        monitorProps: monitorProps
-      });
-    },
-    classes: {
-      dropTarget: "dropTarget",
-      draggingSource: "draggingSource",
-      placeholder: "placeholderContainer"
-    },
-    initialOpen: initialOpenList,
-    placeholderRender: function placeholderRender(_, _ref4) {
-      var depth = _ref4.depth;
-      return /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, {
-        depth: depth
-      });
-    }
-  })));
-};
+export * from "./List.js";
 
 //# sourceMappingURL=index.js.map

package/components/FolderTree/List/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactDndTreeview","_appAdmin","_reactDnd","_Node","_NodePreview","_Placeholder","_utils","_hooks","_constants","_folder","List","exports","_ref","folders","onFolderClick","focusedFolderId","hiddenFolderIds","enableActions","_useFolders","useFolders","updateFolder","flp","folderLevelPermissions","_useSnackbar","useSnackbar","showSnackbar","_useState","useState","_useState2","_slicedToArray2","default","treeData","setTreeData","_useState3","_useState4","initialOpenList","setInitialOpenList","_useState5","ROOT_FOLDER","_useState6","openFolderIds","setOpenFolderIds","useEffect","createTreeData","createInitialOpenList","handleDrop","newTree","_ref2","dragSourceId","dropTargetId","item","find","folder","id","Error","_objectSpread2","parentId","refetchFoldersList","error","message","sort","useMemo","a","b","text","localeCompare","undefined","numeric","handleChangeOpen","folderIds","concat","_toConsumableArray2","canDrag","useCallback","folderId","isRootFolder","canManageStructure","createElement","Fragment","DndProvider","backend","MultiBackend","options","getBackendOptions","context","window","Tree","tree","rootId","onDrop","onChangeOpen","ids","render","node","_ref3","depth","isOpen","onToggle","FolderProvider","Node","onClick","data","dragPreviewRender","monitorProps","NodePreview","classes","dropTarget","draggingSource","placeholder","initialOpen","placeholderRender","_","_ref4","Placeholder"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n    DropOptions,\n    getBackendOptions,\n    InitialOpen,\n    MultiBackend,\n    NodeModel,\n    Tree\n} from \"@minoru/react-dnd-treeview\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { DndProvider } from \"react-dnd\";\nimport { Node } from \"../Node\";\nimport { NodePreview } from \"../NodePreview\";\nimport { Placeholder } from \"../Placeholder\";\nimport { createInitialOpenList, createTreeData } from \"./utils\";\nimport { useFolders } from \"~/hooks\";\nimport { ROOT_FOLDER } from \"~/constants\";\nimport { DndFolderItemData, FolderItem } from \"~/types\";\nimport { FolderProvider } from \"~/contexts/folder\";\n\ninterface ListProps {\n    folders: FolderItem[];\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n    enableActions?: boolean;\n    onFolderClick: (data: FolderItem) => void;\n}\n\nexport const List = ({\n    folders,\n    onFolderClick,\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions\n}: ListProps) => {\n    const { updateFolder, folderLevelPermissions: flp } = useFolders();\n    const { showSnackbar } = useSnackbar();\n    const [treeData, setTreeData] = useState<NodeModel<DndFolderItemData>[]>([]);\n    const [initialOpenList, setInitialOpenList] = useState<undefined | InitialOpen>();\n    const [openFolderIds, setOpenFolderIds] = useState<string[]>([ROOT_FOLDER]);\n\n    useEffect(() => {\n        if (folders) {\n            setTreeData(createTreeData(folders, focusedFolderId, hiddenFolderIds));\n        }\n    }, [folders, focusedFolderId]);\n\n    useEffect(() => {\n        if (!folders) {\n            return;\n        }\n        setInitialOpenList(createInitialOpenList(folders, openFolderIds, focusedFolderId));\n    }, [focusedFolderId]);\n\n    const handleDrop = async (\n        newTree: NodeModel<DndFolderItemData>[],\n        { dragSourceId, dropTargetId }: DropOptions\n    ) => {\n        try {\n            const item = folders.find(folder => folder.id === dragSourceId);\n\n            if (!item) {\n                throw new Error(\"Folder not found!\");\n            }\n\n            setTreeData(newTree);\n\n            await updateFolder(\n                {\n                    ...item,\n                    parentId: dropTargetId !== ROOT_FOLDER ? (dropTargetId as string) : null\n                },\n                { refetchFoldersList: true }\n            );\n        } catch (error) {\n            return showSnackbar(error.message);\n        }\n    };\n\n    const sort = useMemo(\n        () => (a: NodeModel<DndFolderItemData>, b: NodeModel<DndFolderItemData>) => {\n            if (a.id === ROOT_FOLDER || b.id === ROOT_FOLDER) {\n                return 1;\n            }\n            return a.text.localeCompare(b.text, undefined, { numeric: true });\n        },\n        []\n    );\n\n    const handleChangeOpen = (folderIds: string[]) => {\n        setOpenFolderIds([ROOT_FOLDER, ...folderIds]);\n    };\n\n    const canDrag = useCallback(\n        (folderId: string) => {\n            const isRootFolder = folderId === ROOT_FOLDER;\n            return !isRootFolder && flp.canManageStructure(folderId);\n        },\n        [flp.canManageStructure]\n    );\n\n    return (\n        <>\n            <DndProvider backend={MultiBackend} options={getBackendOptions()} context={window}>\n                <Tree\n                    tree={treeData}\n                    rootId={\"0\"}\n                    onDrop={handleDrop}\n                    onChangeOpen={ids => handleChangeOpen(ids as string[])}\n                    sort={sort}\n                    canDrag={item => canDrag(item!.id as string)}\n                    render={(node, { depth, isOpen, onToggle }) => {\n                        const folder = folders.find(folder => folder.id === node.id);\n\n                        return (\n                            <FolderProvider folder={folder}>\n                                <Node\n                                    node={node}\n                                    depth={depth}\n                                    isOpen={isOpen}\n                                    enableActions={enableActions}\n                                    onToggle={onToggle}\n                                    onClick={data => onFolderClick(data)}\n                                />\n                            </FolderProvider>\n                        );\n                    }}\n                    dragPreviewRender={monitorProps => <NodePreview monitorProps={monitorProps} />}\n                    classes={{\n                        dropTarget: \"dropTarget\",\n                        draggingSource: \"draggingSource\",\n                        placeholder: \"placeholderContainer\"\n                    }}\n                    initialOpen={initialOpenList}\n                    placeholderRender={(_, { depth }) => <Placeholder depth={depth} />}\n                />\n            </DndProvider>\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./List.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/FolderTree/List/utils.d.ts

@@ -1,21 +1,21 @@
-import { InitialOpen, NodeModel } from "@minoru/react-dnd-treeview";
-import { DndFolderItemData, FolderItem } from "../../../types";
+import type { NodeDto } from "@webiny/admin-ui";
+import type { FolderDto } from "../../../domain/folder/FolderDto.js";
 /**
- * Transform an array of folders returned by useFolders hook into an array of elements for the tree component.
+ * Transform an array of folders returned by folders cache into an array of elements for the tree component.
  *
- * @param folders list of folders returned by useFolders hook.
+ * @param folders list of folders returned by folders cache.
  * @param focusedNodeId id of the current folder selected/focused.
  * @param hiddenFolderIds list ids of the folder you don't want to show within the list.
  * @return array of elements to render the tree component.
  */
-export declare const createTreeData: (folders?: FolderItem[], focusedNodeId?: string, hiddenFolderIds?: string[]) => NodeModel<DndFolderItemData>[];
+export declare const createTreeData: (folders?: FolderDto[], focusedNodeId?: string, hiddenFolderIds?: string[]) => NodeDto<FolderDto>[];
 /**
  * Return an array of ids of open folders, based on the current focused folder id, its parent folders and the folders
  * opened by user interaction.
  *
- * @param folders list of folders returned by useFolders hook.
+ * @param folders list of folders returned by folders cache.
  * @param openIds list of open folders ids.
  * @param focusedId id of the current folder selected/focused.
  * @return array of ids of open folders.
  */
-export declare const createInitialOpenList: (folders?: FolderItem[], openIds?: string[], focusedId?: string) => InitialOpen | undefined;
+export declare const createInitialOpenList: (folders?: FolderDto[], openIds?: string[], focusedId?: string) => string[];

package/components/FolderTree/List/utils.js

@@ -1,86 +1,69 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createTreeData = exports.createInitialOpenList = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _constants = require("../../../constants");
+import { ROOT_FOLDER } from "../../../constants.js";
 /**
- * Transform an array of folders returned by useFolders hook into an array of elements for the tree component.
+ * Transform an array of folders returned by folders cache into an array of elements for the tree component.
  *
- * @param folders list of folders returned by useFolders hook.
+ * @param folders list of folders returned by folders cache.
  * @param focusedNodeId id of the current folder selected/focused.
  * @param hiddenFolderIds list ids of the folder you don't want to show within the list.
  * @return array of elements to render the tree component.
  */
-var createTreeData = exports.createTreeData = function createTreeData() {
-  var folders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var focusedNodeId = arguments.length > 1 ? arguments[1] : undefined;
-  var hiddenFolderIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return folders.map(function (item) {
-    var id = item.id,
-      parentId = item.parentId,
-      title = item.title;
+export const createTreeData = (folders = [], focusedNodeId, hiddenFolderIds = []) => {
+  return folders.map(item => {
+    const {
+      id,
+      parentId,
+      title
+    } = item;
     return {
-      id: id,
+      id,
       // toLowerCase() fixes a bug introduced by 5.36.0: accidentally we stored "ROOT" as parentId, instead of null
-      parent: parentId?.toLowerCase() || _constants.ROOT_FOLDER,
-      text: title,
+      parentId: parentId?.toLowerCase() || ROOT_FOLDER,
+      label: title,
       droppable: true,
-      data: {
-        isFocused: focusedNodeId === id
-      }
+      active: focusedNodeId === id
     };
-  }).filter(function (item) {
-    return !hiddenFolderIds.includes(item.id);
-  });
+  }).filter(item => !hiddenFolderIds.includes(item.id));
 };
 
 /**
  * Return an array of ids of open folders, based on the current focused folder id, its parent folders and the folders
  * opened by user interaction.
  *
- * @param folders list of folders returned by useFolders hook.
+ * @param folders list of folders returned by folders cache.
  * @param openIds list of open folders ids.
  * @param focusedId id of the current folder selected/focused.
  * @return array of ids of open folders.
  */
-var createInitialOpenList = exports.createInitialOpenList = function createInitialOpenList() {
-  var folders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var openIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var focusedId = arguments.length > 2 ? arguments[2] : undefined;
-  // In case of no focused folder, return the current open folders
+export const createInitialOpenList = (folders = [], openIds = [], focusedId) => {
+  //  There is always a root folder, opened by default
   if (!focusedId) {
     return openIds;
   }
 
-  // Create a Map with folders, using folderId as key
-  var folderMap = new Map();
-  folders.forEach(function (folder) {
-    return folderMap.set(folder.id, folder);
-  });
+  // Create a map for quick folder lookup by id
+  const folderMap = new Map(folders.map(folder => [folder.id, folder]));
+  // Store the chain of folder ids from the focused folder up to the root
+  const result = [];
+  let currentId = focusedId;
 
-  // Recursive function that drill up the folderMap and includes the folderId above a given folder (identified by folderId)
-  var findParents = function findParents(acc, folderId) {
-    var folder = folderMap.get(folderId);
-    if (!folder || !folder.parentId || acc.includes(folder.parentId)) {
-      return acc;
+  // Traverse up the folder tree, collecting parent ids
+  while (currentId) {
+    // Add the current folder id if not already in the result
+    if (!result.includes(currentId)) {
+      result.push(currentId);
     }
-    acc.push(folder.parentId);
-    return findParents(acc, folder.parentId);
-  };
-
-  // In case there is not focused folder or has no parent, return the current open folders
-  var focusedFolder = folderMap.get(focusedId);
-  if (!focusedFolder || !focusedFolder.parentId) {
-    return openIds;
+    // Get the folder object for the current id
+    const folder = folderMap.get(currentId);
+    // Get the parent id of the current folder
+    const parentId = folder?.parentId;
+    // Stop if there is no parent or we've already added this parent
+    if (!parentId || result.includes(parentId)) {
+      break;
+    }
+    // Move up to the parent folder
+    currentId = parentId;
   }
-
-  // Remove duplicates and return
-  var result = findParents([focusedId], focusedId);
-  return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(result), (0, _toConsumableArray2.default)(openIds))));
+  return [...new Set([...result, ...openIds])];
 };
 
 //# sourceMappingURL=utils.js.map

package/components/FolderTree/List/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_constants","require","createTreeData","exports","folders","arguments","length","undefined","focusedNodeId","hiddenFolderIds","map","item","id","parentId","title","parent","toLowerCase","ROOT_FOLDER","text","droppable","data","isFocused","filter","includes","createInitialOpenList","openIds","focusedId","folderMap","Map","forEach","folder","set","findParents","acc","folderId","get","push","focusedFolder","result","_toConsumableArray2","default","Set","concat"],"sources":["utils.ts"],"sourcesContent":["import { InitialOpen, NodeModel } from \"@minoru/react-dnd-treeview\";\nimport { DndFolderItemData, FolderItem } from \"~/types\";\nimport { ROOT_FOLDER } from \"~/constants\";\n\n/**\n * Transform an array of folders returned by useFolders hook into an array of elements for the tree component.\n *\n * @param folders list of folders returned by useFolders hook.\n * @param focusedNodeId id of the current folder selected/focused.\n * @param hiddenFolderIds list ids of the folder you don't want to show within the list.\n * @return array of elements to render the tree component.\n */\nexport const createTreeData = (\n    folders: FolderItem[] = [],\n    focusedNodeId?: string,\n    hiddenFolderIds: string[] = []\n): NodeModel<DndFolderItemData>[] => {\n    return folders\n        .map(item => {\n            const { id, parentId, title } = item;\n\n            return {\n                id,\n                // toLowerCase() fixes a bug introduced by 5.36.0: accidentally we stored \"ROOT\" as parentId, instead of null\n                parent: parentId?.toLowerCase() || ROOT_FOLDER,\n                text: title,\n                droppable: true,\n                data: {\n                    isFocused: focusedNodeId === id\n                }\n            };\n        })\n        .filter(item => !hiddenFolderIds.includes(item.id));\n};\n\n/**\n * Return an array of ids of open folders, based on the current focused folder id, its parent folders and the folders\n * opened by user interaction.\n *\n * @param folders list of folders returned by useFolders hook.\n * @param openIds list of open folders ids.\n * @param focusedId id of the current folder selected/focused.\n * @return array of ids of open folders.\n */\nexport const createInitialOpenList = (\n    folders: FolderItem[] = [],\n    openIds: string[] = [],\n    focusedId?: string\n): InitialOpen | undefined => {\n    // In case of no focused folder, return the current open folders\n    if (!focusedId) {\n        return openIds;\n    }\n\n    // Create a Map with folders, using folderId as key\n    const folderMap = new Map<string, FolderItem>();\n    folders.forEach(folder => folderMap.set(folder.id, folder));\n\n    // Recursive function that drill up the folderMap and includes the folderId above a given folder (identified by folderId)\n    const findParents = (acc: string[], folderId: string): string[] => {\n        const folder = folderMap.get(folderId);\n        if (!folder || !folder.parentId || acc.includes(folder.parentId)) {\n            return acc;\n        }\n\n        acc.push(folder.parentId);\n        return findParents(acc, folder.parentId);\n    };\n\n    // In case there is not focused folder or has no parent, return the current open folders\n    const focusedFolder = folderMap.get(focusedId);\n    if (!focusedFolder || !focusedFolder.parentId) {\n        return openIds;\n    }\n\n    // Remove duplicates and return\n    const result = findParents([focusedId], focusedId);\n    return [...new Set([...result, ...openIds])];\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ROOT_FOLDER","createTreeData","folders","focusedNodeId","hiddenFolderIds","map","item","id","parentId","title","toLowerCase","label","droppable","active","filter","includes","createInitialOpenList","openIds","focusedId","folderMap","Map","folder","result","currentId","push","get","Set"],"sources":["utils.ts"],"sourcesContent":["import { ROOT_FOLDER } from \"~/constants.js\";\nimport type { NodeDto } from \"@webiny/admin-ui\";\nimport type { FolderDto } from \"~/domain/folder/FolderDto.js\";\n\n/**\n * Transform an array of folders returned by folders cache into an array of elements for the tree component.\n *\n * @param folders list of folders returned by folders cache.\n * @param focusedNodeId id of the current folder selected/focused.\n * @param hiddenFolderIds list ids of the folder you don't want to show within the list.\n * @return array of elements to render the tree component.\n */\nexport const createTreeData = (\n    folders: FolderDto[] = [],\n    focusedNodeId?: string,\n    hiddenFolderIds: string[] = []\n): NodeDto<FolderDto>[] => {\n    return folders\n        .map(item => {\n            const { id, parentId, title } = item;\n\n            return {\n                id,\n                // toLowerCase() fixes a bug introduced by 5.36.0: accidentally we stored \"ROOT\" as parentId, instead of null\n                parentId: parentId?.toLowerCase() || ROOT_FOLDER,\n                label: title,\n                droppable: true,\n                active: focusedNodeId === id\n            };\n        })\n        .filter(item => !hiddenFolderIds.includes(item.id));\n};\n\n/**\n * Return an array of ids of open folders, based on the current focused folder id, its parent folders and the folders\n * opened by user interaction.\n *\n * @param folders list of folders returned by folders cache.\n * @param openIds list of open folders ids.\n * @param focusedId id of the current folder selected/focused.\n * @return array of ids of open folders.\n */\nexport const createInitialOpenList = (\n    folders: FolderDto[] = [],\n    openIds: string[] = [],\n    focusedId?: string\n): string[] => {\n    //  There is always a root folder, opened by default\n    if (!focusedId) {\n        return openIds;\n    }\n\n    // Create a map for quick folder lookup by id\n    const folderMap = new Map(folders.map(folder => [folder.id, folder]));\n    // Store the chain of folder ids from the focused folder up to the root\n    const result: string[] = [];\n\n    let currentId: string | undefined = focusedId;\n\n    // Traverse up the folder tree, collecting parent ids\n    while (currentId) {\n        // Add the current folder id if not already in the result\n        if (!result.includes(currentId)) {\n            result.push(currentId);\n        }\n        // Get the folder object for the current id\n        const folder = folderMap.get(currentId) as FolderDto | undefined;\n        // Get the parent id of the current folder\n        const parentId = folder?.parentId;\n        // Stop if there is no parent or we've already added this parent\n        if (!parentId || result.includes(parentId)) {\n            break;\n        }\n        // Move up to the parent folder\n        currentId = parentId;\n    }\n\n    return [...new Set([...result, ...openIds])];\n};\n"],"mappings":"AAAA,SAASA,WAAW;AAIpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGA,CAC1BC,OAAoB,GAAG,EAAE,EACzBC,aAAsB,EACtBC,eAAyB,GAAG,EAAE,KACP;EACvB,OAAOF,OAAO,CACTG,GAAG,CAACC,IAAI,IAAI;IACT,MAAM;MAAEC,EAAE;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAGH,IAAI;IAEpC,OAAO;MACHC,EAAE;MACF;MACAC,QAAQ,EAAEA,QAAQ,EAAEE,WAAW,CAAC,CAAC,IAAIV,WAAW;MAChDW,KAAK,EAAEF,KAAK;MACZG,SAAS,EAAE,IAAI;MACfC,MAAM,EAAEV,aAAa,KAAKI;IAC9B,CAAC;EACL,CAAC,CAAC,CACDO,MAAM,CAACR,IAAI,IAAI,CAACF,eAAe,CAACW,QAAQ,CAACT,IAAI,CAACC,EAAE,CAAC,CAAC;AAC3D,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMS,qBAAqB,GAAGA,CACjCd,OAAoB,GAAG,EAAE,EACzBe,OAAiB,GAAG,EAAE,EACtBC,SAAkB,KACP;EACX;EACA,IAAI,CAACA,SAAS,EAAE;IACZ,OAAOD,OAAO;EAClB;;EAEA;EACA,MAAME,SAAS,GAAG,IAAIC,GAAG,CAAClB,OAAO,CAACG,GAAG,CAACgB,MAAM,IAAI,CAACA,MAAM,CAACd,EAAE,EAAEc,MAAM,CAAC,CAAC,CAAC;EACrE;EACA,MAAMC,MAAgB,GAAG,EAAE;EAE3B,IAAIC,SAA6B,GAAGL,SAAS;;EAE7C;EACA,OAAOK,SAAS,EAAE;IACd;IACA,IAAI,CAACD,MAAM,CAACP,QAAQ,CAACQ,SAAS,CAAC,EAAE;MAC7BD,MAAM,CAACE,IAAI,CAACD,SAAS,CAAC;IAC1B;IACA;IACA,MAAMF,MAAM,GAAGF,SAAS,CAACM,GAAG,CAACF,SAAS,CAA0B;IAChE;IACA,MAAMf,QAAQ,GAAGa,MAAM,EAAEb,QAAQ;IACjC;IACA,IAAI,CAACA,QAAQ,IAAIc,MAAM,CAACP,QAAQ,CAACP,QAAQ,CAAC,EAAE;MACxC;IACJ;IACA;IACAe,SAAS,GAAGf,QAAQ;EACxB;EAEA,OAAO,CAAC,GAAG,IAAIkB,GAAG,CAAC,CAAC,GAAGJ,MAAM,EAAE,GAAGL,OAAO,CAAC,CAAC,CAAC;AAChD,CAAC","ignoreList":[]}

package/components/FolderTree/Loader/Loader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface LoaderProps {
+    count?: number;
+}
+export declare const Loader: ({ count }: LoaderProps) => React.JSX.Element;
+export {};

package/components/FolderTree/Loader/Loader.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+export const Loader = ({
+  count = 4
+}) => {
+  const lines = Array.from({
+    length: count
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "my-md p-xs"
+  }, lines.map((_, index) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: `folder-skeleton-${index}`,
+      className: "mb-xs px-sm py-xs-plus"
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      size: "md"
+    }));
+  }));
+};
+
+//# sourceMappingURL=Loader.js.map

package/components/FolderTree/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Skeleton","Loader","count","lines","Array","from","length","createElement","className","map","_","index","key","type","size"],"sources":["Loader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Skeleton } from \"@webiny/admin-ui\";\n\ninterface LoaderProps {\n    count?: number;\n}\n\nexport const Loader = ({ count = 4 }: LoaderProps) => {\n    const lines = Array.from({ length: count });\n\n    return (\n        <div className={\"my-md p-xs\"}>\n            {lines.map((_, index) => {\n                return (\n                    <div key={`folder-skeleton-${index}`} className={\"mb-xs px-sm py-xs-plus\"}>\n                        <Skeleton type={\"text\"} size={\"md\"} />\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,kBAAkB;AAM3C,OAAO,MAAMC,MAAM,GAAGA,CAAC;EAAEC,KAAK,GAAG;AAAe,CAAC,KAAK;EAClD,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEJ;EAAM,CAAC,CAAC;EAE3C,oBACIH,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAE;EAAa,GACxBL,KAAK,CAACM,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK;IACrB,oBACIZ,KAAA,CAAAQ,aAAA;MAAKK,GAAG,EAAE,mBAAmBD,KAAK,EAAG;MAACH,SAAS,EAAE;IAAyB,gBACtET,KAAA,CAAAQ,aAAA,CAACP,QAAQ;MAACa,IAAI,EAAE,MAAO;MAACC,IAAI,EAAE;IAAK,CAAE,CACpC,CAAC;EAEd,CAAC,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/FolderTree/Loader/index.d.ts

@@ -1,4 +1 @@
-import React from "react";
-export declare const Loader: ({ count }: {
-    count?: number | undefined;
-}) => React.JSX.Element;
+export * from "./Loader.js";

package/components/FolderTree/Loader/index.js

@@ -1,21 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Loader = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Skeleton = require("@webiny/ui/Skeleton");
-var _styled = require("./styled");
-var Loader = exports.Loader = function Loader(_ref) {
-  var count = _ref.count;
-  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
-    count: count ?? 4,
-    inline: true,
-    height: "100%",
-    wrapper: _styled.SkeletonWrapper
-  }));
-};
+export * from "./Loader.js";
 
 //# sourceMappingURL=index.js.map