@webiny/app-aco 0.0.0-unstable.2af142b57e → 0.0.0-unstable.496cf268ac

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

@@ -1 +1 @@
-{"version":3,"names":["List","type","folders","onFolderClick","focusedFolderId","onDragStart","onDragEnd","useFolders","updateFolder","useSnackbar","showSnackbar","useState","treeData","setTreeData","undefined","initialOpenList","setInitialOpenList","openFolderIds","setOpenFolderIds","updateDialogOpen","setUpdateDialogOpen","deleteDialogOpen","setDeleteDialogOpen","selectedFolder","setSelectedFolder","useDeepCompareEffect","createTreeData","useEffect","createInitialOpenList","handleDrop","newTree","dragSourceId","dropTargetId","item","find","folder","id","Error","parentId","ROOT_ID","message","sort","a","b","data","title","localeCompare","numeric","handleChangeOpen","folderIds","MultiBackend","getBackendOptions","node","depth","isOpen","onToggle","monitorProps","root","dropTarget","draggingSource","placeholder"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\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 useDeepCompareEffect from \"use-deep-compare-effect\";\n\nimport { FolderDialogDelete, FolderDialogUpdate } from \"~/components\";\nimport { Node } from \"~/components/Tree/Node\";\nimport { NodePreview } from \"~/components/Tree/NodePreview\";\nimport { Placeholder } from \"~/components/Tree/Placeholder\";\n\nimport { createTreeData, createInitialOpenList } from \"./utils\";\n\nimport { useFolders } from \"~/hooks\";\n\nimport { ROOT_ID } from \"./constants\";\n\nimport { DndItemData, FolderItem } from \"~/types\";\n\ntype Props = {\n    type: string;\n    folders: FolderItem[];\n    focusedFolderId?: string;\n    onFolderClick: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onDragStart: () => void;\n    onDragEnd: () => void;\n};\n\nexport const List = ({\n    type,\n    folders,\n    onFolderClick,\n    focusedFolderId,\n    onDragStart,\n    onDragEnd\n}: Props) => {\n    const { updateFolder } = useFolders(type);\n    const { showSnackbar } = useSnackbar();\n    const [treeData, setTreeData] = useState<NodeModel<DndItemData>[]>([]);\n    const [initialOpenList, setInitialOpenList] = useState<undefined | InitialOpen>(undefined);\n    const [openFolderIds, setOpenFolderIds] = useState<NodeModel<DndItemData>[\"id\"][]>([]);\n    const [updateDialogOpen, setUpdateDialogOpen] = useState<boolean>(false);\n    const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);\n    const [selectedFolder, setSelectedFolder] = useState<FolderItem>();\n\n    useDeepCompareEffect(() => {\n        if (folders) {\n            setTreeData(createTreeData(folders, focusedFolderId));\n        }\n\n        /**\n         *  We are spreading the `folders`:\n         *  in case of folder value update (e.g. name) from any component within the UI does not trigger the tree data update.\n         *  TODO: need investigation.\n         */\n    }, [{ ...folders }, focusedFolderId]);\n\n    useEffect(() => {\n        if (folders) {\n            setInitialOpenList(createInitialOpenList(folders, openFolderIds, focusedFolderId));\n        }\n    }, []);\n\n    const handleDrop = async (\n        newTree: NodeModel<DndItemData>[],\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            await updateFolder({\n                ...item,\n                parentId: dropTargetId !== ROOT_ID ? (dropTargetId as string) : null\n            });\n        } catch (error) {\n            return showSnackbar(error.message);\n        }\n    };\n\n    const sort = (a: NodeModel<DndItemData>, b: NodeModel<DndItemData>) => {\n        return a.data!.title.localeCompare(b.data!.title, undefined, { numeric: true });\n    };\n\n    const handleChangeOpen = (folderIds: NodeModel[\"id\"][]) => {\n        setOpenFolderIds(folderIds);\n    };\n\n    return (\n        <>\n            <DndProvider backend={MultiBackend} options={getBackendOptions()}>\n                <Tree\n                    tree={treeData}\n                    rootId={ROOT_ID}\n                    onDrop={handleDrop}\n                    onChangeOpen={handleChangeOpen}\n                    onDragStart={onDragStart}\n                    onDragEnd={onDragEnd}\n                    sort={sort}\n                    render={(node, { depth, isOpen, onToggle }) => (\n                        <Node\n                            node={node}\n                            depth={depth}\n                            isOpen={isOpen}\n                            onToggle={onToggle}\n                            onClick={data => onFolderClick(data)}\n                            onUpdateFolder={data => {\n                                setSelectedFolder(data);\n                                setUpdateDialogOpen(true);\n                            }}\n                            onDeleteFolder={data => {\n                                setSelectedFolder(data);\n                                setDeleteDialogOpen(true);\n                            }}\n                        />\n                    )}\n                    dragPreviewRender={monitorProps => <NodePreview monitorProps={monitorProps} />}\n                    classes={{\n                        root: \"treeRoot\",\n                        dropTarget: \"dropTarget\",\n                        draggingSource: \"draggingSource\",\n                        placeholder: \"placeholderContainer\"\n                    }}\n                    initialOpen={initialOpenList}\n                    placeholderRender={(node, { depth }) => (\n                        <Placeholder node={node} depth={depth} />\n                    )}\n                />\n            </DndProvider>\n            {selectedFolder && (\n                <>\n                    <FolderDialogUpdate\n                        folder={selectedFolder}\n                        open={updateDialogOpen}\n                        onClose={() => {\n                            setUpdateDialogOpen(false);\n                            setSelectedFolder(undefined);\n                        }}\n                    />\n                    <FolderDialogDelete\n                        folder={selectedFolder}\n                        open={deleteDialogOpen}\n                        onClose={() => {\n                            setDeleteDialogOpen(false);\n                            setSelectedFolder(undefined);\n                        }}\n                    />\n                </>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["List","type","folders","onFolderClick","focusedFolderId","hiddenFolderIds","enableActions","onDragStart","onDragEnd","useFolders","updateFolder","useSnackbar","showSnackbar","useState","treeData","setTreeData","undefined","initialOpenList","setInitialOpenList","openFolderIds","setOpenFolderIds","updateDialogOpen","setUpdateDialogOpen","deleteDialogOpen","setDeleteDialogOpen","selectedFolder","setSelectedFolder","useDeepCompareEffect","createTreeData","useEffect","createInitialOpenList","handleDrop","newTree","dragSourceId","dropTargetId","item","find","folder","id","Error","parentId","ROOT_ID","message","sort","a","b","data","title","localeCompare","numeric","handleChangeOpen","folderIds","MultiBackend","getBackendOptions","node","depth","isOpen","onToggle","monitorProps","root","dropTarget","draggingSource","placeholder"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\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 useDeepCompareEffect from \"use-deep-compare-effect\";\n\nimport { FolderDialogDelete, FolderDialogUpdate } from \"~/components\";\nimport { Node } from \"~/components/Tree/Node\";\nimport { NodePreview } from \"~/components/Tree/NodePreview\";\nimport { Placeholder } from \"~/components/Tree/Placeholder\";\n\nimport { createTreeData, createInitialOpenList } from \"./utils\";\n\nimport { useFolders } from \"~/hooks\";\n\nimport { ROOT_ID } from \"./constants\";\n\nimport { DndItemData, FolderItem } from \"~/types\";\n\ntype Props = {\n    type: string;\n    folders: FolderItem[];\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n    enableActions?: boolean;\n    onFolderClick: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onDragStart: () => void;\n    onDragEnd: () => void;\n};\n\nexport const List = ({\n    type,\n    folders,\n    onFolderClick,\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    onDragStart,\n    onDragEnd\n}: Props) => {\n    const { updateFolder } = useFolders(type);\n    const { showSnackbar } = useSnackbar();\n    const [treeData, setTreeData] = useState<NodeModel<DndItemData>[]>([]);\n    const [initialOpenList, setInitialOpenList] = useState<undefined | InitialOpen>(undefined);\n    const [openFolderIds, setOpenFolderIds] = useState<NodeModel<DndItemData>[\"id\"][]>([]);\n    const [updateDialogOpen, setUpdateDialogOpen] = useState<boolean>(false);\n    const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);\n    const [selectedFolder, setSelectedFolder] = useState<FolderItem>();\n\n    useDeepCompareEffect(() => {\n        if (folders) {\n            setTreeData(createTreeData(folders, focusedFolderId, hiddenFolderIds));\n        }\n\n        /**\n         *  We are spreading the `folders`:\n         *  in case of folder value update (e.g. name) from any component within the UI does not trigger the tree data update.\n         *  TODO: need investigation.\n         */\n    }, [{ ...folders }, focusedFolderId]);\n\n    useEffect(() => {\n        if (folders) {\n            setInitialOpenList(createInitialOpenList(folders, openFolderIds, focusedFolderId));\n        }\n    }, []);\n\n    const handleDrop = async (\n        newTree: NodeModel<DndItemData>[],\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            await updateFolder({\n                ...item,\n                parentId: dropTargetId !== ROOT_ID ? (dropTargetId as string) : null\n            });\n        } catch (error) {\n            return showSnackbar(error.message);\n        }\n    };\n\n    const sort = (a: NodeModel<DndItemData>, b: NodeModel<DndItemData>) => {\n        return a.data!.title.localeCompare(b.data!.title, undefined, { numeric: true });\n    };\n\n    const handleChangeOpen = (folderIds: NodeModel[\"id\"][]) => {\n        setOpenFolderIds(folderIds);\n    };\n\n    return (\n        <>\n            <DndProvider backend={MultiBackend} options={getBackendOptions()}>\n                <Tree\n                    tree={treeData}\n                    rootId={ROOT_ID}\n                    onDrop={handleDrop}\n                    onChangeOpen={handleChangeOpen}\n                    onDragStart={onDragStart}\n                    onDragEnd={onDragEnd}\n                    sort={sort}\n                    render={(node, { depth, isOpen, onToggle }) => (\n                        <Node\n                            node={node}\n                            depth={depth}\n                            isOpen={isOpen}\n                            enableActions={enableActions}\n                            onToggle={onToggle}\n                            onClick={data => onFolderClick(data)}\n                            onUpdateFolder={data => {\n                                setSelectedFolder(data);\n                                setUpdateDialogOpen(true);\n                            }}\n                            onDeleteFolder={data => {\n                                setSelectedFolder(data);\n                                setDeleteDialogOpen(true);\n                            }}\n                        />\n                    )}\n                    dragPreviewRender={monitorProps => <NodePreview monitorProps={monitorProps} />}\n                    classes={{\n                        root: \"treeRoot\",\n                        dropTarget: \"dropTarget\",\n                        draggingSource: \"draggingSource\",\n                        placeholder: \"placeholderContainer\"\n                    }}\n                    initialOpen={initialOpenList}\n                    placeholderRender={(node, { depth }) => (\n                        <Placeholder node={node} depth={depth} />\n                    )}\n                />\n            </DndProvider>\n            {selectedFolder && (\n                <>\n                    <FolderDialogUpdate\n                        folder={selectedFolder}\n                        open={updateDialogOpen}\n                        onClose={() => {\n                            setUpdateDialogOpen(false);\n                            setSelectedFolder(undefined);\n                        }}\n                    />\n                    <FolderDialogDelete\n                        folder={selectedFolder}\n                        open={deleteDialogOpen}\n                        onClose={() => {\n                            setDeleteDialogOpen(false);\n                            setSelectedFolder(undefined);\n                        }}\n                    />\n                </>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}

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

@@ -5,9 +5,10 @@ import { DndItemData, FolderItem } from "../../../types";
  *
  * @param folders list of folders returned by useFolders hook.
  * @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) => NodeModel<DndItemData>[];
+export declare const createTreeData: (folders?: FolderItem[], focusedNodeId?: string, hiddenFolderIds?: string[]) => NodeModel<DndItemData>[];
 /**
  * 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.

package/components/Tree/List/utils.js

@@ -12,11 +12,13 @@ var _constants = require("./constants");
  *
  * @param folders list of folders returned by useFolders hook.
  * @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 = 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,
@@ -43,6 +45,8 @@ var createTreeData = function createTreeData() {
         isFocused: focusedNodeId === id
       }
     };
+  }).filter(function (item) {
+    return !hiddenFolderIds.includes(item.id);
   });
 };
 

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

@@ -1 +1 @@
-{"version":3,"names":["createTreeData","folders","focusedNodeId","map","item","id","parentId","title","slug","type","createdOn","createdBy","savedOn","parent","ROOT_ID","text","droppable","data","isFocused","createInitialOpenList","openIds","focusedId","focusedFolder","find","folder","findParents","acc","index","some","el","push","newArr","filter","_","i","reduce","result","Set"],"sources":["utils.ts"],"sourcesContent":["import { InitialOpen, NodeModel } from \"@minoru/react-dnd-treeview\";\nimport { DndItemData, FolderItem } from \"~/types\";\nimport { ROOT_ID } 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 * @return array of elements to render the tree component.\n */\nexport const createTreeData = (\n    folders: FolderItem[] = [],\n    focusedNodeId?: string\n): NodeModel<DndItemData>[] => {\n    return folders.map(item => {\n        const { id, parentId, title, slug, type, createdOn, createdBy, savedOn } = item;\n\n        return {\n            id,\n            parent: parentId || ROOT_ID,\n            text: title,\n            droppable: true,\n            data: {\n                id,\n                title,\n                slug,\n                parentId,\n                type,\n                createdOn,\n                createdBy,\n                savedOn,\n                isFocused: focusedNodeId === id\n            }\n        };\n    });\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: NodeModel<DndItemData>[\"id\"][] = [],\n    focusedId?: string\n): InitialOpen | undefined => {\n    const focusedFolder = folders.find(folder => {\n        return folder.id === focusedId;\n    });\n\n    if (!focusedId || !focusedFolder?.parentId) {\n        return openIds;\n    }\n\n    const findParents = (\n        acc: string[],\n        folder: FolderItem,\n        index: number,\n        folders: FolderItem[]\n    ): string[] => {\n        if (folder.parentId && acc.some(el => el === folder.id)) {\n            acc.push(folder.parentId);\n\n            const newArr = folders.filter((_, i) => {\n                return i !== index;\n            });\n\n            return newArr.reduce(findParents, acc);\n        }\n\n        return acc;\n    };\n\n    const result = folders.reduce(findParents, [focusedId]);\n\n    return [...new Set([...result, ...openIds])];\n};\n"],"mappings":";;;;;;;;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,cAAc,GAAG,SAAjBA,cAAc,GAGI;EAAA,IAF3BC,OAAqB,uEAAG,EAAE;EAAA,IAC1BC,aAAsB;EAEtB,OAAOD,OAAO,CAACE,GAAG,CAAC,UAAAC,IAAI,EAAI;IACvB,IAAQC,EAAE,GAAiED,IAAI,CAAvEC,EAAE;MAAEC,QAAQ,GAAuDF,IAAI,CAAnEE,QAAQ;MAAEC,KAAK,GAAgDH,IAAI,CAAzDG,KAAK;MAAEC,IAAI,GAA0CJ,IAAI,CAAlDI,IAAI;MAAEC,IAAI,GAAoCL,IAAI,CAA5CK,IAAI;MAAEC,SAAS,GAAyBN,IAAI,CAAtCM,SAAS;MAAEC,SAAS,GAAcP,IAAI,CAA3BO,SAAS;MAAEC,OAAO,GAAKR,IAAI,CAAhBQ,OAAO;IAEtE,OAAO;MACHP,EAAE,EAAFA,EAAE;MACFQ,MAAM,EAAEP,QAAQ,IAAIQ,kBAAO;MAC3BC,IAAI,EAAER,KAAK;MACXS,SAAS,EAAE,IAAI;MACfC,IAAI,EAAE;QACFZ,EAAE,EAAFA,EAAE;QACFE,KAAK,EAALA,KAAK;QACLC,IAAI,EAAJA,IAAI;QACJF,QAAQ,EAARA,QAAQ;QACRG,IAAI,EAAJA,IAAI;QACJC,SAAS,EAATA,SAAS;QACTC,SAAS,EAATA,SAAS;QACTC,OAAO,EAAPA,OAAO;QACPM,SAAS,EAAEhB,aAAa,KAAKG;MACjC;IACJ,CAAC;EACL,CAAC,CAAC;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA;AASO,IAAMc,qBAAqB,GAAG,SAAxBA,qBAAqB,GAIJ;EAAA,IAH1BlB,OAAqB,uEAAG,EAAE;EAAA,IAC1BmB,OAAuC,uEAAG,EAAE;EAAA,IAC5CC,SAAkB;EAElB,IAAMC,aAAa,GAAGrB,OAAO,CAACsB,IAAI,CAAC,UAAAC,MAAM,EAAI;IACzC,OAAOA,MAAM,CAACnB,EAAE,KAAKgB,SAAS;EAClC,CAAC,CAAC;EAEF,IAAI,CAACA,SAAS,IAAI,EAACC,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEhB,QAAQ,GAAE;IACxC,OAAOc,OAAO;EAClB;EAEA,IAAMK,WAAW,GAAG,SAAdA,WAAW,CACbC,GAAa,EACbF,MAAkB,EAClBG,KAAa,EACb1B,OAAqB,EACV;IACX,IAAIuB,MAAM,CAAClB,QAAQ,IAAIoB,GAAG,CAACE,IAAI,CAAC,UAAAC,EAAE;MAAA,OAAIA,EAAE,KAAKL,MAAM,CAACnB,EAAE;IAAA,EAAC,EAAE;MACrDqB,GAAG,CAACI,IAAI,CAACN,MAAM,CAAClB,QAAQ,CAAC;MAEzB,IAAMyB,MAAM,GAAG9B,OAAO,CAAC+B,MAAM,CAAC,UAACC,CAAC,EAAEC,CAAC,EAAK;QACpC,OAAOA,CAAC,KAAKP,KAAK;MACtB,CAAC,CAAC;MAEF,OAAOI,MAAM,CAACI,MAAM,CAACV,WAAW,EAAEC,GAAG,CAAC;IAC1C;IAEA,OAAOA,GAAG;EACd,CAAC;EAED,IAAMU,MAAM,GAAGnC,OAAO,CAACkC,MAAM,CAACV,WAAW,EAAE,CAACJ,SAAS,CAAC,CAAC;EAEvD,wCAAW,IAAIgB,GAAG,4CAAKD,MAAM,oCAAKhB,OAAO,GAAE;AAC/C,CAAC;AAAC"}
+{"version":3,"names":["createTreeData","folders","focusedNodeId","hiddenFolderIds","map","item","id","parentId","title","slug","type","createdOn","createdBy","savedOn","parent","ROOT_ID","text","droppable","data","isFocused","filter","includes","createInitialOpenList","openIds","focusedId","focusedFolder","find","folder","findParents","acc","index","some","el","push","newArr","_","i","reduce","result","Set"],"sources":["utils.ts"],"sourcesContent":["import { InitialOpen, NodeModel } from \"@minoru/react-dnd-treeview\";\nimport { DndItemData, FolderItem } from \"~/types\";\nimport { ROOT_ID } 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<DndItemData>[] => {\n    return folders\n        .map(item => {\n            const { id, parentId, title, slug, type, createdOn, createdBy, savedOn } = item;\n\n            return {\n                id,\n                parent: parentId || ROOT_ID,\n                text: title,\n                droppable: true,\n                data: {\n                    id,\n                    title,\n                    slug,\n                    parentId,\n                    type,\n                    createdOn,\n                    createdBy,\n                    savedOn,\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: NodeModel<DndItemData>[\"id\"][] = [],\n    focusedId?: string\n): InitialOpen | undefined => {\n    const focusedFolder = folders.find(folder => {\n        return folder.id === focusedId;\n    });\n\n    if (!focusedId || !focusedFolder?.parentId) {\n        return openIds;\n    }\n\n    const findParents = (\n        acc: string[],\n        folder: FolderItem,\n        index: number,\n        folders: FolderItem[]\n    ): string[] => {\n        if (folder.parentId && acc.some(el => el === folder.id)) {\n            acc.push(folder.parentId);\n\n            const newArr = folders.filter((_, i) => {\n                return i !== index;\n            });\n\n            return newArr.reduce(findParents, acc);\n        }\n\n        return acc;\n    };\n\n    const result = folders.reduce(findParents, [focusedId]);\n\n    return [...new Set([...result, ...openIds])];\n};\n"],"mappings":";;;;;;;;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,cAAc,GAAG,SAAjBA,cAAc,GAII;EAAA,IAH3BC,OAAqB,uEAAG,EAAE;EAAA,IAC1BC,aAAsB;EAAA,IACtBC,eAAyB,uEAAG,EAAE;EAE9B,OAAOF,OAAO,CACTG,GAAG,CAAC,UAAAC,IAAI,EAAI;IACT,IAAQC,EAAE,GAAiED,IAAI,CAAvEC,EAAE;MAAEC,QAAQ,GAAuDF,IAAI,CAAnEE,QAAQ;MAAEC,KAAK,GAAgDH,IAAI,CAAzDG,KAAK;MAAEC,IAAI,GAA0CJ,IAAI,CAAlDI,IAAI;MAAEC,IAAI,GAAoCL,IAAI,CAA5CK,IAAI;MAAEC,SAAS,GAAyBN,IAAI,CAAtCM,SAAS;MAAEC,SAAS,GAAcP,IAAI,CAA3BO,SAAS;MAAEC,OAAO,GAAKR,IAAI,CAAhBQ,OAAO;IAEtE,OAAO;MACHP,EAAE,EAAFA,EAAE;MACFQ,MAAM,EAAEP,QAAQ,IAAIQ,kBAAO;MAC3BC,IAAI,EAAER,KAAK;MACXS,SAAS,EAAE,IAAI;MACfC,IAAI,EAAE;QACFZ,EAAE,EAAFA,EAAE;QACFE,KAAK,EAALA,KAAK;QACLC,IAAI,EAAJA,IAAI;QACJF,QAAQ,EAARA,QAAQ;QACRG,IAAI,EAAJA,IAAI;QACJC,SAAS,EAATA,SAAS;QACTC,SAAS,EAATA,SAAS;QACTC,OAAO,EAAPA,OAAO;QACPM,SAAS,EAAEjB,aAAa,KAAKI;MACjC;IACJ,CAAC;EACL,CAAC,CAAC,CACDc,MAAM,CAAC,UAAAf,IAAI;IAAA,OAAI,CAACF,eAAe,CAACkB,QAAQ,CAAChB,IAAI,CAACC,EAAE,CAAC;EAAA,EAAC;AAC3D,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA;AASO,IAAMgB,qBAAqB,GAAG,SAAxBA,qBAAqB,GAIJ;EAAA,IAH1BrB,OAAqB,uEAAG,EAAE;EAAA,IAC1BsB,OAAuC,uEAAG,EAAE;EAAA,IAC5CC,SAAkB;EAElB,IAAMC,aAAa,GAAGxB,OAAO,CAACyB,IAAI,CAAC,UAAAC,MAAM,EAAI;IACzC,OAAOA,MAAM,CAACrB,EAAE,KAAKkB,SAAS;EAClC,CAAC,CAAC;EAEF,IAAI,CAACA,SAAS,IAAI,EAACC,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAElB,QAAQ,GAAE;IACxC,OAAOgB,OAAO;EAClB;EAEA,IAAMK,WAAW,GAAG,SAAdA,WAAW,CACbC,GAAa,EACbF,MAAkB,EAClBG,KAAa,EACb7B,OAAqB,EACV;IACX,IAAI0B,MAAM,CAACpB,QAAQ,IAAIsB,GAAG,CAACE,IAAI,CAAC,UAAAC,EAAE;MAAA,OAAIA,EAAE,KAAKL,MAAM,CAACrB,EAAE;IAAA,EAAC,EAAE;MACrDuB,GAAG,CAACI,IAAI,CAACN,MAAM,CAACpB,QAAQ,CAAC;MAEzB,IAAM2B,MAAM,GAAGjC,OAAO,CAACmB,MAAM,CAAC,UAACe,CAAC,EAAEC,CAAC,EAAK;QACpC,OAAOA,CAAC,KAAKN,KAAK;MACtB,CAAC,CAAC;MAEF,OAAOI,MAAM,CAACG,MAAM,CAACT,WAAW,EAAEC,GAAG,CAAC;IAC1C;IAEA,OAAOA,GAAG;EACd,CAAC;EAED,IAAMS,MAAM,GAAGrC,OAAO,CAACoC,MAAM,CAACT,WAAW,EAAE,CAACJ,SAAS,CAAC,CAAC;EAEvD,wCAAW,IAAIe,GAAG,4CAAKD,MAAM,oCAAKf,OAAO,GAAE;AAC/C,CAAC;AAAC"}

package/components/Tree/Loader/index.js

@@ -13,7 +13,8 @@ var Loader = function Loader() {
     count: 4,
     inline: true,
     height: "100%",
-    wrapper: _styled.SkeletonWrapper
+    wrapper: _styled.SkeletonWrapper,
+    theme: "dark"
   }));
 };
 exports.Loader = Loader;

