@webiny/app-aco 5.37.0-beta.0 → 5.37.0-beta.1

package/components/FolderTree/Loader/styled.js

@@ -9,10 +9,10 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var Container = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Container",
   target: "e11b5r9r0"
-})("padding:42px 4px 0;");
+})("padding:4px;");
 exports.Container = Container;
 var SkeletonWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   label: "SkeletonWrapper",
   target: "e11b5r9r1"
-})("width:85%;margin:0 8px 8px;height:24px;&:last-of-type{margin-bottom:0;}");
+})("width:100%;align-content:center;margin:8px auto;height:24px;&:last-of-type{margin-bottom:0;}");
 exports.SkeletonWrapper = SkeletonWrapper;

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

@@ -1 +1 @@
-{"version":3,"names":["Container","styled","SkeletonWrapper"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    padding: 42px 4px 0;\n`;\n\nexport const SkeletonWrapper = styled(\"div\")`\n    width: 85%;\n    margin: 0 8px 8px;\n    height: 24px;\n\n    &:last-of-type {\n        margin-bottom: 0;\n    }\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,yBAEpC;AAAC;AAEK,IAAMC,eAAe,oBAAGD,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,6EAQ1C;AAAC"}
+{"version":3,"names":["_styled","_interopRequireDefault","require","Container","styled","label","target","exports","SkeletonWrapper"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    padding: 4px;\n`;\n\nexport const SkeletonWrapper = styled(\"div\")`\n    width: 100%;\n    align-content: center;\n    margin: 8px auto;\n    height: 24px;\n\n    &:last-of-type {\n        margin-bottom: 0;\n    }\n`;\n"],"mappings":";;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEO,IAAMC,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,kBAEpC;AAACC,OAAA,CAAAJ,SAAA,GAAAA,SAAA;AAEK,IAAMK,eAAe,oBAAGJ,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,kGAS1C;AAACC,OAAA,CAAAC,eAAA,GAAAA,eAAA"}

package/components/FolderTree/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 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 \"./styled\";\n\nimport { FolderItem } from \"~/types\";\n\nconst t = i18n.ns(\"app-aco/components/folder-tree/menu-actions\");\n\ninterface MenuActionsProps {\n    folder: FolderItem;\n    onUpdateFolder: (data: FolderItem) => void;\n    onDeleteFolder: (data: FolderItem) => void;\n}\n\nexport const MenuActions: React.VFC<MenuActionsProps> = ({\n    folder,\n    onUpdateFolder,\n    onDeleteFolder\n}) => {\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;AAAsD;AAItD,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,6CAA6C,CAAC;AAQzD,IAAMC,WAAwC,GAAG,SAA3CA,WAAwC,OAI/C;EAAA,IAHFC,MAAM,QAANA,MAAM;IACNC,cAAc,QAAdA,cAAc;IACdC,cAAc,QAAdA,cAAc;EAEd,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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_delete","_edit","_more_vert","_i18n","_Icon","_Menu","_styled","_templateObject","_templateObject2","t","i18n","ns","MenuActions","_ref","folder","onUpdateFolder","onDeleteFolder","default","createElement","Container","className","Menu","handle","ReactComponent","renderToPortal","MenuItem","onClick","ListItemGraphic","Icon","icon","_taggedTemplateLiteral2","exports"],"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 \"./styled\";\n\nimport { FolderItem } from \"~/types\";\n\nconst t = i18n.ns(\"app-aco/components/folder-tree/menu-actions\");\n\ninterface MenuActionsProps {\n    folder: FolderItem;\n    onUpdateFolder: (data: FolderItem) => void;\n    onDeleteFolder: (data: FolderItem) => void;\n}\n\nexport const MenuActions: React.VFC<MenuActionsProps> = ({\n    folder,\n    onUpdateFolder,\n    onDeleteFolder\n}) => {\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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAAO,OAAA,GAAAP,OAAA;AAAsD,IAAAQ,eAAA,EAAAC,gBAAA;AAItD,IAAMC,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,6CAA6C,CAAC;AAQzD,IAAMC,WAAwC,GAAG,SAA3CA,WAAwCA,CAAAC,IAAA,EAI/C;EAAA,IAHFC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,cAAc,GAAAF,IAAA,CAAdE,cAAc;IACdC,cAAc,GAAAH,IAAA,CAAdG,cAAc;EAEd,IAAIF,MAAM,EAAE;IACR,oBACIjB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACZ,OAAA,CAAAa,SAAS;MAACC,SAAS,EAAE;IAA0B,gBAC5CvB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACb,KAAA,CAAAgB,IAAI;MAACC,MAAM,eAAEzB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAChB,UAAA,CAAAqB,cAAI,MAAE,CAAE;MAACC,cAAc,EAAE;IAAK,gBACzC3B,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACb,KAAA,CAAAoB,QAAQ;MAACC,OAAO,EAAE,SAAAA,QAAA;QAAA,OAAMX,cAAc,CAACD,MAAM,CAAC;MAAA;IAAC,gBAC5CjB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACZ,OAAA,CAAAqB,eAAe,qBACZ9B,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACd,KAAA,CAAAwB,IAAI;MAACC,IAAI,eAAEhC,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACjB,KAAA,CAAAsB,cAAI,MAAE;IAAE,CAAE,CACV,CAAC,EACjBd,CAAC,CAAAF,eAAA,KAAAA,eAAA,OAAAuB,uBAAA,CAAAb,OAAA,aACI,CAAC,eACXpB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACb,KAAA,CAAAoB,QAAQ;MAACC,OAAO,EAAE,SAAAA,QAAA;QAAA,OAAMV,cAAc,CAACF,MAAM,CAAC;MAAA;IAAC,gBAC5CjB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACZ,OAAA,CAAAqB,eAAe,qBACZ9B,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACd,KAAA,CAAAwB,IAAI;MAACC,IAAI,eAAEhC,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAClB,OAAA,CAAAuB,cAAM,MAAE;IAAE,CAAE,CACZ,CAAC,EACjBd,CAAC,CAAAD,gBAAA,KAAAA,gBAAA,OAAAsB,uBAAA,CAAAb,OAAA,eACI,CACR,CACC,CAAC;EAEpB;EAEA,OAAO,IAAI;AACf,CAAC;AAACc,OAAA,CAAAnB,WAAA,GAAAA,WAAA"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["_styled","_interopRequireDefault","require","_List","Container","styled","label","target","exports","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,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEO,IAAME,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,mEAKpC;AAACC,OAAA,CAAAJ,SAAA,GAAAA,SAAA;AAEK,IAAMK,eAAe,oBAAGJ,eAAM,EAACK,qBAAmB;EAAAJ,KAAA;EAAAC,MAAA;AAAA,uBAExD;AAACC,OAAA,CAAAC,eAAA,GAAAA,eAAA"}

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

@@ -1,18 +1,19 @@
 import React from "react";
 import { NodeModel } from "@minoru/react-dnd-treeview";
-import { DndItemData } from "../../../types";
+import { DndFolderItem, FolderItem } from "../../../types";
 declare type NodeProps = {
-    node: NodeModel<DndItemData>;
+    node: NodeModel<DndFolderItem>;
     depth: number;
     isOpen: boolean;
     enableActions?: boolean;
-    onToggle: (id: NodeModel<DndItemData>["id"]) => void;
-    onClick: (data: NodeModel<DndItemData>["data"]) => void;
-    onUpdateFolder: (data: NodeModel<DndItemData>["data"]) => void;
-    onDeleteFolder: (data: NodeModel<DndItemData>["data"]) => void;
+    onToggle: (id: string | number) => void;
+    onClick: (data: FolderItem) => void;
+    onUpdateFolder: (data: FolderItem) => void;
+    onDeleteFolder: (data: FolderItem) => void;
 };
 declare type FolderProps = {
     text: string;
+    isRoot: boolean;
     isOpen: boolean;
     isFocused?: boolean;
 };

package/components/FolderTree/Node/index.js

@@ -1,22 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Node = exports.FolderNode = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 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 _home = require("@material-design-icons/svg/filled/home.svg");
 var _reactDndTreeview = require("@minoru/react-dnd-treeview");
 var _MenuActions = require("../MenuActions");
 var _styled = require("./styled");
+var _utils = require("@webiny/utils");
+var _constants = require("../../../constants");
 var FolderNode = function FolderNode(_ref) {
-  var isOpen = _ref.isOpen,
+  var isRoot = _ref.isRoot,
+    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, {
+  var icon = isRoot ? /*#__PURE__*/_react.default.createElement(_home.ReactComponent, null) : isOpen ? /*#__PURE__*/_react.default.createElement(_folder_openFill.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_folderFill.ReactComponent, null);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.FolderIcon, null, icon), /*#__PURE__*/_react.default.createElement(_styled.Text, {
     className: isFocused ? "focused" : "",
     use: "body2"
   }, text));
@@ -32,9 +37,10 @@ var Node = function Node(_ref2) {
     onClick = _ref2.onClick,
     onUpdateFolder = _ref2.onUpdateFolder,
     onDeleteFolder = _ref2.onDeleteFolder;
+  var isRoot = node.id === _constants.ROOT_FOLDER;
   // 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 indent = depth === 1 ? 4 : (depth - 1) * 20 + 8;
   var dragOverProps = (0, _reactDndTreeview.useDragOver)(node.id, isOpen, onToggle);
   var handleToggle = function handleToggle(e) {
     e.stopPropagation();
@@ -43,23 +49,32 @@ var Node = function Node(_ref2) {
   var handleClick = function handleClick(e) {
     e.stopPropagation();
     onClick(node.data);
-    onToggle(node.id);
+    if (node.data.id !== _constants.ROOT_FOLDER) {
+      onToggle(node.id);
+    }
   };
+  var id = (0, _react.useMemo)(function () {
+    var _parseIdentifier = (0, _utils.parseIdentifier)(String(node.id)),
+      id = _parseIdentifier.id;
+    return id;
+  }, [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: {
       paddingInlineStart: indent
     }
-  }, dragOverProps), /*#__PURE__*/_react.default.createElement(_styled.ArrowIcon, {
+  }, dragOverProps), isRoot ? null : /*#__PURE__*/_react.default.createElement(_styled.ArrowIcon, {
     isOpen: isOpen,
     onClick: handleToggle
   }, /*#__PURE__*/_react.default.createElement(_arrow_right.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_styled.Content, {
-    onClick: handleClick
+    onClick: handleClick,
+    className: "aco-folder-".concat(id)
   }, /*#__PURE__*/_react.default.createElement(FolderNode, {
+    isRoot: isRoot,
     text: node.text,
-    isOpen: isOpen,
+    isOpen: isRoot ? true : isOpen,
     isFocused: !!((_node$data2 = node.data) !== null && _node$data2 !== void 0 && _node$data2.isFocused)
-  })), node.data && enableActions && /*#__PURE__*/_react.default.createElement(_MenuActions.MenuActions, {
+  })), node.data && enableActions && !isRoot && /*#__PURE__*/_react.default.createElement(_MenuActions.MenuActions, {
     folder: node.data,
     onUpdateFolder: onUpdateFolder,
     onDeleteFolder: onDeleteFolder

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

@@ -1 +1 @@
-{"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 \"../MenuActions\";\n\nimport { Container, ArrowIcon, FolderIcon, Text, Content } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype NodeProps = {\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: React.VFC<FolderProps> = ({ isOpen, isFocused, text }) => {\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: React.VFC<NodeProps> = ({\n    node,\n    depth,\n    isOpen,\n    enableActions,\n    onToggle,\n    onClick,\n    onUpdateFolder,\n    onDeleteFolder\n}) => {\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,UAAkC,GAAG,SAArCA,UAAkC,OAAoC;EAAA,IAA9BC,MAAM,QAANA,MAAM;IAAEC,SAAS,QAATA,SAAS;IAAEC,IAAI,QAAJA,IAAI;EACxE,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,IAA0B,GAAG,SAA7BA,IAA0B,QASjC;EAAA;EAAA,IARFC,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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_arrow_right","_folderFill","_folder_openFill","_home","_reactDndTreeview","_MenuActions","_styled","_utils","_constants","FolderNode","_ref","isRoot","isOpen","isFocused","text","icon","default","createElement","ReactComponent","Fragment","FolderIcon","Text","className","use","exports","Node","_ref2","_node$data","_node$data2","node","depth","enableActions","onToggle","onClick","onUpdateFolder","onDeleteFolder","id","ROOT_FOLDER","indent","dragOverProps","useDragOver","handleToggle","e","stopPropagation","handleClick","data","useMemo","_parseIdentifier","parseIdentifier","String","Container","Object","assign","style","paddingInlineStart","ArrowIcon","Content","concat","MenuActions","folder"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } 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 { ReactComponent as HomeIcon } from \"@material-design-icons/svg/filled/home.svg\";\nimport { NodeModel, useDragOver } from \"@minoru/react-dnd-treeview\";\nimport { MenuActions } from \"../MenuActions\";\nimport { Container, ArrowIcon, FolderIcon, Text, Content } from \"./styled\";\nimport { DndFolderItem, FolderItem } from \"~/types\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { ROOT_FOLDER } from \"~/constants\";\n\ntype NodeProps = {\n    node: NodeModel<DndFolderItem>;\n    depth: number;\n    isOpen: boolean;\n    enableActions?: boolean;\n    onToggle: (id: string | number) => void;\n    onClick: (data: FolderItem) => void;\n    onUpdateFolder: (data: FolderItem) => void;\n    onDeleteFolder: (data: FolderItem) => void;\n};\n\ntype FolderProps = {\n    text: string;\n    isRoot: boolean;\n    isOpen: boolean;\n    isFocused?: boolean;\n};\n\nexport const FolderNode: React.VFC<FolderProps> = ({ isRoot, isOpen, isFocused, text }) => {\n    const icon = isRoot ? <HomeIcon /> : isOpen ? <FolderOpen /> : <Folder />;\n\n    return (\n        <>\n            <FolderIcon>{icon}</FolderIcon>\n            <Text className={isFocused ? \"focused\" : \"\"} use={\"body2\"}>\n                {text}\n            </Text>\n        </>\n    );\n};\n\nexport const Node: React.VFC<NodeProps> = ({\n    node,\n    depth,\n    isOpen,\n    enableActions,\n    onToggle,\n    onClick,\n    onUpdateFolder,\n    onDeleteFolder\n}) => {\n    const isRoot = node.id === ROOT_FOLDER;\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 === 1 ? 4 : (depth - 1) * 20 + 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        if (node.data!.id !== ROOT_FOLDER) {\n            onToggle(node.id);\n        }\n    };\n\n    const id = useMemo(() => {\n        const { id } = parseIdentifier(String(node.id));\n        return id;\n    }, [node.id]);\n\n    return (\n        <Container\n            isFocused={!!node.data?.isFocused}\n            style={{ paddingInlineStart: indent }}\n            {...dragOverProps}\n        >\n            {isRoot ? null : (\n                <ArrowIcon isOpen={isOpen} onClick={handleToggle}>\n                    <ArrowRight />\n                </ArrowIcon>\n            )}\n            <Content onClick={handleClick} className={`aco-folder-${id}`}>\n                <FolderNode\n                    isRoot={isRoot}\n                    text={node.text}\n                    isOpen={isRoot ? true : isOpen}\n                    isFocused={!!node.data?.isFocused}\n                />\n            </Content>\n            {node.data && enableActions && !isRoot && (\n                <MenuActions\n                    folder={node.data}\n                    onUpdateFolder={onUpdateFolder}\n                    onDeleteFolder={onDeleteFolder}\n                />\n            )}\n        </Container>\n    );\n};\n"],"mappings":"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"}

package/components/FolderTree/Node/styled.js

@@ -10,7 +10,7 @@ var _Typography = require("@webiny/ui/Typography");
 var Container = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Container",
   target: "e1py1adz0"
-})("display:flex;align-items:center;padding:4px 32px 4px 0;background:", function (props) {
+})("display:flex;align-items:center;padding:4px 0 4px 4px;background:", function (props) {
   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;

package/components/FolderTree/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-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"}
+{"version":3,"names":["_styled","_interopRequireDefault","require","_Typography","Container","styled","label","target","props","isFocused","exports","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 0 4px 4px;\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,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAUO,IAAME,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,wEAInB,UAAAC,KAAK;EAAA,OAAIA,KAAK,CAACC,SAAS,IAAI,gCAAgC;AAAA,+IAO7E;AAACC,OAAA,CAAAN,SAAA,GAAAA,SAAA;AAEK,IAAMO,IAAI,oBAAGN,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,sJAQ/B;AAACG,OAAA,CAAAC,IAAA,GAAAA,IAAA;AAEK,IAAMC,SAAS,oBAAGP,eAAM,EAACM,IAAI;EAAAL,KAAA;EAAAC,MAAA;AAAA,kDAEnB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACK,MAAM,GAAG,eAAe,GAAG,cAAc;AAAA,CAAC,MAC1E;AAACH,OAAA,CAAAE,SAAA,GAAAA,SAAA;AAEK,IAAME,UAAU,oBAAGT,eAAM,EAACM,IAAI;EAAAL,KAAA;EAAAC,MAAA;AAAA,uBAEpC;AAACG,OAAA,CAAAI,UAAA,GAAAA,UAAA;AAEK,IAAMC,OAAO,oBAAGV,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,mGAOlC;AAACG,OAAA,CAAAK,OAAA,GAAAA,OAAA;AAEK,IAAMC,IAAI,oBAAGX,eAAM,EAACY,sBAAU;EAAAX,KAAA;EAAAC,MAAA;AAAA,4GAQpC;AAACG,OAAA,CAAAM,IAAA,GAAAA,IAAA"}

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { DragLayerMonitorProps } from "@minoru/react-dnd-treeview";
-import { DndItemData } from "../../../types";
+import { DndFolderItem } from "../../../types";
 declare type NodePreviewProps = {
-    monitorProps: DragLayerMonitorProps<DndItemData>;
+    monitorProps: DragLayerMonitorProps<DndFolderItem>;
 };
 export declare const NodePreview: React.VFC<NodePreviewProps>;
 export {};

package/components/FolderTree/NodePreview/index.js

@@ -12,7 +12,8 @@ var NodePreview = function NodePreview(props) {
   var item = props.monitorProps.item;
   return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_Node.FolderNode, {
     text: item.text,
-    isOpen: false
+    isOpen: false,
+    isRoot: false
   }));
 };
 exports.NodePreview = NodePreview;

package/components/FolderTree/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 \"../Node\";\nimport { Container } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype NodePreviewProps = {\n    monitorProps: DragLayerMonitorProps<DndItemData>;\n};\n\nexport const NodePreview: React.VFC<NodePreviewProps> = 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,WAAwC,GAAG,SAA3CA,WAAwC,CAAGC,KAAK,EAAI;EAC7D,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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_Node","_styled","NodePreview","props","item","monitorProps","default","createElement","Container","FolderNode","text","isOpen","isRoot","exports"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { DragLayerMonitorProps } from \"@minoru/react-dnd-treeview\";\n\nimport { FolderNode } from \"../Node\";\nimport { Container } from \"./styled\";\n\nimport { DndFolderItem } from \"~/types\";\n\ntype NodePreviewProps = {\n    monitorProps: DragLayerMonitorProps<DndFolderItem>;\n};\n\nexport const NodePreview: React.VFC<NodePreviewProps> = props => {\n    const item = props.monitorProps.item;\n\n    return (\n        <Container>\n            <FolderNode text={item.text} isOpen={false} isRoot={false} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAQO,IAAMG,WAAwC,GAAG,SAA3CA,WAAwCA,CAAGC,KAAK,EAAI;EAC7D,IAAMC,IAAI,GAAGD,KAAK,CAACE,YAAY,CAACD,IAAI;EAEpC,oBACIP,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,OAAA,CAAAO,SAAS,qBACNX,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,KAAA,CAAAS,UAAU;IAACC,IAAI,EAAEN,IAAI,CAACM,IAAK;IAACC,MAAM,EAAE,KAAM;IAACC,MAAM,EAAE;EAAM,CAAE,CACrD,CAAC;AAEpB,CAAC;AAACC,OAAA,CAAAX,WAAA,GAAAA,WAAA"}

package/components/FolderTree/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,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,iRAUpC;AAAC"}
+{"version":3,"names":["_styled","_interopRequireDefault","require","Container","styled","label","target","exports"],"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,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEO,IAAMC,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,iRAUpC;AAACC,OAAA,CAAAJ,SAAA,GAAAA,SAAA"}

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

@@ -1,9 +1,9 @@
 import { NodeModel } from "@minoru/react-dnd-treeview";
 import React from "react";
-import { DndItemData } from "../../../types";
+import { DndFolderItem } from "../../../types";
 interface PlaceholderProps {
     depth: number;
-    node: NodeModel<DndItemData>;
+    node: NodeModel<DndFolderItem>;
 }
 export declare const Placeholder: React.VFC<PlaceholderProps>;
 export {};

package/components/FolderTree/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 PlaceholderProps {\n    depth: number;\n    node: NodeModel<DndItemData>;\n}\n\nexport const Placeholder: React.VFC<PlaceholderProps> = ({ depth }) => {\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,WAAwC,GAAG,SAA3CA,WAAwC,OAAkB;EAAA,IAAZC,KAAK,QAALA,KAAK;EAC5D;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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_styled","Placeholder","_ref","depth","left","default","createElement","Element","style","exports"],"sources":["index.tsx"],"sourcesContent":["import { NodeModel } from \"@minoru/react-dnd-treeview\";\nimport React from \"react\";\n\nimport { Element } from \"./styled\";\nimport { DndFolderItem } from \"~/types\";\n\ninterface PlaceholderProps {\n    depth: number;\n    node: NodeModel<DndFolderItem>;\n}\n\nexport const Placeholder: React.VFC<PlaceholderProps> = ({ depth }) => {\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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAQO,IAAME,WAAwC,GAAG,SAA3CA,WAAwCA,CAAAC,IAAA,EAAkB;EAAA,IAAZC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAC5D;EACA;EACA,IAAMC,IAAI,GAAGD,KAAK,GAAG,EAAE,GAAG,CAAC;EAC3B,oBAAON,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,OAAA,CAAAO,OAAO;IAACC,KAAK,EAAE;MAAEJ,IAAI,EAAJA;IAAK;EAAE,CAAE,CAAC;AACvC,CAAC;AAACK,OAAA,CAAAR,WAAA,GAAAA,WAAA"}

package/components/FolderTree/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,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,+HAOlC;AAAC"}
+{"version":3,"names":["_styled","_interopRequireDefault","require","Element","styled","label","target","exports"],"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,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEO,IAAMC,OAAO,oBAAGC,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,+HAOlC;AAACC,OAAA,CAAAJ,OAAA,GAAAA,OAAA"}

package/components/FolderTree/index.d.ts

@@ -1,16 +1,13 @@
-/// <reference types="web" />
 import React from "react";
-import { NodeModel } from "@minoru/react-dnd-treeview";
-import { DndItemData } from "../../types";
-declare type FolderTreeProps = {
-    type: string;
-    title: string;
-    onFolderClick: (data: NodeModel<DndItemData>["data"]) => void;
+import { Loader } from "./Loader";
+import { FolderItem } from "../../types";
+export { Loader };
+export interface FolderTreeProps {
+    onFolderClick: (data: FolderItem) => void;
     enableCreate?: boolean;
+    rootFolderLabel?: string;
     enableActions?: boolean;
-    onTitleClick?: (event: React.MouseEvent<HTMLElement>) => void;
     focusedFolderId?: string;
     hiddenFolderIds?: string[];
-};
+}
 export declare const FolderTree: React.VFC<FolderTreeProps>;
-export {};

package/components/FolderTree/index.js

@@ -6,56 +6,61 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FolderTree = void 0;
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function get() {
+    return _Loader.Loader;
+  }
+});
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _useFolders2 = require("../../hooks/useFolders");
 var _ButtonCreate = require("./ButtonCreate");
 var _Empty = require("./Empty");
 var _Loader = require("./Loader");
 var _List = require("./List");
-var _Title = require("./Title");
 var _ = require("./..");
 var _styled = require("./styled");
+var _constants = require("../../constants");
 var FolderTree = function FolderTree(_ref) {
-  var type = _ref.type,
-    title = _ref.title,
-    focusedFolderId = _ref.focusedFolderId,
+  var focusedFolderId = _ref.focusedFolderId,
     hiddenFolderIds = _ref.hiddenFolderIds,
     enableActions = _ref.enableActions,
     enableCreate = _ref.enableCreate,
     onFolderClick = _ref.onFolderClick,
-    onTitleClick = _ref.onTitleClick;
-  var _useFolders = (0, _useFolders2.useFolders)(type),
+    rootFolderLabel = _ref.rootFolderLabel;
+  var _useFolders = (0, _useFolders2.useFolders)(),
     folders = _useFolders.folders;
+  var localFolders = (0, _react.useMemo)(function () {
+    if (!folders) {
+      return [];
+    }
+    return folders.reduce(function (acc, item) {
+      if (item.id === _constants.ROOT_FOLDER && rootFolderLabel) {
+        return [].concat((0, _toConsumableArray2.default)(acc), [(0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          title: rootFolderLabel
+        })]);
+      }
+      return [].concat((0, _toConsumableArray2.default)(acc), [item]);
+    }, []);
+  }, [folders]);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     createDialogOpen = _useState2[0],
     setCreateDialogOpen = _useState2[1];
-
-  // Little CSS trick here: since the folder title has absolute position, user can drag a folder over it and move it to root folder.
-  // While we are moving folders around we disable any title pointer event.
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isDragging = _useState4[0],
-    setIsDragging = _useState4[1];
   var renderList = function renderList() {
     if (!folders) {
       return /*#__PURE__*/_react.default.createElement(_Loader.Loader, null);
     }
-    if (folders.length > 0) {
+    if (localFolders.length > 0) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_List.List, {
-        type: type,
-        folders: folders,
+        folders: localFolders,
         onFolderClick: onFolderClick,
         focusedFolderId: focusedFolderId,
         hiddenFolderIds: hiddenFolderIds,
-        enableActions: enableActions,
-        onDragStart: function onDragStart() {
-          return setIsDragging(true);
-        },
-        onDragEnd: function onDragEnd() {
-          return setIsDragging(false);
-        }
+        enableActions: enableActions
       }), enableCreate && /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
         onClick: function onClick() {
           return setCreateDialogOpen(true);
@@ -68,17 +73,12 @@ var FolderTree = function FolderTree(_ref) {
       }
     }));
   };
-  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_Title.Title, {
-    title: title,
-    onClick: onTitleClick,
-    isDragging: isDragging
-  }), renderList(), enableCreate && /*#__PURE__*/_react.default.createElement(_.FolderDialogCreate, {
-    type: type,
+  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, renderList(), enableCreate && /*#__PURE__*/_react.default.createElement(_.FolderDialogCreate, {
     open: createDialogOpen,
     onClose: function onClose() {
       return setCreateDialogOpen(false);
     },
-    currentParentId: undefined
+    currentParentId: focusedFolderId
   }));
 };
 exports.FolderTree = FolderTree;

package/components/FolderTree/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["FolderTree","type","title","focusedFolderId","hiddenFolderIds","enableActions","enableCreate","onFolderClick","onTitleClick","useFolders","folders","useState","createDialogOpen","setCreateDialogOpen","isDragging","setIsDragging","renderList","length","undefined"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { NodeModel } from \"@minoru/react-dnd-treeview\";\n\nimport { useFolders } from \"~/hooks/useFolders\";\n\nimport { CreateButton } from \"./ButtonCreate\";\nimport { Empty } from \"./Empty\";\nimport { Loader } from \"./Loader\";\nimport { List } from \"./List\";\nimport { Title } from \"./Title\";\nimport { FolderDialogCreate } from \"~/components\";\n\nimport { Container } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype FolderTreeProps = {\n    type: string;\n    title: string;\n    onFolderClick: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    enableCreate?: boolean;\n    enableActions?: boolean;\n    onTitleClick?: (event: React.MouseEvent<HTMLElement>) => void;\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n};\n\nexport const FolderTree: React.VFC<FolderTreeProps> = ({\n    type,\n    title,\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    enableCreate,\n    onFolderClick,\n    onTitleClick\n}) => {\n    const { folders } = useFolders(type);\n    const [createDialogOpen, setCreateDialogOpen] = useState<boolean>(false);\n\n    // Little CSS trick here: since the folder title has absolute position, user can drag a folder over it and move it to root folder.\n    // While we are moving folders around we disable any title pointer event.\n    const [isDragging, setIsDragging] = useState<boolean>(false);\n\n    const renderList = () => {\n        if (!folders) {\n            return <Loader />;\n        }\n\n        if (folders.length > 0) {\n            return (\n                <>\n                    <List\n                        type={type}\n                        folders={folders}\n                        onFolderClick={onFolderClick}\n                        focusedFolderId={focusedFolderId}\n                        hiddenFolderIds={hiddenFolderIds}\n                        enableActions={enableActions}\n                        onDragStart={() => setIsDragging(true)}\n                        onDragEnd={() => setIsDragging(false)}\n                    />\n                    {enableCreate && <CreateButton onClick={() => setCreateDialogOpen(true)} />}\n                </>\n            );\n        }\n\n        return (\n            <>\n                <Empty />\n                <CreateButton onClick={() => setCreateDialogOpen(true)} />\n            </>\n        );\n    };\n\n    return (\n        <Container>\n            <Title title={title} onClick={onTitleClick} isDragging={isDragging} />\n            {renderList()}\n            {enableCreate && (\n                <FolderDialogCreate\n                    type={type}\n                    open={createDialogOpen}\n                    onClose={() => setCreateDialogOpen(false)}\n                    currentParentId={undefined}\n                />\n            )}\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAIA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAeO,IAAMA,UAAsC,GAAG,SAAzCA,UAAsC,OAS7C;EAAA,IARFC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACLC,eAAe,QAAfA,eAAe;IACfC,eAAe,QAAfA,eAAe;IACfC,aAAa,QAAbA,aAAa;IACbC,YAAY,QAAZA,YAAY;IACZC,aAAa,QAAbA,aAAa;IACbC,YAAY,QAAZA,YAAY;EAEZ,kBAAoB,IAAAC,uBAAU,EAACR,IAAI,CAAC;IAA5BS,OAAO,eAAPA,OAAO;EACf,gBAAgD,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjEC,gBAAgB;IAAEC,mBAAmB;;EAE5C;EACA;EACA,iBAAoC,IAAAF,eAAQ,EAAU,KAAK,CAAC;IAAA;IAArDG,UAAU;IAAEC,aAAa;EAEhC,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAI,CAACN,OAAO,EAAE;MACV,oBAAO,6BAAC,cAAM,OAAG;IACrB;IAEA,IAAIA,OAAO,CAACO,MAAM,GAAG,CAAC,EAAE;MACpB,oBACI,yEACI,6BAAC,UAAI;QACD,IAAI,EAAEhB,IAAK;QACX,OAAO,EAAES,OAAQ;QACjB,aAAa,EAAEH,aAAc;QAC7B,eAAe,EAAEJ,eAAgB;QACjC,eAAe,EAAEC,eAAgB;QACjC,aAAa,EAAEC,aAAc;QAC7B,WAAW,EAAE;UAAA,OAAMU,aAAa,CAAC,IAAI,CAAC;QAAA,CAAC;QACvC,SAAS,EAAE;UAAA,OAAMA,aAAa,CAAC,KAAK,CAAC;QAAA;MAAC,EACxC,EACDT,YAAY,iBAAI,6BAAC,0BAAY;QAAC,OAAO,EAAE;UAAA,OAAMO,mBAAmB,CAAC,IAAI,CAAC;QAAA;MAAC,EAAG,CAC5E;IAEX;IAEA,oBACI,yEACI,6BAAC,YAAK,OAAG,eACT,6BAAC,0BAAY;MAAC,OAAO,EAAE;QAAA,OAAMA,mBAAmB,CAAC,IAAI,CAAC;MAAA;IAAC,EAAG,CAC3D;EAEX,CAAC;EAED,oBACI,6BAAC,iBAAS,qBACN,6BAAC,YAAK;IAAC,KAAK,EAAEX,KAAM;IAAC,OAAO,EAAEM,YAAa;IAAC,UAAU,EAAEM;EAAW,EAAG,EACrEE,UAAU,EAAE,EACZV,YAAY,iBACT,6BAAC,oBAAkB;IACf,IAAI,EAAEL,IAAK;IACX,IAAI,EAAEW,gBAAiB;IACvB,OAAO,EAAE;MAAA,OAAMC,mBAAmB,CAAC,KAAK,CAAC;IAAA,CAAC;IAC1C,eAAe,EAAEK;EAAU,EAElC,CACO;AAEpB,CAAC;AAAC"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_useFolders2","_ButtonCreate","_Empty","_Loader","_List","_","_styled","_constants","FolderTree","_ref","focusedFolderId","hiddenFolderIds","enableActions","enableCreate","onFolderClick","rootFolderLabel","_useFolders","useFolders","folders","localFolders","useMemo","reduce","acc","item","id","ROOT_FOLDER","concat","_toConsumableArray2","default","_objectSpread2","title","_useState","useState","_useState2","_slicedToArray2","createDialogOpen","setCreateDialogOpen","renderList","createElement","Loader","length","Fragment","List","CreateButton","onClick","Empty","Container","FolderDialogCreate","open","onClose","currentParentId","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { useFolders } from \"~/hooks/useFolders\";\nimport { CreateButton } from \"./ButtonCreate\";\nimport { Empty } from \"./Empty\";\nimport { Loader } from \"./Loader\";\nimport { List } from \"./List\";\nimport { FolderDialogCreate } from \"~/components\";\nimport { Container } from \"./styled\";\nimport { FolderItem } from \"~/types\";\nimport { ROOT_FOLDER } from \"~/constants\";\n\nexport { Loader };\n\nexport interface FolderTreeProps {\n    onFolderClick: (data: FolderItem) => void;\n    enableCreate?: boolean;\n    rootFolderLabel?: string;\n    enableActions?: boolean;\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n}\n\nexport const FolderTree: React.VFC<FolderTreeProps> = ({\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    enableCreate,\n    onFolderClick,\n    rootFolderLabel\n}) => {\n    const { folders } = useFolders();\n    const localFolders = useMemo(() => {\n        if (!folders) {\n            return [];\n        }\n\n        return folders.reduce<FolderItem[]>((acc, item) => {\n            if (item.id === ROOT_FOLDER && rootFolderLabel) {\n                return [...acc, { ...item, title: rootFolderLabel }];\n            }\n            return [...acc, item];\n        }, []);\n    }, [folders]);\n\n    const [createDialogOpen, setCreateDialogOpen] = useState<boolean>(false);\n\n    const renderList = () => {\n        if (!folders) {\n            return <Loader />;\n        }\n\n        if (localFolders.length > 0) {\n            return (\n                <>\n                    <List\n                        folders={localFolders}\n                        onFolderClick={onFolderClick}\n                        focusedFolderId={focusedFolderId}\n                        hiddenFolderIds={hiddenFolderIds}\n                        enableActions={enableActions}\n                    />\n                    {enableCreate && <CreateButton onClick={() => setCreateDialogOpen(true)} />}\n                </>\n            );\n        }\n\n        return (\n            <>\n                <Empty />\n                <CreateButton onClick={() => setCreateDialogOpen(true)} />\n            </>\n        );\n    };\n    return (\n        <Container>\n            {renderList()}\n            {enableCreate && (\n                <FolderDialogCreate\n                    open={createDialogOpen}\n                    onClose={() => setCreateDialogOpen(false)}\n                    currentParentId={focusedFolderId}\n                />\n            )}\n        </Container>\n    );\n};\n"],"mappings":"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"}

package/components/FolderTree/styled.js

@@ -9,5 +9,5 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var Container = /*#__PURE__*/(0, _styled.default)("div", {
   label: "Container",
   target: "e3yen9i0"
-})("position:relative;margin:0;& .treeRoot{box-sizing:border-box;padding:36px 0 0;min-width:200px;}& .dropTarget{background:var(--mdc-theme-on-background);}& .draggingSource{opacity:0.5;}& .placeholderContainer{position:relative;}");
+})("position:relative;margin:0;& .treeRoot{box-sizing:border-box;min-width:200px;}& .dropTarget{background:var(--mdc-theme-on-background);}& .draggingSource{opacity:0.5;}& .placeholderContainer{position:relative;}");
 exports.Container = Container;

package/components/FolderTree/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: relative;\n    margin: 0;\n\n    & .treeRoot {\n        box-sizing: border-box;\n        padding: 36px 0 0;\n        min-width: 200px;\n    }\n\n    & .dropTarget {\n        background: var(--mdc-theme-on-background);\n    }\n\n    & .draggingSource {\n        opacity: 0.5;\n    }\n\n    & .placeholderContainer {\n        position: relative;\n    }\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,wOAqBpC;AAAC"}
+{"version":3,"names":["_styled","_interopRequireDefault","require","Container","styled","label","target","exports"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    position: relative;\n    margin: 0;\n\n    & .treeRoot {\n        box-sizing: border-box;\n        min-width: 200px;\n    }\n\n    & .dropTarget {\n        background: var(--mdc-theme-on-background);\n    }\n\n    & .draggingSource {\n        opacity: 0.5;\n    }\n\n    & .placeholderContainer {\n        position: relative;\n    }\n`;\n"],"mappings":";;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEO,IAAMC,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,uNAoBpC;AAACC,OAAA,CAAAJ,SAAA,GAAAA,SAAA"}

package/components/Search/Search.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface SearchProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare const Search: React.VFC<SearchProps>;
+export {};

package/components/Search/Search.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Search = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SearchUI = _interopRequireDefault(require("@webiny/app-admin/components/SearchUI"));
+var _styled = require("./styled");
+var Search = function Search(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/_react.default.createElement(_styled.SearchWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchUI.default, {
+    value: value,
+    onChange: onChange
+  }));
+};
+exports.Search = Search;

package/components/Search/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_SearchUI","_styled","Search","_ref","value","onChange","default","createElement","SearchWrapper","exports"],"sources":["Search.tsx"],"sourcesContent":["import React from \"react\";\nimport SearchUI from \"@webiny/app-admin/components/SearchUI\";\n\nimport { SearchWrapper } from \"./styled\";\n\ninterface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n}\n\nexport const Search: React.VFC<SearchProps> = ({ value, onChange }) => {\n    return (\n        <SearchWrapper>\n            <SearchUI value={value} onChange={onChange} />\n        </SearchWrapper>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AAOO,IAAMG,MAA8B,GAAG,SAAjCA,MAA8BA,CAAAC,IAAA,EAA4B;EAAA,IAAtBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAC5D,oBACIR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,OAAA,CAAAO,aAAa,qBACVX,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,SAAA,CAAAM,OAAQ;IAACF,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEA;EAAS,CAAE,CAClC,CAAC;AAExB,CAAC;AAACI,OAAA,CAAAP,MAAA,GAAAA,MAAA"}

package/components/Search/index.d.ts

@@ -0,0 +1 @@
+export * from "./Search";

package/components/{TagList → Search}/index.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _TagList = require("./TagList");
-Object.keys(_TagList).forEach(function (key) {
+var _Search = require("./Search");
+Object.keys(_Search).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _TagList[key]) return;
+  if (key in exports && exports[key] === _Search[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _TagList[key];
+      return _Search[key];
     }
   });
 });

package/components/Search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Search","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.tsx"],"sourcesContent":["export * from \"./Search\";\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/components/Search/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const SearchWrapper: 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/Search/styled.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchWrapper = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var SearchWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "SearchWrapper",
+  target: "e1883spp0"
+})("width:300px;height:34px;border:1px solid rgba(0,0,0,0.12);");
+exports.SearchWrapper = SearchWrapper;

package/components/Search/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_styled","_interopRequireDefault","require","SearchWrapper","styled","label","target","exports"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const SearchWrapper = styled(\"div\")`\n    width: 300px;\n    height: 34px;\n    border: 1px solid rgba(0, 0, 0, 0.12);\n`;\n"],"mappings":";;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEO,IAAMC,aAAa,oBAAGC,eAAM,EAAC,KAAK;EAAAC,KAAA;EAAAC,MAAA;AAAA,gEAIxC;AAACC,OAAA,CAAAJ,aAAA,GAAAA,aAAA"}

package/components/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./Dialogs";
 export * from "./FolderGrid";
 export * from "./FolderTree";
-export * from "./TagList";
+export * from "./Search";