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

package/components/Dialogs/DialogMove.js

@@ -0,0 +1,115 @@
+"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.EntryDialogMove = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _appAdmin = require("@webiny/app-admin");
+var _i18n = require("@webiny/app/i18n");
+var _Button = require("@webiny/ui/Button");
+var _Dialog = require("@webiny/ui/Dialog");
+var _Progress = require("@webiny/ui/Progress");
+var _Typography = require("@webiny/ui/Typography");
+var _ = require("./..");
+var _hooks = require("../../hooks");
+var _styled = require("./styled");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var t = _i18n.i18n.ns("app-aco/components/tree/dialog-move");
+var EntryDialogMove = function EntryDialogMove(_ref) {
+  var type = _ref.type,
+    searchRecord = _ref.searchRecord,
+    onClose = _ref.onClose,
+    open = _ref.open;
+  var _useRecords = (0, _hooks.useRecords)(type, searchRecord.location.folderId || "ROOT"),
+    updateRecord = _useRecords.updateRecord,
+    loading = _useRecords.loading;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dialogOpen = _useState2[0],
+    setDialogOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    folderId = _useState4[0],
+    setFolderId = _useState4[1];
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var id, title, _type, content, data;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            if (!folderId) {
+              _context.next = 6;
+              break;
+            }
+            id = searchRecord.id, title = searchRecord.title, _type = searchRecord.type, content = searchRecord.content, data = searchRecord.data;
+            _context.next = 5;
+            return updateRecord({
+              id: id,
+              title: title,
+              type: _type,
+              content: content,
+              data: data,
+              location: {
+                folderId: folderId
+              }
+            });
+          case 5:
+            showSnackbar(t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Item moved successfully!"]))));
+          case 6:
+            setDialogOpen(false);
+            _context.next = 12;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            showSnackbar(_context.t0.message);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+    return function onSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  (0, _react.useEffect)(function () {
+    setDialogOpen(open);
+  }, [open]);
+  return /*#__PURE__*/_react.default.createElement(_styled.DialogContainer, {
+    open: dialogOpen,
+    onClose: onClose
+  }, dialogOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Move item"])))), loading.UPDATE && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+    label: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Moving item..."])))
+  }), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body1"
+  }, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Choose the folder where you want to move the item. You can always create a new one if you prefer."])))), /*#__PURE__*/_react.default.createElement(_styled.DialogFoldersContainer, null, /*#__PURE__*/_react.default.createElement(_.FolderTree, {
+    title: t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Root folder"]))),
+    type: type,
+    focusedFolderId: folderId || searchRecord.location.folderId,
+    onFolderClick: function onFolderClick(data) {
+      return setFolderId(data === null || data === void 0 ? void 0 : data.id);
+    },
+    onTitleClick: function onTitleClick() {
+      return setFolderId("ROOT");
+    },
+    enableCreate: true
+  }))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, {
+    onClick: function onClick() {
+      setDialogOpen(false);
+    }
+  }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    onClick: onSubmit
+  }, t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Move item"])))))));
+};
+exports.EntryDialogMove = EntryDialogMove;