package/components/Tree/Loader/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Loader","SkeletonWrapper"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Skeleton } from \"@webiny/ui/Skeleton\";\n\nimport { Container, SkeletonWrapper } from \"./styled\";\n\nexport const Loader = () => {\n    return (\n        <Container>\n            <Skeleton count={4} inline={true} height={\"100%\"} wrapper={SkeletonWrapper} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAEA;AAEO,IAAMA,MAAM,GAAG,SAATA,MAAM,GAAS;EACxB,oBACI,6BAAC,iBAAS,qBACN,6BAAC,kBAAQ;IAAC,KAAK,EAAE,CAAE;IAAC,MAAM,EAAE,IAAK;IAAC,MAAM,EAAE,MAAO;IAAC,OAAO,EAAEC;EAAgB,EAAG,CACtE;AAEpB,CAAC;AAAC"}
+{"version":3,"names":["Loader","SkeletonWrapper"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Skeleton } from \"@webiny/ui/Skeleton\";\n\nimport { Container, SkeletonWrapper } from \"./styled\";\n\nexport const Loader = () => {\n    return (\n        <Container>\n            <Skeleton\n                count={4}\n                inline={true}\n                height={\"100%\"}\n                wrapper={SkeletonWrapper}\n                theme={\"dark\"}\n            />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAEA;AAEO,IAAMA,MAAM,GAAG,SAATA,MAAM,GAAS;EACxB,oBACI,6BAAC,iBAAS,qBACN,6BAAC,kBAAQ;IACL,KAAK,EAAE,CAAE;IACT,MAAM,EAAE,IAAK;IACb,MAAM,EAAE,MAAO;IACf,OAAO,EAAEC,uBAAgB;IACzB,KAAK,EAAE;EAAO,EAChB,CACM;AAEpB,CAAC;AAAC"}

