@webiny/app-aco 5.34.8-beta.1 → 5.35.0-beta.0

package/components/Tree/MenuActions/styled.js

@@ -1,16 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 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,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,mEAAf"}
+{"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

@@ -1,61 +1,50 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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,
-      text = _ref.text;
+    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,
-      onToggle = _ref2.onToggle,
-      onClick = _ref2.onClick,
-      onUpdateFolder = _ref2.onUpdateFolder,
-      onDeleteFolder = _ref2.onDeleteFolder;
+    depth = _ref2.depth,
+    isOpen = _ref2.isOpen,
+    enableActions = _ref2.enableActions,
+    onToggle = _ref2.onToggle,
+    onClick = _ref2.onClick,
+    onUpdateFolder = _ref2.onUpdateFolder,
+    onDeleteFolder = _ref2.onDeleteFolder;
   // Move the placeholder line to the left based on the element depth within the tree.
   // 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.
   var indent = depth * 24 + 8;
   var dragOverProps = (0, _reactDndTreeview.useDragOver)(node.id, isOpen, onToggle);
-
   var handleToggle = function handleToggle(e) {
     e.stopPropagation();
     onToggle(node.id);
   };
-
   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),
     style: {
@@ -68,12 +57,12 @@ 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
   }));
 };
-
 exports.Node = Node;

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,UAAa,OAAmC;EAAA,IAAhCC,MAAgC,QAAhCA,MAAgC;EAAA,IAAxBC,IAAwB,QAAxBA,IAAwB;EACzD,oBACI,yEACI,6BAAC,kBAAD,QAAaD,MAAM,gBAAG,6BAAC,+BAAD,OAAH,gBAAoB,6BAAC,0BAAD,OAAvC,CADJ,eAEI,6BAAC,YAAD;IAAM,GAAG,EAAE;EAAX,GAAqBC,IAArB,CAFJ,CADJ;AAMH,CAPM;;;;AASA,IAAMC,IAAI,GAAG,SAAPA,IAAO,QAQP;EAAA;;EAAA,IAPTC,IAOS,SAPTA,IAOS;EAAA,IANTC,KAMS,SANTA,KAMS;EAAA,IALTJ,MAKS,SALTA,MAKS;EAAA,IAJTK,QAIS,SAJTA,QAIS;EAAA,IAHTC,OAGS,SAHTA,OAGS;EAAA,IAFTC,cAES,SAFTA,cAES;EAAA,IADTC,cACS,SADTA,cACS;EACT;EACA;EACA,IAAMC,MAAM,GAAGL,KAAK,GAAG,EAAR,GAAa,CAA5B;EAEA,IAAMM,aAAa,GAAG,IAAAC,6BAAA,EAAYR,IAAI,CAACS,EAAjB,EAAqBZ,MAArB,EAA6BK,QAA7B,CAAtB;;EAEA,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,CAAD,EAAyB;IAC1CA,CAAC,CAACC,eAAF;IACAV,QAAQ,CAACF,IAAI,CAACS,EAAN,CAAR;EACH,CAHD;;EAKA,IAAMI,WAAW,GAAG,SAAdA,WAAc,CAACF,CAAD,EAAyB;IACzCA,CAAC,CAACC,eAAF;IACAT,OAAO,CAACH,IAAI,CAACc,IAAN,CAAP;EACH,CAHD;;EAKA,oBACI,6BAAC,iBAAD;IACI,SAAS,EAAE,CAAC,gBAACd,IAAI,CAACc,IAAN,uCAAC,WAAWC,SAAZ,CADhB;IAEI,KAAK,EAAE;MAAEC,kBAAkB,EAAEV;IAAtB;EAFX,GAGQC,aAHR,gBAKI,6BAAC,iBAAD;IAAW,MAAM,EAAEV,MAAnB;IAA2B,OAAO,EAAEa;EAApC,gBACI,6BAAC,2BAAD,OADJ,CALJ,eAQI,6BAAC,eAAD;IAAS,OAAO,EAAEG;EAAlB,gBACI,6BAAC,UAAD;IAAY,IAAI,EAAEb,IAAI,CAACF,IAAvB;IAA6B,MAAM,EAAED;EAArC,EADJ,CARJ,EAWKG,IAAI,CAACc,IAAL,iBACG,6BAAC,wBAAD;IACI,MAAM,EAAEd,IAAI,CAACc,IADjB;IAEI,cAAc,EAAEV,cAFpB;IAGI,cAAc,EAAEC;EAHpB,EAZR,CADJ;AAqBH,CA9CM"}
+{"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

@@ -1,27 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Text = exports.Icon = exports.FolderIcon = exports.Content = exports.Container = exports.ArrowIcon = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = require("@webiny/ui/Typography");
-
 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",
@@ -38,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,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,yEAIJ,UAAAC,KAAK;EAAA,OAAIA,KAAK,CAACC,SAAN,IAAmB,6BAAvB;AAAA,CAJD,8IAAf;;AAcA,IAAMC,IAAI,oBAAGH,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,mGAAV;;AASA,IAAMI,SAAS,oBAAGJ,eAAH,EAAUG,IAAV;EAAA;EAAA;AAAA,kDAEL,UAAAF,KAAK;EAAA,OAAKA,KAAK,CAACI,MAAN,GAAe,eAAf,GAAiC,cAAtC;AAAA,CAFA,MAAf;;AAKA,IAAMC,UAAU,oBAAGN,eAAH,EAAUG,IAAV;EAAA;EAAA;AAAA,uBAAhB;;AAIA,IAAMI,OAAO,oBAAGP,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,wFAAb;;AAQA,IAAMQ,IAAI,oBAAGR,eAAH,EAAUS,sBAAV;EAAA;EAAA;AAAA,iFAAV"}
+{"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/index.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NodePreview = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Node = require("../Node");
-
 var _styled = require("./styled");
-
 var NodePreview = function NodePreview(props) {
   var item = props.monitorProps.item;
   return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_Node.FolderNode, {
@@ -20,5 +15,4 @@ var NodePreview = function NodePreview(props) {
     isOpen: false
   }));
 };
-
 exports.NodePreview = NodePreview;

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

@@ -1 +1 @@
-{"version":3,"names":["NodePreview","props","item","monitorProps","text"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { DragLayerMonitorProps } from \"@minoru/react-dnd-treeview\";\n\nimport { FolderNode } from \"~/components/Tree/Node\";\nimport { Container } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype Props = {\n    monitorProps: DragLayerMonitorProps<DndItemData>;\n};\n\nexport const NodePreview: React.FC<Props> = props => {\n    const item = props.monitorProps.item;\n\n    return (\n        <Container>\n            <FolderNode text={item.text} isOpen={false} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;AAQO,IAAMA,WAA4B,GAAG,SAA/BA,WAA+B,CAAAC,KAAK,EAAI;EACjD,IAAMC,IAAI,GAAGD,KAAK,CAACE,YAAN,CAAmBD,IAAhC;EAEA,oBACI,6BAAC,iBAAD,qBACI,6BAAC,gBAAD;IAAY,IAAI,EAAEA,IAAI,CAACE,IAAvB;IAA6B,MAAM,EAAE;EAArC,EADJ,CADJ;AAKH,CARM"}
+{"version":3,"names":["NodePreview","props","item","monitorProps","text"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { DragLayerMonitorProps } from \"@minoru/react-dnd-treeview\";\n\nimport { FolderNode } from \"~/components/Tree/Node\";\nimport { Container } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype Props = {\n    monitorProps: DragLayerMonitorProps<DndItemData>;\n};\n\nexport const NodePreview: React.FC<Props> = props => {\n    const item = props.monitorProps.item;\n\n    return (\n        <Container>\n            <FolderNode text={item.text} isOpen={false} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAGA;AACA;AAQO,IAAMA,WAA4B,GAAG,SAA/BA,WAA4B,CAAGC,KAAK,EAAI;EACjD,IAAMC,IAAI,GAAGD,KAAK,CAACE,YAAY,CAACD,IAAI;EAEpC,oBACI,6BAAC,iBAAS,qBACN,6BAAC,gBAAU;IAAC,IAAI,EAAEA,IAAI,CAACE,IAAK;IAAC,MAAM,EAAE;EAAM,EAAG,CACtC;AAEpB,CAAC;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/NodePreview/styled.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var Container = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Container",
   target: "e2my8y90"

package/components/Tree/NodePreview/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    background-color: var(--webiny-theme-color-primary);\n    border-radius: var(--webiny-theme-border-radius);\n    color: var(--webiny-theme-color-on-primary);\n    fill: currentColor;\n    display: inline-grid;\n    grid-template-columns: auto auto;\n    align-items: center;\n    padding: 4px 8px;\n    pointer-events: none;\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,SAAS,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,iRAAf"}
+{"version":3,"names":["Container","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    background-color: var(--webiny-theme-color-primary);\n    border-radius: var(--webiny-theme-border-radius);\n    color: var(--webiny-theme-color-on-primary);\n    fill: currentColor;\n    display: inline-grid;\n    grid-template-columns: auto auto;\n    align-items: center;\n    padding: 4px 8px;\n    pointer-events: none;\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,iRAUpC;AAAC"}

package/components/Tree/Placeholder/index.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Placeholder = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styled = require("./styled");
-
 var Placeholder = function Placeholder(_ref) {
   var depth = _ref.depth;
   // Move the placeholder line to the left based on the element depth within the tree.
@@ -22,5 +18,4 @@ var Placeholder = function Placeholder(_ref) {
     }
   });
 };
-
 exports.Placeholder = Placeholder;

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

@@ -1 +1 @@
-{"version":3,"names":["Placeholder","depth","left"],"sources":["index.tsx"],"sourcesContent":["import { NodeModel } from \"@minoru/react-dnd-treeview\";\nimport React from \"react\";\n\nimport { Element } from \"./styled\";\nimport { DndItemData } from \"~/types\";\n\ninterface Props {\n    depth: number;\n    node: NodeModel<DndItemData>;\n}\n\nexport const Placeholder = ({ depth }: 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 left = depth * 24 + 8;\n    return <Element style={{ left }} />;\n};\n"],"mappings":";;;;;;;;;AACA;;AAEA;;AAQO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAAsB;EAAA,IAAnBC,KAAmB,QAAnBA,KAAmB;EAC7C;EACA;EACA,IAAMC,IAAI,GAAGD,KAAK,GAAG,EAAR,GAAa,CAA1B;EACA,oBAAO,6BAAC,eAAD;IAAS,KAAK,EAAE;MAAEC,IAAI,EAAJA;IAAF;EAAhB,EAAP;AACH,CALM"}
+{"version":3,"names":["Placeholder","depth","left"],"sources":["index.tsx"],"sourcesContent":["import { NodeModel } from \"@minoru/react-dnd-treeview\";\nimport React from \"react\";\n\nimport { Element } from \"./styled\";\nimport { DndItemData } from \"~/types\";\n\ninterface Props {\n    depth: number;\n    node: NodeModel<DndItemData>;\n}\n\nexport const Placeholder = ({ depth }: 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 left = depth * 24 + 8;\n    return <Element style={{ left }} />;\n};\n"],"mappings":";;;;;;;AACA;AAEA;AAQO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAyB;EAAA,IAAnBC,KAAK,QAALA,KAAK;EAC/B;EACA;EACA,IAAMC,IAAI,GAAGD,KAAK,GAAG,EAAE,GAAG,CAAC;EAC3B,oBAAO,6BAAC,eAAO;IAAC,KAAK,EAAE;MAAEC,IAAI,EAAJA;IAAK;EAAE,EAAG;AACvC,CAAC;AAAC"}

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/Placeholder/styled.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Element = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var Element = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Element",
   target: "ehnecm90"

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

@@ -1 +1 @@
-{"version":3,"names":["Element","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Element = styled(\"div\")`\n    background-color: var(--webiny-theme-color-primary);\n    height: 2px;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateY(-50%);\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,OAAO,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,+HAAb"}
+{"version":3,"names":["Element","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Element = styled(\"div\")`\n    background-color: var(--webiny-theme-color-primary);\n    height: 2px;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateY(-50%);\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,OAAO,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,+HAOlC;AAAC"}

package/components/Tree/Title/index.js

@@ -1,24 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Title = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _home = require("@material-design-icons/svg/filled/home.svg");
-
 var _styled = require("./styled");
-
 var _Typography = require("@webiny/ui/Typography");
-
 var Title = function Title(_ref) {
   var title = _ref.title,
-      onClick = _ref.onClick,
-      isDragging = _ref.isDragging;
+    onClick = _ref.onClick,
+    isDragging = _ref.isDragging;
   return /*#__PURE__*/_react.default.createElement(_styled.Container, {
     onClick: onClick,
     hasClickAction: Boolean(onClick),
@@ -27,5 +21,4 @@ var Title = function Title(_ref) {
     use: "subtitle2"
   }, title));
 };
-
 exports.Title = Title;

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

@@ -1 +1 @@
-{"version":3,"names":["Title","title","onClick","isDragging","Boolean"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as Dashboard } from \"@material-design-icons/svg/filled/home.svg\";\n\nimport { Container, IconContainer } from \"./styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\ntype Props = {\n    title: string;\n    isDragging: boolean;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n};\n\nexport const Title: React.FC<Props> = ({ title, onClick, isDragging }) => {\n    return (\n        <Container onClick={onClick} hasClickAction={Boolean(onClick)} isDragging={isDragging}>\n            <IconContainer>\n                <Dashboard />\n            </IconContainer>\n            <Typography use={\"subtitle2\"}>{title}</Typography>\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AAQO,IAAMA,KAAsB,GAAG,SAAzBA,KAAyB,OAAoC;EAAA,IAAjCC,KAAiC,QAAjCA,KAAiC;EAAA,IAA1BC,OAA0B,QAA1BA,OAA0B;EAAA,IAAjBC,UAAiB,QAAjBA,UAAiB;EACtE,oBACI,6BAAC,iBAAD;IAAW,OAAO,EAAED,OAApB;IAA6B,cAAc,EAAEE,OAAO,CAACF,OAAD,CAApD;IAA+D,UAAU,EAAEC;EAA3E,gBACI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD,OADJ,CADJ,eAII,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA+BF,KAA/B,CAJJ,CADJ;AAQH,CATM"}
+{"version":3,"names":["Title","title","onClick","isDragging","Boolean"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as Dashboard } from \"@material-design-icons/svg/filled/home.svg\";\n\nimport { Container, IconContainer } from \"./styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\ntype Props = {\n    title: string;\n    isDragging: boolean;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n};\n\nexport const Title: React.FC<Props> = ({ title, onClick, isDragging }) => {\n    return (\n        <Container onClick={onClick} hasClickAction={Boolean(onClick)} isDragging={isDragging}>\n            <IconContainer>\n                <Dashboard />\n            </IconContainer>\n            <Typography use={\"subtitle2\"}>{title}</Typography>\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAEA;AACA;AAQO,IAAMA,KAAsB,GAAG,SAAzBA,KAAsB,OAAuC;EAAA,IAAjCC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAEC,UAAU,QAAVA,UAAU;EAC/D,oBACI,6BAAC,iBAAS;IAAC,OAAO,EAAED,OAAQ;IAAC,cAAc,EAAEE,OAAO,CAACF,OAAO,CAAE;IAAC,UAAU,EAAEC;EAAW,gBAClF,6BAAC,qBAAa,qBACV,6BAAC,oBAAS,OAAG,CACD,eAChB,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAY,GAAEF,KAAK,CAAc,CAC1C;AAEpB,CAAC;AAAC"}

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

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IconContainer = exports.Container = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var Container = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Container",
   target: "eteslgk0"
@@ -23,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,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,gKASR;EAAA,IAAGC,cAAH,QAAGA,cAAH;EAAA,OAAwBA,cAAc,IAAI,SAA1C;AAAA,CATQ,sBAWA;EAAA,IAAGC,UAAH,SAAGA,UAAH;EAAA,OAAqBA,UAAU,GAAG,MAAH,GAAY,MAA3C;AAAA,CAXA,MAAf;;AAcA,IAAMC,aAAa,oBAAGH,eAAH;EAAA;EAAA;AAAA,8CAAnB"}
+{"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 {};