package/components/Dialogs/DialogMove.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","EntryDialogMove","type","searchRecord","onClose","open","useRecords","location","folderId","updateRecord","loading","useState","dialogOpen","setDialogOpen","setFolderId","useSnackbar","showSnackbar","onSubmit","id","title","content","data","message","useEffect","UPDATE"],"sources":["DialogMove.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ButtonPrimary } from \"@webiny/ui/Button\";\nimport {\n    DialogTitle,\n    DialogActions,\n    DialogContent,\n    DialogOnClose,\n    DialogCancel\n} from \"@webiny/ui/Dialog\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nimport { FolderTree } from \"~/components\";\nimport { useRecords } from \"~/hooks\";\n\nimport { DialogContainer, DialogFoldersContainer } from \"./styled\";\n\nimport { SearchRecordItem } from \"~/types\";\n\ntype Props = {\n    type: string;\n    searchRecord: SearchRecordItem;\n    open: boolean;\n    onClose: DialogOnClose;\n};\n\nconst t = i18n.ns(\"app-aco/components/tree/dialog-move\");\n\nexport const EntryDialogMove: React.FC<Props> = ({ type, searchRecord, onClose, open }) => {\n    const { updateRecord, loading } = useRecords(type, searchRecord.location.folderId || \"ROOT\");\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [folderId, setFolderId] = useState<string>();\n    const { showSnackbar } = useSnackbar();\n\n    const onSubmit = async () => {\n        try {\n            if (folderId) {\n                const { id, title, type, content, data } = searchRecord;\n                await updateRecord({\n                    id,\n                    title,\n                    type,\n                    content,\n                    data,\n                    location: {\n                        folderId\n                    }\n                });\n\n                showSnackbar(t`Item moved successfully!`);\n            }\n            setDialogOpen(false);\n        } catch (error) {\n            showSnackbar(error.message);\n        }\n    };\n\n    useEffect(() => {\n        setDialogOpen(open);\n    }, [open]);\n\n    return (\n        <DialogContainer open={dialogOpen} onClose={onClose}>\n            {dialogOpen && (\n                <>\n                    <DialogTitle>{t`Move item`}</DialogTitle>\n                    {loading.UPDATE && <CircularProgress label={t`Moving item...`} />}\n                    <DialogContent>\n                        <Typography use=\"body1\">{t`Choose the folder where you want to move the item. You can always create a new one if you prefer.`}</Typography>\n                        <DialogFoldersContainer>\n                            <FolderTree\n                                title={t`Root folder`}\n                                type={type}\n                                focusedFolderId={folderId || searchRecord.location.folderId}\n                                onFolderClick={data => setFolderId(data?.id)}\n                                onTitleClick={() => setFolderId(\"ROOT\")}\n                                enableCreate={true}\n                            />\n                        </DialogFoldersContainer>\n                    </DialogContent>\n                    <DialogActions>\n                        <DialogCancel\n                            onClick={() => {\n                                setDialogOpen(false);\n                            }}\n                        >\n                            {t`Cancel`}\n                        </DialogCancel>\n                        <ButtonPrimary onClick={onSubmit}>{t`Move item`}</ButtonPrimary>\n                    </DialogActions>\n                </>\n            )}\n        </DialogContainer>\n    );\n};\n"],"mappings":"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"}

package/components/Dialogs/DialogUpdate.js

@@ -12,44 +12,47 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _i18n = require("@webiny/app/i18n");
 var _appAdmin = require("@webiny/app-admin");
-var _AutoComplete = require("@webiny/ui/AutoComplete");
+var _form = require("@webiny/form");
 var _Button = require("@webiny/ui/Button");
 var _Dialog = require("@webiny/ui/Dialog");
 var _Grid = require("@webiny/ui/Grid");
 var _Input = require("@webiny/ui/Input");
 var _Progress = require("@webiny/ui/Progress");
-var _form = require("@webiny/form");
+var _Typography = require("@webiny/ui/Typography");
 var _validation = require("@webiny/validation");
-var _i18n = require("@webiny/app/i18n");
+var _ = require("./..");
 var _useFolders2 = require("../../hooks/useFolders");
 var _styled = require("./styled");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 var t = _i18n.i18n.ns("app-aco/components/tree/dialog-update");
 var FolderDialogUpdate = function FolderDialogUpdate(_ref) {
   var folder = _ref.folder,
     onClose = _ref.onClose,
     open = _ref.open;
   var _useFolders = (0, _useFolders2.useFolders)(folder.type),
-    folders = _useFolders.folders,
     loading = _useFolders.loading,
     updateFolder = _useFolders.updateFolder;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dialogOpen = _useState2[0],
     setDialogOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    parentId = _useState4[0],
+    setParentId = _useState4[1];
   var _useSnackbar = (0, _appAdmin.useSnackbar)(),
     showSnackbar = _useSnackbar.showSnackbar;
   var onSubmit = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(data) {
-      var _data$parent;
       return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.prev = 0;
             _context.next = 3;
             return updateFolder((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, folder), data), {}, {
-              parentId: ((_data$parent = data.parent) === null || _data$parent === void 0 ? void 0 : _data$parent.id) || null
+              parentId: parentId || null
             }));
           case 3:
             setDialogOpen(false);