package/components/Tree/Loader/styled.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
-export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const SkeletonWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+/// <reference types="web" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkeletonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Tree/MenuActions/index.js

@@ -7,8 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuActions = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
-var _more_vert = require("@material-design-icons/svg/filled/more_vert.svg");
+var _delete = require("@material-design-icons/svg/outlined/delete.svg");
+var _edit = require("@material-design-icons/svg/outlined/edit.svg");
+var _more_vert = require("@material-design-icons/svg/outlined/more_vert.svg");
 var _i18n = require("@webiny/app/i18n");
+var _Icon = require("@webiny/ui/Icon");
 var _Menu = require("@webiny/ui/Menu");
 var _styled = require("./styled");
 var _templateObject, _templateObject2;
@@ -27,11 +30,15 @@ var MenuActions = function MenuActions(_ref) {
       onClick: function onClick() {
         return onUpdateFolder(folder);
       }
-    }, " ", t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Edit"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+    }, /*#__PURE__*/_react.default.createElement(_styled.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null)
+    })), t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Edit"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
       onClick: function onClick() {
         return onDeleteFolder(folder);
       }
-    }, " ", t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))));
+    }, /*#__PURE__*/_react.default.createElement(_styled.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null)
+    })), t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))));
   }
   return null;
 };

package/components/Tree/MenuActions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","MenuActions","folder","onUpdateFolder","onDeleteFolder"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as More } from \"@material-design-icons/svg/filled/more_vert.svg\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Menu, MenuItem } from \"@webiny/ui/Menu\";\n\nimport { Container } from \"~/components/Tree/MenuActions/styled\";\n\nimport { FolderItem } from \"~/types\";\n\nconst t = i18n.ns(\"app-aco/components/tree/menu-actions\");\n\ninterface Props {\n    folder: FolderItem;\n    onUpdateFolder: (data: FolderItem) => void;\n    onDeleteFolder: (data: FolderItem) => void;\n}\n\nexport const MenuActions = ({ folder, onUpdateFolder, onDeleteFolder }: Props) => {\n    if (folder) {\n        return (\n            <Container className={\"folder-tree-menu-action\"}>\n                <Menu handle={<More />} renderToPortal={true}>\n                    <MenuItem onClick={() => onUpdateFolder(folder)}> {t`Edit`}</MenuItem>\n                    <MenuItem onClick={() => onDeleteFolder(folder)}> {t`Delete`}</MenuItem>\n                </Menu>\n            </Container>\n        );\n    }\n\n    return null;\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAEA;AAAiE;AAIjE,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,sCAAsC,CAAC;AAQlD,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAA0D;EAAA,IAApDC,MAAM,QAANA,MAAM;IAAEC,cAAc,QAAdA,cAAc;IAAEC,cAAc,QAAdA,cAAc;EAChE,IAAIF,MAAM,EAAE;IACR,oBACI,6BAAC,iBAAS;MAAC,SAAS,EAAE;IAA0B,gBAC5C,6BAAC,UAAI;MAAC,MAAM,eAAE,6BAAC,yBAAI,OAAI;MAAC,cAAc,EAAE;IAAK,gBACzC,6BAAC,cAAQ;MAAC,OAAO,EAAE;QAAA,OAAMC,cAAc,CAACD,MAAM,CAAC;MAAA;IAAC,GAAC,GAAC,EAACJ,CAAC,wFAAkB,eACtE,6BAAC,cAAQ;MAAC,OAAO,EAAE;QAAA,OAAMM,cAAc,CAACF,MAAM,CAAC;MAAA;IAAC,GAAC,GAAC,EAACJ,CAAC,4FAAoB,CACrE,CACC;EAEpB;EAEA,OAAO,IAAI;AACf,CAAC;AAAC"}
+{"version":3,"names":["t","i18n","ns","MenuActions","folder","onUpdateFolder","onDeleteFolder"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as Delete } from \"@material-design-icons/svg/outlined/delete.svg\";\nimport { ReactComponent as Edit } from \"@material-design-icons/svg/outlined/edit.svg\";\nimport { ReactComponent as More } from \"@material-design-icons/svg/outlined/more_vert.svg\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Menu, MenuItem } from \"@webiny/ui/Menu\";\n\nimport { Container, ListItemGraphic } from \"~/components/Tree/MenuActions/styled\";\n\nimport { FolderItem } from \"~/types\";\n\nconst t = i18n.ns(\"app-aco/components/tree/menu-actions\");\n\ninterface Props {\n    folder: FolderItem;\n    onUpdateFolder: (data: FolderItem) => void;\n    onDeleteFolder: (data: FolderItem) => void;\n}\n\nexport const MenuActions = ({ folder, onUpdateFolder, onDeleteFolder }: Props) => {\n    if (folder) {\n        return (\n            <Container className={\"folder-tree-menu-action\"}>\n                <Menu handle={<More />} renderToPortal={true}>\n                    <MenuItem onClick={() => onUpdateFolder(folder)}>\n                        <ListItemGraphic>\n                            <Icon icon={<Edit />} />\n                        </ListItemGraphic>\n                        {t`Edit`}\n                    </MenuItem>\n                    <MenuItem onClick={() => onDeleteFolder(folder)}>\n                        <ListItemGraphic>\n                            <Icon icon={<Delete />} />\n                        </ListItemGraphic>\n                        {t`Delete`}\n                    </MenuItem>\n                </Menu>\n            </Container>\n        );\n    }\n\n    return null;\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAkF;AAIlF,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,sCAAsC,CAAC;AAQlD,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAA0D;EAAA,IAApDC,MAAM,QAANA,MAAM;IAAEC,cAAc,QAAdA,cAAc;IAAEC,cAAc,QAAdA,cAAc;EAChE,IAAIF,MAAM,EAAE;IACR,oBACI,6BAAC,iBAAS;MAAC,SAAS,EAAE;IAA0B,gBAC5C,6BAAC,UAAI;MAAC,MAAM,eAAE,6BAAC,yBAAI,OAAI;MAAC,cAAc,EAAE;IAAK,gBACzC,6BAAC,cAAQ;MAAC,OAAO,EAAE;QAAA,OAAMC,cAAc,CAACD,MAAM,CAAC;MAAA;IAAC,gBAC5C,6BAAC,uBAAe,qBACZ,6BAAC,UAAI;MAAC,IAAI,eAAE,6BAAC,oBAAI;IAAI,EAAG,CACV,EACjBJ,CAAC,wFACK,eACX,6BAAC,cAAQ;MAAC,OAAO,EAAE;QAAA,OAAMM,cAAc,CAACF,MAAM,CAAC;MAAA;IAAC,gBAC5C,6BAAC,uBAAe,qBACZ,6BAAC,UAAI;MAAC,IAAI,eAAE,6BAAC,sBAAM;IAAI,EAAG,CACZ,EACjBJ,CAAC,4FACK,CACR,CACC;EAEpB;EAEA,OAAO,IAAI;AACf,CAAC;AAAC"}