@@ -70,14 +73,12 @@ var FolderDialogUpdate = function FolderDialogUpdate(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  (0, _react.useEffect)(function () {
+    setParentId(folder.parentId);
+  }, [folder.parentId]);
   (0, _react.useEffect)(function () {
     setDialogOpen(open);
   }, [open]);
-  var parentFolder = (0, _react.useMemo)(function () {
-    return folders.find(function (el) {
-      return el.id == folder.parentId;
-    });
-  }, [folder]);
   return /*#__PURE__*/_react.default.createElement(_styled.DialogContainer, {
     open: dialogOpen,
     onClose: onClose
@@ -85,11 +86,7 @@ var FolderDialogUpdate = function FolderDialogUpdate(_ref) {
     onSubmit: onSubmit,
     data: {
       title: folder.title,
-      slug: folder.slug,
-      parent: parentFolder && {
-        id: parentFolder.id,
-        name: parentFolder.title
-      }
+      slug: folder.slug
     }
   }, function (_ref3) {
     var Bind = _ref3.Bind,
@@ -113,38 +110,26 @@ var FolderDialogUpdate = function FolderDialogUpdate(_ref) {
       value: folder.slug
     }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
       span: 12
-    }, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "parent"
-    }, function (_ref4) {
-      var value = _ref4.value,
-        onBindChange = _ref4.onChange;
-      return /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, {
-        value: value,
-        options: folders.filter(function (el) {
-          return el.id !== folder.id;
-        }).map(function (_ref5) {
-          var id = _ref5.id,
-            title = _ref5.title;
-          return {
-            id: id,
-            name: title
-          };
-        }),
-        label: t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Parent"]))),
-        onChange: function onChange(value, selection) {
-          onBindChange({
-            id: value,
-            name: selection === null || selection === void 0 ? void 0 : selection.name
-          });
-        }
-      });
-    })))), /*#__PURE__*/_react.default.createElement(_styled.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+      use: "body1"
+    }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Parent folder"])))), /*#__PURE__*/_react.default.createElement(_styled.DialogFoldersContainer, null, /*#__PURE__*/_react.default.createElement(_.FolderTree, {
+      title: t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Root folder"]))),
+      type: folder.type,
+      focusedFolderId: parentId || undefined,
+      hiddenFolderIds: [folder.id],
+      onFolderClick: function onFolderClick(data) {
+        return setParentId((data === null || data === void 0 ? void 0 : data.id) || null);
+      },
+      onTitleClick: function onTitleClick() {
+        return setParentId(null);
+      }
+    }))))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, {
       onClick: function onClick() {
         setDialogOpen(false);
       }
-    }, t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    }, t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
       onClick: submit
-    }, t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Update Folder"]))))));
+    }, t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["Update Folder"]))))));
   })));
 };
 exports.FolderDialogUpdate = FolderDialogUpdate;

package/components/Dialogs/DialogUpdate.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","FolderDialogUpdate","folder","onClose","open","useFolders","type","folders","loading","updateFolder","useState","dialogOpen","setDialogOpen","useSnackbar","showSnackbar","onSubmit","data","parentId","parent","id","message","useEffect","parentFolder","useMemo","find","el","title","slug","name","Bind","submit","UPDATE","validation","create","value","onBindChange","onChange","filter","map","selection"],"sources":["DialogUpdate.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\n\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { ButtonPrimary, ButtonDefault } from \"@webiny/ui/Button\";\nimport { DialogTitle, DialogContent, DialogOnClose } from \"@webiny/ui/Dialog\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { i18n } from \"@webiny/app/i18n\";\n\nimport { useFolders } from \"~/hooks/useFolders\";\n\nimport { DialogContainer, DialogActions } from \"./styled\";\n\nimport { FolderItem } from \"~/types\";\n\ntype Props = {\n    folder: FolderItem;\n    open: boolean;\n    onClose: DialogOnClose;\n};\n\ninterface SubmitData extends Omit<FolderItem, \"id\" | \"parentId\"> {\n    parent: {\n        id: string | null;\n        name?: string;\n    };\n}\n\nconst t = i18n.ns(\"app-aco/components/tree/dialog-update\");\n\nexport const FolderDialogUpdate: React.FC<Props> = ({ folder, onClose, open }) => {\n    const { folders, loading, updateFolder } = useFolders(folder.type);\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const { showSnackbar } = useSnackbar();\n\n    const onSubmit: FormOnSubmit<SubmitData> = async data => {\n        try {\n            await updateFolder({\n                ...folder,\n                ...data,\n                parentId: data.parent?.id || null\n            });\n            setDialogOpen(false);\n            showSnackbar(t`Folder updated successfully!`);\n        } catch (error) {\n            showSnackbar(error.message);\n        }\n    };\n\n    useEffect(() => {\n        setDialogOpen(open);\n    }, [open]);\n\n    const parentFolder = useMemo(() => folders.find(el => el.id == folder.parentId), [folder]);\n\n    return (\n        <DialogContainer open={dialogOpen} onClose={onClose}>\n            {dialogOpen && (\n                <>\n                    <Form<SubmitData>\n                        onSubmit={onSubmit}\n                        data={{\n                            title: folder.title,\n                            slug: folder.slug,\n                            parent: parentFolder && {\n                                id: parentFolder.id,\n                                name: parentFolder.title\n                            }\n                        }}\n                    >\n                        {({ Bind, submit }) => (\n                            <>\n                                {loading.UPDATE && (\n                                    <CircularProgress label={t`Updating folder...`} />\n                                )}\n                                <DialogTitle>{t`Update folder`}</DialogTitle>\n                                <DialogContent>\n                                    <Grid>\n                                        <Cell span={12}>\n                                            <Bind\n                                                name={\"title\"}\n                                                validators={[\n                                                    validation.create(\"required,minLength:3\")\n                                                ]}\n                                            >\n                                                <Input label={t`Title`} />\n                                            </Bind>\n                                        </Cell>\n                                        <Cell span={12}>\n                                            <Bind\n                                                name={\"slug\"}\n                                                validators={[\n                                                    validation.create(\"required,minLength:3,slug\")\n                                                ]}\n                                            >\n                                                <Input label={t`Slug`} value={folder.slug} />\n                                            </Bind>\n                                        </Cell>\n                                        <Cell span={12}>\n                                            <Bind name={\"parent\"}>\n                                                {({ value, onChange: onBindChange }) => {\n                                                    return (\n                                                        <AutoComplete\n                                                            value={value}\n                                                            options={folders\n                                                                .filter(el => el.id !== folder.id)\n                                                                .map(({ id, title }) => ({\n                                                                    id,\n                                                                    name: title\n                                                                }))}\n                                                            label={t`Parent`}\n                                                            onChange={(value, selection) => {\n                                                                onBindChange({\n                                                                    id: value,\n                                                                    name: selection?.name\n                                                                });\n                                                            }}\n                                                        />\n                                                    );\n                                                }}\n                                            </Bind>\n                                        </Cell>\n                                    </Grid>\n                                </DialogContent>\n                                <DialogActions>\n                                    <ButtonDefault\n                                        onClick={() => {\n                                            setDialogOpen(false);\n                                        }}\n                                    >\n                                        {t`Cancel`}\n                                    </ButtonDefault>\n                                    <ButtonPrimary onClick={submit}>\n                                        {t`Update Folder`}\n                                    </ButtonPrimary>\n                                </DialogActions>\n                            </>\n                        )}\n                    </Form>\n                </>\n            )}\n        </DialogContainer>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","FolderDialogUpdate","folder","onClose","open","useFolders","type","loading","updateFolder","useState","dialogOpen","setDialogOpen","parentId","setParentId","useSnackbar","showSnackbar","onSubmit","data","message","useEffect","title","slug","Bind","submit","UPDATE","validation","create","undefined","id"],"sources":["DialogUpdate.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { ButtonPrimary } from \"@webiny/ui/Button\";\nimport {\n    DialogTitle,\n    DialogActions,\n    DialogContent,\n    DialogOnClose,\n    DialogCancel\n} from \"@webiny/ui/Dialog\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { validation } from \"@webiny/validation\";\n\nimport { FolderTree } from \"~/components\";\nimport { useFolders } from \"~/hooks/useFolders\";\n\nimport { DialogContainer, DialogFoldersContainer } from \"./styled\";\n\nimport { FolderItem } from \"~/types\";\n\ntype Props = {\n    folder: FolderItem;\n    open: boolean;\n    onClose: DialogOnClose;\n};\n\ntype SubmitData = Pick<FolderItem, \"title\" | \"slug\">;\n\nconst t = i18n.ns(\"app-aco/components/tree/dialog-update\");\n\nexport const FolderDialogUpdate: React.FC<Props> = ({ folder, onClose, open }) => {\n    const { loading, updateFolder } = useFolders(folder.type);\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [parentId, setParentId] = useState<string | null>();\n    const { showSnackbar } = useSnackbar();\n\n    const onSubmit: FormOnSubmit<SubmitData> = async data => {\n        try {\n            await updateFolder({\n                ...folder,\n                ...data,\n                parentId: parentId || null\n            });\n            setDialogOpen(false);\n            showSnackbar(t`Folder updated successfully!`);\n        } catch (error) {\n            showSnackbar(error.message);\n        }\n    };\n\n    useEffect(() => {\n        setParentId(folder.parentId);\n    }, [folder.parentId]);\n\n    useEffect(() => {\n        setDialogOpen(open);\n    }, [open]);\n\n    return (\n        <DialogContainer open={dialogOpen} onClose={onClose}>\n            {dialogOpen && (\n                <>\n                    <Form<SubmitData>\n                        onSubmit={onSubmit}\n                        data={{\n                            title: folder.title,\n                            slug: folder.slug\n                        }}\n                    >\n                        {({ Bind, submit }) => (\n                            <>\n                                {loading.UPDATE && (\n                                    <CircularProgress label={t`Updating folder...`} />\n                                )}\n                                <DialogTitle>{t`Update folder`}</DialogTitle>\n                                <DialogContent>\n                                    <Grid>\n                                        <Cell span={12}>\n                                            <Bind\n                                                name={\"title\"}\n                                                validators={[\n                                                    validation.create(\"required,minLength:3\")\n                                                ]}\n                                            >\n                                                <Input label={t`Title`} />\n                                            </Bind>\n                                        </Cell>\n                                        <Cell span={12}>\n                                            <Bind\n                                                name={\"slug\"}\n                                                validators={[\n                                                    validation.create(\"required,minLength:3,slug\")\n                                                ]}\n                                            >\n                                                <Input label={t`Slug`} value={folder.slug} />\n                                            </Bind>\n                                        </Cell>\n                                        <Cell span={12}>\n                                            <Typography use=\"body1\">{t`Parent folder`}</Typography>\n                                            <DialogFoldersContainer>\n                                                <FolderTree\n                                                    title={t`Root folder`}\n                                                    type={folder.type}\n                                                    focusedFolderId={parentId || undefined}\n                                                    hiddenFolderIds={[folder.id]}\n                                                    onFolderClick={data =>\n                                                        setParentId(data?.id || null)\n                                                    }\n                                                    onTitleClick={() => setParentId(null)}\n                                                />\n                                            </DialogFoldersContainer>\n                                        </Cell>\n                                    </Grid>\n                                </DialogContent>\n                                <DialogActions>\n                                    <DialogCancel\n                                        onClick={() => {\n                                            setDialogOpen(false);\n                                        }}\n                                    >\n                                        {t`Cancel`}\n                                    </DialogCancel>\n                                    <ButtonPrimary onClick={submit}>\n                                        {t`Update Folder`}\n                                    </ButtonPrimary>\n                                </DialogActions>\n                            </>\n                        )}\n                    </Form>\n                </>\n            )}\n        </DialogContainer>\n    );\n};\n"],"mappings":"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"}