package/components/Tree/MenuActions/styled.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
-export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+/// <reference types="web" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ListItemGraphic: import("@emotion/styled").StyledComponent<import("@webiny/ui/List").ListItemGraphicProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/Tree/MenuActions/styled.js

@@ -4,10 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.ListItemGraphic = exports.Container = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _List = require("@webiny/ui/List");
 var Container = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Container",
   target: "e1t0ug620"
 })("position:absolute;right:8px;visibility:hidden;cursor:pointer;");
-exports.Container = Container;
+exports.Container = Container;
+var ListItemGraphic = /*#__PURE__*/(0, _styled.default)(_List.ListItemGraphic, {
+  label: "ListItemGraphic",
+  target: "e1t0ug621"
+})("margin-right:8px;");
+exports.ListItemGraphic = ListItemGraphic;

package/components/Tree/MenuActions/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["Container","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    position: absolute;\n    right: 8px;\n    visibility: hidden;\n    cursor: pointer;\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,mEAKpC;AAAC"}
+{"version":3,"names":["Container","styled","ListItemGraphic","ListItemGraphicBase"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { ListItemGraphic as ListItemGraphicBase } from \"@webiny/ui/List\";\n\nexport const Container = styled(\"div\")`\n    position: absolute;\n    right: 8px;\n    visibility: hidden;\n    cursor: pointer;\n`;\n\nexport const ListItemGraphic = styled(ListItemGraphicBase)`\n    margin-right: 8px;\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,mEAKpC;AAAC;AAEK,IAAMC,eAAe,oBAAGD,eAAM,EAACE,qBAAmB;EAAA;EAAA;AAAA,uBAExD;AAAC"}

package/components/Tree/Node/index.d.ts

@@ -5,6 +5,7 @@ declare type Props = {
     node: NodeModel<DndItemData>;
     depth: number;
     isOpen: boolean;
+    enableActions?: boolean;
     onToggle: (id: NodeModel<DndItemData>["id"]) => void;
     onClick: (data: NodeModel<DndItemData>["data"]) => void;
     onUpdateFolder: (data: NodeModel<DndItemData>["data"]) => void;
@@ -13,7 +14,8 @@ declare type Props = {
 declare type FolderProps = {
     text: string;
     isOpen: boolean;
+    isFocused?: boolean;
 };
-export declare const FolderNode: ({ isOpen, text }: FolderProps) => JSX.Element;
-export declare const Node: ({ node, depth, isOpen, onToggle, onClick, onUpdateFolder, onDeleteFolder }: Props) => JSX.Element;
+export declare const FolderNode: ({ isOpen, isFocused, text }: FolderProps) => JSX.Element;
+export declare const Node: ({ node, depth, isOpen, enableActions, onToggle, onClick, onUpdateFolder, onDeleteFolder }: Props) => JSX.Element;
 export {};

package/components/Tree/Node/index.js

@@ -6,25 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Node = exports.FolderNode = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _arrow_right = require("@material-symbols/svg-400/outlined/arrow_right.svg");
-var _folderFill = require("@material-symbols/svg-400/outlined/folder-fill.svg");
-var _folder_openFill = require("@material-symbols/svg-400/outlined/folder_open-fill.svg");
+var _arrow_right = require("@material-symbols/svg-400/rounded/arrow_right.svg");
+var _folderFill = require("@material-symbols/svg-400/rounded/folder-fill.svg");
+var _folder_openFill = require("@material-symbols/svg-400/rounded/folder_open-fill.svg");
 var _reactDndTreeview = require("@minoru/react-dnd-treeview");
 var _MenuActions = require("../MenuActions");
 var _styled = require("./styled");
 var FolderNode = function FolderNode(_ref) {
   var isOpen = _ref.isOpen,
+    isFocused = _ref.isFocused,
     text = _ref.text;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.FolderIcon, null, isOpen ? /*#__PURE__*/_react.default.createElement(_folder_openFill.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_folderFill.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_styled.Text, {
+    className: isFocused ? "focused" : "",
     use: "body2"
   }, text));
 };
 exports.FolderNode = FolderNode;
 var Node = function Node(_ref2) {
-  var _node$data;
+  var _node$data, _node$data2;
   var node = _ref2.node,
     depth = _ref2.depth,
     isOpen = _ref2.isOpen,
+    enableActions = _ref2.enableActions,
     onToggle = _ref2.onToggle,
     onClick = _ref2.onClick,
     onUpdateFolder = _ref2.onUpdateFolder,
@@ -40,6 +43,7 @@ var Node = function Node(_ref2) {
   var handleClick = function handleClick(e) {
     e.stopPropagation();
     onClick(node.data);
+    onToggle(node.id);
   };
   return /*#__PURE__*/_react.default.createElement(_styled.Container, Object.assign({
     isFocused: !!((_node$data = node.data) !== null && _node$data !== void 0 && _node$data.isFocused),
@@ -53,8 +57,9 @@ var Node = function Node(_ref2) {
     onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement(FolderNode, {
     text: node.text,
-    isOpen: isOpen
-  })), node.data && /*#__PURE__*/_react.default.createElement(_MenuActions.MenuActions, {
+    isOpen: isOpen,
+    isFocused: !!((_node$data2 = node.data) !== null && _node$data2 !== void 0 && _node$data2.isFocused)
+  })), node.data && enableActions && /*#__PURE__*/_react.default.createElement(_MenuActions.MenuActions, {
     folder: node.data,
     onUpdateFolder: onUpdateFolder,
     onDeleteFolder: onDeleteFolder

package/components/Tree/Node/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["FolderNode","isOpen","text","Node","node","depth","onToggle","onClick","onUpdateFolder","onDeleteFolder","indent","dragOverProps","useDragOver","id","handleToggle","e","stopPropagation","handleClick","data","isFocused","paddingInlineStart"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ArrowRight } from \"@material-symbols/svg-400/outlined/arrow_right.svg\";\nimport { ReactComponent as Folder } from \"@material-symbols/svg-400/outlined/folder-fill.svg\";\nimport { ReactComponent as FolderOpen } from \"@material-symbols/svg-400/outlined/folder_open-fill.svg\";\nimport { NodeModel, useDragOver } from \"@minoru/react-dnd-treeview\";\n\nimport { MenuActions } from \"~/components/Tree/MenuActions\";\n\nimport { Container, ArrowIcon, FolderIcon, Text, Content } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype Props = {\n    node: NodeModel<DndItemData>;\n    depth: number;\n    isOpen: boolean;\n    onToggle: (id: NodeModel<DndItemData>[\"id\"]) => void;\n    onClick: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onUpdateFolder: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onDeleteFolder: (data: NodeModel<DndItemData>[\"data\"]) => void;\n};\n\ntype FolderProps = {\n    text: string;\n    isOpen: boolean;\n};\n\nexport const FolderNode = ({ isOpen, text }: FolderProps) => {\n    return (\n        <>\n            <FolderIcon>{isOpen ? <FolderOpen /> : <Folder />}</FolderIcon>\n            <Text use={\"body2\"}>{text}</Text>\n        </>\n    );\n};\n\nexport const Node = ({\n    node,\n    depth,\n    isOpen,\n    onToggle,\n    onClick,\n    onUpdateFolder,\n    onDeleteFolder\n}: Props) => {\n    // Move the placeholder line to the left based on the element depth within the tree.\n    // Let's add some pixels so that the element is detached from the container but takes up the whole length while it's highlighted during dnd.\n    const indent = depth * 24 + 8;\n\n    const dragOverProps = useDragOver(node.id, isOpen, onToggle);\n\n    const handleToggle = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onToggle(node.id);\n    };\n\n    const handleClick = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onClick(node.data);\n    };\n\n    return (\n        <Container\n            isFocused={!!node.data?.isFocused}\n            style={{ paddingInlineStart: indent }}\n            {...dragOverProps}\n        >\n            <ArrowIcon isOpen={isOpen} onClick={handleToggle}>\n                <ArrowRight />\n            </ArrowIcon>\n            <Content onClick={handleClick}>\n                <FolderNode text={node.text} isOpen={isOpen} />\n            </Content>\n            {node.data && (\n                <MenuActions\n                    folder={node.data}\n                    onUpdateFolder={onUpdateFolder}\n                    onDeleteFolder={onDeleteFolder}\n                />\n            )}\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAmBO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAAsC;EAAA,IAAhCC,MAAM,QAANA,MAAM;IAAEC,IAAI,QAAJA,IAAI;EACrC,oBACI,yEACI,6BAAC,kBAAU,QAAED,MAAM,gBAAG,6BAAC,+BAAU,OAAG,gBAAG,6BAAC,0BAAM,OAAG,CAAc,eAC/D,6BAAC,YAAI;IAAC,GAAG,EAAE;EAAQ,GAAEC,IAAI,CAAQ,CAClC;AAEX,CAAC;AAAC;AAEK,IAAMC,IAAI,GAAG,SAAPA,IAAI,QAQJ;EAAA;EAAA,IAPTC,IAAI,SAAJA,IAAI;IACJC,KAAK,SAALA,KAAK;IACLJ,MAAM,SAANA,MAAM;IACNK,QAAQ,SAARA,QAAQ;IACRC,OAAO,SAAPA,OAAO;IACPC,cAAc,SAAdA,cAAc;IACdC,cAAc,SAAdA,cAAc;EAEd;EACA;EACA,IAAMC,MAAM,GAAGL,KAAK,GAAG,EAAE,GAAG,CAAC;EAE7B,IAAMM,aAAa,GAAG,IAAAC,6BAAW,EAACR,IAAI,CAACS,EAAE,EAAEZ,MAAM,EAAEK,QAAQ,CAAC;EAE5D,IAAMQ,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAAmB,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBV,QAAQ,CAACF,IAAI,CAACS,EAAE,CAAC;EACrB,CAAC;EAED,IAAMI,WAAW,GAAG,SAAdA,WAAW,CAAIF,CAAmB,EAAK;IACzCA,CAAC,CAACC,eAAe,EAAE;IACnBT,OAAO,CAACH,IAAI,CAACc,IAAI,CAAC;EACtB,CAAC;EAED,oBACI,6BAAC,iBAAS;IACN,SAAS,EAAE,CAAC,gBAACd,IAAI,CAACc,IAAI,uCAAT,WAAWC,SAAS,CAAC;IAClC,KAAK,EAAE;MAAEC,kBAAkB,EAAEV;IAAO;EAAE,GAClCC,aAAa,gBAEjB,6BAAC,iBAAS;IAAC,MAAM,EAAEV,MAAO;IAAC,OAAO,EAAEa;EAAa,gBAC7C,6BAAC,2BAAU,OAAG,CACN,eACZ,6BAAC,eAAO;IAAC,OAAO,EAAEG;EAAY,gBAC1B,6BAAC,UAAU;IAAC,IAAI,EAAEb,IAAI,CAACF,IAAK;IAAC,MAAM,EAAED;EAAO,EAAG,CACzC,EACTG,IAAI,CAACc,IAAI,iBACN,6BAAC,wBAAW;IACR,MAAM,EAAEd,IAAI,CAACc,IAAK;IAClB,cAAc,EAAEV,cAAe;IAC/B,cAAc,EAAEC;EAAe,EAEtC,CACO;AAEpB,CAAC;AAAC"}
+{"version":3,"names":["FolderNode","isOpen","isFocused","text","Node","node","depth","enableActions","onToggle","onClick","onUpdateFolder","onDeleteFolder","indent","dragOverProps","useDragOver","id","handleToggle","e","stopPropagation","handleClick","data","paddingInlineStart"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ArrowRight } from \"@material-symbols/svg-400/rounded/arrow_right.svg\";\nimport { ReactComponent as Folder } from \"@material-symbols/svg-400/rounded/folder-fill.svg\";\nimport { ReactComponent as FolderOpen } from \"@material-symbols/svg-400/rounded/folder_open-fill.svg\";\nimport { NodeModel, useDragOver } from \"@minoru/react-dnd-treeview\";\n\nimport { MenuActions } from \"~/components/Tree/MenuActions\";\n\nimport { Container, ArrowIcon, FolderIcon, Text, Content } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype Props = {\n    node: NodeModel<DndItemData>;\n    depth: number;\n    isOpen: boolean;\n    enableActions?: boolean;\n    onToggle: (id: NodeModel<DndItemData>[\"id\"]) => void;\n    onClick: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onUpdateFolder: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onDeleteFolder: (data: NodeModel<DndItemData>[\"data\"]) => void;\n};\n\ntype FolderProps = {\n    text: string;\n    isOpen: boolean;\n    isFocused?: boolean;\n};\n\nexport const FolderNode = ({ isOpen, isFocused, text }: FolderProps) => {\n    return (\n        <>\n            <FolderIcon>{isOpen ? <FolderOpen /> : <Folder />}</FolderIcon>\n            <Text className={isFocused ? \"focused\" : \"\"} use={\"body2\"}>\n                {text}\n            </Text>\n        </>\n    );\n};\n\nexport const Node = ({\n    node,\n    depth,\n    isOpen,\n    enableActions,\n    onToggle,\n    onClick,\n    onUpdateFolder,\n    onDeleteFolder\n}: Props) => {\n    // Move the placeholder line to the left based on the element depth within the tree.\n    // Let's add some pixels so that the element is detached from the container but takes up the whole length while it's highlighted during dnd.\n    const indent = depth * 24 + 8;\n\n    const dragOverProps = useDragOver(node.id, isOpen, onToggle);\n\n    const handleToggle = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onToggle(node.id);\n    };\n\n    const handleClick = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onClick(node.data);\n        onToggle(node.id);\n    };\n\n    return (\n        <Container\n            isFocused={!!node.data?.isFocused}\n            style={{ paddingInlineStart: indent }}\n            {...dragOverProps}\n        >\n            <ArrowIcon isOpen={isOpen} onClick={handleToggle}>\n                <ArrowRight />\n            </ArrowIcon>\n            <Content onClick={handleClick}>\n                <FolderNode text={node.text} isOpen={isOpen} isFocused={!!node.data?.isFocused} />\n            </Content>\n            {node.data && enableActions && (\n                <MenuActions\n                    folder={node.data}\n                    onUpdateFolder={onUpdateFolder}\n                    onDeleteFolder={onDeleteFolder}\n                />\n            )}\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAqBO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAAiD;EAAA,IAA3CC,MAAM,QAANA,MAAM;IAAEC,SAAS,QAATA,SAAS;IAAEC,IAAI,QAAJA,IAAI;EAChD,oBACI,yEACI,6BAAC,kBAAU,QAAEF,MAAM,gBAAG,6BAAC,+BAAU,OAAG,gBAAG,6BAAC,0BAAM,OAAG,CAAc,eAC/D,6BAAC,YAAI;IAAC,SAAS,EAAEC,SAAS,GAAG,SAAS,GAAG,EAAG;IAAC,GAAG,EAAE;EAAQ,GACrDC,IAAI,CACF,CACR;AAEX,CAAC;AAAC;AAEK,IAAMC,IAAI,GAAG,SAAPA,IAAI,QASJ;EAAA;EAAA,IARTC,IAAI,SAAJA,IAAI;IACJC,KAAK,SAALA,KAAK;IACLL,MAAM,SAANA,MAAM;IACNM,aAAa,SAAbA,aAAa;IACbC,QAAQ,SAARA,QAAQ;IACRC,OAAO,SAAPA,OAAO;IACPC,cAAc,SAAdA,cAAc;IACdC,cAAc,SAAdA,cAAc;EAEd;EACA;EACA,IAAMC,MAAM,GAAGN,KAAK,GAAG,EAAE,GAAG,CAAC;EAE7B,IAAMO,aAAa,GAAG,IAAAC,6BAAW,EAACT,IAAI,CAACU,EAAE,EAAEd,MAAM,EAAEO,QAAQ,CAAC;EAE5D,IAAMQ,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAAmB,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBV,QAAQ,CAACH,IAAI,CAACU,EAAE,CAAC;EACrB,CAAC;EAED,IAAMI,WAAW,GAAG,SAAdA,WAAW,CAAIF,CAAmB,EAAK;IACzCA,CAAC,CAACC,eAAe,EAAE;IACnBT,OAAO,CAACJ,IAAI,CAACe,IAAI,CAAC;IAClBZ,QAAQ,CAACH,IAAI,CAACU,EAAE,CAAC;EACrB,CAAC;EAED,oBACI,6BAAC,iBAAS;IACN,SAAS,EAAE,CAAC,gBAACV,IAAI,CAACe,IAAI,uCAAT,WAAWlB,SAAS,CAAC;IAClC,KAAK,EAAE;MAAEmB,kBAAkB,EAAET;IAAO;EAAE,GAClCC,aAAa,gBAEjB,6BAAC,iBAAS;IAAC,MAAM,EAAEZ,MAAO;IAAC,OAAO,EAAEe;EAAa,gBAC7C,6BAAC,2BAAU,OAAG,CACN,eACZ,6BAAC,eAAO;IAAC,OAAO,EAAEG;EAAY,gBAC1B,6BAAC,UAAU;IAAC,IAAI,EAAEd,IAAI,CAACF,IAAK;IAAC,MAAM,EAAEF,MAAO;IAAC,SAAS,EAAE,CAAC,iBAACI,IAAI,CAACe,IAAI,wCAAT,YAAWlB,SAAS;EAAC,EAAG,CAC5E,EACTG,IAAI,CAACe,IAAI,IAAIb,aAAa,iBACvB,6BAAC,wBAAW;IACR,MAAM,EAAEF,IAAI,CAACe,IAAK;IAClB,cAAc,EAAEV,cAAe;IAC/B,cAAc,EAAEC;EAAe,EAEtC,CACO;AAEpB,CAAC;AAAC"}

package/components/Tree/Node/styled.d.ts

@@ -1,38 +1,43 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
+/// <reference types="web" />
 declare type ContainerProps = {
     isFocused: boolean;
 };
 declare type ArrowIconContainerProps = {
     isOpen: boolean;
 };
-export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerProps, object>;
-export declare const Icon: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const ArrowIcon: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
-} & {
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Icon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArrowIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, ArrowIconContainerProps, object>;
-export declare const FolderIcon: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
 } & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & ArrowIconContainerProps, {}, {}>;
+export declare const FolderIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
 } & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Text: import("@emotion/styled").StyledComponent<import("@webiny/ui/Typography/Typography").TypographyProps & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const Content: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const Text: import("@emotion/styled-base").StyledComponent<import("@webiny/ui/Typography/Typography").TypographyProps & {
-    children?: import("react").ReactNode;
-}, Pick<import("@webiny/ui/Typography/Typography").TypographyProps & {
-    children?: import("react").ReactNode;
-}, keyof import("@webiny/ui/Typography/Typography").TypographyProps>, object>;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export {};

package/components/Tree/Node/styled.js

@@ -11,13 +11,13 @@ var Container = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Container",
   target: "e12afjno0"
 })("display:flex;align-items:center;padding:4px 32px 4px 0;background:", function (props) {
-  return props.isFocused && "var(--mdc-theme-background)";
+  return props.isFocused && "var(--mdc-theme-on-background)";
 }, ";color:var(--webiny-theme-color-text-secondary);fill:currentColor;position:relative;&:hover .folder-tree-menu-action{visibility:visible;}");
 exports.Container = Container;
 var Icon = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Icon",
   target: "e12afjno1"
-})("display:flex;align-items:center;justify-content:center;height:24px;width:24px;cursor:pointer;");
+})("display:flex;align-items:center;justify-content:center;height:24px;width:24px;cursor:pointer;fill:var(--mdc-theme-text-secondary-on-background);");
 exports.Icon = Icon;
 var ArrowIcon = /*#__PURE__*/(0, _styled.default)(Icon, {
   label: "ArrowIcon",
@@ -34,10 +34,10 @@ exports.FolderIcon = FolderIcon;
 var Content = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Content",
   target: "e12afjno4"
-})("display:flex;align-items:center;cursor:pointer;white-space:nowrap;overflow:hidden;");
+})("display:flex;align-items:center;cursor:pointer;white-space:nowrap;overflow:hidden;width:100%;");
 exports.Content = Content;
 var Text = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
   label: "Text",
   target: "e12afjno5"