package/components/Dialogs/styled.d.ts

@@ -1,8 +1,18 @@
 /// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
 import { Dialog } from "@webiny/ui/Dialog";
-export declare const DialogContainer: import("@emotion/styled-base").StyledComponent<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<Dialog>, Pick<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<Dialog>, keyof import("@webiny/ui/Dialog").DialogProps>, object>;
-export declare const DialogActions: import("@emotion/styled-base").StyledComponent<import("@webiny/ui/Dialog").DialogActionsProps & {
-    children?: import("react").ReactNode;
-}, Pick<import("@webiny/ui/Dialog").DialogActionsProps & {
+export declare const DialogContainer: import("@emotion/styled").StyledComponent<import("@webiny/ui/Dialog").DialogProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {
+    ref?: import("react").Ref<Dialog> | undefined;
+}>;
+export declare const DialogActions: import("@emotion/styled").StyledComponent<import("@webiny/ui/Dialog").DialogActionsProps & {
     children?: import("react").ReactNode;
-}, keyof import("@webiny/ui/Dialog").DialogActionsProps>, object>;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DialogFoldersContainer: 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/Dialogs/styled.js

@@ -4,16 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DialogContainer = exports.DialogActions = void 0;
+exports.DialogFoldersContainer = exports.DialogContainer = exports.DialogActions = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Dialog = require("@webiny/ui/Dialog");
 var DialogContainer = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
   label: "DialogContainer",
   target: "e1ys0rdp0"
-})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:initial !important;}");
+})(".mdc-dialog__surface{width:600px;min-width:600px;}");
 exports.DialogContainer = DialogContainer;
 var DialogActions = /*#__PURE__*/(0, _styled.default)(_Dialog.DialogActions, {
   label: "DialogActions",
   target: "e1ys0rdp1"
 })("justify-content:space-between;");