-})("white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px;");
+})("white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px;&.focused{font-weight:600;}");
 exports.Text = Text;

package/components/Tree/Node/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["Container","styled","props","isFocused","Icon","ArrowIcon","isOpen","FolderIcon","Content","Text","Typography"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\ntype ContainerProps = {\n    isFocused: boolean;\n};\n\ntype ArrowIconContainerProps = {\n    isOpen: boolean;\n};\n\nexport const Container = styled(\"div\")<ContainerProps>`\n    display: flex;\n    align-items: center;\n    padding: 4px 32px 4px 0;\n    background: ${props => props.isFocused && \"var(--mdc-theme-background)\"};\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n    position: relative;\n\n    &:hover .folder-tree-menu-action {\n        visibility: visible;\n    }\n`;\n\nexport const Icon = styled(\"div\")`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 24px;\n    width: 24px;\n    cursor: pointer;\n`;\n\nexport const ArrowIcon = styled(Icon)<ArrowIconContainerProps>`\n    transition: transform linear 0.1s;\n    transform: ${props => (props.isOpen ? \"rotate(90deg)\" : \"rotate(0deg)\")};\n`;\n\nexport const FolderIcon = styled(Icon)`\n    margin-right: 4px;\n`;\n\nexport const Content = styled(\"div\")`\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    white-space: nowrap;\n    overflow: hidden;\n`;\n\nexport const Text = styled(Typography)`\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 24px;\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAUO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,yEAInB,UAAAC,KAAK;EAAA,OAAIA,KAAK,CAACC,SAAS,IAAI,6BAA6B;AAAA,+IAQ1E;AAAC;AAEK,IAAMC,IAAI,oBAAGH,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,mGAO/B;AAAC;AAEK,IAAMI,SAAS,oBAAGJ,eAAM,EAACG,IAAI;EAAA;EAAA;AAAA,kDAEnB,UAAAF,KAAK;EAAA,OAAKA,KAAK,CAACI,MAAM,GAAG,eAAe,GAAG,cAAc;AAAA,CAAC,MAC1E;AAAC;AAEK,IAAMC,UAAU,oBAAGN,eAAM,EAACG,IAAI;EAAA;EAAA;AAAA,uBAEpC;AAAC;AAEK,IAAMI,OAAO,oBAAGP,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,wFAMlC;AAAC;AAEK,IAAMQ,IAAI,oBAAGR,eAAM,EAACS,sBAAU;EAAA;EAAA;AAAA,iFAKpC;AAAC"}
+{"version":3,"names":["Container","styled","props","isFocused","Icon","ArrowIcon","isOpen","FolderIcon","Content","Text","Typography"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\ntype ContainerProps = {\n    isFocused: boolean;\n};\n\ntype ArrowIconContainerProps = {\n    isOpen: boolean;\n};\n\nexport const Container = styled(\"div\")<ContainerProps>`\n    display: flex;\n    align-items: center;\n    padding: 4px 32px 4px 0;\n    background: ${props => props.isFocused && \"var(--mdc-theme-on-background)\"};\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n    position: relative;\n    &:hover .folder-tree-menu-action {\n        visibility: visible;\n    }\n`;\n\nexport const Icon = styled(\"div\")`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 24px;\n    width: 24px;\n    cursor: pointer;\n    fill: var(--mdc-theme-text-secondary-on-background);\n`;\n\nexport const ArrowIcon = styled(Icon)<ArrowIconContainerProps>`\n    transition: transform linear 0.1s;\n    transform: ${props => (props.isOpen ? \"rotate(90deg)\" : \"rotate(0deg)\")};\n`;\n\nexport const FolderIcon = styled(Icon)`\n    margin-right: 4px;\n`;\n\nexport const Content = styled(\"div\")`\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 100%;\n`;\n\nexport const Text = styled(Typography)`\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 24px;\n    &.focused {\n        font-weight: 600;\n    }\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAUO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,yEAInB,UAAAC,KAAK;EAAA,OAAIA,KAAK,CAACC,SAAS,IAAI,gCAAgC;AAAA,+IAO7E;AAAC;AAEK,IAAMC,IAAI,oBAAGH,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,sJAQ/B;AAAC;AAEK,IAAMI,SAAS,oBAAGJ,eAAM,EAACG,IAAI;EAAA;EAAA;AAAA,kDAEnB,UAAAF,KAAK;EAAA,OAAKA,KAAK,CAACI,MAAM,GAAG,eAAe,GAAG,cAAc;AAAA,CAAC,MAC1E;AAAC;AAEK,IAAMC,UAAU,oBAAGN,eAAM,EAACG,IAAI;EAAA;EAAA;AAAA,uBAEpC;AAAC;AAEK,IAAMI,OAAO,oBAAGP,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,mGAOlC;AAAC;AAEK,IAAMQ,IAAI,oBAAGR,eAAM,EAACS,sBAAU;EAAA;EAAA;AAAA,4GAQpC;AAAC"}

package/components/Tree/NodePreview/styled.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
-export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+/// <reference types="web" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Tree/Placeholder/styled.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
-export declare const Element: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+/// <reference types="web" />
+export declare const Element: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Tree/Title/styled.d.ts

@@ -1,10 +1,16 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
+/// <reference types="web" />
 declare type ContainerProps = {
     hasClickAction: boolean;
     isDragging: boolean;
 };
-export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerProps, object>;
-export declare const IconContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/components/Tree/Title/styled.js

@@ -20,5 +20,5 @@ exports.Container = Container;
 var IconContainer = /*#__PURE__*/(0, _styled.default)("div", {
   label: "IconContainer",
   target: "eteslgk1"
-})("margin-right:4px;height:24px;width:24px;");
+})("margin-right:4px;height:24px;width:24px;fill:var(--mdc-theme-text-secondary-on-background);");
 exports.IconContainer = IconContainer;

package/components/Tree/Title/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["Container","styled","hasClickAction","isDragging","IconContainer"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\ntype ContainerProps = {\n    hasClickAction: boolean;\n    isDragging: boolean;\n};\n\nexport const Container = styled(\"div\")<ContainerProps>`\n    position: absolute;\n    top: 8px;\n    left: 0;\n    display: flex;\n    align-items: center;\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n    padding: 0 8px 0;\n    cursor: ${({ hasClickAction }) => hasClickAction && \"pointer\"};\n    // The title acts like is not there, so user can drag a folder over the title and move it to the root.\n    pointer-events: ${({ isDragging }) => (isDragging ? \"none\" : \"auto\")};\n`;\n\nexport const IconContainer = styled.div`\n    margin-right: 4px;\n    height: 24px;\n    width: 24px;\n`;\n"],"mappings":";;;;;;;AAAA;AAOO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,gKASvB;EAAA,IAAGC,cAAc,QAAdA,cAAc;EAAA,OAAOA,cAAc,IAAI,SAAS;AAAA,uBAE3C;EAAA,IAAGC,UAAU,SAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,MACvE;AAAC;AAEK,IAAMC,aAAa,oBAAGH,eAAM;EAAA;EAAA;AAAA,8CAIlC;AAAC"}
+{"version":3,"names":["Container","styled","hasClickAction","isDragging","IconContainer"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\ntype ContainerProps = {\n    hasClickAction: boolean;\n    isDragging: boolean;\n};\n\nexport const Container = styled(\"div\")<ContainerProps>`\n    position: absolute;\n    top: 8px;\n    left: 0;\n    display: flex;\n    align-items: center;\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n    padding: 0 8px 0;\n    cursor: ${({ hasClickAction }) => hasClickAction && \"pointer\"};\n    // The title acts like is not there, so user can drag a folder over the title and move it to the root.\n    pointer-events: ${({ isDragging }) => (isDragging ? \"none\" : \"auto\")};\n`;\n\nexport const IconContainer = styled.div`\n    margin-right: 4px;\n    height: 24px;\n    width: 24px;\n    fill: var(--mdc-theme-text-secondary-on-background);\n`;\n"],"mappings":";;;;;;;AAAA;AAOO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,gKASvB;EAAA,IAAGC,cAAc,QAAdA,cAAc;EAAA,OAAOA,cAAc,IAAI,SAAS;AAAA,uBAE3C;EAAA,IAAGC,UAAU,SAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,MACvE;AAAC;AAEK,IAAMC,aAAa,oBAAGH,eAAM;EAAA;EAAA;AAAA,iGAKlC;AAAC"}

package/components/Tree/index.d.ts

@@ -6,8 +6,11 @@ declare type Props = {
     type: string;
     title: string;
     onFolderClick: (data: NodeModel<DndItemData>["data"]) => void;
+    enableCreate?: boolean;
+    enableActions?: boolean;
     onTitleClick?: (event: React.MouseEvent<HTMLElement>) => void;
     focusedFolderId?: string;
+    hiddenFolderIds?: string[];
 };
 export declare const FolderTree: React.FC<Props>;
 export {};

package/components/Tree/index.js

@@ -20,6 +20,9 @@ var FolderTree = function FolderTree(_ref) {
   var type = _ref.type,
     title = _ref.title,
     focusedFolderId = _ref.focusedFolderId,
+    hiddenFolderIds = _ref.hiddenFolderIds,
+    enableActions = _ref.enableActions,
+    enableCreate = _ref.enableCreate,
     onFolderClick = _ref.onFolderClick,
     onTitleClick = _ref.onTitleClick;
   var _useFolders = (0, _useFolders2.useFolders)(type),
@@ -45,13 +48,15 @@ var FolderTree = function FolderTree(_ref) {
         folders: folders,
         onFolderClick: onFolderClick,
         focusedFolderId: focusedFolderId,
+        hiddenFolderIds: hiddenFolderIds,
+        enableActions: enableActions,
         onDragStart: function onDragStart() {
           return setIsDragging(true);
         },
         onDragEnd: function onDragEnd() {
           return setIsDragging(false);
         }
-      }), /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
+      }), enableCreate && /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
         onClick: function onClick() {
           return setCreateDialogOpen(true);
         }
@@ -67,13 +72,13 @@ var FolderTree = function FolderTree(_ref) {
     title: title,
     onClick: onTitleClick,
     isDragging: isDragging
-  }), renderList(), /*#__PURE__*/_react.default.createElement(_.FolderDialogCreate, {
+  }), renderList(), enableCreate && /*#__PURE__*/_react.default.createElement(_.FolderDialogCreate, {
     type: type,
     open: createDialogOpen,
     onClose: function onClose() {
       return setCreateDialogOpen(false);
     },
-    parentId: undefined
+    currentParentId: undefined
   }));
 };
 exports.FolderTree = FolderTree;