-exports.DialogActions = DialogActions;
+exports.DialogActions = DialogActions;
+var DialogFoldersContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "DialogFoldersContainer",
+  target: "e1ys0rdp2"
+})("max-height:30vh;overflow-y:scroll;margin-top:8px;padding:8px;background:var(--mdc-theme-background);");
+exports.DialogFoldersContainer = DialogFoldersContainer;

package/components/Dialogs/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["DialogContainer","styled","Dialog","DialogActions","DefaultDialogActions"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog, DialogActions as DefaultDialogActions } from \"@webiny/ui/Dialog\";\n\nexport const DialogContainer = styled(Dialog)`\n    .mdc-dialog__surface {\n        width: 600px;\n        min-width: 600px;\n        overflow: initial;\n    }\n\n    .mdc-dialog__content {\n        overflow: initial !important;\n    }\n`;\n\nexport const DialogActions = styled(DefaultDialogActions)`\n    justify-content: space-between;\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,eAAe,oBAAGC,eAAM,EAACC,cAAM;EAAA;EAAA;AAAA,2HAU3C;AAAC;AAEK,IAAMC,aAAa,oBAAGF,eAAM,EAACG,qBAAoB;EAAA;EAAA;AAAA,oCAEvD;AAAC"}
+{"version":3,"names":["DialogContainer","styled","Dialog","DialogActions","DefaultDialogActions","DialogFoldersContainer"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog, DialogActions as DefaultDialogActions } from \"@webiny/ui/Dialog\";\n\nexport const DialogContainer = styled(Dialog)`\n    .mdc-dialog__surface {\n        width: 600px;\n        min-width: 600px;\n    }\n`;\n\nexport const DialogActions = styled(DefaultDialogActions)`\n    justify-content: space-between;\n`;\n\nexport const DialogFoldersContainer = styled(\"div\")`\n    max-height: 30vh;\n    overflow-y: scroll;\n    margin-top: 8px;\n    padding: 8px;\n    background: var(--mdc-theme-background);\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,eAAe,oBAAGC,eAAM,EAACC,cAAM;EAAA;EAAA;AAAA,wDAK3C;AAAC;AAEK,IAAMC,aAAa,oBAAGF,eAAM,EAACG,qBAAoB;EAAA;EAAA;AAAA,oCAEvD;AAAC;AAEK,IAAMC,sBAAsB,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,0GAMjD;AAAC"}

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

@@ -1,18 +1,18 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
-export declare const Button: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Pick<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, 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 Icon: import("@emotion/styled-base").StyledComponent<Pick<import("react").SVGProps<SVGSVGElement> & {
+/// <reference types="web" />
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+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 declare const Icon: import("@emotion/styled").StyledComponent<import("react").SVGProps<SVGSVGElement> & {
     alt?: string | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "string" | "filter" | "values" | "fill" | "name" | "type" | "style" | "method" | "target" | "lang" | "className" | "id" | "children" | "tabIndex" | "end" | "local" | "color" | "clip" | "stroke" | "x" | "y" | "clipPath" | "cursor" | "direction" | "display" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "additive" | "path" | "key" | "alt" | "crossOrigin" | "href" | "max" | "media" | "min" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accentHeight" | "accumulate" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, Pick<Pick<import("react").SVGProps<SVGSVGElement> & {
-    alt?: string | undefined;
 } & {
-    children?: import("react").ReactNode;
-}, "string" | "filter" | "values" | "fill" | "name" | "type" | "style" | "method" | "target" | "lang" | "className" | "id" | "children" | "tabIndex" | "end" | "local" | "color" | "clip" | "stroke" | "x" | "y" | "clipPath" | "cursor" | "direction" | "display" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "additive" | "path" | "key" | "alt" | "crossOrigin" | "href" | "max" | "media" | "min" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accentHeight" | "accumulate" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "string" | "filter" | "values" | "fill" | "name" | "type" | "style" | "method" | "target" | "lang" | "className" | "id" | "children" | "tabIndex" | "end" | "local" | "color" | "clip" | "stroke" | "x" | "y" | "clipPath" | "cursor" | "direction" | "display" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "additive" | "path" | "alt" | "crossOrigin" | "href" | "max" | "media" | "min" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accentHeight" | "accumulate" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object>;
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/Tree/ButtonCreate/styled.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.IconContainer = exports.Icon = exports.Button = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _add_circle_outline = require("@material-design-icons/svg/filled/add_circle_outline.svg");
+var _add_circle_outline = require("@material-design-icons/svg/outlined/add_circle_outline.svg");
 var Button = /*#__PURE__*/(0, _styled.default)("button", {
   label: "Button",
   target: "e14jl0o30"

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

@@ -1 +1 @@
-{"version":3,"names":["Button","styled","IconContainer","Icon","Plus"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { ReactComponent as Plus } from \"@material-design-icons/svg/filled/add_circle_outline.svg\";\n\nexport const Button = styled(\"button\")`\n    background: none;\n    border: none;\n    cursor: pointer;\n    outline: none;\n    font-family: var(--mdc-typography-font-family);\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n    display: flex;\n    align-items: center;\n    font-size: 1em;\n    padding: 8px;\n`;\n\nexport const IconContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const Icon = styled(Plus)`\n    padding: 0 4px;\n    height: 16px;\n    width: 16px;\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAAC,QAAQ;EAAA;EAAA;AAAA,uOAYpC;AAAC;AAEK,IAAMC,aAAa,oBAAGD,eAAM;EAAA;EAAA;AAAA,6DAIlC;AAAC;AAEK,IAAME,IAAI,oBAAGF,eAAM,EAACG,kCAAI;EAAA;EAAA;AAAA,2CAI9B;AAAC"}
+{"version":3,"names":["Button","styled","IconContainer","Icon","Plus"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { ReactComponent as Plus } from \"@material-design-icons/svg/outlined/add_circle_outline.svg\";\n\nexport const Button = styled(\"button\")`\n    background: none;\n    border: none;\n    cursor: pointer;\n    outline: none;\n    font-family: var(--mdc-typography-font-family);\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n    display: flex;\n    align-items: center;\n    font-size: 1em;\n    padding: 8px;\n`;\n\nexport const IconContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const Icon = styled(Plus)`\n    padding: 0 4px;\n    height: 16px;\n    width: 16px;\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAAC,QAAQ;EAAA;EAAA;AAAA,uOAYpC;AAAC;AAEK,IAAMC,aAAa,oBAAGD,eAAM;EAAA;EAAA;AAAA,6DAIlC;AAAC;AAEK,IAAME,IAAI,oBAAGF,eAAM,EAACG,kCAAI;EAAA;EAAA;AAAA,2CAI9B;AAAC"}

package/components/Tree/Empty/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/List/index.d.ts

@@ -5,9 +5,11 @@ declare type Props = {
     type: string;
     folders: FolderItem[];
     focusedFolderId?: string;
+    hiddenFolderIds?: string[];
+    enableActions?: boolean;
     onFolderClick: (data: NodeModel<DndItemData>["data"]) => void;
     onDragStart: () => void;
     onDragEnd: () => void;
 };
-export declare const List: ({ type, folders, onFolderClick, focusedFolderId, onDragStart, onDragEnd }: Props) => JSX.Element;
+export declare const List: ({ type, folders, onFolderClick, focusedFolderId, hiddenFolderIds, enableActions, onDragStart, onDragEnd }: Props) => JSX.Element;
 export {};

package/components/Tree/List/index.js

@@ -27,6 +27,8 @@ var List = function List(_ref) {
     folders = _ref.folders,
     onFolderClick = _ref.onFolderClick,
     focusedFolderId = _ref.focusedFolderId,
+    hiddenFolderIds = _ref.hiddenFolderIds,
+    enableActions = _ref.enableActions,
     onDragStart = _ref.onDragStart,
     onDragEnd = _ref.onDragEnd;
   var _useFolders = (0, _hooks.useFolders)(type),
@@ -59,7 +61,7 @@ var List = function List(_ref) {
     setSelectedFolder = _useState12[1];
   (0, _useDeepCompareEffect.default)(function () {
     if (folders) {
-      setTreeData((0, _utils.createTreeData)(folders, focusedFolderId));
+      setTreeData((0, _utils.createTreeData)(folders, focusedFolderId, hiddenFolderIds));
     }
 
     /**
@@ -139,6 +141,7 @@ var List = function List(_ref) {
         node: node,
         depth: depth,
         isOpen: isOpen,
+        enableActions: enableActions,
         onToggle: onToggle,
         onClick: function onClick(data) {
           return onFolderClick(data);